/* ============================================================
   Perfect Smile | Colombian Luxury Clinic
   ============================================================ */

:root{
  --negro:#0a0a0a;
  --negro-suave:#161310;
  --dorado:#c9a84c;
  --dorado-fuerte:#a9822f;
  --dorado-claro:#e8d5a3;
  --crema:#f5f0e8;
  --crema-suave:#faf6ee;
  --blanco:#ffffff;
  --gris:#8a8a8a;
  --tinta:#211c14;
  --tinta-suave:#6b6155;
  --linea:#e4dbc8;

  --fuente-display:'Fraunces', Georgia, serif;
  --fuente-texto:'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radio:14px;
  --sombra:0 10px 32px -14px rgba(10,8,4,0.28);
  --franja:min(92vw, 1180px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--fuente-texto);
  color:var(--tinta);
  background:var(--crema-suave);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--fuente-display); font-weight:500; color:var(--negro); margin:0; text-wrap:balance; line-height:1.14; }
p{ margin:0; }
section{ position:relative; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* El header es fijo: sin este margen, al hacer clic en el menú el título
   de la sección queda escondido detrás de la barra. */
section[id]{ scroll-margin-top:96px; }

.envolvente{ width:var(--franja); margin:0 auto; }
.eyebrow{ font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--dorado-fuerte); font-weight:600; display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--dorado); display:inline-block; }
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fuente-texto); font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:15px 26px; border-radius:4px; border:1px solid transparent; white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.boton-dorado{ background:var(--dorado); color:var(--negro); }
.boton-dorado:hover{ background:var(--dorado-claro); transform:translateY(-2px); box-shadow:var(--sombra); }
.boton-linea{ border-color:rgba(245,240,232,0.4); color:var(--crema); }
.boton-linea:hover{ border-color:var(--dorado); color:var(--dorado-claro); }
.boton-linea-oscuro{ border-color:var(--linea); color:var(--tinta); }
.boton-linea-oscuro:hover{ border-color:var(--dorado); color:var(--dorado-fuerte); }
.boton-whatsapp{ background:#1f6e56; color:#fff; }
.boton-whatsapp:hover{ background:#25835f; transform:translateY(-2px); box-shadow:var(--sombra); }
.boton svg{ width:16px; height:16px; flex:none; }

/* ---------- header ---------- */
.encabezado{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:22px 0; transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.encabezado .envolvente{ display:flex; align-items:center; justify-content:space-between; }
.encabezado.oscuro{ background:transparent; }
.encabezado.claro{ background:rgba(250,246,238,0.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--linea); padding:14px 0; }
.logo-nav img{ width:172px; height:auto; transition:width .3s ease; }
.encabezado.claro .logo-nav img{ width:142px; }
.nav-principal{ display:flex; align-items:center; gap:22px; }
.nav-principal a{
  font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
  color:var(--crema); opacity:0.86; position:relative; padding:4px 0;
  white-space:nowrap; /* sin esto los rótulos largos se parten en varias líneas */
}
.encabezado.claro .nav-principal a{ color:var(--tinta); }
.nav-principal a::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background:var(--dorado); transition:right .3s ease; }
.nav-principal a:hover{ opacity:1; }
.nav-principal a:hover::after{ right:0; }
.encabezado-acciones{ display:flex; align-items:center; gap:14px; }
.encabezado-acciones .boton{ padding:11px 20px; }
.hamburguesa{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.hamburguesa span{ width:22px; height:2px; background:var(--crema); display:block; transition:.3s; }
.encabezado.claro .hamburguesa span{ background:var(--tinta); }

.menu-movil{
  position:fixed; inset:0; background:var(--negro); z-index:70;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition:transform .4s ease;
}
.menu-movil.abierto{ transform:translateY(0); }
.menu-movil a{ font-family:var(--fuente-display); font-size:26px; font-style:italic; color:var(--crema); }
.menu-movil .cerrar{ position:absolute; top:26px; right:26px; background:none; border:none; color:var(--crema); font-size:28px; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--negro); }
.hero-video-envoltura{ position:absolute; inset:0; }
.hero-video-envoltura video, .hero-video-envoltura img{ width:100%; height:100%; object-fit:cover; }
.hero-degradado{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,4,0.35) 0%, rgba(10,8,4,0.35) 40%, rgba(8,6,3,0.92) 100%); }
.hero-contenido{ position:relative; z-index:2; width:var(--franja); margin:0 auto; padding:180px 0 56px; color:var(--crema); }
.hero-contenido .eyebrow{ color:var(--dorado-claro); margin-bottom:22px; }
.hero-titulo{ font-size:clamp(40px, 7vw, 84px); font-style:italic; color:var(--crema); max-width:13ch; }
.hero-titulo .palabra{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.06em; }
/* La animación es una mejora, no un requisito: el texto termina visible aunque el JS falle. */
.hero-titulo .palabra span{
  display:inline-block;
  animation:subirPalabra .9s cubic-bezier(.2,.9,.25,1) both;
  animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes subirPalabra{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-titulo .palabra span{ animation:none; transform:none; }
}
.hero-sub{ margin:22px 0 34px; max-width:46ch; font-size:16px; color:rgba(245,240,232,0.82); }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:grid; grid-template-columns:repeat(3,auto); gap:44px; border-top:1px solid rgba(245,240,232,0.18); padding-top:28px; }
.hero-stats .n{ font-family:var(--fuente-display); font-style:italic; font-size:30px; color:var(--dorado-claro); line-height:1; }
.hero-stats .l{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(245,240,232,0.6); margin-top:6px; }

