/* ==========================================================================
   Radiantez — Dermatología Clínica y Estética Avanzada · Pasto, Nariño
   Sistema de diseño construido sobre el manual de marca oficial.
   Los tokens del bloque :root son la única fuente de color y tipografía.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* --- Paleta oficial (manual de marca) --- */
  --navy:        #202A44;   /* PANTONE 533C — color principal, el ancla */
  --navy-deep:   #003A70;   /* PANTONE 654C */
  --navy-mid:    #7D9CC0;   /* PANTONE 652C */
  --navy-light:  #CED9E5;   /* PANTONE 650C */
  --gold:        #C49A6C;   /* PANTONE 10124C METALLICS — el acento */
  --sand:        #E5CBA5;   /* PANTONE 18-9C */
  --pearl:       #EEEDED;   /* PANTONE COOL GRAY 1C */

  /* --- Derivados, para cubrir lo que el manual no fija --- */
  --navy-darkest: #1A2338;  /* footer */
  --gold-ink:     #856030;  /* dorado legible sobre fondo claro (4.8–5.7:1 AA) */
  --gold-soft:    #F5EADB;  /* dorado desaturado — badges e iconos */
  --sand-soft:    #F2EDE4;  /* arena muy clara — bloques destacados */
  --navy-soft:    #EDF1F7;  /* azul muy claro */

  /* --- Neutros --- */
  --ink:      #202A44;      /* titulares: el propio azul marino */
  --ink-2:    #47506A;      /* texto de cuerpo (8:1) */
  --muted:    #5A6072;      /* texto secundario (6.3:1) */
  --line:     #E1DFDA;
  --bg:       #FFFFFF;
  --bg-soft:  #F8F6F2;      /* blanco hueso cálido — secciones alternas */
  --white:    #FFFFFF;

  /* --- Tipografía --- */
  /* Cormorant Garamond acompaña al serif del logotipo; Montserrat es la
     tipografía de apoyo que fija el manual de marca. */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Escala fluida --- */
  --fs-hero:  clamp(2.3rem, 1.45rem + 3.5vw, 4.05rem);
  --fs-h2:    clamp(1.95rem, 1.3rem + 2.5vw, 3.1rem);
  --fs-h3:    clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --fs-lead:  clamp(1rem, 0.95rem + 0.32vw, 1.15rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* --- Ritmo --- */
  --section-y: clamp(4rem, 2.4rem + 6.4vw, 7.5rem);
  --gutter:    clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --maxw:      1200px;
  --radius:    16px;
  --radius-sm: 10px;

  --shadow-sm: 0 2px 10px rgba(32,42,68,.06);
  --shadow-md: 0 12px 34px rgba(32,42,68,.10);
  --shadow-lg: 0 24px 60px rgba(32,42,68,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.32,.72,.26,1);   /* entradas y salidas de vista */
  --header-h: 94px;
  /* Aire que el hero deja bajo la foto (su padding-bottom). .trust lo
     cancela subiendo ese mismo tanto con margen negativo, para que el navy
     arranque justo donde termina la foto sin tocar ni el hero ni la
     imagen. Una sola variable → los dos quedan sincronizados en todos los
     anchos de pantalla sin duplicar el valor. */
  --hero-gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);

  /* --- Material translúcido --- */
  --glass-bg:     rgba(255,255,255,.62);
  --glass-brd:    rgba(255,255,255,.75);
  --glass-blur:   saturate(170%) blur(22px);
  --glass-shadow: 0 1px 1px rgba(255,255,255,.7) inset,
                  0 18px 50px -22px rgba(32,42,68,.28);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.004em;
  margin:0 0 .45em;
  text-wrap:balance;
}
h1{ letter-spacing:-.014em; }
h2{ letter-spacing:-.01em; }
h3,h4{ letter-spacing:-.004em; line-height:1.14; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
/* <picture> solo envuelve al <img> para servir WebP con respaldo JPG.
   display:contents parecía la solución limpia, pero es un patrón con bugs
   documentados en varios navegadores dentro de grid/flex: el <picture> a
   veces sigue contando como celda del grid aunque "desaparezca"
   visualmente, descuadrando layouts como la galería de Nosotros. En su
   lugar, <picture> se comporta como una caja normal que llena el 100% de
   su celda; el <img> de adentro sigue teniendo sus propias reglas
   (object-fit, max-width, etc.) exactamente como antes de envolverlo. */
picture{ display:block; width:100%; height:100%; }
ul{ margin:0; padding:0; list-style:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; border-radius:4px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--soft{ background:rgba(248,246,242,.84); }
.section--sand{ background:rgba(242,237,228,.84); }

.section-head{ max-width:64ch; margin-bottom:clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:var(--fs-h2); }
.section-head p{ font-size:var(--fs-lead); color:var(--muted); }

/* Etiqueta superior — replica el tracking amplio del logotipo */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-body); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink);
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold); flex:none; }
.eyebrow--light{ color:var(--sand); }
.eyebrow--light::before{ background:var(--gold); }
.section-head--center .eyebrow{ justify-content:center; }

