/* ===========================================================================
   Unidad Odontológica Andina — "Editorial clínico luminoso · la luz del vidrio
   acanalado".  CSS a mano, sin framework.
   Paleta: hueso dominante · eucalipto PRIMARIO · una sola ancla petróleo.
   Firma de motion: banda de luz estriada que cruza una vez + arco que se traza.
   =========================================================================== */

/* ---------- Tipografía self-hosted (subset latin, variable) ---------- */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/bodoni-moda-latin.woff2?v=20260820) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/bodoni-moda-latin-italic.woff2?v=20260820) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/commissioner-latin.woff2?v=20260820) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --hueso: #F5F2EA;
  --clinico: #FCFBF8;
  --euca: #7C9483;
  --euca-deep: #5C7565;
  --euca-darker: #4B6154;
  --euca-wash: #E3EAE2;
  --euca-veil: #EDF1EA;
  --petrol: #124C5C;
  --petrol-deep: #0C333E;
  --petrol-light: #1A6478;
  --tinta: #1B2A2A;
  --muted: #4E5D57;
  --oro: #D4A231;
  --focus: #B07E12;

  --linea: rgba(27, 42, 42, .12);
  --linea-euca: rgba(124, 148, 131, .38);

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --texto: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --acanalado: repeating-linear-gradient(90deg,
      rgba(124, 148, 131, .13) 0 1px, rgba(124, 148, 131, 0) 1px 6px);
  --acanalado-claro: repeating-linear-gradient(90deg,
      rgba(245, 242, 234, .11) 0 1px, rgba(245, 242, 234, 0) 1px 6px);

  --luz: rgba(255, 255, 255, .82);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-squeeze: cubic-bezier(.22, .61, .36, 1);

  --pad: clamp(20px, 5vw, 68px);
  --maxw: min(92vw, 1240px);
  --nav-h: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip;
  /* raiz fluida: 16px hasta ~1620px de viewport y 18px a partir de 2560px,
     asi el cuerpo y la UI (todo en rem) escalan en monitores grandes */
  font-size: clamp(16px, 12.6px + 0.21vw, 18px);
}
body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;       /* >=17px siempre (raiz >=16px) */
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }   /* height:auto = no estirar */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
/* TIPOGRAFIA - regla de la casa tras el feedback del cliente:
   Bodoni Moda (didone de altisimo contraste) SOLO en display grande: h1, h2,
   h3.t y cifras destacadas, siempre >=28px y con peso >=500. Todo lo demas
   (h3/h4 pequenos, kickers, rotulos, chips, pies de foto, citas, numeros de
   panel, botones, nav) va en Commissioner. */
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 500; }
h3, h4 { font-family: var(--texto); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--petrol); color: var(--clinico);
  padding: .6rem 1rem; border-radius: 8px; transition: top 160ms var(--ease-out);
}
.skip:focus { top: 12px; }

/* ---------- Layout base ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sec { position: relative; padding: clamp(64px, 8.5vw, 118px) 0; }
.sec--hueso { background: var(--hueso); }
.sec--clinico { background: var(--clinico); }
.sec--wash { background: var(--euca-wash); }

.kicker {
  font-family: var(--texto); font-size: .9rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--euca-darker);
  margin: 0 0 .85rem;
}
.sec--wash .kicker, .sec--clinico .kicker { color: var(--euca-darker); }
h2.t {
  font-size: clamp(1.9rem, 4.3vw, 3.05rem);
  line-height: 1.04; letter-spacing: -.014em; max-width: 22em;
}
h3.t {                                   /* display: Bodoni permitido (>=28px/500) */
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -.01em;
}
.lede { font-size: clamp(1.02rem, 1.35vw, 1.14rem); color: var(--muted); max-width: 34em; }

