@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   EVERGREEN CHIMNEY EXPERTS · hoja de estilos única
   369 Creative Agency · agosto 2026

   CONTRATO DE DIRECCIÓN
   ─────────────────────
   TESIS: al chimney sweep no se lo contrata por simpatía sino por confianza,
     y el rubro entero vive contaminado por el bait & switch — anuncian $49,
     llegan y "descubren" miles en reparaciones. Esta página no vende miedo:
     enseña. El dueño de casa entiende su propia chimenea antes de que llegue
     nadie a cobrarle.

   MUNDO PROPIO: fijado por la hoja de identidad del cliente, no inventado acá.
     Fondo evergreen #173B22 con salones de lectura en hearth stone #F3F0E8.
     Roboto Slab en display, Barlow Condensed en datos técnicos, Inter en cuerpo.
     Del emblema salen los tres devices: el ARCO del crest como separador de
     sección, el APAREJO de ladrillo como grilla de datos, y el SELLO circular
     como marca de navegación. Un solo acento cálido — brasa #B4552B — reservado
     para el botón primario y para el riesgo. Nada más es naranja en toda la web.

   ELEMENTO FIRMA: el descenso por el ducto. Lámina técnica animada, dibujada
     por código, que baja 25 pies mostrando lo que hay adentro.

   ACABADO: contraste AA en todo, foco visible, prefers-reduced-motion
     respetado, y ni una promesa que el cliente no haya confirmado.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1 · FICHAS DE DISEÑO ══════════════════════════════════════════════════ */

:root {
  /* Paleta de la hoja de identidad — no se toca */
  --evergreen:      #173B22;
  --hollin:         #0C0F0B;
  --musgo:          #6F9360;
  --cascada:        #B8C3CC;
  --piedra:         #F3F0E8;

  /* Derivados. La brasa es el único color que no está en la hoja: hace falta
     una señal que no sea verde para el riesgo y para el botón primario, y sale
     del ladrillo que aparece en todas las fotos. Blanco sobre brasa = 4.9:1. */
  --evergreen-hondo: #0F2716;
  --evergreen-alto:  #1E4C2C;
  --musgo-claro:     #93B584;
  --brasa:           #B4552B;
  --brasa-viva:      #C96A3C;
  --piedra-honda:    #E4DFD1;
  --tinta-suave:     #4A5449;     /* texto secundario sobre piedra — 7:1 */
  --linea:           rgba(12,15,11,.14);
  --linea-clara:     rgba(243,240,232,.18);

  /* Tipografía */
  --display: "Roboto Slab", Georgia, serif;
  --tecnica: "Barlow Condensed", "Arial Narrow", sans-serif;
  --cuerpo:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --env:      82rem;   /* ancho máximo del contenido */
  --canal:    clamp(1.25rem, 4vw, 3rem);
  --seccion:  clamp(4.5rem, 9vw, 8rem);

  /* Curva de salida exponencial: todo entra desde un estado ya visible */
  --salida: cubic-bezier(.16, 1, .3, 1);
}


/* ═══ 2 · BASE ══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--evergreen);
  color: var(--piedra);
  font: 400 1.125rem/1.65 var(--cuerpo);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -.015em; }
h4 { font-size: 1.15rem; letter-spacing: -.01em; }

p { margin: 0 0 1.15em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: .5em; }

strong { font-weight: 650; }

/* Foco visible en todo lo enfocable. No se quita nunca. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--musgo-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brasa); color: #fff; }

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brasa); color: #fff; padding: .9rem 1.4rem;
  font: 600 1rem var(--cuerpo);
}
.salto:focus { left: .5rem; top: .5rem; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ═══ 3 · ESTRUCTURA ════════════════════════════════════════════════════════ */

.env {
  width: min(100% - var(--canal) * 2, var(--env));
  margin-inline: auto;
}
.env-angosto { width: min(100% - var(--canal) * 2, 62rem); margin-inline: auto; }

.seccion { padding-block: var(--seccion); }

/* Salones de lectura: los bloques claros sobre el fondo verde */
.claro  { background: var(--piedra); color: var(--hollin); }
.claro  h1, .claro h2, .claro h3, .claro h4 { color: var(--evergreen); }
.claro  .apoyo { color: var(--tinta-suave); }

.hondo  { background: var(--evergreen-hondo); }
.tinta  { background: var(--hollin); }

.apoyo {
  color: var(--cascada);
  font-size: 1.1875rem;
  max-width: 58ch;
}

/* Etiqueta técnica — Barlow Condensed. Es dato, no adorno: solo se usa donde
   hay una medida, una norma o una clasificación real. */
.tecnica {
  font: 600 .95rem/1.2 var(--tecnica);
  letter-spacing: .09em;
  text-transform: uppercase;
}


/* ═══ 4 · EL ARCO DEL CREST ═════════════════════════════════════════════════
   Device de sección sacado del emblema: dos arcos concéntricos, uno grueso
   evergreen y uno fino musgo. Separa secciones y encabeza bloques. */

