/* ==========================================================================
   Centro Dental El Diente de Oro — hoja de estilos (versión 3, 12-10-2026)
   Paleta CLARA de clínica dental: blanco + celeste muy suave, azul clínico
   para botones y texto azul marino. El dorado del logo es solo de acento.
   Por defecto SIEMPRE claro (aunque el teléfono esté en modo oscuro).
   El modo oscuro solo se activa si la persona toca el botón sol/luna
   (js/tema.js lo recuerda en ese navegador).
   ========================================================================== */

/* --- 1. TOKENS ------------------------------------------------------------ */
:root{
  color-scheme: light;        /* el sitio siempre se ve claro */
  --papel:        #FFFFFF;   /* fondo general: blanco */
  --superficie:   #FFFFFF;   /* tarjetas */
  --superficie-2: #EDF4FA;   /* secciones alternas: celeste claro (13-10: un poco más marcado para que se noten los cortes) */
  --tinta:        #13293D;   /* texto principal: azul marino */
  --tinta-suave:  #4F6475;   /* texto secundario */
  --linea:        #D3E1EC;   /* bordes y líneas de corte entre secciones */
  --franja:       #E3EEF7;   /* franja de formas de pago: un tono más que las secciones celestes */
  --primario:     #1767A8;   /* azul clínico: botones y enlaces */
  --primario-2:   #12579A;   /* azul más oscuro: hover */
  --primario-suave:#E8F2FB;  /* fondos de íconos, chips y pestañas */
  --menta:        #EAF6F3;   /* toque fresco en detalles */
  --oro:          #D9A83C;   /* acento del logo: líneas y detalles */
  --panel:        #EEF5FB;   /* bandas destacadas (ahora claras) */
  --panel-tinta:  #13293D;
  --panel-suave:  #4F6475;
  --ok:           #2F7A5B;
  --urgencia:     #B23A30;
  --urgencia-suave:#FDF2F0;
  --urgencia-borde:#F4D6D1;
  --urgencia-texto:#B23A30;  /* rojo para texto (errores, íconos) */
  --sobre-primario:#FFFFFF;  /* texto encima de los botones azules */
  --brillo-1:     #E3F0FA;   /* manchas de luz de la portada */
  --brillo-2:     #F1F8F5;
  --contacto-fin: #E6F0F9;
  --placeholder:  #6B828A;

  --display: "Fraunces", Georgia, serif;
  --texto:   "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ancho: 1160px;
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(19,41,61,.05), 0 12px 32px -16px rgba(19,41,61,.18);
  --sombra-fuerte: 0 24px 60px -24px rgba(19,41,61,.35);
}

/* Modo oscuro MANUAL (botón sol/luna). Azul marino suave, nunca negro puro.
   El azul de los botones se aclara y su texto pasa a oscuro para que se lea.
   Contrastes revisados: todos sobre 4,5:1.                                   */
:root[data-theme="oscuro"]{
  color-scheme: dark;
  --papel:        #0F1B26;
  --superficie:   #16273A;
  --superficie-2: #13222F;
  --franja:       #13222F;
  --tinta:        #E6EEF5;
  --tinta-suave:  #A8BAC9;
  --linea:        #2A3E51;
  --primario:     #6CB2EC;
  --primario-2:   #8DC4F2;
  --primario-suave:#1A3550;
  --sobre-primario:#0B1A27;
  --menta:        #173A35;
  --panel:        #16273A;
  --panel-tinta:  #E6EEF5;
  --panel-suave:  #A8BAC9;
  --ok:           #4FB487;
  --urgencia-suave:#2A1A1C;
  --urgencia-borde:#5A2A27;
  --urgencia-texto:#F4978D;
  --brillo-1:     #15304A;
  --brillo-2:     #12302B;
  --contacto-fin: #0F2234;
  --placeholder:  #8197A6;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  --sombra-fuerte: 0 24px 60px -24px rgba(0,0,0,.75);
}
/* Fotos y mapa un poco menos brillantes de noche */
:root[data-theme="oscuro"] .mapa-real__iframe{ filter:brightness(.9); }

/* --- 2. BASE -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Al saltar a una sección desde el menú, deja espacio para la barra fija */
[id]{ scroll-margin-top:88px; }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:var(--primario); text-decoration-thickness:2px; text-underline-offset:3px; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.015em; text-wrap:balance; }
h1{ font-size:clamp(2.3rem,5.4vw,3.6rem); }
h2{ font-size:clamp(1.8rem,3.8vw,2.5rem); }
h3{ font-size:1.18rem; letter-spacing:0; }
p{ margin:0; }
:where(a,button,summary,input,textarea,select):focus-visible{ outline:3px solid var(--oro); outline-offset:3px; border-radius:4px; }

.salto{ position:absolute; left:16px; top:-60px; z-index:999; background:var(--tinta); color:var(--papel);
  font-weight:700; font-size:.95rem; padding:10px 18px; border-radius:8px; text-decoration:none; transition:top .15s ease; }
.salto:focus{ top:12px; }

.envoltura{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:24px; }
@media (max-width:520px){ .envoltura{ padding-inline:16px; } }

.rotulo{ display:inline-flex; align-items:center; gap:10px; margin:0;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primario); }
.rotulo::before{ content:""; width:22px; height:2px; background:var(--oro); flex:none; }

.seccion{ padding-block:clamp(56px,8vw,96px); }
.seccion__intro{ display:flex; flex-direction:column; gap:14px; max-width:60ch; margin-bottom:40px; }
.seccion__intro p:last-child{ color:var(--tinta-suave); }
.seccion__intro--centro{ margin-inline:auto; text-align:center; align-items:center; }

