/* ═══════════════════════════════════════════════════════════════════════════
   BRONZE REMODELING · sistema de diseño
   Miami · Transforming Homes. Elevating Living.

   Cómo está organizado este archivo:
     1  Tokens ............ colores, tipos, espacios, tiempos
     2  Reset y base ...... lo mínimo, sin librería
     3  Tipografía ........ escala y estilos de texto
     4  Layout ............ contenedor, bandas, grillas
     5  La cumbrera ....... elemento firma
     6  Header y nav
     7  Hero .............. video, barrido metálico, card de captación
     8  Componentes ....... botones, cards, listas, sellos
     9  El revelado ....... comparador antes/después
    10  Formularios
    11  Reseñas
    12  Acordeón FAQ
    13  Precios
    14  Footer
    15  Flotantes ......... WhatsApp y lead magnet
    16  Movimiento ........ reveal por scroll + prefers-reduced-motion

   Quien edita esto no necesita ser programador: los valores que se cambian
   están todos en el bloque 1.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1 · TOKENS ═══════════════════════════════════════════════════════════ */

:root{

  /* ── Color base ─────────────────────────────────────────────────────────
     Carbon domina. Las bandas claras son el respiro que hace legible el
     texto largo (guías de costo, FAQ, texto de ciudad).                    */
  --carbon:          #11100F;   /* fondo dominante */
  --carbon-elev:     #1A1917;   /* superficie elevada sobre carbon */
  --carbon-alto:     #221F1C;   /* inputs, hover sobre oscuro */
  --charcoal:        #353331;   /* warm charcoal de la identidad */
  --blanco-arq:      #F2EFE9;   /* Architectural White — banda clara */
  --limestone:       #DBD0C4;   /* Limestone — banda clara alterna */

  /* ── Bronce: DOS tonos, y no es capricho ─────────────────────────────────
     Medido en ratio WCAG contra los fondos reales de este sitio:
       #B78555 sobre Carbon ......... 5.90:1  ✅ AA
       #B78555 sobre blanco-arq ..... 2.83:1  ❌ falla
       blanco sobre #B78555 ......... 3.24:1  ❌ botón inusable
       #8A5F32 sobre blanco-arq ..... 4.89:1  ✅ AA
       blanco sobre #8A5F32 ......... 5.60:1  ✅ AA
     Por eso: --bronce SOLO sobre oscuro. --bronce-profundo para botones
     y para texto de bronce sobre banda clara.                             */
  --bronce:          #B78555;
  --bronce-profundo: #8A5F32;
  --bronce-claro:    #D9B483;   /* hover sobre oscuro, y hairlines vivos */
  --bronce-tenue:    rgba(183,133,85,.14);
  --bronce-filete:   rgba(183,133,85,.28);

  /* ── El metal ────────────────────────────────────────────────────────────
     No es un color plano: es la rampa muestreada del logo real, que va de
     #7A4B26 en la sombra a un especular claro y vuelve a bajar.           */
  --metal: linear-gradient(100deg,
             #7A4B26  0%,
             #A86C3C 18%,
             #B78555 34%,
             #E6CEA1 48%,
             #B78555 62%,
             #96683A 80%,
             #7A4B26 100%);

  /* La misma rampa levantada, para el tagline del hero. La de arriba nace en
     #7A4B26 — un marrón de sombra que sobre el video se lee apagado, porque
     ahí no hay un fondo negro que lo haga brillar por contraste. Esta sube el
     piso al bronce y lleva el especular casi a blanco cálido: es oro con luz,
     no bronce en penumbra. Su tono más oscuro da 7,2:1 sobre Carbon.
     Se usa SOLO en el tagline — el filete de 2px de la card sigue con la
     rampa original, que sobre superficie oscura chica funciona mejor.        */
  /* 90deg, no 100: con el eje inclinado la linea de abajo caia en una zona mas
     clara de la rampa que la de arriba, y "Elevating living." se leia mas que
     "Transforming homes.". Horizontal, las dos lineas reciben lo mismo.      */
  --metal-claro: linear-gradient(90deg,
             #F0A54A  0%,
             #FFBF74 16%,
             #FFD394 32%,
             #FFE7BE 48%,
             #FFD394 64%,
             #FFBF74 82%,
             #F0A54A 100%);

  /* ── Texto ──────────────────────────────────────────────────────────────
     Los secundarios están tintados desde el propio tono cálido de la marca,
     nunca en gris neutro (craft-floor: en superficie con color, tintar).   */
  --tinta:           #F2EFE9;   /* sobre carbon — 15.8:1 */
  --tinta-sec:       #B5ADA1;   /* sobre carbon — 7.4:1  */
  --tinta-ter:       #7E776D;   /* sobre carbon — 3.6:1, solo texto grande */
  --tinta-oscura:    #11100F;   /* sobre banda clara */
  --tinta-oscura-sec:#4A4641;   /* sobre banda clara — 8.9:1 */

  /* ── Tipografía ─────────────────────────────────────────────────────────
     Cormorant Garamond solo en display (48px+): es una serif de alto
     contraste, espectacular grande y débil chica. Montserrat en todo lo
     demás. Escala modular 1.25x.                                          */
  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* El hero cae a 4.5rem en el techo: "Transforming homes." son 19 caracteres
     de Cormorant Light y a 5.75rem no entran en su columna sin partirse. */
  --t-hero:  clamp(2.5rem, 4.6vw, 4.5rem);
  --t-h1:    clamp(2.5rem, 5vw, 4rem);
  --t-h2:    clamp(2.125rem, 4vw, 3.25rem);
  --t-h3:    1.5rem;      /* 24px — mayor que h4, sin invertir jerarquía */
  --t-h4:    1.25rem;     /* 20px */
  --t-lead:  1.25rem;     /* 20px */
  --t-body:  1.125rem;    /* 18px — piso de cuerpo */
  --t-card:  1rem;        /* 16px — piso de card */
  --t-label: .8125rem;    /* 13px, siempre en caps con tracking */
  --t-micro: .75rem;      /* 12px, solo legales */

  /* ── Espacio ────────────────────────────────────────────────────────────
     Base 8. Un solo ritmo en todo el sitio.                               */
  --e1: .5rem;    --e2: 1rem;     --e3: 1.5rem;   --e4: 2rem;
  --e5: 3rem;     --e6: 4rem;     --e7: 6rem;     --e8: 8rem;
  --banda:        clamp(4.5rem, 9vw, 8rem);   /* padding vertical de banda */
  --ancho:        1320px;                      /* contenedor */
  --ancho-texto:  68ch;                        /* medida de lectura */

  /* ── Geometría ──────────────────────────────────────────────────────────
     Radios chicos y contenidos. Este mundo es arquitectónico: escuadra y
     filete, no burbuja. Nada de 30px por todas partes.                    */
  --r-sm: 2px;   --r-md: 3px;   --r-lg: 4px;

  /* ── Profundidad ────────────────────────────────────────────────────────
     Sombras con offset y blur real, tintadas al carbón de la marca.       */
  --sombra-1: 0 2px 8px rgba(0,0,0,.32);
  --sombra-2: 0 12px 32px -8px rgba(0,0,0,.55);
  --sombra-3: 0 32px 72px -18px rgba(0,0,0,.72);

  /* ── Tiempo ─────────────────────────────────────────────────────────────
     Ease-out exponencial: arranca rápido y frena, como la materia real.   */
  --sale:  cubic-bezier(.19,1,.22,1);
  --entra: cubic-bezier(.65,0,.35,1);
  --t-rapido: 180ms;  --t-medio: 420ms;  --t-lento: 900ms;

  --header-h: 92px;
}


/* ═══ 2 · RESET Y BASE ═════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--e3));
}

body{
  margin:0;
  background:var(--carbon);
  color:var(--tinta);
  font:400 var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, no hidden: overflow-x:hidden convierte al body en contenedor de
     scroll y eso anula position:sticky en todos sus descendientes (el título
     de "Quality Work…" dejaba de acompañar la lectura). clip recorta igual
     pero no crea contexto de scroll. */
  overflow-x:clip;
}

img,svg,video,picture{ display:block; max-width:100%; }
img,video{ height:auto; }

a{ color:inherit; text-decoration:none; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

/* Foco visible y consistente. Nunca se saca el outline sin reemplazo. */
:focus-visible{
  outline:2px solid var(--bronce);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.banda--clara :focus-visible{ outline-color:var(--bronce-profundo); }

::selection{ background:var(--bronce); color:var(--carbon); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Salto al contenido — accesibilidad de teclado */
.salto{
  position:absolute; top:0; left:50%; transform:translate(-50%,-120%);
  z-index:200; padding:var(--e2) var(--e3);
  background:var(--bronce-profundo); color:#fff;
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  transition:transform var(--t-rapido) var(--entra);
}
.salto:focus{ transform:translate(-50%,0); }


/* ═══ 3 · TIPOGRAFÍA ═══════════════════════════════════════════════════════ */

h1,h2,h3,h4{ margin:0 0 var(--e2); text-wrap:balance; }
p{ margin:0 0 var(--e2); }
p:last-child{ margin-bottom:0; }

.display{
  font-family:var(--display);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.012em;
}

.t-hero{ font:300 var(--t-hero)/1.02 var(--display); letter-spacing:-.018em; margin:0; }
.t-h1  { font:300 var(--t-h1)/1.06  var(--display); letter-spacing:-.014em; }
.t-h2  { font:300 var(--t-h2)/1.08  var(--display); letter-spacing:-.012em; }
.t-h3  { font:600 var(--t-h3)/1.3   var(--sans);    letter-spacing:-.004em; }
.t-h4  { font:600 var(--t-h4)/1.35  var(--sans);    letter-spacing:0; }

.t-lead{
  font-size:var(--t-lead); line-height:1.6; color:var(--tinta-sec);
  max-width:56ch;
}
.banda--clara .t-lead{ color:var(--tinta-oscura-sec); }
/* La banda de piedra no tenia su override y heredaba --tinta-sec, que es el
   secundario para fondo OSCURO: gris claro sobre piedra clara, 1.35:1. Era
   invisible en el cierre de cada pagina de servicio y en "Want It as a PDF?". */
.banda--piedra .t-lead{ color:var(--tinta-oscura-sec); }

.t-cuerpo{ max-width:var(--ancho-texto); }
.t-cuerpo p + p{ margin-top:var(--e2); }

/* Etiqueta: el único texto en caps del sistema. Nunca se usa como eyebrow
   arriba de un título (craft-floor lo prohíbe) — solo rotula bloques
   funcionales: campos, metadatos de obra, columnas del footer. */
.t-label{
  font:600 var(--t-label)/1.4 var(--sans);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-ter);
}
.banda--clara .t-label{ color:var(--charcoal); }

.t-micro{ font-size:var(--t-micro); line-height:1.5; color:var(--tinta-ter); }

/* Cifra grande, en display serif — no en sans, que la volvería dashboard */
.t-cifra{
  font:300 clamp(2.75rem,5vw,4.5rem)/1 var(--display);
  letter-spacing:-.02em;
  color:var(--bronce);
}
.banda--clara .t-cifra{ color:var(--bronce-profundo); }

/* El metal aplicado a texto. Se reserva al wordmark del hero: es la firma,
   y usado dos veces deja de serlo. */
.metal{
  background:var(--metal);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}


/* ═══ 4 · LAYOUT ═══════════════════════════════════════════════════════════ */

.contenedor{
  width:100%; max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
/* Se centra por sí solo: en las páginas de servicio esta clase se usa suelta,
   sin .contenedor, y sin el margin auto el comparador quedaba pegado a la
   izquierda mientras su título estaba centrado. */
.contenedor--angosto{ max-width:920px; margin-inline:auto; }

/* ── Bloque de medios ───────────────────────────────────────────────────────
   Ni el comparador ni los pares de fotos necesitan los 1.320px del contenedor.
   Acotados y centrados pesan lo justo dentro de la banda en vez de dominarla. */
.medios     { max-width:760px;  margin-inline:auto; }
.medios--par{ max-width:1100px; }
@media (max-width:1000px){ .medios,.medios--par{ max-width:none; } }

/* Columna de título que acompaña la lectura de la columna larga de al lado.
   Sin esto el título se queda arriba y deja 500px de columna vacía. */
.columna-fija{ position:sticky; top:calc(var(--header-h) + var(--e4)); }
@media (max-width:1000px){ .columna-fija{ position:static; } }

.banda{
  position:relative;
  padding-block:var(--banda);
  background:var(--carbon);
}
.banda--elev  { background:var(--carbon-elev); }
.banda--clara { background:var(--blanco-arq); color:var(--tinta-oscura); }
.banda--piedra{ background:var(--limestone);  color:var(--tinta-oscura); }
.banda--plana { padding-block:0; }

.banda--clara h1,.banda--clara h2,.banda--clara h3,.banda--clara h4,
.banda--piedra h1,.banda--piedra h2,.banda--piedra h3,.banda--piedra h4{
  color:var(--tinta-oscura);
}

/* Encabezado de banda. Más aire arriba del título que abajo. */
.banda__cabeza{ max-width:52ch; margin-bottom:var(--e6); }
.banda__cabeza--centro{ margin-inline:auto; text-align:center; }
.banda__cabeza .t-lead{ margin-top:var(--e3); }
.banda__cabeza--centro .t-lead{ margin-inline:auto; }

/* Grillas */
.grilla{ display:grid; gap:var(--e4); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
/* .g-split trae su propio display:grid — se usa suelto, sin .grilla */
.g-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,var(--e7)); align-items:center;
}
.g-split--texto{ grid-template-columns:.85fr 1.15fr; align-items:start; }

@media (max-width:1000px){
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .g-split,.g-split--texto{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
}


/* ═══ 5 · LA CUMBRERA ══════════════════════════════════════════════════════
   Elemento firma. El gable del monograma reducido a hairline, que se dibuja
   solo al entrar en viewport. Separa cada banda; es el latido del sitio.   */

.cumbrera{
  display:block; width:100%; height:64px;
  color:var(--bronce);
  overflow:visible;
}
.banda--clara .cumbrera,.banda--piedra .cumbrera{ color:var(--bronce-profundo); }

.cumbrera__gable,.cumbrera__linea,.cumbrera__ventana{ vector-effect:non-scaling-stroke; }

/* Estado de reposo: dibujada. Si el JS no corre, se ve igual. */
.cumbrera__gable{ stroke-dasharray:none; }

/* El JS marca .cumbrera--lista y entonces sí se anima el trazo */
.cumbrera--lista .cumbrera__gable{
  stroke-dasharray:240; stroke-dashoffset:240;
}
.cumbrera--lista.en-vista .cumbrera__gable{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.4s var(--sale);
}
.cumbrera--lista .cumbrera__ventana,
.cumbrera--lista .cumbrera__linea{ opacity:0; }
.cumbrera--lista.en-vista .cumbrera__ventana{
  opacity:1; transition:opacity 500ms var(--sale) 900ms;
}
.cumbrera--lista.en-vista .cumbrera__linea{
  opacity:1; transition:opacity 800ms var(--sale) 500ms;
}

/* Filete simple, para separar dentro de una banda */
.filete{ height:1px; border:0; margin:0; background:var(--bronce-filete); }


/* ═══ 6 · HEADER Y NAV ═════════════════════════════════════════════════════ */

.header{
  position:fixed; inset:0 0 auto; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(to bottom, rgba(17,16,15,.92), rgba(17,16,15,0));
  /* Solo se anima el fondo. Antes acá se animaba también la altura, y animar
     height obliga a recalcular layout en cada fotograma: el header "se aprieta"
     escalando la marca con transform, que va por el compositor. */
  transition:background var(--t-medio) var(--entra);
}
/* El fondo del header al hacer scroll va en un pseudo-elemento, NO en el
   header. Motivo: backdrop-filter convierte al elemento en bloque contenedor
   de sus hijos position:fixed. El menu movil (.nav) es hijo del header y es
   fixed, asi que al aparecer .header--fijo el menu pasaba a medir contra el
   header —76px de alto— en vez de contra la pantalla, y se abria con 0px de
   altura. Resultado: la hamburguesa no funcionaba en cuanto bajabas.
   El pseudo-elemento se lleva el filtro; el nav no es descendiente suyo. */
.header--fijo{
  border-bottom:1px solid var(--bronce-tenue);
}
.header--fijo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(17,16,15,.96);
  backdrop-filter:saturate(140%) blur(14px);
}
.header__fila{ display:flex; align-items:center; gap:var(--e4); width:100%; }

/* ── La marca ────────────────────────────────────────────────────────────────
   El monograma va en imagen (es una forma, escala bien) y el wordmark va en
   TEXTO HTML en Cormorant. El lockup completo en PNG a 56px de alto convierte
   "BRONZE REMODELING" y la línea de servicios en una mancha ilegible; armado
   así queda nítido a cualquier tamaño y es el mismo dibujo de la identidad. */
.marca{
  display:flex; align-items:center; gap:.875rem; flex-shrink:0;
  color:var(--bronce);
  transition:color var(--t-rapido);
}
.marca:hover{ color:var(--bronce-claro); }
.marca{ transform-origin:left center; }
.marca__mono{ width:auto; height:52px; flex-shrink:0; }
/* La marca se aprieta con scale, no bajando la altura del header */
.header .marca{ transition:transform var(--t-medio) var(--entra), color var(--t-rapido); }
.header--fijo .marca{ transform:scale(.84); }

.marca__texto{ display:flex; flex-direction:column; gap:.1875rem; }
.marca__nombre{
  font:400 1.375rem/1 var(--display);
  letter-spacing:.26em; text-transform:uppercase;
  color:currentColor;
}
.marca__sub{
  display:flex; align-items:center; gap:.5rem;
  font:600 .5625rem/1 var(--sans);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--tinta-sec);
}
/* Los filetes que flanquean REMODELING en el logo original */
.marca__sub::before,.marca__sub::after{
  content:""; flex:1; height:1px; background:var(--bronce-filete);
}
@media (max-width:1180px){
  .marca__nombre{ font-size:1.1875rem; letter-spacing:.2em; }
  .marca__sub{ font-size:.5rem; letter-spacing:.24em; }
  .marca__mono{ height:44px; }
}
@media (max-width:420px){
  .marca__mono{ height:38px; }
  .marca__nombre{ font-size:1.0625rem; letter-spacing:.16em; }
}

.nav{ margin-left:auto; }
.nav__lista{
  display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.75rem);
  margin:0; padding:0; list-style:none;
}
.nav__item{ position:relative; }

/* Los enlaces del menú van gruesos y brillantes sobre el fondo oscuro.
   La regla de la agencia: ante la duda, un punto más grande. */
.nav__link{
  display:flex; align-items:center; gap:.375rem;
  padding:var(--e1) 0;
  font:600 .9375rem/1 var(--sans);
  letter-spacing:.02em;
  color:var(--tinta);
  white-space:nowrap;
}
.nav__link .ico{ width:14px; height:14px; opacity:.6; transition:transform var(--t-rapido) var(--entra); }

/* Subrayado que crece desde la izquierda */
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--bronce);
  transition:right var(--t-medio) var(--sale);
}
.nav__link:hover::after,
.nav__item--activo .nav__link::after{ right:0; }
.nav__link:hover{ color:var(--bronce-claro); }
.nav__item--activo .nav__link{ color:var(--bronce); }