.arco { display: block; width: 100%; height: auto; color: var(--musgo); }
.arco--separador { margin-bottom: -1px; }

.encabezado-arco { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado-arco .arco { width: 7rem; margin: 0 auto 1.5rem; }
.encabezado-arco p { margin-inline: auto; }


/* ═══ 5 · EL APAREJO ════════════════════════════════════════════════════════
   Grilla de ladrillo a soga: las filas pares se desplazan medio módulo, igual
   que la mampostería real. Se usa para datos, no para decorar. */

.aparejo { display: grid; gap: 1px; background: var(--linea); }
.aparejo > * { background: var(--piedra); padding: 1.6rem 1.5rem; }

@media (min-width: 48rem) {
  .aparejo { grid-template-columns: repeat(4, 1fr); }
  .aparejo > .ladrillo-doble { grid-column: span 2; }
}

.hondo .aparejo, .tinta .aparejo { background: var(--linea-clara); }
.hondo .aparejo > *, .tinta .aparejo > * { background: var(--evergreen); }

/* Los dos van en BLOQUE. Eran <span> y por lo tanto elementos en línea: se
   pegaban uno al lado del otro y el margen superior no hacía nada, así que el
   título grande y el texto chico se pisaban.

   El tamaño del título también bajó. El componente nació para una cifra corta
   —"$4,600"— con su etiqueta debajo, pero terminó usándose con frases como
   "ZIP codes we cover", y a 2,4rem eso ocupaba tres renglones y aplastaba al
   texto que venía después. */
.ladrillo-dato {
  display: block;
  font: 700 clamp(1.15rem, 1.9vw, 1.45rem)/1.2 var(--display);
  letter-spacing: -.015em;
}

/* Y el pie dejó de ser una etiqueta técnica en mayúsculas. Con una palabra
   suelta funcionaba; con una oración entera, las mayúsculas más el espaciado
   de letras la vuelven ilegible. Va en cuerpo normal. */
.ladrillo-pie {
  display: block;
  font: 400 1rem/1.5 var(--cuerpo);
  letter-spacing: normal;
  text-transform: none;
  color: var(--tinta-suave);
  margin-top: .55rem;
  max-width: 46ch;
}
.hondo .ladrillo-pie, .tinta .ladrillo-pie { color: var(--cascada); }


/* ═══ 6 · BOTONES ═══════════════════════════════════════════════════════════
   Regla de la casa: texto blanco sobre acento saturado, en TODOS los estados. */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.9rem;
  font: 650 1.0625rem/1 var(--cuerpo);
  letter-spacing: .005em;
  text-decoration: none;
  /* Un botón no parte su etiqueta. Dentro de un contenedor flex apretado se
     encogía hasta romper "Book your service" en tres líneas. */
  white-space: nowrap; flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .25s var(--salida), transform .25s var(--salida),
              box-shadow .25s var(--salida), border-color .25s var(--salida);
}
.boton:active { transform: translateY(1px); }

.boton--brasa {
  background: var(--brasa); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(180,85,43,.85);
}
.boton--brasa:hover, .boton--brasa:focus-visible {
  background: var(--brasa-viva); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(180,85,43,.95);
}

.boton--verde { background: var(--evergreen); color: #fff; }
.boton--verde:hover, .boton--verde:focus-visible { background: var(--evergreen-alto); color: #fff; }

.boton--linea {
  background: transparent; color: var(--piedra); border-color: rgba(243,240,232,.45);
}
.boton--linea:hover, .boton--linea:focus-visible {
  border-color: var(--piedra); background: rgba(243,240,232,.08); color: var(--piedra);
}
.claro .boton--linea { color: var(--evergreen); border-color: rgba(23,59,34,.35); }
.claro .boton--linea:hover { background: rgba(23,59,34,.06); border-color: var(--evergreen); }

.boton[disabled], .boton[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}

.grupo-botones { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Enlace de texto con subrayado que crece */
.enlace {
  font: 650 1.0625rem/1 var(--cuerpo);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid currentColor;
  transition: gap .25s var(--salida);
}
.enlace:hover { gap: .85rem; }
.enlace .flecha { transition: transform .25s var(--salida); }
.enlace:hover .flecha { transform: translateX(3px); }


/* ═══ 7 · CABECERA ══════════════════════════════════════════════════════════ */

.cabecera {
  position: sticky; top: 0; z-index: 90;
  background: rgba(12,15,11,.0);
  transition: background-color .35s var(--salida), box-shadow .35s var(--salida);
}
.cabecera.pegada {
  background: rgba(12,15,11,.94);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
}
@supports (backdrop-filter: blur(10px)) {
  .cabecera.pegada { background: rgba(12,15,11,.82); backdrop-filter: blur(12px); }
}

.cabecera-fila {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: .85rem;
}

.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex: 0 0 auto; }
.marca img { width: 46px; height: 46px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre {
  font: 700 1.28rem/1 var(--display); letter-spacing: -.02em; color: var(--piedra);
}
.marca-bajada {
  font: 600 .72rem/1 var(--tecnica); letter-spacing: .18em;
  text-transform: uppercase; color: var(--musgo-claro); margin-top: .3rem;
}

/* Navegación: gruesa y clara. La tipografía chica no se lee. */
/* OJO con la especificidad acá: estas reglas van sobre los HIJOS DIRECTOS.
   Con `.nav ul` a secas, el desplegable también se volvía flex y se abría en
   horizontal ocupando toda la pantalla. */
.nav { margin-left: auto; }
.nav > ul {
  display: flex; gap: clamp(.9rem, 1.7vw, 1.55rem);
  list-style: none; margin: 0; padding: 0;
}
.nav > ul > li { margin: 0; }
/* inline-flex, no inline-block: si no, el chevron del desplegable deja de ser
   un ítem flex y se cae a la línea de abajo. */
.nav > ul > li > a {
  font: 650 1.0625rem/1 var(--cuerpo);
  color: var(--piedra); text-decoration: none;
  padding: .85rem 0; position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap;
}
.nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--musgo-claro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--salida);
}
.nav > ul > li > a:hover::after,
.nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }


/* ── Desplegables ─────────────────────────────────────────────────────────
   Services abre los nueve servicios y Service Areas abre las ciudades, que es
   lo que hace que un visitante entienda de una que cubrimos su zona sin tener
   que entrar a buscarlo. */

.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: .4rem; }

.chevron {
  width: 14px; height: 14px; flex: 0 0 auto;
  transition: transform .25s var(--salida);
}
.nav-item:hover > a .chevron,
.nav-item:focus-within > a .chevron { transform: rotate(180deg); }

.nav .nav-sub {
  position: absolute; top: 100%; left: -1.1rem;
  min-width: 17rem; margin: 0; padding: .45rem 0; list-style: none;
  background: var(--hollin);
  border: 1px solid var(--linea-clara);
  box-shadow: 0 22px 44px -26px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--salida), transform .22s var(--salida), visibility .22s;
  z-index: 30;
}
.nav .nav-item:hover > .nav-sub,
.nav .nav-item:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav .nav-sub li { margin: 0; }
.nav .nav-sub a {
  display: block; padding: .8rem 1.3rem;
  font: 500 1.0625rem/1.3 var(--cuerpo); color: var(--cascada);
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--salida), color .18s var(--salida),
              transform .18s var(--salida);
}
.nav .nav-sub a:hover, .nav .nav-sub a:focus-visible {
  background: var(--evergreen); color: var(--piedra); transform: translateX(4px);
}

.cabecera-acciones { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.tel-cabecera {
  font: 700 1.0625rem/1 var(--cuerpo); color: var(--piedra); text-decoration: none;
  white-space: nowrap;
}
.tel-cabecera:hover { color: var(--musgo-claro); }

.idioma {
  font: 600 .9rem/1 var(--tecnica); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cascada); text-decoration: none; padding: .4rem .55rem;
  border: 1px solid var(--linea-clara); border-radius: 2px;
}
.idioma:hover { color: var(--piedra); border-color: var(--piedra); }

