/* Dr. Yahir López — estilos.
   Medidas de Dentelle (dentelle.framer.website, 2026-10-31): colores, tamaños, radios, curva y tiempos.
   Orden: letra · tokens · base · piezas (botón, chip, hueco) · secciones en orden · movimiento · reducir movimiento. */

/* Letra de respaldo con las medidas de Instrument (las mismas que usa Framer): mientras llega Google Fonts,
   el texto ocupa casi lo mismo y no brinca al cambiar. */
@font-face { font-family: "Instrument Serif Respaldo"; src: local("Times New Roman"); ascent-override: 117.87%; descent-override: 36.91%; line-gap-override: 0%; size-adjust: 83.99%; }
@font-face { font-family: "Instrument Sans Respaldo"; src: local("Arial"); ascent-override: 93.97%; descent-override: 24.22%; line-gap-override: 0%; size-adjust: 103.22%; }

:root {
  --base: #FCFDF6;
  --hueso: #F5F6F3;
  --arena: #F1EBDF;
  --arena-2: #EBE5D9;
  --tinta: #151814;
  --tinta-2: rgba(21, 24, 20, .64);
  --tinta-60: rgba(21, 24, 20, .6);
  --linea: rgba(21, 24, 20, .12);
  --azul: #0F5ECC;
  --azul-2: #3083EC;
  --negro: #000;
  --pie: #272727;
  --error: #B42318;
  --abierto: #1F7A3E;

  --serif: "Instrument Serif", "Instrument Serif Respaldo", Georgia, serif;
  --sans: "Instrument Sans", "Instrument Sans Respaldo", Arial, sans-serif;

  --ease: cubic-bezier(.44, 0, .34, .98);
  --rebote: cubic-bezier(.22, 1.12, .36, 1);

  --orilla: 32px;
  --ancho: 1376px;
  --seccion: 160px;
  --barra: 76px;
}
@media (max-width: 809.98px) {
  /* --seccion era 96: la página medía 24 pantallas en un iPhone (2026-11-01) */
  :root { --orilla: 20px; --seccion: 64px; --barra: 68px; }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 12px); }
body {
  margin: 0; background: var(--base); color: var(--tinta);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* lo ancho (el diente, las tarjetas desfasadas) ensanchaba la página en el celular */
main { display: block; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, blockquote, fieldset, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
em { font-style: italic; }
/* hidden siempre gana, aunque la clase del elemento le ponga display */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icono { width: 20px; height: 20px; flex: none; }
.icono--chico { width: 14px; height: 14px; }
.saltar {
  position: fixed; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: var(--negro); color: var(--hueso); text-decoration: none; transition: top .2s;
}
.saltar:focus { top: 16px; }
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--orilla)); margin: 0 auto; padding: 0 var(--orilla); }
.seccion { padding: var(--seccion) 0; }

/* ===== Letra ===== */
.hero__titulo { font: 400 clamp(56px, 9.7vw, 140px)/.86 var(--serif); letter-spacing: -.04em; }
.titulo-2 { font: 400 clamp(48px, 7.8vw, 112px)/.84 var(--serif); }
.titulo-3 { font: 400 clamp(40px, 4.4vw, 64px)/1 var(--serif); }
.titulo-chico { font: 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); }
.linea { display: block; }
.parrafo-grande { font: 400 clamp(22px, 2.4vw, 34px)/1.18 var(--serif); max-width: 30ch; }

/* ===== Chip ===== */
.chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font: 500 12px/1 var(--sans); letter-spacing: .01em; }
.chip__icono { width: 10px; height: 10px; }
.chip--claro { color: #fff; }

/* ===== Botón (hover medido en Dentelle: el texto sube, entra la copia y el aro se vuelve punto) ===== */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 20px 0 22px; border: 0; border-radius: 999px;
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .32s var(--ease), color .32s var(--ease);
}
.boton--hueso { background: var(--hueso); color: var(--tinta); }
.boton--negro { background: var(--negro); color: var(--hueso); }
.boton--chico { height: 40px; padding: 0 16px 0 18px; font-size: 14px; }
.boton--ancho { width: 100%; }
.boton:disabled { cursor: progress; opacity: .7; }
.boton__texto { position: relative; display: block; height: 1.3em; overflow: hidden; line-height: 1.3em; }
.boton__linea { display: block; transition: transform .32s var(--ease); }
.boton__linea + .boton__linea { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(100%) scale(.9); }
.boton__aro {
  width: 8px; height: 8px; flex: none; border: 1.5px solid currentColor; border-radius: 50%;
  transition: transform .32s var(--ease), background-color .32s var(--ease);
}
@media (hover: hover) {
  .boton:hover .boton__linea:first-child { transform: translateY(-100%); }
  .boton:hover .boton__linea + .boton__linea { transform: none; }
  .boton:hover .boton__aro { background: currentColor; transform: scale(.625); }
}

