/* ══════════════════════════════════════════════════════════════════
   CABAÑAS MI REFUGIO · Lican Ray
   Demo 153. Identidad: «ESTUFA A LEÑA».

   LA DIRECCION EN UNA FRASE
   Hierro negro con la ventanita naranja encendida: transmite «acá
   adentro hace calor», que es lo unico que hay que decirle a alguien
   que esta pensando arrendar una cabaña en junio.

   LA PALETA
   --hierro  #1F1E1C  negro de fundicion
   --crudo   #F0EAE0  crudo calido
   --fuego   naranjo — SOLO LUZ, JAMAS TINTA (ver regla abajo)
   --oxido   #7E4E32 sobre crudo (5,6:1) / #C89B7A sobre hierro (6,7:1)

   ┌────────────────────────────────────────────────────────────────┐
   │ REGLA DE ESTA PAGINA: EL NARANJO NO TOCA TEXTO NUNCA.          │
   │ El fuego es LUZ contenida en un rectangulo de vidrio, y una    │
   │ luz no se usa para escribir. Los enlaces, los «falta» y los    │
   │ acentos usan OXIDO —el hierro oxidado, que es material— y no   │
   │ el naranjo. Asi el unico naranjo de la pagina es el que esta    │
   │ dentro de la ventanita, y por eso se ve encendido.             │
   └────────────────────────────────────────────────────────────────┘

   DESLINDE DE LOS CUATRO FUEGOS DE LA TANDA — la llama de la 140 es
   una vela CON FORMA, suelta en el aire; el fuego de la 144 se asoma
   POR RENDIJAS entre tablas; las brasas de la 98 respiran a la vista.
   Este vive DENTRO de un rectangulo de vidrio: es fuego contenido,
   domestico, mirado a traves de una puerta.

   EL TRIO
   · display · Trocchi — serif de remates suaves, nueva en el
     registro. Calida sin ser blanda: es la letra de un libro de casa.
   · cuerpo  · Gudea — humanista sobria.
   · dato    · Space Mono — rotulos y el telefono.

   LA CABECERA (119ª del oficio) — LA ESTUFA
   La caja de combustion lenta: cuerpo, ventanita encendida y el cañon
   subiendo por un lado.

   EL FONDO — EL CALOR QUE IRRADIA
   Ondas concentricas MUY tenues que emanan de la estufa y se disipan.
   DESLINDE: el circulo de la 119 RESPIRA en tamaño (es una guia de
   respiracion, va y vuelve); los anillos de la 93 eran agua; las
   ondas de la 179 son de IMPACTO (nacen de un golpe). Estas EMANAN
   continuas de una fuente que no se apaga.
   Reduced-motion: se esconden (tres circulos concentricos quietos no
   son calor, son una diana).

   LA ESTRUCTURA — G (split sticky)
   DESLINDE con 97/104/106/117/139/161/168/175: en todos esos el lado
   fijo es texto o una imagen. Aca el lado fijo es UN OBJETO CON FUEGO
   dibujado en CSS —escalon 1 de profundidad-web: si se puede dibujar,
   se dibuja— y el fuego sigue encendido mientras el invierno se lee
   al lado.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --hierro:    #1F1E1C;
  --hierro-2:  #2C2A27;
  --hierro-3:  #423E39;
  --crudo:     #F0EAE0;
  --crudo-2:   #E4DCCE;
  --crudo-3:   #F8F4EC;
  --oxido:     #7E4E32;   /* 5,6:1 sobre crudo */
  --oxido-cl:  #C89B7A;   /* 6,7:1 sobre hierro */
  --tinta:     #241F1B;
  --tinta-2:   #5E5348;   /* 6,4:1 sobre crudo */
  --claro-2:   #C6BEB4;   /* 9,7:1 sobre hierro */
  --linea:     #D8CFC0;
  --linea-osc: #38332E;

  /* El fuego. Repetir: esto es LUZ, no tinta. No va en ningun color
     de texto de esta hoja. */
  --fuego: radial-gradient(ellipse at 50% 72%,
    #FFE0A8 0%, #FFB04A 26%, #E8720F 58%, #A8420A 100%);
  --fuego-halo: rgba(232, 114, 15, .30);

  --display: 'Trocchi', Georgia, serif;
  --cuerpo:  'Gudea', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Space 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.66;
  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(--oxido); color: var(--crudo); }
a { color: var(--oxido); }
:focus-visible { outline: 2px solid var(--oxido); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--hierro);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--crudo); }
.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(248, 244, 236, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: flex-end; gap: .65rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.3rem; line-height: 1.15; }

