/* ============================================================================
   FLEX STUDIO — Página pública

   LA DIRECCIÓN, fijada por el cliente: el lenguaje de DubaluAI, que Josué
   señaló dos veces y pidió analizar a fondo. Lo que se tomó de ahí, medido
   sobre la página de verdad:

     · Título en dos: la segunda mitad destacada. Es su firma más reconocible y
                    aquí se usa en todas las secciones.
     · Eyebrow:     píldora con punto, y '01 / 05 —— ETIQUETA' en versalitas.
     · Portada:     foto a sangre oscurecida con el texto encima, no una foto en
                    tarjeta a un lado.
     · Ritmo:       secciones de ~120px alternando dos fondos.
     · Radios:      píldora (9999px) en botones de barra, 24px en tarjetas.
     · Sombras:     dos capas suaves, nunca negro puro.
     · Movimiento:  ken-burns en las fotos, marquee en la banda, y entradas
                    largas — ellos usan transform .9s cubic-bezier(0,0,.2,1).

   PERO EL COLOR Y LA TIPOGRAFÍA SON DE FLEX, NO DE LA REFERENCIA. Josué mandó
   su Instagram y su logotipo: negro, blanco y beige, en una geométrica ligera.
   Ahí se acabó la discusión de qué acento poner. Ver el bloque de LA PALETA.

   Y lo que es de Flex y de nadie más: el plano del salón con los reformers
   dibujados, y el color de cada hora diciendo qué tan llena va.

   ⚠ Las fotos son de archivo (Unsplash) y son PROVISIONALES. Van a sustituirse
     por fotos de los estudios de Flex. Están marcadas con data-foto="archivo".
   ============================================================================ */

:root {
  /* --------------------------------------------------------------------------
     LA PALETA — es la de Flex, no una escogida por nosotros.

     Sale de su Instagram y de su logotipo: NEGRO Y BLANCO, con beige cálido en
     las portadas de sus destacados. No tienen un color de acento; su marca es
     el contraste. Por eso aquí el botón principal es negro y el acento es el
     beige, no un verde inventado.

     El color SOLO aparece donde significa algo: cuántos lugares quedan en una
     hora. Y hasta ahí va desaturado, para que no le pelee a una marca que
     justamente decidió no tener color.
     -------------------------------------------------------------------------- */

  /* El papel */
  --blanco:  #ffffff;
  --crema:   #f4f1ec;          /* el alterno de sección */
  --linea:   #e3ddd4;

  /* La tinta: el negro de su logotipo */
  --tinta:   #0a0a0a;
  --tinta-2: #4a4843;
  --suave:   #6e6a62;
  --tinta-3: #262523;   /* el negro levantado, para el hover de un botón */

  /* El beige de sus destacados. Hace de acento sin ser un color */
  --arena:    #cbbca7;
  --arena-2:  #a89078;
  --arena-luz:#ebe4d9;

  /* Los resortes: cada uno dice una cantidad, no adorna. Desaturados a
     propósito: son el único color de la página y no deben gritar. */
  --resorte-facil: #4a7a5c;
  --resorte-medio: #9a7b3e;
  --resorte-duro:  #a3574c;

  /* --------------------------------------------------------------------------
     LA TIPOGRAFÍA

     SU LOGOTIPO MANDA. "Flex Studio" está escrito en una GEOMÉTRICA LIGERA:
     trazo parejo, sin remates, mucho aire entre letras. No es una romana ni un
     grotesco pesado — se probaron los dos y ninguno era Flex.

     Jost es lo más cercano que hay en Google Fonts: está dibujada sobre la
     misma idea que la Futura, y en peso 300/400 con las letras abiertas da el
     mismo aire que su logo.

     Se usa en pesos ligeros y a tamaños grandes: títulos, nombres de sucursal,
     precios, la marca. Todo lo que se opera —fichas, pasos, botones, el plano—
     va en el grotesco. Una geométrica ligera a 13px se vuelve ilegible.
     -------------------------------------------------------------------------- */
  --display: 'Jost', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;
  --fuente:  'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --r-chico:  10px;
  --r:        16px;
  --r-grande: 24px;

  /* Las dos sombras de la referencia: dos capas, teñidas de tinta */
  --sombra:   0 4px 8px rgba(10,10,10,.06), 0 8px 16px rgba(10,10,10,.10);
  --sombra-2: 0 2px 6px rgba(10,10,10,.05), 0 10px 28px rgba(10,10,10,.10);

  --curva: cubic-bezier(.4, 0, .2, 1);
  --curva-larga: cubic-bezier(0, 0, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta-2);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Lo que dibuja el navegador y casi nadie viste */
::selection { background: var(--tinta); color: var(--blanco); }
:root { accent-color: var(--tinta); }
input, select { caret-color: var(--tinta); }
* { scrollbar-color: var(--linea) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea); border: 3px solid var(--blanco); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #d6cec1; }
:focus-visible { outline: 2.5px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

a { color: var(--tinta); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta-3); }

img { display: block; max-width: 100%; }

.centro { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { color: var(--tinta); margin: 0; text-wrap: balance; }

/* Los títulos, en la geométrica ligera de su logotipo. Peso 300, interlineado
   apretado y las letras abiertas: ese aire es la marca. Apretarlas o
   engordarlas la convierte en otra cosa. */
h1, h2 {
  font-family: var(--display); font-weight: 300;
  letter-spacing: -.01em; line-height: 1.08;
}
/* El título en dos tonos. Su marca no tiene color de acento, así que la
   segunda mitad no cambia de color: sube de peso. El contraste entre ligera y
   media es el mismo recurso, hecho con lo que sí tienen. */
h1 em, h2 em { font-style: normal; font-weight: 500; color: inherit; }

/* Los encabezados de trabajo van en el grotesco: son rótulos de una pantalla
   que se opera, no texto que se lee despacio. */
h3 { font-family: var(--fuente); font-weight: 700; letter-spacing: -.015em; }

/* --- el eyebrow numerado: 01 / 05 ——— DISPONIBILIDAD --- */
.rotulo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.rotulo__num { color: var(--suave); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.rotulo__raya { width: 34px; height: 1px; background: var(--arena-2); }
/* Con punto final, como rotulan sus destacados de Instagram: DISTRITO. YOU.
   CLASSES. Es el único tic tipográfico que tienen y se reconoce de inmediato. */
.rotulo__que { color: var(--tinta); }

/* --- el eyebrow en píldora, con su punto --- */
.pildora {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.12); color: var(--blanco);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.pildora::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--arena); flex-shrink: 0;
  animation: late 2.4s var(--curva) infinite;
}
@keyframes late {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

/* ================================================================== cabeza */

.cabeza {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--blanco) 90%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--curva), box-shadow .3s var(--curva);
}
.cabeza--pegada { border-color: var(--linea); box-shadow: 0 8px 24px -20px rgba(10,10,10,.55); }
.cabeza__fila {
  max-width: 1200px; margin: 0 auto; padding: 15px 28px;
  display: flex; align-items: center; gap: 10px;
}
/* El logotipo: "Flex" y debajo "Studio", más chico y más ligero. En una barra
   horizontal no cabe apilado, así que se conserva lo que sí lo identifica —el
   cambio de peso y el aire entre letras. */
.marca {
  font-family: var(--display); font-weight: 400; font-size: 25px;
  letter-spacing: .02em; color: var(--tinta);
}
.marca span { font-weight: 300; color: var(--tinta-2); }
/* Desde el 30 sep 2026 la barra son dos botones, no enlaces de texto, así que
   el aire entre ellos es de botones (10px) y no de menú (30px): pegados se
   leen como un par, que es lo que son. */
.cabeza nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.cabeza nav a { font-size: 15px; color: var(--tinta-2); text-decoration: none; font-weight: 500; }
.cabeza nav a:hover { color: var(--tinta); }
/* El `.btn` de la barra manda sobre lo de arriba, que es para enlaces sueltos:
   si no, el color y el peso del enlace le ganaban al botón. */
.cabeza nav a.btn { font-size: 14.5px; font-weight: 600; color: var(--blanco); }

/* ================================================================== portada

   A sangre, con la foto de fondo oscurecida y el texto encima. La foto se
   acerca despacio todo el tiempo (ken burns), como en la referencia. */

.portada {
  position: relative; overflow: hidden;
  background: var(--tinta);
  min-height: 640px;
  display: flex; align-items: center;
  padding: 92px 0 84px;
}
.portada__fondo { position: absolute; inset: 0; z-index: 0; }
.portada__fondo img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1)     translate3d(0, 0, 0); }
  to   { transform: scale(1.085) translate3d(-1.5%, -1.5%, 0); }
}
/* El velo va de la tinta sólida a la izquierda —donde se lee— hasta casi nada
   a la derecha, para que la foto se siga viendo. */
