/* ==========================================================================
   Manuelita Pets · Veterinaria en Engativá, Bogotá
   Dirección: «Cuaderno clínico · el veterinario que te explica»

   PALETA REAL DEL NEGOCIO (muestreada de su logo y de su Instagram, 2026-08-20):
   · AZUL PETRÓLEO #127E7E — el trazo del logo (círculo con perro y gato de línea
     continua + el electrocardiograma) y los tres iconos del avatar de su IG. Es el
     color de marca y es NO DOMINANTE: vive como TRAZO (filetes, el electro, estados,
     acentos), nunca como superficie extendida.
   · DORADO APAGADO #A27E36 — el wordmark «Manuelita Pets» y el marco de su aviso.
     Nunca texto de cuerpo (3.61:1 sobre el papel): filete, marco y microtipografía
     display con la variante oscura --gold-t.
   · BLANCO CÁLIDO NEUTRO — la superficie dominante. Tinta grafito para el texto.
   Fuera el vinotinto y el latón como protagonistas: venían de la bata del médico y
   del marco del aviso, no de la marca.

   La lavanda es acento LOCAL: vive solo en la banda del mural de la reja.
   Firma de motion: el trazo de electrocardiograma de su propio logo — y ahora el
   trazo va en el color real de ese electro.
   CSS a mano, sin framework.
   ========================================================================== */

:root {
  /* Triples RGB — permiten alfas sin regar hex por el CSS */
  --rgb-paper:     251 250 248;
  --rgb-paper-2:   242 241 237;
  --rgb-paper-hi:  252 252 250;
  --rgb-paper-hi2: 254 254 252;
  --rgb-gold:      162 126 54;
  --rgb-gold-hi:   201 164 91;
  --rgb-pet:        18 126 126;
  --rgb-veil:       10  34  34;   /* velo de foto: petróleo profundo, desaturado */
  --rgb-lav-d:      42  30  68;   /* SOLO la banda del mural (la reja ES lavanda) */

  --paper:      #FBFAF8;   /* blanco cálido neutro — la superficie dominante */
  --paper-2:    #F2F1ED;   /* banda alterna, un grado más de gris cálido */
  --paper-hi:   #FCFCFA;   /* casi-blanco: texto sobre oscuro */
  --paper-hi2:  #FEFEFC;   /* titulares sobre foto */
  --gold:       #A27E36;   /* DORADO APAGADO (wordmark + marco de su aviso):
                              filetes, marcos, trazo. JAMÁS texto (3.61:1) */
  --gold-l:     #C9A45B;   /* dorado claro sobre banda oscura (5.30:1) */
  --gold-t:     #7A5A20;   /* dorado texto MEDIDO: 6.08:1 en --paper, 5.61:1 en --paper-2 */
  --gold-a:     rgb(var(--rgb-gold) / .52);
  --gold-hi:    #E0C48C;   /* dorado luminoso: solo sobre foto con velo oscuro */
  --pet:        #0C5A5C;   /* PETRÓLEO oscuro — primario de acción (7.65:1) */
  --pet-d:      #08403F;   /* hover y enlaces (10.36:1) */
  --teal:       #127E7E;   /* EL AZUL PETRÓLEO DE MARCA — trazo del electro,
                              filetes vivos, estados. 4.67:1 sobre el papel */
  --teal-l:     #3FA0A0;   /* el mismo trazo sobre banda oscura (4.00:1: es TRAZO) */
  --ink-p:      #0F3A3B;   /* ancla oscura: titulares y la única banda (11.92:1) */
  --ink-p-d:    #082527;   /* footer y cortinilla */
  --lav:        #3A2A5C;   /* lavanda-tinta: SOLO la banda del mural */
  --ink:        #23282A;   /* tinta grafito (14.29:1) */
  --charcoal:   #3C4345;   /* (9.67:1) */
  --ash:        #5B6366;   /* captions (5.88:1) */
  /* Contenedor: escalonado por ancho de pantalla — ver «ESCALÓN DE PANTALLA ANCHA» */
  --maxw: 1180px;
  --ease: cubic-bezier(.23,1,.32,1);
  --ease-io: cubic-bezier(.77,0,.175,1);
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* Tipografía fluida: en un monitor de 27" el texto crece con el contenedor, así que
     el ancho extra se convierte en lectura y no en aire. Las medidas de línea van en
     `ch`, de modo que ningún párrafo pasa de ~68 caracteres por línea. */
  font-size: clamp(17px, 1rem + .18vw, 19.5px);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, blockquote, .af-lead { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h1, h2 { line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h3 { line-height: 1.22; margin: 0; }
p { margin: 0 0 1.05em; }
strong { font-weight: 600; }
.num, .hh, .horario, .wa-num { font-variant-numeric: tabular-nums; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink-p); color: var(--paper); padding: .7rem 1.1rem;
}
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--pet); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec + .sec { padding-top: 0; }

/* ==========================================================================
   ESCALÓN DE PANTALLA ANCHA
   Un tope fijo de 1180px deja el 54% de un monitor de 27" (2560px) en margen.
   El contenedor sube por escalones y la tipografía es fluida, así que el ancho
   extra se reparte entre columna de lectura y aire, no solo aire.
   Medido: 1440 → 1240px (86%) · 1920 → 1560px (81%) · 2560 → 1760px (69%).
   ========================================================================== */
@media (min-width: 1300px) { :root { --maxw: min(92vw, 1240px); } }
@media (min-width: 1800px) { :root { --maxw: min(88vw, 1560px); } }
@media (min-width: 2200px) { :root { --maxw: 1760px; } }
.kicker {
  font-family: var(--serif); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-t); margin: 0 0 .7rem;
}
.sec-title { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 .9rem; color: var(--ink-p); }
.sec-intro { max-width: 62ch; color: var(--charcoal); margin-bottom: 2.2rem; }
.lnk { color: var(--pet-d); text-decoration: underline; text-decoration-color: var(--gold-a); text-underline-offset: 3px; }
.lnk:hover { color: var(--ink-p); text-decoration-color: var(--gold); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: .72rem 1.25rem;
  font-family: var(--sans); font-size: .97rem; font-weight: 500; letter-spacing: .005em;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  transition: transform 140ms var(--ease), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 52px; padding: .85rem 1.5rem; font-size: 1.02rem; }