/* Hamburguesa */
.hamburguesa {
  display: none; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--linea-clara); border-radius: 3px;
  cursor: pointer; align-items: center; justify-content: center;
}
.hamburguesa span {
  display: block; width: 22px; height: 2px; background: var(--piedra); position: relative;
  transition: background-color .2s var(--salida);
}
.hamburguesa span::before, .hamburguesa span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--piedra);
  transition: transform .3s var(--salida), top .3s var(--salida);
}
.hamburguesa span::before { top: -7px; }
.hamburguesa span::after  { top: 7px; }
.hamburguesa[aria-expanded="true"] span { background: transparent; }
.hamburguesa[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.nav-movil {
  display: none;
  background: var(--hollin);
  border-top: 1px solid var(--linea-clara);
}
.nav-movil.abierta { display: block; }
.nav-movil ul { list-style: none; margin: 0; padding: .5rem 0 1.5rem; }
.nav-movil li { margin: 0; border-bottom: 1px solid var(--linea-clara); }
.nav-movil a {
  display: block; padding: 1.05rem var(--canal);
  font: 650 1.1875rem/1 var(--cuerpo); color: var(--piedra); text-decoration: none;
}
.nav-movil a:hover { background: var(--evergreen); }

/* En móvil el padre no navega: despliega. El chevron gira para decirlo. */
.nav-movil .nav-item > a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-movil .chevron { width: 18px; height: 18px; color: var(--musgo-claro); }
.nav-movil .nav-item[data-abierto="true"] > a .chevron { transform: rotate(180deg); }

.nav-movil .nav-sub {
  display: none; list-style: none; margin: 0; padding: 0;
  background: var(--evergreen-hondo);
}
.nav-movil .nav-item[data-abierto="true"] > .nav-sub { display: block; }
.nav-movil .nav-sub li { border-bottom: 0; }
.nav-movil .nav-sub li + li { border-top: 1px solid rgba(243,240,232,.08); }
.nav-movil .nav-sub a {
  padding: .95rem var(--canal) .95rem calc(var(--canal) + 1.2rem);
  font: 500 1.0625rem/1.3 var(--cuerpo); color: var(--cascada);
}
.nav-movil .nav-sub a:hover { background: var(--evergreen); color: var(--piedra); }

/* La fila completa —logo + seis ítems + teléfono + botón— necesita 1160px de
   ancho útil. Por debajo de 80rem no entra y la cabecera se parte en dos filas,
   así que ahí pasa a hamburguesa. El teléfono se queda mucho más abajo: llamar
   es la acción que más convierte en este rubro y no se esconde por prolijidad. */
@media (max-width: 79.9rem) {   /* 1278px — a 1280 exacto entra completo */
  .nav { display: none; }
  .hamburguesa { display: inline-flex; }
  .cabecera-acciones { margin-left: auto; }
}
@media (max-width: 48rem) {
  /* Acá abajo el teléfono ya no cabe, pero la barra fija de abajo tiene Call. */
  .tel-cabecera { display: none; }
}
@media (max-width: 30rem) {
  .marca-texto { display: none; }
  .cabecera-acciones .boton { padding: .8rem 1.1rem; font-size: .95rem; }
}


/* ═══ 8 · BARRA FIJA MÓVIL ══════════════════════════════════════════════════
   En EE.UU. el canal no es WhatsApp: es reservar, llamar o textear. */

.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1.4fr 1fr 1fr;
  background: var(--hollin);
  border-top: 1px solid var(--linea-clara);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-movil a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; padding: .8rem .4rem;
  font: 650 .9375rem/1 var(--cuerpo); color: var(--piedra); text-decoration: none;
  border-left: 1px solid var(--linea-clara);
}
.barra-movil a:first-child { border-left: 0; background: var(--brasa); color: #fff; }
.barra-movil a:first-child:hover { background: var(--brasa-viva); }
.barra-movil svg { width: 20px; height: 20px; }

@media (max-width: 60rem) {
  .barra-movil { display: grid; }
  body { padding-bottom: 4.6rem; }
}


/* ═══ 9 · HERO ══════════════════════════════════════════════════════════════ */

.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; z-index: -2; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }

/* El video del hero va encima del póster de respaldo.
   Arranca invisible SOLO hasta que el JS le asigna su fuente — antes de eso es
   un elemento vacío y taparía la foto. Una vez despierto queda visible y el
   atributo poster del propio <video> cubre el rato hasta que llega el primer
   cuadro, que es para lo que existe.

   Antes esto dependía del evento 'playing' para volverse visible, y si ese
   evento no llegaba —autoplay rechazado, pestaña en segundo plano, un
   navegador que no lo dispara— el video quedaba invisible para siempre aunque
   estuviera reproduciendo. */
.hero-fondo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%;
  opacity: 0;
  transition: opacity .7s var(--salida);
}
.hero-fondo video[data-despierto] { opacity: 1; }

/* Velo de dos capas: uno plano para asegurar contraste, uno direccional para
   que el texto respire sobre la parte clara del cielo. */
.hero-fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12,15,11,.93) 0%, rgba(12,15,11,.74) 42%, rgba(15,39,22,.42) 78%),
    linear-gradient(to top, rgba(15,39,22,.96) 2%, rgba(15,39,22,0) 42%);
}

.hero-cuerpo {
  padding-block: clamp(6rem, 15vh, 10rem) clamp(5rem, 11vh, 8rem);
  min-height: min(88vh, 54rem);
  display: flex; flex-direction: column; justify-content: center;
}

.hero h1 { max-width: 17ch; }
.hero h1 .resalte { color: var(--musgo-claro); display: block; }

.hero-bajada {
  margin-top: 1.6rem; max-width: 48ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--cascada);
}
.hero .grupo-botones { margin-top: 2.4rem; }

.hero-firma {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font: 600 clamp(.95rem,1.3vw,1.05rem)/1 var(--tecnica);
  letter-spacing: .22em; text-transform: uppercase; color: var(--musgo-claro);
  display: flex; align-items: center; gap: 1rem;
}
.hero-firma::before {
  content: ""; width: clamp(2rem,6vw,4.5rem); height: 1px; background: var(--musgo);
}

/* Fila de confianza al pie del hero */
.confianza {
  border-top: 1px solid var(--linea-clara);
  background: rgba(12,15,11,.55);
}
.confianza ul {
  list-style: none; margin: 0; padding: 1.4rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.confianza li {
  margin: 0; display: flex; align-items: center; gap: .6rem;
  font: 600 .95rem/1.25 var(--tecnica); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cascada);
}
.confianza svg { width: 18px; height: 18px; color: var(--musgo-claro); flex: 0 0 auto; }