/* Divisor de vidrio acanalado (franja de 14px) */
.div-acanalado {
  height: 14px; background-image: var(--acanalado);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---------- Arco de marca: la LÍNEA DE SONRISA del hero ----------
   Única pieza trazada del sitio (una nota de autor, no un divisor de relleno).
   Se retiró de los 7 paneles del acordeón, de la cita de la promesa y del
   encabezado de #casos para NO colisionar con «el trazo que no se detiene»
   de sites/manuelita-pets (mismo mecanismo stroke-dashoffset, y los dos
   negocios están a tres puertas en la misma calle).                        */
.arco { width: clamp(120px, 20vw, 230px); height: 20px; overflow: visible; }
.arco path {
  fill: none; stroke: var(--euca); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 260; stroke-dashoffset: 0;
}
html.is-anim .arco path { stroke-dashoffset: 260; transition: stroke-dashoffset .62s var(--ease-out) .12s; }
html.is-anim [data-r].in .arco path,
html.is-anim .arco.in path { stroke-dashoffset: 0; }
.arco--claro path { stroke: rgba(245, 242, 234, .72); }

/* ---------- Firma de motion: la LUZ del vidrio acanalado ---------- */
.luz {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  contain: paint; z-index: 2;
}
.luz i {
  position: absolute; top: -10%; left: 0; height: 120%; width: 46%;
  transform: translate3d(-130%, 0, 0);
  background-image:
    repeating-linear-gradient(90deg, var(--luz) 0 1.1px, rgba(255, 255, 255, 0) 1.1px 6px),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  opacity: .0;
}
html.is-anim [data-r].in > .luz i,
html.is-anim .in > .luz i { animation: luzSweep .95s var(--ease-out) .1s forwards; }
@keyframes luzSweep {
  0%   { transform: translate3d(-130%, 0, 0); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(230%, 0, 0); opacity: 0; }
}

/* ---------- Botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; min-height: 48px; padding: .78rem 1.35rem;
  font-family: var(--texto); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: transform 150ms var(--ease-out), background-color 200ms ease, color 200ms ease,
              border-color 200ms ease;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--euca-darker);
  transform: translate3d(-101%, 0, 0); transition: transform 0s;
}
.btn:active { transform: scale(.972); }
.btn--solid { background: var(--euca-deep); color: var(--clinico); }
.btn--solid:hover::before { transform: translate3d(0, 0, 0); transition: transform 200ms var(--ease-out); }
.btn--line {
  background: transparent; color: var(--tinta); border-color: rgba(27, 42, 42, .5);
}
.btn--line:hover { border-color: var(--euca-deep); background: rgba(124, 148, 131, .1); }
.btn--onDark { background: var(--clinico); color: var(--petrol-deep); }
.btn--onDark::before { background: var(--euca-wash); }
.btn--onDark:hover::before { transform: translate3d(0, 0, 0); transition: transform 200ms var(--ease-out); }
.btn--ghostDark {
  background: transparent; color: var(--clinico); border-color: rgba(245, 242, 234, .4);
}
.btn--ghostDark:hover { background: rgba(245, 242, 234, .12); border-color: rgba(245, 242, 234, .7); }
.btn--sm { min-height: 42px; padding: .58rem 1.1rem; font-size: .92rem; }

.link-euca {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: 1rem; color: var(--euca-darker);
  border-bottom: 1px solid var(--linea-euca); padding-bottom: 2px;
  transition: border-color 180ms ease, color 180ms ease;
}
.link-euca:hover { color: var(--petrol); border-color: var(--petrol); }
.link-euca span { transition: transform 200ms var(--ease-out); }
.link-euca:hover span { transform: translateX(4px); }

/* ---------- Diente (marca recreada en SVG) ---------- */
.diente { width: 26px; height: 26px; color: var(--euca-deep); flex: 0 0 auto; }
.diente svg { width: 100%; height: 100%; fill: currentColor; }

/* ===========================================================================
   NAV
   =========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.nav.scrolled {
  background: rgba(245, 242, 234, .94);   /* SIN backdrop-filter (jank del hero) */
  border-bottom-color: var(--linea-euca);
}
.nav__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  height: var(--nav-h); display: flex; align-items: center; gap: 1.2rem;
}
.marca { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.marca .diente { color: var(--clinico); transition: color 260ms ease; }
.nav.scrolled .marca .diente { color: var(--euca-deep); }
.marca__txt {
  font-family: var(--texto); font-size: .8rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.25;
  color: var(--clinico); transition: color 260ms ease;
  text-shadow: 0 1px 10px rgba(12, 51, 62, .5);
}
.nav.scrolled .marca__txt { color: var(--tinta); text-shadow: none; }
.marca__txt b { display: block; font-weight: 600; }
.marca__txt i { font-style: normal; font-weight: 400; opacity: .78; letter-spacing: .13em; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; }
.nav__links a {
  font-size: .95rem; font-weight: 500; color: var(--clinico);
  text-shadow: 0 1px 10px rgba(12, 51, 62, .5);
  padding: .3rem 0; border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 200ms ease;
}
.nav.scrolled .nav__links a { color: var(--tinta); text-shadow: none; }
.nav__links a:hover { border-bottom-color: var(--euca); }
.nav .btn--solid { background: var(--euca-deep); }

.hamb {
  display: none; width: 44px; height: 44px; background: none; border: 0;
  cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 5px;
}
.hamb span {
  display: block; height: 1.5px; background: var(--clinico); border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 160ms ease, background-color 260ms ease;
}
.nav.scrolled .hamb span { background: var(--tinta); }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú móvil — patrón A PRUEBA DE FALLOS: oculto por defecto, visible solo sin [hidden] */
.mobile-menu {
  display: none;
  flex-direction: column; gap: .1rem;
  padding: .8rem var(--pad) 1.4rem;
  background: var(--hueso); border-bottom: 1px solid var(--linea-euca);
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu a { padding: .8rem 0; font-weight: 500; border-bottom: 1px solid var(--linea); }
.mobile-menu .btn { margin-top: .9rem; }

/* ===========================================================================
   CORTINILLA de vidrio acanalado (failsafe: estado base = ABIERTA)
   =========================================================================== */
.cortina { display: none; }
html.has-cortina .cortina {
  display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none;
}
.cortina i {
  position: absolute; top: 0; bottom: 0; width: 50.6%;
  background-color: var(--hueso);
  background-image: var(--acanalado),
    linear-gradient(180deg, rgba(124, 148, 131, .16), rgba(245, 242, 234, 0) 60%);
  will-change: transform;
}
.cortina i:first-child {
  left: 0; transform: translate3d(-101%, 0, 0);
  box-shadow: 6px 0 26px rgba(12, 51, 62, .1);
  animation: cortinaL .56s cubic-bezier(.62, .04, .3, 1) .06s both;
}
.cortina i:last-child {
  right: 0; transform: translate3d(101%, 0, 0);
  box-shadow: -6px 0 26px rgba(12, 51, 62, .1);
  animation: cortinaR .56s cubic-bezier(.62, .04, .3, 1) .06s both;
}
@keyframes cortinaL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-101%, 0, 0); } }
@keyframes cortinaR { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(101%, 0, 0); } }

/* ===========================================================================
   7.1 HERO — full-bleed cinematográfico
   =========================================================================== */