/* --- 3. BOTONES ----------------------------------------------------------- */
.boton{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; min-height:48px; border:2px solid transparent; border-radius:999px;
  font:inherit; font-weight:700; font-size:.98rem; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
.boton:hover{ transform:translateY(-1px); }
.boton--primario{ background:var(--primario); color:var(--sobre-primario); }
.boton--primario:hover{ background:var(--primario-2); color:var(--sobre-primario); }
.boton--linea{ background:var(--superficie); color:var(--tinta); border-color:var(--linea); }
.boton--linea:hover{ border-color:var(--primario); color:var(--primario); }
.boton--urgencia{ background:var(--urgencia); color:#fff; }
.boton--urgencia:hover{ background:#962E25; color:#fff; }
.boton--grande{ padding:15px 26px; min-height:54px; font-size:1.04rem; }
.boton--bloque{ width:100%; }

/* --- 4. BARRA SUPERIOR ---------------------------------------------------- */
.barra{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--papel) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea); }
.barra__fila{ display:flex; align-items:center; gap:20px; min-height:70px; flex-wrap:wrap; }
.marca{ display:flex; align-items:center; gap:11px; min-height:44px; margin-right:auto;
  font-family:var(--display); font-weight:600; font-size:1.08rem; color:var(--tinta); text-decoration:none; line-height:1.15; }
.marca img{ flex:none; border-radius:50%; width:48px; height:48px; }
.marca small{ display:block; font-family:var(--texto); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-suave); }
.menu{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.menu a{ display:inline-flex; align-items:center; min-height:44px; color:var(--tinta-suave); text-decoration:none; font-size:.95rem; font-weight:600; }
.menu a:hover{ color:var(--primario); }
.menu-boton{ display:none; align-items:center; gap:9px; background:var(--superficie); border:1px solid var(--linea);
  border-radius:999px; padding:10px 16px; min-height:44px; font:inherit; font-weight:700; font-size:.92rem; color:var(--tinta); cursor:pointer; }
.menu-boton__rayas,.menu-boton__rayas::before,.menu-boton__rayas::after{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .2s ease, background-color .2s ease; }
.menu-boton__rayas::before,.menu-boton__rayas::after{ content:""; position:absolute; left:0; }
.menu-boton__rayas::before{ top:-6px; } .menu-boton__rayas::after{ top:6px; }
.barra--abierta .menu-boton__rayas{ background:transparent; }
.barra--abierta .menu-boton__rayas::before{ transform:translateY(6px) rotate(45deg); }
.barra--abierta .menu-boton__rayas::after{ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:980px){
  .menu{ display:none; }
  .menu-boton{ display:inline-flex; }
  .barra nav{ order:5; width:100%; }
  .barra--abierta .menu{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding-bottom:12px; }
  .barra--abierta .menu a{ display:block; padding:14px 4px; font-size:1.05rem; color:var(--tinta); border-top:1px solid var(--linea); }
}
/* Tablets chicas: el "Pedir hora" de arriba se esconde (está en la portada
   y en el botón flotante), así la barra queda en una sola línea */
@media (max-width:620px){ .barra__pedir{ display:none; } }
/* Entre celular y escritorio grande: menú más compacto */
@media (min-width:981px) and (max-width:1120px){
  .barra__fila{ gap:14px; } .menu{ gap:16px; } .menu a{ font-size:.9rem; }
  .barra__pedir{ padding:10px 16px; }
}
@media (max-width:480px){
  .barra__fila{ gap:10px; }
  /* el nombre se achica (o baja a 2 líneas) antes que empujar los botones */
  .marca{ flex:1 1 0; min-width:0; }
}
@media (max-width:400px){
  .barra__fila{ gap:8px; }
  .marca{ gap:8px; font-size:1rem; } .marca img{ width:40px; height:40px; }
  .menu-boton{ padding:10px 11px; gap:7px; font-size:.9rem; }
}
/* Teléfonos muy angostos: el botón de menú queda solo con las 3 rayas
   (la palabra "Menú" se sigue leyendo para lectores de pantalla) */
@media (max-width:345px){
  .menu-boton__texto{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .menu-boton{ width:44px; padding:0; justify-content:center; }
}

/* Botón sol/luna (esquina superior derecha) */
.tema-boton{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border-radius:50%;
  background:var(--superficie); color:var(--tinta); border:1px solid var(--linea); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .3s ease; }
.tema-boton:hover{ border-color:var(--primario); color:var(--primario); }
.tema-boton:active{ transform:rotate(-25deg); }
.tema-boton svg{ display:block; }
.tema-boton .tema-boton__sol{ display:none; }
:root[data-theme="oscuro"] .tema-boton .tema-boton__sol{ display:block; color:var(--oro); }
:root[data-theme="oscuro"] .tema-boton .tema-boton__luna{ display:none; }
/* Sin JavaScript el botón no sirve: se esconde */
html:not(.js) .tema-boton{ display:none; }

/* --- 5. PORTADA ----------------------------------------------------------- */
.portada-fondo{ position:relative; overflow:hidden;
  background:
    radial-gradient(55% 70% at 88% 25%, var(--brillo-1), transparent 70%),
    radial-gradient(40% 50% at 5% 95%, var(--brillo-2), transparent 70%),
    var(--papel); }
.portada{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
  padding-block:clamp(40px,6vw,80px); }
.portada__texto{ display:flex; flex-direction:column; gap:22px; }
.portada__bajada{ font-size:1.14rem; color:var(--tinta-suave); max-width:46ch; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:12px; }
.portada__datos{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; }
.portada__datos li{ display:flex; align-items:center; gap:8px; background:var(--superficie); border:1px solid var(--linea);
  border-radius:999px; padding:7px 14px; font-size:.92rem; color:var(--tinta-suave); }
.portada__datos strong{ color:var(--tinta); }
.portada__datos svg{ color:var(--primario); flex:none; }

.portada__foto{ position:relative; margin:0; isolation:isolate; }
.portada__foto > img{ display:block; width:100%; height:auto; aspect-ratio:4/5; max-height:620px; object-fit:cover; object-position:50% 30%;
  border-radius:28px; box-shadow:var(--sombra-fuerte); }
.portada__foto::before{ content:""; position:absolute; inset:-14px -14px 22px 22px; border-radius:34px;
  background:var(--primario-suave); z-index:-1; }
.foto-chip{ position:absolute; display:flex; align-items:center; gap:12px; background:var(--superficie);
  border-radius:16px; padding:12px 16px; box-shadow:var(--sombra); font-size:.92rem; line-height:1.3; }
.foto-chip strong{ display:block; font-size:1.05rem; color:var(--tinta); }
.foto-chip span{ color:var(--tinta-suave); }
.foto-chip--arriba{ top:22px; left:-22px; }
.foto-chip--abajo{ bottom:26px; right:-18px; }
.foto-chip__icono{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--primario-suave); color:var(--primario); }
/* Logo original de la clínica (recortado en círculo, sin modificar) */
.foto-chip__logo{ width:54px; height:54px; border-radius:50%; flex:none; display:block;
  box-shadow:0 2px 8px -2px rgba(19,41,61,.25); }
.foto-ref{ position:absolute; left:14px; bottom:14px; background:rgba(19,41,61,.62); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; padding:4px 10px; border-radius:999px; }
@media (max-width:900px){
  .portada{ grid-template-columns:1fr; }
  .portada__foto{ max-width:520px; margin-inline:auto; width:100%; }
  .portada__foto > img{ aspect-ratio:5/4; }
  .portada__foto::before{ display:none; }
  .foto-chip{ display:none; }   /* en pantallas chicas los datos ya están en el texto */
  .foto-ref{ left:auto; right:12px; bottom:auto; top:12px; }
}
@media (max-width:520px){
  .portada__acciones .boton{ flex:1 1 100%; }
  .foto-chip{ padding:9px 12px; font-size:.82rem; }
  .foto-chip__icono{ width:34px; height:34px; }
}

/* Estado abierto/cerrado */
.estado{ display:inline-flex; align-items:center; gap:10px; width:fit-content; padding:8px 16px 8px 13px;
  border-radius:999px; background:var(--superficie); border:1px solid var(--linea); font-weight:700; font-size:.95rem; }
.estado__punto{ width:11px; height:11px; border-radius:50%; background:var(--tinta-suave); flex:none; }
.estado[data-estado="abierto"] .estado__punto{ background:var(--ok); animation:latido 2s ease-out infinite; }
.estado[data-estado="pronto"] .estado__punto{ background:#C98B12; }
.estado[data-estado="cerrado"] .estado__punto{ background:#9AA5A0; }
@keyframes latido{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);} 100%{ box-shadow:0 0 0 10px transparent;} }

/* --- 6. URGENCIAS (banda clara con borde rojo) ---------------------------- */
.urgencia{ background:var(--urgencia-suave); color:var(--tinta); border-block:1px solid var(--urgencia-borde); }
.urgencia__fila{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px 26px; padding-block:24px; }
.urgencia__icono{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--urgencia); color:#fff; }
.urgencia h2{ font-size:clamp(1.3rem,3vw,1.7rem); color:var(--tinta); }
.urgencia p{ color:var(--tinta-suave); margin-top:4px; }
@media (max-width:700px){ .urgencia__fila{ grid-template-columns:auto 1fr; } .urgencia .boton{ grid-column:1 / -1; } }

/* Secciones alternas en celeste muy claro (de borde a borde de la pantalla) */
.seccion--celeste{
  /* Fondo celeste de borde a borde de la pantalla, con una línea fina arriba
     y abajo para que el corte entre secciones se note también en modo claro */
  border-image: linear-gradient(var(--linea) 0 1px, var(--superficie-2) 1px calc(100% - 1px), var(--linea) calc(100% - 1px)) fill 0 / 0 / 0 100vmax;
}

/* --- 7. TRATAMIENTOS (tarjetas) ------------------------------------------ */
.atenciones{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .atenciones{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .atenciones{ grid-template-columns:1fr; } }
.atencion{ display:flex; flex-direction:column; gap:10px; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--radio); padding:22px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.atencion:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:color-mix(in srgb, var(--primario) 40%, var(--linea)); }
.atencion__marca{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--primario-suave); color:var(--primario); }
.atencion p{ font-size:.95rem; color:var(--tinta-suave); flex:1; }
.atencion__pedir{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  background:transparent; border:0; padding:10px 0; min-height:44px; font:inherit; font-size:.95rem; font-weight:700; color:var(--primario); cursor:pointer; }
.atencion__pedir::after{ content:"→"; transition:transform .15s ease; }
.atencion__pedir:hover::after{ transform:translateX(3px); }
.campo--resaltado{ outline:3px solid var(--oro); outline-offset:2px; }