/* ═══ 10 · EL DESCENSO POR EL DUCTO ═════════════════════════════════════════
   Elemento firma. El canvas queda pegado mientras la sección larga hace de
   pista de scroll. Sin scroll (o con reduced-motion) se ven las cuatro
   láminas fijas, que es el mismo contenido sin movimiento. */

.ducto { background: var(--hollin); position: relative; }

.ducto-pista { position: relative; height: 420vh; }
.ducto-marco {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: 1fr; align-items: center;
  overflow: hidden;
}
.ducto-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }

.ducto-panel {
  position: relative; z-index: 2;
  width: min(100% - var(--canal)*2, var(--env));
  margin-inline: auto;
  display: grid; grid-template-columns: 1fr;
  align-content: center; min-height: 100vh;
  padding-block: clamp(5rem, 12vh, 8rem);
  pointer-events: none;
}

.ducto-intro { max-width: 34rem; }
.ducto-intro h2 { color: var(--piedra); }
.ducto-intro p  { color: var(--cascada); margin-top: 1.2rem; }

/* Tarjeta de hallazgo: aparece cuando la cámara llega a esa profundidad */
.hallazgo {
  position: absolute; top: 50%; right: 0;
  width: min(26rem, 100%);
  transform: translateY(-50%) translateX(1.5rem);
  background: rgba(12,15,11,.9);
  border: 1px solid var(--linea-clara);
  padding: 1.6rem 1.7rem;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--salida), transform .5s var(--salida), visibility .5s;
}
@supports (backdrop-filter: blur(6px)) { .hallazgo { backdrop-filter: blur(8px); } }
.hallazgo.visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

/* La profundidad es el dato que ancla la ficha. Lleva una regla fina debajo,
   la misma gramática de filete que usa el resto de la página — no una barra de
   color al costado, que es el tic de plantilla que evitamos en todo el sitio. */
.hallazgo-prof {
  font: 700 .95rem/1 var(--tecnica); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brasa-viva); display: block;
  padding-bottom: .8rem; margin-bottom: .9rem;
  border-bottom: 1px solid rgba(201,106,60,.45);
}
.hallazgo h3 { color: var(--piedra); font-size: 1.5rem; }
.hallazgo p  { color: var(--cascada); font-size: 1rem; margin: .8rem 0 0; }
.hallazgo-costo {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linea-clara);
  font: 600 .95rem/1.3 var(--tecnica); letter-spacing: .07em; text-transform: uppercase;
  color: var(--musgo-claro);
}

/* Regla de profundidad al costado */
.regla {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3.5rem;
  display: none; z-index: 2; pointer-events: none;
}
@media (min-width: 62rem) { .regla { display: block; } }

/* Fallback: las cuatro láminas, una debajo de la otra */
.ducto-laminas { display: none; }
.ducto-laminas .lamina {
  display: grid; gap: 1.5rem; align-items: center;
  padding-block: 2.5rem; border-top: 1px solid var(--linea-clara);
}
@media (min-width: 48rem) {
  .ducto-laminas .lamina { grid-template-columns: 18rem 1fr; gap: 2.5rem; }
}
/* Las fotos de los hallazgos. Van a proporción fija para que la tarjeta no
   salte de alto mientras cargan. */
.ducto-laminas img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--linea-clara); background: var(--hollin);
}

/* Cuando el JS decide que no hay animación, se cambia qué se muestra */
.sin-ducto .ducto-pista   { display: none; }
.sin-ducto .ducto-laminas { display: block; }


/* ═══ 11 · EL CHEQUEO DE 60 SEGUNDOS ════════════════════════════════════════ */

.chequeo-caja {
  background: var(--piedra);
  border: 1px solid var(--linea);
  max-width: 46rem; margin-inline: auto;
}
/* La barra avanza con transform, no con width: así el navegador la resuelve en
   el compositor y no rehace el layout en cada pregunta. */
.chequeo-barra { height: 4px; background: var(--piedra-honda); overflow: hidden; }
.chequeo-barra i {
  display: block; height: 100%; width: 100%; background: var(--brasa);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--salida);
}
.chequeo-cuerpo { padding: clamp(1.75rem, 4vw, 3rem); }

.chequeo-paso { display: none; }
.chequeo-paso.activo { display: block; animation: entrar .45s var(--salida); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.chequeo-conteo {
  font: 600 .9rem/1 var(--tecnica); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: 1rem; display: block;
}
.chequeo-paso h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--evergreen); }