.hero {
  position: relative; min-height: clamp(600px, 100svh, 1020px);
  display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  background: var(--petrol-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 46% 52%;
  transform: scale(1.02);
}
html.is-anim .hero__media img { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.4%, -1%, 0); }
}
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(12, 51, 62, .95) 0%, rgba(12, 51, 62, .84) 32%,
      rgba(18, 76, 92, .52) 66%, rgba(18, 76, 92, .34) 100%),
    linear-gradient(180deg, rgba(12, 51, 62, .55) 0%, rgba(12, 51, 62, .12) 20%,
      rgba(12, 51, 62, .50) 44%, rgba(12, 51, 62, .78) 70%, rgba(12, 51, 62, .9) 100%),
    linear-gradient(255deg, rgba(226, 189, 128, .13) 0%, rgba(226, 189, 128, 0) 44%);
}
@media (max-width: 900px) {
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(12, 51, 62, .7) 0%, rgba(12, 51, 62, .6) 16%,
        rgba(12, 51, 62, .8) 34%, rgba(12, 51, 62, .9) 60%, rgba(12, 51, 62, .94) 100%),
      linear-gradient(96deg, rgba(12, 51, 62, .42) 0%, rgba(18, 76, 92, .3) 60%,
        rgba(18, 76, 92, .24) 100%),
      linear-gradient(255deg, rgba(226, 189, 128, .11) 0%, rgba(226, 189, 128, 0) 50%);
  }
}
.hero__estrias {
  position: absolute; inset: 0; z-index: 1; background-image: var(--acanalado-claro);
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 62%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 34%, #000 62%, #000 100%);
}
.hero__in {
  position: relative; z-index: 3; width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: calc(var(--nav-h) + 4.4rem) var(--pad) clamp(2.6rem, 6vh, 4.6rem);
}
.hero__kicker {
  font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #DCE8DD; margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(2.45rem, 6.6vw, 5rem); line-height: .98; letter-spacing: -.022em;
  color: var(--hueso); font-weight: 500; max-width: 14.5em;
  text-shadow: 0 2px 30px rgba(12, 51, 62, .5);
}
.hero__arco { margin: .9rem 0 1.35rem; }
.hero__lede {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: rgba(245, 242, 234, .9);
  max-width: 33em; margin-bottom: 1.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1.3rem; }
.hero__cta .btn--solid { box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .55); }
.hero__micro {
  font-size: .95rem; color: rgba(245, 242, 234, .9); margin: 0;
  display: flex; flex-wrap: wrap; gap: .2rem .6rem;
}
.hero__micro span { white-space: nowrap; }

/* Sello de Google (señal puntual, NUNCA un tile de banda de métricas) */
.sello-google {
  display: inline-flex; align-items: center; gap: .48rem;
  padding: .42rem .82rem .42rem .68rem; margin-bottom: 1.35rem;
  background: rgba(252, 251, 248, .95); border-radius: 999px;
  font-size: .95rem; font-weight: 500; color: var(--tinta);
  box-shadow: 0 8px 26px rgba(12, 51, 62, .22);
}
.sello-google__ico { width: 17px; height: 17px; fill: var(--oro); flex: 0 0 auto; }
html.is-anim .in .sello-google__ico { animation: destello 900ms var(--ease-out) .5s 1; }
@keyframes destello {
  0%, 100% { transform: scale(1); opacity: 1; }
  38% { transform: scale(1.26); opacity: .82; }
}
.sello-google__nota { font-weight: 600; }

/* ===========================================================================
   7.2 BANDA ANSWER-FIRST — la ÚNICA banda petróleo de contenido
   =========================================================================== */
.banda-af {
  --focus: #E7B84A;
  position: relative; background: var(--petrol); color: var(--hueso);
  padding: clamp(58px, 7.5vw, 96px) 0; overflow: hidden; isolation: isolate;
  --luz: rgba(245, 242, 234, .5);
}
.banda-af::before {
  content: ''; position: absolute; inset: 0; background-image: var(--acanalado-claro);
  opacity: .9;
}
.banda-af__in { position: relative; z-index: 3; text-align: center; }
.banda-af p.frase-af {                   /* <900px: sans, la didone se rompe a este tamano */
  font-family: var(--texto); font-weight: 500;
  font-size: clamp(1.16rem, 2.3vw, 1.5rem); line-height: 1.45; letter-spacing: 0;
  max-width: 32em; margin: 0 auto 1.1rem; color: var(--clinico);
}
@media (min-width: 900px) {               /* >=900px: Bodoni, nunca por debajo de 28px */
  .banda-af p.frase-af {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.78rem, 2.9vw, 2.5rem); line-height: 1.24; letter-spacing: -.01em;
    max-width: 26em;
  }
}
.banda-af__datos {
  font-size: .95rem; color: rgba(245, 242, 234, .9); margin: 0;
  display: flex; flex-wrap: wrap; gap: .2rem .7rem; justify-content: center;
}
.banda-af__datos a { border-bottom: 1px solid rgba(245, 242, 234, .34); }
.banda-af__datos a:hover { border-bottom-color: var(--clinico); }

/* ===========================================================================
   7.3 LA PROMESA — split editorial, retrato que rompe el borde
   =========================================================================== */
.promesa__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.4rem);
  align-items: center;
}
.promesa__txt h2.t { margin-bottom: 1.2rem; }
.promesa__txt p { max-width: 34em; }
.promesa__cierre { font-size: 1.02rem; }
.promesa__cierre b { font-weight: 600; }
.frase {
  margin: 1.6rem 0; padding: 0 0 0 1.15rem;
  border-left: 2px solid var(--euca);
}
.frase blockquote {
  margin: 0; font-family: var(--texto); font-style: normal; font-weight: 500;
  font-size: clamp(1.12rem, 1.9vw, 1.36rem); line-height: 1.44; color: var(--petrol);
}
.frase__autoria {
  display: block; margin-top: .55rem; font-family: var(--texto);
  font-size: .9rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.promesa__foto { position: relative; }
.promesa__foto figure { margin: 0; position: relative; }
.promesa__foto img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 3px 3px 0 0;
}
.promesa__foto figcaption {
  margin-top: .7rem; font-size: .95rem; color: var(--muted); max-width: 26em;
}
.promesa__foto::after {                    /* estrías del vidrio sobre el borde interno */
  content: ''; position: absolute; left: -18px; top: 8%; bottom: 8%; width: 12px;
  background-image: var(--acanalado);
}
@media (min-width: 1024px) {
  .promesa__foto { margin-right: calc(var(--pad) * -1 - 7vw); }  /* rompe el borde derecho */
  .promesa__foto img { aspect-ratio: 3 / 4.15; }
}

/* ===========================================================================
   7.4 TRATAMIENTOS — acordeón horizontal (se expande, comprime a los hermanos)
   =========================================================================== */