/* Submenú */
.nav__sub{
  position:absolute; top:calc(100% + var(--e2)); left:calc(var(--e2) * -1);
  min-width:270px; margin:0; padding:var(--e2) 0; list-style:none;
  background:var(--carbon-elev);
  border:1px solid var(--bronce-tenue);
  box-shadow:var(--sombra-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-medio) var(--sale),
             transform var(--t-medio) var(--sale),
             visibility var(--t-medio);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__item:hover > .nav__link .ico{ transform:rotate(90deg); }

/* El desplazamiento al hover va con transform, no con padding: animar padding
   recalcula layout en cada fotograma. */
.nav__sub a{
  display:block; padding:.625rem var(--e3);
  font-size:.9375rem; color:var(--tinta-sec);
  border-left:1px solid transparent;
  transition:color var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido) var(--entra);
}
.nav__sub a:hover{
  color:var(--bronce-claro);
  border-left-color:var(--bronce);
  transform:translateX(4px);
}

/* Botón de teléfono del header */
.header__tel{
  display:flex; align-items:center; gap:.5rem;
  flex-shrink:0; padding:.75rem 1.375rem;
  border:1px solid var(--bronce);
  font:600 .9375rem/1 var(--sans); letter-spacing:.03em;
  color:var(--bronce);
  transition:background var(--t-medio) var(--entra), color var(--t-medio) var(--entra);
}
.header__tel:hover{ background:var(--bronce-profundo); border-color:var(--bronce-profundo); color:#fff; }
.header__tel .ico{ width:15px; height:15px; }

/* Hamburguesa */
.hamburguesa{
  display:none; flex-shrink:0; width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--tinta); border:1px solid var(--bronce-tenue);
}
.hamburguesa .ico{ width:22px; height:22px; }