.portada__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.82) 38%,
                            rgba(10,10,10,.45) 68%, rgba(10,10,10,.28) 100%),
    linear-gradient(0deg, rgba(10,10,10,.55), transparent 42%);
}
.portada .centro { position: relative; z-index: 2; width: 100%; }
.portada__texto { max-width: 680px; }
.portada h1 {
  color: var(--blanco);
  font-size: clamp(42px, 6vw, 72px); line-height: 1.06;
  margin: 20px 0 22px;
}
.portada h1 em { color: var(--arena); }
.portada__bajada {
  font-size: 19px; max-width: 46ch; margin: 0 0 30px;
  color: rgba(255,255,255,.78);
}

.acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }

.palomitas {
  display: flex; gap: 12px 28px; flex-wrap: wrap;
  font-size: 15px; color: rgba(255,255,255,.78);
}
.palomitas span { display: flex; align-items: center; gap: 9px; }
/* En beige, no en verde: Flex no tiene verde. El `#5fd6a1` que estaba aquí era
   un resto de la paleta que usé antes de ver su Instagram. */
.palomitas svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--arena); }

/* ====================================== la banda: las seis, desfilando

   El marquee de la referencia. Allá son nombres de clientes; aquí son las
   sucursales con sus camas, que es un dato y no un adorno. */

.banda-suc {
  border-bottom: 1px solid var(--linea);
  padding: 22px 0 24px; overflow: hidden;
}
.banda-suc__que {
  text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--suave);
  margin-bottom: 16px;
}
.marquesina {
  display: flex; gap: 0; width: max-content;
  animation: desfila 34s linear infinite;
}
.marquesina:hover { animation-play-state: paused; }
@keyframes desfila { to { transform: translateX(-50%); } }
.marquesina__tanda { display: flex; align-items: center; }
.marquesina b {
  font-family: var(--display); font-size: 25px; font-weight: 300;
  color: var(--tinta); letter-spacing: .04em; padding: 0 22px;
  text-transform: uppercase;
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
}
.marquesina b i {
  font-style: normal; font-size: 13px; font-weight: 600;
  font-family: var(--fuente); color: var(--arena-2); text-transform: none;
}
.marquesina b::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--linea); margin-left: 22px; align-self: center;
}

/* ================================================================ secciones */

.seccion { padding: 112px 0; }
.seccion--crema { background: var(--crema); border-block: 1px solid var(--linea); }

.seccion__intro { max-width: 52ch; margin-bottom: 44px; }
.seccion__intro h2 { font-size: clamp(34px, 4.8vw, 54px); line-height: 1.05; margin-bottom: 16px; }
.seccion__intro p { margin: 0; font-size: 18px; }

/* --- el bloque de foto y texto, alternando lados --- */
.dupla {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.dupla--volteada .dupla__foto { order: 2; }
.dupla__foto {
  border-radius: var(--r-grande); overflow: hidden; aspect-ratio: 5 / 4;
  background: var(--crema); box-shadow: var(--sombra-2);
}
.dupla__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva-larga); }
.dupla__foto:hover img { transform: scale(1.04); }
.dupla h2 { font-size: clamp(31px, 4.1vw, 48px); line-height: 1.06; margin-bottom: 18px; }
.dupla__bajada { font-size: 17.5px; margin: 0 0 24px; }

/* La lista con palomita en círculo del acento — tal cual la referencia */
.checks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 13px; }
.checks li { display: flex; align-items: flex-start; gap: 13px; font-size: 16.5px; }
.checks svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  background: var(--tinta); color: var(--blanco); border-radius: 50%; padding: 4.5px;
}

/* ================================================================== reserva */

.panel {
  background: var(--blanco); border-radius: var(--r-grande);
  padding: 36px 34px 32px;
  box-shadow: var(--sombra);
  border: 1px solid var(--linea);
}

.mes-barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--linea);
}
.mes-barra:has(#meses[hidden]) { display: none; }
.mes-barra__que {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--suave);
}

.paso { position: relative; padding-left: 30px; padding-bottom: 30px; scroll-margin-top: 90px; }
.paso::before { content: ''; position: absolute; left: 5px; top: 9px; bottom: 0; width: 2px; background: var(--linea); }
.paso::after {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blanco); border: 2.5px solid var(--tinta);
}
.paso:last-of-type { padding-bottom: 0; }
.paso:last-of-type::before { display: none; }

.paso__cabeza { display: flex; align-items: baseline; gap: 14px; margin-bottom: 15px; min-height: 26px; }
.paso__cabeza h3 { font-size: 20px; flex: 1; }
.paso__cabeza .apunte { font-size: 13.5px; color: var(--suave); margin-left: auto; text-align: right; }

/* --- fichas --- */
.fichas { display: flex; gap: 9px; flex-wrap: wrap; }
.fichas--desliza {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px;
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  scroll-snap-type: x proximity;
}
.fichas--desliza > .ficha { scroll-snap-align: start; }

.ficha {
  position: relative;
  font-family: var(--fuente); font-size: 15px;
  padding: 11px 17px; min-height: 48px;
  background: var(--blanco); color: var(--tinta-2);
  border: 1.5px solid var(--linea); border-radius: 12px;
  cursor: pointer; white-space: nowrap;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  transition: border-color .15s var(--curva), background .15s var(--curva),
              color .15s var(--curva), transform .15s var(--curva);
}
.ficha:hover { border-color: var(--suave); }
.ficha:active { transform: scale(.985); }
.ficha b { color: var(--tinta); font-weight: 700; }
.ficha small { font-size: 12.5px; color: var(--suave); font-weight: 500; }
.ficha[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); }
.ficha[aria-pressed="true"] b { color: var(--blanco); }
.ficha[aria-pressed="true"] small { color: rgba(255,255,255,.78); }
.ficha:disabled { opacity: .4; cursor: not-allowed; }

/* Los días: un control segmentado, una sola pieza */
.segmentos {
  display: inline-flex; flex-wrap: wrap;
  border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--blanco); overflow: hidden;
}
.segmentos button {
  font-family: var(--fuente); font-size: 15px; font-weight: 600;
  padding: 12px 20px; min-height: 48px;
  background: none; border: 0; border-right: 1px solid var(--linea);
  color: var(--tinta-2); cursor: pointer; white-space: nowrap;
  transition: background .15s var(--curva), color .15s var(--curva);
}
.segmentos button:last-child { border-right: 0; }
.segmentos button:hover { background: var(--crema); color: var(--tinta); }
.segmentos button[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }
.segmentos button:active { transform: scale(.985); }

/* La hora lleva su resorte: el color dice cuánto queda */
.ficha--hora { min-width: 118px; align-items: flex-start; padding-left: 18px; }
.ficha--hora::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 4px;
  border-radius: 0 3px 3px 0;
}
.resorte-facil::before { background: var(--resorte-facil); }
.resorte-medio::before { background: var(--resorte-medio); }
.resorte-duro::before  { background: var(--resorte-duro); }
.resorte-facil small { color: var(--resorte-facil); }
.resorte-medio small { color: var(--resorte-medio); }
.resorte-duro  small { color: var(--resorte-duro); }
.ficha--llena::before { background: var(--linea); }
.ficha--hora[aria-pressed="true"]::before { background: rgba(255,255,255,.6); }
.ficha--hora[aria-pressed="true"] small { color: rgba(255,255,255,.8); }

/* ====================================================== el plano del salón */

.salon { background: var(--crema); border: 1px solid var(--linea); border-radius: var(--r); padding: 28px 24px 22px; }
.salon__frente { text-align: center; margin-bottom: 26px; }
.salon__barra {
  height: 3px; background: var(--linea); border-radius: 2px; margin-bottom: 10px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.salon__frente span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--suave);
}

.camas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); max-width: 600px; margin: 0 auto; }

/* Un reformer visto desde arriba: el marco, el carro y la barra de pies */
.cama {
  position: relative; aspect-ratio: 1 / 1.7;
  border: 2px solid var(--linea); border-radius: var(--r-chico);
  background: var(--blanco); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px;
  font-family: var(--fuente); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--suave);
  transition: transform .18s var(--curva-larga), border-color .18s var(--curva),
              background .18s var(--curva), color .18s var(--curva);
}
.cama::before { content: ''; position: absolute; left: 17%; right: 17%; top: 13%; height: 45%; border-radius: 4px; background: var(--crema); transition: background .18s var(--curva); }
.cama::after  { content: ''; position: absolute; left: 29%; right: 29%; top: 7%; height: 2.5px; border-radius: 2px; background: var(--linea); transition: background .18s var(--curva); }

.cama--libre { border-color: var(--tinta); border-width: 2.5px; color: var(--tinta); }
.cama--libre::before { background: var(--arena-luz); }
.cama--libre::after  { background: var(--tinta); }
.cama--libre:hover { transform: translateY(-4px); background: var(--arena-luz); box-shadow: 0 12px 24px -14px rgba(10,10,10,.5); }

