/* ══════════════════════════════════════════════════════════════════
   VETERINARIA PITRUFQUEN
   Demo 167. Identidad: «LINO Y LAPICERA».

   LA DIRECCION EN UNA FRASE
   Esterilizar se decide y SE FIRMA. La pagina es la mesa donde se
   conversa y se firma: lino de fondo, hojas de papel encima y el azul
   de la lapicera —el BIC del consentimiento— como unico color.
   Narrativa y paleta son la misma cosa.

   LA PALETA
   --lino   #E7E1D4  la mesa (fondo de la pagina)
   --papel  #FBF9F4  las hojas (los bloques de contenido)
   --tinta  #1E1C1A  texto y el capitulo invertido
   --azul   #1B3FA8  LAPICERA, sobre papel (8,1:1)
   --azul-c #8FB0FF  LAPICERA, sobre tinta (7,2:1)
   --gris   #625C54  secundario sobre papel (6,6:1)

   EL FONDO DECIDE EL TONO: el azul de lapicera tiene DOS variantes
   declaradas porque la pagina tiene dos fondos. El de papel sobre
   tinta da 2,1:1 y seria ilegible; el claro sobre papel da 1,9:1 y
   tambien. Cada uno dice para que fondo es.

   DESLINDE DEL AZUL con la 134 (la pagina-boleta): aquel era tinta de
   IMPRESORA TERMICA —azul-negro apagado, quemado sobre papel
   termico—. Este es de LAPICERA: saturado, brillante, el azul BIC de
   un formulario firmado a mano. Y por eso aparece SOLO donde habria
   tinta de lapicera: subrayados, el numero del capitulo, la firma.

   EL TRIO
   · display · Petrona (variable) — serif de texto con algo de pluma;
     primera vez en el registro (estaba mencionada en el prompt de la
     141 pero nunca se uso).
   · cuerpo  · Cambay — humanista, con aire de formulario.
   · dato    · Atkinson Hyperlegible Mono — mono nueva del registro.
     La hizo el Braille Institute para legibilidad: en una pagina de
     salud es la eleccion que se puede defender en voz alta.

   LA CABECERA (133ª del oficio) — LA LAPICERA
   Delgada, con clip, en diagonal. DESLINDE con el lapiz de
   carpintero (89ª): aquel es OVAL, de madera y sin clip; esta es
   cilindrica, con clip metalico y punta fina. Lapiz que marca madera
   contra lapicera que firma papel.

   EL FONDO — LA FIRMA QUE SE TRAZA
   Un trazo cursivo abstracto (no dice nada: es una rubrica) se dibuja
   de corrido con stroke-dashoffset, se queda un momento y se
   desvanece. Ciclo de 14s.
   DESLINDE OBLIGATORIO DE TRAZOS — tres fisicas distintas:
     · el hilvan de la 130 avanza A SALTOS (steps: es costura)
     · la tiza de la 137 se dibuja y SE BORRA CON PANO (el borrado es
       otro movimiento, en sentido contrario)
     · esta firma se traza FLUIDA de una sola pasada y se va en FADE,
       sin borrarse: una firma no se borra, se termina
   Reduced-motion: firma quieta y ya trazada.

   LA ESTRUCTURA — F (editorial por capitulos)
   01 la decision · 02 los mitos · 03 el dia · 04 la casa despues.
   DESLINDE con los F del registro: **este es el unico F con un
   capitulo-preguntario** — el 02 lleva las sub-filas compuestas como
   preguntas literales, entre comillas y en cursiva, porque son las
   frases textuales que se dicen en el meson.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --lino:    #E7E1D4;
  --lino-2:  #DDD6C6;
  --papel:   #FBF9F4;
  --tinta:   #1E1C1A;
  --azul:    #1B3FA8;
  --azul-c:  #8FB0FF;
  --gris:    #625C54;
  --linea:   #CFC7B6;

  --display: 'Petrona', Georgia, serif;
  --cuerpo:  'Cambay', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Atkinson Hyperlegible 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(--lino);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

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

.visually {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ── 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(--lino);
  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.2rem; font-weight: 600; }

/* LA LAPICERA — la cabecera 133ª. Cuerpo cilindrico con punta fina y
   clip metalico, inclinada como se deja sobre un formulario. */