.btn-solid { background: var(--pet); color: var(--paper-hi); }
.btn-solid:hover { background: var(--pet-d); }
.btn-ghost { background: transparent; color: var(--paper-hi); border-color: var(--gold); }
.btn-ghost:hover { background: rgb(var(--rgb-gold) / .18); border-color: var(--gold-l); }
.btn-gold { background: transparent; color: var(--gold-hi); border-color: rgb(var(--rgb-gold-hi) / .5); }
.btn-gold:hover { background: rgb(var(--rgb-gold-hi) / .14); border-color: var(--gold-hi); }
.ico { width: 19px; height: 19px; flex: 0 0 auto; }

/* ==========================================================================
   CORTINILLA DE ENTRADA  (display:none por defecto → jamás tapa el hero)
   ========================================================================== */
.curtain { display: none; }
html.is-anim .curtain {
  display: block; position: fixed; inset: 0; z-index: 200;
  background: var(--ink-p-d); pointer-events: none;
  transform-origin: 50% 0;
  animation: curtainUp 620ms var(--ease-io) 60ms forwards;
}
@keyframes curtainUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

/* ==========================================================================
   RIEL DE MARGEN  (espina de electro vertical ligada al scroll)
   ========================================================================== */
.riel { display: none; }
@media (min-width: 1340px) {
  .riel {
    display: block; position: fixed; left: 0; top: 96px; bottom: 40px; width: 72px;
    z-index: 20; pointer-events: none;
  }
  .riel-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
  .riel-lbl {
    position: absolute; left: 46px; bottom: 8px;
    font-family: var(--serif); font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-t);
    writing-mode: vertical-rl; transform: rotate(180deg);
    transition: opacity 240ms ease;
  }
}

/* ==========================================================================
   TRAZO DE ELECTRO  (divisor · se dibuja de izquierda a derecha)
   ========================================================================== */
section[id] { scroll-margin-top: 84px; }

.ecg { display: flex; align-items: center; color: var(--teal); margin: 2.2rem 0; position: relative; }
.ecg.on-dark { color: var(--teal-l); }
.ecg-l, .ecg-r { flex: 1 1 auto; height: 1.5px; background: currentColor; opacity: .9; }
.ecg-svg { flex: 0 0 auto; width: 130px; height: 36px; }
.ecg-mini { margin: 1rem 0 0; }
.ecg-mini .ecg-svg { width: 108px; }

html.is-anim .ecg[data-r] .ecg-l { transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--ease); }
html.is-anim .ecg[data-r] .ecg-r { transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--ease) 420ms; }
html.is-anim .ecg[data-r] .ecg-svg path {
  stroke-dasharray: var(--len, 220); stroke-dashoffset: var(--len, 220);
  transition: stroke-dashoffset 460ms var(--ease) 180ms;
}
html.is-anim .ecg[data-r].in .ecg-l, html.is-anim .ecg[data-r].in .ecg-r { transform: scaleX(1); }
html.is-anim .ecg[data-r].in .ecg-svg path { stroke-dashoffset: 0; }
html.is-anim .ecg-hero[data-r] .ecg-svg path { transition-delay: 760ms; }
html.is-anim .ecg-hero[data-r] .ecg-l { transition-delay: 640ms; }
html.is-anim .ecg-hero[data-r] .ecg-r { transition-delay: 980ms; }