/* ── LA ESTUFA de la cabecera ──
   ::before = el cuerpo · i = el cañon · ::after = la ventanita
   (el orden importa: ::after va encima de todo, y la ventanita tiene
   que quedar sobre el cuerpo) */
.estufa {
  position: relative;
  width: 21px; height: 23px;
  flex: 0 0 auto;
}
.estufa::before {
  content: ''; position: absolute;
  left: 0; bottom: 0; width: 21px; height: 17px;
  background: var(--hierro-2);
  border-radius: 2px;
}
.estufa i {
  position: absolute;
  right: 3px; top: 0; width: 4px; height: 8px;
  background: var(--hierro-2);
  border-radius: 1px 1px 0 0;
}
.estufa::after {
  content: ''; position: absolute;
  left: 4px; bottom: 5px; width: 13px; height: 8px;
  background: var(--fuego);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--fuego-halo);
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .7rem;
  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(--oxido); border-bottom-color: var(--oxido); }
@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: .52rem; 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, .88rem);
  color: var(--oxido);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ ESTRUCTURA G ═══════════ */
.split { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
@media (max-width: 60rem) { .split { grid-template-columns: 1fr; } }

/* ── LADO FIJO: el hogar ── */
.hogar {
  position: sticky; top: 0;
  align-self: start;
  height: 100svh;
  display: flex; align-items: center;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 3vw, 2.6rem);
  background: var(--hierro);
  color: var(--crudo);
  overflow: hidden;
}
@media (max-width: 60rem) { .hogar { position: static; height: auto; min-height: 88svh; } }
.hogar__caja { position: relative; z-index: 2; width: 100%; }

.sitio {
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oxido-cl);
  margin-bottom: 1rem;
}
.hogar h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  margin-bottom: 1.6rem;
}

/* ── LA ESTUFA GRANDE — el objeto de la pagina ── */
.estufona {
  position: relative;
  width: 132px; height: 150px;
  margin: 0 0 1.8rem;
}
.estufona__canon {
  position: absolute;
  right: 22px; top: 0; width: 20px; height: 44px;
  background: linear-gradient(96deg, #3A3733, #232120 62%, #171614);
  border-radius: 3px 3px 0 0;
}
.estufona__cuerpo {
  position: absolute;
  left: 0; bottom: 12px; width: 132px; height: 106px;
  background: linear-gradient(102deg, #3A3733 0%, #2A2724 46%, #1A1917 100%);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.estufona__vidrio {
  position: absolute;
  left: 18px; top: 24px; right: 18px; height: 58px;
  background: var(--fuego);
  border-radius: 3px;
  box-shadow: 0 0 34px 6px var(--fuego-halo),
              inset 0 0 0 2px rgba(20, 18, 16, .8);
}
.estufona__manilla {
  position: absolute;
  right: 6px; top: 44px; width: 8px; height: 20px;
  background: #4A453F;
  border-radius: 3px;
}
.estufona__patas {
  position: absolute;
  left: 12px; right: 12px; bottom: 0; height: 12px;
  border-left: 7px solid #2A2724;
  border-right: 7px solid #2A2724;
}

/* ── EL CALOR QUE IRRADIA ── */
.ondas {
  position: absolute;
  left: 50%; bottom: 16%;
  width: 10px; height: 10px;
  z-index: 1; pointer-events: none;
}
.ondas span {
  position: absolute;
  left: 50%; top: 50%;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  border: 1px solid rgba(232, 114, 15, .18);
  opacity: 0;
}
.js .ondas span { animation: irradia 9s ease-out infinite; }
.js .ondas span:nth-child(2) { animation-delay: 3s; }
.js .ondas span:nth-child(3) { animation-delay: 6s; }

/* Emanan y se disipan. Nunca vuelven: el calor sale, no rebota. */
@keyframes irradia {
  0%   { transform: scale(.2); opacity: 0;   }
  16%  {                       opacity: .55; }
  100% { transform: scale(2.6); opacity: 0;  }
}

.datos { margin: 0; }
.datos__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem 1rem;
  padding: .65rem 0;
  border-top: 1px solid var(--linea-osc);
}
.datos__par:last-child { border-bottom: 1px solid var(--linea-osc); }
.datos dt {
  font-family: var(--dato);
  font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--claro-2);
  align-self: center;
}
.datos dd { margin: 0; font-family: var(--dato); font-size: .92rem; text-align: right; }
.tel { color: var(--oxido-cl); text-decoration: none; }
.tel:hover { text-decoration: underline; }