em, .accent{ font-style:italic; color:var(--gold-ink); }

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex; gap:.6rem;
  align-items:center; justify-content:center;
  min-height:54px; padding:.9rem 1.9rem;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--font-body);
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; text-align:center;
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ flex:none; }
.btn--primary{ background:var(--gold); color:var(--navy); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--sand); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--navy{ background:var(--navy); color:var(--white); }
.btn--navy:hover{ background:var(--navy-deep); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); }
.btn--outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:var(--white); transform:translateY(-2px); }
.btn--sm{ min-height:46px; padding:.65rem 1.35rem; font-size:.76rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-ink);
}
.link-arrow svg{ transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- 5. Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
}
/* El cristal esmerilado vive en un ::before, no en .header directamente.
   backdrop-filter en un elemento crea un nuevo contenedor de referencia para
   sus descendientes position:fixed — y el menú móvil (.nav) es descendiente
   de .header y también usa position:fixed para cubrir toda la pantalla. Con
   el filtro en .header, el menú quedaba encerrado en los 74px del header en
   vez de tapar la pantalla completa. Puesto en un pseudo-elemento sin hijos,
   el filtro no atrapa a nada y .nav vuelve a posicionarse contra el viewport. */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Liquid glass permanente: al ser un router de vistas (no scroll continuo),
     una vez transparente sobre una vista de fondo navy (Contacto) el menú
     desaparecía. Ahora el cristal esmerilado está siempre activo. */
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 var(--line), var(--shadow-sm);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; }

.brand{ display:block; flex:none; }
.brand img{ height:clamp(46px, 3.8vw, 62px); width:auto; }

