/* ══════════════════════════════════════════════════════════════════
   CABAÑAS CAROLINA · Lican Ray
   Demo 148. Identidad: «TOLDO A RAYAS».

   LA DIRECCION EN UNA FRASE
   La lona rayada del toldo de una casa de veraneo: crudo y azul en
   franjas anchas. Transmite «esto es el arriendo de siempre, el que
   ya conoces», que es lo que busca una familia que arrienda cabaña en
   Lican Ray en enero.

   LA PALETA
   --crudo     #F5F0E6  lona sin teñir
   --toldo     #3A78A8  el azul de la raya (4,2:1 — SOLO decorativo)
   --toldo-osc #1F5077  el mismo azul para TEXTO (7,5:1 sobre crudo)
   --tinta     #1B2229

   OJO CON ESTOS DOS AZULES: el claro es el de la lona y no llega a
   4,5:1, asi que NO lleva texto encima nunca. Estan separados a
   proposito para que no se confundan al editar.

   DESLINDE — las franjas de la 105 eran SIETE colores de amanecer
   (hostal): un degradado en bandas. Estas son DOS tonos alternados de
   lona: la raya es de toldo, no de arcoiris. Y el azul se deslinda del
   azul lona-de-carpa de la 150 (textil mate de camping, en planos):
   este es TOLDO DE VERANO, mas claro, y SIEMPRE va en rayas con el
   crudo — nunca en superficie plana.

   EL TRIO
   · display · Fredoka — redondeada y alegre, nueva en el registro. Es
     una decision de tono: esta pagina habla de vacaciones familiares,
     no de arquitectura.
   · cuerpo  · Lexend — neutra y muy legible.
   · dato    · Sometype Mono — para capacidades y rotulos de ficha.

   LA CABECERA (114ª del oficio) — EL TOLDO
   El semicirculo rayado con el borde festoneado de tres dientes.
   DESLINDE con el quitasol de la 66: aquel era sombrilla de playa
   VISTA DE LADO (el palo y el cono); este es toldo de ventana VISTO DE
   FRENTE, y lo que lo identifica es el feston.

   EL FONDO — LA SOMBRA DEL TOLDO QUE SE ALARGA
   Rayas de sombra anchas que CRECEN en largo, ancladas al borde de
   arriba, lentisimas: la tarde avanzando.
   DESLINDE: la sombra de la 100 era UNA franja que BARRIA de lado a
   lado; el estriado de la 121 es trama fina que AVANZA. Aca las rayas
   no viajan: se estiran. Por eso se anima la ALTURA de la caja y no
   la posicion del fondo.
   Reduced-motion: quietas a media tarde.

   LA ESTRUCTURA — J llevada a fichas de unidad
   DESLINDE con la 108 (J extremo: inventario de 001 a 048 de items) y
   con la 93 (ficha de UN sitio tipo). Aca son POCAS fichas de unidades
   HABITABLES, cada una con su encabezado propio y su numero — porque
   el argumento de la pagina es justamente que cada cabaña se
   identifica.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:     #F5F0E6;
  --crudo-2:   #EAE3D4;
  --crudo-3:   #FBF8F2;
  --toldo:     #3A78A8;   /* SOLO decorativo — 4,2:1, no lleva texto */
  --toldo-osc: #1F5077;   /* 7,5:1 sobre crudo — este es el de texto */
  --toldo-cl:  #9CC6E4;   /* sobre azul oscuro */
  --tinta:     #1B2229;
  --tinta-2:   #4E5A64;   /* 7,2:1 sobre crudo */
  --claro-2:   #C3D3DF;   /* sobre --toldo-osc */
  --linea:     #DCD4C2;
  --linea-osc: #2F6088;

  --display: 'Fredoka', system-ui, sans-serif;
  --cuerpo:  'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Sometype Mono', ui-monospace, 'Consolas', monospace;

  /* La lona: dos tonos alternados. Es el motivo de toda la pagina. */
  --lona: repeating-linear-gradient(90deg,
    var(--toldo) 0 14px, var(--crudo-3) 14px 28px);

  /* Curvas. --sale es la misma que ya usaban las apariciones de esta
     demo; se sube a variable para no repetirla en quince reglas.
     --muelle es la de la casa: sobreimpulso del 4 % a mitad de camino. */
  --sale:   cubic-bezier(.2, .7, .2, 1);
  --muelle: linear(0, .32 14%, .68 26%, .92 38%, 1.04 50%, 1.01 64%, .99 78%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crudo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--toldo-osc); color: var(--crudo); }