.lapicera {
  position: relative; display: block;
  width: 24px; height: 26px; flex: none;
}
.lapicera::before {
  content: ''; position: absolute; left: 10px; top: 0;
  width: 6px; height: 26px;
  background: var(--azul);
  border-radius: 3px 3px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  transform: rotate(30deg); transform-origin: 50% 100%;
}
.lapicera__clip {
  position: absolute; left: 15px; top: 3px;
  width: 2px; height: 9px;
  background: var(--gris);
  border-radius: 1px;
  transform: rotate(30deg); transform-origin: 50% 100%;
}

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

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

@media (max-width: 860px) {
  .cab__nav { display: none; }
  .cab__nombre { font-size: 1rem; }
  .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 FIRMA QUE SE TRAZA */
.firma-svg {
  position: absolute; z-index: 1; pointer-events: none;
  right: -4%; bottom: 7%;
  width: min(620px, 78vw); height: auto;
  color: #B3C0DE;
}
.js .firma-svg__trazo {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: trazar 14s ease-in-out infinite;
}
@keyframes trazar {
  0%          { stroke-dashoffset: 1500; opacity: 1; }
  42%, 68%    { stroke-dashoffset: 0;    opacity: 1; }
  88%, 100%   { stroke-dashoffset: 0;    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .firma-svg__trazo { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

.sitio {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1.1rem;
}

h1 {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  line-height: 1.02; letter-spacing: -.015em;
  margin-bottom: 1.6rem;
}
/* la tercera linea va en cursiva y subrayada a mano alzada: es la
   parte que se firma. */
h1 em {
  font-style: italic; color: var(--azul);
  border-bottom: 3px solid var(--azul);
  padding-bottom: .05em;
}

.bajada { max-width: 46ch; font-size: 1.06rem; margin-bottom: 2rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.45rem; }
.dd--no { font-size: .95rem !important; color: var(--gris); padding-top: .45rem; }
.dd--tel a { text-decoration: none; color: var(--azul); border-bottom: 2px solid var(--azul); }

/* ══════ LOS CAPITULOS — ESTRUCTURA F ══════ */
.cap {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
@media (max-width: 760px) {
  .cap { grid-template-columns: 1fr; gap: .5rem; }
}
.cap__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1; color: var(--azul);
  margin: 0;
}
.cap__cuerpo { max-width: 58rem; }
.cap h2 {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05; margin-bottom: 1rem;
}
.entrada { max-width: 54ch; }

/* el capitulo invertido */
.cap--oscuro { background: var(--tinta); color: var(--papel); border-top-color: var(--tinta); }
.cap--oscuro .cap__num { color: var(--azul-c); }

/* la marca de honestidad, escrita desde el atributo data- */
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .04em; color: var(--gris);
  border-left: 2px solid var(--gris); padding-left: .6rem;
}
.marca-ejemplo--claro::before {
  color: var(--lino); border-left-color: var(--azul-c);
}

/* ── la hoja de papel ── */
.hoja {
  background: var(--papel);
  border: 1px solid var(--linea);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  margin-top: 1.8rem;
}
.filas { margin: 0; }
.fila + .fila { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--linea); }
.filas dt {
  font-family: var(--display); font-weight: 600;
  font-size: 1.15rem; margin-bottom: .3rem;
}
.filas dd { margin: 0; color: var(--tinta); }

/* ── el capitulo-preguntario (unico del registro) ── */
.preguntas { margin: 1.8rem 0 0; }
.preg { padding: 1.4rem 0; border-top: 1px solid #3A3733; }
.preg:first-child { border-top: none; }
.preguntas dt {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--azul-c);
  margin-bottom: .5rem;
}
.preguntas dd { margin: 0; max-width: 62ch; color: var(--lino); }

/* ── la linea del dia ── */
.dia { list-style: none; margin: 1.8rem 0 0; padding: 0; counter-reset: paso; }
.paso {
  position: relative;
  padding: 0 0 1.8rem 2.2rem;
  border-left: 2px solid var(--linea);
  counter-increment: paso;
}
.paso:last-child { padding-bottom: 0; border-left-color: transparent; }
.paso::before {
  content: ''; position: absolute; left: -7px; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--azul); border: 3px solid var(--lino);
}
.paso__rot {
  font-family: var(--dato); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .2rem;
}
.paso h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.paso p { max-width: 58ch; margin-bottom: 0; }

/* «falta»: EL FONDO DECIDE EL TONO. La pagina es mayormente CLARA:
   el tono oscuro es el que va por defecto. */
.falta {
  display: inline-block; margin-top: .45rem;
  font-family: var(--dato); font-size: .72rem;
  color: var(--gris); border-bottom: 1px dashed var(--gris);
}
.cap--oscuro .falta { color: var(--azul-c); border-bottom-color: var(--azul-c); }

.descargo {
  max-width: 62ch; margin: 2rem 0 0;
  font-size: .85rem; color: var(--gris);
  border-left: 3px solid var(--linea); padding-left: 1rem;
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center; border-top: 1px solid var(--linea);
}
.cierre__rot {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.cierre__tel { font-size: clamp(2.1rem, 8.5vw, 5.5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--azul);
  border-bottom: 4px solid var(--lino-2);
}
.cierre__tel a:hover { border-bottom-color: var(--azul); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA LA VETERINARIA ══════ */
.dueno {
  background: var(--tinta); color: var(--lino);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin-bottom: 2rem; color: var(--papel); }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem; margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul-c); margin-bottom: .5rem;
}
.dueno p { color: var(--lino); 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 #4A4741; padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--azul-c); }

/* ══════ PIE ══════ */
.pie {
  background: #14120F; color: #A29B92;
  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; }
}

/* ══════ LA FACHADA ══════
   Unica foto de la pagina. Va enmarcada como una hoja mas —el mismo
   papel, el mismo filete de lapicera— para que no parezca pegada
   encima de la identidad, sino puesta sobre la mesa como todo lo
   demas. Ancho contenido: la foto viene de la ficha de Google y a
   tamano completo se le nota la resolucion. */
.fachada {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  max-width: 34rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  padding: .7rem;
  text-align: left;
}
.fachada img {
  display: block; width: 100%; height: auto;
  border-bottom: 2px solid var(--azul);
}
.fachada figcaption {
  font-family: var(--dato); font-size: .74rem;
  color: var(--gris); padding: .7rem .2rem 0;
}


/* ══════════════════════════════════════════════════════════════════
   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: 60% 46%;
  -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(--lino) 0%, var(--lino) 30%,
              rgba(231,225,212,.66) 46%, rgba(231,225,212,.22) 68%, rgba(231,225,212,.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(231,225,212,0) 0%, rgba(231,225,212,.30) 42%, var(--lino) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#cap-01 { 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(--lino-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(--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(--lino); 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(231,225,212,.72) 0%,
              rgba(231,225,212,.84) 45%, rgba(231,225,212,.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(--azul);
}
.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(--lino-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(--lino-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(--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(--lino-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 UBICACIÓN ──────────────────────────────────────────────
   La figura estaba en el HTML desde una pasada anterior pero sin una
   sola regla de CSS: la imagen salía a tamaño natural y el pie sin
   forma. Esto lo encuadra.
   Imagen propia con mosaicos de OpenStreetMap: la CSP prohíbe pedir
   nada a un tercero y un iframe de Google Maps quedaría en blanco sin
   dar un solo error. La atribución a OSM la exige su licencia (ODbL). */
.mapa { margin: 0; border: 1px solid var(--lino); border-radius: 10px; overflow: hidden; background: var(--papel); }
.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: .7rem .9rem;
  font-size: var(--p--1, .86rem); line-height: 1.45;
  color: var(--gris); border-top: 1px solid var(--lino);
}
.mapa__ir { color: var(--azul); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__ir:hover, .mapa__ir:focus-visible { text-decoration: underline; }
.mapa__cred { font-size: .86em; opacity: .85; }
.mapa__cred a { color: var(--gris); }
.mapa__nota { margin: .7rem 0 0; font-size: var(--p--1, .86rem); color: var(--gris); }