/*
Theme Name: MontOfi
Theme URI: https://montofi.es/
Author: MontOfi
Description: Web comercial de MontOfi · traslado, montaje y diseño de espacios en Alicante. Tema a medida con modo claro/oscuro, efectos de scroll y el módulo «Rediseña tu espacio».
Version: 2.1.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: Propietario · MontOfi
Text Domain: montofi
*/

/* =====================================================================
   MontOfi · web comercial 2.0
   Paleta: papel blanco o negro según el usuario, tinta, celeste como único
   color de marca y dorado solo en detalles pequeños (marcas, numerales,
   la barra de progreso). Tres bloques que tocar si cambia la paleta:
   :root, el @media de sistema oscuro y :root[data-theme="dark"].
   ===================================================================== */
:root{
  --paper:#F5F8FA;
  --surface:#FFFFFF;
  --sunk:#E7EFF5;
  --ink:#0D1317;
  --muted:#56656F;
  --line:#CCDBE5;
  --line-soft:#DEE9F0;
  --accent:#1B7FBE;
  --accent-soft:rgba(27,127,190,.09);
  --celeste:#6FC2EC;
  --oro:#C9A227;
  --oro-soft:rgba(201,162,39,.16);
  --glass:rgba(245,248,250,.74);
  --shadow:0 1px 2px rgba(13,19,23,.06);
  --shadow-lg:0 24px 60px -24px rgba(13,19,23,.28);
  --glow:rgba(111,194,236,.35);
  --amb:.42;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A0E11;
    --surface:#121A1F;
    --sunk:#1A242A;
    --ink:#EAF1F6;
    --muted:#93A5B0;
    --line:#27333B;
    --line-soft:#1C262C;
    --accent:#6FC2EC;
    --accent-soft:rgba(111,194,236,.12);
    --celeste:#9AD6F5;
    --oro:#E3C05A;
    --oro-soft:rgba(227,192,90,.16);
    --glass:rgba(10,14,17,.64);
    --shadow:none;
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
    --glow:rgba(111,194,236,.22);
    --amb:.7;
  }
}
:root[data-theme="dark"]{
  --paper:#0A0E11;--surface:#121A1F;--sunk:#1A242A;--ink:#EAF1F6;--muted:#93A5B0;
  --line:#27333B;--line-soft:#1C262C;--accent:#6FC2EC;--accent-soft:rgba(111,194,236,.12);
  --celeste:#9AD6F5;--oro:#E3C05A;--oro-soft:rgba(227,192,90,.16);
  --glass:rgba(10,14,17,.64);--shadow:none;--shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);--glow:rgba(111,194,236,.22);--amb:.7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Figtree",system-ui,sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(16px,3vw,28px)}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;margin:0;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.4vw,5.4rem);line-height:.94;letter-spacing:-.04em;font-weight:700;font-stretch:112%}