a { color: var(--toldo-osc); }
:focus-visible { outline: 2px solid var(--toldo-osc); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--toldo-osc);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: #fff; }
.propuesta__que b { font-weight: 600; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 62ch; }

/* ─────────── cabecera fantasma ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--crudo-3);
  border-bottom: 3px solid transparent;
  border-image: var(--lona) 1;   /* el borde ES la lona */
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(251, 248, 242, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: inherit; margin-right: auto;
  min-width: 0;
}
.cab__nombre {
  font-family: var(--display);
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: 1.1;
}

/* ── EL TOLDO — semicirculo rayado con feston de tres dientes ── */
.toldo {
  position: relative;
  width: 26px; height: 14px;
  flex: 0 0 auto;
  border-radius: 26px 26px 0 0 / 14px 14px 0 0;
  background: repeating-linear-gradient(90deg,
    var(--toldo) 0 4.4px, var(--crudo-3) 4.4px 8.8px);
  box-shadow: inset 0 0 0 1px rgba(31, 80, 119, .35);
}
.toldo::after {
  /* el feston: tres dientes. Es lo que lo hace toldo y no sombrilla. */
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -5px; height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--toldo) 0 4.4px, var(--crudo-3) 4.4px 8.8px);
  clip-path: polygon(0 0, 100% 0, 83% 100%, 67% 0, 50% 100%, 33% 0, 17% 100%, 0 0);
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--toldo-osc); border-bottom-color: var(--toldo-osc); }
@media (max-width: 54rem) { .cab__nav { display: none; } }

/* T1 — el telefono verificado */
.cab__tel {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .54rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.74rem, 2vw, .92rem);
  color: var(--toldo-osc);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  /* Con tope: sin el, en un monitor de 2600 px de alto la portada mide
     2288 y el visitante no ve que hay pagina debajo. La regla de la
     casa es min(vh, techo). */
  min-height: min(88svh, 760px);
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 42rem); }

/* ── LA SOMBRA DEL TOLDO QUE SE ALARGA ──
   Se anima la ALTURA de la caja, no la posicion del fondo: por eso
   las rayas crecen sin viajar. */
.sombra {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26%;
  z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(27, 34, 41, .07) 0 52px,
    transparent 52px 104px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
          mask-image: linear-gradient(#000 62%, transparent);
}
.js .sombra { animation: alarga 46s ease-in-out infinite alternate; }

/* Lentisima: 46 s de ida. Mirandola no se ve moverse — se nota al
   volver a la portada un rato despues, que es la idea. */
@keyframes alarga {
  from { height: 26%; }
  to   { height: 66%; }
}

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.3rem;
}
.portada h1 {
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: 1.06;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--tinta-2);
  max-width: min(92vw, 34rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: 1.05rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LA WEB ANTIGUA ═══════════ */
/* la seccion que lleva el aura necesita contexto de apilamiento propio */
.vieja { position: relative; isolation: isolate; overflow: hidden; }
.vieja {
  background: var(--crudo-2);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.vieja__cuerpo { max-width: min(100%, 46rem); }

.antetitulo {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .8rem;
}
.antetitulo--claro { color: var(--toldo-cl); }

.vieja h2, .unidades h2, .incluye h2 {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.8rem;
}

.fallas { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.fallas li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--linea);
}
.fallas li:last-child { border-bottom: 1px solid var(--linea); }
.falla__t {
  font-family: var(--display);
  font-size: 1.25rem;
  margin: 0 0 .3rem;
}
.falla__d { font-size: .95rem; color: var(--tinta-2); margin: 0 0 .5rem; }
.falla__v { margin: 0; }

.nota-honesta {
  font-size: .95rem;
  color: var(--tinta-2);
  border-left: 3px solid var(--toldo-osc);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 0;
  max-width: min(100%, 44rem);
}
.nota-honesta b { color: var(--tinta); }

/* ═══════════ LA PIEZA FIRMA — LAS FICHAS ═══════════ */
.unidades {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo);
}
.unidades__cabecera { max-width: min(100%, 42rem); margin-bottom: 2.4rem; }