.opciones { display: grid; gap: .7rem; margin-top: 1.6rem; }
.opcion {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.2rem;
  background: #fff; border: 1px solid var(--linea);
  font: 500 1.0625rem/1.3 var(--cuerpo); color: var(--hollin);
  text-align: left; cursor: pointer; width: 100%;
  transition: border-color .2s var(--salida), background-color .2s var(--salida),
              transform .2s var(--salida);
}
.opcion::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--tinta-suave); transition: all .2s var(--salida);
}
.opcion:hover { border-color: var(--evergreen); transform: translateX(3px); }
.opcion:hover::before { border-color: var(--evergreen); }
.opcion[aria-pressed="true"] { border-color: var(--evergreen); background: #fff; }
.opcion[aria-pressed="true"]::before {
  border-color: var(--evergreen); background: var(--evergreen);
  box-shadow: inset 0 0 0 3px #fff;
}

.chequeo-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--linea);
}
.chequeo-atras {
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font: 600 1rem/1 var(--cuerpo); color: var(--tinta-suave); text-decoration: underline;
}
.chequeo-atras:hover { color: var(--evergreen); }

/* Resultado */
.veredicto { display: none; }
.veredicto.activo { display: block; animation: entrar .5s var(--salida); }

.veredicto-marca {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 700 1rem/1 var(--tecnica); letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1rem; color: #fff; margin-bottom: 1.4rem;
}
.riesgo-bajo  { background: var(--evergreen); }
.riesgo-medio { background: #8A6A18; }
.riesgo-alto  { background: var(--brasa); }

.veredicto h3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.veredicto-detalle { margin-top: 1.2rem; color: var(--tinta-suave); }

.veredicto-lista { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.veredicto-lista li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding: .95rem 0; border-top: 1px solid var(--linea); margin: 0;
  font-size: 1.0625rem;
}
.veredicto-lista svg { width: 20px; height: 20px; color: var(--evergreen); margin-top: .18rem; }

.veredicto-precio {
  margin-top: 1.6rem; padding: 1.2rem 1.4rem;
  background: var(--piedra-honda); border: 1px solid var(--linea);
}
.veredicto-precio b { font: 700 1.5rem/1 var(--display); display: block; margin-bottom: .3rem; }
.veredicto-precio small { font-size: .9375rem; color: var(--tinta-suave); }


/* ═══ 12 · SERVICIOS ════════════════════════════════════════════════════════
   Tres franjas anchas con foto real, no tres tarjetitas iguales con ícono. */

.franja { display: grid; align-items: center; border-top: 1px solid var(--linea-clara); }
@media (min-width: 56rem) {
  .franja { grid-template-columns: 1fr 1fr; }
  .franja:nth-child(even) .franja-foto { order: 2; }
}
.franja-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.franja-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--salida); }
.franja:hover .franja-foto img { transform: scale(1.03); }

.franja-texto { padding: clamp(2.2rem, 5vw, 4.5rem); }
.franja-texto h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--piedra); }
.franja-texto p  { color: var(--cascada); margin-top: 1rem; }
.franja-texto .enlace { margin-top: 1.6rem; color: var(--musgo-claro); }

.franja-lista { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.franja-lista li {
  padding-left: 1.5rem; position: relative; color: var(--cascada); font-size: 1.0625rem;
}
.franja-lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--musgo);
}


/* ═══ 13 · EL PROCESO ═══════════════════════════════════════════════════════
   Acá los números SÍ informan: es una secuencia real, y el orden importa. */

.proceso { counter-reset: paso; display: grid; gap: 1px; background: var(--linea); }
@media (min-width: 44rem) { .proceso { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .proceso { grid-template-columns: repeat(3, 1fr); } }

.paso { background: var(--piedra); padding: 2rem 1.8rem 2.2rem; counter-increment: paso; }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  font: 700 2.6rem/1 var(--display); color: var(--musgo);
  display: block; margin-bottom: .9rem; letter-spacing: -.03em;
}
.paso h3 { font-size: 1.35rem; }
.paso p  { color: var(--tinta-suave); font-size: 1rem; margin-top: .6rem; }


/* ═══ 14 · EL REVELADO (antes / después) ════════════════════════════════════ */

.revelados { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62rem) { .revelados { grid-template-columns: repeat(2, 1fr); } }

.revelado-ficha h3 { color: var(--piedra); font-size: 1.5rem; margin-bottom: .5rem; }
.revelado-ficha .apoyo { font-size: 1rem; margin-bottom: 1.2rem; }

.revelado {
  position: relative; overflow: hidden; user-select: none; touch-action: pan-y;
  aspect-ratio: 3 / 2; background: var(--hollin); cursor: ew-resize;
}
.revelado img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.revelado .despues { clip-path: inset(0 0 0 var(--corte, 50%)); }

.revelado-tirador {
  position: absolute; top: 0; bottom: 0; left: var(--corte, 50%);
  width: 2px; background: var(--piedra); transform: translateX(-1px);
  pointer-events: none;
}
.revelado-tirador::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 2px solid var(--piedra); border-radius: 50%;
  background: rgba(12,15,11,.55);
}
.revelado-tirador::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 10px; margin: -5px 0 0 -8px; z-index: 1;
  background:
    linear-gradient(to right, var(--piedra) 0 4px, transparent 4px 12px, var(--piedra) 12px 16px);
  clip-path: polygon(0 50%, 4px 0, 4px 100%, 100% 50%, 12px 0, 12px 100%);
}