/* Un latido que VIAJA — una sola vez, solo donde importa (one-shot) */
.latido { display: none; }
html.is-anim .latido {
  display: block; position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 0; border-radius: 50%;
  background: var(--teal-l); opacity: 0;
}
html.is-anim .ecg-mini .latido { left: 0; }
html.is-anim .ecg[data-r].in .latido { animation: viaja 900ms ease-out 780ms 1 both; }
@keyframes viaja {
  0%   { transform: translateX(0) translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  40%  { transform: translateX(44px) translateY(-13px); }
  52%  { transform: translateX(52px) translateY(14px); }
  70%  { transform: translateX(76px) translateY(-6px); }
  100% { transform: translateX(128px) translateY(0); opacity: 0; }
}
.ecg-latido { justify-content: flex-start; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgb(var(--rgb-paper) / .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.nav.scrolled { border-bottom-color: var(--gold-a); background: rgb(var(--rgb-paper) / .94); }
.nav-in {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: .6rem clamp(20px, 5vw, 48px);
  display: flex; align-items: center; gap: 1.2rem;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { width: 108px; height: 36px; }
.brand-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 500; color: var(--ink-p); white-space: nowrap; }
.nav-links { display: flex; gap: 1.35rem; margin-left: auto; }
.nav-links a {
  position: relative; font-size: .93rem; color: var(--charcoal); padding: .35rem 0;
  transition: color 180ms ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px;
  background: no-repeat center/100% 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' fill='none'%3E%3Cpath d='M0 4h16l3 3 4-6 3 5 3-2h31' stroke='%23127E7E' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 140ms var(--ease);
}
.nav-links a:hover { color: var(--ink-p); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-cta { margin-left: 0; }
@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .brand-name { font-size: .98rem; }
}
/* en pantallas angostas la marca se reduce al sello circular + wordmark (sin solaparse con el CTA) */
@media (max-width: 460px) {
  .brand-mark { width: 34px; height: 34px; object-fit: cover; object-position: left center; }
  .brand-name { font-size: .92rem; }
  .nav-in { gap: .6rem; padding-left: 16px; padding-right: 16px; }
  .nav-cta { padding: .65rem .95rem; }
}

/* ==========================================================================
   1 · HERO full-bleed cinematográfico
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 86vh; min-height: min(88svh, 760px); max-height: 900px;
  display: flex; align-items: flex-end;
  padding: clamp(80px, 14vh, 150px) 0 clamp(34px, 6vh, 62px);
}
.hero-media { position: absolute; inset: -2% 0 -6%; z-index: 0; will-change: transform; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; display: block; }
.hero-media img { object-fit: cover; object-position: 62% 46%; }
html.is-anim .hero-media img { animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.4%, -1.2%, 0); }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  /* El texto vive a la IZQUIERDA y las caras del perro y el gato a la DERECHA:
     la capa horizontal carga casi todo el peso (legibilidad) y la vertical apenas
     acompaña, para no apagar los animales. Medido con el texto oculto. */
  background:
    linear-gradient(180deg, rgb(var(--rgb-veil) / .14) 0%, rgb(var(--rgb-veil) / .34) 40%, rgb(var(--rgb-veil) / .82) 100%),
    linear-gradient(90deg, rgb(var(--rgb-veil) / .80) 0%, rgb(var(--rgb-veil) / .70) 34%,
                           rgb(var(--rgb-veil) / .34) 60%, rgb(var(--rgb-veil) / .06) 82%,
                           rgb(var(--rgb-veil) / 0) 100%);
}
.hero-in { position: relative; z-index: 2; color: var(--paper-hi); }
/* El dorado NO es texto: sobre la foto del hero el --gold-l medía 3,78:1 en su peor
   píxel (promedio 6,56), y subir el velo apaga al perro y al gato. El kicker va en
   blanco cálido y el color de marca queda donde le corresponde: el trazo de electro
   justo debajo, en azul petróleo. Misma regla en escritorio y en móvil. */
.hero-kicker {
  font-family: var(--serif); font-size: .84rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--paper-hi); margin: 0 0 .8rem;
  text-shadow: 0 1px 16px rgb(var(--rgb-veil) / .75), 0 1px 3px rgb(var(--rgb-veil) / .5);
}
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.5rem); max-width: 20ch; color: var(--paper-hi2); text-shadow: 0 2px 26px rgb(var(--rgb-veil) / .55); }
.hero-sub { margin: 1.1rem 0 0; max-width: 56ch; font-size: clamp(1rem, 1.6vw, 1.14rem); color: rgb(var(--rgb-paper-hi) / .95); text-shadow: 0 1px 18px rgb(var(--rgb-veil) / .6); }
.ecg-hero { margin: 1.4rem 0 1.7rem; max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
/* móvil: el velo se vuelve casi todo vertical para que se vean las caras del perro y el gato */
@media (max-width: 759px) {
  .hero-veil {
    /* la rampa sube justo ANTES del kicker (~29% de la altura) y deja limpio el
       primer 18%, que es donde asoman las orejas y los ojos. */
    background: linear-gradient(180deg, rgb(var(--rgb-veil) / .06) 0%, rgb(var(--rgb-veil) / .16) 15%,
                                        rgb(var(--rgb-veil) / .66) 26%, rgb(var(--rgb-veil) / .86) 46%,
                                        rgb(var(--rgb-veil) / .92) 70%, rgb(var(--rgb-veil) / .97) 100%);
  }
  .hero-media img { object-position: 54% 26%; }
  .hero { padding-top: clamp(70px, 12vh, 120px); }
  .hero h1 { font-size: clamp(2.15rem, 9vw, 2.9rem); }
  .hero-sub { font-size: 1rem; }
  .ecg-hero { margin: 1.1rem 0 1.3rem; }
}

/* ==========================================================================
   2 · BANDA ANSWER-FIRST
   ========================================================================== */
.band-af { background: var(--paper-2); padding: clamp(48px, 7vw, 84px) 0 clamp(20px, 3vw, 34px); }
.af-lead {
  font-size: clamp(1.35rem, 2.9vw, 2.1rem); line-height: 1.32; color: var(--ink-p);
  max-width: 34ch; margin: 0 0 1.4rem;
}
.af-prose { max-width: 62ch; color: var(--charcoal); margin: 0; }
.band-af .ecg { margin-bottom: 0; }

/* ==========================================================================
   3 · LA PROMESA  (única banda oscura)
   ========================================================================== */
.promesa { background: var(--ink-p); color: rgb(var(--rgb-paper) / .92); padding: clamp(60px, 9vw, 118px) 0 clamp(28px, 4vw, 44px); }
.promesa .kicker { color: var(--gold-l); }
.promesa-grid { display: grid; grid-template-columns: 55fr 45fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.promesa-frase { margin: 0 0 1.8rem; padding: 0; }
.promesa-frase p {
  font-size: clamp(1.7rem, 4.4vw, 3.1rem); line-height: 1.16; color: var(--paper);
  font-style: italic; margin: 0 0 .9rem;
}
.promesa-frase .hl { color: var(--gold-hi); font-style: italic; }
.promesa-fuente { font-family: var(--sans); font-size: .86rem; letter-spacing: .04em; color: rgb(var(--rgb-paper) / .66); font-style: normal; }
.promesa-copy > p { max-width: 54ch; }
.promesa-nota {
  border-left: 1px solid var(--gold-a); padding-left: .9rem;
  font-size: .92rem; color: rgb(var(--rgb-paper) / .7); margin: 1.6rem 0 1.9rem;
}
.promesa-foto { margin: 0; }
.promesa-foto .frame-gold { will-change: transform; }
.promesa-foto figcaption { margin-top: 1.3rem; font-size: .86rem; color: rgb(var(--rgb-paper) / .66); max-width: 34ch; }
.promesa .ecg { margin-bottom: 0; }

/* Marco de latón con offset */
.frame-gold { position: relative; isolation: isolate; }
.frame-gold::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border: 1px solid var(--gold-a); transform: translate(10px, 10px);
}
.frame-gold > img, .frame-gold > iframe { position: relative; z-index: 1; border: 1px solid rgb(var(--rgb-gold) / .5); }

@media (max-width: 899px) {
  .promesa-grid { grid-template-columns: 1fr; }
  .promesa-foto { max-width: 340px; }
}

/* ==========================================================================
   4 · SERVICIOS · tira de paneles que se expanden y comprimen a sus hermanos
   ========================================================================== */
/* La tira vive DENTRO del contenedor, como todo lo demás: estirarla de borde a borde
   la volvía una franja sin relación con la retícula. Ahora es un panel enmarcado por
   los cuatro lados con el filete dorado — el marco de su aviso, a propósito. */
.strip-hold {
  width: 100%; max-width: var(--maxw); margin: 0 auto 2rem;
  padding: 0 clamp(20px, 5vw, 48px);
}
.servicios .strip {
  --strip-h: clamp(430px, 54vw, 520px);
  display: flex; height: var(--strip-h);
  border: 1px solid var(--gold-a);
  background: var(--paper-2); overflow: hidden;
}
.panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  border-right: 1px solid var(--gold-a);
  contain: layout paint style;
  transition: flex-grow 280ms var(--ease);
}
.panel:last-child { border-right: 0; }
.panel-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms var(--ease);
}
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--rgb-veil) / .58) 0%, rgb(var(--rgb-veil) / 0) 27%,
                                      rgb(var(--rgb-veil) / 0) 38%, rgb(var(--rgb-veil) / .88) 100%);
}
/* Velo MUY contenido: el azul petróleo es trazo, no superficie. Con .34→.62 los seis
   paneles se volvían una franja teal monocroma de 1664×580 — exactamente el color
   «predominando» que el cliente no quiere. Ahora solo entinta lo justo para unificar
   fotos dispares; el peso de legibilidad lo carga el degradado inferior de .panel::after. */
