/* ══════════════════════════════════════════════════════════════════
   CLINICA DENTAL INTEGRASUR · Loncoche
   Demo 173. Identidad: «RAYA DE PASTA».

   DATO QUE NO SE USA: la ficha tiene 5,0 pero con SIETE reseñas. Por
   la regla de la casa (la de la 133), un volumen tan bajo no se cita
   como argumento: **en toda la pagina no aparece ni la nota ni el
   numero de reseñas**. El argumento es la comuna y la prevencion.

   LA DIRECCION EN UNA FRASE
   El motivo es LA FRANJA BICOLOR DE LA PASTA DE DIENTES: blanco con
   la veta celeste. No es un color de fondo, es una RAYA — y la raya
   es toda la identidad.

   LA PALETA
   --blanco  #FFFFFF
   --hueso   #F5F8FA  el fondo real
   --gel     #166D9C  celeste de gel para TEXTO (5,3:1 sobre hueso)
   --gel-obj #33A9E0  el mismo celeste para la RAYA dibujada. No se
                      usa en texto: sobre hueso da 2,4:1.
   --hondo   #103247  la seccion oscura
   --tinta   #16202A

   REGLA DURA: el celeste aparece SIEMPRE COMO RAYA HORIZONTAL
   BICOLOR —blanco arriba, celeste al medio, blanco abajo—, nunca como
   plano suelto. Bordes de seccion, subrayados gruesos, el fondo de la
   portada. Un plano celeste seria «otra pagina celeste»; la raya es
   pasta de dientes y se lee al instante.

   DESLINDE DE CELESTES DEL REGISTRO (ya van cuatro):
     · la bata de la 110 es UNIFORME (tela plana de clinica)
     · la manta de la 161 es TEXTIL de noche (opaca)
     · el jabon de la 168 es AGUA ESPUMOSA (translucida, con brillo)
     · este es GEL EN FRANJA: opaco, viscoso y siempre en raya
   Cuatro celestes, cuatro materiales distintos.

   EL TRIO
   · display · Mitr — grotesca redondeada de trazo parejo, limpia sin
     ser fria. Primera vez en el registro.
   · cuerpo  · Public Sans — neutra institucional, buena para salud.
   · dato    · Sometype Mono — REPETICION CONSCIENTE (segundo uso):
     el catalogo de monos esta agotado a esta altura y es la mas
     blanda del catalogo, que es lo que pide una pagina de higiene.

   FAMILIA DENTAL POR PIEZA: 54 precio · 67 niños · 84 duracion ·
   119 miedo · 171 urgencia · 172 ortodoncia · **173 PREVENCION** ·
   174 protesis.
   FAMILIA «PLATA HONESTA» (hablar de dinero sin inventar cifras):
   54 · 136 · 162 · **173**.

   LA CABECERA (139ª del oficio) — LA ONDA DE PASTA
   El gusanito de pasta sobre la linea del cepillo: una S acostada
   con punta, en la raya bicolor.
   TERCERA CABECERA DENTAL DEL REGISTRO Y TERCER OBJETO:
     · la 137ª es LA MUELA — anatomia (es del paciente)
     · la 138ª es EL BRACKET — aparato (es de la clinica)
     · esta es LA PASTA — higiene (es de la casa del paciente)
   Ninguna repite objeto y las tres son dentales.

   EL FONDO — LA RAYA QUE SE EXTIENDE
   La franja bicolor sale desde el borde izquierdo, avanza suave y se
   corta con una gota final que se redondea y se asienta. 24s.
   DESLINDE OBLIGATORIO CON LA CINTA DE LA 181 (que tambien se
   extiende y se corta): la cinta de embalar se corta DENTADA Y SECA
   —un tiron, un borde irregular—; la pasta termina en GOTA BLANDA que
   se asienta. Mismo esqueleto de animacion, fisica opuesta. Escrito
   en las dos filas del registro.
   Reduced-motion: raya extendida y quieta, con su gota puesta.

   LA ESTRUCTURA — K (filas <details>)
   Cada fila muestra la pregunta Y su respuesta de tres palabras en
   mono, al lado, antes de abrirse.
   DESLINDE CON LOS K DEL REGISTRO — tercer sabor de fila-con-adelanto:
     · la 133 adelanta un VEREDICTO binario (sirve / no sirve)
     · la 156 adelanta una CHAPITA normativa (la norma que aplica)
     · esta adelanta una RESPUESTA CORTA en lenguaje hablado
       («Molesta, no duele»), que es como contestaria una persona
   El que solo queria saber si dolia ya lo sabe sin abrir nada.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --blanco:  #FFFFFF;
  --hueso:   #F5F8FA;
  --gel:     #166D9C;
  --gel-obj: #33A9E0;
  --hondo:   #103247;
  --tinta:   #16202A;
  --gris:    #566670;
  --linea:   #DCE5EA;

  --display: 'Mitr', system-ui, sans-serif;
  --cuerpo:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Sometype Mono', ui-monospace, 'Consolas', monospace;

  /* LA RAYA: el gradiente que es la identidad entera. */
  --raya: linear-gradient(to bottom,
            #FFFFFF 0 30%, var(--gel-obj) 30% 70%, #FFFFFF 70% 100%);
}