/* ── LADO QUE FLUYE ── */
.flujo { background: var(--crudo); }
.invierno, .nombre, .cierre {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

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

.invierno h2, .nombre h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.04rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.4rem;
}
.entrada em { font-style: italic; }
.entrada b { color: var(--tinta); }

.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(--oxido);
  border-left: 2px solid var(--oxido);
  padding-left: .6rem;
}

.falta {
  font-family: var(--dato);
  font-size: .84em;
  color: var(--oxido);
  border-bottom: 1px dashed var(--oxido);
}
/* El fondo decide el tono. */
.hogar .falta, .nombre .falta { color: var(--oxido-cl); border-bottom-color: var(--oxido-cl); }

/* ── los seis detalles del invierno ── */
.detalles { list-style: none; margin: 0 0 1.6rem; padding: 0; counter-reset: d; }
.det {
  counter-increment: d;
  position: relative;
  padding: 1.2rem 0 1.2rem 2.8rem;
  border-top: 1px solid var(--linea);
}
.det:last-child { border-bottom: 1px solid var(--linea); }
.det::before {
  content: counter(d, decimal-leading-zero);
  position: absolute; left: 0; top: 1.4rem;
  font-family: var(--dato);
  font-size: .72rem;
  color: var(--oxido);
}
.det__q {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.22;
  margin: 0 0 .35rem;
}
.det__a { margin: 0 0 .45rem; }
.det__pq { font-size: .93rem; color: var(--tinta-2); margin: 0; }

.firma {
  font-size: .94rem;
  color: var(--tinta-2);
  margin: 0;
  max-width: min(100%, 42rem);
}

/* ── un solo nombre ── */
.nombre {
  background: var(--hierro);
  color: var(--crudo);
}
.nombre .entrada { color: var(--claro-2); }
.nombre .entrada b { color: var(--crudo); }

.dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.dos__caja {
  background: var(--hierro-2);
  border-left: 3px solid var(--oxido-cl);
  padding: 1.1rem 1.2rem;
}
.dos__rot {
  font-family: var(--dato);
  font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .4rem;
}
.dos__n { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; margin: 0 0 .4rem; }
.dos__d { font-size: .92rem; color: var(--claro-2); margin: 0; }

.sub {
  font-size: 1.4rem;
  margin: 2rem 0 .9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-osc);
}
.porques { margin: 0 0 1.6rem; padding-left: 1.2rem; }
.porques li { font-size: .96rem; color: var(--claro-2); margin-bottom: .8rem; }
.porques b { color: var(--crudo); }

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

/* ── el cierre — T1 ── */
.cierre { background: var(--crudo-2); text-align: center; }
.cierre__rot {
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.2rem, 4.6vw, 2.4rem);
  line-height: 1.1;
  color: var(--oxido);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { text-decoration: underline; }
.cierre__pie { font-size: .93rem; color: var(--tinta-2); margin: 0; }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--crudo-2);
  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.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: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oxido);
  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: 700;
  color: var(--oxido);
  text-decoration: none;
  border-bottom: 1px solid var(--oxido);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--hierro);
  color: var(--claro-2);
  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) {
  /* Las ondas SE ESCONDEN. La estufa y su fuego quedan: el fuego es
     un dibujo, no una animacion. Tres circulos concentricos quietos,
     en cambio, se leen como una diana. */
  .ondas { 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 ── */
/* Acá la portada NO es una banda ancha sino un panel fijo, alto y
   angosto, y con la estufa dibujada en CSS adentro. Dos consecuencias:
   el gradiente va en VERTICAL (uno horizontal en 270 px no alcanza a
   disolver nada), y el velo se pinta con --hierro, que es el fondo del
   panel — con --crudo, que es el del resto de la página, la foto queda
   lavada en gris. La foto entra desde abajo y muere antes del titular;
   la estufa dibujada se recorta encima del bosque. */
.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: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 14%,
              rgba(0,0,0,.24) 28%, rgba(0,0,0,.70) 44%, #000 58%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 14%,
              rgba(0,0,0,.24) 28%, rgba(0,0,0,.70) 44%, #000 58%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--hierro) 0%, var(--hierro) 16%,
              rgba(31,30,28,.72) 32%, rgba(31,30,28,.50) 54%, rgba(31,30,28,.38) 100%);
}
@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(240,234,224,0) 0%, rgba(240,234,224,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#invierno { 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(240,234,224,.72) 0%,
              rgba(240,234,224,.84) 45%, rgba(240,234,224,.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(--oxido);
}
.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; }
}