.marca-ejemplo { margin: 0; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--toldo-osc);
  border-left: 2px solid var(--toldo-osc);
  padding-left: .6rem;
}

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
.ficha {
  background: var(--crudo-3);
  border: 1px solid var(--linea);
  padding: 0 0 1.2rem;
  display: flex; flex-direction: column;
}
/* El encabezado de cada ficha lleva la lona: es lo que hace que una
   unidad se vea como una unidad y no como una fila de tabla. */
.ficha__cab {
  border-bottom: 3px solid transparent;
  border-image: var(--lona) 1;
  padding: 1.1rem clamp(1rem, 2.4vw, 1.4rem);
}
.ficha__n {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 .35rem;
  color: var(--toldo-osc);
}
.ficha__cap { margin: 0; }
.ficha__specs { margin: 0; padding: 0 clamp(1rem, 2.4vw, 1.4rem); flex: 1 1 auto; }
.sp {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: .2rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linea);
}
.sp:last-child { border-bottom: 0; }
.sp dt {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding-top: .15rem;
}
.sp dd { margin: 0; font-size: .95rem; }
@media (max-width: 26rem) { .sp { grid-template-columns: 1fr; } }

.ficha__pie {
  font-size: .88rem;
  color: var(--tinta-2);
  margin: .8rem clamp(1rem, 2.4vw, 1.4rem) 0;
}

/* La ficha vacía: dice a propósito que faltan unidades. */
.ficha--vacia {
  background: transparent;
  border: 2px dashed var(--linea);
  align-items: flex-start;
  justify-content: center;
  padding: 1.4rem clamp(1rem, 2.4vw, 1.4rem);
}
.ficha__mas {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--toldo-osc);
  margin: 0 0 .4rem;
}
.ficha__mast {
  font-family: var(--display);
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}
.ficha__masd { font-size: .92rem; color: var(--tinta-2); margin: 0; }

.falta {
  font-family: var(--dato);
  font-size: .86em;
  color: var(--toldo-osc);
  border-bottom: 1px dashed var(--toldo-osc);
}
/* El fondo decide el tono. */
.incluye .falta, .cierre .falta { color: var(--toldo-cl); border-bottom-color: var(--toldo-cl); }

.ojo {
  background: var(--crudo-2);
  border-left: 3px solid var(--toldo-osc);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
}
.ojo p { margin: 0; font-size: .96rem; color: var(--tinta-2); }
.ojo b { color: var(--tinta); }

/* ═══════════ LO QUE INCLUYE ═══════════ */
.incluye {
  background: var(--toldo-osc);
  color: #fff;
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.incluye__cuerpo { max-width: min(100%, 46rem); }
.incluye .entrada { color: var(--claro-2); }
.incluye .nota-honesta { color: var(--claro-2); border-left-color: var(--toldo-cl); }
.incluye .nota-honesta b { color: #fff; }

.huecos { margin: 0 0 1.6rem; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .3rem 1.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linea-osc);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos dt {
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--claro-2);
  align-self: start;
  padding-top: .2rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .92rem; color: var(--claro-2); margin-top: .3rem; }
@media (max-width: 40rem) { .hueco { grid-template-columns: 1fr; } }

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--tinta);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 3px solid transparent;
  border-image: var(--lona) 1;
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--toldo-cl);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.5rem, 6.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--toldo-cl);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: #fff; }
.cierre__pie {
  font-size: .95rem;
  color: #C9D2D9;
  max-width: 44rem;
  margin: 0 auto;
}

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--crudo-2);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 2rem; }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--toldo-osc);
  font-weight: 400;
  margin-bottom: .5rem;
}
.dueno p { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600;
  color: var(--toldo-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--toldo-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--tinta);
  color: #C9D2D9;
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .8rem;
}
.pie p { margin: 0; max-width: 66ch; }