.nav{ display:flex; align-items:center; gap:2.25rem; }
.nav__list{ display:flex; align-items:center; gap:2rem; }
.nav__link{
  position:relative; font-size:.78rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding-block:.5rem; transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__link:hover{ color:var(--gold-ink); }

.burger{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:0; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{
  display:block; width:24px; height:1.5px; border-radius:2px; background:var(--navy);
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  padding-block:calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem)) var(--hero-gap);
  background:
    radial-gradient(120% 90% at 88% 40%, rgba(242,237,228,.72) 0%, rgba(242,237,228,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(248,246,242,.78) 100%);
  overflow:hidden;
}
.hero__inner{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items:end;
}
.hero__content{ padding-bottom:clamp(3rem, 2rem + 4vw, 6rem); max-width:38rem; }
.hero h1{ font-size:var(--fs-hero); margin-bottom:.85rem; }
.hero__tagline{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.25rem, 1.05rem + 1.1vw, 1.85rem); color:var(--gold-ink);
  line-height:1.3; margin-bottom:1.4rem;
}
.hero__text{ font-size:var(--fs-lead); color:var(--muted); max-width:36rem; margin-bottom:2.1rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
/* margin:0 porque <figure> trae "margin:1em 40px" del navegador por
   defecto — nunca se había reseteado. Ese margen inferior (16px) era
   exactamente el hueco que quedaba entre la foto y la barra de confianza,
   incluso después de cancelar el padding del hero. */
.hero__figure{ position:relative; align-self:end; margin:0; }
/* La foto viene recortada sobre blanco puro: multiply la funde con el fondo
   sin necesidad de recortarla a PNG y sin bordes duros. */
.hero__figure img{
  width:100%; max-width:520px; margin-inline:auto; display:block;
  mix-blend-mode:multiply;
}

/* ---------- 7. Barra de confianza ---------- */
/* position:relative es necesario aquí: .hero también lo tiene, y entre dos
   hermanos, el elemento "posicionado" se pinta encima del que no lo está,
   sin importar el orden en el HTML. Sin esto, el navy de .trust quedaba
   debajo del propio fondo del hero justo en la franja que se superponen. */
.trust{ position:relative; background:var(--navy); color:var(--white); margin-top:calc(-1 * var(--hero-gap)); }
.trust__layout{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(1.75rem, 1.2rem + 2vw, 3.5rem);
  padding-block:clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
.trust__list{ display:flex; flex-direction:column; gap:clamp(1.25rem, .9rem + 1.4vw, 2rem); }
.trust__item{ text-align:left; }
.trust__value{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); color:var(--gold); line-height:1.05;
}
.trust__label{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-top:.4rem;
}
.trust__stars{ color:var(--gold); letter-spacing:.14em; font-size:1.35rem; }

/* Mini carrusel: misma tarjeta de cristal que la grande de Contacto, a
   escala reducida, junto a la lista vertical de cifras. */
.reviews__card--mini{ padding:clamp(1.1rem, .85rem + .8vw, 1.5rem); }
.reviews__mini-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
/* Número arriba, estrellas abajo — mismo formato que .reviews__score de la
   tarjeta grande de Contacto, en vez de ponerlos en línea. Sin pastilla de
   fondo: el número queda suelto sobre el glass, como en el sitio publicado. */
.reviews__mini-score{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.reviews__rating--mini{
  font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  color:var(--gold-ink); line-height:1;
}
.stars--mini .star{ width:15px; height:15px; }
.reviews__body--mini{ padding-block:clamp(.9rem, .7rem + .6vw, 1.2rem); min-height:6.5rem; }
.reviews__card--mini .review__text{
  font-size:clamp(.88rem, .82rem + .2vw, .98rem); line-height:1.55; margin-bottom:.75rem;
}
.reviews__card--mini .review__ini{ width:30px; height:30px; font-size:.72rem; }
.reviews__card--mini .review__name{ font-size:.78rem; }
.reviews__card--mini .review__date{ font-size:.68rem; }
.reviews__card--mini .reviews__dot{ width:6px; height:6px; }
.reviews__card--mini .reviews__dot[aria-selected="true"]{ width:16px; }

@media (max-width:860px){
  .trust__layout{ grid-template-columns:1fr; }
}

/* "¿Ya nos visitaste?" — invitación a dejar reseña, junto a la tarjeta grande */
.reviews__cta{
  margin-top:clamp(1.1rem, .85rem + 1vw, 1.75rem);
  padding:clamp(1.1rem, .85rem + .8vw, 1.5rem) clamp(1.25rem, .9rem + 1vw, 1.75rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.reviews__cta-text{ display:flex; flex-direction:column; gap:.2rem; }
.reviews__cta-text strong{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ink); }
.reviews__cta-text span{ font-size:.85rem; color:var(--muted); }

/* ---------- 8. Categorías ---------- */
.cats{
  --cats-gap: clamp(.85rem, .4rem + 1.4vw, 1.4rem);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--cats-gap);
}
.cat{
  position:relative; display:block; aspect-ratio:1/1;
  flex:1 1 calc((100% - var(--cats-gap) * 2) / 3);
  max-width:calc((100% - var(--cats-gap) * 2) / 3);
  border-radius:var(--radius); overflow:hidden; background:var(--pearl);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cat img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.cat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,35,56,.9) 6%, rgba(26,35,56,.32) 46%, rgba(26,35,56,.04) 100%);
  transition:opacity .4s var(--ease);
}
.cat__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(1rem, .6rem + 1vw, 1.45rem);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.cat__name{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.1rem, .85rem + .75vw, 1.65rem);
  color:var(--white); line-height:1.14;
}
.cat__icon{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:var(--white);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cat:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.cat:hover img{ transform:scale(1.07); }
.cat:hover .cat__icon{ background:var(--gold); color:var(--navy); border-color:var(--gold); transform:rotate(-45deg); }

/* ---------- 9. Servicios ---------- */
.tabs{
  position:sticky; top:var(--header-h); z-index:40;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-block:1px solid var(--line);
  margin-bottom:clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}
.tabs__scroll{
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-block:.65rem;
  justify-content:center; justify-content:safe center;
}
.tabs__scroll::-webkit-scrollbar{ display:none; }
.tab{
  flex:none; padding:.6rem 1.25rem; border:1px solid transparent; border-radius:999px;
  background:transparent; cursor:pointer; white-space:nowrap;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.tab:hover{ color:var(--gold-ink); background:var(--gold-soft); }
.tab[aria-selected="true"]{ background:var(--navy); color:var(--white); }

.panel[hidden]{ display:none; }
.panel__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items:center;
  margin-bottom:clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-bottom:clamp(2rem, 1.4rem + 2vw, 3rem);
  border-bottom:1px solid var(--line);
}
.panel__head img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow-md);
}
.panel__head h3{ font-size:var(--fs-h2); }
.panel__head p{ color:var(--muted); font-size:var(--fs-lead); }

/* Separa visualmente la cabecera de categoría (su propia foto de referencia)
   de las fotos de cada tratamiento individual, para que no se lean como un
   solo bloque de imágenes. Retoma el lenguaje ya usado en el resto del sitio:
   línea + acento dorado (como el "eyebrow") en vez de una etiqueta genérica. */
.panel__divider{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  margin-bottom:clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
}
.panel__divider::before, .panel__divider::after{
  content:""; flex:1; max-width:96px; height:1px;
}
.panel__divider::before{ background:linear-gradient(to left, var(--line), transparent); }
.panel__divider::after{ background:linear-gradient(to right, var(--line), transparent); }
.panel__divider span{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  padding:.5rem 1.15rem; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-ink);
  font-family:var(--font-body); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.panel__divider svg{ flex:none; width:13px; height:13px; }