/* ---------- marquee ---------- */
.marquee-franja{ background:var(--dorado); overflow:hidden; padding:15px 0; }
.marquee-pista{ display:flex; width:max-content; animation:desplazar 32s linear infinite; }
.marquee-pista span{
  font-family:var(--fuente-texto); font-weight:600; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--negro); padding:0 26px; display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
}
.marquee-pista span::after{ content:"✦"; color:rgba(10,10,10,0.45); font-size:11px; }
@keyframes desplazar{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- reveal ----------
   El contenido se ve por defecto. La animación solo se activa si el JS está
   corriendo (clase .js en <html>): así, si el JS falla o el observador no se
   dispara, la sección se ve igual en vez de quedar en blanco. */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.js [data-reveal].visible{ opacity:1; transform:translateY(0); }
[data-reveal="fila"]{ display:flex; }

/* ---------- section scaffolding ---------- */
.seccion{ padding:104px 0; }
.seccion-cabecera{ max-width:640px; margin-bottom:52px; }
.seccion-cabecera h2{ font-size:clamp(30px,4vw,44px); font-style:italic; margin-top:14px; }
.seccion-cabecera p{ color:var(--tinta-suave); font-size:15.5px; margin-top:16px; max-width:56ch; }
.seccion-cabecera-fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---------- doctora ---------- */
.doctora{ background:var(--negro); color:var(--crema); }
.doctora .envolvente{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.doctora-foto{ position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:4/5; }
.doctora-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.doctora-foto::after{ content:""; position:absolute; inset:0; border:1px solid rgba(201,168,76,0.35); border-radius:var(--radio); pointer-events:none; }
.doctora-marca{ position:absolute; bottom:18px; left:18px; font-family:var(--fuente-display); font-style:italic; color:var(--dorado-claro); font-size:14px; background:rgba(10,8,4,0.55); padding:8px 14px; border-radius:3px; backdrop-filter:blur(6px); }
.doctora-texto .eyebrow{ color:var(--dorado); }
.doctora-texto h2{ color:var(--crema); font-size:clamp(28px,3.6vw,40px); font-style:italic; margin:16px 0 20px; }
.doctora-texto p.bio{ color:rgba(245,240,232,0.78); font-size:15.5px; max-width:56ch; margin-bottom:28px; }
.credenciales{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin-bottom:34px; }
.credencial{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:rgba(245,240,232,0.85); }
.credencial svg{ flex:none; width:18px; height:18px; color:var(--dorado); margin-top:2px; }

/* ---------- servicios ---------- */
.servicios-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; }
/* La tarjeta es la imagen cuadrada; el texto va superpuesto dentro de ella,
   sobre un degradado crema que solo cubre la parte baja. */
.servicio{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--crema-suave);
}
.servicio img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .7s ease;
}
.servicio:hover img{ transform:scale(1.05); }
.servicio-texto{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:42px 20px 20px;
  display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(to top,
    rgba(250,246,238,0.97) 0%,
    rgba(250,246,238,0.92) 45%,
    rgba(250,246,238,0.70) 72%,
    rgba(250,246,238,0) 100%);
}
.servicio h3{ font-size:16.5px; font-style:normal; font-weight:600; }
.servicio p{ font-size:12.5px; line-height:1.5; color:var(--tinta-suave); }
/* Las descripciones tienen 3 o 4 líneas: sin una altura común los títulos
   quedan a distinta altura entre tarjetas. */