h2{font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.06;letter-spacing:-.025em;font-weight:600;font-stretch:106%}
h3{font-size:1.08rem;line-height:1.28;letter-spacing:-.01em;font-weight:600}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit}
.mono{font-family:"DM Mono",ui-monospace,monospace}
.eyebrow{font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--oro);flex:none}
.rule{height:1px;background:var(--line-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--celeste);color:#0D1317}

/* ---------- animaciones: solo se esconden cosas si hay JS y GSAP ---------- */
html.js-anim [data-reveal],html.js-anim [data-reveal-group]>*{opacity:0;transform:translateY(26px)}
html.js-anim .h1w{opacity:0;transform:translateY(.55em) rotate(2deg);display:inline-block;transform-origin:0 100%}
@media (prefers-reduced-motion: reduce){
  html.js-anim [data-reveal],html.js-anim [data-reveal-group]>*,html.js-anim .h1w{opacity:1;transform:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- barra de progreso de lectura ---------- */
.progress{position:fixed;left:0;top:var(--wp-admin--admin-bar--height,0px);height:2px;width:100%;z-index:60;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--oro));transform:scaleX(0);transform-origin:0 50%}

/* ---------- barra superior de cristal ---------- */
.top{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
@media screen and (max-width:600px){.admin-bar .top,.admin-bar .progress{top:0}}
.top.scrolled{border-bottom-color:var(--line-soft);box-shadow:0 10px 30px -22px rgba(13,19,23,.35)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:baseline;gap:11px;text-decoration:none}
.logo b{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:118%;font-size:1.36rem;letter-spacing:-.03em}
.logo b i{font-style:normal;color:var(--accent)}
.logo span{font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);max-width:22ch;line-height:1.3}
.nav{display:none;gap:4px;align-items:center}
.nav a{font-size:.9rem;font-weight:500;text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:999px;transition:color .16s,background .16s}
.nav a:hover{color:var(--ink);background:var(--accent-soft)}
.nav a.ia{color:var(--accent)}
.nav a.ia::before{content:"✦ ";color:var(--oro)}
@media(min-width:1000px){.nav{display:flex}.logo span{display:block}}
@media(max-width:999px){.logo span{display:none}}
.top .acts{display:flex;align-items:center;gap:8px}
.tema{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);width:38px;height:38px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:border-color .16s,background .16s}
.tema:hover{border-color:var(--accent);background:var(--accent-soft)}
.tema svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tema .sol{display:none}
:root[data-theme="dark"] .tema .luna{display:none}
:root[data-theme="dark"] .tema .sol{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tema .luna{display:none}:root:not([data-theme="light"]) .tema .sol{display:block}}
.top .cta{font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.05em;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;transition:background .16s,border-color .16s,color .16s;white-space:nowrap}
.top .cta:hover{background:var(--accent);border-color:var(--accent);color:#0D1317}
@media(max-width:560px){.top .cta{display:none}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:.95rem;padding:14px 24px;border-radius:999px;border:1px solid var(--ink);cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;will-change:transform}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#0D1317}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line);font-weight:500}
.btn.sec:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn.ia{background:var(--accent);border-color:var(--accent);color:#0D1317}
.btn.ia:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn .ar{display:inline-block;transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.btn:focus-visible,.cta:focus-visible,.tema:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- hero: la transformación ---------- */
.hero{position:relative;padding:26px 0 8px}
.hero .grid{display:grid;grid-template-areas:"htop" "stage" "hbottom";gap:26px;align-items:center}
.hero .h-top{grid-area:htop;display:flex;flex-direction:column;gap:18px}
.hero .h-bottom{grid-area:hbottom;display:flex;flex-direction:column;gap:22px}
.hero .tf{grid-area:stage}
@media(min-width:1000px){
  .hero{min-height:calc(100svh - 70px);display:grid;align-items:center;padding:34px 0 18px}
  .hero .grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"htop stage" "hbottom stage";column-gap:clamp(40px,5vw,76px);row-gap:28px}
  .hero .h-top{align-self:end}
  .hero .h-bottom{align-self:start}
  .hero .tf{justify-self:end}
}
.hero h1{font-size:clamp(2.55rem,5.5vw,4.65rem);font-stretch:104%;line-height:.95;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{font-size:1.1rem;color:var(--muted);max-width:46ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .mini{display:flex;gap:18px;flex-wrap:wrap;font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero .mini span::before{content:"◆ ";color:var(--oro);font-size:.6em;vertical-align:middle}
.bg-grid{position:absolute;inset:-20% -10% -10%;z-index:-1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(55% 60% at 30% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(55% 60% at 30% 40%,#000 15%,transparent 75%)}
.glowball{position:absolute;width:52vw;height:52vw;max-width:720px;max-height:720px;border-radius:50%;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.9}
.glowball.b{left:-18vw;bottom:-14vw;background:radial-gradient(circle at 50% 50%,var(--oro-soft),transparent 60%)}

/* El escenario: el «antes» y, encima, el «después» que se destapa con un
   círculo de luz que nace de la iluminación nueva de cada propuesta. */
.tf{position:relative;margin:0;width:100%;display:flex;flex-direction:column;gap:12px;isolation:isolate}
@media(min-width:1000px){.tf{width:min(560px,100%,calc((100svh - 250px) * .9))}}
.tf-amb{position:absolute;left:-9%;right:-9%;top:-7%;bottom:9%;z-index:-1;pointer-events:none;opacity:var(--amb)}
.tf-amb .amb{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:48px;filter:blur(56px) saturate(1.35);opacity:0;will-change:opacity}
.tf-stage{position:relative;aspect-ratio:9/10;border-radius:26px;overflow:hidden;clip-path:inset(0 round 26px);background:#0D1317;
  box-shadow:0 44px 90px -46px rgba(13,19,23,.6),inset 0 0 0 1px rgba(255,255,255,.06);
  cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;
  animation:tf-entra 1.1s cubic-bezier(.2,.7,.2,1) both}
.tf-stage:active{cursor:grabbing}
.tf-stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@keyframes tf-entra{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.tf-scene{position:absolute;inset:0;opacity:0;will-change:transform,opacity;transform-origin:50% 45%}
.tf-scene:first-of-type{opacity:1}
.tf-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.tf-scene{--r0:0px;--r1:0px}
.tf-scene:first-of-type{--r0:4000px;--r1:4000px}
.tf-scene .d{-webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 var(--r0),transparent var(--r1));mask-image:radial-gradient(circle at var(--cx) var(--cy),#000 var(--r0),transparent var(--r1))}
.tf-light{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--cx,50%) var(--cy,10%),rgba(255,230,190,var(--g,0)) 0px,rgba(255,230,190,0) var(--gr,160px)),radial-gradient(circle at var(--cx,50%) var(--cy,10%),rgba(255,214,150,0) var(--l0,0px),rgba(255,224,176,.78) var(--l1,0px),rgba(255,214,150,0) var(--l2,0px))}
.tf-veil{position:absolute;left:0;right:0;bottom:0;height:48%;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(8,12,15,.82),rgba(8,12,15,.35) 45%,rgba(8,12,15,0))}
.tf-chip,.tf-count{position:absolute;top:16px;z-index:4;font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;
  background:rgba(13,19,23,.5);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .45s,color .45s}
.tf-chip{left:16px}
.tf-chip.d{background:#E3C05A;color:#0D1317}
.tf-count{right:16px}
.tf-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:4;margin:0;color:#fff;display:flex;flex-direction:column;gap:8px}
.tf-cap b{font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-stretch:104%;font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.tf-cap span{font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.tf-cap .in{animation:tf-texto .8s cubic-bezier(.2,.7,.2,1) both}
.tf-cap span.in{animation-delay:.1s}
@keyframes tf-texto{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
.tf-ctrl{display:flex;align-items:center;gap:12px}
.tf-bars{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tf-bar{appearance:none;border:0;background:transparent;padding:10px 0;cursor:pointer}
.tf-bar i{display:block;position:relative;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.tf-bar i b{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--oro))}
.tf-bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.tf-play{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);width:34px;height:34px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:border-color .16s,background .16s;flex:none}
.tf-play:hover{border-color:var(--accent);background:var(--accent-soft)}
.tf-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tf-play svg{width:14px;height:14px;fill:currentColor}
.tf-play .ic-play{display:none}
.tf-play[aria-pressed="true"] .ic-play{display:block}
.tf-play[aria-pressed="true"] .ic-pause{display:none}
.tf-hint{margin:0;font-size:.78rem;color:var(--muted)}
.tf-hint::before{content:"✦ ";color:var(--oro)}
@media (prefers-reduced-motion: reduce){.tf-stage{animation:none}.tf-cap .in{animation:none}}

/* ---------- franja de promesas ---------- */
.strip{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line);margin-top:34px;border-radius:16px;overflow:hidden}
@media(min-width:700px){.strip{grid-template-columns:repeat(3,1fr)}}
.strip div{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.strip .k{font-family:"Archivo",sans-serif;font-weight:600;font-stretch:106%;font-size:1.05rem;display:flex;gap:10px;align-items:baseline}
.strip .k::before{content:attr(data-n);font-family:"DM Mono",monospace;font-size:.62rem;color:var(--oro);letter-spacing:.1em}
.strip .v{font-size:.92rem;color:var(--muted)}

/* ---------- secciones ---------- */
section{padding:96px 0 0;position:relative}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px;max-width:58ch}
section>.wrap>p.intro,.intro{max-width:62ch;color:var(--muted);font-size:1.05rem}

/* ---------- Diseño con IA ---------- */
.sec-ia{padding-top:110px}
.sec-ia .grid{display:grid;gap:40px}
@media(min-width:1000px){.sec-ia .grid{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}}
.sec-ia .copy{display:flex;flex-direction:column;gap:22px;align-self:start}
@media(min-width:1000px){.sec-ia .copy{position:sticky;top:96px}}
.sec-ia .copy h2{font-size:clamp(2rem,4.8vw,3.2rem)}
.sec-ia .copy h2 em{font-style:normal;color:var(--accent)}
.sec-ia .pasos{display:grid;gap:12px;margin-top:6px}
.sec-ia .paso{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.sec-ia .paso i{font-style:normal;font-family:"DM Mono",monospace;font-size:.68rem;color:var(--oro);border:1px solid var(--oro);border-radius:999px;width:28px;height:28px;display:grid;place-items:center;margin-top:2px}
.sec-ia .paso b{display:block;font-weight:600}
.sec-ia .paso span{color:var(--muted);font-size:.95rem}
.sec-ia .nota{font-size:.82rem;color:var(--muted);border-left:2px solid var(--oro);padding-left:12px}

.iacard{border:1px solid var(--line);background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.iacard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--celeste),transparent 40%,transparent 60%,var(--oro));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none}
.iahead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--sunk)}
.iahead .t{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.iahead .dot{display:inline-flex;align-items:center;gap:7px;font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.iahead .dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oro);box-shadow:0 0 0 4px var(--oro-soft)}
.iahead .dot.on::before{background:#39C77A;box-shadow:0 0 0 4px rgba(57,199,122,.2)}
.iabody{padding:18px}
.drop{border:1.5px dashed var(--line);border-radius:16px;padding:34px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;transition:border-color .18s,background .18s;background:var(--paper)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop svg{width:44px;height:44px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.drop b{font-weight:600}
.drop span{font-size:.88rem;color:var(--muted);max-width:34ch}
.drop input{display:none}
.opts{display:grid;gap:14px;margin-top:16px}
.opts .lb{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:.86rem;padding:8px 14px;border-radius:999px;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.preview{position:relative;border-radius:14px;overflow:hidden;background:var(--sunk);aspect-ratio:4/3;display:none}
.preview img{width:100%;height:100%;object-fit:cover}
.preview .x{position:absolute;top:10px;right:10px;border:0;background:rgba(13,19,23,.7);color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;display:grid;place-items:center}
.iafoot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.iafoot .hint{font-size:.8rem;color:var(--muted)}
.estado{display:none;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);font-size:.92rem;margin-top:14px}
.estado.on{display:flex}
.estado .sp{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.estado.mal{background:rgba(226,84,84,.12)}
.estado.mal .sp{display:none}

/* comparador antes/después */
.cmp{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--sunk);user-select:none;-webkit-user-select:none;touch-action:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .despues{clip-path:inset(0 0 0 50%)}
.cmp .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--oro);transform:translateX(-1px);pointer-events:none}
.cmp .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--oro);color:#0D1317;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.cmp .tag{position:absolute;top:12px;font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(13,19,23,.72);color:#fff;pointer-events:none}
.cmp .tag.a{left:12px}.cmp .tag.b{right:12px;background:var(--oro);color:#0D1317}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.resultado{display:none;flex-direction:column;gap:14px}
.resultado.on{display:flex}
.resultado .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.resultado .disc{font-size:.78rem;color:var(--muted)}
.miniform{display:none;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.miniform.on{display:grid}
.miniform .ancho{grid-column:1/-1}
.miniform h4{grid-column:1/-1;font-size:1.02rem}
@media(max-width:560px){.miniform{grid-template-columns:1fr}}

/* ---------- servicios ---------- */
.svcs{display:grid;gap:14px}
@media(min-width:640px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.svcs{grid-template-columns:repeat(4,1fr)}}
.svc{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.svc:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.svc .ref{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.12em;color:var(--oro)}
.svc .ico{width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc p{font-size:.92rem;color:var(--muted)}
.svc .glow{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 65%);left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none;filter:blur(10px)}
.svc:hover .glow{opacity:1}
.svc.nuevo::after{content:"Nuevo";position:absolute;top:16px;right:16px;font-family:"DM Mono",monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#0D1317;background:var(--oro);padding:4px 8px;border-radius:999px}

/* ---------- oficina / hogar ---------- */
.dos{display:grid;gap:16px}
@media(min-width:900px){.dos{grid-template-columns:1fr 1fr}}
.panel{position:relative;border-radius:22px;padding:170px 30px 34px;overflow:hidden;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;border:1px solid var(--line)}
.panel.ofi{background:linear-gradient(160deg,#0D1317,#1E2A32 70%,#0D1317);color:#EAF1F6;border-color:#27333B}
.panel.hogar{background:linear-gradient(160deg,var(--celeste),#BFE6F8 60%,var(--surface));color:#0D1317}
:root[data-theme="dark"] .panel.hogar{background:linear-gradient(160deg,#3D8DB8,#1C4C66 70%,#121A1F);color:#EAF1F6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .panel.hogar{background:linear-gradient(160deg,#3D8DB8,#1C4C66 70%,#121A1F);color:#EAF1F6}}
.panel .eyebrow{color:inherit;opacity:.8}
.panel h3{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;font-stretch:106%}
.panel p{opacity:.85;max-width:44ch}
.panel ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:.92rem}
.panel li::before{content:"✦ ";color:var(--oro)}
.panel .art{position:absolute;right:-6px;top:-4px;width:50%;max-width:300px;opacity:.75;pointer-events:none}
.panel .art svg{width:100%;height:auto}
.panel .btn{align-self:flex-start;margin-top:8px}
.panel.ofi .btn{background:var(--celeste);border-color:var(--celeste);color:#0D1317}
.panel.ofi .btn:hover{background:#fff;border-color:#fff}
.panel.hogar .btn{background:#0D1317;border-color:#0D1317;color:#F5F8FA}

/* ---------- cómo trabajamos: pista horizontal ---------- */
.fases-wrap{position:relative}
.track{display:grid;gap:14px}
@media(min-width:1000px){
  .track{grid-template-columns:repeat(2,1fr)}
  html.js-anim .fases-wrap{overflow:hidden}
  html.js-anim .track{display:flex;gap:18px;width:max-content;padding-right:8vw}
  html.js-anim .fase{width:min(38vw,520px);flex:none}
}
.fase{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.fase .n{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.fase .big{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:115%;font-size:clamp(3rem,7vw,5.5rem);line-height:.9;letter-spacing:-.04em;color:var(--sunk);position:absolute;right:16px;top:8px;user-select:none}
.fase h3{font-size:1.35rem;position:relative}
.fase p{color:var(--muted);position:relative}
.fase .t{font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.08em;color:var(--accent);margin-top:auto;padding-top:10px}
.fase-prog{height:2px;background:var(--line-soft);margin-top:24px;border-radius:999px;overflow:hidden}
.fase-prog i{display:block;height:100%;background:var(--oro);transform:scaleX(0);transform-origin:0 50%}

/* ---------- OVP ---------- */
.ovp{display:grid;gap:26px}
@media(min-width:900px){.ovp{grid-template-columns:1.1fr .9fr;gap:56px}}
.ovp .txt{display:flex;flex-direction:column;gap:14px;color:var(--muted)}
.ovp .side{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:22px 22px;display:flex;flex-direction:column;gap:10px;font-size:.93rem}
.ovp .li{display:flex;gap:10px}
.ovp .li i{font-style:normal;color:var(--oro)}
.ovp .cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ovp .cifra{background:var(--sunk);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ovp .cifra b{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:112%;font-size:2.1rem;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.ovp .cifra .l{font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- zona ---------- */
.zona{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.zona span{font-size:.9rem;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);transition:border-color .16s,transform .16s}
.zona span:hover{border-color:var(--accent);transform:translateY(-2px)}
.zona .hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- empresas e industria ---------- */
.subc{display:grid;gap:26px}
@media(min-width:900px){.subc{grid-template-columns:.9fr 1.1fr;gap:56px}}
.subc .marca{display:flex;flex-direction:column;gap:14px;border-radius:20px;padding:30px 28px;background:var(--ink);color:var(--paper);align-self:start}
@media(min-width:900px){.subc .marca{position:sticky;top:96px}}
.subc .marca .eyebrow{color:inherit;opacity:.72}
.subc .marca h3{font-size:1.6rem;letter-spacing:-.02em}
.subc .marca p{opacity:.8}
.subc .items{display:grid;gap:12px}
.subc .it{display:grid;grid-template-columns:44px 1fr;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px 18px 20px;align-items:start}
.subc .it .n{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.12em;color:var(--oro);padding-top:6px}
.subc .it p{color:var(--muted);font-size:.93rem;margin-top:4px}

/* ---------- presupuesto ---------- */
.contact{border:1px solid var(--line);background:var(--surface);border-radius:26px;padding:clamp(24px,4vw,48px);display:grid;gap:26px;position:relative;overflow:hidden}
@media(min-width:960px){.contact{grid-template-columns:.85fr 1.15fr;gap:48px}}
.contact .lado{display:flex;flex-direction:column;gap:16px}
.contact .lado p{color:var(--muted)}
.contact .vias{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.contact .via{display:flex;align-items:center;gap:12px;text-decoration:none;padding:12px 14px;border:1px solid var(--line);border-radius:14px;transition:border-color .16s,background .16s}
.contact .via:hover{border-color:var(--accent);background:var(--accent-soft)}
.contact .via svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.contact .via b{display:block;font-weight:600;font-size:.95rem}
.contact .via span{display:block;font-size:.8rem;color:var(--muted)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
.campo label{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.campo .req{color:var(--accent)}
.campo input,.campo select,.campo textarea,.miniform input:not([type=checkbox]){font:inherit;font-size:.96rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .16s,box-shadow .16s}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus,.miniform input:not([type=checkbox]):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted)}
.consent input{margin-top:4px;accent-color:var(--accent)}
.envio{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.envio .o{font-size:.86rem;color:var(--muted)}
.recado{grid-column:1/-1;padding:12px 14px;border-radius:12px;font-size:.92rem;background:var(--accent-soft)}
.recado.bien{background:rgba(57,199,122,.14)}
.recado.mal{background:rgba(226,84,84,.12)}

/* ---------- pie ---------- */
footer{margin-top:96px;border-top:1px solid var(--line-soft);padding:34px 0 40px}
footer .wrap{display:grid;gap:22px}
@media(min-width:800px){footer .wrap{grid-template-columns:1.2fr 1fr 1fr;align-items:start}}
footer .col{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--muted)}
footer .col b{color:var(--ink);font-weight:600}
footer a{text-decoration:none;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}
footer .sol{width:18px;height:18px;fill:var(--oro)}
footer .fin{grid-column:1/-1;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:18px}