.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,350px));
  justify-content:center;
  gap:clamp(1.1rem, .7rem + 1.4vw, 1.8rem);
}
.card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--pearl); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card__body{ padding:clamp(1rem, .8rem + .6vw, 1.3rem); }
.card__body h4{ font-size:var(--fs-h3); margin:0; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.card:hover .card__media img{ transform:scale(1.06); }

/* Ventana flotante de especificaciones: oculta hasta que se pasa el cursor
   (o se llega con teclado), mismo material de cristal que el navbar. Vive
   dentro de card__media (que ya tiene overflow:hidden), así que nunca se
   desborda del recuadro de la foto, sin importar su posición en la grilla. */
.card__pop{
  position:absolute; inset:0; z-index:2; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center; gap:.85rem;
  padding:clamp(1.1rem, .9rem + .8vw, 1.5rem);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  opacity:0; transform:scale(1.05);
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
  pointer-events:none;
}
.card:hover .card__pop, .card:focus-within .card__pop, .card.is-open .card__pop{
  opacity:1; transform:scale(1); pointer-events:auto;
}
.card__pop p{ font-size:.9rem; line-height:1.55; color:var(--ink); margin:0; }
.card__hint{
  position:absolute; right:.7rem; bottom:.7rem; z-index:1;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.85); color:var(--navy);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__hint, .card:focus-within .card__hint, .card.is-open .card__hint{ opacity:0; transform:scale(.7); }
.card--placeholder .card__pop p{ font-style:italic; color:var(--gold-ink); }

.other-services{
  display:block; width:100%; height:auto; margin-top:clamp(1.1rem, .7rem + 1.4vw, 1.8rem);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}

/* Tecnología */
.tech{ display:grid; gap:clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.tech__item{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:0; align-items:stretch;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.tech__item:nth-child(even) .tech__media{ order:2; }
.tech__media{ min-height:280px; background:var(--pearl); overflow:hidden; }
.tech__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.tech__item:hover .tech__media img{ transform:scale(1.06); }
.tech__body{ padding:clamp(1.6rem, 1rem + 2.4vw, 3.25rem); align-self:center; }
.tech__body h4{ font-size:var(--fs-h2); margin-bottom:.5rem; }
.tech__body p{ color:var(--muted); }
.tech__body .tech__lead{ margin:1rem 0 .4rem; color:var(--ink-2); font-weight:600; }
.tech__list{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.35rem; color:var(--muted); }
.tech__list li{ position:relative; padding-left:1.25rem; line-height:1.5; }
.tech__list li::before{ content:""; position:absolute; left:0; top:.6em; width:.4rem; height:.4rem; border-radius:50%; background:var(--gold-ink); }
.badge{
  display:inline-block; padding:.4rem .9rem; border-radius:999px;
  background:var(--gold-soft); color:var(--gold-ink);
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:1rem;
}
.section-cta{ text-align:center; margin-top:clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }

/* ---------- 10. Nosotros ---------- */
.about{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem, .8rem + 2vw, 3.5rem); align-items:start;
  margin-bottom:clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
}
.about__text h2{ font-size:var(--fs-h2); margin-bottom:0; }
.about__body{ padding-top:.5rem; }
.about__body p{ color:var(--muted); font-size:var(--fs-lead); }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem, .3rem + .8vw, .85rem); }
.gallery img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease);
}
.gallery img:hover{ transform:scale(1.04); }

.team{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem, .8rem + 1.8vw, 2.25rem);
}
.doctor{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(1rem, .6rem + 1.4vw, 1.75rem); align-items:start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.1rem, .7rem + 1.2vw, 1.6rem);
}
.doctor img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  border-radius:var(--radius-sm); background:var(--pearl);
}
.doctor__name{ font-size:var(--fs-h3); margin-bottom:.2rem; }
.doctor__role{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink); margin-bottom:.85rem;
}
.doctor__bio{ font-size:.9rem; color:var(--muted); margin:0; }

.values{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem, .6rem + 1.2vw, 1.5rem);
}
.value{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.35rem, .95rem + 1vw, 1.9rem);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.value:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow-sm); }
.value__icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-ink); margin-bottom:1.1rem;
}
.value h3{ font-size:1.35rem; margin-bottom:.35rem; }
.value p{ font-size:.9rem; color:var(--muted); margin:0; }

/* ---------- 11. Contacto ---------- */
.contact{ background:var(--navy); color:var(--white); }
.contact h2{ color:var(--white); font-size:var(--fs-h2); }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 1.4rem + 2.6vw, 4rem); align-items:start;
}
.contact__lead{ font-size:var(--fs-lead); color:rgba(255,255,255,.78); margin-bottom:2.1rem; }
.contact__list{ display:grid; gap:1.2rem; margin-bottom:2.1rem; }
.contact__row{ display:flex; gap:.95rem; align-items:flex-start; }
.contact__row svg{ flex:none; margin-top:3px; color:var(--gold); }
.contact__row strong{ display:block; color:var(--white); font-size:1.05rem; font-weight:600; }
.contact__row span{ font-size:.88rem; color:rgba(255,255,255,.66); }
.contact__row .contact__note{ margin-left:.4rem; font-size:.75rem; font-weight:300; color:rgba(255,255,255,.55); }
.contact__row a:hover{ color:var(--gold); }