/* ═══════════ APARICIONES ═══════════ */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  /* La sombra queda QUIETA a media tarde: sigue siendo sombra de
     toldo, solo deja de avanzar. */
  .js .sombra { animation: none; height: 46%; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — seis tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta, aura de color, media pantalla, cita a sangre, tira
   de tres, y la galería con las fotos propias del negocio.

   LA REGLA: la foto no se ensucia para poder leer encima. Lo que
   sostiene el contraste es un gradiente por zona. La ÚNICA excepción es
   el aura, donde el desenfoque no es un parche sino el efecto entero.

   Procedencia de cada archivo: imagenes/FUENTES.txt
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · PORTADA ── */
/* position/isolation acá y no heredadas: hay demos cuya .portada no es
   posicionada, y entonces el .portada__foto absoluto se cuelga del body
   y tapa el titular entero. El z-index del texto va por lo mismo. */
.portada--foto { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { position: relative; z-index: 2; max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--crudo) 0%, var(--crudo) 30%,
              rgba(245,240,230,.66) 46%, rgba(245,240,230,.22) 68%, rgba(245,240,230,.06) 86%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
/* El fundido de entrada va en la IMAGEN, no en el contenedor: el
   contenedor queda libre para la animacion de scroll (blur al bajar),
   que se declara mas abajo. Dos animaciones de transform en el mismo
   elemento se pisan; separandolas cada una vive tranquila. */
.js .portada--foto .portada__foto img { opacity: 0; }
.js .portada--foto.ok .portada__foto img { opacity: 1; transition: opacity 1.1s ease; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: min(36svh, 300px); }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(245,240,230,0) 0%, rgba(245,240,230,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#vieja { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: -12% -8% auto -8%; height: 78%; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Acá el desenfoque ES el efecto: la foto deja de leerse y queda la luz. */
  filter: blur(64px) saturate(1.45);
  opacity: .38;
  transform: scale(1.25);
  /* Y se apaga EN LA IMAGEN, no con un velo encima. Un ::after que pinta
     el fondo apaga solo DENTRO del div: en el borde de abajo queda un
     corte recto a media seccion. Con la mascara la imagen misma se
     desvanece y no hay borde que cortar. */
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .aura img { animation: deriva-aura 68s ease-in-out infinite alternate; }
}
@keyframes deriva-aura {
  from { transform: scale(1.25) translate3d(-3%, 0, 0); }
  to   { transform: scale(1.38) translate3d(3%, -2%, 0); }
}

/* ── 3 · MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--crudo-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: min(62svh, 620px); overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--tinta);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--tinta);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tinta); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: min(44svh, 420px); }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: min(70svh, 540px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--crudo); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Calculado sobre el peor caso —imagen del color contrario
   detrás— para que el ratio aguante sin ensuciar la imagen. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(245,240,230,.72) 0%,
              rgba(245,240,230,.84) 45%, rgba(245,240,230,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--tinta); }
.cita__texto p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16;
  margin: 0; color: var(--tinta);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--toldo-osc);
}
.js .cita__texto.rev { opacity: 0; transform: translateY(16px); }
.js .cita__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .cita__foto img { animation: respira-cita 58s ease-in-out infinite alternate; }
}
@keyframes respira-cita {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(1.4%, -1%, 0); }
}

/* ── 5 · LA TIRA ── */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linea); }
.tira__pieza { margin: 0; overflow: hidden; height: clamp(220px, 34svh, 340px); }
.tira__pieza img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .tira__pieza:hover img { transform: scale(1.05); }
}
.js .tira__pieza.rev { opacity: 0; transform: translateY(1.4rem); }
.js .tira__pieza.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .tira__pieza.rev.ok:nth-child(2) { transition-delay: .1s; }
.js .tira__pieza.rev.ok:nth-child(3) { transition-delay: .2s; }
@media (max-width: 700px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira__pieza:last-child { grid-column: 1 / -1; height: clamp(180px, 28svh, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto,
  .js .mitades__texto.rev, .js .mitades__foto.rev,
  .js .cita__texto.rev, .js .tira__pieza.rev { opacity: 1; transform: none; }
}

/* ── TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones. No lleva texto encima, asi
   que no lleva velo: se ve la foto y punto. Es la aparicion que mas
   llena la pagina por el peso que cuesta. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; overflow: hidden;
  height: clamp(180px, 30svh, 340px);
  background: var(--crudo-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

/* ── TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .telon img { animation: deriva-telon 76s ease-in-out infinite alternate; }
}
@keyframes deriva-telon {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.6%, -1%, 0); }
}

/* ── MOSAICO ──
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado en todas. */
.mos {
  background: var(--crudo-2);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--tinta);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--tinta-2); font-size: .94rem; line-height: 1.6;
}
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--crudo-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SEGUNDA PASADA — 09-09-2026
   Subida al estandar premium SIN video (decision de Yordy: el clip se
   reserva para los mejor valorados). Lo que compensa la ausencia del
   video es densidad de argumento y de tratamientos: banda de cifras,
   dos tajos con frase, telon de lena en la seccion oscura, cita
   invertida, ficha de reserva y el boton flotante.

   NADA DE LA IDENTIDAD CAMBIA: los mismos tres colores (crudo, toldo,
   toldo-oscuro), las mismas tres familias, el mismo toldo festoneado y
   la misma sombra que se alarga. Lo que cambia es cuanto dice la
   pagina y cuantas veces cambia de tono mientras se baja.
   ══════════════════════════════════════════════════════════════════ */