@media (min-width:981px){
  .servicio-texto{ min-height:162px; }
}

/* ---------- proceso ---------- */
.proceso{ background:var(--crema); }
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px 40px; }
.paso{ display:flex; gap:18px; padding:26px 0; border-top:1px solid var(--linea); }
.paso .idx{ font-family:var(--fuente-display); font-style:italic; font-size:26px; color:var(--dorado); flex:none; width:42px; }
.paso h4{ font-size:15.5px; font-weight:600; font-style:normal; margin-bottom:6px; }
.paso p{ font-size:13px; color:var(--tinta-suave); }

/* ---------- casos de exito (carrusel) ---------- */
/* El carrusel ocupa todo el ancho de la sección; el padding lateral lo alinea
   con el título de la sección sin sacar las tarjetas fuera de la pantalla. */
.casos-carrusel{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  /* flex-start: sin esto el flex estira las tarjetas a la altura de la más
     alta y se pierde la proporción declarada en cada una. */
  align-items:flex-start;
  padding:0 calc((100% - var(--franja)) / 2) 18px;
  /* Sin esto, el snap obligatorio desplaza el carrusel y anula el padding
     izquierdo: la primera tarjeta se sale del borde de la pantalla. */
  scroll-padding-left:calc((100% - var(--franja)) / 2);
  scrollbar-width:thin;
}
.casos-carrusel::-webkit-scrollbar{ height:6px; }
.casos-carrusel::-webkit-scrollbar-thumb{ background:var(--dorado); border-radius:6px; }
.caso-tarjeta{ position:relative; flex:none; scroll-snap-align:start; border-radius:var(--radio); overflow:hidden; background:var(--negro); box-shadow:var(--sombra); }
.caso-tarjeta.video{ width:250px; aspect-ratio:9/16; }
/* 4:5 y no 1:1: en un antes/después el corte vertical se comería una de las
   dos mitades. Recortando a los lados se conservan ambas.
   El ancho 355 hace que su altura coincida con la de los videos (444px). */
.caso-tarjeta.foto{ width:355px; aspect-ratio:4/5; }
.caso-tarjeta video, .caso-tarjeta img{ width:100%; height:100%; object-fit:cover; }
.caso-etiqueta{ position:absolute; top:14px; left:14px; background:rgba(10,8,4,0.55); backdrop-filter:blur(6px); color:var(--dorado-claro); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 11px; border-radius:3px; font-weight:600; }
.casos-nota{ margin-top:18px; font-size:12.5px; color:var(--tinta-suave); display:flex; align-items:center; gap:8px; }

/* ---------- instalaciones ---------- */
.instalaciones{ background:var(--negro); color:var(--crema); }
.instalaciones .eyebrow{ color:var(--dorado-claro); }
.instalaciones-cabecera h2{ color:var(--crema); }
.instalaciones-cabecera p{ color:rgba(245,240,232,0.7); }
/* Son 5 fotos verticales: 3 verticales arriba + 2 anchas abajo, sobre una
   grilla de 6 columnas. Cada fila suma 6 exactas, así que nunca quedan huecos. */
.instalaciones-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.instalaciones-grid figure{ margin:0; border-radius:10px; overflow:hidden; position:relative; }
.instalaciones-grid figure:nth-child(-n+3){ grid-column:span 2; aspect-ratio:3/4; }
.instalaciones-grid figure:nth-child(n+4){ grid-column:span 3; aspect-ratio:16/10; }
.instalaciones-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.instalaciones-grid figure:hover img{ transform:scale(1.05); }

/* ---------- tecnologia ---------- */
.tecnologia{ background:var(--crema); }
/* Son 5 equipos: flex con centrado deja 3 arriba y 2 centrados abajo,
   en vez de una tarjeta suelta al final de una fila de 4. */