.panel-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--rgb-pet) / .10) 0%, rgb(var(--rgb-veil) / .26) 100%);
  transition: opacity 280ms ease;
}
.panel-t {
  position: absolute; left: 16px; bottom: 20px; z-index: 3; margin: 0;
  width: max-content; max-width: min(300px, 66vw);
  transform-origin: 0 100%; transform: rotate(-90deg) translateY(100%);
  transition: transform 300ms var(--ease);
}
.panel-btn {
  background: none; border: 0; padding: .58rem .3rem; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.32rem); font-weight: 500;
  color: var(--paper-hi2); letter-spacing: .005em; text-shadow: 0 1px 14px rgb(var(--rgb-veil) / .5);
}
.panel-btn:active { transform: scale(.97); }
.panel-body {
  position: absolute; left: 16px; right: 16px; bottom: 20px; z-index: 3;
  width: min(300px, 70vw); pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 240ms ease 60ms, transform 280ms var(--ease) 60ms;
}
.panel-body p { color: rgb(var(--rgb-paper-hi2) / .94); font-size: .93rem; margin: 0 0 .9rem; }
.panel-cta {
  display: inline-block; font-size: .88rem; font-weight: 500; color: var(--gold-hi);
  border-bottom: 1px solid rgb(var(--rgb-gold-hi) / .45); padding-bottom: 2px;
  transition: border-color 180ms ease, color 180ms ease;
}
.panel-cta:hover { color: var(--gold-l); border-bottom-color: var(--gold-l); }

