/* ══════════════════════════════════════════════════════════════════
   CLINICA VETERINARIA DE LOS RIOS · Valdivia
   Demo 163. Identidad: «RADIOGRAFIA».

   ─────────────────────────────────────────────────────────────────
   EL TONO, QUE ES LA DECISION MAS IMPORTANTE
   La pagina habla de pedir una segunda opinion. Defiende al DUEÑO y
   NO ATACA A NADIE: no hay una sola frase que insinue desconfiar de
   otro profesional, y se dice explicito que la mayoria de las
   segundas opiniones terminan confirmando la primera. Una pagina asi
   escrita con resentimiento seria repugnante; escrita con serenidad
   es la que se gana la confianza entera.
   Salud: criterios generales, firma pendiente, descargo en el pie.
   ─────────────────────────────────────────────────────────────────

   CONCEPTO VISUAL NUEVO — LA PLACA Y EL NEGATOSCOPIO
   Los elementos claros van con la logica de una radiografia: blancos
   TRANSLUCIDOS sobre negro, no blancos solidos. Y las cajas
   importantes son «negatoscopios»: paneles que parecen
   retroiluminados, con un halo frio detras.

   LA PALETA
   --placa  #0D1218  negro azulado de placa
   --hueso  #E8EDF2  blanco radiografico
   --negato #5FA8D8  azul del panel de luz

   DESLINDE — las nocturnas de la tanda (154 vapor, 157 urgencia, 161
   velador, 169 luna) son noches DE CIELO: hay atmosfera, hay afuera.
   Esto es OSCURIDAD DE SALA DE LECTURA: negro tecnico, sin cielo,
   sin aire. La unica luz es la del panel.

   EL TRIO
   · display · Anta — geometrica de un solo peso, nueva en el
     registro. Limpia y sin epoca: la letra de un rotulo tecnico.
   · cuerpo  · Rubik — neutra.
   · dato    · Cutive Mono — tiene aire de informe escrito a maquina,
     que es exactamente lo que la pagina pide que el dueño reclame.

   LA CABECERA (129ª del oficio) — EL NEGATOSCOPIO
   El rectangulo luminoso con el clip arriba sujetando la placa.

   EL FONDO — LA PLACA QUE SE REVELA
   Una forma clara y DIFUSA que emerge del negro, se sostiene y vuelve
   a fundirse. Ciclo de 34 s.
   DESLINDE: los frascos de la 135 aparecen como objetos NITIDOS que
   quedan puestos. Esto es lo contrario: una forma sin bordes que
   emerge y se va — revelado quimico, no aparicion.
   Reduced-motion: queda semi revelada y fija.

   LA ESTRUCTURA — F (editorial)
   Los capitulos son un PROCESO EMOCIONAL del dueño: pedir · atreverse
   a decirlo · la nueva mirada · volver o quedarse.
   PARENTESCO con la 119 (dental), que hizo un arco emocional: alli el
   sentimiento era MIEDO y el arco iba de la puerta al sillon. Aca es
   DUDA, y el arco va de callar a preguntar. Misma familia, otro
   sentimiento.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --placa:     #0D1218;
  --placa-2:   #141B24;
  --placa-3:   #1C2530;
  --hueso:     #E8EDF2;
  --hueso-2:   #A9B6C4;   /* 8,4:1 sobre placa */
  --negato:    #5FA8D8;   /* 8,0:1 sobre placa */
  --negato-2:  #8FC6E8;
  --linea-osc: #263341;

  --display: 'Anta', system-ui, sans-serif;
  --cuerpo:  'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Cutive 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(--placa);
  color: var(--hueso);
  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(--negato); color: var(--placa); }
a { color: var(--negato); }
:focus-visible { outline: 2px solid var(--negato); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--placa-2);
  color: var(--hueso-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--linea-osc);
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--hueso); }
.propuesta__que b { font-weight: 600; }
.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(--placa);
  border-bottom: 1px solid var(--linea-osc);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(13, 18, 24, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--hueso); margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }

/* ── EL NEGATOSCOPIO — el panel con su clip ── */
.negato {
  position: relative;
  width: 18px; height: 22px;
  flex: 0 0 auto;
  margin-top: 3px;
  border-radius: 2px;
  background: linear-gradient(178deg, #EEF3F7 0%, #C8DCEA 62%, #A8C6DC 100%);
  box-shadow: 0 0 11px rgba(95, 168, 216, .45);
}
.negato::after {
  content: ''; position: absolute;
  left: 50%; top: -4px;
  width: 10px; height: 5px;
  margin-left: -5px;
  border-radius: 1px;
  background: #55636F;
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hueso-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--negato); border-bottom-color: var(--negato); }
@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-osc);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hueso-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.86rem, 2vw, 1.02rem);
  color: var(--negato);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--placa);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 44rem); }

/* ── LA PLACA QUE SE REVELA ──
   Difusa a proposito: si tuviera bordes seria un objeto que aparece,
   y esto es un revelado. */
.revelado {
  position: absolute;
  right: 2%; top: 6%;
  width: min(46vw, 34rem); height: min(58vh, 32rem);
  z-index: 1; pointer-events: none;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 42% 38%,
    rgba(232, 237, 242, .13) 0%,
    rgba(143, 198, 232, .07) 46%,
    rgba(95, 168, 216, 0) 74%);
  filter: blur(22px);
  opacity: 0;
}
.js .revelado { animation: revela 34s ease-in-out infinite; }
@keyframes revela {
  0%, 100% { opacity: 0;   transform: scale(.94); }
  22%      { opacity: .85; transform: scale(1);   }
  56%      { opacity: 1;   transform: scale(1.03);}
  80%      { opacity: .3;  transform: scale(1.06);}
}