/* --- 8. FRANJA DE PAGOS ---------------------------------------------------- */
.franja{ background:var(--franja); border-block:1px solid var(--linea); }
.franja__fila{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 36px; padding-block:24px; }
.franja__fila p{ font-weight:700; color:var(--tinta); }
.pagos{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.pagos li{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--linea); border-radius:999px;
  padding:6px 15px; font-size:.88rem; font-weight:700; background:var(--superficie); }
.pagos li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--oro); }
/* "Presupuesto sin costo" no es forma de pago: va aparte, como beneficio */
.franja__extra{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--primario); }
.franja__extra svg{ flex:none; }
@media (max-width:700px){ .franja__extra{ margin-left:0; } }

/* --- 9. RESULTADOS (pestañas + comparador centrado) ----------------------- */
.casos-pestanas{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 22px; padding:6px;
  width:fit-content; max-width:100%; background:var(--superficie); border:1px solid var(--linea); border-radius:999px; }
.casos-pestanas button{ border:0; background:transparent; border-radius:999px; padding:10px 18px; min-height:44px;
  font:inherit; font-size:.95rem; font-weight:700; color:var(--tinta-suave); cursor:pointer; }
.casos-pestanas button[aria-selected="true"]{ background:var(--primario); color:var(--sobre-primario); }
.resultados{ max-width:640px; margin-inline:auto; }
/* En celular las 2 pestañas van lado a lado, mismo ancho */
@media (max-width:520px){
  .casos-pestanas{ display:grid; grid-template-columns:1fr 1fr; width:100%; border-radius:18px; gap:6px; }
  .casos-pestanas button{ border-radius:13px; padding:8px 10px; line-height:1.25; font-size:.9rem; }
}
.resultados .comparador[hidden]{ display:none; }
.nota-legal{ margin:22px auto 0; max-width:62ch; text-align:center; font-size:.85rem; color:var(--tinta-suave); }