/* ── A · APARICIONES EN CASCADA ─────────────────────────────────────
   Dos mecanismos, y hacen falta los dos. El observador sigue yendo
   sobre el CONTENEDOR (regla de la casa: un hijo recortado nunca
   dispara IntersectionObserver). Para las grillas, el contenedor se
   NEUTRALIZA y cascadean los hijos: si no se neutraliza, contenedor e
   hijos bajan a la vez y el grupo entero se desplaza 40 px.
   El --i va por nth-child en el CSS y NUNCA en un atributo style: la
   CSP de esta pagina lo prohibe y lo mataria sin un solo error. */
.js .cascada.rev        { opacity: 1; transform: none; transition: none; }
.js .cascada.rev > *    { opacity: 0; transform: translateY(24px); }
.js .cascada.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .6s var(--sale);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cascada > :nth-child(1) { --i: 0; }
.cascada > :nth-child(2) { --i: 1; }
.cascada > :nth-child(3) { --i: 2; }
.cascada > :nth-child(4) { --i: 3; }
.cascada > :nth-child(5) { --i: 4; }
.cascada > :nth-child(6) { --i: 5; }

/* ── B · LA ENTRADA DE LA PORTADA ───────────────────────────────────
   No espera al scroll: la portada ya esta en pantalla. Mismo truco de
   contenedor neutralizado, con animacion en vez de transicion para
   poder usar el muelle. `forwards`, nunca `both`. La ultima pieza
   arranca a los 0,28 s: por debajo del techo de 0,4 s de la casa. */
.js .portada__texto.rev        { opacity: 1; transform: none; transition: none; }
.js .portada__texto.rev > *    { opacity: 0; transform: translateY(14px); }
.js .portada__texto.rev.ok > * { animation: entra .6s var(--muelle) forwards; }
.js .portada__texto.rev.ok > *:nth-child(2) { animation-delay: .07s; }
.js .portada__texto.rev.ok > *:nth-child(3) { animation-delay: .14s; }
.js .portada__texto.rev.ok > *:nth-child(4) { animation-delay: .21s; }
.js .portada__texto.rev.ok > *:nth-child(5) { animation-delay: .28s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ── C · LOS DOS BOTONES DE LA PORTADA ──────────────────────────────
   48 px de alto (el minimo tactil de la casa es 44; los principales
   van a 48). La sombra lleva spread negativo y el color del azul, no
   negro: se lee como el boton levantandose, no como un rectangulo
   gris debajo. Medido: crudo #F5F0E6 sobre toldo-osc #1F5077 = 7,5:1. */
.ctas {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin: 0 0 2.1rem;
}
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--toldo-osc); color: var(--crudo);
  font-family: var(--cuerpo); font-size: .95rem; font-weight: 600;
  line-height: 1.1; text-decoration: none;
  border: 2px solid var(--toldo-osc);
  box-shadow: 0 10px 26px -14px rgba(31, 80, 119, .9);
  transition: transform .22s var(--sale), background .22s ease, box-shadow .22s ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(31, 80, 119, .95); }
/* El de linea: mismo tamano, sin relleno. Texto toldo-osc sobre crudo = 7,5:1. */
.boton--linea {
  background: transparent; color: var(--toldo-osc);
  box-shadow: none;
}
.boton--linea:hover { background: var(--crudo-3); box-shadow: none; }
.dd--sitio { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1; }

/* ── D · LA BANDA DE CIFRAS ─────────────────────────────────────────
   Cuatro numeros con la herida adentro de la misma fila. Solo cuenta
   el 169, que es el unico que costo verificar; los otros tres son
   aritmetica de la propia pagina, y un contador que sube un 6 se lee
   como truco. El valor final va escrito dentro del elemento: sin JS, o
   con reduced-motion, se lee igual.
   Medido sobre toldo-osc #1F5077: blanco 8,5:1 · claro-2 #C3D3DF 5,6:1.
   La lona arriba y abajo es lo que la hace de esta pagina y no de otra. */