.revelado-rotulo {
  position: absolute; bottom: .9rem; z-index: 2;
  font: 700 .85rem/1 var(--tecnica); letter-spacing: .14em; text-transform: uppercase;
  color: var(--piedra); background: rgba(12,15,11,.75); padding: .5rem .75rem;
}
.revelado-rotulo.izq { left: .9rem; }
.revelado-rotulo.der { right: .9rem; }

.revelado input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.revelado input[type="range"]:focus-visible ~ .revelado-tirador::after {
  border-color: var(--musgo-claro); box-shadow: 0 0 0 4px rgba(147,181,132,.4);
}


/* ═══ 15 · EL COSTO DE NO HACERLO ═══════════════════════════════════════════ */

.escala { display: grid; gap: 1px; background: var(--linea-clara); margin-top: 2.5rem; }
@media (min-width: 48rem) { .escala { grid-template-columns: repeat(3, 1fr); } }

.escalon { background: var(--evergreen); padding: 2rem 1.8rem; position: relative; }
.escalon:last-child { background: var(--evergreen-hondo); }
.escalon-cifra {
  font: 700 clamp(2.2rem, 5vw, 3.4rem)/1 var(--display); letter-spacing: -.03em;
  color: var(--piedra); display: block;
}
.escalon:last-child .escalon-cifra { color: var(--brasa-viva); }
.escalon h3 { font-size: 1.15rem; color: var(--piedra); margin-top: .9rem; }
.escalon p  { color: var(--cascada); font-size: 1rem; margin-top: .5rem; }


/* ═══ 16 · LO QUE RECIBÍS POR ESCRITO ═══════════════════════════════════════ */

.informe {
  background: #fff; border: 1px solid var(--linea);
  box-shadow: 0 24px 60px -40px rgba(12,15,11,.6);
  max-width: 44rem;
}
.informe-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.6rem; background: var(--evergreen); color: var(--piedra);
  flex-wrap: wrap;
}
.informe-cabeza img { width: 34px; height: 34px; }
.informe-cabeza .tecnica { color: var(--musgo-claro); }
.informe-cuerpo { padding: 1.6rem; }

.informe-linea {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding: .85rem 0; border-bottom: 1px solid var(--linea); margin: 0;
}
.informe-linea:last-of-type { border-bottom: 0; }
.informe-linea span:first-child { color: var(--hollin); font-size: 1.0625rem; }