/* --- 10. EQUIPO ------------------------------------------------------------
   Foto (sin marco) + nombre en texto. En celular: fila que se desliza hacia
   el lado, con la siguiente tarjeta asomando, flechas y puntos (js/equipo.js). */
.equipo{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.equipo li{ display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:var(--superficie);
  border:1px solid var(--linea); box-shadow:var(--sombra); transition:transform .25s ease, box-shadow .25s ease; }
.equipo li:hover{ transform:translateY(-5px); box-shadow:var(--sombra-fuerte); }
.equipo img{ display:block; width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; background:var(--superficie-2); }
.equipo__texto{ padding:16px 20px 20px; }
.equipo__texto h3{ font-size:1.2rem; }
.equipo__texto p{ color:var(--tinta-suave); font-size:.95rem; margin-top:2px; }
.carrusel-pista,.carrusel-controles{ display:none; }
@media (max-width:900px) and (min-width:701px){ .equipo{ gap:16px; } }
@media (max-width:700px){
  .equipo{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:-16px; padding:4px 16px 14px; scroll-padding-inline:16px; scrollbar-width:none; position:relative; }
  .equipo::-webkit-scrollbar{ display:none; }
  .equipo li{ flex:0 0 80%; scroll-snap-align:center; }
  .equipo li:hover{ transform:none; }
  .equipo:focus-visible{ outline:3px solid var(--oro); outline-offset:2px; }
  .carrusel-pista{ display:flex; justify-content:center; align-items:center; gap:8px; margin:-18px 0 14px;
    font-size:.9rem; font-weight:700; color:var(--primario); }
  .carrusel-pista span{ display:inline-block; animation:empujar 1.4s ease-in-out infinite; }
  .js .carrusel-controles{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:6px; }
}
@keyframes empujar{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }
.carrusel-flecha{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--superficie); color:var(--primario); border:1px solid var(--linea); box-shadow:var(--sombra); }
.carrusel-flecha:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.carrusel-puntos{ display:flex; }
.carrusel-punto{ width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; }
.carrusel-punto::before{ content:""; width:9px; height:9px; border-radius:999px; background:var(--linea); transition:width .2s ease, background-color .2s ease; }
.carrusel-punto[aria-current="true"]::before{ width:22px; background:var(--primario); }
/* --- 11. SEDES: mapa real + tarjetas --------------------------------------- */
.sedes-rejilla{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:stretch; }
@media (max-width:900px){ .sedes-rejilla{ grid-template-columns:1fr; } }
.mapa-real{ position:relative; display:flex; flex-direction:column; min-height:480px; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea); box-shadow:var(--sombra); background:var(--superficie); }
.mapa-real__iframe{ flex:1; width:100%; min-height:420px; border:0; display:block; background:var(--superficie-2); }
.mapa-real__barra{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; border-top:1px solid var(--linea); background:var(--superficie); }
.mapa-real__rotulo{ font-weight:700; margin-right:auto; }
.mapa__cerca,.mapa__todas{ display:inline-flex; align-items:center; gap:8px; background:var(--superficie); color:var(--tinta);
  border:1px solid var(--linea); border-radius:999px; padding:9px 15px; min-height:44px; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }
.mapa__cerca:hover,.mapa__todas:hover{ border-color:var(--primario); color:var(--primario); }
.mapa__cerca svg{ color:var(--primario); }
.mapa__todas[hidden],.mapa__cerca[hidden]{ display:none; }
.mapa__cerca--buscando svg{ animation:girar 1s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (max-width:900px){ .mapa-real{ min-height:400px; } .mapa-real__iframe{ min-height:340px; } }

.sedes{ display:flex; flex-direction:column; gap:12px; }
.sede{ background:var(--superficie); border:2px solid var(--linea); border-radius:var(--radio);
  padding:18px 20px; transition:border-color .2s ease, box-shadow .2s ease; }
.sede:hover{ border-color:color-mix(in srgb, var(--primario) 45%, var(--linea)); }
.sede--activa{ border-color:var(--primario); box-shadow:0 0 0 4px var(--primario-suave); }
.sede__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.sede h3{ font-size:1.25rem; }
.sede__num{ font:700 .78rem var(--texto); color:var(--primario); background:var(--primario-suave); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.sede__dir{ color:var(--tinta-suave); font-size:.95rem; }
.sede__fono{ font-size:.92rem; margin-top:2px; }
.sede__fono a,a[href^="tel:"]{ white-space:nowrap; }   /* el número no se corta a la mitad */
@media (max-width:520px){ .sede__acciones .boton--primario{ flex:1 1 100%; } }
.sede__acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.sede__acciones .boton{ min-height:44px; padding:9px 16px; font-size:.9rem; }
.mapa__privado{ font-size:.82rem; color:var(--tinta-suave); margin-top:12px; }

.horario-tabla{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:22px 24px; margin-top:22px; box-shadow:var(--sombra); }
.horario-tabla h3{ font-size:1.25rem; margin-bottom:12px; }
.horario-tabla h3 span{ font-family:var(--texto); font-size:.9rem; font-weight:600; color:var(--tinta-suave); }
.horario-tabla dl{ margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:700px){ .horario-tabla dl{ grid-template-columns:1fr; } }
.horario-tabla dl > div{ padding:12px 14px; border-radius:var(--radio-chico); background:var(--papel); border:1px solid var(--linea); font-variant-numeric:tabular-nums; }
.horario-tabla dt{ font-weight:700; }
.horario-tabla dd{ margin:0; color:var(--tinta-suave); }
.horario-tabla .hoy{ background:var(--primario-suave); border-color:var(--primario); }
.horario-tabla .hoy dt::after{ content:"Hoy"; margin-left:8px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--primario); color:var(--sobre-primario); padding:2px 8px; border-radius:999px; vertical-align:2px; }
.horario-tabla > p{ margin-top:12px; font-size:.92rem; color:var(--tinta-suave); }

/* --- 12. PRIMERA VISITA ---------------------------------------------------- */
.pasos{ counter-reset:paso; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
.paso{ display:flex; flex-direction:column; gap:10px; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:24px; }
.paso::before{ counter-increment:paso; content:counter(paso); width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--primario); color:var(--sobre-primario); font:700 1.1rem var(--texto); }
.paso p{ color:var(--tinta-suave); font-size:.95rem; }

/* --- 13. PREGUNTAS --------------------------------------------------------- */
.preguntas{ max-width:780px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; }
.pregunta{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-chico); padding-inline:20px; }
.pregunta summary{ cursor:pointer; list-style:none; padding-block:16px; min-height:44px; font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; gap:16px; align-items:center; }
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{ content:"+"; font-size:1.5rem; color:var(--primario); line-height:1; flex:none; }
.pregunta[open] summary::after{ content:"\2013"; }
.pregunta p{ padding-bottom:18px; color:var(--tinta-suave); }

/* --- 14. CONTACTO (claro) ------------------------------------------------ */
.contacto{ background:linear-gradient(180deg, var(--superficie-2), var(--contacto-fin)); color:var(--tinta); border-top:1px solid var(--linea); }
.contacto .rotulo{ color:var(--primario); }
.contacto h2{ color:var(--tinta); }
.contacto__rejilla{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:start; }
@media (max-width:900px){ .contacto__rejilla{ grid-template-columns:1fr; } }
.contacto__texto{ display:flex; flex-direction:column; gap:16px; }
.contacto__texto p{ color:var(--tinta-suave); max-width:44ch; }
.aviso{ border-left:3px solid var(--oro); padding:4px 0 4px 16px; font-size:.88rem; }
.formulario{ display:flex; flex-direction:column; gap:16px; background:var(--superficie); color:var(--tinta);
  border-radius:20px; padding:clamp(20px,3vw,30px); box-shadow:var(--sombra-fuerte); }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo label{ font-size:.85rem; font-weight:700; color:var(--tinta); }
.campo input,.campo select,.campo textarea{ font:inherit; font-size:1rem; color:var(--tinta); background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio-chico); padding:12px 14px; width:100%; min-height:48px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--primario); }
.campo textarea{ resize:vertical; min-height:96px; }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--placeholder); }
.par{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pila{ display:flex; flex-direction:column; gap:16px; }
@media (max-width:520px){ .par{ grid-template-columns:1fr; } }
.error{ font-size:.88rem; color:var(--urgencia-texto); font-weight:700; }
.error:empty{ display:none; }
.nota-form{ font-size:.85rem; color:var(--tinta-suave); }

/* --- 15. PIE --------------------------------------------------------------- */
.pie{ background:var(--papel); border-top:1px solid var(--linea); padding-block:40px; font-size:.9rem; color:var(--tinta-suave); }
.pie__fila{ display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:flex-start; }
.sin-corte{ white-space:nowrap; }
/* En celular, espacio abajo para que el botón flotante de WhatsApp no tape los enlaces */
@media (max-width:700px){ .pie{ padding-bottom:96px; } }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:4px 20px; list-style:none; margin:0; padding:0; }
.pie__enlaces a{ display:inline-block; padding-block:12px; min-width:44px; text-align:center; color:var(--tinta-suave); text-decoration:none; font-weight:700; }
.pie__enlaces a:hover{ color:var(--primario); text-decoration:underline; }