@media (max-width:1180px){
  .nav__lista{ gap:.75rem; }
  .nav__link{ font-size:.875rem; }
}
@media (max-width:1024px){
  :root{ --header-h:76px; }
  .hamburguesa{ display:flex; margin-left:auto; }
  .header__tel{ display:none; }

  .nav{
    position:fixed; inset:var(--header-h) 0 0; margin:0; z-index:99;
    background:var(--carbon);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--t-medio) var(--sale), transform var(--t-medio) var(--sale), visibility var(--t-medio);
  }
  .nav[data-abierto="true"]{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav__lista{ flex-direction:column; align-items:stretch; gap:0; padding:var(--e3) 0 var(--e7); }
  .nav__item{ border-bottom:1px solid var(--bronce-tenue); }
  .nav__link{
    justify-content:space-between;
    padding:1.125rem clamp(1.25rem,4vw,2.5rem);
    font-size:1.0625rem;
  }
  .nav__link::after{ display:none; }
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; box-shadow:none; padding:0 0 var(--e2);
    background:var(--carbon-elev);
    display:none;
  }
  .nav__item[data-abierto="true"] > .nav__sub{ display:block; }
  .nav__item[data-abierto="true"] > .nav__link .ico{ transform:rotate(90deg); }
  .nav__sub a{ padding-left:clamp(2.25rem,6vw,3.5rem); }
}


/* ═══ 7 · HERO ═════════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  min-height:min(94vh,900px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + var(--e5));
  padding-bottom:var(--e6);
  overflow:hidden;
  background:var(--carbon);
}
/* El hero interior no lleva el peso de la home: no tiene card de captación ni
   tagline de marca, solo título y dos botones. A 640px se comía media pantalla
   antes del primer contenido real. */
.hero--interior{ min-height:min(52vh,480px); align-items:center; }

/* Capa de video / imagen */
.hero__fondo{ position:absolute; inset:0; z-index:0; }
/* Absolutos y apilados: en las páginas interiores la foto y el video conviven
   en el mismo hueco. La foto va primero y el video encima. Si el video no
   carga —móvil, sin JS, ahorro de datos— queda la foto, que es su propio
   primer fotograma, así que no se nota el cambio. */
.hero__fondo img,.hero__fondo video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
/* En móvil manda la foto vertical y el video no existe. Un 16:9 recortado a
   una pantalla de teléfono deja una franja sin composición, y el archivo son
   9 MB por datos móviles. El JS además no le carga las fuentes al video, así
   que en móvil ni se descarga. */