.tec-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.tec-tarjeta{
  flex:0 1 calc(33.333% - 14px);
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sombra); transition:transform .3s ease, border-color .3s ease;
}
.tec-tarjeta:hover{ transform:translateY(-4px); border-color:var(--dorado); }
.tec-media{ aspect-ratio:4/3; overflow:hidden; background:var(--crema); }
.tec-media img{ width:100%; height:100%; object-fit:cover; }
.tec-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(169,124,63,0.035) 10px 20px),
    var(--crema);
  border-bottom:1px dashed var(--line-strong, var(--linea));
  color:var(--dorado-fuerte);
}
.tec-placeholder svg{ width:34px; height:34px; opacity:.85; }
.tec-placeholder span{
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--tinta-suave); opacity:.75;
}
.tec-texto{ padding:22px 24px 26px; display:flex; flex-direction:column; }
/* Filete dorado corto: le da estructura al bloque de texto, igual que los
   eyebrow del resto de la página. */
.tec-texto h3{
  font-size:18px; font-style:normal; font-weight:600;
  padding-top:14px; position:relative;
}
.tec-texto h3::before{
  content:""; position:absolute; top:0; left:0;
  width:26px; height:2px; background:var(--dorado);
}
.tec-texto p{ font-size:13.5px; line-height:1.6; color:var(--tinta-suave); margin-top:9px; max-width:46ch; }

/* ---------- equipo ---------- */
/* Flex + centrado: con 7 fotos la última fila queda centrada en vez de
   dejar un hueco vacío a la derecha. */
.equipo-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.equipo-tarjeta{
  flex:0 1 calc(25% - 15px);
  border-radius:var(--radio); overflow:hidden; background:var(--negro); box-shadow:var(--sombra);
}
.equipo-tarjeta img{ width:100%; aspect-ratio:2/3; object-fit:cover; }
.equipo-nota{ margin-top:26px; font-size:13px; color:var(--tinta-suave); max-width:56ch; }