.cifras {
  background: var(--toldo-osc); color: #fff;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-image: var(--lona) 1;
}
.cifras__lista {
  list-style: none; margin: 0 auto; padding: 0; max-width: 82rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.2rem;
}
.cifras__lista li { text-align: center; }
.cifras__lista b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.cifras__lista span {
  display: block; margin-top: .5rem;
  font-family: var(--dato); font-size: .7rem; line-height: 1.45;
  letter-spacing: .04em; color: var(--claro-2);
}
/* La herida no se pinta de rojo: se pinta del azul claro de la lona.
   Ese tono tiene prohibido el texto sobre CRUDO, no sobre este azul.
   Medido: #9CC6E4 sobre #1F5077 = 6,0:1, y ademas es texto grande. */
.cifras__lista li:last-child b { color: var(--toldo-cl); }
@media (max-width: 700px) { .cifras__lista { grid-template-columns: repeat(2, 1fr); } }

/* ── E · EL TAJO, AHORA CON FRASE ───────────────────────────────────
   La franja a sangre pasa de ser un respiro mudo a llevar una linea de
   argumento. El velo arranca en alfa 0 arriba: los dos tercios de
   arriba de la foto quedan a foco completo y la frase se apoya en el
   tercio de abajo. Escrito en rgba() literal, nunca con var(): sin
   alfa el degradado tapa la foto de punta a punta.
   Peor caso medido — fotograma blanco bajo el velo al .95: el blanco
   de la letra da 7,4:1; al .86, donde empieza la primera linea, 5,9:1.
   PASE LO QUE PASE con la foto que se ponga debajo. */
.tajo {
  margin: 0;
  height: clamp(240px, 40vw, 420px);
}
.tajo__txt {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 4rem) 1.6rem;
  background: linear-gradient(180deg,
    rgba(31, 80, 119, 0)   0%,
    rgba(31, 80, 119, .55) 44%,
    rgba(31, 80, 119, .86) 74%,
    rgba(31, 80, 119, .95) 100%);
}
.tajo__txt p {
  margin: 0; max-width: 24ch;
  color: #fff; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 3.2vw, 2.1rem); line-height: 1.14;
}
.tajo--cierre .tajo__txt p { margin-left: auto; text-align: right; }

/* ── F · EL TELON DE LENA ───────────────────────────────────────────
   La seccion oscura tambien lleva foto: es la regla de ritmo (cada
   banda oscura es una que lleva imagen). Va MAS baja de opacidad que
   el telon claro porque la lena tiene mucho contraste propio y a .15
   competia con el texto. Calibrada mirando, no copiada: .10.
   Mascara vertical y no un pseudoelemento tenido, porque esta seccion
   se funde con el tajo de arriba y el pseudoelemento dejaria un corte
   recto a media banda. */
.telon--lena img {
  opacity: .10;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 64%, transparent 96%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 64%, transparent 96%);
}
.incluye.con-telon { position: relative; isolation: isolate; overflow: hidden; }

/* ── G · LA CITA, INVERTIDA ─────────────────────────────────────────
   Antes el velo era crudo y la banda quedaba clara: tres pantallas
   claras seguidas y la unica foto grande de la pagina, lavada. Ahora
   el velo es el azul de la paleta y la banda es oscura, que es lo que
   pide el ritmo (banda oscura = banda con foto) y lo que deja la foto
   con cuerpo en vez de deslavada.
   Peor caso medido — foto blanca bajo el velo al .82: blanco 5,2:1 y
   crudo #F5F0E6 4,6:1. Los dos pasan AA con la peor foto imaginable. */