.hero__fondo img.hero__movil{ display:none; }
@media (max-width:1000px){
  .hero__fondo img.hero__movil{ display:block; }
  .hero__video{ display:none; }
  /* En móvil el hero mide ~1.500px de alto, porque la card de captación cae
     debajo del texto. Estirar una foto vertical sobre eso con object-fit
     cover deja una tira de imagen sin composición. Así que la foto ocupa la
     franja de arriba —donde vive el texto— en una proporción que respeta el
     encuadre, y se funde al Carbon justo donde empieza la card. */
  /* Solo la home: su hero mide ~1.500px porque la card cae debajo del texto.
     Los heros interiores son bajos y su fondo cubre todo, como siempre. */
  .hero:not(.hero--interior) .hero__fondo{ inset:0 0 auto; height:clamp(560px, 88vh, 880px); }
  /* Especificidad: .hero__fondo img ya fija un object-position, así que
     esta regla necesita el mismo peso para poder correr el encuadre. */
  .hero__fondo img.hero__movil{ object-position:center 58%; }
}
/* Velo: sostiene el texto sin tapar el video. Se bajó a propósito para que la
   toma se vea casi entera — el oscurecido general se eliminó y quedaron solo
   dos lavados que mueren donde empieza la imagen limpia: una columna izquierda
   detrás del texto y un anclaje al pie. Lo que falta de contraste lo pone la
   sombra de texto de .hero__texto, no más pintura negra encima del video. */
.hero__velo{
  position:absolute; inset:0; z-index:1;
  background:
    /* Mancha suave centrada en el bloque de texto. Es lo que sostiene el
       tagline de metal, que sobre una zona clara del video pierde sus tonos
       de sombra. Muere antes del 70%, así que el resto de la toma queda
       limpio en vez de pagar el contraste toda la imagen. */
    radial-gradient(78% 80% at 24% 50%,
      rgba(17,16,15,.60) 0%, rgba(17,16,15,.42) 44%, rgba(17,16,15,0) 80%),
    linear-gradient(to right,
      rgba(17,16,15,.40) 0%, rgba(17,16,15,.22) 30%,
      rgba(17,16,15,.05) 54%, rgba(17,16,15,0) 74%),
    linear-gradient(to top,
      rgba(17,16,15,.46) 0%, rgba(17,16,15,.04) 38%, rgba(17,16,15,.20) 100%);
}
@media (max-width:1000px){
  /* El velo acompaña a la foto: misma franja, y termina en Carbon opaco para
     que el corte de abajo no se vea. Arriba pesa más porque ahí está el
     tagline y la foto tiene el techo iluminado; al medio se abre para que se
     vea la cocina. */
  .hero:not(.hero--interior) .hero__velo{
    inset:0 0 auto; height:clamp(560px, 88vh, 880px);
  }
  .hero__velo{
    background:
      linear-gradient(to bottom,
        rgba(17,16,15,.86) 0%,
        rgba(17,16,15,.62) 24%,
        rgba(17,16,15,.34) 48%,
        rgba(17,16,15,.66) 82%,
        #11100F 100%);
  }
}
.hero__contenido{ position:relative; z-index:2; width:100%; }

.hero__grilla{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,4vw,var(--e6)); align-items:end;
}
/* Sin max-width acá: la medida la impone la columna del grid. Poner ch en
   este contenedor lo calcularía sobre 18px y partiría el display en pedazos. */
/* La sombra reemplaza al velo que se sacó: sostiene el texto contra las zonas
   claras del video sin oscurecer la toma. Dos capas — una cerrada que define el
   borde de la letra y una abierta que separa del fondo. */
.hero__texto{
  min-width:0;
  text-shadow:0 1px 2px rgba(17,16,15,.55), 0 2px 22px rgba(17,16,15,.75);
}
.hero__tagline{
  display:block; margin-bottom:var(--e3);
  font:300 var(--t-hero)/1.0 var(--display); letter-spacing:-.022em;
  text-wrap:nowrap;
  /* Blancas. El tagline dejó de ser metal recortado: sobre el video, el oro
     competía con un fondo cálido y nunca despegaba del todo. El blanco separa
     por luminancia, no por tono, y el glow naranja pone el color de marca
     alrededor en vez de adentro de la letra.
     Consecuencia: acá ya no corre el barrido metálico. El metal sigue vivo en
     el filete de la card de captación, que es donde nació. */
  background-image:none;
  color:var(--blanco-arq);
  -webkit-text-fill-color:var(--blanco-arq);
  /* El tagline es metal recortado sobre el texto (background-clip), así que
     text-shadow no lo toca: pinta detrás de un glifo transparente. Acá la
     sombra tiene que ser filter, que sí sigue la forma de la letra. Es lo que
     sostiene la firma ahora que el velo dejó de tapar el video. */
  /* Glow naranja. Cuatro capas, de la más cerrada a la más abierta: la letra
     no se apoya en un fondo oscuro, emite luz propia. El contorno oscuro va
     primero y es mínimo — solo define el borde; si pesa más, apaga el glow. */
  filter:
    drop-shadow(0 1px 2px rgba(17,16,15,.90))
    drop-shadow(0 0 1px rgba(255,180,95,.42))
    drop-shadow(0 0 6px rgba(243,140,40,.34))
    drop-shadow(0 0 16px rgba(216,105,20,.20))
    drop-shadow(0 0 34px rgba(200,90,12,.10));
}
/* Dos líneas, una por oración — el quiebre es una decisión, no un accidente */
.hero__tagline em{ display:block; font-style:normal; }
.hero__sub{
  max-width:46ch; margin-bottom:var(--e4);
  font-size:var(--t-lead); line-height:1.6; color:var(--tinta);
}
.hero__acciones{ display:flex; flex-wrap:wrap; gap:var(--e2); }
/* El botón fantasma es borde y letra de bronce, sin relleno: sobre un sofá
   claro del video desaparecía. Un fondo apenas oscuro le devuelve el contraste
   sin volver a tapar la toma. Solo en el hero — en las bandas no hace falta. */
.hero__acciones .btn--fantasma{
  background:rgba(17,16,15,.42);
  backdrop-filter:blur(2px);
  text-shadow:none;
}
.hero__acciones .btn--fantasma:hover{ background:var(--bronce-profundo); }

/* Metadatos de confianza al pie del hero. En desktop van en una sola fila de
   tres columnas: repartidos en dos líneas la fila pierde su lectura de placa. */
.hero__pie{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
  gap:var(--e2) var(--e4);
  margin-top:var(--e5); padding-top:var(--e3);
  border-top:1px solid var(--bronce-filete);
}
.hero__dato{ display:flex; align-items:center; gap:.5rem; }
.hero__dato .ico{ width:17px; height:17px; color:var(--bronce); flex-shrink:0; }
.hero__dato span{ font-size:.8125rem; letter-spacing:.03em; color:var(--tinta-sec); }
@media (max-width:1240px){
  .hero__pie{ grid-template-columns:1fr; }
  .hero__dato span{ font-size:.875rem; }
}

@media (max-width:1000px){
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + var(--e5)); }
  .hero__grilla{ grid-template-columns:1fr; align-items:stretch; }
  .hero__texto{ max-width:none; }
  .hero__tagline{ font-size:clamp(2.5rem,10vw,3.75rem); }
}


/* ═══ 8 · COMPONENTES ══════════════════════════════════════════════════════ */

/* ── Botones ────────────────────────────────────────────────────────────────
   Regla dura: texto BLANCO sobre bronce, en todos los estados. Para que eso
   pase AA el relleno usa --bronce-profundo (5.60:1), no --bronce (3.24:1). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.625rem;
  padding:1.0625rem 2rem;
  border:1px solid transparent;
  font:600 .9375rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; text-align:center;
  transition:background var(--t-medio) var(--entra),
             border-color var(--t-medio) var(--entra),
             color var(--t-medio) var(--entra),
             transform var(--t-rapido) var(--entra);
}
.btn .ico{ width:16px; height:16px; flex-shrink:0; }
.btn:active{ transform:translateY(1px); }
/* La etiqueta no se parte dejando la flecha sola en la segunda línea */
.btn{ text-wrap:nowrap; }
@media (max-width:420px){
  .btn{ padding:1rem 1.25rem; letter-spacing:.04em; font-size:.875rem; }
}