.sitio {
  font-family: var(--dato);
  font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--negato);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--hueso-2);
  max-width: min(92vw, 37rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hueso-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: 1.1rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LOS CAPÍTULOS (estructura F) ═══════════ */
.cap {
  display: grid;
  grid-template-columns: clamp(4rem, 10vw, 9rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 4vw, 3rem);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea-osc);
  background: var(--placa);
}
.cap--par { background: var(--placa-2); }

/* El numeral, con la translucidez de una placa. */
.cap__n {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .82;
  color: var(--hueso);
  opacity: .16;
  margin: 0;
}
.cap__cuerpo { max-width: min(100%, 44rem); }

.antetitulo {
  font-family: var(--dato);
  font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--negato);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: var(--negato-2); }

.cap h2, .papeles h2 {
  font-size: clamp(1.8rem, 4.6vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--hueso-2);
  max-width: min(100%, 37rem);
  margin-bottom: 1.6rem;
}
.cap p { color: var(--hueso-2); }

/* ── EL PANEL: la caja retroiluminada ──
   Es el negatoscopio hecho bloque de contenido: fondo mas claro que
   el resto y un halo frio detras. */
.panel {
  position: relative;
  background: var(--placa-3);
  border-left: 3px solid var(--negato);
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0;
  max-width: min(100%, 44rem);
  box-shadow: 0 0 34px rgba(95, 168, 216, .10);
}
.panel p { margin: 0; font-size: .97rem; color: var(--hueso-2); }
.panel b { color: var(--hueso); }
.panel--serio { border-left-color: var(--hueso-2); }

.frases { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.frases li { padding: 1.1rem 0; border-top: 1px solid var(--linea-osc); }
.frases li:last-child { border-bottom: 1px solid var(--linea-osc); }
.frase__t {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.25;
  color: var(--hueso) !important;
  margin: 0 0 .4rem;
}
.frase__d { font-size: .95rem; margin: 0; }

.casos { list-style: none; margin: 0 0 1.6rem; padding: 0; counter-reset: c; }
.casos li {
  counter-increment: c;
  position: relative;
  padding: 1rem 0 1rem 2.6rem;
  border-top: 1px solid var(--linea-osc);
}
.casos li:last-child { border-bottom: 1px solid var(--linea-osc); }
.casos li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 1.15rem;
  font-family: var(--dato);
  font-size: .8rem;
  color: var(--negato);
}
.caso__t {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--hueso) !important;
  margin: 0 0 .3rem;
}
.caso__d { font-size: .95rem; margin: 0; }

.falta {
  font-family: var(--dato);
  font-size: .9em;
  color: var(--negato);
  border-bottom: 1px dashed var(--negato);
}

.huecos { margin: 0; }
.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: .8rem;
  color: var(--hueso-2);
  align-self: start;
  padding-top: .15rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .93rem; color: var(--hueso-2); margin-top: .3rem; }
@media (max-width: 44rem) { .hueco { grid-template-columns: 1fr; } }

/* ═══════════ SUS EXÁMENES SON SUYOS ═══════════ */
.papeles {
  background: var(--placa-3);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea-osc);
}
.papeles__cuerpo { max-width: min(100%, 46rem); }

.firma {
  font-size: .96rem;
  color: var(--hueso-2);
  margin: 1.6rem 0 0;
  max-width: min(100%, 44rem);
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--placa);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
  border-top: 1px solid var(--linea-osc);
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hueso-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.5rem, 6.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--negato);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--hueso); }
.cierre__pie { font-size: .96rem; color: var(--hueso-2); margin: 0; }

/* ═══════════ PARA LA CLÍNICA ═══════════ */
.dueno {
  background: var(--placa-2);
  color: var(--hueso);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea-osc);
}
.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: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--negato);
  margin-bottom: .5rem;
}
.dueno p { color: var(--hueso-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 500;
  color: var(--negato);
  text-decoration: none;
  border-bottom: 1px solid var(--negato);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--hueso); border-bottom-color: var(--hueso); }

.pie {
  background: var(--placa);
  color: var(--hueso-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .85rem;
  border-top: 1px solid var(--linea-osc);
}
.pie p { margin: 0 0 .8rem; max-width: 74ch; }
.pie b { color: var(--hueso); }
.pie__demo { font-size: .78rem; opacity: .85; margin: 0 !important; }

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

@media (prefers-reduced-motion: reduce) {
  /* La placa queda semi revelada y fija: sigue leyendose como una
     forma en el negro. */
  .js .revelado { animation: none; opacity: .7; }
}

/* ══════════════════════════════════════════════════════════════════
   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(--placa) 0%, var(--placa) 30%,
              rgba(13,18,24,.66) 46%, rgba(13,18,24,.22) 68%, rgba(13,18,24,.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(13,18,24,0) 0%, rgba(13,18,24,.30) 42%, var(--placa) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#c1 { 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(--placa-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(--hueso);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hueso-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(--hueso);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--hueso); 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(--placa); 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(13,18,24,.62) 0%,
              rgba(13,18,24,.80) 45%, rgba(13,18,24,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--hueso); }
.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(--hueso);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--negato);
}
.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-osc); }
.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(--placa-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(--placa-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(--hueso);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--hueso-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(--placa-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; }
}