.trat__head { display: flex; flex-direction: column; gap: .2rem; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.trat__head .lede { margin-top: .9rem; }

.acc {
  --acc-h: min(70vh, clamp(500px, 26vw, 640px));
  display: flex; gap: 6px; height: var(--acc-h);
  contain: layout paint style;
}
.panel {
  position: relative; flex: var(--g, 1) 1 0; min-width: 0;
  background: var(--euca-wash);
  background-image: var(--acanalado);
  border: 1px solid rgba(124, 148, 131, .3); border-radius: 4px;
  overflow: hidden; isolation: isolate;
  transition: flex-grow 280ms var(--ease-squeeze), background-color 280ms ease,
              border-color 280ms ease;
}
.panel.is-open { background: var(--clinico); background-image: none; border-color: var(--euca); }
.panel__h { margin: 0; font-family: var(--texto); }
/* Fondo de tratamiento (imagen generada) + velo del sistema: atmosfera, nunca
   protagonista. El velo mantiene el texto sobre ~#FCFBF8 opaco (AA intacto). */
.panel__bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
  opacity: .14; transform: scale(1.05);   /* cerrado: apenas un rastro de textura */
  transition: opacity 460ms var(--ease-out), transform 900ms var(--ease-out);
}
.panel.is-open .panel__bg { opacity: 1; transform: scale(1); }
.panel__velo {
  position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  transition: opacity 460ms var(--ease-out);
  background:
    linear-gradient(100deg, rgba(252, 251, 248, .945) 0%, rgba(252, 251, 248, .905) 54%,
      rgba(252, 251, 248, .62) 76%, rgba(237, 241, 234, .34) 100%),
    var(--acanalado);
}
.panel.is-open .panel__velo { opacity: 1; }

/* barrido de luz corto al abrir el panel (one-shot, sin rebote al salir) */
.panel > .luz i { transform: translate3d(-130%, 0, 0); opacity: 1; animation: none; transition: transform 0s; }
.panel.is-open > .luz i { transform: translate3d(230%, 0, 0); transition: transform 420ms var(--ease-out); }
.panel__btn {
  position: absolute; inset: 0; z-index: 3; width: 100%;
  display: block; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.1rem .85rem;
}
.panel__btn:focus-visible { outline-offset: -4px; }
.panel__num {
  position: absolute; top: .85rem; left: 0; right: 0;
  font-family: var(--texto); font-size: .95rem; font-weight: 600; letter-spacing: .08em;
  color: var(--euca-darker); text-align: center;
  transition: color 240ms ease, opacity 240ms ease;
}
.panel.is-open .panel__num { text-align: left; left: 1.6rem; right: auto; color: var(--euca-deep); }
.panel__rot {
  position: absolute; left: 50%; top: 3.4rem; bottom: 1rem;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 200ms ease;
}
.panel.is-open .panel__rot { opacity: 0; pointer-events: none; }

.panel__body {
  position: absolute; z-index: 4; left: 1.6rem; top: 3.2rem;
  width: min(var(--w-open, 300px), 27em); max-width: calc(100vw - 3.4rem);
  padding-right: 1.4rem; padding-bottom: 1rem;
  pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity 200ms ease 40ms, transform 240ms var(--ease-out) 40ms;
  max-height: calc(var(--acc-h) - 4.4rem); overflow: auto;
  overscroll-behavior: contain;
}
.panel.is-open .panel__body { opacity: 1; transform: none; }
.panel__body a, .panel__body button { pointer-events: auto; }
.panel__body .panel__tit {
  font-family: var(--texto); font-size: clamp(1.1rem, 1.5vw, 1.24rem); font-weight: 600;
  line-height: 1.26; letter-spacing: 0; margin: 0 0 .45rem; color: var(--petrol);
}
.panel__body .para { margin-bottom: .8rem; }
.panel__body .para > b {
  display: block; font-family: var(--texto); font-size: .88rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--euca-darker);
  margin-bottom: .2rem;
}
.panel__body p { font-size: 1.02rem; margin: 0; }
.panel__body .btn { margin-top: .5rem; }

/* Móvil / táctil: acordeón vertical por tap */
@media (max-width: 1023px) {
  .acc { flex-direction: column; height: auto; gap: 8px; }
  .panel { flex: 0 0 auto; }
  .panel__btn { position: relative; inset: auto; padding: 1.05rem 3rem 1.05rem 1.1rem; }
  .panel__num { position: static; display: inline-block; text-align: left; margin-right: .6rem; }
  .panel.is-open .panel__num { left: auto; }
  .panel__rot {
    position: static; transform: none; writing-mode: horizontal-tb;
    display: inline; white-space: normal; letter-spacing: .05em;
  }
  .panel.is-open .panel__rot { opacity: 1; pointer-events: auto; }
  .panel__btn::after {
    content: ''; position: absolute; right: 1.2rem; top: 50%; width: 9px; height: 9px;
    border-right: 1.6px solid var(--euca-darker); border-bottom: 1.6px solid var(--euca-darker);
    transform: translateY(-70%) rotate(45deg); transition: transform 240ms var(--ease-out);
  }
  .panel.is-open .panel__btn::after { transform: translateY(-30%) rotate(225deg); }
  .panel__wrap {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 280ms var(--ease-squeeze);
  }
  .panel.is-open .panel__wrap { grid-template-rows: 1fr; }
  .panel__body {
    position: static; width: auto; max-width: none; opacity: 1; transform: none;
    overflow: hidden; min-height: 0; max-height: none;
    padding: 0 1.2rem 0; transition: none;
  }
  .panel.is-open .panel__body { padding-bottom: 1.3rem; }
  .panel__body .panel__tit { display: none; }            /* el rótulo ya está en el botón */
  /* en vertical el fondo va parejo: velo plano que conserva el contraste AA */
  .panel__velo {
    background: linear-gradient(180deg, rgba(252, 251, 248, .96), rgba(252, 251, 248, .93)),
      var(--acanalado);
  }
  .panel__bg { object-position: 50% 44%; }
}