.cama--ocupada { cursor: not-allowed; background: var(--linea); border-color: transparent; color: #8d887f; }
.cama--ocupada::before { background: rgba(120,132,126,.22); }
.cama--ocupada::after  { background: transparent; }

.cama--elegida {
  background: var(--tinta); border-color: var(--tinta); color: var(--blanco);
  transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(10,10,10,.62);
}
.cama--elegida::before { background: rgba(255,255,255,.26); }
.cama--elegida::after  { background: rgba(255,255,255,.62); }

/* El salón se arma al escoger hora. Entran desde su posición final, así que si
   algo falla quedan visibles igual. */
@keyframes asienta {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.camas--armando .cama {
  animation: asienta .44s var(--curva-larga) backwards;
  animation-delay: calc(var(--i) * 26ms);
}

.leyenda {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea);
  font-size: 13.5px; color: var(--suave); font-weight: 500;
}
.leyenda span { display: flex; align-items: center; gap: 8px; }
.muestra { width: 13px; height: 22px; border-radius: 3px; border: 2px solid var(--linea); flex-shrink: 0; }
.muestra--libre   { border-color: var(--tinta); background: var(--arena-luz); }
.muestra--ocupada { border-color: transparent; background: var(--linea); }
.muestra--elegida { border-color: var(--tinta); background: var(--tinta); }

/* La letra chica de la cama: se lee, pero no le compite al plano. */
.salon__nota {
  margin: 12px 0 0; text-align: center;
  font-size: 12.5px; color: var(--suave);
}
.forma__chica { display: block; margin-top: 8px; font-size: 12.5px; }
/* El aviso de los 65 años, en rojo (Josué Villegas, 20 oct 2026): el mismo
   rojo desaturado de los errores del formulario. */
.forma__chica--roja { color: var(--resorte-duro); }

/* --- lleno: la lista de espera --- */
.lleno {
  border: 1.5px dashed color-mix(in srgb, var(--resorte-duro) 45%, var(--linea));
  border-radius: var(--r); background: var(--crema);
  padding: 26px 24px; text-align: center;
}
.lleno__marca { font-family: var(--display); font-size: 26px; font-weight: 300; color: var(--tinta); margin-bottom: 10px; }
.lleno p { margin: 0 auto 10px; max-width: 52ch; font-size: 15.5px; }
.lleno p:last-child { margin-bottom: 0; }

/* ====================================================== resumen */

.resumen {
  position: sticky; bottom: 18px; z-index: 20;
  margin-top: 28px;
  background: var(--tinta); border-radius: var(--r);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  box-shadow: 0 16px 38px -18px rgba(10,10,10,.6);
}
.resumen__que { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9c958a; }
/* Este renglón cambia mientras la clienta escoge: es pantalla que se opera,
   así que va en el grotesco. */
.resumen__cual { font-size: 17.5px; font-weight: 700; color: var(--blanco); letter-spacing: -.015em; margin-top: 3px; }
.resumen__accion { margin-left: auto; }

/* Los horarios que ya escogió, como fichas con su tache. Así ve de un vistazo
   cuántos lleva y cuántos le faltan, y puede quitar uno sin empezar de cero. */
/* Dónde queda el estudio, debajo de su nombre (Flex, 30 sep 2026). Va en
   gris y chico a propósito: es un dato de apoyo, no compite con el nombre ni
   con el botón de apartar. "Ubicar" sí se marca, porque es lo único de este
   renglón que se pica. */
/* ⚠ ESTE RENGLÓN PESA (Flex, 1 oct 2026: *"esto que resalte más, así como el
   botón de ubicar"*). Nació en gris chiquito, como un pie de foto, y se perdía
   contra el negro de la barra. La dirección es lo que contesta "¿y dónde
   queda?", que es la segunda pregunta de cualquiera que nunca ha ido. */
/* ⚠ LA DIRECCIÓN VA EN BLANCO, igual que "Ubicar" (Flex, 1 oct 2026: *"esto
   que resalte más, así como el botón de ubicar"*). Nació en gris chiquito,
   como un pie de foto, y se perdía contra el negro de la barra. La dirección
   es lo que contesta "¿y dónde queda?", que es la segunda pregunta de
   cualquiera que nunca ha ido.

   Lo que pidieron fue el COLOR, no otra forma: el primer intento convirtió
   "Ubicar" en una pastilla y Josué lo corrigió el mismo día. El enlace se
   queda como estaba, subrayado fino. */
.resumen__donde {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px;
  margin-top: 6px; font-size: 15px; line-height: 1.35;
  color: var(--blanco); font-weight: 500;
}
.resumen__donde:empty { display: none; }
.resumen__donde a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--blanco); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px;
  transition: border-color .2s var(--curva);
}
.resumen__donde a::before {
  /* El pin, dibujado con bordes: un emoji aquí se vería de otro sistema en
     cada teléfono, y en esta hoja no hay iconos de archivo. */
  content: ''; width: 9px; height: 9px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid currentColor; flex: 0 0 auto;
}
.resumen__donde a:hover { border-bottom-color: var(--blanco); }

.resumen__lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.resumen__lista:empty { display: none; }
.elegido {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 11px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: var(--blanco);
  font-size: 13.5px; font-weight: 600;
}
.elegido button {
  background: none; border: 0; cursor: pointer;
  color: #b3ab9f; font-size: 17px; line-height: 1;
  min-width: 28px; min-height: 28px; border-radius: 50%;
}
.elegido button:hover { color: var(--blanco); background: rgba(255,255,255,.12); }
.elegido--pendiente {
  background: transparent; border: 1px dashed rgba(255,255,255,.32);
  color: #b3ab9f; padding-right: 11px;
}

/* Un día que no se puede picar: sin clases en esa sucursal, o el paquete ya
   tiene todos sus días. Se ve, pero apagado. */
.segmentos button:disabled,
.segmentos button:disabled:hover {
  background: var(--blanco); color: #b8b2a8; cursor: not-allowed;
}

/* Agrupa campos del formulario sin romper la rejilla, para poder esconderlos
   juntos. */
.campos__grupo { display: contents; }

/* ============================================ los pasos, uno a la vez

   Solo está abierto el paso que toca. El que ya se contestó se cierra en un
   renglón con lo que escogió y un botón "Cambiar"; el que sigue se abre. Así
   la clienta nunca ve más de una pregunta, y aun así ve todo lo que ya dijo. */

.paso__valor, .paso__cambiar { display: none; }

.paso--hecho { padding-bottom: 16px; }
.paso--hecho .paso__cuerpo { display: none; }
.paso--hecho .paso__cabeza { margin-bottom: 0; align-items: center; }
.paso--hecho .paso__cabeza h3 { flex: 0 1 auto; color: var(--suave); font-weight: 600; font-size: 16px; }
.paso--hecho .paso__cabeza .apunte { display: none; }
.paso--hecho::after { background: var(--tinta); }          /* la marca se llena */
.paso--hecho .paso__valor {
  display: inline; flex: 1; min-width: 0;
  font-size: 16px; font-weight: 700; color: var(--tinta);
}
.paso--hecho .paso__cambiar {
  display: inline-flex; align-items: center; margin-left: auto;
  background: none; border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 6px 15px; min-height: 36px; cursor: pointer;
  font: 600 13.5px var(--fuente); color: var(--tinta);
  transition: border-color .15s var(--curva), background .15s var(--curva);
}
.paso--hecho .paso__cambiar:hover { border-color: var(--tinta-2); background: var(--crema); }

.paso--abierto .paso__cuerpo { animation: abre-paso .45s var(--curva-larga) both; }
@keyframes abre-paso {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* --- las tarjetas de paquete dentro del paso --- */
.paquetes-mini {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding-top: 8px;
}
.paquete-mini {
  position: relative; text-align: left; cursor: pointer;
  font-family: var(--fuente); color: var(--tinta-2);
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 16px;
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s var(--curva), transform .2s var(--curva-larga),
              background .15s var(--curva);
}
.paquete-mini:hover { border-color: var(--tinta-2); transform: translateY(-2px); }
.paquete-mini b {
  font-family: var(--display); font-weight: 400; font-size: 25px;
  line-height: 1.1; color: var(--tinta);
}
.paquete-mini__dias { font-size: 13.5px; color: var(--suave); }
.paquete-mini__precio { margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--tinta); }
/* Los dos precios en negritas, iguales: son dos formas de pagar, no una
   principal y una nota (pedido por Flex, 21 sep 2026). */