.form{
  background:var(--white); border-radius:var(--radius);
  padding:clamp(1.4rem, 1rem + 1.6vw, 2.5rem); box-shadow:var(--shadow-lg);
}
.form h3{ font-size:var(--fs-h3); margin-bottom:.3rem; }
.form__intro{ font-size:.88rem; color:var(--muted); margin-bottom:1.6rem; }
.field{ margin-bottom:1.15rem; }
.field label{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); margin-bottom:.5rem;
}
.field input, .field textarea{
  width:100%; padding:.9rem 1rem;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:.94rem; color:var(--ink-2);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
/* .contact fija color:white para el texto de toda la sección (fondo navy),
   y sin esto el input/textarea heredaba ese blanco sobre su propio fondo
   claro: lo que escribías era invisible. */
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:1; }
.field textarea{ resize:vertical; min-height:112px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--white); }
.field__error{ display:none; font-size:.76rem; color:#B4453C; margin-top:.35rem; }
.field.has-error .field__error{ display:block; }
.field.has-error input, .field.has-error textarea{ border-color:#B4453C; }
.form__consent{
  display:flex; gap:.65rem; align-items:flex-start;
  font-size:.76rem; color:var(--muted); line-height:1.55; margin-bottom:1.3rem;
}
.form__consent input{ width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--navy); }
.form__note{ font-size:.73rem; color:var(--muted); text-align:center; margin-top:.9rem; }

.visit-type{ display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.visit-type__btn{
  padding:.7rem .4rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg-soft); color:var(--ink-2); cursor:pointer; text-align:center;
  font-size:.74rem; font-weight:600; line-height:1.25;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.visit-type__btn:hover{ border-color:var(--gold); color:var(--gold-ink); }
.visit-type__btn[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:var(--white); }

.visit-cats{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.2rem; }
.visit-cats__btn{
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:var(--white); color:var(--muted); cursor:pointer;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.visit-cats__btn:hover{ color:var(--gold-ink); background:var(--gold-soft); border-color:var(--gold-soft); }
.visit-cats__btn[aria-pressed="true"]{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink); }

.visit-sub{ display:flex; flex-wrap:wrap; gap:.6rem .9rem; padding:.85rem .9rem; margin:.6rem 0 0; background:var(--bg-soft); border-radius:var(--radius-sm); }
.visit-sub[hidden]{ display:none; }
.visit-sub .visit-sub__chip{
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:0;
  font-size:.82rem; font-weight:400; letter-spacing:normal; text-transform:none;
  color:var(--ink-2); cursor:pointer;
}
.visit-sub__chip input{ accent-color:var(--navy); width:15px; height:15px; flex:none; }
.field--cats.has-error .visit-cats__btn{ border-color:#B4453C; }
.field--visit.has-error .visit-type__btn{ border-color:#B4453C; }

.map{
  grid-column:1/-1; margin-top:clamp(2rem, 1.4rem + 2vw, 3rem);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:16/6; min-height:240px; background:var(--navy-darkest);
}
.map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.3); }

/* ---------- 12. Footer ---------- */
.footer{ background:var(--navy-darkest); color:rgba(255,255,255,.62); padding-block:clamp(2.75rem, 2rem + 2.4vw, 4rem) 1.75rem; font-size:.88rem; }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding-bottom:2.25rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer .brand img{ height:52px; }
.footer__about{ max-width:34ch; margin-top:1.2rem; }
/* Son <h2> por jerarquía semántica (antes eran <h4> y saltaban un nivel);
   el tamaño visual se mantiene idéntico. */
.footer__heading{
  color:var(--white); font-family:var(--font-body); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 1.1rem;
  line-height:1.4;
}
.footer__links{ display:grid; gap:.65rem; }
.footer__links a:hover{ color:var(--gold); }
.socials{ display:flex; gap:.6rem; margin-top:1.4rem; }
.socials a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.75);
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover{ background:var(--gold); color:var(--navy); transform:translateY(-3px); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  padding-top:1.5rem; font-size:.78rem; color:rgba(255,255,255,.55);
}
.footer__bottom a:hover{ color:var(--gold); }
.placeholder-tag{ color:var(--gold); font-style:italic; }
/* Mismo tamaño de fuente que el resto del footer__bottom — el aviso de que
   es clicable es el ícono, no un cambio de tipografía. */
.footer__credit{ display:inline-flex; align-items:center; gap:.3rem; }
.footer__credit svg{ flex:none; opacity:.7; transition:opacity .25s var(--ease); }
.footer__credit:hover svg{ opacity:1; }

.footer__badges{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.1);
}
.footer__badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-size:.68rem; letter-spacing:.06em; color:rgba(255,255,255,.6);
}
.footer__badge svg{ flex:none; width:13px; height:13px; }