/* --- 16. BOTÓN FLOTANTE Y VENTANITA DE SEDES ------------------------------- */
.flotante{ position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:9px;
  background:var(--primario); color:var(--sobre-primario); border-radius:999px; padding:14px 20px; min-height:52px;
  font-weight:700; font-size:1rem; text-decoration:none; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.flotante:hover{ background:var(--primario-2); color:var(--sobre-primario); }
.js .flotante{ transition:opacity .3s ease, transform .3s ease; }
.js .flotante--oculto{ opacity:0; transform:translateY(20px); pointer-events:none; }

.elegir{ width:min(440px, calc(100% - 32px)); max-height:calc(100% - 32px); border:1px solid var(--linea); border-radius:20px;
  padding:28px 24px 22px; background:var(--superficie); color:var(--tinta); box-shadow:var(--sombra-fuerte); }
.elegir::backdrop{ background:rgba(11,29,34,.55); backdrop-filter:blur(3px); }
.elegir[open]{ animation:subirVentana .28s cubic-bezier(.2,1.2,.4,1); }
@keyframes subirVentana{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.elegir h2{ font-size:1.6rem; margin-top:8px; }
.elegir__bajada{ color:var(--tinta-suave); margin-top:6px; font-size:.95rem; }
.elegir__lista{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.elegir__lista li{ display:flex; flex-direction:column; gap:2px; }
.elegir__sede{ display:flex; flex-direction:column; gap:2px; padding:14px 18px; min-height:60px; border-radius:14px;
  background:var(--primario); color:var(--sobre-primario); text-decoration:none; transition:transform .15s ease, background-color .15s ease; }
.elegir__sede:hover{ background:var(--primario-2); transform:translateY(-1px); color:var(--sobre-primario); }
.elegir__sede strong{ font-size:1.12rem; } .elegir__sede span{ font-size:.88rem; opacity:.9; }
.elegir--urgencia .elegir__sede{ background:var(--urgencia); color:#fff; } .elegir--urgencia .elegir__sede:hover{ background:#962E25; color:#fff; }
.elegir__fono{ display:inline-flex; align-items:center; min-height:44px; font-size:.9rem; padding-left:4px; color:var(--tinta-suave); }
.elegir__cerrar{ position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:50%; border:0;
  background:var(--superficie-2); color:var(--tinta); font-size:1.6rem; line-height:1; cursor:pointer; }

/* --- 17. APARECER AL HACER SCROLL ----------------------------------------- */
.js .aparece{ opacity:0; transform:translateY(18px); transition:opacity .6s ease var(--retraso,0ms), transform .6s ease var(--retraso,0ms); }
.js .aparece.visible{ opacity:1; transform:none; }
.atencion.visible:hover{ transform:translateY(-4px); }
@media (min-width:701px){ .equipo li.visible:hover{ transform:translateY(-4px); } }

/* --- 18. PÁGINAS LEGALES Y 404 -------------------------------------------- */
.legal{ max-width:72ch; margin-inline:auto; padding-block:56px; }
.legal h1{ font-size:clamp(2rem,4.5vw,2.8rem); margin-bottom:10px; }
.legal h2{ font-size:1.35rem; margin-top:38px; margin-bottom:10px; }
.legal p,.legal li{ color:var(--tinta-suave); }
.legal p + p{ margin-top:12px; }
.legal ul{ padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.legal .fecha{ font-size:.85rem; }
.caja-aviso{ background:var(--superficie-2); border-left:3px solid var(--oro); border-radius:var(--radio-chico); padding:16px 20px; margin:26px 0; font-size:.92rem; }
mark.rellenar{ background:rgba(217,168,60,.28); color:var(--tinta); padding:1px 5px; border-radius:3px; font-weight:700; }
/* compatibilidad con páginas que aún usan el nombre antiguo del botón */
.boton--oro{ background:var(--primario); color:var(--sobre-primario); } .boton--oro:hover{ background:var(--primario-2); color:var(--sobre-primario); }

/* --- 19. MOVIMIENTO REDUCIDO (siempre al final) --------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* Chip de distancia: solo aparece después de "¿Cuál me queda más cerca?" */
.sede__num:empty{ display:none; }

/* --- 19-10-2026: PORTADA con foto del equipo (horizontal) ----------------- */
/* En computador la foto ocupa el lado derecho de la portada y se funde con   */
/* el fondo hacia la izquierda, donde va el texto.                             */
.portada__foto > img{ aspect-ratio:16/9; object-position:75% 30%; }
@media (min-width:1200px){
  .portada-fondo{ min-height:clamp(540px,44vw,680px); display:flex; align-items:center; }
  .portada{ width:100%; }
  .portada__texto{ position:relative; z-index:1; }
  .portada__foto{ position:absolute; inset:0 0 0 auto; width:min(64%,1150px); z-index:0; }
  .portada__foto > img{ width:100%; height:100%; aspect-ratio:auto; max-height:none; object-fit:cover; object-position:80% 25%;
    border-radius:0; box-shadow:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 32%);
            mask-image:linear-gradient(to right, transparent 0, #000 32%); }
  .portada__foto::before{ display:none; }
  .foto-chip--arriba{ top:auto; bottom:36px; left:30%; }
  .foto-chip--abajo{ bottom:36px; right:28px; }
}
@media (max-width:900px){
  .portada__foto > img{ aspect-ratio:5/4; object-position:78% 30%; }
}

/* --- 19-10-2026: TARJETAS DE TRATAMIENTO con foto -------------------------- */
.atencion{ overflow:hidden; }
.atencion__foto{ margin:-22px -22px 6px; aspect-ratio:4/3; background:var(--primario-suave); color:var(--primario);
  display:grid; place-items:center; overflow:hidden; }
.atencion__foto img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.atencion:hover .atencion__foto img{ transform:scale(1.04); }
.atencion p{ flex:0 0 auto; }
.atencion p.atencion__cuando{ flex:1 1 auto; font-size:.92rem; }
.atencion__cuando strong{ display:block; color:var(--tinta); font-size:.88rem; margin-bottom:2px; }
.atenciones__nota{ margin-top:18px; font-size:.85rem; color:var(--tinta-suave); text-align:center; }
@media (prefers-reduced-motion:reduce){ .atencion__foto img{ transition:none; } .atencion:hover .atencion__foto img{ transform:none; } }

/* --- 19-10-2026: en celular se muestran 6 tratamientos y un botón "Ver los 9" --- */
@media (max-width:560px){
  .atenciones.recortada .atencion:nth-child(n+7){ display:none; }
  .atenciones__ver-todos:not([hidden]){ display:flex; margin:18px auto 0; width:100%; justify-content:center; }
}
@media (min-width:561px){ .atenciones__ver-todos{ display:none !important; } }
.atenciones__ver-todos[hidden]{ display:none !important; }

/* 19-10-2026 (revisión): entre 901 y 1199 px la foto va debajo del texto, para no tapar las letras */
@media (min-width:901px) and (max-width:1199px){
  .portada{ grid-template-columns:1fr; }
  .portada__foto{ max-width:720px; margin-inline:auto; width:100%; }
  .portada__foto::before{ display:none; }
  .foto-chip{ display:none; }
  .foto-ref{ left:auto; right:12px; bottom:auto; top:12px; }
}
/* Teléfono fijo de cada sede: más fácil de tocar en celular */
.sede__fono a{ display:inline-block; padding-block:12px; margin-block:-8px; }

/* --- 19-10-2026 (noche): PORTADA con 2 fotos que se alternan --------------- */
.portada__slide{ transition:opacity .8s ease; }
.portada__foto > .portada__slide + .portada__slide{ position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.portada__foto > .portada__slide:not(.es-visible){ opacity:0; }
.portada__foto > .portada__slide.es-visible{ opacity:1; }
/* La foto de la Dra. Araujo es vertical: se encuadra para que se vean ambas caras */
.portada__foto > .portada__slide--atencion{ object-position:50% 30%; }
/* En PC la foto de la Dra. Araujo ocupa solo la parte derecha, para que el póster del fondo no quede detrás del texto */
@media (min-width:1200px){
  .portada__foto > .portada__slide + .portada__slide--atencion{ left:auto; right:0; width:72%; object-position:50% 26%;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 38%);
            mask-image:linear-gradient(to right, transparent 0, #000 38%); }
}
/* Puntitos para cambiar de foto (también pausan el cambio automático) */
.portada__puntos{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:4px; z-index:2;
  background:rgba(255,255,255,.75); border-radius:999px; padding:2px 6px; backdrop-filter:blur(4px); }
.portada__puntos[hidden]{ display:none; }
.portada__puntos button{ width:24px; height:24px; border:0; padding:0; background:transparent; cursor:pointer; display:grid; place-items:center; }
.portada__puntos button::before{ content:""; width:9px; height:9px; border-radius:50%; background:#13293D; opacity:.3; transition:opacity .3s, width .3s; }
.portada__puntos button[aria-pressed="true"]::before{ opacity:.9; width:20px; border-radius:6px; }
.portada__puntos button:focus-visible{ outline:2px solid var(--primario); outline-offset:1px; border-radius:50%; }
@media (min-width:1200px){ .portada__puntos{ left:auto; transform:none; right:28px; bottom:auto; top:24px; } }

/* --- Sonrisa animada bajo "tu sonrisa" + destellos ------------------------- */
.sonrisa{ position:relative; display:inline-block; white-space:nowrap; cursor:default; }
.sonrisa__curva{ position:absolute; left:2%; right:2%; bottom:-.32em; width:96%; height:.42em; overflow:visible; pointer-events:none; }
.sonrisa__curva path{ fill:none; stroke:var(--oro); stroke-width:5; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; }
.sonrisa.dibujada .sonrisa__curva path{ animation:dibujarSonrisa 1.1s cubic-bezier(.6,.1,.3,1) forwards; }
.sonrisa.otra-vez .sonrisa__curva path{ animation:dibujarSonrisa2 1.1s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes dibujarSonrisa{ to{ stroke-dashoffset:0; } }
@keyframes dibujarSonrisa2{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
/* Destellos: estrellitas de 4 puntas, como el brillo de un diente limpio */
.destello{ position:absolute; width:.5em; height:.5em; pointer-events:none; opacity:0;
  background:var(--oro);
  clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.destello--1{ top:-.26em; right:-.42em; }
.destello--2{ top:.18em; right:-.7em; width:.3em; height:.3em; background:var(--primario); }
.destello--3{ top:-.5em; right:.2em; width:.28em; height:.28em; }
.sonrisa.dibujada .destello{ animation:destellar 2.8s ease-in-out infinite; }
.sonrisa.dibujada .destello--1{ animation-delay:1s; }
.sonrisa.dibujada .destello--2{ animation-delay:1.5s; }
.sonrisa.dibujada .destello--3{ animation-delay:2.1s; }
@keyframes destellar{ 0%,100%{ opacity:0; transform:scale(.3) rotate(0deg); } 35%{ opacity:1; transform:scale(1) rotate(45deg); } 60%{ opacity:0; transform:scale(.4) rotate(90deg); } }
/* El número "+20" da un saltito al pasar el mouse por la ficha */
.foto-chip strong{ transition:transform .3s ease; }
.foto-chip:hover strong{ transform:scale(1.08); }
@media (max-width:520px){ .destello--2{ right:-.5em; } }
@media (prefers-reduced-motion: reduce){
  .sonrisa__curva path{ stroke-dashoffset:0; }
  .destello{ display:none; }
}

/* --- SOBRE NOSOTROS (claro, centrado) -------------------------------------- */
.nosotros{ padding-block:clamp(48px,7vw,88px); }
.nosotros__caja{ max-width:780px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.nosotros__caja h2{ margin:0; text-wrap:balance; }
.nosotros__lema{ margin:0; font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,2.2vw,1.45rem); color:var(--primario); }
.nosotros__linea{ display:block; width:72px; height:3px; border-radius:3px; background:var(--oro); margin:6px 0 4px; }
.nosotros__caja > p:not(.rotulo):not(.nosotros__lema){ margin:0; color:var(--tinta-suave); font-size:1.08rem; max-width:62ch; }
.nosotros__caja strong{ color:var(--tinta); }
.nosotros__boton{ margin-top:10px; border-color:var(--oro); }
.nosotros__boton span{ display:inline-block; transition:transform .25s ease; }
.nosotros__boton:hover span{ transform:translateX(4px); }

/* --- 19-10-2026 (opción B): en celular y tablet la portada se parece a la de PC:
       la foto va arriba a todo el ancho y se funde hacia abajo con el texto ---- */
@media (max-width:1199px){
  .portada{ padding-top:0; gap:0; }
  .portada__foto{ order:-1; max-width:none; width:100vw; margin-left:calc(50% - 50vw); margin-right:0; }
  .portada__foto > img, .portada__foto > .portada__slide + .portada__slide{
    aspect-ratio:auto; height:clamp(300px,82vw,480px); max-height:none; width:100%; object-fit:cover;
    border-radius:0; box-shadow:none;
    -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 58%, transparent 100%); }
  .portada__foto > .portada__slide:first-child{ object-position:96% 22%; }
  .portada__foto > .portada__slide--atencion{ object-position:55% 30%; }
  .portada__puntos{ left:auto; transform:none; right:14px; bottom:auto; top:12px; }
  .portada__texto{ margin-top:clamp(-70px,-12vw,-40px); position:relative; z-index:1; }
}

/* --- 26-10-2026: en tablet (768–1199 px) la portada usa el diseño de PC:
       foto a la derecha que se funde hacia el texto. La foto arriba queda solo para celulares. */
@media (min-width:768px) and (max-width:1199px){
  .portada-fondo{ min-height:560px; display:flex; align-items:center; }
  .portada{ width:100%; padding-block:48px; }
  .portada__texto{ position:relative; z-index:1; margin-top:0; max-width:54%; }
  .portada__texto h1{ font-size:clamp(2.1rem,4.4vw,2.9rem); }
  .portada__foto{ position:absolute; inset:0 0 0 auto; width:56%; max-width:none; margin:0; order:0; }
  .portada__foto > img, .portada__foto > .portada__slide + .portada__slide{
    position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; max-height:none; border-radius:0; box-shadow:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40%);
            mask-image:linear-gradient(to right, transparent 0, #000 40%); }
  .portada__foto > .portada__slide:first-child{ object-position:86% 25%; }
  .portada__foto > .portada__slide--atencion{ object-position:62% 28%; }
  .portada__acciones .boton{ flex:1 1 100%; }
}

/* --- 26-10-2026: puntitos de la portada con área táctil de 44 px ----------- */
/* Se ven igual de chicos, pero cada uno se puede tocar en un cuadro de 44×44 px. */
.portada__puntos{ gap:0; padding:0; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; isolation:isolate; }
.portada__puntos::before{ content:""; position:absolute; inset:10px 6px; border-radius:999px; z-index:-1;
  background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.portada__puntos button{ width:44px; height:44px; }
.portada__puntos button:focus-visible{ outline-offset:-8px; border-radius:12px; }
@media (min-width:1200px){ .portada__puntos{ right:18px; top:14px; } }
@media (max-width:1199px){ .portada__puntos{ right:4px; top:2px; } }

/* --- 26-10-2026: PORTADA EN iPad (768–1199 px) -------------------------------
   La foto va como tarjeta 4:3 (esquinas redondeadas, sombra y placa celeste),
   así la foto del equipo se ve completa (los 3 doctores). Celular y PC no cambian. */
@media (min-width:768px) and (max-width:1199px){
  .portada-fondo{ min-height:0; display:block; }
  .portada{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.5vw,44px); align-items:center; padding-block:clamp(40px,6vw,64px); }
  .portada__texto{ max-width:none; margin-top:0; }
  .portada__texto h1{ font-size:clamp(2rem,4vw,2.8rem); }
  .portada__acciones .boton{ flex:1 1 100%; }
  .portada__foto{ position:relative; inset:auto; width:100%; max-width:none; margin:0; order:0; isolation:isolate; }
  .portada__foto::before{ display:block; content:""; position:absolute; inset:-12px -12px 18px 18px; border-radius:30px; background:var(--primario-suave); z-index:-1; }
  .portada__foto > img, .portada__foto > .portada__slide + .portada__slide{
    width:100%; height:auto; aspect-ratio:4/3; max-height:none; object-fit:cover;
    border-radius:24px; box-shadow:var(--sombra-fuerte);
    -webkit-mask-image:none; mask-image:none; }
  .portada__foto > .portada__slide:first-child{ position:relative; inset:auto; object-position:100% 0; }
  .portada__foto > .portada__slide + .portada__slide{ position:absolute; inset:0; height:100%; left:0; right:0; }
  .portada__foto > .portada__slide--atencion{ object-position:50% 38%; }
  .portada__puntos{ right:6px; top:4px; }
  .foto-chip{ display:flex; }
  .foto-chip--arriba{ top:auto; bottom:-22px; left:-14px; }
  .foto-chip--abajo{ display:none; }
}
/* iPad vertical angosto (iPad mini / iPad): texto arriba y tarjeta abajo, grande */
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait){
  .portada{ grid-template-columns:1fr; }
  .portada__foto{ max-width:640px; margin:12px auto 20px; }
  .portada__acciones .boton{ flex:1 1 0; }
  .portada__texto h1{ font-size:clamp(2.4rem,5.6vw,3.1rem); }
}

/* --- 26-10-2026: línea de derechos en el pie --------------------------------- */
.pie__copy{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--linea); font-size:.82rem; color:var(--tinta-suave); }