.paquete-mini__recurrente { font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.paquete-mini[aria-pressed="true"] .paquete-mini__recurrente { color: var(--blanco); }
.paquete-mini__marca {
  position: absolute; top: -10px; left: 14px;
  background: var(--tinta); color: var(--blanco);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.paquete-mini[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); }
.paquete-mini[aria-pressed="true"] b,
.paquete-mini[aria-pressed="true"] .paquete-mini__precio { color: var(--blanco); }
.paquete-mini[aria-pressed="true"] .paquete-mini__dias { color: #b3ab9f; }
.paquete-mini[aria-pressed="true"] .paquete-mini__marca { background: var(--arena); color: var(--tinta); }

@media (max-width: 640px) {
  /* OPCIÓN A (la que va por default): una tarjeta por renglón, a lo ancho.
     Sesiones a la izquierda, los dos precios a la derecha. Nada se parte en
     dos renglones y las cuatro caben en una pantalla. Antes iban en dos
     columnas y "$1,000 con cargo recurrente" se rompía en tres líneas. */
  .paquetes-mini { grid-template-columns: 1fr; gap: 10px; }
  .paquete-mini {
    display: grid; grid-template-columns: 1fr auto; column-gap: 14px;
    align-items: center; padding: 14px 16px;
  }
  /* Tres renglones: "8 sesiones ……… $950 al mes" / "al mes · 2 días por
     semana" / "……… $900 con cargo recurrente". Así nada se parte: el nombre
     solo compite con el precio corto, y el recurrente tiene el ancho entero. */
  .paquete-mini b { grid-column: 1; grid-row: 1; font-size: 22px; white-space: nowrap; }
  .paquete-mini__precio { grid-column: 2; grid-row: 1; margin-top: 0; text-align: right; white-space: nowrap; }
  .paquete-mini__dias { grid-column: 1 / -1; grid-row: 2; white-space: nowrap; margin-top: 2px; }
  .paquete-mini__recurrente { grid-column: 1 / -1; grid-row: 3; text-align: right; white-space: nowrap; font-size: 13px; margin-top: 6px; }
  .paquete-mini__marca { top: -9px; left: 12px; }

  /* OPCIÓN B: carrusel. Una tarjeta grande a la vez y se desliza de lado; se
     asoma la siguiente para que se note que hay más. Se activa poniéndole la
     clase `paquetes-mini--carrusel` a #paquetesPaso. */
  .paquetes-mini--carrusel {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding: 10px 4px 14px; margin: 0 -4px;
    scrollbar-width: none;
  }
  .paquetes-mini--carrusel::-webkit-scrollbar { display: none; }
  .paquetes-mini--carrusel .paquete-mini {
    flex: 0 0 76%; scroll-snap-align: start; display: block; padding: 18px 18px 16px;
  }
  .paquetes-mini--carrusel .paquete-mini > b,
  .paquetes-mini--carrusel .paquete-mini > span { display: block; text-align: left; white-space: normal; }
  .paquetes-mini--carrusel .paquete-mini b { font-size: 26px; }
  .paquetes-mini--carrusel .paquete-mini__precio { margin-top: 12px; font-size: 16px; }
  .paquetes-mini--carrusel .paquete-mini__recurrente { font-size: 14px; }
  .paquetes-mini--carrusel .paquete-mini__marca { position: absolute; }

  .paso--hecho .paso__cabeza { flex-wrap: nowrap; }
  .paso--hecho .paso__cabeza h3 { font-size: 14px; }
}
/* El botón de la barra negra va BLANCO (Flex, 21 sep 2026): negro sobre negro
   no se alcanzaba a reconocer en el celular. Apagado sigue gris, distinto. */
.resumen .btn { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
.resumen .btn:hover { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.resumen .btn:disabled { opacity: 1; background: #2b2a27; border-color: #2b2a27; color: #9c958a; }

/* ====================================================== botones */

.btn {
  font-family: var(--fuente); font-size: 16px; font-weight: 600;
  padding: 14px 28px; min-height: 52px;
  border: 1.5px solid var(--tinta); border-radius: 10px;
  background: var(--tinta); color: var(--blanco);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .2s var(--curva), border-color .2s var(--curva),
              color .2s var(--curva), transform .2s var(--curva-larga),
              box-shadow .2s var(--curva);
}
.btn:hover:not(:disabled) {
  background: var(--tinta-3); border-color: var(--tinta-3); color: var(--blanco);
  transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(10,10,10,.7);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; transition: transform .2s var(--curva); }
.btn:hover svg { transform: translateX(3px); }

/* La píldora es de la barra de arriba, como en la referencia */
.btn--pildora { border-radius: 999px; padding: 11px 22px; min-height: 44px; font-size: 14.5px; }
/* El oscuro, para cuando el acento ya se usó al lado */
.btn--tinta { background: var(--tinta); border-color: var(--tinta); }
.btn--tinta:hover:not(:disabled) { background: #16302a; border-color: #16302a; box-shadow: 0 10px 22px -12px rgba(10,10,10,.7); }
/* El claro, sobre foto oscura */
.btn--vidrio { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: var(--blanco); backdrop-filter: blur(6px); }
.btn--vidrio:hover:not(:disabled) { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); color: var(--blanco); box-shadow: none; }
.btn--claro { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.btn--claro:hover:not(:disabled) { background: var(--crema); color: var(--tinta); border-color: var(--suave); box-shadow: none; }

.listo {
  margin-top: 24px; padding: 20px 22px; scroll-margin-top: 90px;
  border-radius: var(--r); background: var(--arena-luz);
  border: 1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
}
/* El reloj del apartado: es una cuenta regresiva de verdad, así que se lee
   antes que nada. En rojo solo cuando ya va de salida. */
.reloj {
  margin: 14px 0 !important;
  font-family: var(--display); font-weight: 400; font-size: 27px;
  color: var(--tinta); letter-spacing: -.01em;
}
.reloj small {
  display: block; font-family: var(--fuente); font-size: 13.5px;
  font-weight: 600; color: var(--suave); letter-spacing: 0;
}
.reloj--corre small { color: var(--resorte-duro); }
.reloj--vencido { color: var(--resorte-duro); }

#comoPagar { margin: 16px 0 6px; display: grid; gap: 12px; justify-items: start; }
#comoPagar .btn { width: 100%; }

.transferencia {
  width: 100%; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 16px 18px;
  display: grid; gap: 8px; justify-items: start;
}
.transferencia b { color: var(--tinta); font-size: 15px; }
.transferencia .mini { font-size: 13px; color: var(--suave); margin: 0; }
#datosBanco { font-size: 15.5px; color: var(--tinta-2); }
#datosBanco .clabe {
  font-family: var(--fuente); font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--tinta); letter-spacing: .04em;
}

.listo p { margin: 0 0 4px; }
.listo b { color: var(--tinta); }

/* ====================================================== paquetes */

.paquetes__rejilla { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }

.paquete {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r-grande);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--sombra-2);
  transition: border-color .25s var(--curva), transform .25s var(--curva-larga),
              box-shadow .25s var(--curva);
}
.paquete:hover { transform: translateY(-5px); box-shadow: 0 14px 40px -18px rgba(10,10,10,.3); }
/* La destacada lleva borde del acento, igual que la tarjeta central de allá */
.paquete--favorito { border: 2px solid var(--tinta); }
.paquete__marca {
  position: absolute; top: -11px; left: 24px;
  background: var(--tinta); color: var(--blanco);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.paquete__arriba { flex: 1; }
.paquete__dias {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta);
  background: var(--arena-luz); padding: 5px 11px; border-radius: 999px; margin-bottom: 13px;
}
.paquete h3 { font-family: var(--display); font-weight: 300; font-size: 28px; letter-spacing: -.01em; line-height: 1.12; margin-bottom: 7px; }
.paquete__para { margin: 0; font-size: 14.5px; color: var(--suave); }

.paquete__precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--linea); }
.paquete__precio b { font-family: var(--display); font-size: 40px; font-weight: 300; color: var(--tinta); letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1; }
.paquete__desde, .paquete__mes { font-size: 14px; color: var(--suave); }
.paquete__precio--pide b { font-size: 29px; color: var(--arena-2); font-weight: 400; }
.paquete__rango { margin: 8px 0 0; font-size: 13.5px; color: var(--suave); }

.pagos { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 20px; }
.pagos__nota { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 28px 26px; }
.seccion--crema .pagos__nota { background: var(--blanco); }
.pagos__nota h3 { font-size: 19px; margin-bottom: 15px; }
.pagos__nota p { margin: 0 0 18px; font-size: 15.5px; }
.pagos__par { display: grid; gap: 17px; }
.forma-pago b { display: block; font-size: 15.5px; color: var(--tinta); margin-bottom: 3px; }
.forma-pago p { margin: 0; font-size: 14.5px; color: var(--tinta-2); }

/* ====================================================== sucursales */

/* ====================================================== conócenos

   Sin foto a propósito: las tres que hay ya se usan en la portada, en la dupla
   y en la banda de sucursales, y repetir una aquí se nota más que dejar el
   texto solo. Va centrado y con aire: es lo primero que lee alguien que no
   los conoce. */

.conocenos { padding-bottom: 0; }
.conocenos__centro { max-width: 720px; margin: 0 auto; text-align: center; }
.conocenos__lema {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.05;
  margin-bottom: 22px; text-transform: uppercase; letter-spacing: .01em;
}
.conocenos__lema em { display: block; }
.conocenos__centro p { font-size: 18px; margin: 0 0 16px; }
.conocenos__centro p:last-child { margin-bottom: 0; }
.conocenos__centro b { color: var(--tinta); font-weight: 700; }
.rotulo--centrado { justify-content: center; }