.cita__foto::after {
  background: linear-gradient(180deg,
    rgba(31, 80, 119, .78) 0%,
    rgba(31, 80, 119, .84) 50%,
    rgba(31, 80, 119, .88) 100%);
}
.cita__texto, .cita__texto p { color: #fff; }
/* El eco iba en toldo-osc, que sobre este velo daria 1,3:1. Va en
   crudo: 4,6:1 en el peor caso y sigue siendo un tono de la paleta. */
.cita__eco { color: var(--crudo); }

/* ── H · RESERVAR — la ficha de contacto que hoy no existe ──────────
   Tres niveles de claridad, no dos: crudo de fondo, la tarjeta un
   escalon mas clara (crudo-3) y los filetes en linea. Es lo que la
   saca de bloque de color. El dl con columna fija se lee como ficha
   tecnica y no como tabla de contacto. */
.reserva {
  background: var(--crudo);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.reserva__cols {
  max-width: 82rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.reserva h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.08; margin-bottom: 1.1rem; }
.reserva .nota-honesta { margin-top: 1.4rem; }
.datos {
  margin: 0; background: var(--crudo-3);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: .4rem clamp(1rem, 2.6vw, 1.6rem);
}
.dato {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: .3rem 1.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linea);
}
.dato:last-child { border-bottom: 0; }
.dato dt {
  font-family: var(--dato); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-2); padding-top: .3rem;
}
.dato dd { margin: 0; }
.dato__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--dato); font-size: 1.05rem; color: var(--toldo-osc);
  text-decoration: none; border-bottom: 1px solid var(--toldo-osc);
  white-space: nowrap;
}
.dato__tel:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.dato__no { font-family: var(--dato); font-size: .95rem; color: var(--tinta); }
.dato__pq { display: block; margin-top: .35rem; font-size: .9rem; color: var(--tinta-2); }
@media (max-width: 62rem) { .reserva__cols { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .dato { grid-template-columns: 1fr; } }

/* ── I · EL MOSAICO, A OCHO ─────────────────────────────────────────
   Sin clip de fondo, el mosaico sube de seis a ocho piezas: es lo que
   compensa el peso visual que el video habria puesto. Las celdas 1 y 6
   ya iban a span 2; se les suma el retardo de las dos nuevas. */
.js .mos__p.ok:nth-child(7) { transition-delay: .36s; }
.js .mos__p.ok:nth-child(8) { transition-delay: .42s; }
.mos__ruta { font-family: var(--dato); font-size: .86em; }

/* ── J · EL PIE ─────────────────────────────────────────────────────
   padding-bottom para que el boton flotante no se coma la ultima linea. */
.pie__in { max-width: 82rem; margin: 0 auto; padding-bottom: 4.5rem; }
.pie__in p { margin: 0 0 .6rem; max-width: 80ch; }
.pie__leg { margin: 0; color: #A9B4BD; }

/* ── K · WHATSAPP FLOTANTE ──────────────────────────────────────────
   Boton fijo abajo a la derecha. 56 px de alto: por encima de los 44
   del minimo tactil. Verde de WhatsApp a proposito — se reconoce sin
   leerlo, y eso es lo que hace que se toque.

   La direccion del truco importa: el boton se ve SIEMPRE por defecto y
   el JS solo lo esconde mientras el visitante esta en la portada, para
   no tapar el titular. Si el script no arranca, o si rescate.js quita
   la clase .js, el boton queda visible, que es el estado que vende.
   Al reves (oculto por defecto, revelado por JS) un fallo del script
   se lleva el CTA principal.
   El numero es el DEL NEGOCIO, el mismo de los tel:. El de CristalWeb
   vive solo en la seccion del dueno.
   Medido: #07310F sobre #25D366 = 8,9:1. */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 56px;
  padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #07310F;
  text-decoration: none;
  font-family: var(--cuerpo);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover,
.wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .34); }
/* mientras se esta arriba del todo, el boton se aparta */
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }
@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  /* el rotulo se va, el icono queda: en un telefono el circulo verde
     ya dice que es */
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── L · EL DIFUMINADO AL SCROLL ────────────────────────────────────
   Lo que una demo corriente consigue con GSAP mas ScrollTrigger, 70 KB
   de libreria y una peticion a un CDN que esta CSP bloquearia. Aca son
   doce lineas que corren en el compositor y NO EXISTEN donde el
   navegador no las soporta.
   Pagina clara: blur(7px) mas opacity .55, porque la foto se disuelve
   HACIA el crudo, que es lo que hay debajo. El scale(1.06) acompana
   siempre: sin el, el desenfoque deja ver el filo de la caja.
   El filter va en el CONTENEDOR (.portada__foto), nunca en la imagen:
   ahi vive la deriva de respira, y dos animaciones de transform en el
   mismo elemento se pisan. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .portada__foto {
      animation: portada-se-va linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
    .cita__foto {
      animation: cita-enfoca linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 95%;
    }
  }
}
@keyframes portada-se-va { to { filter: blur(7px) opacity(.55); transform: scale(1.06); } }
@keyframes cita-enfoca   { from { filter: blur(9px); } to { filter: blur(0); } }