.enlace {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font: 500 15px/1.4 var(--sans); color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.enlace .icono { width: 16px; height: 16px; transition: transform .32s var(--ease); }
@media (hover: hover) { .enlace:hover .icono { transform: translateX(3px); } }

/* ===== Huecos de foto: cada foto pendiente existe como PNG transparente con su nombre final.
   Cuando el archivo trae la foto de verdad (más de 16 px), app.js pone .con-foto y el hueco se quita. ===== */
.hueco { position: relative; overflow: hidden; background: linear-gradient(150deg, #F4EFE6, var(--arena-2)); color: var(--tinta); }
.hueco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hueco::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%);
  background: currentColor; opacity: .2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hueco__nombre {
  position: absolute; left: 50%; bottom: 14px; max-width: calc(100% - 24px); padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: rgba(21, 24, 20, .78); transform: translateX(-50%);
  font: 500 11.5px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hueco.con-foto { background: none; }
.hueco.con-foto::before, .hueco.con-foto .hueco__nombre { display: none; }
/* sobre fondo arena el hueco claro casi no se veía */
.tratamientos .hueco { background: linear-gradient(150deg, #E8E1D2, #DCD3C1); }

/* Fotos de verdad: los WebP ya vienen recortados a la forma de su caja (fotos/generar-webp.sh);
   --pos solo ajusta el retrato chico */
.foto { position: relative; overflow: hidden; background: var(--arena-2); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ===== Menú fijo ===== */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  height: var(--barra); padding: 0 var(--orilla); color: #fff;
}
/* fondo esmerilado solo fuera del hero, para que el nombre se lea encima del contenido */
.barra::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(252, 253, 246, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .4s var(--ease);
}
.barra__marca { font: 500 18px/1 var(--sans); text-decoration: none; transition: color .4s var(--ease); }
.barra__acciones { display: flex; align-items: center; gap: 8px; }
.pildora-menu {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; font: 500 14px/1 var(--sans); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.mas { position: relative; width: 12px; height: 12px; }
.mas::before, .mas::after {
  content: ""; position: absolute; left: 0; top: 5.25px; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform .4s var(--ease);
}
.mas::after { transform: rotate(90deg); }
.menu-abierto .mas::after { transform: rotate(180deg); }
.barra__agendar { transition: background-color .4s var(--ease), color .4s var(--ease); }
.barra--clara { color: var(--tinta); }
.barra--clara::before { opacity: 1; }
.barra--clara .pildora-menu { background: var(--arena); color: var(--tinta); }
.barra--clara .barra__agendar { background: var(--negro); color: var(--hueso); }
.menu-abierto .barra { color: var(--tinta); }
.menu-abierto .barra::before { opacity: 1; }
.menu-abierto .pildora-menu { background: var(--arena); color: var(--tinta); }

.menu { position: fixed; top: calc(var(--barra) - 6px); right: var(--orilla); z-index: 49; width: min(760px, calc(100vw - 2 * var(--orilla))); }
.menu__tarjeta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 28px; border: 1px solid var(--linea); border-radius: 24px;
  background: #fff; color: var(--tinta); opacity: 0; transform: translateY(-12px) scale(.98); transform-origin: top right;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.abierto .menu__tarjeta { opacity: 1; transform: none; }
.menu__etiqueta { margin-bottom: 10px; font-size: 13px; color: var(--tinta-2); }
.menu__links li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 40ms + 80ms); }
.menu.abierto .menu__links li { opacity: 1; transform: none; }
.menu__links a { display: inline-block; padding: 2px 0; font: 400 36px/1.12 var(--serif); text-decoration: none; }
@media (hover: hover) { .menu__links a:hover { font-style: italic; } }
.menu__datos { display: flex; flex-direction: column; }
.menu__dato { margin-bottom: 22px; font: 400 24px/1.2 var(--serif); }
.menu__dato--chico { font: 400 15px/1.5 var(--sans); }
.menu__cita { grid-column: 1 / -1; display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; padding: 14px; border-radius: 20px; background: var(--arena); }
.menu__foto { aspect-ratio: 4 / 5; border-radius: 14px; }
.menu__cita-titulo { margin-bottom: 14px; font: 400 32px/1 var(--serif); }
.menu__redes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.menu__redes .red { height: 40px; }

/* ===== Botón flotante de WhatsApp ===== */
.flotante {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--negro); color: var(--hueso); font: 500 15px/1 var(--sans); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.flotante.visible { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; }
.flotante .icono { width: 22px; height: 22px; }
@media (max-width: 809.98px) {
  .flotante { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .flotante__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===== 1 · Hero ===== */
.hero {
  position: relative; padding: calc(var(--barra) + clamp(40px, 9svh, 110px)) var(--orilla) 0; text-align: center; color: #fff;
  /* el texto chico cae en la parte alta y oscura: blanco sobre #3083EC da 3.8:1, no alcanza para texto normal */
  background: linear-gradient(180deg, var(--azul) 0%, #1F6FDB 56%, var(--azul-2) 76%, var(--base) 100%);
}
.hero__texto { display: flex; flex-direction: column; align-items: center; max-width: 1040px; margin: 0 auto; }
.hero__titulo { margin-bottom: 24px; }
.hero__sub { max-width: 34ch; margin-bottom: 28px; font-size: 18px; line-height: 1.45; }
.hero__acciones { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__link { font-size: 14px; text-underline-offset: 4px; }
/* deja lugar para el 6% que crece con el scroll, sin salirse de la orilla */
.hero__diente { width: min(980px, calc(100% / 1.06)); margin: clamp(24px, 4svh, 48px) auto 0; }
.hero__diente-escala { position: relative; aspect-ratio: 600 / 576; transform-origin: 50% 25%; will-change: transform; }
.hero__diente-img, .hero__diente-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.hero__diente-img { opacity: 0; }
.hero__diente.con-foto .hero__diente-img { opacity: 1; }
.hero__diente.con-foto .hero__diente-svg { display: none; }
/* mientras carga la foto no se pinta el SVG, para que no se vea uno y luego el otro; sin JS se queda el SVG */
.js .hero__diente:not(.con-foto, .sin-foto) .hero__diente-svg { visibility: hidden; }

/* ===== 2 · El doctor ===== */
.doctor__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.doctor__intro .titulo-3 { margin-bottom: clamp(40px, 6vw, 88px); }
.doctor__fila {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: end;
  margin-top: clamp(80px, 10vw, 140px);
}
.doctor__foto { aspect-ratio: 4 / 5; border-radius: 24px; }
.doctor__nombre { margin-bottom: 28px; font: 400 clamp(40px, 4.4vw, 64px)/1 var(--serif); }
.doctor__lista li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linea); font-size: 17px; }
.doctor__lista li:last-child { border-bottom: 1px solid var(--linea); }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(80px, 10vw, 140px); }
.cifra { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 16px; text-align: center; }
.cifra + .cifra { border-left: 1px solid var(--linea); }
.cifra__numero { font: italic 400 clamp(64px, 7.8vw, 112px)/1 var(--serif); letter-spacing: -.02em; }
/* a la derecha: mientras cuenta, el número no se despega del "+" */
.cifra__valor { display: inline-block; text-align: right; }
.cifra__etiqueta { font-size: 14px; }

/* ===== 3 · ¿Qué te preocupa? ===== */
.preocupaciones__cabeza { margin-bottom: clamp(48px, 6vw, 80px); }
.preocupaciones__cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.preocupaciones__lista { position: sticky; top: calc(50svh - 240px); align-self: start; }
.preocupaciones__nombre {
  display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 clamp(34px, 4.4vw, 64px)/1.06 var(--serif); letter-spacing: -.03em; color: var(--tinta-60);
  transition: color .4s var(--ease);
}
.preocupaciones__nombre::before {
  content: ""; width: 6px; height: 6px; flex: none; border: 1px solid currentColor; border-radius: 50%;
  opacity: 0; transform: scale(.3); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.preocupaciones__lista .activa .preocupaciones__nombre { color: var(--tinta); }
.preocupaciones__lista .activa .preocupaciones__nombre::before { opacity: 1; transform: none; }
.preocupaciones__tarjetas { display: flex; flex-direction: column; gap: 24px; }
.preocupacion__titulo { margin-bottom: 14px; font: 400 32px/1.1 var(--serif); }
.preocupacion__tarjeta { overflow: hidden; border-radius: 24px; background: var(--arena-2); }
.preocupacion__foto { aspect-ratio: 4 / 3; }
/* la foto se funde con la tarjeta, como en Dentelle */
.preocupacion__foto::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(rgba(235, 229, 217, 0), var(--arena-2)); }
.preocupacion__foto.hueco::before { top: 40%; }
.preocupacion__foto .hueco__nombre { bottom: auto; top: 14px; }
.preocupacion__caja { position: relative; margin-top: -72px; padding: 0 28px 28px; }
.preocupacion__texto { max-width: 34ch; margin-bottom: 16px; font: 400 clamp(20px, 1.7vw, 24px)/1.25 var(--serif); }
@media (min-width: 1200px) {
  .preocupacion__titulo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1199.98px) {
  .preocupaciones__cuerpo { display: block; }
  .preocupaciones__lista { display: none; }
  .preocupaciones__tarjetas { gap: 48px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .preocupaciones__tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
}
/* celular: una tarjeta a la vez. Los nombres de la lista de escritorio se vuelven botones (ver "Selector")
   y app.js enseña la tarjeta del que se toca; sin JS se ven todas */
@media (max-width: 809.98px) {
  .preocupaciones__cabeza { margin-bottom: 24px; }
  .preocupaciones__lista { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .preocupacion__titulo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .preocupacion:not(.elegida) { display: none; }
}

/* ===== 4 · Tratamientos ===== */
.tratamientos { background: var(--arena); }
.escenario { max-width: calc(var(--ancho) + 2 * var(--orilla)); margin: 0 auto; padding: var(--seccion) var(--orilla) 0; }
.escenario__cabeza { max-width: 420px; }
.trat__titulo { font: 400 clamp(44px, 11vw, 112px)/.86 var(--serif); }
.trat__desc { max-width: 30ch; margin: 18px 0 24px; color: var(--tinta-2); }
.trat__foto { aspect-ratio: 4 / 3; border-radius: 20px; }
.trat__numero { margin-bottom: 12px; font: 400 22px/1 var(--serif); color: var(--tinta-2); }
.contador { display: none; }
.escenario__items { display: grid; gap: 64px; margin-top: 48px; }
.trat { display: flex; flex-direction: column; }
.trat__foto { order: -1; margin-bottom: 20px; }
.otros { padding-top: 72px; padding-bottom: var(--seccion); }
.otros__titulo { margin-bottom: 16px; font: 500 12px/1 var(--sans); }
.otros__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.otros__lista li { padding: 10px 16px; border-radius: 999px; background: var(--arena-2); font-size: 15px; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .escenario__items { grid-template-columns: 1fr 1fr; gap: 64px 24px; }
}
/* celular: carrusel de lado; la tarjeta siguiente se asoma a la derecha y cada una lleva su "01 — 06" */
@media (max-width: 809.98px) {
  .escenario__items {
    display: flex; gap: 16px; margin: 28px calc(-1 * var(--orilla)) 0; padding: 0 var(--orilla) 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--orilla); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .escenario__items::-webkit-scrollbar { display: none; }
  .trat { flex: 0 0 84%; scroll-snap-align: start; }
  .trat__foto { margin-bottom: 16px; }
  .trat__titulo { font-size: 38px; }
  .trat__desc { margin: 12px 0 18px; }
  .otros { padding-top: 48px; }
}
@media (min-width: 1200px) {
  .tratamientos__pista { height: calc(100svh * 7); }
  .escenario {
    position: sticky; top: 0; height: 100svh; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); grid-template-rows: auto 1fr;
    padding: calc(var(--barra) + 20px) var(--orilla) 48px;
  }
  .escenario__cabeza { grid-column: 1; grid-row: 1; }
  .contador { grid-column: 1; grid-row: 2; align-self: end; display: flex; align-items: flex-end; font: 400 64px/1 var(--serif); }
  .contador__ventana { display: inline-block; height: 1em; overflow: hidden; }
  .contador__tira { display: flex; flex-direction: column; transition: transform .6s var(--ease); }
  .contador__tira span { display: block; height: 1em; text-align: right; }
  .contador__total { color: rgba(21, 24, 20, .5); }
  .escenario__items { position: relative; grid-column: 2; grid-row: 1 / 3; display: block; margin: 0; }
  .trat {
    position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 48px; align-items: end;
    opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s;
  }
  .trat.activo { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
  .trat__numero { display: none; }
  /* el título se ajusta al ancho de su columna; --cq lo pone app.js según la palabra más larga */
  .trat__texto { container-type: inline-size; transform: translateY(20px); transition: transform .6s var(--ease); }
  .trat__titulo { font-size: clamp(44px, calc(var(--cq, 16) * 1cqi), 112px); }
  .trat__foto { order: 0; align-self: center; margin: 0; aspect-ratio: 3 / 4; transform: translateY(20px); transition: transform .6s var(--ease); }
  .trat.antes .trat__texto, .trat.antes .trat__foto { transform: translateY(-20px); }
  .trat.activo .trat__texto, .trat.activo .trat__foto { transform: none; }
}

/* ===== 5 · Antes y después ===== */
.casos__titulo { padding: 0 var(--orilla); text-align: center; }
.casos__titulo-in { display: flex; flex-direction: column; align-items: center; }
.casos__sub { margin-top: 22px; color: var(--tinta-2); }
.casos__nota { margin-top: 6px; font-size: 12px; color: var(--tinta-2); }
.casos__titulo .boton { margin-top: 28px; }
.casos__tarjetas {
  display: grid; gap: 56px; width: 100%; max-width: calc(var(--ancho) + 2 * var(--orilla));
  margin: 72px auto 0; padding: 0 var(--orilla);
}
.caso__nombre { margin-top: 18px; font: 400 32px/1.1 var(--serif); }
.caso__meta { margin: 6px 0 12px; font-size: 14px; color: var(--tinta-2); }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .casos__tarjetas { grid-template-columns: 1fr 1fr; gap: 56px 24px; }
}
@media (min-width: 1200px) {
  .casos { padding-top: 0; }
  .casos__titulo { position: sticky; top: 0; z-index: 0; display: grid; place-items: center; height: 100svh; }
  .casos__titulo-in { will-change: filter, opacity; }
  .casos__tarjetas {
    position: relative; z-index: 1; grid-template-columns: minmax(0, 550px) minmax(0, 550px); justify-content: space-between;
    gap: 120px 32px; margin-top: 0;
  }
  .caso:nth-child(even) { margin-top: 240px; }
}

/* ===== Selector (celular): los nombres como botones; el de la tarjeta a la vista va en negro =====
   Lo usan "¿Qué te preocupa?" (con su lista de escritorio) y los casos (con .selector) */
.selector { display: none; }
@media (max-width: 809.98px) {
  .preocupaciones__nombre, .selector__boton {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--arena-2); color: var(--tinta); font: 500 14px/1.2 var(--sans); letter-spacing: 0; cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease);
  }
  .preocupaciones__nombre::before { display: none; }
  .preocupaciones__lista .preocupaciones__nombre[aria-current="true"], .selector__boton[aria-current="true"] { background: var(--tinta); color: var(--hueso); }
  .casos__selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; padding: 0 var(--orilla); }
  .casos__tarjetas { margin-top: 24px; }
  .js .caso:not(.elegida) { display: none; }
  .js .preocupacion.elegida.visto, .js .caso.elegida.visto { animation: cambia .4s var(--ease); }
}
@keyframes cambia { from { opacity: 0; } }

/* pan-y: el dedo de arriba abajo baja la página; de lado lo toma app.js para mover la línea */
.comparador {
  --pos: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: var(--arena-2);
  cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.comparador img { pointer-events: none; -webkit-user-drag: none; }
.comparador__capa { position: absolute; inset: 0; }
.comparador__despues.hueco { background: linear-gradient(150deg, #F7F3EA, #EEE8DC); }
.comparador__antes.hueco { background: linear-gradient(150deg, #E7DFD0, #DCD2C0); }
.comparador__antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparador__antes .hueco__nombre { left: 14px; max-width: calc(50% - 24px); transform: none; }
.comparador__despues .hueco__nombre { left: auto; right: 14px; max-width: calc(50% - 24px); transform: none; }
.comparador__antes.hueco::before { left: 25%; }
.comparador__despues.hueco::before { left: 75%; }
.comparador__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; margin-left: -.5px; background: #fff; pointer-events: none; }
.comparador__perilla {
  position: absolute; left: var(--pos); top: 74%; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: #fff; color: var(--tinta); transform: translate(-50%, -50%); pointer-events: none;
}
.comparador__perilla svg { width: 18px; height: 18px; }
.comparador__etiqueta {
  position: absolute; top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .86);
  font: 500 12px/1 var(--sans); pointer-events: none;
}
.comparador__etiqueta--antes { left: 14px; }
.comparador__etiqueta--despues { right: 14px; }
/* el range solo es para el teclado y los lectores de pantalla: con el dedo y el mouse manda .comparador */
.comparador__control {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.comparador:has(.comparador__control:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 4px; }

/* ===== 6 · Tu primera cita ===== */
.visita__cabeza { margin-bottom: clamp(56px, 7vw, 96px); }
.visita__cuerpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.visita__lista { position: sticky; top: calc(50svh - 90px); align-self: start; }
.visita__lista li { border-top: 1px solid var(--linea); }
.visita__lista li:last-child { border-bottom: 1px solid var(--linea); }
.paso-nombre {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 24px/1.2 var(--serif); color: var(--tinta-60); transition: color .4s var(--ease);
}
.paso-nombre .icono { width: 18px; height: 18px; opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.visita__lista .activa .paso-nombre { color: var(--tinta); }
.visita__lista .activa .paso-nombre .icono { opacity: 1; transform: none; }
.visita__tarjetas { display: grid; gap: 40px; }
.paso { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.paso__foto { aspect-ratio: 3 / 4; border-radius: 20px; }
.paso__etiqueta { margin-bottom: 14px; font: 500 12px/1 var(--sans); }
.paso__titulo { margin-bottom: 14px; font: 400 32px/1.1 var(--serif); }
.paso__texto { max-width: 36ch; color: var(--tinta-2); }
@media (max-width: 1199.98px) {
  .visita__cuerpo { display: block; }
  .visita__lista { display: none; }
}
/* celular: cada paso en un renglón, con la foto chiquita a la izquierda */
@media (max-width: 809.98px) {
  .visita__cabeza { margin-bottom: 32px; }
  .visita__tarjetas { gap: 20px; }
  .paso { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .paso__foto { border-radius: 14px; }
  .paso__etiqueta, .paso__titulo { margin-bottom: 8px; }
  .paso__titulo { font-size: 24px; }
  .paso__texto { font-size: 15px; }
}

/* ===== 7 · Opiniones ===== */
.opiniones { background: var(--arena); }
.opiniones__cabeza { display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(48px, 6vw, 80px); text-align: center; }
.carrusel {
  --tarjeta: min(560px, 85vw);
  position: relative; display: flex; gap: 20px; padding: 8px calc((100% - var(--tarjeta)) / 2); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline-offset: -2px; }
/* las de los lados se achican y se quedan en arena-2; con opacidad .5 el texto no pasaba AA */
.opinion {
  flex: 0 0 var(--tarjeta); display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; padding: 28px;
  border-radius: 24px; background: var(--arena-2); scroll-snap-align: center;
  transform: scale(.94); transition: transform .6s var(--ease), background-color .6s var(--ease);
}
.opinion.activa { background: var(--base); transform: none; }
.opinion__cuerpo { display: flex; flex-direction: column; }
.opinion__estrellas { display: flex; gap: 4px; }
.opinion__estrellas svg { width: 16px; height: 16px; fill: var(--tinta); }
.opinion__texto { margin: 18px 0 28px; font: 400 24px/1.25 var(--serif); }
.opinion__pie { margin-top: auto; }
.opinion__nombre { font: italic 400 22px/1.1 var(--serif); }
.opinion__tratamiento { margin-top: 6px; font-size: 14px; color: var(--tinta-2); }
.opinion__monograma { display: grid; place-items: center; min-height: 200px; border-radius: 16px; background: var(--arena); font: italic 400 96px/1 var(--serif); }
.opinion.activa .opinion__monograma { background: var(--arena-2); }
.carrusel__flechas { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.flecha { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--arena-2); color: var(--tinta); cursor: pointer; transition: opacity .3s; }
.flecha .icono { width: 18px; height: 18px; }
.flecha:disabled { opacity: .45; cursor: default; }
.opiniones__acciones { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }
.opiniones--vacia .carrusel, .opiniones--vacia .carrusel__flechas { display: none; }
@media (max-width: 809.98px) {
  .opinion { grid-template-columns: 1fr; padding: 24px; }
  .opinion__monograma { order: -1; width: 72px; min-height: 0; height: 72px; font-size: 48px; }
  .opinion__texto { font-size: 21px; }
}

/* ===== 8 · Preguntas ===== */
.preguntas__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.preguntas__izq { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.duda { max-width: 300px; }
.duda__foto { width: 56px; height: 56px; margin-bottom: 14px; border-radius: 12px; }
.duda__titulo { font: 400 24px/1.1 var(--serif); }
.duda__texto { margin: 4px 0 16px; color: var(--tinta-2); }
.faq { border-bottom: 1px solid var(--linea); }
.faq:first-child { border-top: 1px solid var(--linea); }
.faq__boton {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 0;
  border: 0; background: none; text-align: left; cursor: pointer; font: 400 24px/1.25 var(--serif);
}
.faq__icono { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icono::before, .faq__icono::after {
  content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform .4s var(--ease);
}
.faq__icono::after { transform: rotate(90deg); }
.faq.abierta .faq__icono::after { transform: rotate(180deg); }
.faq__respuesta { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s; }
.faq.abierta .faq__respuesta { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s var(--ease), visibility 0s; }
.faq__respuesta-in { overflow: hidden; }
.faq__respuesta p { max-width: 60ch; padding-bottom: 24px; color: var(--tinta-2); }

/* ===== 9 · Agenda ===== */
.cita__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cita__texto { max-width: 36ch; margin-top: 24px; color: var(--tinta-2); }
.cita__direccion { max-width: 20ch; margin: 40px 0 24px; font: 400 28px/1.15 var(--serif); }
.cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.caja { padding: 20px; border-radius: 20px; background: var(--arena-2); }
.caja__titulo { margin-bottom: 12px; font-weight: 500; }
.caja__dato { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15px; text-decoration: none; }
.caja__dato .icono { width: 18px; height: 18px; }
@media (hover: hover) { .caja__dato:hover { text-decoration: underline; text-underline-offset: 3px; } }
.estado { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.estado::before { content: ""; width: 8px; height: 8px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; }
.estado.abierto { color: var(--abierto); }
.estado.abierto::before { background: currentColor; }
.horario { border-collapse: collapse; font-size: 14px; }
.horario td { padding: 3px 0; vertical-align: top; white-space: nowrap; }
.horario td + td { padding-left: 14px; }
.horario tr.hoy td { font-weight: 500; }
.horario td:last-child { color: var(--tinta-2); }
.horario tr.hoy td:last-child { color: var(--tinta); }

.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo > label, .campo legend { font-size: 14px; font-weight: 500; }
.campo legend { margin-bottom: 8px; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="date"], .campo select, .campo textarea {
  width: 100%; height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: var(--arena-2);
  font-size: 16px; color: var(--tinta); outline: none; transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.campo input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-height: 48px; line-height: 48px; text-align: left; }
.campo input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.campo select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--arena-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151814' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
}
.campo textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(21, 24, 20, .5); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--tinta); background-color: var(--base); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo__error { font-size: 13px; color: var(--error); }
.campo__error:empty { display: none; }
.campo__cuenta { margin-top: -2px; font-size: 12px; text-align: right; color: var(--tinta-2); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--arena-2);
  font-size: 15px; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.opcion input:checked + span { background: var(--tinta); color: var(--hueso); }
.opcion input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.formulario__nota { font-size: 13px; color: var(--tinta-2); }
.exito { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 28px; border-radius: 24px; background: var(--arena); text-align: center; }
.exito:focus { outline: none; }
.exito__icono { width: 32px; height: 32px; }
.exito__titulo { font: 400 clamp(32px, 3vw, 44px)/1.05 var(--serif); }
.exito__texto { max-width: 40ch; color: var(--tinta-2); }

/* ===== 10 · Ubicación ===== */
.ubicacion__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.ubicacion__lugar { margin-top: 24px; font-size: 18px; }
.ubicacion__direccion { max-width: 20ch; margin-top: 18px; font: 400 28px/1.15 var(--serif); }
.ubicacion__horario { margin-top: 12px; font-size: 15px; color: var(--tinta-2); }
.ubicacion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.mapa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: var(--arena); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s var(--ease); }
.mapa.cargado iframe { opacity: 1; }
.mapa__espera { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; font-size: 14px; color: var(--tinta-2); }
.mapa__espera .icono { width: 28px; height: 28px; }

/* ===== 11 · Redes ===== */
.redes { padding: 72px 0; background: var(--arena); }
.redes__grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 32px 56px; align-items: center; }
.redes__titulo { font: 400 clamp(40px, 4.4vw, 64px)/1 var(--serif); }
.redes__quien { margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.redes__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.red {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  background: var(--base); color: var(--tinta); font: 500 15px/1 var(--sans); text-decoration: none;
  transition: background-color .32s var(--ease), color .32s var(--ease);
}
.red .icono { width: 18px; height: 18px; }
@media (hover: hover) {
  .red:hover { background: var(--tinta); color: var(--hueso); }
  .red[aria-disabled="true"]:hover { background: var(--base); color: var(--tinta); cursor: default; }
  .red[aria-disabled="true"]::after {
    content: attr(data-pista); position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 6px 10px; border-radius: 8px;
    background: var(--tinta); color: var(--hueso); font-size: 12px; white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translate(-50%, 4px); transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .red[aria-disabled="true"]:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
.menu__redes .red { background: var(--arena); }

/* ===== 12 · Pie ===== */
/* abajo deja lugar al botón flotante, para que no tape la última línea */
.pie { padding: 96px 0 88px; background: var(--negro); color: var(--hueso); }
.pie__columnas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; font-size: 14px; }
.pie__titulo { margin-bottom: 14px; font-weight: 500; color: #fff; }
.pie__col li + li { margin-top: 6px; }
.pie__col p, .pie__col li { color: rgba(245, 246, 243, .74); }
.pie a { text-decoration: none; }
@media (hover: hover) { .pie a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
/* el nombre gigante es un SVG decorativo: con su viewBox ajustado al texto llena el ancho a cualquier tamaño */
.pie__marca { display: block; width: 100%; height: auto; margin: 72px 0 28px; overflow: visible; }
.pie__marca text { font: 400 100px var(--serif); letter-spacing: -.03em; fill: var(--pie); }
.pie__final {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(245, 246, 243, .74);
}

/* ===== Deja tu opinión ===== */
.dialogo {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 28px; border: 0; border-radius: 24px;
  background: var(--base); color: var(--tinta); overflow: auto;
}
.dialogo::backdrop { background: rgba(21, 24, 20, .45); }
.dialogo[open] { animation: dialogo-entra .5s var(--ease); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.dialogo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dialogo__titulo { font: 400 40px/1 var(--serif); }
.dialogo__cerrar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--arena-2); cursor: pointer; }
.dialogo__cerrar .icono { width: 18px; height: 18px; }
.formulario--opinion { grid-template-columns: 1fr; }
.estrellas__fila { display: flex; gap: 6px; }
.estrella { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
.estrella__icono { width: 30px; height: 30px; fill: transparent; color: var(--tinta); transition: fill .2s var(--ease); }
.estrella__input:focus-visible + .estrella { outline: 2px solid var(--tinta); outline-offset: 2px; }
.estrellas[data-valor="1"] .estrella:nth-of-type(-n+1) .estrella__icono,
.estrellas[data-valor="2"] .estrella:nth-of-type(-n+2) .estrella__icono,
.estrellas[data-valor="3"] .estrella:nth-of-type(-n+3) .estrella__icono,
.estrellas[data-valor="4"] .estrella:nth-of-type(-n+4) .estrella__icono,
.estrellas[data-valor="5"] .estrella:nth-of-type(-n+5) .estrella__icono { fill: var(--tinta); }
@media (hover: hover) {
  .estrellas__fila:hover .estrella__icono { fill: var(--tinta); }
  .estrellas__fila .estrella:hover ~ .estrella .estrella__icono { fill: transparent; }
}
.casilla { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 400 !important; cursor: pointer; }
.casilla input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--tinta); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dialogo__estado { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dialogo__estado:focus { outline: none; }
.dialogo__estado-titulo { font: 400 36px/1.05 var(--serif); }
.dialogo__estado-texto { color: var(--tinta-2); }
@media (max-width: 809.98px) {
  .dialogo { width: 100%; max-width: 100%; max-height: 92svh; margin: auto 0 0; border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .dialogo[open] { animation-name: hoja-sube; }
  @keyframes hoja-sube { from { transform: translateY(100%); } }
}

.sin-js { padding: 24px var(--orilla); background: var(--arena); text-align: center; }

/* ===== Tablet y celular ===== */
@media (max-width: 1199.98px) {
  .cita__grid, .ubicacion__grid, .preguntas__grid { grid-template-columns: 1fr; }
  .preguntas__izq { gap: 32px; }
  .redes__grid { grid-template-columns: 1fr 1fr; }
  .redes__titulo { grid-column: 1 / -1; }
  .pie__columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .barra__agendar { display: none; }
  /* el menú cabe en la pantalla y, si no, se desliza por dentro: en un iPhone SE se cortaban la tarjeta del doctor y las redes */
  .menu {
    right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - var(--barra)); max-height: calc(100svh - var(--barra));
    overflow-y: auto; overscroll-behavior: contain; border-radius: 24px;
  }
  /* minmax(0, 1fr): con 1fr, el botón de WhatsApp (que no se parte) ensanchaba la columna y todo se salía por la derecha */
  .menu__tarjeta { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; }
  .menu__links a { font-size: 26px; }
  .menu__dato { margin-bottom: 12px; font-size: 19px; }
  /* la tarjeta del doctor va justo después de las secciones, para que se vea sin deslizar; el botón, abajo a todo lo ancho */
  .menu__cita { order: 1; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 14px; padding: 12px; }
  .menu__cita-texto { display: contents; }
  .menu__cita-titulo { margin: 0; font-size: 24px; }
  .menu__cita .boton { grid-column: 1 / -1; }
  .menu__datos { order: 2; }
  /* las redes del menú, solo con su ícono: el nombre completo ya va en aria-label */
  .menu__redes { order: 3; }
  .menu__redes .red { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .menu__redes .red span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero__sub { font-size: 17px; }
  .doctor__fila { grid-template-columns: 1fr; margin-top: 48px; }
  /* cuadrada y con la cara arriba: la 4:5 ocupaba media pantalla */
  .doctor__foto { aspect-ratio: 1 / 1; --pos: 50% 15%; }
  .doctor__lista li { padding: 12px 0; font-size: 16px; }
  /* las 3 cifras en una fila */
  .cifras { margin-top: 48px; }
  .cifra { gap: 8px; padding: 24px 6px; }
  .cifra__numero { font-size: clamp(30px, 9vw, 44px); }
  .cifra__etiqueta { font-size: 12px; line-height: 1.3; }
  .cajas { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; }
  .redes { padding: 48px 0; }
  .redes__grid { grid-template-columns: 1fr; gap: 20px; }
  .redes__titulo { font-size: 32px; }
  .mapa { aspect-ratio: 1 / 1; }
  .pie { padding-top: 56px; }
  .pie__columnas { grid-template-columns: 1fr 1fr; }
  /* en el pie del celular sobran las secciones (están en el menú) y las redes (justo arriba, en "Síguenos") */
  .pie__col--secciones, .pie__col--redes { display: none; }
  .pie__marca { margin: 40px 0 24px; }
  .faq__boton { font-size: 21px; }
}

/* ===== Movimiento (medido en Dentelle) =====
   Bloques: de 80 px abajo y opacidad 0, en 1 s con la curva de Dentelle; hermanos cada .2 s.
   Tarjetas: de 40 px, con un rebote leve. Títulos: por palabra, de blur(10px) a nítidos. */
.js [data-aparece] { opacity: 0; transform: translateY(80px); }
.js [data-aparece="tarjeta"] { transform: translateY(40px); }
.js [data-aparece].visto {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--retraso, 0s);
}
.js [data-aparece="tarjeta"].visto { transition-timing-function: var(--ease), var(--rebote); }
.js [data-titulo] .palabra { display: inline-block; opacity: 0; filter: blur(10px); }
.js [data-titulo].visto .palabra {
  opacity: 1; filter: blur(0);
  transition: opacity .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--retraso, 0s));
}
/* El hero y el menú entran solo con CSS, sin esperar a app.js: el título es el LCP.
   Orden medido en Dentelle: título (0 s), subtítulo (.2), botón (.4), diente (.6) y el menú, que baja desde -150 px (1 s). */
@keyframes sube { from { opacity: 0; transform: translateY(80px); } }
@keyframes enfoca { from { opacity: 0; filter: blur(10px); } }
@keyframes baja { from { opacity: 0; transform: translateY(-150px); } }
[data-entrada] { animation: sube 1s var(--ease) var(--retraso, 0s) both; }
.hero__titulo .palabra { display: inline-block; animation: enfoca .9s var(--ease) calc(var(--i, 0) * 70ms) both; }
.barra { animation: baja 1s var(--ease) 1s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-aparece], .js [data-titulo] .palabra { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* none y no una duración mínima: con transition-duration en *, todas las propiedades (hasta font-size)
     se volvían transiciones y lo que app.js mide salía con el valor anterior */
  *, *::before, *::after { transition: none !important; animation: none !important; }
}