/* ===========================================================================
   7.5 CASO REAL — antes en gris / después a color, revelado con el puntero
   =========================================================================== */
.caso { --x: 50%; position: relative; z-index: 1; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }
.caso__head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* Ambiente de la seccion: una de las imagenes de tratamiento, muy desvanecida */
#casos { overflow: hidden; isolation: isolate; }
.casos__fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.casos__fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.casos__fondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(252, 251, 248, .975) 0%, rgba(252, 251, 248, .915) 46%,
      rgba(237, 241, 234, .95) 100%),
    var(--acanalado);
}

/* Marco profesional del revelado: passe-partout con filete y esquinas minimas */
.caso__reveal {
  padding: clamp(.7rem, 1.1vw, 1.05rem);
  background: var(--clinico); border: 1px solid var(--linea-euca); border-radius: 8px;
  box-shadow: 0 30px 70px -40px rgba(12, 51, 62, .5);
}

/* Dos columnas en escritorio: el revelado a un lado, el texto del caso al otro */
@media (min-width: 1100px) {
  .caso {
    display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .96fr);
    column-gap: clamp(2.2rem, 4vw, 4.4rem); align-items: start;
  }
  .caso__head { grid-column: 1 / -1; }
  .caso__reveal { grid-column: 1; }
  .caso__texto { grid-column: 2; position: sticky; top: calc(var(--nav-h) + 26px); }
  .caso2 { grid-column: 1 / -1; }
  .caso__texto .caso__etiqueta { margin-top: 0; padding-top: 0; border-top: 0; }
}
.caso__card {
  position: relative; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 4px; border: 1px solid rgba(124, 148, 131, .5);
  background: var(--euca-wash); cursor: ew-resize; touch-action: pan-y;
}
.caso__card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
.caso__img--antes { filter: grayscale(1) contrast(1.05); }
.caso__img--despues { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.caso__div {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px;
  background: var(--euca); transform: translateX(-1px); z-index: 4;
  box-shadow: 0 0 0 1px rgba(252, 251, 248, .5);
}
.caso__handle {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%, -50%) scale(1);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--clinico); border: 1.5px solid var(--euca);
  box-shadow: 0 8px 22px rgba(12, 51, 62, .3);
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.caso__card.is-grab .caso__handle {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 10px 28px rgba(12, 51, 62, .38);
}
.caso__handle .diente { width: 17px; height: 17px; color: var(--euca-deep); }
.caso__handle::before, .caso__handle::after {
  content: ''; position: absolute; top: 50%; width: 5px; height: 5px;
  border-top: 1.4px solid var(--euca-deep); border-right: 1.4px solid var(--euca-deep);
}
.caso__handle::before { left: 7px; transform: translateY(-50%) rotate(-135deg); }
.caso__handle::after { right: 7px; transform: translateY(-50%) rotate(45deg); }
.caso__tag {
  position: absolute; bottom: .85rem; z-index: 3;
  font-size: .9rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .34rem .72rem; border-radius: 999px;
  background: rgba(12, 51, 62, .88); color: var(--hueso);
  transition: opacity 220ms ease;
}
.caso__tag--d { left: .85rem; }
.caso__tag--a { right: .85rem; }
.caso__card.borde-izq .caso__tag--d,
.caso__card.borde-der .caso__tag--a { opacity: 0; }
.caso__rango { display: block; margin: 1.15rem 0 0; }
.caso__rango input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px;
  background: transparent; cursor: ew-resize; margin: 0;
}
.caso__rango input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--euca) 0 var(--x), rgba(27, 42, 42, .16) var(--x) 100%);
}
.caso__rango input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px; background: rgba(27, 42, 42, .16);
}
.caso__rango input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--euca);
}
.caso__rango input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--clinico); border: 1.5px solid var(--euca-deep);
  box-shadow: 0 2px 8px rgba(12, 51, 62, .25);
}
.caso__rango input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--euca-deep);
  background: var(--clinico);
}
.caso__rango input[type="range"]:focus-visible { outline-offset: 6px; }
.caso__pista {
  display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase; margin-top: .1rem;
}
.caso__etiqueta {
  margin: 1.5rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--linea);
}
.caso__etiqueta p:first-child { font-weight: 600; font-size: 1.02rem; margin-bottom: .5rem; }
.caso__etiqueta .frase { margin: 1rem 0 1.1rem; }
.caso__nota { font-size: .95rem; color: var(--muted); margin-top: 1rem; }
.caso__cta { margin-top: .8rem; }
.caso__toggle { display: none; }

/* --- Caso 2: par rotulado por la clínica (sin slider: no es la misma toma) --- */
.caso2 {
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.caso2__t { font-size: clamp(1.12rem, 2vw, 1.32rem); line-height: 1.32; margin-bottom: 1rem; }
.caso2__par { display: grid; gap: .6rem; }
@media (min-width: 760px) { .caso2__par { grid-template-columns: 1fr 1fr; gap: .8rem; } }
@media (min-width: 1100px) {
  .caso2 {
    display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .96fr);
    column-gap: clamp(2.2rem, 4vw, 4.4rem); align-items: start;
  }
  .caso2__t { grid-column: 1 / -1; }
  .caso2__par { grid-column: 1; }
  .caso2__meta { grid-column: 2; }
  .caso2__label { margin-top: 0; }
}
.caso2__mitad {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--linea-euca); background: var(--euca-wash);
  box-shadow: 0 18px 44px -30px rgba(12, 51, 62, .45);
}
.caso2__mitad img { width: 100%; height: auto; }
.caso2__mitad figcaption {
  position: absolute; bottom: .6rem; left: .6rem; z-index: 2;
  font-size: .9rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .34rem .72rem; border-radius: 999px;
  background: rgba(12, 51, 62, .88); color: var(--hueso);
}
.caso2__label { font-weight: 600; font-size: 1.02rem; margin-top: .9rem; }
.caso2__aviso { font-size: .95rem; color: var(--muted); margin-top: .4rem; }

