/* ══════════════════════════════════════════════════════════════════
   CABAÑAS COÑARIPE · SILVIA OBANDO
   Demo 155. Identidad: «HORTENSIA».

   ─────────────────────────────────────────────────────────────────
   RESPETO A LA PERSONA
   La ficha lleva el nombre de la dueña, y eso es el activo. Pero NO
   se le inventa biografia, ni años, ni historia, ni una sola frase
   puesta en su boca. La seccion que habla de ella es ESTRUCTURA con
   «falta: conversarlo con Silvia» en cada linea, y la pagina lo dice
   explicito en una caja: escribir la vida de una persona real sin
   haber hablado con ella es lo que hace que un sitio se sienta falso.
   ─────────────────────────────────────────────────────────────────

   LA DIRECCION EN UNA FRASE
   El azul-lila de las hortensias del sur sobre crudo: transmite casa
   con jardin y trato de dueña, que es literalmente lo que se
   arrienda aca.

   OJO — LA FLOR ES PALETA, NO AFIRMACION. No consta que haya
   hortensias en el terreno. El color se eligio porque es la flor de
   los jardines de la zona y porque sostiene la identidad sola; la
   pagina lo dice en voz alta en la seccion del terreno. Si resulta
   que las hay, se fotografian; si no, no se dice nada y el color
   sigue funcionando.

   LA PALETA
   --crudo      #F4F2EE
   --hortensia  #8E9BD1  la flor (solo objeto y fondo)
   --hort-txt   #4A5490  el mismo lila para TEXTO (6,3:1 sobre crudo)
   --tinta      #2A2A2E  tinta suave, no negra

   PRIMER LILA DEL REGISTRO — deslinde adelantado con el violeta
   nitrilo de la 160: aquel es CLINICO, profundo, de guante de latex.
   Este es FLORAL y EMPOLVADO, de jardin sureño con lluvia. Y nada de
   rosa: la hortensia de aca es la azul.

   EL TRIO
   · display · Amethysta — serif de remates delicados, nueva en el
     registro. Suave sin ser dulzona.
   · cuerpo  · Anuphan — sans humanista, limpia.
   · dato    · PT Mono — cifras y rotulos.

   LA CABECERA (121ª del oficio) — LA HORTENSIA
   El pompon: cinco circulitos apretados en racimo, con tonos
   ligeramente distintos porque una hortensia real no es de un solo
   color. DESLINDE con el boton de rosa de la 56: aquel era UN capullo
   cerrado; este es el RACIMO.

   EL FONDO — PETALOS QUE BAJAN
   Tres petalos que caen en ZIGZAG suave y desaparecen ANTES del
   suelo. DESLINDE OBLIGATORIO de las cosas que caen en el registro:
   los sacos de la 127 caen CON PESO y quedan abajo; la gota de la 132
   cae y SUENA; el aserrin de la 184 salta en arco; la harina de la
   186 es polvillo recto. Estos son livianos: se van de lado mientras
   bajan, y se desvanecen a media altura porque un petalo que aterriza
   se convierte en basura en el piso.
   Reduced-motion: se esconden.

   LA ESTRUCTURA — A (stats-hero)
   DESLINDE con 86/118/126/157: en esos las cifras son de volumen o de
   catalogo. Aca son de CONFIANZA PERSONAL, y la tercera es un HUECO
   MOSTRADO COMO CIFRA —una raya en el lugar del numero— porque los
   años recibiendo gente son el dato que mas vale y el que no tengo.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:      #F4F2EE;
  --crudo-2:    #E9E6E0;
  --crudo-3:    #FAF9F7;
  --hortensia:  #8E9BD1;   /* objeto y fondo, no texto */
  --hort-2:     #A3AEDC;
  --hort-3:     #7A87C4;
  --hort-txt:   #4A5490;   /* 6,3:1 sobre crudo */
  --hort-noche: #2E3556;   /* fondo profundo de la seccion oscura */
  --hort-claro: #C3CAEA;   /* sobre el fondo profundo */
  --tinta:      #2A2A2E;
  --tinta-2:    #5C5C64;   /* 6,2:1 sobre crudo */
  --linea:      #DEDAD2;
  --linea-osc:  #414A6E;

  --display: 'Amethysta', Georgia, serif;
  --cuerpo:  'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'PT Mono', ui-monospace, 'Consolas', monospace;
}

*, *::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.68;
  overflow-x: hidden;
}

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

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

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--hort-noche);
  color: var(--hort-claro);
  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: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 64ch; }

/* ─────────── 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: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(250, 249, 247, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: 1.1rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }

/* ── LA HORTENSIA — el racimo de cinco ──
   Un solo elemento y cuatro box-shadow. Los tonos son distintos a
   proposito: una hortensia no es de un color, es de varios en el
   mismo pompon. */
.hortensia {
  width: 8px; height: 8px;
  flex: 0 0 auto;
  margin: 5px 10px 9px 10px;
  border-radius: 50%;
  background: var(--hortensia);
  box-shadow:
     9px -3px 0 var(--hort-2),
    -9px -3px 0 var(--hort-3),
     5px  8px 0 var(--hort-3),
    -5px  8px 0 var(--hort-2);
}

.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(--hort-txt); border-bottom-color: var(--hort-txt); }
@media (max-width: 54rem) { .cab__nav { display: none; } }

/* T1 CON NOMBRE — variante nueva de la T1: el rotulo no dice
   «llamar», dice con quien se habla. */
.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: .14em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.72rem, 1.9vw, .9rem);
  color: var(--hort-txt);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA — stats-hero ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background:
    radial-gradient(38rem 26rem at 82% 14%, rgba(142, 155, 209, .18), transparent 70%),
    var(--crudo);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 46rem); }