/* estado expandido (click / teclado) */
.panel.is-x, .panel:focus-within { flex-grow: 2.6; }
.panel.is-x .panel-veil, .panel:focus-within .panel-veil { opacity: .28; }
.panel.is-x .panel-img, .panel:focus-within .panel-img { transform: scale(1.06); }
.panel.is-x .panel-t, .panel:focus-within .panel-t { transform: rotate(0deg) translateY(calc(-1 * (var(--strip-h) - 108px))); }
.panel.is-x .panel-body, .panel:focus-within .panel-body { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
  .panel:hover { flex-grow: 2.6; }
  .panel:hover .panel-veil { opacity: .28; }
  .panel:hover .panel-img { transform: scale(1.06); }
  .panel:hover .panel-t { transform: rotate(0deg) translateY(calc(-1 * (var(--strip-h) - 108px))); }
  .panel:hover .panel-body { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .strip.hovering .panel { will-change: flex-grow; }
}
/* Panel 6 · pet shop — SUPERFICIE, no fotografía.
   Doctrina: jamás una foto inventada de las instalaciones del cliente. Aquí va la
   alternativa sancionada por el spec §7.4: superficie de papel + doble filete de
   latón + line-art de comedero + trazo de electro. */
.panel--tex { background: var(--paper-2); }
.panel--tex::after {
  background:
    repeating-linear-gradient(90deg, rgb(var(--rgb-gold) / .085) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg,  rgb(var(--rgb-gold) / .07)  0 1px, transparent 1px 7px);
}
.panel-tex { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.tex-frame {
  /* el arte se centra en la mitad SUPERIOR: el pie del panel queda libre para la copia
     expandida. Con `align-content:start` en un panel de 580px el dibujo quedaba pegado
     arriba y dejaba un vacío enorme en medio. */
  display: grid; justify-items: center; align-content: center; gap: 14px;
  width: 100%; height: 100%; padding: 18px 18px 34%;
  /* doble filete de latón: el marco de su aviso, ahora protagonista */
  border: 1px solid rgb(var(--rgb-gold) / .72);
  box-shadow: inset 0 0 0 5px rgb(var(--rgb-paper-2) / 1),
              inset 0 0 0 6px rgb(var(--rgb-gold) / .34);
}
.tex-bowl { width: min(132px, 62%); height: auto; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.tex-ecg  { width: min(160px, 76%); height: auto; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.panel--tex .panel-btn { color: var(--ink-p); text-shadow: none; }
.panel--tex .panel-body p { color: var(--charcoal); }
.panel--tex .panel-body p strong { color: var(--ink-p); }
.panel--tex .panel-cta { color: var(--pet-d); border-bottom-color: var(--gold-a); }
.panel--tex .panel-cta:hover { color: var(--ink-p); border-bottom-color: var(--gold); }

.strip-cierre { color: var(--charcoal); max-width: 60ch; }

/* Móvil: acordeón vertical por tap */
@media (max-width: 899px) {
  .servicios .strip { display: block; height: auto; border-bottom: 0; }
  .panel {
    border-right: 0; border-bottom: 1px solid var(--gold-a);
    min-height: 0; contain: none;
  }
  .panel-img { position: absolute; inset: 0; }
  /* En móvil la tira son seis bandas apiladas: si el velo fuera del petróleo VIVO,
     400px de pantalla se volverían azul. Va con el petróleo casi-negro (--rgb-veil),
     que lee como tinta y además sube el contraste del título blanco encima. */
  .panel-veil { background: linear-gradient(180deg, rgb(var(--rgb-veil) / .74) 0%, rgb(var(--rgb-veil) / .88) 100%); }
  .panel-t {
    position: relative; transform: none; left: 0; bottom: 0; width: 100%; max-width: none;
  }
  .panel-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: 66px; padding: 1.05rem clamp(20px, 5vw, 48px);
  }
  .panel-btn::after {
    content: ""; width: 11px; height: 11px; flex: 0 0 auto;
    border-right: 1.5px solid var(--gold-hi); border-bottom: 1.5px solid var(--gold-hi);
    transform: rotate(45deg) translateY(-2px); transition: transform 260ms var(--ease);
  }
  .panel.is-x .panel-btn::after { transform: rotate(225deg) translateY(-2px); }
  .panel-body {
    position: relative; left: 0; right: 0; bottom: 0; width: 100%;
    display: grid; grid-template-rows: 0fr; opacity: 0; transform: none;
    transition: grid-template-rows 300ms var(--ease), opacity 240ms ease;
  }
  .panel-body-in { overflow: hidden; padding: 0 clamp(20px, 5vw, 48px); }
  .panel.is-x .panel-body { grid-template-rows: 1fr; opacity: 1; }
  .panel.is-x .panel-body-in { padding-bottom: 1.4rem; }
  .panel.is-x .panel-t, .panel:focus-within .panel-t { transform: none; }
  .panel:focus-within .panel-body { opacity: 0; }
  .panel.is-x .panel-body { opacity: 1; }
  .panel.is-x, .panel:focus-within { flex-grow: 1; }
  .panel--tex .panel-tex { display: none; }
  .panel--tex { border-top: 1px solid var(--gold-a); }
}

/* ==========================================================================
   5 · LO QUE TE EXPLICAMOS · flip cards
   ========================================================================== */
.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 1023px) { .flips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 679px)  { .flips { grid-template-columns: 1fr; } }

.flip { position: relative; perspective: 1400px; min-height: 250px; }
@media (max-width: 679px) { .flip { min-height: 210px; } }
.flip-3d {
  display: grid; height: 100%;
  transform-style: preserve-3d;
  transition: transform 380ms var(--ease);
}
.flip.is-flip .flip-3d { transform: rotateY(180deg); }
.flip-face {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid var(--gold-a); background: var(--paper);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-back { background: var(--paper-2); transform: rotateY(180deg); }
.flip-num {
  font-family: var(--serif); font-size: .82rem; letter-spacing: .18em;
  color: var(--gold-t); margin-bottom: .9rem;
}
.flip-front h3 { font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink-p); }
.flip-back p { font-size: .93rem; color: var(--charcoal); margin: 0; }
.flip-hint {
  margin-top: auto; padding-top: 1.1rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-t);
}
.flip-btn {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: transform 140ms var(--ease);
}
.flip-btn:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-face { border-color: var(--gold); }
}

/* ==========================================================================
   6 · CIRUGÍA Y HOSPITALIZACIÓN
   ========================================================================== */
.cirugia-grid { display: grid; grid-template-columns: 60fr 40fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.cirugia-copy > p { max-width: 56ch; color: var(--charcoal); }
.honesto {
  margin-top: 2rem; padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--gold-a); background: rgb(var(--rgb-paper-2) / .6);
}
.honesto p { margin: 0; color: var(--ink); max-width: 52ch; }
.honesto .ecg { margin: 1.1rem 0 1.3rem; }
/* `minmax(0, 1fr)` y no `1fr`: los marcos de cf-2/cf-3 son `width:max-content`, así que
   con `1fr` (= minmax(auto,1fr)) su min-content ensanchaba la columna y la página
   desbordaba 80px a 390px de ancho. Medido y corregido. */