/* --- Procedencia: de dónde salen las fotos y que cada caso es otra paciente --- */
.caso__proc {
  margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
  padding: .95rem 1.1rem; border-radius: 12px;
  border: 1px solid var(--linea-euca); border-left: 3px solid var(--euca);
  background: var(--euca-wash); font-size: 1rem; line-height: 1.62;
}

/* ===========================================================================
   7.6 TU PRIMERA CITA — 4 pasos enhebrados por la BANDA DE LUZ ACANALADA
   =========================================================================== */
.cita__head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 40em; }
.hilo { position: relative; }

/* La espina NO se dibuja con stroke-dashoffset (eso es de manuelita-pets):
   es una BANDA DE VIDRIO ACANALADO de 14px —la textura propia de esta clínica,
   los paneles que separan sus cubículos— que entra desde la izquierda y va
   ENCENDIENDO paso por paso. Estado base = banda completa y visible; la
   animación solo existe bajo html.is-anim, así que sin JS no se oculta nada. */
.hilo__banda {
  position: absolute; left: 0; right: 0; top: 30px; height: 14px; z-index: 0;
  overflow: hidden; pointer-events: none; contain: paint;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hilo__banda i {
  position: absolute; inset: 0; display: block;
  /* estrías propias (más marcadas que --acanalado, que es de fondo) + carril
     de apoyo + hairline eucalipto al pie: así la banda lee como espina y no
     como ruido del fondo */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(92, 117, 101, .42) 0 1px, rgba(124, 148, 131, 0) 1px 5px),
    linear-gradient(180deg, rgba(124, 148, 131, 0) 0 11px, var(--euca) 11px 12px, rgba(124, 148, 131, 0) 12px),
    linear-gradient(90deg, rgba(124, 148, 131, .22), rgba(124, 148, 131, .12));
  transform: translate3d(0, 0, 0);
}
/* la cabeza de luz viaja con la banda: la estría se enciende al pasar */
.hilo__banda i::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 90px;
  background-image:
    repeating-linear-gradient(90deg, var(--luz) 0 1.1px, rgba(255, 255, 255, 0) 1.1px 6px),
    linear-gradient(90deg, rgba(124, 148, 131, 0), rgba(124, 148, 131, .55));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
  opacity: 0;
}
html.is-anim .hilo__banda i { transform: translate3d(-101%, 0, 0); transition: transform 1.05s var(--ease-out) .12s; }
html.is-anim .hilo.in .hilo__banda i { transform: translate3d(0, 0, 0); }
html.is-anim .hilo.in .hilo__banda i::after { animation: bandaCabeza 1.05s var(--ease-out) .12s forwards; }
@keyframes bandaCabeza {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}
.pasos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
/* Cada paso se enciende cuando la banda llega a él (stagger = posición en el eje) */
html.is-anim .hilo .paso { opacity: .999; }
html.is-anim .hilo .paso__n { color: var(--linea-euca); transition: color .42s var(--ease-out); }
html.is-anim .hilo.in .paso__n { color: var(--petrol); }
html.is-anim .hilo.in .paso:nth-child(1) .paso__n { transition-delay: .16s; }
html.is-anim .hilo.in .paso:nth-child(2) .paso__n { transition-delay: .42s; }
html.is-anim .hilo.in .paso:nth-child(3) .paso__n { transition-delay: .68s; }
html.is-anim .hilo.in .paso:nth-child(4) .paso__n { transition-delay: .94s; }
.paso__n {
  font-family: var(--display); font-size: clamp(2.6rem, 4.4vw, 3.5rem); font-weight: 500;
  line-height: 1; color: var(--petrol); display: block; margin-bottom: .5rem;
}
.paso h3 {
  font-family: var(--texto); font-size: 1.08rem; font-weight: 600; line-height: 1.32;
  margin-bottom: .45rem; letter-spacing: 0;
}
.paso p { font-size: 1rem; color: var(--muted); margin: 0; }
.paso p b { color: var(--tinta); font-weight: 600; }
.cita__cierre { margin-top: clamp(2rem, 4vw, 3rem); }

/* ===========================================================================
   7.7 POR DENTRO — mosaico asimétrico (4 col × 3 filas = 12 celdas exactas)
   =========================================================================== */
.mosaico__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
@media (min-width: 1100px) {              /* título y ambiente en dos columnas */
  .mosaico__head {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    column-gap: clamp(2.2rem, 4vw, 4.4rem); align-items: end;
  }
  .mosaico__head .lede { max-width: none !important; }
}
.mosaico {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(160px, 13.5vw, 250px); gap: 10px;
}
.celda {
  position: relative; overflow: hidden; border-radius: 4px; margin: 0;
  background: var(--euca-wash); isolation: isolate;
  --luz: rgba(255, 255, 255, .9);
}
.celda img {
  position: absolute; left: 0; top: -6%; width: 100%; height: 112%;
  object-fit: cover; will-change: transform;
}
.celda--a { grid-column: span 2; grid-row: span 2; }
.celda--b { grid-column: span 2; }
.celda--e { grid-column: span 2; }
.celda--f { grid-column: span 2; }
.celda figcaption {
  position: absolute; inset: auto 0 0; z-index: 3; padding: 1.5rem .95rem .85rem;
  font-size: .95rem; line-height: 1.45; color: var(--hueso);
  background: linear-gradient(180deg, rgba(12, 51, 62, 0), rgba(12, 51, 62, .86));
  transform: translateY(6px); transition: transform 260ms var(--ease-out), opacity 220ms ease;
}
.celda figcaption b { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .celda figcaption { opacity: .0; }
  .celda:hover figcaption, .celda:focus-within figcaption { opacity: 1; transform: translateY(0); }
  .celda .luz i { transform: translate3d(-130%, 0, 0); transition: transform 0s; opacity: 1; animation: none; }
  .celda:hover .luz i { transform: translate3d(230%, 0, 0); transition: transform 620ms var(--ease-out); }
}

/* ===========================================================================
   7.8 PRP facial — banda breve y honesta
   =========================================================================== */