*, *::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(--hueso);
  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: 500; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--gel); outline-offset: 3px; }

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); color: var(--blanco);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: #A9C3D2; margin: 0; max-width: 72ch; }

/* ── cabecera fantasma ── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1.2rem, 5vw, 4rem);
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background-color .3s, border-color .3s; }
.js .cab:not(.cab--flota) { background: transparent; border-bottom-color: transparent; }

.cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.cab__nombre { font-family: var(--display); font-size: 1.25rem; }

/* LA ONDA DE PASTA — la cabecera 139ª.
   La linea del cepillo abajo y el gusanito encima, con su punta. */
.pasta { position: relative; display: block; width: 30px; height: 20px; flex: none; }
/* la linea del cepillo */
.pasta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 3px; background: var(--gris); border-radius: 2px;
}
/* el gusanito: una S acostada hecha con dos bordes redondeados */
.pasta__onda {
  position: absolute; left: 1px; right: 5px; top: 3px; height: 11px;
  background: var(--raya);
  border-radius: 6px 2px 6px 2px / 6px 6px 6px 6px;
}
/* la punta */
.pasta__onda::after {
  content: ''; position: absolute; right: -5px; top: 2px;
  width: 7px; height: 7px;
  background: var(--gel-obj);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--gris);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--gel); border-bottom-color: var(--gel-obj); }