.btn--primario{ background:var(--bronce-profundo); color:#fff; }
.btn--primario:hover{ background:#9C6C3A; }

.btn--fantasma{ border-color:var(--bronce); color:var(--bronce); }
.btn--fantasma:hover{ background:var(--bronce-profundo); border-color:var(--bronce-profundo); color:#fff; }
.banda--clara .btn--fantasma,.banda--piedra .btn--fantasma{
  border-color:var(--bronce-profundo); color:var(--bronce-profundo);
}
.banda--clara .btn--fantasma:hover,.banda--piedra .btn--fantasma:hover{ color:#fff; }

.btn--oscuro{ background:var(--carbon); color:var(--tinta); }
.btn--oscuro:hover{ background:var(--charcoal); }

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none;
}
.btn--bloque{ width:100%; }

/* Enlace con flecha que avanza */
.enlace{
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 .875rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--bronce);
  padding-bottom:.375rem;
  border-bottom:1px solid var(--bronce-filete);
  transition:border-color var(--t-medio), color var(--t-medio);
}
.enlace .ico{ width:16px; height:16px; transition:transform var(--t-medio) var(--sale); }
.enlace:hover{ color:var(--bronce-claro); border-bottom-color:var(--bronce); }
.enlace:hover .ico{ transform:translateX(5px); }
.banda--clara .enlace,.banda--piedra .enlace{ color:var(--bronce-profundo); }

/* ── Bloque de servicio ─────────────────────────────────────────────────────
   No es una card de icono+título+texto todas iguales (craft-floor lo marca
   como el andamio perezoso). Es una placa con imagen a sangre arriba, filete
   de bronce que se enciende al hover, y el icono como sello sobre la imagen. */
.servicio{
  position:relative; display:flex; flex-direction:column;
  background:var(--carbon-elev);
  border-top:1px solid var(--bronce-tenue);
  transition:background var(--t-medio) var(--entra), border-color var(--t-medio);
}
.servicio:hover{ background:var(--carbon-alto); border-top-color:var(--bronce); }

.servicio__foto{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--charcoal);
}
.servicio__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--sale);
}
.servicio:hover .servicio__foto img{ transform:scale(1.045); }

.servicio__sello{
  position:absolute; bottom:0; left:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:var(--carbon); color:var(--bronce);
  border-top:1px solid var(--bronce-tenue); border-right:1px solid var(--bronce-tenue);
}
.servicio__sello .ico{ width:26px; height:26px; }

.servicio__cuerpo{ padding:var(--e3) var(--e3) var(--e4); display:flex; flex-direction:column; flex:1; }
.servicio__cuerpo p{ font-size:var(--t-card); color:var(--tinta-sec); margin-bottom:var(--e3); }
.servicio__cuerpo .enlace{ margin-top:auto; align-self:flex-start; }

/* ── Bloque de razón (por qué elegirnos) ────────────────────────────────────
   Fila con filete a la izquierda, no card. Así seis razones no se leen como
   seis tarjetas idénticas. */
.razon{
  display:grid; grid-template-columns:44px 1fr; gap:var(--e3);
  padding:var(--e3) 0;
  border-top:1px solid rgba(53,51,49,.5);
}
.banda--clara .razon{ border-top-color:rgba(17,16,15,.13); }
.razon__ico{ color:var(--bronce); }
.banda--clara .razon__ico{ color:var(--bronce-profundo); }
.razon__ico .ico{ width:30px; height:30px; }
.razon h3{ margin-bottom:.5rem; }
.razon p{ font-size:var(--t-card); color:var(--tinta-sec); margin:0; }
.banda--clara .razon p{ color:var(--tinta-oscura-sec); }

/* ── Card de obra ───────────────────────────────────────────────────────────
   Con ciudad, ambiente y metros — los datos que Greenview tira a la basura
   rotulando todo "General Remodeling". */
.obra{ display:block; position:relative; background:var(--carbon-elev); }
.obra__foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--charcoal); }
.obra__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--sale); }
.obra:hover .obra__foto img{ transform:scale(1.05); }
.obra__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,16,15,.72), transparent 55%);
}
.obra__cuerpo{ padding:var(--e3); }
.obra__meta{
  display:flex; flex-wrap:wrap; gap:.375rem var(--e2);
  margin-bottom:.75rem;
}
.obra__meta span{
  font:600 var(--t-micro)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronce);
}
.obra__meta span + span{ padding-left:var(--e2); border-left:1px solid var(--bronce-filete); }
.obra h3{ margin:0; font-size:1.375rem; }
.obra:hover h3{ color:var(--bronce-claro); }

/* Etiqueta "antes/después disponible" sobre la foto */
.obra__badge{
  position:absolute; top:var(--e2); right:var(--e2); z-index:2;
  display:flex; align-items:center; gap:.375rem;
  padding:.4375rem .75rem;
  background:rgba(17,16,15,.86); border:1px solid var(--bronce-filete);
  font:600 var(--t-micro)/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronce);
}
.obra__badge .ico{ width:13px; height:13px; }

/* ── Paso del proceso ───────────────────────────────────────────────────────
   Numerado porque acá la secuencia SÍ es información: el cliente necesita
   saber qué pasa primero. */
.paso{ position:relative; padding-top:var(--e4); border-top:1px solid var(--bronce-filete); }
.paso__n{
  display:block; margin-bottom:var(--e2);
  font:300 2.5rem/1 var(--display); color:var(--bronce);
}
.banda--clara .paso__n{ color:var(--bronce-profundo); }
.paso p{ font-size:var(--t-card); color:var(--tinta-sec); margin:0; }
.banda--clara .paso p{ color:var(--tinta-oscura-sec); }

/* ── Lista con la ventana de cuatro paños como viñeta ───────────────────── */
.lista-v{ margin:0; padding:0; list-style:none; }
.lista-v li{
  position:relative; padding-left:2rem; margin-bottom:.875rem;
  font-size:var(--t-card);
}
.lista-v li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:11px; height:11px;
  border:1px solid var(--bronce);
  background:
    linear-gradient(var(--bronce),var(--bronce)) center/1px 100% no-repeat,
    linear-gradient(var(--bronce),var(--bronce)) center/100% 1px no-repeat;
  opacity:.9;
}
.banda--clara .lista-v li::before{
  border-color:var(--bronce-profundo);
  background:
    linear-gradient(var(--bronce-profundo),var(--bronce-profundo)) center/1px 100% no-repeat,
    linear-gradient(var(--bronce-profundo),var(--bronce-profundo)) center/100% 1px no-repeat;
}

/* ── Placa de dato / cifra ──────────────────────────────────────────────── */
.dato{ padding:var(--e3) 0; border-top:1px solid var(--bronce-filete); }
.dato .t-cifra{ display:block; margin-bottom:.375rem; }
.dato .t-label{ display:block; }

/* ── Marca de agua: el rombo/gable del logo, ampliado ───────────────────── */
.marca-agua{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; opacity:.05;
}
.marca-agua img{
  position:absolute; right:-6%; bottom:-18%;
  width:min(52%,620px); height:auto;
}

/* ── Aviso de contenido de muestra ──────────────────────────────────────── */
.aviso-demo{
  display:flex; align-items:flex-start; gap:.75rem;
  margin-bottom:var(--e4); padding:var(--e2) var(--e3);
  background:var(--bronce-tenue);
  border-left:1px solid var(--bronce);
  font-size:var(--t-card); color:var(--tinta-sec);
}
.banda--clara .aviso-demo{ color:var(--tinta-oscura-sec); border-left-color:var(--bronce-profundo); }
.aviso-demo .ico{ width:18px; height:18px; color:var(--bronce); flex-shrink:0; margin-top:.15em; }
.banda--clara .aviso-demo .ico{ color:var(--bronce-profundo); }

/* ── Foto de contenido ──────────────────────────────────────────────────────
   Toda posición visual del sitio es un <img> con una ruta fija, para que
   reemplazar una foto sea subir un archivo con ese nombre y nada más.
   Mientras no exista la foto real, ahí vive un placeholder de marca que dice
   en la propia imagen qué va ahí y con qué medidas.                          */