/* ====================================================== el mapa */

.mapa {
  margin-top: 40px; border-radius: var(--r-grande); overflow: hidden;
  border: 1px solid var(--linea); background: var(--crema);
  aspect-ratio: 16 / 7;
  /* Leaflet dibuja sus capas con z-index altos (400 a 800) y se montaba encima
     de la barra de arriba al hacer scroll: se veía el mapa pasando por delante
     del menú. `isolation` lo encierra en su propio piso, así que sus capas ya
     no compiten con las de la página. */
  position: relative; z-index: 0; isolation: isolate;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* El mapa propio (Leaflet). Los controles y el globo se visten para que no
   parezcan pegados de otra página: el gris de Leaflet no es el nuestro. */
.leaflet-container { font-family: var(--fuente); background: var(--crema); }

/* Sin filtro: el mapa va a color, como cualquier mapa de calles. Estuvo en
   grises un rato para que combinara con la marca, pero Josué pidió que se vea
   como Google Maps, y el gris lo alejaba más.
   (Para que sea IDÉNTICO a Google hace falta un mapa de Google My Maps o una
   llave de API de pago; esto es lo más cercano sin depender de eso.) */
.leaflet-control-zoom a {
  color: var(--tinta) !important; border-color: var(--linea) !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 14px; box-shadow: var(--sombra-2); padding: 2px;
}
.leaflet-popup-content { margin: 12px 14px; font-size: 14.5px; }
.mapa__pin {
  font-family: var(--display); font-weight: 400; font-size: 17px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta);
  display: block; margin-bottom: 2px;
}
.mapa__dir { color: var(--tinta-2); display: block; margin-bottom: 8px; }
.mapa__ir {
  font-weight: 700; color: var(--tinta); text-decoration: none;
  border-bottom: 1.5px solid var(--arena);
}
.mapa__nota { margin: 12px 0 0; font-size: 14px; color: var(--suave); }

/* El pin de cada estudio, en el negro de la marca. */
.mapa__marca span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tinta); border: 3px solid var(--blanco);
  box-shadow: 0 2px 6px rgba(10,10,10,.45);
}

/* El que se está viendo en el mapa */

@media (max-width: 640px) {
  .mapa { aspect-ratio: 4 / 5; margin-top: 28px; }
  .conocenos__centro { text-align: left; }
  .rotulo--centrado { justify-content: flex-start; }
}

/* ====================================================== dudas */

.dudas__centro { display: grid; grid-template-columns: 350px 1fr; gap: 60px; align-items: start; }
.dudas .seccion__intro { margin-bottom: 0; position: sticky; top: 96px; }

.preguntas { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); overflow: hidden; box-shadow: var(--sombra-2); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta:last-child { border-bottom: 0; }
.pregunta summary {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; color: var(--tinta); min-height: 62px;
  transition: background .15s var(--curva), color .15s var(--curva);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary span { flex: 1; }
.pregunta summary:hover { background: var(--crema); }
.pregunta summary svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--suave); transition: transform .25s var(--curva-larga); }
.pregunta[open] summary { color: var(--tinta); }
.pregunta[open] summary svg { transform: rotate(180deg); color: var(--tinta); }
.pregunta p { margin: 0; padding: 0 62px 24px 24px; font-size: 15.5px; max-width: 68ch; animation: abre .32s var(--curva-larga) both; }
@keyframes abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====================================================== clase muestra */

.muestra-clase {
  position: relative; overflow: hidden;
  border-radius: var(--r-grande);
  background: var(--tinta); color: rgba(255,255,255,.76);
  padding: 52px 48px;
  display: flex; align-items: center; gap: 44px; flex-wrap: wrap;
}
/* Un halo del acento en la esquina, para que el bloque oscuro no sea un ladrillo */
.muestra-clase::before {
  content: ''; position: absolute; right: -120px; top: -140px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(203,188,167,.30), transparent 68%);
  pointer-events: none;
}
.muestra-clase > * { position: relative; }
.muestra-clase h2 { color: var(--blanco); font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 14px; }
.muestra-clase h2 em { color: var(--arena); }
.muestra-clase p { margin: 0; max-width: 52ch; font-size: 17px; }
.muestra-clase > div { flex: 1; min-width: 290px; }
.muestra-clase .btn { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); flex-shrink: 0; }
.muestra-clase .btn:hover { background: var(--arena-luz); color: var(--tinta-3); border-color: var(--arena-luz); }

/* ====================================================== formulario */

