/* Clínica Dental Dra. Rozeta Márquez — casa de 1960: estuco blanco, celosía y planos pastel */

:root {
  --blanco: #ffffff;
  --estuco: #f5f7f8;
  --tinta: #1d2a36;
  --tinta-2: #475563;
  --azul: #4d86b3;
  --azul-hondo: #2f6690;
  --agua: #97c3c4;
  --agua-clara: #e3f0f0;
  --gris: #aabbc7;
  --rosa: #e27f8b;
  --coral: #e96978;
  --coral-hondo: #d4566a;
  --linea: #d9e2e8;

  --f-titulo: "Jost", "Futura", "Century Gothic", sans-serif;
  --f-texto: "Albert Sans", system-ui, sans-serif;

  --gutter: clamp(1rem, 5vw, 3rem);
  --ancho: 72rem;
  --curso: clamp(4.5rem, 11vw, 8rem);
  --cabecera: 4.25rem;
  --barra: 4.75rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--cabecera) + 1rem);
  -webkit-text-size-adjust: 100%;
}

/* La galería mide su sangría contra el ancho de main (100cqw) */
main { container-type: inline-size; }

body {
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-bottom: var(--barra);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: var(--agua); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul-hondo); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 6.5vw, 3.5rem); margin-bottom: 1.25rem; }
h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
p { text-wrap: pretty; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--tinta); color: var(--blanco); padding: .75rem 1rem; border-radius: 6px;
}
.saltar:focus { top: 1rem; }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .75rem 1.5rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 700 1.1875rem/1.2 var(--f-texto); /* 19px bold: texto grande, pasa AA sobre coral */
  text-decoration: none; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-coral { background: var(--coral); color: var(--blanco); }
.btn-coral:hover { background: var(--coral-hondo); }
.btn-linea { border-color: var(--tinta); color: var(--tinta); font-weight: 500; }
.btn-linea:hover { background: var(--tinta); color: var(--blanco); }
.btn-grande { min-height: 3.75rem; padding-inline: 2rem; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

.enlace {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--azul-hondo); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em;
  min-height: 2.75rem;
}
.enlace:hover { color: var(--tinta); }
.enlace .ico { width: 1.1em; height: 1.1em; }

.acciones { display: flex; flex-direction: column; gap: .75rem; }