.foto{
  display:block; width:100%; height:auto;
  object-fit:cover;
  background:var(--carbon-elev);
  border:1px solid var(--bronce-tenue);
}
.banda--clara .foto,.banda--piedra .foto{ border-color:rgba(138,95,50,.28); }
/* Los topes existen porque una columna de grilla de 584px convierte un retrato
   4:5 en una foto de 730px de alto: más alta que todo el texto que la acompaña.
   La foto ilustra, no compite. En móvil los topes se sueltan. */
.foto--16-9{ aspect-ratio:16/9; }
.foto--4-3 { aspect-ratio:4/3; max-width:505px; }
.foto--4-5 { aspect-ratio:4/5; max-width:475px; }
.foto--3-2 { aspect-ratio:3/2; }
@media (max-width:1000px){
  .foto--4-3,.foto--4-5{ max-width:none; }
}

/* ── Slot de asset pendiente ────────────────────────────────────────────────
   Lo que Ronald ve mientras produce el material. Dice exactamente qué va
   ahí y con qué medidas — no es un gris vacío. */
.slot{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem;
  min-height:180px; padding:var(--e3); text-align:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(183,133,85,.05) 0 12px, transparent 12px 24px),
    var(--carbon-elev);
  border:1px dashed var(--bronce-filete);
  color:var(--tinta-ter);
}
.slot .ico{ width:28px; height:28px; color:var(--bronce); opacity:.7; }
.slot__que{ font:600 var(--t-card)/1.4 var(--sans); color:var(--tinta-sec); max-width:34ch; }
.slot__specs{
  font:600 var(--t-micro)/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronce);
}
.slot--16-9{ aspect-ratio:16/9; min-height:0; }
.slot--4-3 { aspect-ratio:4/3;  min-height:0; }
.slot--4-5 { aspect-ratio:4/5;  min-height:0; }
.slot--21-9{ aspect-ratio:21/9; min-height:0; }
.banda--clara .slot{
  background:
    repeating-linear-gradient(45deg, rgba(138,95,50,.07) 0 12px, transparent 12px 24px),
    rgba(219,208,196,.5);
  border-color:rgba(138,95,50,.35);
  color:var(--tinta-oscura-sec);
}
.banda--clara .slot .ico,.banda--clara .slot__specs{ color:var(--bronce-profundo); }
.banda--clara .slot__que{ color:var(--tinta-oscura); }


/* ═══ 9 · EL REVELADO ══════════════════════════════════════════════════════
   Comparador antes/después arrastrable. La manija lleva el gable de la
   cumbrera, así que el elemento firma también es el control.
   Resuelve el agujero más grande del sitio que estudiamos: no tienen ni
   una foto "antes".                                                        */

.revelado{
  position:relative; overflow:hidden;
  aspect-ratio:3/2; width:100%;
  background:var(--charcoal);
  border:1px solid var(--bronce-tenue);
  touch-action:pan-y;                    /* deja hacer scroll vertical */
  user-select:none; -webkit-user-select:none;
  cursor:ew-resize;
}
.revelado__capa{ position:absolute; inset:0; }
.revelado__capa img,.revelado__capa .slot{
  width:100%; height:100%; object-fit:cover;
}
/* La capa "después" se recorta según --pos, que mueve el JS */
.revelado__capa--despues{
  clip-path:inset(0 0 0 var(--pos,50%));
}
.revelado__etiqueta{
  position:absolute; bottom:var(--e2); z-index:3;
  padding:.4375rem .875rem;
  background:rgba(17,16,15,.86); border:1px solid var(--bronce-filete);
  font:600 var(--t-micro)/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronce);
  pointer-events:none;
}
.revelado__etiqueta--antes  { left:var(--e2); }
.revelado__etiqueta--despues{ right:var(--e2); }

.revelado__manija{
  position:absolute; top:0; bottom:0; z-index:4;
  left:var(--pos,50%); width:2px; margin-left:-1px;
  background:var(--bronce);
  box-shadow:0 0 0 1px rgba(17,16,15,.5), 0 0 24px rgba(183,133,85,.4);
}
.revelado__tirador{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px;
  background:var(--carbon); color:var(--bronce);
  border:1px solid var(--bronce);
  border-radius:50%;
  cursor:ew-resize;
  transition:transform var(--t-rapido) var(--entra), background var(--t-rapido);
}
.revelado__tirador:hover{ transform:translate(-50%,-50%) scale(1.06); background:var(--carbon-alto); }
.revelado__tirador .ico{ width:24px; height:24px; pointer-events:none; }
.revelado__tirador:focus-visible{ outline-offset:5px; }

/* Input range invisible por encima: es el control accesible de verdad.
   Con teclado se mueve con flechas, y los lectores de pantalla lo anuncian. */
.revelado__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.revelado__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:54px; height:100%; cursor:ew-resize;
}
.revelado__range::-moz-range-thumb{ width:54px; height:100%; border:0; background:transparent; }

.revelado__pie{
  display:flex; align-items:center; gap:.5rem;
  margin-top:var(--e2);
  font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-ter);
}
.revelado__pie .ico{ width:14px; height:14px; color:var(--bronce); }


/* ═══ 10 · FORMULARIOS ═════════════════════════════════════════════════════ */

/* La card que invade el hero — el gadget que vende */
.form-card{
  position:relative;
  padding:clamp(1.75rem,3.5vw,2.75rem);
  background:rgba(26,25,23,.94);
  backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--bronce-filete);
  box-shadow:var(--sombra-3);
}
.form-card::before{
  /* filete de metal en el borde superior: la firma, en chico */
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:var(--metal);
}
.form-card__cabeza{ margin-bottom:var(--e3); }
.form-card__cabeza h2{ margin-bottom:.5rem; font-size:1.75rem; }
.form-card__cabeza p{ font-size:var(--t-card); color:var(--tinta-sec); margin:0; }

.campos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e2); }
.campo--full{ grid-column:1/-1; }

.campo{ display:flex; flex-direction:column; gap:.4375rem; }
.campo > label{
  font:600 var(--t-micro)/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-ter);
}
.banda--clara .campo > label{ color:var(--charcoal); }
.campo__req{ color:var(--bronce); }

.campo input,.campo select,.campo textarea{
  width:100%; padding:.875rem 1rem;
  background:var(--carbon); color:var(--tinta);
  border:1px solid rgba(183,133,85,.22);
  border-radius:var(--r-sm);
  font-size:var(--t-card);
  transition:border-color var(--t-rapido), background var(--t-rapido);
}
.campo textarea{ min-height:118px; resize:vertical; }
.campo select{
  appearance:none; -webkit-appearance:none; padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--bronce) 50%),
                   linear-gradient(135deg,var(--bronce) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.campo input::placeholder,.campo textarea::placeholder{ color:#8A837A; }
.campo input:hover,.campo select:hover,.campo textarea:hover{ border-color:rgba(183,133,85,.45); }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--bronce); background:var(--carbon-alto);
  box-shadow:0 0 0 3px rgba(183,133,85,.14);
}

/* Estado de error: nombra el problema y cómo salir de él */
.campo[data-error="true"] input,
.campo[data-error="true"] select,
.campo[data-error="true"] textarea{
  border-color:#C9705A; background:rgba(201,112,90,.07);
}
.campo__error{
  display:none; align-items:center; gap:.375rem;
  font-size:var(--t-micro); color:#E0917C;
}
.campo[data-error="true"] .campo__error{ display:flex; }

.campo__contador{
  align-self:flex-end;
  font-size:var(--t-micro); color:var(--tinta-ter); font-variant-numeric:tabular-nums;
}

.form__pie{ margin-top:var(--e3); }
.form__legal{ margin-top:var(--e2); font-size:var(--t-micro); color:var(--tinta-ter); }
.form__legal a{ color:var(--bronce); border-bottom:1px solid var(--bronce-filete); }