.velo { position: fixed; inset: 0; z-index: 50; background: rgba(10,10,10,.62); display: grid; place-items: center; padding: 20px; animation: aparece .2s var(--curva) both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.tarjeta-forma {
  background: var(--blanco); border-radius: var(--r-grande);
  width: 100%; max-width: 490px; padding: 32px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  box-shadow: 0 30px 70px -30px rgba(10,10,10,.5);
  animation: sube-forma .3s var(--curva-larga) both;
}
@keyframes sube-forma { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.tarjeta-forma h2 { font-size: 34px; margin-bottom: 6px; }
.forma__resumen { margin: 0 0 24px; font-size: 15.5px; color: var(--tinta); font-weight: 600; }
/* El precio dentro de la ventana de datos: es lo último que quiere saber antes
   de mandar, así que va en grande y no en letra chica. */
.forma__precio {
  margin: 20px 0 0; padding: 13px 15px;
  background: var(--crema); border-radius: 12px;
  font-size: 16px; font-weight: 700; color: var(--tinta);
}
.forma__nota { font-size: 13.5px; color: var(--suave); margin: 14px 0 20px; }
.forma__pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.campos { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.campo label { display: block; font-size: 13.5px; font-weight: 700; color: var(--tinta); margin-bottom: 6px; }
.campo textarea { resize: vertical; min-height: 84px; font: inherit; line-height: 1.45; }
/* Mientras el estudio revisa la lesión. Mismo lugar que el reloj del apartado,
   pero sin cuenta regresiva: no es una carrera contra el tiempo, es una espera. */
.revision {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 14px;
  background: var(--papel-alterno, #f4f1ec); color: var(--tinta);
  font-size: 14px; font-weight: 600;
}
.revision::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tinta); margin-right: 10px; vertical-align: 1px;
  animation: revision-late 1.3s ease-in-out infinite;
}
@keyframes revision-late { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
/* Con veredicto, el punto deja de latir: ya no se está esperando nada. */
.revision--quieta::before { animation: none; }
.revision--bien::before { background: var(--resorte-suave, #5c7d5f); }
.revision--mal::before  { background: var(--resorte-duro); }
.revision--mal { color: var(--resorte-duro); }
/* Cuando el estudio ya la confirmó: el panel deja de ser "en espera". */
.listo--confirmado { border-left: 5px solid var(--tinta); }
.reinicio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; font-size: 13.5px; color: var(--suave); }
.reinicio .btn { font-size: 14px; }
.listo--confirmado #listoTitulo { font-size: 1.15em; }
@media (prefers-reduced-motion: reduce) { .revision::before { animation: none; } }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--fuente); font-size: 16px;
  padding: 12px 14px; min-height: 50px;
  border: 1.5px solid var(--linea); border-radius: var(--r-chico);
  background: var(--blanco); color: var(--tinta);
}
.campo input::placeholder { color: #9c958a; }
/* La lada y el número en un solo renglón: el selector angosto, el número
   con el resto. En celular el selector sigue cabiendo (13 oct 2026). */
.con-lada { display: flex; gap: 8px; }
.con-lada select { flex: 0 0 auto; width: 9.5em; max-width: 42%; padding-right: 28px; }
.con-lada input { flex: 1 1 auto; min-width: 0; }
/* Mientras se revisa la lesión, el formulario queda bloqueado y tiene que
   verse bloqueado: un campo blanco invita a corregirlo. */
.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
  background: var(--papel-alterno, #f4f1ec); color: #6b655c; cursor: not-allowed;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2.5px solid var(--tinta); outline-offset: -1px; border-color: var(--tinta); }
.campo input.error, .campo select.error, .campo textarea.error { border-color: var(--resorte-duro); }
.campo .malo { color: var(--resorte-duro); font-size: 13px; margin-top: 5px; display: none; }
.campo .malo.visible { display: block; }

/* ====================================================== pie */

.pie { background: var(--tinta); color: #a8a29a; padding: 60px 0 48px; font-size: 15px; }
.pie .centro { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.pie__bloque { flex: 1; min-width: 230px; }
.pie__bloque p { margin: 0 0 7px; }
.pie__lema {
  font-family: var(--display); font-weight: 300; font-size: 25px;
  line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blanco); margin-bottom: 20px !important;
}
.pie b { color: var(--blanco); font-weight: 700; }
.pie a { color: #cbbca7; }
.pie a:hover { color: var(--blanco); }
.pie__credito { font-size: 12.5px; color: #7a746c; margin-top: 30px; width: 100%; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }

/* ====================================================== el movimiento

   La referencia entra con transform de .9s y curva (0,0,.2,1): largo y
   desacelerado, no un brinquito. Aquí igual.

   El estado escondido lo pone el JavaScript (.en-pausa). Si el JavaScript no
   corre, la página se ve completa igual. Una página que se queda en blanco
   esperando un observador es un error, no una animación. */

.en-pausa { opacity: 0; transform: translateY(28px); }
.en-pausa[data-entra="foto"] { transform: none; }

.entrando { animation: sube .9s var(--curva-larga) both; animation-delay: var(--retraso, 0ms); }
@keyframes sube {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* La foto se destapa de abajo hacia arriba mientras se acerca */
.entrando[data-entra="foto"] { animation: destapa 1.1s var(--curva-larga) both; animation-delay: var(--retraso, 0ms); }
@keyframes destapa {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.entrando[data-entra="foto"] img { animation: acerca 1.7s var(--curva-larga) both; animation-delay: var(--retraso, 0ms); }
@keyframes acerca {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* ====================================================== adaptable */

@media (max-width: 980px) {
  .dupla { grid-template-columns: 1fr; gap: 34px; }
  .dupla--volteada .dupla__foto { order: 0; }
  .dudas__centro { grid-template-columns: 1fr; gap: 30px; }
  .dudas .seccion__intro { position: static; }
  .pagos { grid-template-columns: 1fr; }
  /* ⚠ LA BARRA YA NO SE ESCONDE EN CELULAR (30 sep 2026). Cuando el menú era
     "Disponibilidad · Dudas" en texto, esconderlo estaba bien: eran dos
     enlaces a secciones a las que se llega bajando. Ahora Dudas es un botón
     que pidió Flex, y el 70% de las clientas entra desde el teléfono: ahí es
     donde más falta hace, no donde sobra. Los dos se achican para caber. */
  .cabeza nav a.btn, .cabeza__fila > a.btn {
    padding: 9px 16px; min-height: 40px; font-size: 13.5px;
  }
  .marca { font-size: 21px; }
  .portada { min-height: 0; padding: 64px 0 56px; }

  /* El velo de escritorio despeja la DERECHA para que se vea la foto. En una
     pantalla angosta no hay derecha: el texto ocupa todo el ancho y cae encima
     de lo claro de la foto. Aquí se oscurece parejo.
     Ya pasó: la bajada quedó sobre un arco blanco y no se leía. */
  .portada__velo {
    background:
      linear-gradient(180deg, rgba(10,10,10,.90) 0%, rgba(10,10,10,.86) 55%,
                              rgba(10,10,10,.92) 100%);
  }
}

@media (max-width: 640px) {
  .centro, .cabeza__fila { padding-left: 20px; padding-right: 20px; }
  .seccion { padding: 64px 0; }
  .panel { padding: 24px 17px 22px; border-radius: var(--r); }
  .portada h1 { font-size: 42px; line-height: 1.05; }
  .portada__bajada { font-size: 17px; }
  .marca { font-size: 23px; }
  .paquete h3 { font-size: 27px; }
    .acciones { flex-direction: column; }
  .acciones .btn { width: 100%; }
  .palomitas { font-size: 14px; gap: 9px 20px; }
  .marquesina b { font-size: 21px; padding: 0 15px; }
  .marquesina b::after { margin-left: 15px; }
  .camas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
  .cama { font-size: 12px; }
  .salon { padding: 20px 12px 16px; }
  .campos { grid-template-columns: 1fr; }
  .paquetes__rejilla { grid-template-columns: 1fr; }
  .paso__cabeza { flex-wrap: wrap; }
  .paso__cabeza .apunte { margin-left: 0; width: 100%; text-align: left; }
  .resumen { padding: 15px; gap: 12px; bottom: 10px; }
  .resumen__accion { margin-left: 0; width: 100%; }
  .resumen__accion .btn { width: 100%; }
  .pregunta summary { padding: 17px 18px; font-size: 15.5px; }
  .pregunta p { padding: 0 18px 20px; }
  .muestra-clase { padding: 34px 24px; gap: 26px; }
  .muestra-clase .btn { width: 100%; }
  .lleno { padding: 22px 16px; }
  input, select { font-size: 16px; }   /* evita el zoom de iOS al enfocar */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .cama:hover, .cama--elegida { transform: none; }
  /* Sin animación, lo escondido tiene que volver a verse */
  .en-pausa, .entrando, .entrando img {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* ============================================ el calendario (24 sep 2026)
   Su primera clase. Dos meses con flechas: lo que queda de este y los
   primeros días del que sigue. Solo se encienden SUS días de la semana
   dentro de esa ventana; los demás se ven, apagados, para que se entienda
   que es un mes y no una lista. Ancho de verdad: en escritorio se veía
   amontonado en una esquina (Flex, 24 sep 2026). */
.calendario { max-width: 560px; }
.calendario__barra {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 12px; gap: 10px;
}
.calendario__mes {
  font-family: var(--display); font-weight: 400; font-size: 20px;
  text-transform: capitalize; color: var(--tinta); text-align: center; flex: 1;
}
.calendario__flecha {
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .15s var(--curva);
}
.calendario__flecha:hover { background: var(--crema); }
.calendario__flecha:disabled { opacity: .3; cursor: default; background: var(--blanco); }
.calendario__rejilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.calendario__cabeza {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-align: center;
  color: var(--tinta-2); padding: 4px 0 2px;
}
.calendario__rejilla button {
  font-family: var(--fuente); font-size: 16px; font-weight: 600;
  min-height: 52px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta);
  transition: background .15s var(--curva), color .15s var(--curva), border-color .15s var(--curva);
}
.calendario__rejilla button:hover { background: var(--crema); }
.calendario__rejilla button[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: var(--blanco);
}
.calendario__rejilla button:disabled,
.calendario__rejilla button:disabled:hover {
  background: transparent; border-color: transparent; color: #b8b2a8; cursor: not-allowed;
}
/* LOS DÍAS QUE LE TOCAN (Flex, 29 sep 2026). Ya que escogió sus días, sus
   demás clases del ciclo se pintan en el beige de la marca: de un vistazo ve
   cómo le queda el mes. No se pueden picar —son de las semanas que siguen— y
   por eso la regla tiene que ganarle a la de :disabled, que las apaga. */
.calendario__rejilla button.calendario__suyo,
.calendario__rejilla button.calendario__suyo:hover,
.calendario__rejilla button.calendario__suyo:disabled,
.calendario__rejilla button.calendario__suyo:disabled:hover {
  background: var(--arena-luz); border-color: var(--arena); color: var(--tinta-2);
  cursor: default;
}
/* Segmentos que se acomodan en varios renglones. Para listas de opciones que
   no caben en una tira: hoy, las partes del cuerpo de la lesión. Se pierde el
   borde corrido de la barra de un solo renglón, así que cada botón lleva el
   suyo y se separan con un hueco. */
.segmentos--envuelve {
  flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0;
  background: none; overflow: visible; box-shadow: none;
}
.segmentos--envuelve button {
  flex: 0 0 auto; border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 9px 16px; min-height: 0; font-size: 14px;
}
.segmentos--envuelve button:last-child { border-right: 1.5px solid var(--linea); }
.segmentos--envuelve button[aria-pressed="true"] { border-color: var(--tinta); }

/* Un botón que se lee como liga: para lo que tiene que estar, pero no tiene
   que llamar la atención. Hoy, "date de baja aquí" al pie de la renovación. */
.enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--tinta); text-decoration: underline;
  text-underline-offset: 3px;
}
.enlace:hover { color: var(--tinta-2); }

/* Lo que el color dice, en palabras: cuántas clases son y hasta cuándo. */
.calendario__leyenda {
  margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--suave);
}
.calendario__leyenda b { color: var(--tinta); font-weight: 600; }

/* EL PASO CONTESTADO QUE SE QUEDA ABIERTO. La única excepción al acordeón, y
   es para el calendario: sus clases del ciclo se pintan justo cuando completa
   sus días, o sea en el mismo repintado en que el paso se cerraría solo. Su
   marca va llena —ya está contestado— pero el cuerpo se queda a la vista
   mientras escoge sus horas. Va después de las reglas de .paso--hecho a
   propósito: le tiene que ganar. */
.paso--visto .paso__cuerpo { display: block; }
.paso--visto .paso__cabeza { margin-bottom: 15px; align-items: baseline; }
.paso--visto .paso__cabeza h3 { flex: 1; font-size: 20px; font-weight: 600; color: var(--tinta); }
.paso--visto .paso__cabeza .apunte { display: block; }
.paso--visto .paso__valor, .paso--visto .paso__cambiar { display: none; }
/* Un día que abre pero ya no tiene ni un lugar en ninguna hora: se ve, y se
   dice. Es el rojo desaturado de los resortes, el único color de la hoja. */
.calendario__rejilla button.calendario__lleno,
.calendario__rejilla button.calendario__lleno:hover {
  background: #f7ecea; border-color: #eccfcb; color: #a8564a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.calendario__rejilla button.calendario__lleno small {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
/* Hoy lleva una marquita abajo. */
.calendario__rejilla button.calendario__hoy { position: relative; }
.calendario__rejilla button.calendario__hoy::after {
  content: ''; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; transform: translateX(-50%);
}
@media (max-width: 520px) {
  .calendario__rejilla { gap: 5px; }
  .calendario__rejilla button { min-height: 44px; font-size: 15px; }
}

/* ============================================ renovación (27 sep 2026)
   La sección del link personal. Solo se abre con `?renovar=`; el resto del
   tiempo no existe para quien entra a inscribirse. Reusa el panel, el resumen
   y las fichas de hora del paso a paso: es la misma página, no otra. */
.renglones { list-style: none; margin: 18px 0 0; padding: 0; }
.renglones li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.renglones li span { display: flex; flex-direction: column; gap: 2px; }
/* La caja que abre un "Cambiar" va como renglón propio, pegada al suyo
   (15 oct 2026): sin flex ni raya abajo, y la crema sin el margen de arriba. */
.renglones li.renglones__caja { display: block; padding: 0 0 14px; }
.renglones__caja .cambio { margin-top: 0; }
.renglones em { font-style: normal; font-size: 12.5px; color: var(--tinta-2); }
.renglon__mal { color: var(--resorte-duro); }
/* El resumen de arriba es informativo, no la barra que sigue al scroll.
   Sin margen arriba: es lo primero del panel, y con el de la barra dejaba un
   hueco en blanco antes de la tarjeta negra. */
.resumen--quieto { position: static; margin-top: 0; }
/* El precio en blanco y en la geométrica, como todos los precios. Sin esto
   heredaba el gris del texto y sobre el negro casi no se leía (5 oct 2026). */
.resumen__precio {
  font-family: var(--display); font-weight: 400; font-size: 26px;
  color: var(--blanco); letter-spacing: -.01em;
}

/* La rejilla de renovar es la misma `.rejilla-sem` del paso a paso; aquí
   solo se le da aire, porque no va dentro de un paso con su riel. */
.ren-rejilla { margin-top: 24px; }

/* OPCIONES A LO ANCHO: cómo paga y qué paquete, al renovar (5 oct 2026).
   Iban en una tira que se deslizaba de lado, y en el celular se cortaban a
   media palabra ("Tarjeta de crédi…") y la primera, Transferencia, quedaba
   fuera de la pantalla. Son tres o cuatro opciones, no veinte: caben
   enteras. En escritorio, en columnas parejas; en celular, una por renglón
   con el nombre a la izquierda y el precio a la derecha, como las tarjetas
   de paquete del paso a paso. */
.fichas--lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.fichas--lista > .ficha { white-space: normal; text-align: left; align-items: flex-start; }
@media (max-width: 640px) {
  .fichas--lista { grid-template-columns: 1fr; }
  .fichas--lista > .ficha {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
  }
  .fichas--lista > .ficha small { text-align: right; }
}
.cambio {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--linea); border-radius: 14px; background: var(--crema);
}

/* Los botones de los renglones van chicos: son de apoyo, no la acción de la
   pantalla — esa es "Renovar y pagar", que se queda con el botón grande. */
#renovar .renglones .btn { padding: 9px 15px; min-height: 0; font-size: 13.5px; }
.renglon__botones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.renglon__quita { width: 38px; padding: 9px 0; font-size: 17px; line-height: 1; }

/* Letra chica de la sección: la misma que el resto de la página, que solo
   estaba definida dentro de sus cajas. */
#renovar .mini { font-size: 13px; color: var(--suave); margin: 6px 0 0; }
#renovar .apunte { font-size: 13.5px; color: var(--suave); margin: 12px 0 0; }
#renovar .segmentos { flex-wrap: wrap; }

@media (max-width: 560px) {
  /* En el teléfono el renglón se parte en dos: arriba lo que dice, abajo sus
     botones. Apretados a lo ancho, "Cambiar" quedaba de dos letras por línea. */
  .renglones li { flex-wrap: wrap; }
  .renglon__botones { width: 100%; justify-content: flex-end; }
}

/* ================================================== la rejilla de la semana

   Flex, 30 sep 2026: *"en lugar del calendario, que sea este mismo formato
   que tenemos en la app"*. Los días en columnas, las horas en renglones, y en
   cada celda cuántos lugares quedan.

   El color de la celda sigue diciendo qué tan llena va, igual que lo decía la
   ficha de la hora: es el resorte del reformer, no adorno.

   Se arma con una COLUMNA POR DÍA, cada una con un hueco por cada hora de la
   semana. Todas miden lo mismo, así que los renglones cuadran solos con la
   lista de horas de la izquierda — sin table, sin grid-row a mano, y en
   celular basta con apilarlas para que las horas de cada día queden juntas. */

/* Cuadros chicos y apretados, como la rejilla de la app (Flex, 30 sep
   2026: *"que se vean más pequeños"*). Caben el doble de horas sin
   hacer scroll, que es de lo que vive una rejilla: ver la semana de un
   vistazo. */
.rejilla-sem { --alto: 38px; }
/* La barra de la semana, con su flechita (Josué, 30 sep 2026). La ventana son
   dos semanas pero se hojean de una en una: doce columnas de un jalón no se
   leen ni en una pantalla grande. Mismo gesto que tenía el calendario para
   cambiar de mes. */
.rejilla-sem__barra {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 12px;
}
.rejilla-sem__rotulo {
  font-size: 14px; font-weight: 600; color: var(--tinta);
  min-width: 15ch; text-align: center;
}
.rejilla-sem__flecha {
  width: 34px; height: 34px; border-radius: 999px; flex: 0 0 34px;
  border: 1px solid var(--linea-2); background: var(--blanco);
  color: var(--tinta); font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s var(--curva), background .15s var(--curva);
}
.rejilla-sem__flecha:hover:not(:disabled) { border-color: var(--tinta); background: var(--crema); }
.rejilla-sem__flecha:disabled { opacity: .3; cursor: not-allowed; }

.rejilla-sem__tabla { display: flex; gap: 4px; align-items: stretch; }
.rejilla-sem__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rejilla-sem__col--horas { flex: 0 0 auto; }

.rejilla-sem__dia {
  min-height: 36px; text-align: center; padding: 2px 4px 6px; line-height: 1.15;
  border-bottom: 1px solid var(--linea);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.rejilla-sem__dia b {
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinta);
}
.rejilla-sem__dia small { font-size: 11.5px; color: var(--suave); }
.rejilla-sem__dia--hueco { border-bottom-color: transparent; }
/* Hoy, marcado: en una semana que empieza a media, saber dónde está parada es
   lo primero que busca. */
.rejilla-sem__dia.es-hoy { border-bottom: 2px solid var(--tinta); }
.rejilla-sem__dia.es-hoy small { color: var(--tinta-2); font-weight: 600; }

/* LA BANDA DEL RECESO (Flex, 1 oct 2026). Cruza la rejilla de lado a lado en
   el hueco de la comida. El rótulo se escribe una sola vez —en la columna de
   las horas— y se deja desbordar sobre las columnas de los días: repetirlo en
   cada día sería un muro de "Receso de clases". */
.rejilla-sem__receso {
  min-height: 26px; display: flex; align-items: center;
  border-top: 1px dashed var(--linea-2);
  background: var(--crema);
}
.rejilla-sem__receso span { display: none; }
.rejilla-sem__col--horas .rejilla-sem__receso {
  overflow: visible; white-space: nowrap; background: none; border-top: 0;
}
.rejilla-sem__col--horas .rejilla-sem__receso span {
  display: inline-block; position: relative; z-index: 1;
  padding: 2px 10px; border-radius: 999px;
  background: var(--crema); color: var(--suave);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

.rejilla-sem__hora {
  min-height: var(--alto);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 7px; white-space: nowrap;
  font-size: 11.5px; color: var(--suave); font-variant-numeric: tabular-nums;
}

.celda {
  font-family: var(--fuente); text-align: center; cursor: pointer;
  padding: 4px 3px; min-height: var(--alto); border-radius: 8px;
  border: 1px solid var(--linea); background: var(--blanco);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  transition: border-color .15s var(--curva), background .15s var(--curva),
              transform .15s var(--curva-larga);
}
/* En escritorio la hora NO se repite dentro de la celda: ya está en la
   columna de la izquierda, igual que en la app, y repetirla en cada una de
   las sesenta celdas convierte la rejilla en un muro de números. Se queda en
   el DOM para los lectores de pantalla y para el celular, donde la columna de
   horas no existe. */
.celda b {
  font-size: 13.5px; font-weight: 600; color: var(--tinta); line-height: 1.1;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.celda { position: relative; }
.celda small { font-size: 11.5px; color: var(--suave); line-height: 1.1; }
.celda:hover:not(:disabled) { border-color: var(--tinta); transform: translateY(-1px); }
.celda:disabled { cursor: not-allowed; opacity: .38; }
.celda:disabled:hover { transform: none; }

/* El resorte: cuánto queda, en el borde izquierdo. Desaturado, porque la
   marca de Flex decidió no tener color y esto no se la puede comer. */
.celda.resorte-facil { border-left: 3px solid var(--resorte-facil); }
.celda.resorte-medio { border-left: 3px solid var(--resorte-medio); }
.celda.resorte-duro  { border-left: 3px solid var(--resorte-duro); }

/* La suya: negra y llena, para que se lea de lejos cuál ya escogió — la misma
   regla de "libre y ocupada tienen que distinguirse de lejos". */
.celda--mia { background: var(--tinta); border-color: var(--tinta); opacity: 1; }
.celda--mia b, .celda--mia small { color: var(--blanco); }
.celda--mia small { opacity: .72; }
.celda--mia:hover:not(:disabled) { border-color: var(--tinta); }

.celda--lleno { background: var(--crema); }
/* Una hora que ese día no existe (el sábado cierra antes): hueco, no celda. */
.celda--nohay { border: 0; background: none; pointer-events: none; }

@media (max-width: 860px) {
  /* ⚠ EN CELULAR LA REJILLA NO SE ENCOGE: SE VUELVE UNA LISTA POR DÍA.
     Seis columnas por quince renglones en una pantalla de 390 px salen a 55
     px por celda, y el 70% de las clientas son señoras de más de 60 años. Un
     día a la vez, con sus horas grandes, se lee; una cuadrícula con scroll
     horizontal, no. Como la rejilla se arma por columnas, aquí solo hay que
     apilarlas: las horas de cada día ya vienen juntas. */
  .rejilla-sem__tabla { flex-direction: column; gap: 0; }
  .rejilla-sem__col--horas { display: none; }
  .rejilla-sem__col { gap: 7px; }
  .rejilla-sem__dia {
    /* `justify-content: flex-end` es de la versión en columnas (empuja el
       rótulo al pie de la celda del encabezado). En renglón lo mandaba a la
       derecha, así que aquí se regresa al principio. */
    text-align: left; margin: 18px 0 2px; padding: 4px 2px 7px;
    flex-direction: row; justify-content: flex-start;
    align-items: baseline; gap: 8px; min-height: 0;
  }
  .rejilla-sem__col:first-of-type .rejilla-sem__dia,
  .rejilla-sem__col:nth-of-type(2) .rejilla-sem__dia { margin-top: 0; }
  .rejilla-sem__dia b { font-size: 13px; }
  .celda { min-height: 50px; flex-direction: row; justify-content: flex-start;
           gap: 10px; padding: 8px 14px; text-align: left; }
  .celda b {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    font-size: 15px; min-width: 78px;
  }
  .celda small { font-size: 12.5px; }
  .celda--nohay { display: none; }
  /* Apilado por día, la banda ya no cruza nada: cada día lleva su propio
     rótulo, porque el de la columna de horas no existe aquí. */
  .rejilla-sem__receso { justify-content: center; border-top: 0; border-radius: 8px; margin: 2px 0; }
  /* A ese día no le queda nada después del receso: en la lista apilada el
     rótulo quedaría al final, sin nada debajo. */
  .rejilla-sem__receso--vacio { display: none; }
  .rejilla-sem__receso span {
    display: inline-block; color: var(--suave);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
  }
}

/* Cuándo empiezan y cuándo acaban sus clases (Josué Villegas, 1 oct 2026).
   Va entre el acordeón y la barra negra, en crema, para que se lea como una
   conclusión de lo que acaba de escoger y no como un paso más. */
.ciclo-dice {
  margin: 18px 0 0; padding: 14px 18px;
  background: var(--crema); border-radius: var(--r);
  font-size: 15px; line-height: 1.5; color: var(--tinta-2);
}
.ciclo-dice b { color: var(--tinta); font-weight: 600; }
.ciclo-dice[hidden] { display: none; }

@media (max-width: 640px) {
  .ciclo-dice { font-size: 14.5px; padding: 13px 15px; }
}

/* El estudio, debajo de las tres fechas que dictó Flex (2 oct 2026). Va más
   chico porque la frase que importa son las fechas; el estudio ya lo dice la
   barra negra de abajo. */
.ciclo-dice__suc { color: var(--suave); font-size: 13.5px; }

/* ⚠ EL SELECTOR DE ESTUDIO, EN CELULAR, ES UNA REJILLA DE 3 × 2 (5 oct 2026).
   Era la misma fila de segmentos que en escritorio, y en 390px se partía en
   dos renglones: cada botón medía lo que medía su nombre, así que las rayitas
   de en medio no cuadraban entre la fila de arriba y la de abajo, y el negro
   del estudio escogido se quedaba corto con un hueco blanco a la derecha.
   Josué lo cachó viéndola en su teléfono: "se ve como raro".

   Las líneas se hacen con el truco del hueco: la caja tiene fondo de línea y
   cada casilla fondo blanco, con 1px de separación. Así las rayitas cuadran
   en los dos sentidos sin bordes dobles.

   Aplica al selector de estudio de las DOS pantallas (inscribirse y renovar):
   las dos llevan aria-label="Estudio". */
@media (max-width: 640px) {
  .segmentos[aria-label="Estudio"] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; width: 100%;
    background: var(--linea);
  }
  .segmentos[aria-label="Estudio"] button {
    border: 0; background: var(--blanco);
    padding: 13px 4px; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
  }
  .segmentos[aria-label="Estudio"] button[aria-pressed="true"] {
    background: var(--tinta); color: var(--blanco);
  }
  /* Si algún día quedan 4 o 5 estudios con horarios (los que no tienen no se
     ofrecen), la última fila no deja un hueco gris: la última casilla se
     estira hasta llenarla. */
  .segmentos[aria-label="Estudio"] button:last-child:nth-child(3n+1) { grid-column: span 3; }
  .segmentos[aria-label="Estudio"] button:last-child:nth-child(3n+2) { grid-column: span 2; }
}

/* ⚠ EN CELULAR, CADA DÍA ES UN RENGLÓN DE FICHAS, NO UNA TORRE DE TARJETAS
   (5 oct 2026). Josué, viéndola en su teléfono: "¿esto es lo más adaptado que
   se puede hacer?". No lo era: cada hora era una tarjeta a lo ancho con media
   tarjeta vacía, y con once horas por día la rejilla medía 3,366px — para
   llegar al jueves había que bajar más de 2,000px, cuatro pantallas.

   Ahora las horas de cada día van en fichas de tres por renglón, con la hora
   arriba y los lugares abajo. El día sigue siendo una lista aparte (que es
   lo que se lee bien en un teléfono), pero ocupa una fracción. El resorte de
   color se queda a la izquierda: sigue diciendo qué tan llena va. */
@media (max-width: 860px) {
  .rejilla-sem__col {
    flex-direction: row; flex-wrap: wrap; gap: 7px;
  }
  .rejilla-sem__col .rejilla-sem__dia,
  .rejilla-sem__col .rejilla-sem__receso { flex: 0 0 100%; }
  .rejilla-sem__col .celda {
    flex: 0 0 calc((100% - 14px) / 3); min-width: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 2px; padding: 9px 4px; min-height: 58px; text-align: center;
  }
  .rejilla-sem__col .celda b { font-size: 15px; min-width: 0; }
  .rejilla-sem__col .celda small { font-size: 12px; }
  .rejilla-sem__receso { min-height: 24px; margin: 1px 0; }
}

/* LA BARRA NEGRA, MÁS DELGADA EN CELULAR. Junto con la de arriba se comían la
   mitad de la pantalla mientras la clienta escogía. Se le quita aire, no
   contenido: la dirección y el Ubicar se quedan, en blanco, como pidió Flex. */
@media (max-width: 640px) {
  .resumen { padding: 12px 14px; gap: 9px; }
  .resumen__que { font-size: 10.5px; }
  .resumen__cual { font-size: 16px; margin-top: 2px; }
  .resumen__donde { font-size: 14px; margin-top: 4px; gap: 3px 10px; }
  .resumen__accion .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   El aviso al volver de Mercado Pago (9 oct 2026). La página regresa como
   nueva; esto es lo único que queda del pago, y se va solo.
   --------------------------------------------------------------------------- */
.aviso-pago {
  position: fixed; left: 50%; top: 84px; transform: translateX(-50%);
  z-index: 60; width: min(560px, calc(100% - 32px));
  background: #0a0a0a; color: #fff; border-radius: 16px;
  padding: 14px 18px; font-size: 15px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.aviso-pago b { font-weight: 700; }
.aviso-pago--fuera { opacity: 0; transform: translate(-50%, -8px); }
@media (prefers-reduced-motion: reduce) { .aviso-pago { transition: none; } }