.cirugia-fotos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px) clamp(14px, 1.8vw, 22px); align-items: start;
}
.cf { margin: 0; min-width: 0; }
.cf-1 { grid-column: 1 / -1; }
.cf figcaption { margin-top: .9rem; font-size: .82rem; line-height: 1.45; color: var(--ash); }
.cf-2 .frame-gold, .cf-3 .frame-gold { width: max-content; max-width: 100%; }
.cf-2 img, .cf-3 img { max-height: 200px; width: auto; max-width: 100%; }
@media (max-width: 899px) {
  .cirugia-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-1 { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 560px) {
  .cirugia-fotos { grid-template-columns: minmax(0, 1fr); }
  .cf-2 img, .cf-3 img { max-height: 270px; }
}

/* ==========================================================================
   7 · PELUQUERÍA Y PET SHOP · filmstrip con scroll-snap
   ========================================================================== */
.peluqueria { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
/* El carrete también vive dentro del contenedor: el desbordamiento horizontal ocurre
   DENTRO de su caja, no de borde a borde de la pantalla. El sangrado de esta sección
   es la banda de color de fondo, que sí es una decisión. */
.film-wrap {
  position: relative;
  width: 100%; max-width: var(--maxw); margin: 0 auto 1.8rem;
  padding: 0 clamp(20px, 5vw, 48px);
}
.film {
  display: flex; gap: clamp(16px, 2.4vw, 30px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 0 22px;
  scrollbar-width: thin;
}
.film::-webkit-scrollbar { height: 6px; }
.film::-webkit-scrollbar-thumb { background: var(--gold-a); border-radius: 6px; }
.film-f { flex: 0 0 auto; width: clamp(272px, 30%, 420px); scroll-snap-align: center; margin: 0; }
.film-f figcaption { margin-top: 1rem; font-size: .86rem; color: var(--ash); }
.film-f img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 38%; }
.film-nav { display: flex; gap: .5rem; justify-content: flex-end; padding: .2rem clamp(20px, 5vw, 48px) 0; max-width: var(--maxw); margin: 0 auto; }
.film-b {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--gold-a); border-radius: 50%;
  color: var(--pet-d); cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 140ms var(--ease);
}
.film-b:hover { background: rgb(var(--rgb-gold) / .14); border-color: var(--gold); }
.film-b:active { transform: scale(.94); }
.film-b svg { width: 20px; height: 20px; }
.peluqueria .strip-cierre { padding-top: .4rem; }

/* ==========================================================================
   8 · LA REJA · banda full-bleed con parallax horizontal
   ÚNICO lugar del sitio donde vive la lavanda: la reja del mural ES lavanda.
   ========================================================================== */
.reja {
  position: relative; isolation: isolate; overflow: hidden;
  /* base lavanda-tinta: la foto de la reja carga en lazy y nunca destella papel */
  background: var(--lav);
  min-height: clamp(360px, 46vw, 520px);
  display: flex; align-items: flex-end;
  padding: clamp(60px, 10vw, 120px) 0 clamp(34px, 5vw, 56px);
}
.reja-media { position: absolute; top: 0; bottom: 0; left: -6%; width: 112%; z-index: 0; will-change: transform; }
.reja-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.reja-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgb(var(--rgb-lav-d) / .88) 0%, rgb(var(--rgb-lav-d) / .62) 42%, rgb(var(--rgb-lav-d) / .16) 100%);
}
.reja-in { position: relative; z-index: 2; color: var(--paper-hi); }
.reja-in h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 18ch; color: var(--paper-hi2); text-shadow: 0 2px 22px rgb(var(--rgb-lav-d) / .58); }
.reja-in p { margin-top: 1rem; max-width: 46ch; color: rgb(var(--rgb-paper-hi) / .94); text-shadow: 0 1px 16px rgb(var(--rgb-lav-d) / .62); }
.credito {
  font-family: var(--serif); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-l); margin: 1.3rem 0 0;
}

/* ==========================================================================
   9 · VISITA
   ========================================================================== */
.visita-grid { display: grid; grid-template-columns: 45fr 55fr; gap: clamp(28px, 5vw, 60px); align-items: stretch; }
.dato { display: grid; grid-template-columns: 108px 1fr; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--gold-a); margin: 0; }
.dato-l { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-t); padding-top: .2rem; }
.dato-v { color: var(--ink); }
.horario { list-style: none; margin: 0; padding: 0; }
.horario li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .28rem 0; color: var(--charcoal); max-width: 320px; }
.horario li.today { color: var(--ink-p); font-weight: 500; }
.horario li.today .hh { color: var(--pet-d); }
.abierto { grid-column: 2; display: flex; align-items: center; gap: .5rem; margin: .7rem 0 0; font-size: .88rem; color: var(--ash); }
@media (max-width: 899px) { .abierto { grid-column: 1; } }
.abierto .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ash); flex: 0 0 auto; }
.abierto.is-open .dot { background: var(--teal); }
.abierto.is-open .lbl { color: var(--charcoal); }
.abierto.is-closed .dot { background: var(--pet); }
.visita-cta { display: flex; flex-wrap: wrap; gap: .7rem; padding-top: 1.6rem; }
.visita .btn-ghost { color: var(--pet-d); }
.visita .btn-ghost:hover { color: var(--ink-p); }
.visita-mapa { height: 100%; }
.visita-mapa .frame-gold { height: 100%; min-height: clamp(320px, 42vw, 440px); }
.visita-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 899px) {
  .visita-grid { grid-template-columns: 1fr; }
  .dato { grid-template-columns: 1fr; gap: .3rem; }
}