.cab__tel { text-decoration: none; text-align: right; line-height: 1.15; }
.cab__tel-rot {
  display: block; font-family: var(--dato); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.cab__tel-num { display: block; font-family: var(--dato); font-size: .95rem; }

@media (max-width: 860px) {
  .cab__nav { display: none; }
  .cab__tel { margin-left: auto; }
}

/* ══════ PORTADA ══════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem) 0;
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: 44rem; }

/* LA RAYA QUE SE EXTIENDE */
.raya-fondo {
  position: absolute; left: 0; right: 0; bottom: 20%;
  height: 34px; z-index: 1; pointer-events: none;
}
.raya-fondo__franja {
  display: block; position: relative;
  width: 30%; height: 100%;
  background: var(--raya);
  border-radius: 0 4px 4px 0;
}
/* LA GOTA: aparece al final del recorrido y se asienta. Blanda —
   nunca un corte dentado (ver el deslinde con la 181). */
.raya-fondo__franja::after {
  content: ''; position: absolute; right: -13px; top: 50%;
  width: 30px; height: 30px; margin-top: -15px;
  background: var(--gel-obj);
  border-radius: 50%;
  transform: scale(0);
}
.js .raya-fondo__franja { animation: extender 24s ease-in-out infinite; }
.js .raya-fondo__franja::after { animation: gotear 24s ease-out infinite; }
@keyframes extender {
  0%        { width: 0; }
  54%, 88%  { width: 74%; }
  100%      { width: 0; }
}
@keyframes gotear {
  0%, 48%   { transform: scale(0); }
  60%, 88%  { transform: scale(1); }
  96%, 100% { transform: scale(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .raya-fondo__franja { animation: none; width: 74%; }
  .js .raya-fondo__franja::after { animation: none; transform: scale(1); }
}

.sitio {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  line-height: 1.02; margin-bottom: 1.4rem;
  color: var(--tinta);
}
.bajada { max-width: 46ch; margin-bottom: 1.8rem; }
.dd--tel { margin: 0; }
.dd--tel a {
  font-family: var(--dato); font-size: clamp(1.3rem, 3vw, 1.9rem);
  text-decoration: none; color: var(--gel);
  border-bottom: 3px solid var(--gel-obj); padding-bottom: 2px;
}

/* ══════ LA PIEZA FIRMA ══════ */
.limpieza {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 4px solid transparent;
  border-image: var(--raya) 1;
}
.limpieza__cabecera, .sillon__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.antetitulo {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #A9C3D2; }

.limpieza h2, .sillon h2 {
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.05;
  margin-bottom: 1rem;
}
.sillon h2 { color: var(--blanco); }
.entrada { max-width: 54ch; }
.sillon .entrada { color: #D3E2EA; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  color: var(--gris); border-left: 2px solid var(--gris); padding-left: .6rem;
}
.marca-ejemplo--claro::before { color: #A9C3D2; border-left-color: #A9C3D2; }

.fichas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.fi {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.fi--cuenta { grid-column: 1 / -1; border-top: 6px solid transparent; border-image: var(--raya) 1; }
.fi__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gel); margin-bottom: .3rem;
}
.fi h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.fi p { font-size: .98rem; }
.fi p:last-child { margin-bottom: 0; }
.fi__nota {
  font-family: var(--dato); font-size: .84rem; color: var(--gris);
  border-top: 1px solid var(--linea); padding-top: .8rem;
}

/* «falta»: la pagina es mayormente CLARA — tono oscuro por defecto,
   claro como excepcion para la seccion hondo. */
.falta {
  display: inline-block; margin-top: .35rem;
  font-family: var(--dato); font-size: .76rem;
  color: var(--gel); border-bottom: 1px dashed var(--gel-obj);
}
.sillon .falta { color: #8FC7E4; border-bottom-color: #8FC7E4; }

.firma {
  max-width: 54ch; margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .95rem; color: var(--gris);
  border-left: 4px solid var(--gel-obj); padding-left: 1rem;
}

/* ══════ LAS PREGUNTAS — ESTRUCTURA K ══════ */
.sillon {
  background: var(--hondo); color: var(--blanco);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}

.filas { max-width: 58rem; }
.fila { border-top: 1px solid #2A4E63; }
.fila:last-of-type { border-bottom: 1px solid #2A4E63; }
.fila > summary {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
}
.fila > summary::-webkit-details-marker { display: none; }
.fila__q {
  font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--blanco);
}
/* LA RESPUESTA CORTA: el adelanto que hace distinta a esta K. */
.fila__corta {
  margin-left: auto;
  font-family: var(--dato); font-size: .92rem;
  color: #8FC7E4;
  border-bottom: 2px solid var(--gel-obj);
  padding-bottom: 1px;
}
.fila[open] > summary .fila__corta { border-bottom-color: transparent; }
.fila__cuerpo { padding: 0 0 1.4rem; max-width: 62ch; }
.fila__cuerpo p { color: #D3E2EA; margin-bottom: 0; }

.descargo {
  max-width: 64ch; margin: 2rem 0 0;
  font-size: .85rem; color: #D3E2EA;
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.cierre__tel { font-size: clamp(2rem, 8vw, 5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--gel);
  border-bottom: 6px solid transparent; border-image: var(--raya) 1;
}
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA LA CLINICA ══════ */
.dueno {
  background: var(--blanco);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(1.8rem, 4.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: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gel); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); font-size: .95rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--gel-obj); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #9FAEB8;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .8rem;
}
.pie p { max-width: 72ch; margin: 0; }

/* ── apariciones ── */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.ok {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}


/* ══════ LAS FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--tinta);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--gris); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--blanco); border: 1px solid var(--linea); padding: .6rem; }
.gal--abajo { grid-column: 1 / -1; }
.gal img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--gel);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

.js .gal.rev { opacity: 0; }
.js .gal--izq.rev   { transform: translateX(-2.4rem); }
.js .gal--der.rev   { transform: translateX(2.4rem); }
.js .gal--abajo.rev { transform: translateY(2.4rem) scale(.98); }
.js .gal.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.js .gal--der.rev.ok   { transition-delay: .12s; }
.js .gal--abajo.rev.ok { transition-delay: .22s; }

@media (max-width: 700px) {
  .galeria__grilla { grid-template-columns: 1fr; }
  .gal--abajo img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gal.rev { opacity: 1; transform: 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: 56% 48%;
  -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(--hueso) 0%, var(--hueso) 30%,
              rgba(245,248,250,.66) 46%, rgba(245,248,250,.22) 68%, rgba(245,248,250,.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(245,248,250,0) 0%, rgba(245,248,250,.30) 42%, var(--hueso) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#limpieza { 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(--blanco);
  /* 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(--gris); 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(--hueso); 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,248,250,.72) 0%,
              rgba(245,248,250,.84) 45%, rgba(245,248,250,.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(--gel);
}
.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(--blanco);
}
.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(--blanco);
  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(--gris); 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(--blanco); }
.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; }
}