.pendiente, .pendiente-texto { color: #9a3b49; font-weight: 700; }
.pendiente {
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  border: 2px dashed #e7a8b1; background: #fdf3f4; border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--cabecera); padding-inline: var(--gutter);
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.cabecera.con-borde { border-color: var(--linea); }
@supports (backdrop-filter: blur(1px)) {
  .cabecera { background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px) saturate(1.2); }
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca img:first-child { width: 2.6rem; height: 2.6rem; }
.marca-firma { width: auto; height: 1.6rem; }

.menu-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 .25rem;
  background: none; border: 0; color: var(--tinta);
  font: 500 1rem var(--f-texto); cursor: pointer;
}
.menu-icono, .menu-icono::before, .menu-icono::after {
  display: block; width: 1.4rem; height: 2px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.menu-icono { position: relative; }
.menu-icono::before, .menu-icono::after { content: ""; position: absolute; left: 0; }
.menu-icono::before { top: -6px; }
.menu-icono::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-icono { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-icono::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icono::after { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: absolute; top: var(--cabecera); left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: .5rem var(--gutter) 1.5rem;
  background: var(--blanco); border-bottom: 1px solid var(--linea);
  box-shadow: 0 18px 30px -18px rgba(29, 42, 54, .25);
}
.js .menu:not(.abierto) { display: none; }
.menu a:not(.btn) {
  padding: .9rem 0; border-bottom: 1px solid var(--linea);
  font: 400 1.35rem var(--f-titulo); text-decoration: none;
}
.menu-cta { margin-top: 1.25rem; }

/* ---------- Portada ---------- */
/* La foto de la doctora llena la portada de borde a borde (también bajo la cabecera translúcida), con un velo blanco parejo */
.portada {
  position: relative; isolation: isolate;
  max-width: var(--ancho); margin: calc(var(--cabecera) * -1) auto 0;
  padding: calc(var(--cabecera) + 2.5rem) var(--gutter) 1.25rem;
}
.portada-fondo, .portada::before {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
}
.portada-fondo { z-index: -2; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15%; background: var(--estuco); }
.portada::before { content: ""; z-index: -1; background: rgba(255, 255, 255, .72); }
.portada-lugar { display: flex; flex-direction: column; gap: .3rem; margin-top: 2rem; font-size: .95rem; line-height: 1.4; color: var(--tinta); contain: inline-size; }
.portada-lugar-titulo { font: 500 1.6rem/1.05 var(--f-titulo); }
/* En tinta: cae sobre la camisa oscura de la foto, donde el azul y el gris no contrastan lo suficiente */
.portada-lugar .enlace { min-height: 2.25rem; color: var(--tinta); }
.portada h1 {
  font-size: clamp(2.6rem, 11.5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.portada h1 span { display: block; color: var(--azul-hondo); }
.portada-sub { margin-top: 1rem; font-size: 1.15rem; color: var(--tinta-2); }
/* El bloque toma el ancho del título; el subtexto se acomoda a ese ancho sin ensancharlo */
.portada-texto { width: fit-content; }
.portada-sub { contain: inline-size; }
.portada .acciones { margin-top: 1.75rem; }

/* La celosía: muro de bloques calados blancos (franja antes de la agenda). En SVG para que el hueco salga nítido en cualquier pantalla. */
.curso-celosia {
  --bloque: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0h36v36H0zM18 6a12 12 0 1 0 0 24a12 12 0 1 0 0-24z'/%3E%3C/svg%3E") 0 0 / var(--bloque) var(--bloque) repeat;
}
/* El momento de la página: la foto se descubre una vez, como una persiana que sube. */
@media (prefers-reduced-motion: no-preference) {
  .portada-fondo { animation: persiana 1.6s .2s var(--ease) both; }
  @keyframes persiana { from { clip-path: inset(0 0 100% 0); transform: scale(1.04); } }
}

/* ---------- Beneficios: la fachada de planos ---------- */
/* La fachada sigue sin corte: la portada termina y empiezan los planos. */
.planos { list-style: none; padding: 0; display: grid; }
.plano {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; row-gap: .35rem;
  align-items: start;
  padding: 1.75rem var(--gutter);
}
.plano .ico-linea { grid-row: span 2; width: 3rem; height: 3rem; }
.plano h3 { font-size: 1.45rem; }
.plano p { color: inherit; max-width: 42ch; }
.plano-agua { background: var(--agua); }
.plano-rosa { background: var(--rosa); }
.plano-azul { background: var(--azul-hondo); color: var(--blanco); }
.plano-gris { background: var(--gris); }

/* ---------- Tratamientos ---------- */
.tratamientos, .consultorio, .preguntas {
  max-width: var(--ancho); margin-inline: auto;
  padding: var(--curso) var(--gutter) 0;
}
/* Paquetes: cada tratamiento es una tarjeta plana con su precio arriba y lo que incluye; el destacado va en azul hondo. */
.trat-grupo { margin-top: 3.5rem; }
.trat-grupo > h3 { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 400; }
.trat-estrella { margin-top: 0; background: var(--agua-clara); padding: 2.5rem var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.trat-cab h3 { font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 1rem; }
.trat-cab p { font-size: 1.15rem; max-width: 46ch; }
.trat-cab .trat-gancho { margin-top: 1rem; font: 500 1.25rem var(--f-titulo); }

.trat-grid { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 1rem; }
.trat {
  --py: 1.75rem; --px: 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
  padding: var(--py) var(--px); background: var(--estuco);
}
/* La foto llega hasta los bordes de la tarjeta, como en el ejemplo de Sonrisa Clara. */
.trat-foto {
  width: calc(100% + 2 * var(--px)); max-width: none; aspect-ratio: 16 / 10; object-fit: cover;
  margin: calc(var(--py) * -1) calc(var(--px) * -1) .35rem; background: var(--linea);
}
.trat-estrella .trat { background: var(--blanco); }
.trat h4 { font: 500 1.35rem/1.2 var(--f-titulo); text-wrap: balance; }
.trat p { color: var(--tinta-2); }
.trat .precio {
  padding-bottom: 1rem; border-bottom: 1px solid var(--linea);
  font: 400 2.75rem/1 var(--f-titulo); letter-spacing: -0.02em; color: var(--tinta);
}
.precio span { display: block; margin-bottom: .4rem; font: 500 .78rem var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.trat .precio-texto { font-size: 1.75rem; }
.incluye { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: 1rem; }
/* La marca de "incluye" es un solo trazo, como los íconos. */
.incluye li { position: relative; padding-left: 1.6rem; }
.incluye li::before {
  content: ""; position: absolute; left: .3rem; top: .25em;
  width: .4rem; height: .75rem; border: solid var(--azul-hondo); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.precios { font-size: 1rem; }
.precios div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linea); }
.precios dt small { display: block; font-size: .85rem; color: var(--tinta-2); }
.precios dd { font-weight: 700; white-space: nowrap; }
.trat > .btn { margin-top: auto; align-self: flex-start; min-height: 3rem; padding-inline: 1.75rem; }
.trat > :nth-last-child(2) { margin-bottom: .6rem; }

.trat.trat-destacado { background: var(--azul-hondo); color: var(--blanco); }
.trat-destacado p, .trat-destacado .precio, .trat-destacado .precio span { color: var(--blanco); }
.trat-destacado .precio { border-color: rgba(255, 255, 255, .3); }
.trat-destacado .incluye li::before { border-color: var(--agua); }
.trat .trat-sello {
  align-self: flex-start; padding: .3rem .8rem; border-radius: 999px;
  background: var(--agua); color: var(--tinta); font: 700 .8rem var(--f-texto); letter-spacing: .04em;
}

/* ---------- Doctora ---------- */
.doctora {
  max-width: var(--ancho); margin-inline: auto;
  padding: var(--curso) var(--gutter) 0;
  display: grid; gap: 2rem;
}
.doctora-foto { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; object-position: 40% 25%; border-radius: 4px; background: var(--estuco); }
.doctora-firma { width: min(100%, 26rem); }
.doctora-titulo { margin: .75rem 0 1.25rem; font: 500 1.15rem var(--f-titulo); color: var(--azul-hondo); }
.doctora-texto > p:not(.doctora-titulo) { color: var(--tinta-2); max-width: 46ch; margin-bottom: 1rem; }

/* ---------- Consultorio ---------- */
.seccion-intro { color: var(--tinta-2); margin: -0.5rem 0 1.75rem; }
.galeria {
  list-style: none; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--gris) transparent;
  padding-bottom: .75rem;
}
.galeria li { scroll-snap-align: start; }
.galeria img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 4px; background: var(--estuco); }
.galeria figcaption { margin-top: .6rem; font-size: .95rem; color: var(--tinta-2); }

/* ---------- Ubicación ---------- */
.ubicacion {
  margin-top: var(--curso);
  background: var(--estuco);
  display: grid;
}
.ubicacion-texto { padding: var(--curso) var(--gutter) 2.5rem; max-width: 36rem; }
.ubicacion address { font-style: normal; font-size: 1.1rem; margin-bottom: 1rem; }
.ubicacion address strong { font: 500 1.5rem var(--f-titulo); }
.ubicacion-texto > p { color: var(--tinta-2); margin-bottom: 1.75rem; max-width: 44ch; }
.mapa { min-height: 22rem; background: var(--agua-clara); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }

/* ---------- Preguntas ---------- */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 4rem; padding: 1rem 0;
  font: 400 1.3rem/1.25 var(--f-titulo); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* El estado es una marca: el + pierde su trazo vertical al abrir. */
.faq summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size .3s var(--ease);
}
.faq details[open] summary::after {
  background-size: 100% 2px, 2px 0;
}
.faq details p { padding-bottom: 1.5rem; color: var(--tinta-2); max-width: 60ch; }
.faq .enlace { min-height: 0; }

/* ---------- Curso de celosía antes de la agenda ---------- */
.curso-celosia {
  height: calc(var(--bloque) * 2); margin-top: var(--curso);
  background-color: var(--agua);
}

/* ---------- Agenda ---------- */
.agenda { padding: var(--curso) var(--gutter); }
.agenda-caja {
  max-width: 40rem; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.agenda-caja h2 { margin-bottom: 0; }
.agenda-caja > p { color: var(--tinta-2); max-width: 42ch; }
.agenda-ante { font: 500 .9rem var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-hondo); margin-bottom: -.5rem; }
.agenda-caja .resalte { color: var(--azul-hondo); }
.agenda-directo { display: flex; flex-direction: column; align-items: center; gap: .75rem; color: var(--tinta-2); }

/* Plano de estuco, recto y sin sombra; lo elegido se marca en azul hondo (el coral es solo "agendar"). */
.ag { width: 100%; margin-top: 1rem; padding: 1.75rem clamp(1rem, 4vw, 2rem); background: var(--estuco); text-align: left; }
.ag [hidden] { display: none !important; }
.ag h3 { margin-bottom: 1rem; }
.ag h3:focus { outline: none; }
.ag-pasos { list-style: none; padding: 0; margin-bottom: 1.75rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; counter-reset: paso; }
.ag-pasos li { counter-increment: paso; padding-top: .55rem; border-top: 3px solid var(--linea); font-size: .85rem; color: var(--tinta-2); }
.ag-pasos li::before { content: counter(paso) ". "; }
.ag-pasos li.hecho { border-color: var(--agua); }
.ag-pasos li[aria-current] { border-color: var(--azul-hondo); color: var(--tinta); font-weight: 700; }

.ag button:not(.btn):not(.enlace) { font: inherit; color: var(--tinta); cursor: pointer; }
.ag-opciones { display: grid; gap: .6rem; }
.ag-opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  min-height: 3.5rem; padding: .85rem 1.1rem; text-align: left;
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 4px;
  font-weight: 500; transition: border-color .2s var(--ease);
}
.ag-opcion small { font-size: .9rem; font-weight: 400; color: var(--tinta-2); }
.ag-grupo { margin-top: .9rem; font: 500 .8rem var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-hondo); }
.ag-grupo:first-child { margin-top: 0; }
@media (min-width: 30rem) {
  .ag-opciones { grid-template-columns: 1fr 1fr; }
  .ag-grupo, .ag-opcion[data-valor="Emergencia"] { grid-column: 1 / -1; }
}
.ag-opcion:hover, .ag-horas button:hover, .ag-dias button:not(:disabled):hover { border-color: var(--azul-hondo); }
.ag [aria-pressed="true"] { border-color: var(--azul-hondo) !important; background: var(--azul-hondo) !important; color: var(--blanco) !important; }
.ag [aria-pressed="true"] small { color: var(--blanco); }

.ag-emergencia { display: flex; flex-direction: column; align-items: flex-start; margin-top: .5rem; }
.ag-emergencia textarea { margin-bottom: .25rem; }
.ag-seguir { margin-top: 1rem; }

.ag-mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ag-mes-titulo { font: 500 1.15rem var(--f-titulo); }
.ag-flecha { width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco); font-size: 1.4rem !important; line-height: 1; }
.ag-flecha:disabled { opacity: .35; cursor: default; }
.ag-semana, .ag-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; text-align: center; }
.ag-semana { font-size: .8rem; color: var(--tinta-2); margin-bottom: .3rem; }
.ag-dias button { aspect-ratio: 1; min-width: 0; padding: 0; border: 1.5px solid var(--linea); border-radius: 4px; background: var(--blanco); font-weight: 500; }
.ag-dias button:disabled { background: transparent; border-color: transparent; color: #8a98a5; cursor: default; font-weight: 400; }

.ag-dia-elegido, .ag-resumen { margin: -.5rem 0 1rem; color: var(--tinta-2); }
.ag-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.ag-horas button { min-height: 3rem; border: 1.5px solid var(--linea); border-radius: 4px; background: var(--blanco); font-weight: 500; }

.ag form { display: flex; flex-direction: column; }
.ag label { margin-top: .9rem; font-weight: 500; }
.ag label span { font-weight: 400; color: var(--tinta-2); }
.ag input:not([type="checkbox"]), .ag textarea {
  margin-top: .35rem; width: 100%; min-height: 3rem; padding: .7rem .9rem;
  font: inherit; color: var(--tinta); background: var(--blanco);
  border: 1.5px solid var(--gris); border-radius: 4px;
}
.ag textarea { resize: vertical; }
.ag input:focus-visible, .ag textarea:focus-visible { outline: 3px solid var(--azul-hondo); outline-offset: 1px; }
.ag [aria-invalid="true"] { border-color: #9a3b49; }
.ag-error { margin-top: .3rem; font-size: .95rem; color: #9a3b49; font-weight: 500; }
.ag-error:empty { display: none; }
.ag .ag-check { display: flex; align-items: flex-start; gap: .6rem; margin: 1.25rem 0 1.5rem; font-weight: 400; color: var(--tinta-2); }
.ag-check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--azul-hondo); }
.ag-atras { margin-top: 1rem; padding: 0; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ag-listo { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.ag-listo .ag-resumen { margin: 0; color: var(--tinta); font-weight: 500; }
.ag-listo p { color: var(--tinta-2); }
.ag-otra { padding: 0; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- Pie ---------- */
.pie {
  border-top: 1px solid var(--linea);
  padding: 3rem var(--gutter) 2rem;
  display: grid; gap: 1.5rem;
  max-width: var(--ancho); margin-inline: auto;
}
.pie-marca { display: flex; align-items: center; gap: .9rem; }
.pie-marca img:first-child { width: 3.25rem; height: 3.25rem; }
.pie-marca img:last-child { height: 2rem; width: auto; }
.pie-datos { font-style: normal; color: var(--tinta-2); line-height: 1.9; }
.pie-datos a { color: var(--azul-hondo); font-weight: 500; }
.pie-credito { font-size: .875rem; color: var(--tinta-2); }
.pie-credito a { text-decoration-color: var(--gris); text-underline-offset: .2em; }

/* ---------- Barra fija (celular) y botón flotante ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--linea);
  transition: transform .35s var(--ease);
}
/* La barra aparece cuando los botones de la portada y la agenda no están a la vista. */
.js .barra:not(.visible) { transform: translateY(110%); }
.barra .btn { min-height: 3.25rem; padding-inline: .75rem; }
.wa-flotante { display: none; }

/* ---------- Tableta y computadora ---------- */
@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .barra { display: none; }
  .wa-flotante {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
    display: grid; place-items: center; width: 3.75rem; height: 3.75rem;
    border-radius: 50%; background: var(--tinta); color: var(--blanco);
    box-shadow: 0 10px 24px -8px rgba(29, 42, 54, .45);
    transition: transform .3s var(--ease), background-color .3s var(--ease);
  }
  .wa-flotante svg { width: 1.75rem; height: 1.75rem; }
  .wa-flotante:hover { transform: translateY(-2px); background: var(--azul-hondo); }

  .acciones { flex-direction: row; flex-wrap: wrap; }
  .pie { padding-bottom: 6.5rem; }

  .planos { grid-template-columns: repeat(2, 1fr); }
  .plano { padding: 2.25rem var(--gutter); }

  .trat-grid { grid-template-columns: 1fr 1fr; }
  .trat-estrella { margin-inline: 0; padding: 3rem 2.5rem; }
  .trat-cab { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 3rem; }
  .trat-cab h3 { font-size: clamp(3rem, 6vw, 4.75rem); }
  .trat-estrella .trat-grid { margin-top: 2.5rem; }
  .trat { --py: 2rem; --px: 1.75rem; }

  .doctora { grid-template-columns: minmax(0, 22rem) 1fr; align-items: center; gap: 3.5rem; }
  .doctora-foto { aspect-ratio: 4 / 5; }

  /* Una sola fila que se desliza de borde a borde de la pantalla, sin espacio en blanco en los extremos */
  .galeria {
    /* cqw (ancho de <main>) en vez de vw, que en Windows incluye la barra de scroll y recorta la primera foto */
    --sangria: calc(var(--gutter) + max(0px, (100cqw - var(--ancho)) / 2));
    grid-auto-columns: clamp(16rem, 24vw, 22rem); gap: 1rem;
    margin-inline: calc(-1 * var(--sangria)); padding-inline: 0; scroll-padding-inline: 0;
  }

  .ubicacion { grid-template-columns: 1fr 1fr; }
  .ubicacion-texto { padding: var(--curso) var(--gutter); justify-self: end; }
  .mapa, .mapa iframe { min-height: 30rem; }

  .pie { grid-template-columns: auto 1fr auto; align-items: end; }
}

@media (min-width: 64rem) {
  .menu-btn { display: none; }
  .js .menu:not(.abierto), .menu {
    position: static; display: flex; flex-direction: row; align-items: center; gap: 1.75rem;
    padding: 0; border: 0; box-shadow: none; background: none;
  }
  .menu a:not(.btn) {
    padding: 0; border: 0; font: 500 1rem var(--f-texto);
    text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size .3s var(--ease);
  }
  .menu a:not(.btn):hover { background-size: 100% 1.5px; }
  .marca-firma { height: 2rem; }
  .cabecera { padding-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))); }
  .menu-cta { margin-top: 0; min-height: 2.75rem; padding: .45rem 1.35rem; }

  .portada { padding-block: calc(var(--cabecera) + 5rem) 2.5rem; }
  .curso-celosia { --bloque: 44px; }

  .planos { grid-template-columns: 1fr 1fr 1.45fr 1fr; }
  .plano { grid-template-columns: 1fr; align-content: start; padding: 2.5rem 2rem 3rem; min-height: 19rem; }
  .plano .ico-linea { grid-row: auto; margin-bottom: 1.5rem; }

  /* Paquetes en una sola fila cuando caben cuatro */
  .trat-grid:not(.trat-grid-par) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trat-estrella { padding: 3.5rem 2rem; }
  .trat { --py: 1.75rem; --px: 1.4rem; }

  /* Agenda: el texto a la izquierda y el formulario a la derecha (como ritmoa-automatiza.com) */
  .agenda-caja {
    max-width: var(--ancho); text-align: left; align-items: start;
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(3rem, 6vw, 6rem); row-gap: 1.5rem;
  }
  .agenda-caja h2 { font-size: clamp(2.6rem, 3.8vw, 3.5rem); }
  .agenda-caja > p { font-size: 1.15rem; }
  .agenda-caja .ag { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .agenda-directo { align-items: start; margin-top: 1rem; }
  .agenda-caja h2 .resalte { display: block; }
}