/* ---------- FAQ ---------- */
.faq{ background:var(--crema); }
.faq-lista{ max-width:760px; }
.faq-item{ border-top:1px solid var(--linea); }
.faq-item:last-child{ border-bottom:1px solid var(--linea); }
.faq-pregunta{ width:100%; background:none; border:none; text-align:left; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.faq-pregunta h3{ font-size:16px; font-weight:600; font-style:normal; font-family:var(--fuente-texto); }
.faq-pregunta .signo{ flex:none; width:22px; height:22px; position:relative; }
.faq-pregunta .signo::before, .faq-pregunta .signo::after{ content:""; position:absolute; background:var(--dorado-fuerte); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .3s ease; }
.faq-pregunta .signo::before{ width:14px; height:2px; }
.faq-pregunta .signo::after{ width:2px; height:14px; }
.faq-item.abierto .faq-pregunta .signo::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-respuesta{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-respuesta p{ padding:0 4px 22px; font-size:14px; color:var(--tinta-suave); max-width:64ch; }

/* ---------- ubicacion + contacto ---------- */
.franja-final{ background:var(--negro); color:var(--crema); }
.franja-final .envolvente{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.ubicacion h2, .contacto h2{ color:var(--crema); font-size:clamp(26px,3.2vw,34px); font-style:italic; margin:14px 0 18px; }
.ubicacion .eyebrow, .contacto .eyebrow{ color:var(--dorado-claro); }
.datos-nap{ display:flex; flex-direction:column; gap:16px; margin:24px 0 28px; }
.dato{ display:flex; gap:14px; align-items:flex-start; font-size:14px; color:rgba(245,240,232,0.85); }
.dato svg{ flex:none; width:19px; height:19px; color:var(--dorado); margin-top:2px; }
.dato .pendiente{ color:var(--dorado-claro); font-style:italic; }
/* ---------- sedes ---------- */
.sedes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.sede{
  background:rgba(245,240,232,0.04); border:1px solid rgba(245,240,232,0.14);
  border-radius:var(--radio); padding:22px 22px 18px;
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .3s ease, background .3s ease;
}
.sede:hover{ border-color:rgba(201,168,76,0.5); background:rgba(245,240,232,0.06); }
.sede-cabecera{ display:flex; gap:12px; align-items:flex-start; }
.sede-cabecera svg{ flex:none; width:20px; height:20px; color:var(--dorado); margin-top:3px; }
.sede-cabecera h3{ font-family:var(--fuente-display); font-size:20px; font-style:italic; color:var(--crema); margin-bottom:2px; }
.sede-cabecera p{ font-size:12.5px; color:rgba(245,240,232,0.6); letter-spacing:0.03em; }
.sede-tel{
  display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  font-size:14.5px; font-weight:600; color:var(--dorado-claro);
  font-variant-numeric:tabular-nums; transition:color .25s ease;
}
.sede-tel svg{ flex:none; width:17px; height:17px; }
.sede-tel:hover{ color:var(--crema); }

.mapa-envoltura{ border-radius:var(--radio); overflow:hidden; border:1px solid rgba(201,168,76,0.35); aspect-ratio:4/3; }
.mapa-envoltura iframe{ width:100%; height:100%; border:0; filter:grayscale(0.3) contrast(1.05); }
.contacto-tarjeta{ background:rgba(245,240,232,0.04); border:1px solid rgba(245,240,232,0.14); border-radius:var(--radio); padding:34px; }
.contacto-tarjeta p{ color:rgba(245,240,232,0.72); font-size:14px; margin-bottom:22px; }
.contacto-acciones{ display:flex; flex-direction:column; gap:12px; }
.contacto-acciones .boton{ width:100%; }

/* ---------- footer ---------- */
.pie{ background:var(--negro-suave); color:rgba(245,240,232,0.65); padding:56px 0 26px; }
.pie .envolvente{ display:flex; flex-direction:column; gap:34px; }
.pie-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
.pie-logo img{ width:180px; height:auto; margin-bottom:14px; }
.pie-logo p{ font-size:12.5px; max-width:32ch; color:rgba(245,240,232,0.5); }
.pie-nav{ display:flex; gap:34px; flex-wrap:wrap; }
.pie-nav a{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; color:rgba(245,240,232,0.7); }
.pie-nav a:hover{ color:var(--dorado-claro); }
.pie-social{ display:flex; gap:12px; }
.pie-social a{ width:36px; height:36px; border:1px solid rgba(245,240,232,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pie-social a:hover{ border-color:var(--dorado); color:var(--dorado-claro); }
.pie-social svg{ width:16px; height:16px; }
.pie-legal{ border-top:1px solid rgba(245,240,232,0.12); padding-top:22px; display:flex; justify-content:space-between; font-size:11.5px; flex-wrap:wrap; gap:10px; color:rgba(245,240,232,0.4); }

/* ---------- whatsapp flotante ---------- */
.whatsapp-flotante{
  position:fixed; bottom:26px; right:26px; z-index:55;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px -6px rgba(0,0,0,0.45);
  transition:transform .25s ease;
}
.whatsapp-flotante:hover{ transform:scale(1.08); }
.whatsapp-flotante svg{ width:28px; height:28px; }

/* ---------- responsive ---------- */
/* Solo el menú: pasa a hamburguesa a 1280px porque los 7 rótulos más los dos
   botones ya no caben. El resto del layout aguanta hasta 980px. */
@media (max-width:1280px){
  .nav-principal, .encabezado-acciones .boton-linea{ display:none; }
  .hamburguesa{ display:flex; }
}
/* Layout de tablet. */
@media (max-width:980px){
  .doctora .envolvente{ grid-template-columns:1fr; }
  .servicios-grid{ grid-template-columns:repeat(2,1fr); }
  .pasos{ grid-template-columns:1fr; }
  .instalaciones-grid{ grid-template-columns:repeat(2,1fr); }
  .instalaciones-grid figure:nth-child(-n+3){ grid-column:span 1; }
  .instalaciones-grid figure:nth-child(n+4){ grid-column:span 1; aspect-ratio:3/4; }
  .instalaciones-grid figure:nth-child(3){ grid-column:span 2; aspect-ratio:16/10; }
  .equipo-tarjeta{ flex:0 1 calc(50% - 10px); }
  .tec-tarjeta{ flex:0 1 calc(50% - 10px); }
  .franja-final .envolvente{ grid-template-columns:1fr; }
  .sedes{ grid-template-columns:1fr; }
  .seccion{ padding:76px 0; }
}
@media (max-width:560px){
  .logo-nav img, .encabezado.claro .logo-nav img{ width:118px; }
  .encabezado-acciones .boton{ padding:10px 14px; font-size:11px; }
  .encabezado-acciones{ gap:8px; }
  .hero-stats{ grid-template-columns:1fr 1fr; row-gap:20px; column-gap:20px; }
  .servicios-grid{ grid-template-columns:1fr; }
  /* A dos columnas las tarjetas quedan de 163px: el texto se vuelve ilegible. */
  .tec-tarjeta{ flex:0 1 100%; }
  .pie-top{ flex-direction:column; }
}