/* Estados del envío */
.form__estado{ display:none; align-items:center; gap:.625rem; margin-top:var(--e2); font-size:var(--t-card); }
.form[data-estado="enviando"] .form__estado--enviando,
.form[data-estado="ok"] .form__estado--ok,
.form[data-estado="error"] .form__estado--error{ display:flex; }
.form__estado--ok{ color:var(--bronce-claro); }
.form__estado--error{ color:#E0917C; }
.form[data-estado="enviando"] button[type="submit"]{ opacity:.55; pointer-events:none; }

/* Spinner del envío */
.girando{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--bronce-filete); border-top-color:var(--bronce);
  border-radius:50%;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* Bloque de estimado en banda clara */
.banda--clara .form-card,.banda--piedra .form-card{
  background:#fff; backdrop-filter:none;
  border-color:rgba(138,95,50,.28);
  box-shadow:var(--sombra-1);
}
.banda--clara .form-card h2,.banda--piedra .form-card h2{ color:var(--tinta-oscura); }
.banda--clara .form-card p,.banda--piedra .form-card p{ color:var(--tinta-oscura-sec); }
.banda--clara .campo input,.banda--clara .campo select,.banda--clara .campo textarea,
.banda--piedra .campo input,.banda--piedra .campo select,.banda--piedra .campo textarea{
  background:var(--blanco-arq); color:var(--tinta-oscura);
  border-color:rgba(17,16,15,.18);
}
.banda--clara .campo input::placeholder,.banda--piedra .campo input::placeholder{ color:#6E6862; }
.banda--clara .campo input:focus,.banda--piedra .campo input:focus,
.banda--clara .campo select:focus,.banda--piedra .campo select:focus,
.banda--clara .campo textarea:focus,.banda--piedra .campo textarea:focus{
  border-color:var(--bronce-profundo); background:#fff;
  box-shadow:0 0 0 3px rgba(138,95,50,.14);
}
.banda--clara .form__legal,.banda--piedra .form__legal,
.banda--clara .campo__contador,.banda--piedra .campo__contador{ color:var(--charcoal); }

@media (max-width:520px){ .campos{ grid-template-columns:1fr; } }


/* ═══ 11 · RESEÑAS ═════════════════════════════════════════════════════════ */

.resenas{ display:grid; gap:var(--e3); grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .resenas{ grid-template-columns:1fr; } }

.resena{
  display:flex; flex-direction:column;
  padding:var(--e4) var(--e3);
  background:var(--carbon-elev);
  border-top:1px solid var(--bronce-tenue);
}
.banda--clara .resena{ background:#fff; border-top-color:rgba(138,95,50,.3); }

.resena__estrellas{ display:flex; gap:2px; margin-bottom:var(--e2); color:var(--bronce); }
.banda--clara .resena__estrellas{ color:var(--bronce-profundo); }
.resena__estrellas .ico{ width:15px; height:15px; }

.resena blockquote{
  margin:0 0 var(--e3); flex:1;
  font:400 1.0625rem/1.7 var(--sans);
  color:var(--tinta-sec);
}
.banda--clara .resena blockquote{ color:var(--tinta-oscura-sec); }

.resena__firma{ display:flex; align-items:baseline; gap:.625rem; flex-wrap:wrap; }
.resena__firma cite{
  font:600 var(--t-card)/1 var(--sans); font-style:normal; color:var(--tinta);
}
.banda--clara .resena__firma cite{ color:var(--tinta-oscura); }
.resena__firma .t-label{ font-size:var(--t-micro); }

/* Sello DEMO — visible, para que nadie publique esto por error */
.demo-tag{
  align-self:flex-start; margin-bottom:var(--e2);
  padding:.25rem .5rem;
  background:rgba(201,112,90,.16); border:1px solid rgba(201,112,90,.5);
  font:600 var(--t-micro)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:#E0917C;
}


/* ═══ 12 · ACORDEÓN FAQ ════════════════════════════════════════════════════
   Abre mostrando la primera respuesta. Nunca se esconde todo el contenido
   detrás de pestañas cerradas — la regla que Runa nos enseñó a los golpes. */

.faq{ border-top:1px solid var(--bronce-filete); }
.banda--clara .faq,.banda--piedra .faq{ border-top-color:rgba(17,16,15,.15); }

.faq__item{ border-bottom:1px solid var(--bronce-filete); }
.banda--clara .faq__item,.banda--piedra .faq__item{ border-bottom-color:rgba(17,16,15,.15); }

.faq__boton{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3);
  width:100%; padding:var(--e3) 0; text-align:left;
  font:600 1.1875rem/1.45 var(--sans); color:inherit;
  transition:color var(--t-rapido);
}
.faq__boton:hover{ color:var(--bronce); }
.banda--clara .faq__boton:hover,.banda--piedra .faq__boton:hover{ color:var(--bronce-profundo); }

.faq__signo{
  position:relative; flex-shrink:0;
  width:22px; height:22px; margin-top:.2em; color:var(--bronce);
}
.banda--clara .faq__signo,.banda--piedra .faq__signo{ color:var(--bronce-profundo); }
.faq__signo::before,.faq__signo::after{
  content:""; position:absolute; top:50%; left:0;
  width:100%; height:1px; background:currentColor;
  transition:transform var(--t-medio) var(--sale);
}
.faq__signo::after{ transform:rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__signo::after{ transform:rotate(0); }

/* El panel se abre y cierra con grid-template-rows, no con height: animar
   height obliga al navegador a recalcular layout en cada fotograma.
   Por defecto está ABIERTO — así, sin JavaScript, todas las respuestas se leen.
   El JS agrega .js y marca data-abierto="false" en las que cierra. */
.faq__panel{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows var(--t-medio) var(--sale);
}
.faq__panel > div{
  overflow:hidden; visibility:visible;
  padding-bottom:var(--e4); max-width:var(--ancho-texto);
}
.js .faq__panel[data-abierto="false"]{ grid-template-rows:0fr; }
.js .faq__panel[data-abierto="false"] > div{
  visibility:hidden;
  transition:visibility 0s linear var(--t-medio);
}
.faq__panel p{ color:var(--tinta-sec); }
.banda--clara .faq__panel p,.banda--piedra .faq__panel p{ color:var(--tinta-oscura-sec); }


/* ═══ 13 · PRECIOS ═════════════════════════════════════════════════════════ */

.precio-tabla{ width:100%; border-collapse:collapse; font-size:var(--t-card); }
.precio-tabla caption{
  padding-bottom:var(--e2); text-align:left;
  font:600 var(--t-label)/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--charcoal);
}
.precio-tabla th,.precio-tabla td{
  padding:var(--e2) var(--e2) var(--e2) 0; text-align:left;
  border-bottom:1px solid rgba(17,16,15,.12);
}
.precio-tabla thead th{
  font:600 var(--t-micro)/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--charcoal); border-bottom-color:rgba(17,16,15,.3);
}
.precio-tabla tbody th{ font-weight:600; color:var(--tinta-oscura); }
.precio-tabla .precio{
  font:300 1.5rem/1 var(--display); color:var(--bronce-profundo);
  white-space:nowrap;
}
.precio-tabla .cuota{ color:var(--charcoal); white-space:nowrap; font-variant-numeric:tabular-nums; }
.precio-envoltorio{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.paquete{
  padding:var(--e4) var(--e3);
  background:#fff; border-top:2px solid var(--bronce-profundo);
}
.paquete--destacado{ background:var(--carbon); color:var(--tinta); border-top-color:var(--bronce); }
.paquete--destacado h3{ color:var(--tinta); }
.paquete--destacado .t-cifra{ color:var(--bronce); }
/* Standard Package sits on a white card: force dark text for readability. */
.paquete:not(.paquete--destacado) .lista-v li,
.paquete:not(.paquete--destacado) .lista-v li *,
.lista-v--standard li,
.lista-v--standard li *{
  color:#11100F !important;
  -webkit-text-fill-color:#11100F !important;
  opacity:1 !important;
}
.paquete--destacado .lista-v li{ color:var(--tinta); }
.paquete--destacado .lista-v li::before{
  border-color:var(--bronce);
  background:
    linear-gradient(var(--bronce),var(--bronce)) center/1px 100% no-repeat,
    linear-gradient(var(--bronce),var(--bronce)) center/100% 1px no-repeat;
}


/* ═══ 14 · FOOTER ══════════════════════════════════════════════════════════ */

.footer{
  position:relative; overflow:hidden;
  padding-block:var(--e7) var(--e4);
  background:var(--carbon);
  border-top:1px solid var(--bronce-tenue);
}
.footer__grilla{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--e5) var(--e4);
}
@media (max-width:960px){ .footer__grilla{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grilla{ grid-template-columns:1fr; } }

.marca--footer{ margin-bottom:var(--e3); }
.marca--footer .marca__mono{ height:72px; }
.marca--footer .marca__nombre{ font-size:1.75rem; letter-spacing:.28em; }
.marca--footer .marca__sub{ font-size:.625rem; }
.footer__linea{
  max-width:32ch; margin-bottom:var(--e3);
  font:300 1.25rem/1.45 var(--display); color:var(--bronce);
}
.footer__contacto{ display:flex; flex-direction:column; gap:.75rem; }
.footer__contacto a,.footer__contacto p{
  display:flex; align-items:flex-start; gap:.625rem; margin:0;
  font-size:var(--t-card); color:var(--tinta-sec);
  transition:color var(--t-rapido);
}
.footer__contacto a:hover{ color:var(--bronce-claro); }
.footer__contacto .ico{ width:17px; height:17px; color:var(--bronce); flex-shrink:0; margin-top:.15em; }

.footer h4{
  margin-bottom:var(--e3); padding-bottom:.75rem;
  border-bottom:1px solid var(--bronce-tenue);
  font:600 var(--t-label)/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronce);
}
.footer__lista{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6875rem; }
.footer__lista a{
  display:inline-block;
  font-size:var(--t-card); color:var(--tinta-sec);
  transition:color var(--t-rapido), transform var(--t-rapido) var(--entra);
}
.footer__lista a:hover{ color:var(--bronce-claro); transform:translateX(4px); }

/* La licencia, en su placa. Es el activo de confianza del rubro. */
.licencia{
  display:inline-flex; flex-direction:column; gap:.375rem;
  margin-top:var(--e3); padding:.75rem 1rem;
  border:1px solid var(--bronce-filete);
}
.licencia .t-label{ color:var(--bronce); font-size:var(--t-micro); }
.licencia strong{
  font:600 1.0625rem/1 var(--sans); letter-spacing:.16em; color:var(--tinta);
}

.footer__redes{ display:flex; gap:.75rem; margin-top:var(--e3); }
.footer__redes a{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:1px solid var(--bronce-tenue); color:var(--bronce);
  transition:background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.footer__redes a:hover{ background:var(--bronce-profundo); border-color:var(--bronce-profundo); color:#fff; }
.footer__redes .ico{ width:19px; height:19px; }

.footer__base{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--e2);
  margin-top:var(--e6); padding-top:var(--e3);
  border-top:1px solid var(--bronce-tenue);
}
.footer__base p{ margin:0; font-size:var(--t-micro); color:var(--tinta-ter); }
.footer__zonas{ display:flex; flex-wrap:wrap; gap:.5rem var(--e2); }
.footer__zonas a{ font-size:var(--t-micro); color:var(--tinta-ter); }
.footer__zonas a:hover{ color:var(--bronce); }


/* ═══ 15 · FLOTANTES ═══════════════════════════════════════════════════════ */

.wa{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:90;
  display:flex; align-items:center; gap:.625rem;
  padding:.9375rem 1.25rem;
  background:var(--carbon); color:var(--bronce);
  border:1px solid var(--bronce);
  box-shadow:var(--sombra-2);
  font:600 .875rem/1 var(--sans); letter-spacing:.06em;
  transition:background var(--t-medio) var(--entra), color var(--t-medio), gap var(--t-medio);
}
.wa:hover{ background:var(--bronce-profundo); border-color:var(--bronce-profundo); color:#fff; }
.wa .ico{ width:22px; height:22px; flex-shrink:0; }
.wa__texto{ white-space:nowrap; }
@media (max-width:620px){
  .wa{ padding:.9375rem; }
  .wa__texto{ display:none; }
}

/* Popup de la guía */
.guia{
  position:fixed; left:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:89; width:min(320px,calc(100vw - 2rem));
  background:var(--carbon-elev);
  border:1px solid var(--bronce-filete);
  box-shadow:var(--sombra-3);
  transform:translateY(calc(100% + 3rem)); opacity:0;
  transition:transform var(--t-lento) var(--sale), opacity var(--t-medio) var(--sale);
}
.guia[data-visible="true"]{ transform:translateY(0); opacity:1; }
.guia__cerrar{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; color:var(--tinta-sec);
  transition:color var(--t-rapido);
}
.guia__cerrar:hover{ color:var(--bronce); }
.guia__cerrar .ico{ width:16px; height:16px; }
.guia__cuerpo{ padding:var(--e3); }
.guia__cuerpo h3{ font-size:1.125rem; margin-bottom:.5rem; }
.guia__cuerpo p{ font-size:var(--t-card); color:var(--tinta-sec); margin-bottom:var(--e2); }
@media (max-width:620px){ .guia{ display:none; } }


/* ═══ 16 · MOVIMIENTO ══════════════════════════════════════════════════════
   Un solo momento de entrada, orquestado, con ease-out exponencial y desde
   un estado ya visible: si el JS falla, todo se ve igual.                  */

[data-reveal]{
  opacity:1; transform:none;
}
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--t-lento) var(--sale), transform var(--t-lento) var(--sale);
}
.js [data-reveal].en-vista{ opacity:1; transform:none; }
.js [data-reveal][data-delay="1"]{ transition-delay:110ms; }
.js [data-reveal][data-delay="2"]{ transition-delay:220ms; }
.js [data-reveal][data-delay="3"]{ transition-delay:330ms; }
.js [data-reveal][data-delay="4"]{ transition-delay:440ms; }
.js [data-reveal][data-delay="5"]{ transition-delay:550ms; }

/* El barrido metálico del hero: pasa una vez, al cargar. */
.js .metal--barrido{ background-position:220% 0; }
.js .metal--barrido.barrer{
  background-position:0 0;
  transition:background-position 2.2s var(--sale) 320ms;
}

/* Respeto total por quien pidió menos movimiento. Es la regla que no se
   negocia: se apaga el movimiento, no el contenido. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .js .metal--barrido{ background-position:0 0 !important; }
  .cumbrera--lista .cumbrera__gable{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .cumbrera--lista .cumbrera__ventana,.cumbrera--lista .cumbrera__linea{ opacity:1 !important; }
  .servicio:hover .servicio__foto img,.obra:hover .obra__foto img{ transform:none; }
}

/* Impresión: que un presupuesto impreso sea legible */
@media print{
  .header,.wa,.guia,.hero__fondo,.hero__velo,.cumbrera,.footer__redes{ display:none !important; }
  body{ background:#fff; color:#000; }
  .banda{ padding-block:1.5rem; background:#fff !important; color:#000 !important; }
  a{ text-decoration:underline; }
}


/* ── Where We Work · contenido editorial ampliado ─────────────────────── */
.where-work__subtitulo{
  margin-top:var(--e3);
  color:var(--blanco-arq);
}
.where-work__contenido{
  max-width:78ch;
}
.where-work__contenido p + p{
  margin-top:var(--e3);
}
.where-work__label{
  margin:var(--e5) 0 var(--e2);
}
/* Doce ciudades en un renglón corrido con bullets se leen como una nota al pie.
   En grilla se leen como cobertura, que es el argumento comercial. */
.where-work__ciudades{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:.625rem var(--e3);
  margin:0; padding:0; list-style:none;
  max-width:none;
  font-size:var(--t-card);
  color:var(--blanco-arq);
}
.where-work__ciudades li{
  padding-left:1.125rem;
  border-left:1px solid var(--bronce-filete);
}
@media (max-width:780px){ .where-work__ciudades{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .where-work__ciudades{ grid-template-columns:1fr; } }
.where-work__subseccion{
  margin:var(--e6) 0 var(--e3);
}
.where-work__cierre{
  margin-top:var(--e5) !important;
  font-weight:600;
  color:var(--blanco-arq);
}