/* ── LOS PÉTALOS ── */
.petalos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pet {
  position: absolute;
  top: -6%;
  width: 13px; height: 10px;
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  background: var(--hort-2);
  opacity: 0;
}
.pet--1 { left: 62%; }
.pet--2 { left: 74%; width: 10px; height: 8px; background: var(--hortensia); }
.pet--3 { left: 86%; width: 15px; height: 11px; background: var(--hort-3); }

.js .pet--1 { animation: baja 13s ease-in-out infinite; }
.js .pet--2 { animation: baja 17s ease-in-out infinite 5s; }
.js .pet--3 { animation: baja 15s ease-in-out infinite 9s; }

/* Bajan EN ZIGZAG y se apagan a media altura: un petalo que aterriza
   se ve como basura en el piso. */
@keyframes baja {
  0%   { transform: translate(0, 0)         rotate(0deg);   opacity: 0;   }
  12%  {                                                     opacity: .75; }
  30%  { transform: translate(-28px, 22vh)  rotate(58deg);   opacity: .75; }
  52%  { transform: translate(16px, 38vh)   rotate(-24deg);  opacity: .6;  }
  74%  { transform: translate(-20px, 52vh)  rotate(74deg);   opacity: .3;  }
  100% { transform: translate(4px, 66vh)    rotate(30deg);   opacity: 0;   }
}

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2.4rem, 7.2vw, 5rem);
  line-height: 1.04;
  margin-bottom: 2.2rem;
}

/* ── las cifras ── */
.stats {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 1.6rem clamp(1.8rem, 5vw, 4rem);
  margin: 0 0 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--linea);
}
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: .9;
  color: var(--hort-txt);
}
.stat dt {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-top: .5rem;
}
.stat--grande dd { font-size: clamp(4rem, 12vw, 7.5rem); }
/* El hueco se muestra COMO CIFRA: una raya en el lugar del numero.
   Va en GRIS y no en lila, para que se lea como ausencia y no como
   dato — pero un gris de linea (#DEDAD2) daba 1,25:1 y no se veia.
   Este llega a 3,7:1, que es lo que pide una cifra de 42px. */
.stat--hueco dd { color: #807C72; }
.stat--hueco dt { max-width: 11rem; }

.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--tinta-2);
  max-width: min(92vw, 36rem);
  margin: 0;
}

/* ═══════════ DONDE SILVIA ═══════════ */
.donde {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo-3);
}
.donde__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(--hort-claro); }

.donde h2, .terreno h2 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.4rem;
}

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

.falta {
  font-family: var(--dato);
  font-size: .86em;
  color: var(--hort-txt);
  border-bottom: 1px dashed var(--hort-txt);
}
/* El fondo decide el tono. */
.terreno .falta, .cierre .falta { color: var(--hort-claro); border-bottom-color: var(--hort-claro); }
/* En la portada el hueco va dentro de un rótulo chico y gris: ahí el
   lila oscuro se lee bien sobre el crudo. */

.practica { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: p; }
.pr {
  counter-increment: p;
  position: relative;
  padding: 1.2rem 0 1.2rem 2.8rem;
  border-top: 1px solid var(--linea);
}
.pr:last-child { border-bottom: 1px solid var(--linea); }
.pr::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 1.4rem;
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--hort-txt);
}
.pr__q {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
}
.pr__a { margin: 0 0 .45rem; }
.pr__pq { font-size: .94rem; color: var(--tinta-2); margin: 0; }

.ojo {
  background: var(--crudo-2);
  border-left: 3px solid var(--hort-txt);
  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); }

/* ═══════════ EL TERRENO ═══════════ */
.terreno {
  background: var(--hort-noche);
  color: #fff;
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.terreno__cuerpo { max-width: min(100%, 46rem); }
.terreno .entrada { color: var(--hort-claro); }

.huecos { margin: 0 0 1.6rem; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 17rem) 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(--hort-claro);
  align-self: start;
  padding-top: .2rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .92rem; color: var(--hort-claro); margin-top: .3rem; }
@media (max-width: 42rem) { .hueco { grid-template-columns: 1fr; } }

.nota-honesta {
  font-size: .95rem;
  color: var(--hort-claro);
  border-left: 3px solid var(--hort-claro);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 0;
}
.nota-honesta b { color: #fff; }

/* ═══════════ EL CIERRE — T1 con nombre ═══════════ */
.cierre {
  background: var(--crudo-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.3rem, 5.6vw, 3.2rem);
  line-height: 1.1;
  color: var(--hort-txt);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { text-decoration: underline; }
.cierre__pie {
  font-size: .95rem;
  color: var(--tinta-2);
  max-width: 46rem;
  margin: 0 auto;
}

/* ═══════════ PARA SILVIA ═══════════ */
.dueno {
  background: var(--crudo-3);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); 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(--hort-txt);
  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(--hort-txt);
  text-decoration: none;
  border-bottom: 1px solid var(--hort-txt);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--hort-noche);
  color: var(--hort-claro);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .8rem;
}
.pie p { margin: 0; max-width: 68ch; }

/* ═══════════ 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) {
  /* Los petalos SE ESCONDEN: tres formas irregulares quietas en el
     aire no son petalos, son manchas. */
  .petalos { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   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 ── */
.portada--foto { padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { 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: 52% 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(244,242,238,.66) 46%, rgba(244,242,238,.22) 68%, rgba(244,242,238,.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); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { 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: 36svh; }
  .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(244,242,238,0) 0%, rgba(244,242,238,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#donde { 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: 62svh; 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: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  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(244,242,238,.72) 0%,
              rgba(244,242,238,.84) 45%, rgba(244,242,238,.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(--hort-txt);
}
.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: 34svh; min-height: 220px; }
.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: 28svh; }
}

@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; }
}

/* ── 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; }
}