.prp { display: grid; grid-template-columns: 512px 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.prp__foto { position: relative; margin: 0; border-radius: 4px; overflow: hidden; max-width: 512px; isolation: isolate; }
.prp__foto img { width: 100%; height: auto; }
.prp__txt h3.t { margin-bottom: .9rem; }
.prp__txt p { max-width: 36em; font-size: 1rem; }

/* ===========================================================================
   7.9 VISITA
   =========================================================================== */
.visita__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 3.6rem); align-items: start; }
.visita__dir {
  font-family: var(--texto); font-weight: 600; font-size: clamp(1.14rem, 1.6vw, 1.34rem);
  line-height: 1.4; margin: 0 0 1.4rem;
}
.horario { border-top: 1px solid var(--linea); margin-bottom: 1.4rem; }
.horario li {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--linea); font-size: 1rem;
}
.horario li.hoy { font-weight: 600; color: var(--petrol); }
.horario li.hoy > span:first-child::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--euca); margin-right: .5rem; vertical-align: .12em;
}
.visita__acceso {
  display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem;
  padding: .85rem 1rem; background: var(--euca-veil); border-radius: 6px; margin-bottom: 1.3rem;
}
.visita__acceso svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--euca-darker); margin-top: 2px; }
.visita__tels { margin-bottom: 1.4rem; font-size: 1rem; }
.visita__tels li { padding: .28rem 0; }
.visita__tels a { border-bottom: 1px solid var(--linea-euca); font-weight: 500; }
.visita__tels a:hover { border-bottom-color: var(--petrol); }
.visita__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.visita__mapa {
  position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--linea-euca);
  background: var(--euca-wash); aspect-ratio: 4 / 3.2;
}
.visita__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===========================================================================
   7.10 FAQ
   =========================================================================== */
.faq { max-width: 860px; margin: 0 auto; }
.faq__head { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
@media (min-width: 1200px) {              /* enunciado a la izquierda, preguntas a la derecha */
  .faq {
    max-width: var(--maxw); display: grid;   /* .faq comparte elemento con .wrap */
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.5fr);
    column-gap: clamp(2.4rem, 5vw, 5.5rem); align-items: start;
  }
  .faq__head { position: sticky; top: calc(var(--nav-h) + 26px); margin-bottom: 0; }
}
@media (min-width: 1700px) {              /* en monitor grande, dos columnas de preguntas */
  .faq__lista {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 3vw, 3.6rem); align-items: start;
  }
  .faq__lista > .faq__item { align-self: start; }
}
.faq__item { border-bottom: 1px solid rgba(27, 42, 42, .14); }
.faq__item summary {
  display: flex; align-items: flex-start; gap: .85rem; cursor: pointer;
  padding: 1.1rem 0; font-weight: 600; font-size: 1.08rem; list-style: none;
  transition: color 180ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--petrol); }