/* ── M · MENOS MOVIMIENTO ───────────────────────────────────────────
   Se apaga lo intrusivo (bucles, desplazamientos, el conteo). NO se
   apagan los fundidos ni los hovers de color: en Windows esta
   preferencia viene puesta de fabrica muy seguido, y apagarlo todo
   deja la pagina muerta en la mitad de las maquinas del cliente. */
@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto img { opacity: 1; }
  .js .portada__texto.rev > *    { opacity: 1; transform: none; }
  .js .portada__texto.rev.ok > * { animation: none; }
  /* Los reveals NO se desplazan, pero SI siguen fundiendo: un fundido
     no es movimiento; un salto de 24 px si. */
  .js .cascada.rev > * { transform: none; }
  .boton:hover, .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES MEDIDOS SOBRE LA PAGINA VIVA — 09-09-2026
   Todo lo de aca abajo salio de mirar la captura y de medir el peor
   caso, no de suponerlo.
   ══════════════════════════════════════════════════════════════════ */

/* ── El mosaico de ocho ─────────────────────────────────────────────
   Con ocho piezas y solo las celdas 1 y 6 a span 2, la ultima quedaba
   sola en su fila con dos huecos al lado. La octava pasa a ocupar la
   fila entera y cierra el mosaico como una franja: la reticula se
   rompe donde tiene que romperse y no queda ni un hueco.
   Reparto en tres columnas:
     [1 1 2] [3 4 5] [6 6 7] [8 8 8]
   El orden de las fotos en el HTML esta puesto para que las que
   ocupan dos columnas sean las de mas resolucion. */
.mos__p:nth-child(8) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .mos__p:nth-child(8) { grid-column: 1 / -1; }
}

/* ── El telon de lena, calibrado midiendo ───────────────────────────
   A .10 el telon subia la luminancia del fondo lo bastante como para
   dejar los rotulos en 3,6:1. Baja a .08 y los tonos claros de la
   paleta se reescriben aca uno por uno, que es lo que separa el
   trabajo terminado del casi terminado.
   Peor caso del fondo — 8 % de blanco sobre #1F5077 = rgb(49,93,130):
     · #FFFFFF ................ 6,9:1  ← el .falta y los titulos
     · --claro-2 #C3D3DF ...... 4,5:1  ← rotulos, entradilla, porques
     · --toldo-cl #9CC6E4 ..... 3,9:1  ← NO se usa para texto aca */
.telon--lena img { opacity: .08; }
.incluye .antetitulo--claro { color: var(--claro-2); }
.incluye .falta { color: #FFFFFF; border-bottom-color: var(--toldo-cl); }

/* ── El velo de la cita, subido cuatro puntos ───────────────────────
   El eco va en crudo y a .78 daba 4,2:1 con una foto blanca debajo.
   Con .82 arriba el peor caso del eco pasa a 4,6:1 y el titular a
   5,2:1. Y abajo, donde el eco vive de verdad, 4,9:1. */
.cita__foto::after {
  background: linear-gradient(180deg,
    rgba(31, 80, 119, .82) 0%,
    rgba(31, 80, 119, .86) 50%,
    rgba(31, 80, 119, .90) 100%);
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }
/* ── BOTON FLOTANTE DE CONTACTO ─────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Los colores de
   marca van a proposito: se reconocen sin leerlos, y eso es lo que hace
   que se toquen. Se ve SIEMPRE por defecto; el JS solo lo aparta sobre
   la portada. Al reves, un fallo del script se llevaria el CTA principal. */
.flota {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--cuerpo, system-ui, sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .16);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.flota--wa { background: #25D366; color: #07310F; }
.flota--ig { background: linear-gradient(120deg, #F9CE34 4%, #EE2A7B 48%, #6228D7 96%); color: #FFFFFF; }
.flota__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.flota:hover, .flota:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .flota--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .flota { width: 56px; padding: 0; justify-content: center; }
  .flota__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .flota { transition: opacity .28s ease; }
  .flota:hover, .flota:focus-visible { transform: none; }
  .js .flota--arriba { transform: none; }
}