/* ---------- 13.1 Preguntas frecuentes ---------- */
.faq__list{ max-width:52rem; margin-inline:auto; display:flex; flex-direction:column; gap:.7rem; }
.faq__item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1rem, .85rem + .6vw, 1.35rem) clamp(1.1rem, .9rem + .8vw, 1.6rem);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item[open]{ border-color:var(--gold); box-shadow:var(--shadow-sm); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary h3{
  font-family:var(--font-body); font-size:.95rem; font-weight:600;
  color:var(--ink); margin:0; line-height:1.4;
}
.faq__item summary::after{
  content:""; flex:none; width:11px; height:11px;
  border-right:2px solid var(--gold-ink); border-bottom:2px solid var(--gold-ink);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.faq__answer{ padding-top:.85rem; }
.faq__answer p{ font-size:.92rem; line-height:1.65; color:var(--muted); margin:0; }
.faq__answer a{ color:var(--gold-ink); text-decoration:underline; text-underline-offset:2px; }
.faq__answer strong{ color:var(--ink-2); font-weight:600; }

/* ---------- 14. Animaciones de entrada ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.4s; }

/* ---------- 15. Responsive ---------- */
@media (max-width:1024px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .team{ grid-template-columns:1fr; }
  .panel__head{ grid-template-columns:1fr; }
  .panel__head img{ aspect-ratio:16/9; order:-1; }
}

@media (max-width:900px){
  :root{ --header-h:74px; }
  .nav{
    position:fixed; inset:0; z-index:99;
    flex-direction:column; align-items:stretch; justify-content:center; gap:2rem;
    padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
    background:var(--bg-soft);
    transform:translateX(100%); transition:transform .4s var(--ease);
    overflow-y:auto;
  }
  body.menu-open .nav{ transform:translateX(0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line); }
  .nav__link{
    display:block; padding:1.05rem 0;
    font-family:var(--font-display); font-size:1.6rem; font-weight:600;
    letter-spacing:.02em; text-transform:none;
  }
  .nav__link::after{ display:none; }
  .nav .btn--header{ width:100%; }
  .burger{ display:flex; z-index:101; }
  body.menu-open{ overflow:hidden; }
  body.menu-open .brand{ position:relative; z-index:101; }

  .hero__inner{ grid-template-columns:1fr; gap:0; }
  .hero__content{ padding-bottom:clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width:none; }
  .hero__figure img{ max-width:380px; }

  .cat{ flex-basis:calc((100% - var(--cats-gap)) / 2); max-width:calc((100% - var(--cats-gap)) / 2); }
  .values{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .tech__item{ grid-template-columns:1fr; }
  .tech__item:nth-child(even) .tech__media{ order:0; }
  /* 1/1, la proporción real de las fotos actuales (1254x1254). */
  .tech__media{ min-height:0; aspect-ratio:1/1; }
}

@media (max-width:640px){
  .brand img{ height:44px; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .doctor{ grid-template-columns:1fr; }
  .doctor img{ aspect-ratio:4/3; max-width:240px; }
  .footer__grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .btn--sm{ width:auto; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .map{ aspect-ratio:4/3; }
}

@media (max-width:430px){
  .scene__orb{ filter:blur(70px); opacity:.36; }
  .cat{ flex-basis:100%; max-width:100%; }
  .values{ grid-template-columns:1fr; }
}

/* ==========================================================================
   17. Sistema de vistas — navegación tipo aplicación
   Sin JavaScript no existe .has-js y todas las vistas quedan visibles,
   de modo que la página sigue funcionando y siendo indexable como antes.
   ========================================================================== */
#app{ position:relative; }
.view{ position:relative; z-index:1; }
/* El foco al cambiar de vista es programático: se anuncia, no se dibuja */
.view:focus,
.view:focus-visible{ outline:none; }

/* Bajo el header fijo, las vistas que no abren con el hero necesitan aire propio */
.has-js .view:not(#inicio) > .section:first-child{
  padding-top:calc(var(--header-h) + var(--section-y) * .58);
}
/* Dos secciones seguidas dentro de una vista no repiten el espaciado completo */
.view > .section + .section{ padding-top:calc(var(--section-y) * .72); }
.view > .section:has(+ .section){ padding-bottom:calc(var(--section-y) * .72); }
.has-js .view{ display:none; }
.has-js .view.is-active,
.has-js .view.is-leaving{ display:block; }

/* La saliente se retira del flujo para que no empuje a la entrante */
.has-js .view.is-leaving{
  position:absolute; inset:0 0 auto 0;
  pointer-events:none;
}

@media (prefers-reduced-motion:no-preference){
  .has-js .view.is-entering{ animation:viewIn .46s var(--ease-soft) both; }
  .has-js .view.is-leaving { animation:viewOut .26s var(--ease-soft) both; }
}
@keyframes viewIn{
  from{ opacity:0; transform:translate3d(0,14px,0) scale(.994); filter:blur(7px); }
  60% { filter:blur(0); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes viewOut{
  from{ opacity:1; transform:none; filter:blur(0); }
  to  { opacity:0; transform:translate3d(0,-10px,0) scale(.996); filter:blur(5px); }
}

/* Escena: dos masas de luz muy lentas detrás de todo */
.scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.scene__orb{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
  will-change:transform;
}
.scene__orb--a{
  width:46vw; height:46vw; max-width:680px; max-height:680px;
  top:-12vw; right:-10vw;
  background:radial-gradient(circle at 35% 35%, rgba(196,154,108,.34), rgba(196,154,108,0) 68%);
  animation:orbA 34s var(--ease-soft) infinite alternate;
}
.scene__orb--b{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  bottom:-20vw; left:-14vw;
  background:radial-gradient(circle at 60% 40%, rgba(125,156,192,.30), rgba(125,156,192,0) 68%);
  animation:orbB 44s var(--ease-soft) infinite alternate;
}
@keyframes orbA{ to{ transform:translate3d(-5vw, 5vh, 0) scale(1.1); } }
@keyframes orbB{ to{ transform:translate3d(6vw, -4vh, 0) scale(1.08); } }

/* ---------- 18. Indicador de navegación ---------- */
.nav__rail{ position:absolute; inset:auto 0 0 0; height:1.5px; pointer-events:none; }
.nav__ink{
  position:absolute; bottom:0; left:0; height:1.5px; width:0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0;
  transition:transform .42s var(--ease-soft), width .42s var(--ease-soft), opacity .3s var(--ease);
}
.nav__ink.is-on{ opacity:1; }
.nav__list{ position:relative; }
.nav__link.is-active{ color:var(--gold-ink); }

/* ---------- 19. Material translúcido ---------- */
.glass{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius:calc(var(--radius) + 8px);
  box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
/* Reflejo especular: una sola banda de luz en diagonal, estática y muy tenue */
.glass__sheen{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(120% 80% at 8% 0%, rgba(196,154,108,.12), transparent 60%);
}

/* ---------- 20. Reseñas de Google ---------- */
.reviews{ position:relative; overflow:hidden; }
/* Sustrato propio: dos veladuras de marca que el cristal recoge y difumina */
.reviews::before,
.reviews::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none;
}
.reviews::before{
  width:34rem; height:34rem; top:-12rem; left:-8rem;
  background:radial-gradient(circle, rgba(125,156,192,.40), transparent 68%);
}
.reviews::after{
  width:30rem; height:30rem; bottom:-14rem; right:-6rem;
  background:radial-gradient(circle, rgba(196,154,108,.38), transparent 68%);
}
.reviews .container{ position:relative; z-index:1; }
.reviews__card{ padding:clamp(1.5rem, 1rem + 2.2vw, 3rem); }
.reviews__head{
  display:flex; align-items:center; gap:clamp(.85rem, .6rem + 1vw, 1.4rem);
  flex-wrap:wrap;
  padding-bottom:clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom:1px solid rgba(32,42,68,.10);
}
.reviews__g{ flex:none; }
.reviews__meta{ flex:1 1 14rem; min-width:0; }
.reviews__meta h2{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin:0 0 .15rem; }
.reviews__place{ font-size:.82rem; color:var(--muted); margin:0; letter-spacing:.02em; }
.reviews__score{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; flex:none; }
.reviews__rating{
  font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:clamp(2rem, 1.5rem + 1.8vw, 2.9rem); color:var(--ink);
}
.reviews__count{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* Estrellas: aparición en cascada; la quinta recibe un destello que pasa una vez */
.stars{ display:inline-flex; gap:.2rem; }
.star{ width:22px; height:22px; display:block; color:var(--gold); }
.star--empty{ color:rgba(32,42,68,.22); }
@media (prefers-reduced-motion:no-preference){
  .stars.is-in .star{ animation:starIn .5s var(--ease-soft) both; }
  .stars.is-in .star:nth-child(1){ animation-delay:.02s }
  .stars.is-in .star:nth-child(2){ animation-delay:.10s }
  .stars.is-in .star:nth-child(3){ animation-delay:.18s }
  .stars.is-in .star:nth-child(4){ animation-delay:.26s }
  .stars.is-in .star:nth-child(5){ animation-delay:.34s }
  .stars.is-in .star--last{ position:relative; }
  .stars.is-in .star--last::after{
    content:""; position:absolute; inset:-2px;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
    -webkit-mask:var(--star-mask) center/contain no-repeat;
            mask:var(--star-mask) center/contain no-repeat;
    transform:translateX(-140%);
    animation:starSheen 1.5s var(--ease-soft) .62s 1 both;
  }
}
@keyframes starIn{
  from{ opacity:0; transform:translateY(5px) scale(.82); }
  to  { opacity:1; transform:none; }
}
@keyframes starSheen{
  0%  { transform:translateX(-140%); opacity:0 }
  22% { opacity:1 }
  78% { opacity:1 }
  100%{ transform:translateX(140%); opacity:0 }
}

.reviews__body{ padding-block:clamp(1.4rem, 1rem + 1.4vw, 2.1rem); min-height:9.5rem; }
.reviews__track{ display:grid; }
.review{
  grid-area:1/1; opacity:0; visibility:hidden;
  transform:translate3d(0,10px,0);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft), visibility 0s .5s;
}
.review.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.review__text{
  font-family:var(--font-display); font-size:clamp(1.1rem, .95rem + .75vw, 1.5rem);
  line-height:1.5; color:var(--ink); margin:0 0 1.1rem;
}
.review__who{ display:flex; align-items:center; gap:.7rem; }
.review__ini{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--navy); color:var(--white);
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
}
.review__name{ font-size:.86rem; font-weight:600; color:var(--ink); display:block; line-height:1.3; }
.review__date{ font-size:.74rem; color:var(--muted); }

/* Estado honesto mientras no haya reseñas cargadas */
.reviews__empty{ display:flex; gap:.9rem; align-items:flex-start; }
.reviews__empty svg{ flex:none; margin-top:3px; color:var(--gold); }
.reviews__empty p{ font-size:.94rem; color:var(--muted); margin:0; max-width:52ch; }
.reviews__empty strong{ color:var(--ink); font-weight:600; }

.reviews__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border-top:1px solid rgba(32,42,68,.10);
}
.reviews__dots{ display:flex; gap:.45rem; }
.reviews__dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(32,42,68,.2);
  transition:background-color .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
}
.reviews__dot[aria-selected="true"]{ background:var(--gold); width:22px; border-radius:99px; }

/* ---------- 21. Botón flotante de WhatsApp ---------- */
.wa-float{
  position:fixed; z-index:90;
  right:clamp(1rem, .6rem + 1.2vw, 1.75rem);
  bottom:clamp(1rem, .6rem + 1.2vw, 1.75rem);
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.34), rgba(255,255,255,0) 54%),
    linear-gradient(160deg, #3ED37C 0%, #22B45C 52%, #17924A 100%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset,
             0 14px 34px -12px rgba(23,146,74,.62),
             0 3px 10px -4px rgba(32,42,68,.3);
  transform:translate3d(0,120%,0); opacity:0; pointer-events:none;
  transition:transform .5s var(--ease-soft), opacity .4s var(--ease), box-shadow .3s var(--ease);
}
.wa-float.is-visible{ transform:translate3d(0,0,0); opacity:1; pointer-events:auto; }
.wa-float__icon{ position:relative; z-index:2; transition:transform .35s var(--ease-soft); }
.wa-float:hover{ box-shadow:0 1px 1px rgba(255,255,255,.5) inset,
                            0 20px 44px -12px rgba(23,146,74,.72),
                            0 4px 12px -4px rgba(32,42,68,.34); }
.wa-float:hover .wa-float__icon{ transform:scale(1.08); }

/* Anillo: una onda lenta y muy tenue, nunca insistente */
.wa-float__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(62,211,124,.55);
  opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .wa-float.is-visible .wa-float__ring{ animation:waRing 4.5s var(--ease-soft) infinite; }
}
@keyframes waRing{
  0%  { transform:scale(1);    opacity:.45 }
  55% { transform:scale(1.55); opacity:0 }
  100%{ transform:scale(1.55); opacity:0 }
}

/* Tooltip translúcido que se despliega desde el botón */
.wa-float__tip{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;
  padding:.6rem 1.05rem; border-radius:999px;
  /* Casi opaco a propósito: el tooltip aparece tanto sobre fondos claros como
     sobre el footer azul marino y debe leerse igual en ambos. */
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 10px 30px -12px rgba(32,42,68,.55);
  color:var(--ink); font-size:.76rem; font-weight:600; letter-spacing:.04em;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease-soft);
}
.wa-float:hover .wa-float__tip,
.wa-float:focus-visible .wa-float__tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ---------- 22. Enlace a Google en la barra de confianza ---------- */
.trust__google{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .95rem .4rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.trust__google:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.trust__value--sm{
  font-family:var(--font-body) !important;
  font-size:clamp(.95rem, .85rem + .35vw, 1.1rem) !important;
  font-weight:600 !important; letter-spacing:.01em;
  color:var(--white) !important;
}

/* ---------- 16. Accesibilidad y print ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .scene__orb{ animation:none !important; }
  .wa-float__ring{ animation:none !important; opacity:0 !important; }
  .stars.is-in .star--last::after{ animation:none !important; opacity:0 !important; }
}
@media print{
  .header,.wa-float,.tabs,.map,.scene{ display:none !important; }
  .panel[hidden]{ display:block !important; }
  .has-js .view{ display:block !important; }
  body{ color:#000; background:#fff; }
}