.faq__item summary .diente {
  width: 19px; height: 19px; margin-top: 4px; color: var(--euca);
  transition: transform 240ms var(--ease-out), color 180ms ease;
}
.faq__item[open] summary .diente { transform: rotate(90deg); color: var(--euca-deep); }
.faq__a { padding: 0 0 1.3rem 2.5rem; max-width: 46em; }
.faq__a p { font-size: 1.02rem; color: #34423E; margin: 0 0 .6rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { font-weight: 600; border-bottom: 1px solid var(--linea-euca); }
.faq__a b { font-weight: 600; color: var(--tinta); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.footer {
  --focus: #E7B84A;
  position: relative; background: var(--petrol-deep); color: rgba(245, 242, 234, .84);
  padding: clamp(48px, 6vw, 76px) 0 2rem; overflow: hidden; font-size: .98rem;
}
.footer::before { content: ''; position: absolute; inset: 0; background-image: var(--acanalado-claro); }
.footer__in { position: relative; z-index: 2; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 2rem clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 2.2rem; border-bottom: 1px solid rgba(245, 242, 234, .16);
}
.footer .marca .diente, .footer .marca__txt { color: var(--hueso); text-shadow: none; }
.footer h4 {
  font-family: var(--texto); font-size: .88rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(245, 242, 234, .74); margin-bottom: .7rem;
}
.footer p { margin: 0 0 .35rem; }
.footer li { padding: .16rem 0; }
.footer a { border-bottom: 1px solid rgba(245, 242, 234, .26); }
.footer a:hover { border-bottom-color: rgba(245, 242, 234, .6); color: var(--clinico); }
.footer__marca-col p { margin-top: .9rem; max-width: 30em; color: rgba(245, 242, 234, .82); }
.footer__legal {
  padding-top: 1.4rem; font-size: .94rem; color: rgba(245, 242, 234, .76);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
}
.footer__panoramic { color: rgba(245, 242, 234, .78); }
.footer__panoramic a { font-weight: 600; color: var(--clinico); border-bottom-color: rgba(245, 242, 234, .45); }

/* ---------- FAB ---------- */
.fab {
  position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 55;
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
  box-shadow: 0 14px 34px -10px rgba(12, 51, 62, .5);
  transition: opacity 240ms ease, transform 300ms var(--ease-out);
}
.fab.show { opacity: 1; transform: none; pointer-events: auto; }
.fab.is-lifted { bottom: calc(clamp(14px, 3vw, 26px) + 66px); }

/* ---------- MODAL QR (patrón A PRUEBA DE FALLOS: oculto por defecto) ---------- */
.wa-modal {
  --focus: #B07E12;
  display: none; position: fixed; inset: 0; z-index: 120; place-items: center; padding: 1.1rem;
}
.wa-modal:not([hidden]) { display: grid; }
.wa-overlay { position: absolute; inset: 0; background: rgba(12, 51, 62, .62); backdrop-filter: blur(7px); }
.wa-card {
  position: relative; z-index: 1; width: min(420px, 94vw); text-align: center;
  background: var(--clinico); background-image: var(--acanalado);
  border: 1px solid var(--linea-euca); border-radius: 18px;
  padding: 2.1rem 1.6rem 1.7rem;
  box-shadow: 0 50px 90px -30px rgba(12, 51, 62, .55);
  transform-origin: center;
}
.wa-close {
  position: absolute; top: .45rem; right: .6rem; width: 40px; height: 40px;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted);
  border-radius: 50%; transition: color 160ms ease, background-color 160ms ease;
}
.wa-close:hover { color: var(--petrol); background: var(--euca-veil); }
.wa-card .kicker { margin-bottom: .45rem; }
.wa-card h3 { font-family: var(--texto); font-weight: 600; font-size: 1.3rem; margin-bottom: .35rem; color: var(--petrol); }
.wa-card > p { font-size: .98rem; color: var(--muted); margin-bottom: 1.1rem; }
.wa-qr {
  display: grid; place-items: center; width: fit-content; margin: 0 auto 1rem;
  padding: .8rem; background: #fff; border-radius: 12px; border: 1px solid var(--linea);
}
.wa-qr img { width: 188px; height: 188px; image-rendering: pixelated; }
.wa-preview { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.wa-card .btn { width: 100%; }

/* ===========================================================================
   REVEAL (gated por .is-anim → sin JS TODO visible)
   =========================================================================== */
html.is-anim [data-r] { opacity: 0; }
html.is-anim [data-r="fade"] { transform: translateY(20px); transition: opacity .68s var(--ease-out), transform .68s var(--ease-out); }
html.is-anim [data-r="soft"] { transform: translateY(11px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.is-anim [data-r].in { opacity: 1; transform: none; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav .nav-cta { display: none; }
  .hamb { display: flex; }
  .promesa__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .promesa__foto::after { display: none; }
  .promesa__foto img { aspect-ratio: 4 / 3.4; }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
  .hilo__banda { display: none; }
  .paso { position: relative; padding-left: 0; }
  .visita__grid { grid-template-columns: 1fr; }
  .visita__mapa { aspect-ratio: 4 / 3; }
  .prp { grid-template-columns: 1fr; }
  .prp__foto { max-width: 340px; }
  .mosaico { grid-auto-rows: minmax(140px, 26vw); }
  .celda figcaption { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .mosaico { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .celda { aspect-ratio: 4 / 3; }
  .celda--a { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; }
  .celda--b, .celda--e, .celda--f { grid-column: span 1; aspect-ratio: 2 / 1; }
  .pasos { grid-template-columns: 1fr; gap: 1.7rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__marca-col { grid-column: 1 / -1; }
  .hero__cta .btn { flex: 1 1 auto; }
  .caso__card { border-radius: 3px; }
  .faq__a { padding-left: 0; }
}
/* El FAB flotante vive abajo-derecha: en móvil la autoría del pullquote se
   estrecha para que el botón no le pase por encima (verificado a 390px). */
@media (max-width: 760px) {
  .frase__autoria { max-width: 58%; }
}
@media (max-width: 560px) {
  .marca__txt b { display: none; }
  .marca__txt i { font-weight: 600; opacity: 1; font-size: .82rem; letter-spacing: .18em; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Escalon de pantalla ancha (queja del monitor de 27 pulgadas) ---------- */
@media (min-width: 1500px) { :root { --maxw: min(90vw, 1360px); } }
@media (min-width: 1700px) { :root { --maxw: min(89vw, 1480px); } }
@media (min-width: 1900px) { :root { --maxw: min(88vw, 1560px); } }
@media (min-width: 2100px) { :root { --maxw: min(85vw, 1660px); } }
@media (min-width: 2300px) { :root { --maxw: 1760px; --pad: clamp(20px, 3.4vw, 88px); } }

/* ===========================================================================
   PREFERS-REDUCED-MOTION — nada queda oculto, nada se mueve
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.is-anim [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cortina { display: none !important; }
  html.is-anim .hero__media img { animation: none; transform: scale(1.02); }
  .luz, .luz i { display: none !important; animation: none !important; }
  .arco path, html.is-anim .arco path { stroke-dashoffset: 0 !important; transition: none !important; }
  .hilo__banda i, html.is-anim .hilo__banda i { transform: none !important; transition: none !important; }
  .hilo__banda i::after { display: none !important; animation: none !important; }
  html.is-anim .hilo .paso__n, html.is-anim .hilo.in .paso__n { color: var(--petrol) !important; transition: none !important; }
  .panel, .panel__body, .panel__wrap { transition: none !important; }
  .panel__bg, .panel__velo { transition: none !important; transform: none !important; }
  .btn, .btn::before, .celda figcaption, .caso__handle { transition: none !important; }
  .sello-google__ico, html.is-anim .in .sello-google__ico { animation: none !important; }

  /* El caso pasa a las dos tomas una sobre otra (son 2:1) + botón de alternar */
  .caso__card {
    aspect-ratio: 1 / 1; display: grid; grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr; gap: 2px; cursor: default; touch-action: auto;
  }
  .caso__card img { position: relative; inset: auto; width: 100%; height: 100%; }
  .caso__img--despues { clip-path: none !important; }
  .caso__div, .caso__rango, .caso__pista { display: none !important; }
  /* Rótulos: ANTES en la mitad de arriba, DESPUÉS en la de abajo.
     Misma columna y mitades distintas → nunca se cruzan. */
  .caso__tag { opacity: 1 !important; left: .6rem; right: auto; }
  .caso__tag--a { top: calc(50% - 2.1rem); bottom: auto; }
  .caso__tag--d { top: auto; bottom: .6rem; }
  .caso__card.solo-antes .caso__img--despues,
  .caso__card.solo-despues .caso__img--antes { display: none; }
  .caso__card.solo-antes, .caso__card.solo-despues { grid-template-rows: 1fr; aspect-ratio: 2 / 1; }
  .caso__card.solo-antes .caso__tag--a { top: auto; bottom: .6rem; }
  .caso__card.solo-antes .caso__tag--d, .caso__card.solo-despues .caso__tag--a { display: none; }
  .caso__toggle { display: inline-flex; margin-top: 1rem; }
}