/* ==========================================================================
   10 · FAQ
   ========================================================================== */
/* La sección de preguntas es el cierre del cuaderno: columna CENTRADA a propósito
   (el resto del sitio es de bandera a la izquierda), con el trazo de electro como eje.
   Las filas mantienen su contenido a la izquierda para que se lean como una lista. */
.faq .kicker, .faq .sec-title { text-align: center; }
.faq .sec-title { max-width: 30ch; margin-inline: auto; }
.faq .ecg-c { max-width: 380px; margin: 1.6rem auto 2.2rem; }
.faq-list { max-width: 62ch; margin-inline: auto; }
.faq-list summary { text-align: left; }
.faq-list details { border-top: 1px solid var(--gold-a); }
.faq-list details:last-child { border-bottom: 1px solid var(--gold-a); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.1rem .2rem; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-p);
  transition: color 180ms ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--pet); }
.faq-list .mk { flex: 0 0 auto; width: 60px; height: 24px; color: var(--teal); display: block; }
.faq-list .mk svg { width: 60px; height: 24px; }
.faq-list .mk path { stroke-dasharray: 92; stroke-dashoffset: 74; transition: stroke-dashoffset 420ms var(--ease); }
.faq-list summary:hover .mk path { stroke-dashoffset: 60; }
.faq-list details[open] .mk path { stroke-dashoffset: 0; }
.faq-list .faq-a { padding: 0 .2rem 1.3rem; }
.faq-list .faq-a p { margin: 0; color: var(--charcoal); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--ink-p-d); color: rgb(var(--rgb-paper) / .82); padding: clamp(46px, 6vw, 74px) 0 1.6rem; margin-top: clamp(50px, 7vw, 90px); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: clamp(24px, 4vw, 52px); }
.foot-mark { width: 156px; height: 52px; }
.foot-name { font-family: var(--serif); font-size: 1.2rem; color: var(--paper); margin: .8rem 0 .3rem; }
.foot-sub { font-size: .9rem; color: rgb(var(--rgb-paper) / .62); max-width: 30ch; }
.foot-h { font-family: var(--serif); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); margin: 0 0 .8rem; }
.foot-col p { font-size: .92rem; margin: 0 0 .7rem; }
.foot-cred { font-size: .82rem; color: rgb(var(--rgb-paper) / .58); }
.foot .lnk { color: var(--paper); text-decoration-color: rgb(var(--rgb-gold) / .6); }
.foot .lnk:hover { color: var(--gold-hi); }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  margin-top: clamp(28px, 4vw, 48px); padding-top: 1.3rem; border-top: 1px solid rgb(var(--rgb-gold) / .3);
  font-size: .86rem; color: rgb(var(--rgb-paper) / .6);
}
.foot-bar p { margin: 0; }
.foot-panoramic a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }
.foot-panoramic a:hover { color: var(--gold-hi); }
@media (max-width: 899px) { .foot-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAB
   ========================================================================== */
.fab {
  position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 70;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 50px; padding: .8rem 1.15rem;
  background: var(--pet); color: var(--paper-hi); border-radius: 3px;
  box-shadow: 0 14px 34px -14px rgb(var(--rgb-veil) / .6);
  transform: translateY(140%); opacity: 0;
  transition: transform 240ms var(--ease), opacity 240ms ease, background-color 180ms ease;
}
.fab::after {
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; bottom: 8px; height: 6px;
  background: no-repeat center/100% 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' fill='none'%3E%3Cpath d='M0 3h18l3 2.4 4-4.8 3 4 3-1.6h29' stroke='%233FA0A0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: .9;
}
.fab.show { transform: translateY(0); opacity: 1; }
.fab:hover { background: var(--pet-d); }
.fab:active { transform: translateY(0) scale(.97); }
.fab span { font-size: .95rem; font-weight: 500; }

/* ==========================================================================
   MODAL QR  (a prueba de fallos: display:none por defecto, respeta [hidden])
   ========================================================================== */
.wa-modal { display: none; position: fixed; inset: 0; z-index: 120; place-items: center; padding: 1.2rem; }
.wa-modal:not([hidden]) { display: grid; }
.wa-overlay { position: absolute; inset: 0; background: rgb(var(--rgb-veil) / .66); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.wa-card {
  position: relative; z-index: 1; width: min(408px, 94vw);
  background: var(--paper); color: var(--ink); border: 1px solid var(--gold-a);
  padding: 2rem 1.7rem 1.7rem; text-align: center;
  box-shadow: 0 44px 90px -34px rgb(var(--rgb-veil) / .6);
}
.wa-close { position: absolute; top: .5rem; right: .8rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--ash); }
.wa-close:hover { color: var(--ink-p); }
.wa-kicker { font-family: var(--serif); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-t); margin: 0 0 .5rem; }
.wa-card h3 { font-family: var(--serif); font-size: 1.42rem; color: var(--ink-p); margin: 0 0 .5rem; }
.wa-p { font-size: .9rem; color: var(--ash); margin: 0 0 1.2rem; }
.wa-qr { display: grid; place-items: center; padding: .9rem; background: #fff; border: 1px solid var(--gold-a); width: fit-content; margin: 0 auto 1.1rem; }
.wa-qr img { width: 184px; height: 184px; image-rendering: pixelated; }
.wa-num { font-family: var(--serif); font-size: 1.5rem; color: var(--ink-p); margin: 0 0 1.1rem; letter-spacing: .01em; user-select: all; }
.wa-b { width: 100%; justify-content: center; }
.wa-alt { display: inline-block; margin-top: .9rem; font-size: .86rem; color: var(--pet-d); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   REVEAL  (gated por .is-anim → sin JS todo visible)
   ========================================================================== */
html.is-anim [data-r="fade"] { opacity: 0; transform: translateY(20px); transition: opacity .68s var(--ease), transform .68s var(--ease); }
html.is-anim [data-r="fade"].in { opacity: 1; transform: none; }
/* `clip` = barrido de máscara izq→der, del mismo idioma que el trazo de electro
   (los divisores se dibujan de izquierda a derecha con esta misma curva).
   NO es un alias de `fade`: no toca opacity ni transform. */
html.is-anim [data-r="clip"] { clip-path: inset(0 100% 0 0); transition: clip-path .62s var(--ease); }
html.is-anim [data-r="clip"].in { clip-path: inset(0); }

/* ==========================================================================
   PREFERS-REDUCED-MOTION  (nada queda oculto)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.is-anim .curtain, .curtain { display: none !important; }
  html.is-anim [data-r] { opacity: 1 !important; transform: none !important; }
  html.is-anim [data-r="clip"] { clip-path: none !important; transition: none !important; }
  html.is-anim .hero-media img { animation: none !important; }
  html.is-anim .ecg .ecg-l, html.is-anim .ecg .ecg-r { transform: none !important; transition: none !important; }
  html.is-anim .ecg .ecg-svg path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  html.is-anim .latido { display: none !important; animation: none !important; }
  .faq-list .mk path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .flip-3d, .flip.is-flip .flip-3d { transform: none !important; transition: opacity 220ms ease; }
  .flip-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .flip-back { transform: none !important; opacity: 0; pointer-events: none; }
  .flip.is-flip .flip-front { opacity: 0; }
  .flip.is-flip .flip-back { opacity: 1; pointer-events: auto; }
  .flip-front, .flip-back { transition: opacity 220ms ease; }
  .panel { transition: none !important; }
  .panel-body { opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition: none !important; }
  .panel-img { transition: none !important; }
  .panel-t { transform: none !important; position: relative; left: 0; bottom: 0; width: 100%; max-width: none; transition: none !important; }
  .panel { flex-grow: 1 !important; }
  .servicios .strip { display: block; height: auto; }
  .panel-veil { opacity: .5; }
  .panel-body { position: relative; left: 0; right: 0; bottom: 0; width: 100%; padding: 0 clamp(20px,5vw,48px) 1.3rem; }
  .panel-btn { width: 100%; padding: 1rem clamp(20px,5vw,48px); }
  .film { scroll-behavior: auto; }
  .btn, .fab, .film-b, .flip-btn, .panel-btn { transition: none !important; }
  .btn:active, .fab:active, .film-b:active, .panel-btn:active { transform: none !important; }
  .fab { transform: none; opacity: 1; }
  .nav-links a::after { transition: none; }
}

/* ==========================================================================
   AJUSTES DE PANTALLA ANCHA
   No basta con ensanchar el contenedor: los topes de tipografía y las alturas
   fijas dejaban tarjetas diminutas perdidas en el ancho. Aquí crecen con él.
   ========================================================================== */
@media (min-width: 1500px) {
  .sec-title { font-size: clamp(2.4rem, 2.3vw, 3.4rem); }
  .af-lead { font-size: clamp(2rem, 2.1vw, 2.7rem); max-width: 38ch; }
  .af-prose { font-size: 1.06em; }
  .promesa-frase p { font-size: clamp(2.6rem, 2.7vw, 3.7rem); }
  .flip { min-height: 292px; }
  .flip-front h3 { font-size: clamp(1.2rem, 1.05vw, 1.5rem); }
  .flip-face { padding: 1.9rem 1.9rem 1.6rem; }
  .servicios .strip { --strip-h: clamp(500px, 27vw, 580px); }
  .panel-btn { font-size: clamp(1.24rem, 1vw, 1.5rem); }
  .panel-body { width: min(340px, 70%); }
  .cf-2 img, .cf-3 img { max-height: 250px; }
  .horario li { max-width: 380px; }
  .dato { grid-template-columns: 130px 1fr; }
  .visita-mapa .frame-gold { min-height: clamp(380px, 25vw, 520px); }
  .foot-mark { width: 184px; height: 61px; }
  .foot-col p { font-size: 1rem; }
  .brand-mark { width: 130px; height: 43px; }
  .brand-name { font-size: 1.18rem; }
  .nav-links { gap: 1.7rem; }
  .nav-links a { font-size: 1rem; }
}
@media (min-width: 1900px) {
  .hero h1 { font-size: clamp(4.5rem, 3.4vw, 5.6rem); }
  .hero-sub { font-size: 1.24rem; }
  .hero { max-height: 1040px; min-height: min(84svh, 880px); }
  .reja-in h2 { font-size: clamp(2.6rem, 2.4vw, 3.3rem); }
  .reja { min-height: clamp(520px, 28vw, 660px); }
  .faq-list summary { font-size: clamp(1.16rem, .95vw, 1.34rem); }
}

/* Nota de rendimiento: NO se usa content-visibility:auto en las secciones porque
   un subárbol sin layout falsea getBoundingClientRect() del barrido del reveal
   (riesgo de secciones invisibles). Se optimiza con lazy-loading, WebP y un solo rAF. */