.marca-estado {
  font: 700 .8rem/1 var(--tecnica); letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .6rem; color: #fff; white-space: nowrap;
}
.estado-ok    { background: var(--evergreen); }
.estado-ojo   { background: #8A6A18; }
.estado-ya    { background: var(--brasa); }

.informe-pie {
  padding: 1.3rem 1.6rem; background: var(--piedra-honda);
  font-size: .9375rem; color: var(--tinta-suave);
}


/* ═══ 17 · ZONAS Y VERIFICADOR DE ZIP ═══════════════════════════════════════ */

.zip-forma { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.zip-forma input {
  flex: 1 1 12rem; min-width: 0;
  padding: 1.05rem 1.2rem;
  font: 600 1.125rem/1 var(--cuerpo); letter-spacing: .06em;
  background: #fff; color: var(--hollin);
  border: 1px solid var(--linea); border-radius: 3px;
}
.zip-forma input::placeholder { color: #7C8479; letter-spacing: normal; font-weight: 400; }

/* Dentro o fuera de zona se distingue por el color del filete completo, a 1px.
   El resultado lo dice el texto; el borde solo lo confirma. */
.zip-respuesta {
  margin-top: 1.3rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--musgo); background: rgba(243,240,232,.06);
  display: none; font-size: 1.0625rem;
}
.zip-respuesta.visible { display: block; animation: entrar .35s var(--salida); }
.zip-respuesta.fuera { border-color: var(--brasa-viva); }
.zip-respuesta a { color: var(--musgo-claro); font-weight: 650; }

.ciudades { list-style: none; padding: 0; margin: 2.5rem 0 0;
            display: grid; gap: 1px; background: var(--linea-clara); }
@media (min-width: 40rem) { .ciudades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ciudades { grid-template-columns: repeat(3, 1fr); } }
.ciudades li { margin: 0; background: var(--evergreen); }
.ciudades a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.2rem 1.4rem; text-decoration: none; color: var(--piedra);
  transition: background-color .25s var(--salida);
}
.ciudades a:hover { background: var(--evergreen-alto); }
.ciudades b { font: 700 1.15rem/1 var(--display); letter-spacing: -.01em; }
.ciudades small { font: 600 .85rem/1 var(--tecnica); letter-spacing: .1em; color: var(--cascada); }


/* ═══ 18 · FAQ ══════════════════════════════════════════════════════════════ */

/* El fondo por defecto del sitio es el verde oscuro, así que el FAQ arranca
   con texto claro y se invierte dentro de .claro — no al revés. Antes estaba
   al revés y el FAQ de la home quedaba verde sobre verde, ilegible. */
.faq { border-top: 1px solid var(--linea-clara); }
.faq details { border-bottom: 1px solid var(--linea-clara); }
.faq summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font: 700 clamp(1.1rem,1.9vw,1.35rem)/1.35 var(--display);
  letter-spacing: -.01em; color: var(--piedra);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .3rem;
  background: currentColor;
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform .3s var(--salida);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq-respuesta { padding: 0 0 1.7rem; color: var(--cascada); max-width: 68ch; }

.claro .faq { border-color: var(--linea); }
.claro .faq details { border-color: var(--linea); }
.claro .faq summary { color: var(--evergreen); }
.claro .faq-respuesta { color: var(--tinta-suave); }


/* ═══ 19 · FORMULARIOS ══════════════════════════════════════════════════════ */

.campo { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.campo label {
  font: 600 .95rem/1.2 var(--tecnica); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.claro .campo label { color: var(--tinta-suave); }
.hondo .campo label, .tinta .campo label { color: var(--cascada); }

.campo input, .campo select, .campo textarea {
  padding: .95rem 1.1rem;
  font: 400 1.0625rem/1.4 var(--cuerpo);
  background: #fff; color: var(--hollin);
  border: 1px solid var(--linea); border-radius: 3px;
  width: 100%;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--evergreen);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--brasa); background: #FFF7F3;
}

.campo-error {
  font: 500 .9375rem/1.4 var(--cuerpo); color: var(--brasa); display: none;
}
.claro .campo-error { color: #93401F; }
.campo-error.visible { display: block; }

.consentimiento {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  margin: 1.4rem 0; font-size: .9375rem; line-height: 1.5;
}
.consentimiento input { width: 20px; height: 20px; margin-top: .18rem; }
.claro .consentimiento { color: var(--tinta-suave); }

.forma-aviso { margin-top: 1rem; padding: 1rem 1.2rem; display: none; font-size: 1rem; }
.forma-aviso.ok   { display: block; background: var(--evergreen); color: var(--piedra); }
.forma-aviso.mal  { display: block; background: #FBEEE7; color: #93401F; border: 1px solid var(--brasa); }


/* ═══ 20 · CIERRE Y PIE ═════════════════════════════════════════════════════ */

.cierre { text-align: center; }
.cierre h2 { max-width: 20ch; margin-inline: auto; }
.cierre .grupo-botones { justify-content: center; margin-top: 2.2rem; }

.pie { background: var(--hollin); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.pie-red { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .pie-red { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.pie h4 {
  font: 600 .9rem/1 var(--tecnica); letter-spacing: .14em; text-transform: uppercase;
  color: var(--musgo-claro); margin-bottom: 1.1rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .7rem; }
.pie a { color: var(--cascada); text-decoration: none; font-size: 1rem; }
.pie a:hover { color: var(--piedra); text-decoration: underline; }

.pie-marca img { width: 92px; height: 92px; margin-bottom: 1.2rem; }
.pie-marca p { color: var(--cascada); font-size: 1rem; max-width: 30ch; }

.pie-legal {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--linea-clara);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-size: .9375rem; color: #8C9689;
}
.pie-legal a { color: #8C9689; }


/* ═══ 21 · MIGAS ════════════════════════════════════════════════════════════ */

.migas { padding-block: 1.2rem; border-bottom: 1px solid var(--linea-clara); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.migas li { margin: 0; font: 600 .875rem/1.4 var(--tecnica); letter-spacing: .08em;
            text-transform: uppercase; color: var(--cascada); }
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--musgo); }
.migas a { color: var(--cascada); text-decoration: none; }
.migas a:hover { color: var(--piedra); }


/* ═══ 22 · CABEZAL DE PÁGINA INTERNA ════════════════════════════════════════ */

.cabezal { padding-block: clamp(3.5rem, 8vw, 6rem); position: relative; }
.cabezal h1 { max-width: 20ch; }
.cabezal .apoyo { margin-top: 1.4rem; font-size: 1.1875rem; }
.cabezal .grupo-botones { margin-top: 2.2rem; }


/* ═══ 23 · ENTRADAS POR SCROLL ══════════════════════════════════════════════
   Una sola gramática de entrada, no una animación distinta por sección. */

.js .revela { opacity: 0; transform: translateY(18px); }
.js .revela.dentro {
  opacity: 1; transform: none;
  transition: opacity .7s var(--salida), transform .7s var(--salida);
}


/* ═══ 24 · IMPRESIÓN — el informe se guarda en PDF ══════════════════════════ */

@media print {
  .cabecera, .barra-movil, .pie, .nav-movil, .no-imprime { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .informe { box-shadow: none; border: 1px solid #999; max-width: none; }
  .seccion { padding-block: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* ═══ 25 · MENOS MOVIMIENTO ═════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .revela { opacity: 1; transform: none; }
  .franja:hover .franja-foto img { transform: none; }
}