/* ============================================================
   TEMARIUS REX — Web pública (academia y tests)
   Hero, secciones de venta, modalidades, FAQ, acceso y contacto.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative; overflow: hidden;
    padding-block: clamp(56px, 8vw, 104px);
    background: var(--surface-page);
}
/* El hero es una retícula: texto a la izquierda y el mockup a la derecha.
   Antes el mockup quedaba suelto a sangre debajo. */
.hero-academia,
.hero:has(.hero-visual) {
    display: grid; align-items: center;
    position: relative;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px);
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}
@media (max-width: 940px) {
    .hero-academia, .hero:has(.hero-visual) { grid-template-columns: 1fr; }
    .hero-visual { max-width: 460px; }
}
.hero-content {
    position: relative; z-index: 2;
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}
/* Dentro de la retícula el contenido ya no necesita su propio ancho */
.hero-academia > .hero-content,
.hero:has(.hero-visual) > .hero-content { max-width: none; padding-inline: 0; margin-inline: 0; }
.hero-visual { position: relative; min-width: 0; }
.hero-badge-container { margin-bottom: var(--s-5); }
.hero-logo-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px; border-radius: var(--r-full);
    background: var(--surface-card); border: 1px solid var(--line);
    box-shadow: var(--sh-xs);
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--accent-strong);
}
.hero-logo-badge img { height: 20px; width: auto; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: var(--r-full);
    background: var(--surface-card); border: 1px solid var(--line);
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
    letter-spacing: .04em; color: var(--ink-body);
    box-shadow: var(--sh-xs);
}
.hero-badge i { color: var(--accent-strong); }

/* Dentro de la cabecera de pagina no es una pastilla: una pastilla
   clara sobre fondo claro no se distingue de nada. Es el eyebrow. */
.page-hero .hero-badge {
    padding: 0; margin-bottom: var(--s-4);
    background: none; border: 0; box-shadow: none;
    font-size: var(--fs-micro); text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow); color: var(--accent-strong);
}

/* El titular de marca: sans ligera arriba, Merriweather itálica abajo */
.hero-title {
    margin: 0 0 var(--s-5);
    font-size: clamp(34px, 4.6vw, var(--fs-hero));
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    color: var(--ink);
}
.hero-title-line1 { display: block; }
.hero-title-line2 {
    display: block;
    font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-reg);
    color: var(--ink-muted);
}
.hero-subtitle {
    max-width: 62ch; margin: 0 0 var(--s-6);
    font-size: clamp(17px, 2vw, var(--fs-lead));
    font-weight: var(--fw-light); line-height: var(--lh-relaxed);
    color: var(--ink-muted);
}
.hero-subtitle strong { color: var(--ink); font-weight: var(--fw-med); }
.hero-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-buttons .btn { height: 52px; padding: 0 var(--s-6); font-size: var(--fs-body); }

.hero-trust {
    display: flex; gap: var(--s-7); flex-wrap: wrap;
    margin-top: var(--s-8); padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}
.hero-trust { gap: var(--s-5) var(--s-6); }
.hero-trust-item { display: inline-flex; align-items: center; gap: 9px; }
.hero-trust-item > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-full);
    background: var(--accent-wash); color: var(--accent-strong); font-size: 11px;
}
.hero-trust-item span, .hero-trust-item strong {
    font-size: var(--fs-caption); font-weight: var(--fw-med);
    color: var(--ink-body); letter-spacing: 0;
}
.hero-visual { position: relative; }
.hero-scroll-indicator, .scroll-arrow { display: none; }

/* Cabecera de las paginas publicas.
   Sin fondo propio: antes era blanca sobre el gris de la pagina y se
   veia como un rectangulo pegado arriba. Lo que separa es el filete,
   no un cambio de color. */
.page-hero {
    padding-block: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 44px);
    background: none;
    border-bottom: 1px solid var(--line);
}
.page-hero-inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.page-hero h1 {
    margin: 0 0 var(--s-4);
    font-size: clamp(32px, 5vw, 54px); font-weight: var(--fw-light);
    letter-spacing: var(--ls-display); line-height: 1.05;
    color: var(--ink);
    max-width: 20ch;
}
.page-hero p {
    max-width: 62ch; margin: 0;
    font-size: var(--fs-lead); font-weight: var(--fw-light);
    line-height: var(--lh-relaxed); color: var(--ink-muted);
}
/* El adorno de fondo vivia sobre la banda blanca; sin ella solo
   ensucia el titular. */
.page-hero .hero-bg-pattern { display: none; }

/* ============================================================
   PRUEBA SOCIAL Y CIFRAS
   ============================================================ */
.social-proof { padding-block: var(--s-7); background: var(--surface-card); border-block: 1px solid var(--line); }
.social-proof-inner {
    display: grid; gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
    text-align: center;
}
.proof-item { border: 0; background: transparent; padding: 0; align-items: center; }
.proof-number { font-size: 38px; }

/* .cifras es la <section>; la rejilla es .cifras-row */
.cifras { padding-block: var(--s-7); background: var(--surface-card); border-block: 1px solid var(--line); }
.cifras-row {
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
    margin-bottom: 0;
}
.cifra { border: 0; background: transparent; padding: 0; text-align: center; align-items: center; }

/* ============================================================
   TARJETAS DE CONTENIDO
   ============================================================ */
.features-grid, .rules-grid, .temas-grid, .bloques-grid, .plans-grid, .modalidades, .contacto-layout {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* .features NO es una rejilla: es la seccion que envuelve al titular y a
   .features-grid. Tratarla como grid ponia el <h2> en una columna y las
   tarjetas en la de al lado. */
.features { display: block; }
/* .feature-step NO es una tarjeta: es el numerito del paso, y con el
   padding de tarjeta se salía del icono que lo contiene. */
.feature-card, .rule-card, .canal, .testimonio, .paso, .promo-panel {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    transition: var(--transition);
}
.feature-card:hover, .rule-card:hover, .canal:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }

/* El número del paso: una chapita en la esquina del icono. */
.feature-icon { position: relative; }
.feature-step {
    position: absolute; top: -7px; right: -7px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--surface-inverse); color: var(--ink-invert);
    border-radius: var(--r-full);
    font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
}
.feature-card h3, .rule-card h3, .canal h3, .paso h3 {
    margin: 0 0 var(--s-2); font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight);
}
.feature-card p, .rule-card p, .rule-text, .canal p, .paso p {
    margin: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-muted);
}

/* ---- Pasos numerados del método ---- */
.pasos { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: paso; }
.paso { position: relative; }
.paso-num {
    width: 34px; height: 34px; margin-bottom: var(--s-4);
    background: transparent; color: var(--accent-strong);
    border: 1px solid var(--accent); border-radius: var(--r-full);
    font-size: var(--fs-caption);
}

/* ---- Testimonios ---- */
.testimonios { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.testimonio p { font-size: var(--fs-lg); font-weight: var(--fw-light); line-height: var(--lh-relaxed); color: var(--ink); font-style: italic; }
.testimonio-stars { color: var(--gold-500); font-size: var(--fs-caption); margin-bottom: var(--s-4); }
.testimonio-autor { margin-top: var(--s-4); font-size: var(--fs-caption); font-weight: var(--fw-semi); color: var(--ink-muted); }

/* ============================================================
   MODALIDADES / PLANES
   ============================================================ */
.plans-section, .plans-container { max-width: var(--wrap); margin-inline: auto; }
.plans-footer-text { text-align: center; margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--ink-muted); }

.mod-card, .plan-card, .plan-option {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: var(--transition);
}
.mod-card:hover, .plan-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-lg); }
/* El resalte va en la TARJETA. .plan-popular es la cinta de dentro:
   si entra en esta lista se lleva el borde y el anillo y se dibuja
   como un rectángulo cortado contra la esquina. */
.mod-card.featured, .plan-card.featured, .plan-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}
/* La cinta: una pastilla centrada montada sobre el borde de arriba. */
.plan-popular {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; white-space: nowrap;
    padding: 5px 14px;
    background: var(--accent); color: var(--navy-900);
    border-radius: var(--r-full);
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    box-shadow: var(--sh-sm);
}
/* Y la tarjeta deja de recortar por arriba para que la cinta asome. */
.plan-card { overflow: visible; }
.mod-ribbon {
    position: absolute; top: var(--s-4); right: var(--s-4);
    padding: 3px 11px; border-radius: var(--r-full);
    background: var(--gold-500); color: var(--navy-900);
    font-size: var(--fs-micro); font-weight: var(--fw-bold);
    letter-spacing: .08em; text-transform: uppercase;
}
/* La cabecera de la seccion de planes va centrada y en flujo: el badge
   es su eyebrow, no una etiqueta pegada a una esquina. */
.plans-header { display: block; text-align: center; margin-bottom: var(--s-6); }
.plans-header h2 { margin: 0 0 var(--s-3); }
.plans-header p  { max-width: 62ch; margin-inline: auto; color: var(--ink-muted); }
.plans-badge {
    display: inline-block; margin-bottom: var(--s-3);
    font-size: var(--fs-micro); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--accent-strong);
}
.mod-head, .plan-header-card {
    padding: var(--s-6);
    background: var(--surface-inverse); color: var(--ink-invert-muted);
}
.mod-head h3, .plan-header-card h3 { color: var(--ink-invert); margin-bottom: var(--s-2); }
.mod-head-ico { background: rgba(255,255,255,.1); color: var(--gold-400); }
.mod-seg { font-size: var(--fs-caption); color: var(--gold-400); letter-spacing: .05em; text-transform: uppercase; font-weight: var(--fw-semi); }
.mod-body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; gap: var(--s-4); }
.mod-desc, .plan-desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-muted); margin: 0; }
.mod-para { font-size: var(--fs-caption); color: var(--ink-body); background: var(--surface-subtle); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); }
.mod-precio, .plan-price, .plan-option-price {
    font-size: var(--fs-h3); font-weight: var(--fw-light);
    letter-spacing: var(--ls-display); color: var(--ink);
}
/* El precio va dentro de .mod-head, que es oscura */
.mod-head .mod-precio { color: var(--ink-invert); margin-top: var(--s-3); }
.mod-head .mod-precio span, .mod-head .mod-precio small { display: block; font-size: var(--fs-caption); color: var(--ink-invert-muted); letter-spacing: 0; }
.mod-head-ico { margin-bottom: var(--s-4); }
/* .mod-acciones cuelga de .mod-body, que ya tiene padding */
.mod-acciones { display: flex; flex-direction: column; gap: var(--s-2); padding: 0; margin-top: auto; }
.mod-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.mod-lista li { display: flex; align-items: flex-start; gap: var(--s-3); margin: 0; font-size: var(--fs-sm); color: var(--ink-body); }
.mod-lista li:not(:has(i, svg))::before {
    content: "00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--ok-600); font-size: 11px; margin-top: 4px; flex-shrink: 0;
}
.mod-para { display: flex; align-items: flex-start; gap: var(--s-3); }
.plan-card > *:not(.plan-header-card):not(.plan-popular) {
    margin-inline: var(--s-5);
}
.plan-card > *:not(.plan-header-card):not(.plan-popular):first-of-type { margin-top: var(--s-5); }
.plan-card > *:last-child { margin-bottom: var(--s-5); }
.plan-card .plan-detail { margin-top: var(--s-5); }
/* El boton del final, abajo del todo aunque una tarjeta sea mas corta */
.plan-card > .btn { margin-top: auto; }
/* .btn-block es width:100%, pero aquí ya lleva 24px de margen a cada
   lado por la regla de arriba: 100% + 48px se salía de la tarjeta y,
   como ésta recorta, el botón aparecía cortado por la derecha. */
.plan-card > .btn-block, .mod-card > .btn-block { width: auto; }

/* Cada tramo de precio, una cajita con su aire */
.plan-option { padding: var(--s-3) var(--s-4); gap: 2px; }
.plan-options { margin-block: var(--s-4); }
.plan-option-price { font-size: var(--fs-lg); }

.plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.plan-features li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-body); margin: 0; }
.plan-features li:not(:has(i, svg))::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--ok-600); font-size: 11px; margin-top: 4px; flex-shrink: 0;
}
.plan-label, .plan-option-name { font-size: var(--fs-caption); font-weight: var(--fw-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.plan-detail, .plan-demo { font-size: var(--fs-caption); color: var(--ink-muted); }

/* Promo compacta en el lateral */
.promo-panel { padding: var(--s-5); }
.promo-mini-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
    margin-bottom: var(--s-4);
}
.promo-mini-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }
.promo-mini-price {
    font-size: var(--fs-h4); font-weight: var(--fw-light); color: var(--ink);
    white-space: nowrap;            /* el precio nunca se parte */
}
.promo-mini-desc { font-size: var(--fs-caption); color: var(--ink-muted); }
.promo-mini-plan { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.promo-mini-plan:last-child { border-bottom: 0; }

/* Tabla comparativa */
.tabla-comparativa th:first-child, .tabla-comparativa td:first-child { text-align: left; }
.tabla-comparativa td, .tabla-comparativa th { text-align: center; }
.tabla-comparativa .fa-check { color: var(--ok-600); }
.tabla-comparativa .fa-minus { color: var(--line-strong); }

/* ============================================================
   PROGRAMA / TEMARIO PÚBLICO
   ============================================================ */
.programa { display: flex; flex-direction: column; gap: var(--s-3); }
.tema-item, .tema-card {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-sm); color: var(--ink-body);
    border-bottom: 1px solid var(--line);
}
.tema-item:last-child { border-bottom: 0; }
.tema-num { flex-shrink: 0; font-weight: var(--fw-semi); color: var(--accent-strong); font-size: var(--fs-caption); min-width: 30px; }
.tema-nombre { flex: 1; }

/* ============================================================
   ACCESO (login, registro, recuperar)
   ============================================================ */
.auth-section {
    display: flex; align-items: center; justify-content: center;
    min-height: 70vh; padding: var(--s-8) var(--gutter);
}
.auth-card {
    width: 100%; max-width: 460px;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: var(--s-7);
}
.auth-header { text-align: center; margin-bottom: var(--s-6); }
.auth-header h1, .auth-header h2 { font-size: var(--fs-h3); font-weight: var(--fw-light); margin-bottom: var(--s-2); }
.auth-header p { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-form .btn { height: 48px; }
.auth-footer {
    margin-top: var(--s-5); padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    text-align: center; font-size: var(--fs-sm); color: var(--ink-muted);
}
@media (max-width: 520px) { .auth-card { padding: var(--s-6) var(--s-5); } }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
@media (max-width: 900px) { .contacto-layout { grid-template-columns: 1fr; } }
.contacto-form {
    background: var(--surface-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s-7);
}
@media (max-width: 560px) { .contacto-form { padding: var(--s-5); } }
.canal { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); }
.canal-ico { margin: 0; }
.canal h3 { font-size: var(--fs-sm); margin-bottom: 2px; }
.wa { color: #25D366; }

/* ============================================================
   PÁGINA DE ERROR
   ============================================================ */
.error-page { text-align: center; padding: var(--s-10) var(--gutter); }
.error-code {
    font-size: clamp(72px, 16vw, 160px); font-weight: var(--fw-light);
    letter-spacing: var(--ls-display); line-height: 1;
    color: var(--line-strong); margin-bottom: var(--s-4);
}
.error-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); }

/* ============================================================
   CTA INTERMEDIO DE SECCIÓN
   ============================================================ */
/* Casi siempre lleva sólo un botón: es una fila centrada, no un panel */
.sec-cta {
    display: flex; align-items: center; justify-content: center;
    gap: var(--s-4); flex-wrap: wrap;
    margin-top: var(--s-7);
}
/* Cuando además trae texto, sí se convierte en panel oscuro */
.sec-cta:has(h3) {
    justify-content: space-between; text-align: left;
    padding: var(--s-6) var(--s-7);
    background: var(--surface-inverse); color: var(--ink-invert-muted);
    border-radius: var(--r-lg);
}
.sec-cta h3 { color: var(--ink-invert); margin-bottom: 4px; }
.sec-cta p { margin: 0; font-size: var(--fs-sm); }

/* ============================================================
   AVISO DE NO ALUMNO / MODO
   ============================================================ */
.no-alumno, .mode-toggle {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
    background: var(--surface-subtle); border: 1px solid var(--line);
    border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-body);
}

/* Cuando la lista ya trae icono propio, se tiñe en vez de duplicarlo */
.plan-features li > i, .mod-lista li > i {
    color: var(--ok-600); font-size: 13px; margin-top: 4px; flex-shrink: 0;
}


/* ---- Desglose de tramos por horas, dentro de la cabecera oscura ----
   La modalidad individual no tiene un precio, tiene tres. El "desde"
   grande de arriba se queda corto y hay que enseñar el detalle. */
.mod-tramos {
    list-style: none; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0;
    border-top: 1px solid var(--line-invert);
    display: flex; flex-direction: column; gap: 6px;
}
.mod-tramos li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); margin: 0;
    font-size: var(--fs-caption); line-height: 1.4;
}
.mod-tramo-nombre { color: var(--ink-invert-muted); }
.mod-tramo-precio { color: var(--ink-invert); font-weight: var(--fw-med); white-space: nowrap; }

@media (max-width: 380px) {
    .mod-tramos li { flex-direction: column; gap: 1px; }
}

/* Notas bajo un dato de la tabla comparativa */
.td-nota {
    display: block; margin-top: 3px;
    font-size: var(--fs-caption); font-weight: var(--fw-reg);
    line-height: 1.4; color: var(--ink-muted);
}


/* ---- Rexy presentando algo, en las páginas públicas ---- */
.rexy-tira {
    display: flex; align-items: flex-end; gap: var(--s-6);
    max-width: var(--wrap); margin: var(--s-7) auto;
    padding-inline: var(--gutter);
    flex-wrap: wrap;
}
/* El texto, centrado respecto a la mascota y no pegado al suelo */
/* El :not() no es adorno: el plinto también es un div hijo directo y
   con flex:1 se estiraba al doble de lo que mide la mascota, con la
   sombra del suelo detrás. */
.rexy-tira > div:not(.rexy-plinto) { align-self: center; flex: 1; min-width: 240px; }
.rexy-tira p {
    margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-light);
    line-height: var(--lh-relaxed); color: var(--ink-body); max-width: 52ch;
}

/* EL PLINTO.
   Una mascota recortada sobre un fondo claro flota como una pegatina:
   es exactamente lo que pasaba: un dinosaurio pequeño en mitad de una
   caja blanca enorme y medio vacía. Lo que la ancla es una sombra de
   contacto bajo las patas, que dice "esto se apoya en algo".
   La elipse va en un ::before para que el dinosaurio se pinte encima
   sin tener que jugar con z-index negativos. */
.rexy-plinto {
    position: relative; flex-shrink: 0; line-height: 0;
    align-self: flex-end;
}
/* Los márgenes salen de rexyPlinto(): son la huella real de cada pose,
   medida sobre el dibujo. El 6% fijo de antes valía para las poses
   anchas y en las estrechas dibujaba una mancha del doble del bicho. */
.rexy-plinto::before {
    content: ""; position: absolute;
    left: var(--pie-izq, 10%); right: var(--pie-der, 10%);
    bottom: 2px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(15, 26, 46, .26), rgba(15, 26, 46, 0));
}
/* Sombra propia muy corta: la luz cae de arriba y el bicho tiene volumen.
   La de antes (0 10px 20px) le hacía un halo gris alrededor. */
.rexy-plinto .rexy { position: relative; filter: drop-shadow(0 4px 6px rgba(15, 26, 46, .10)); }
.rexy-tira-eyebrow {
    font-size: var(--fs-micro) !important; font-weight: var(--fw-semi) !important;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--accent-strong) !important; margin-bottom: var(--s-3) !important;
}
/* La nota de Rexy dentro de una caja.
   Iba al ancho completo de la página, con el texto en cuerpo pequeño
   ocupando media caja: quedaba medio metro de blanco a la derecha y la
   mascota perdida en la esquina. Ahora la caja mide lo que mide el
   contenido y el texto tiene el tamaño que le corresponde. */
.rexy-tira-suave {
    max-width: 940px;
    margin-inline: auto;
    margin-block: var(--s-6);
    padding: var(--s-5) var(--s-6) 0;
    background: linear-gradient(180deg,
                rgba(212, 160, 23, .055), rgba(212, 160, 23, .015));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    align-items: flex-end;
    gap: var(--s-5);
    overflow: hidden;
}
/* Rexy pisa el borde de abajo: forma parte de la tarjeta en vez de
   estar posado dentro de ella. */
.rexy-tira-suave .rexy-plinto { margin-bottom: -2px; }
.rexy-tira-suave > div:not(.rexy-plinto) { padding-bottom: var(--s-5); }
.rexy-tira-suave p { font-size: var(--fs-base); max-width: 46ch; }

/* Rexy en el hero: vive en la columna del mockup, no en la del texto.
   Estaba dentro de .hero-content, que es relative, así que el absolute
   lo plantaba encima de los botones. Aquí asoma por detrás de la
   tarjeta de la semana, que es lo que hace una mascota: acompañar. */
.rexy-hero {
    position: absolute; left: -70px; bottom: -28px;
    pointer-events: none; z-index: 0;
    filter: drop-shadow(0 12px 24px rgba(15, 26, 46, .16));
}
.hero-visual > .semana-card { position: relative; z-index: 1; }

@media (max-width: 1180px) {
    .rexy-hero { left: -40px; }
}
@media (max-width: 940px) {
    /* En una columna la tarjeta se centra y Rexy ya no cabe al lado:
       pasa a estar debajo, en el flujo, y a tamaño cómodo. */
    .rexy-hero {
        position: static; display: block;
        margin: var(--s-5) auto 0;
    }
    .rexy-hero img { height: 240px; width: auto; margin-inline: auto; }
}
@media (max-width: 560px) {
    .rexy-hero img { height: 190px; }
}

@media (max-width: 640px) {
    .rexy-tira { flex-direction: column; text-align: center; align-items: center; }
    .rexy-tira p { margin-inline: auto; }
    .rexy-tira-suave { flex-direction: column-reverse; padding-top: 0; }
    .rexy-tira-suave > div { padding-top: var(--s-5); padding-bottom: 0; }
}


/* ============================================================
   HERO DE LA ACADEMIA · la entrada
   ------------------------------------------------------------
   Todo con CSS y sin JavaScript: son animaciones de una sola vez al
   cargar, y meter JS para eso sólo añade una cosa más que puede fallar.
   Cada pieza entra un poco después que la anterior, de arriba abajo,
   que es como se lee. Rexy entra el último: primero se entiende qué es
   esto, después aparece quien te lo cuenta.
   ============================================================ */

@keyframes rexEntra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes rexEntraLado {
    from { opacity: 0; transform: translateX(-26px) translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
/* Respirar: dos píxeles arriba y abajo. Si se nota, es demasiado. */
@keyframes rexFlota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@keyframes rexGlobo {
    from { opacity: 0; transform: translateY(6px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

.hero-animado .hero-badge-container,
.hero-animado .hero-title,
.hero-animado .hero-subtitle,
.hero-animado .hero-buttons,
.hero-animado .hero-trust {
    animation: rexEntra .62s var(--ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
.hero-animado .hero-badge-container { animation-delay: .05s; }
.hero-animado .hero-title           { animation-delay: .14s; }
.hero-animado .hero-subtitle        { animation-delay: .26s; }
.hero-animado .hero-buttons         { animation-delay: .38s; }
.hero-animado .hero-trust           { animation-delay: .50s; }

/* La tarjeta de la semana entra desde su lado */
.hero-animado .hero-visual > .semana-card {
    animation: rexEntra .7s var(--ease-out, cubic-bezier(.22,.61,.36,1)) .44s both;
}

/* ---- Rexy ----
   Dos animaciones encadenadas sobre el mismo elemento no se pueden
   poner sin más: la segunda pisaría a la primera. Por eso el grupo
   hace la entrada y la imagen de dentro flota, cada una con su capa. */
.rexy-hero-grupo {
    position: absolute; left: -70px; bottom: -28px;
    z-index: 0; pointer-events: none;
    animation: rexEntraLado .8s var(--ease-out, cubic-bezier(.22,.61,.36,1)) .62s both;
}
.rexy-hero-grupo .rexy-hero { position: static; }
.rexy-hero-grupo .rexy-hero img {
    animation: rexFlota 5.5s ease-in-out 1.5s infinite;
}

/* El bocadillo aparece cuando Rexy ya está en su sitio */
.rexy-globo {
    position: absolute; top: 4px; left: 50%;
    transform-origin: bottom left;
    margin: 0; padding: 9px 15px;
    background: var(--gold-500); color: var(--navy-900);
    border-radius: var(--r-full) var(--r-full) var(--r-full) 4px;
    font-size: var(--fs-caption); font-weight: var(--fw-semi);
    white-space: nowrap;
    box-shadow: var(--sh-md);
    animation: rexGlobo .5s var(--ease-out, cubic-bezier(.22,.61,.36,1)) 1.5s both;
}

/* En la portada el titular pide presencia, pero 72px en una columna
   estrecha lo partía en seis líneas y perdía toda la fuerza. Con este
   tamaño y este ancho cae en tres o cuatro, que es donde un titular
   se lee de un golpe. */
.hero-animado .hero-title { font-size: clamp(34px, 4.4vw, 58px); max-width: 15ch; }
.hero-animado .hero-subtitle { max-width: 46ch; }

/* Un poco de profundidad detrás del conjunto visual. Muy suave: el
   resto del sitio es sobrio y un resplandor fuerte desentonaría. */
.hero-academia .hero-visual::before {
    content: ""; position: absolute; inset: 2% -6% -4% -6%;
    z-index: -1; pointer-events: none;
    background: radial-gradient(50% 58% at 50% 54%, rgba(212,160,23,.20), transparent 70%);
}

@media (max-width: 1180px) { .rexy-hero-grupo { left: -40px; } }

@media (max-width: 940px) {
    /* En una columna Rexy baja al flujo y el bocadillo se va: ahí abajo
       no señala a nada y sólo estorba. */
    .rexy-hero-grupo { position: static; margin: var(--s-5) auto 0; width: max-content; }
    .rexy-globo { display: none; }
}

/* Quien pide menos movimiento lo ve quieto, no lo ve peor */
@media (prefers-reduced-motion: reduce) {
    .hero-animado .hero-badge-container,
    .hero-animado .hero-title,
    .hero-animado .hero-subtitle,
    .hero-animado .hero-buttons,
    .hero-animado .hero-trust,
    .hero-animado .hero-visual > .semana-card,
    .rexy-hero-grupo,
    .rexy-hero-grupo .rexy-hero img,
    .rexy-globo {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ---- Rexy estudiando: tres poses que se cruzan ----
   Lee, apunta y cae en la cuenta. Doce segundos de ciclo: cuatro por
   pose, con el cruce dentro. Lento a propósito — una animación rápida
   en un hero cansa a la segunda vez que entras en la web. */
@keyframes rexPose {
    0%, 28%  { opacity: 1; }
    34%, 94% { opacity: 0; }
    100%     { opacity: 1; }
}
.rexy-secuencia {
    position: relative;
    width: var(--rexy-ancho); height: var(--rexy-alto);
    max-width: 100%;
    filter: drop-shadow(0 12px 24px rgba(15, 26, 46, .16));
}
/* Centrada en su columna, y que se encoja si la ventana la estrecha.
   OJO con `aspect-ratio`: las variables --rexy-ancho/--rexy-alto vienen
   en píxeles y esa propiedad NO acepta unidades. Al escribir
   `aspect-ratio: 365px / 430px` el navegador descarta la regla entera,
   y como todas las poses van en absolute, el contenedor se quedaba con
   0 de alto y no se veía nada. El alto se deja explícito; el ancho, con
   `object-fit: contain` en cada pose, se apaña solo. */
.rexy-hero-seq {
    margin-inline: auto;
    max-width: 100%;
}
.rexy-pose {
    position: absolute; inset: 0;
    display: block; line-height: 0;
    animation: rexPose 12s linear infinite;
}
.rexy-pose img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: bottom center;
    display: block;
}
/* Los desfases negativos reparten las tres por el ciclo sin que haya
   un parpadeo al empezar: en el instante cero ya hay una visible. */
.rexy-pose-1 { animation-delay: 0s; }
.rexy-pose-2 { animation-delay: -8s; }
.rexy-pose-3 { animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
    /* Sin movimiento se queda la primera, que es la que cuenta la
       historia: estudiando. Las otras dos se ocultan. */
    .rexy-pose { animation: none; opacity: 0; }
    .rexy-pose-1 { opacity: 1; }
}


/* ============================================================
   PORTADA CON VÍDEO
   ------------------------------------------------------------
   El vídeo es la pieza principal de la columna visual. La tarjeta de
   la semana se queda, pero pequeña y montada sobre una esquina: la
   mascota da la cara y la tarjeta enseña el producto, sin que ninguna
   de las dos le quite el sitio a la otra.
   ============================================================ */
.rexy-video {
    position: relative;
    line-height: 0;
    /* Sin caja ni sombra. El vídeo nuevo se grabó en una habitación de
       paredes casi blancas: su fondo mide 248 y el de la página 244, de
       modo que ya no hay parche gris que disimular. La máscara se queda
       de todas formas para que no quede el filo recto del rectángulo:
       lo que delata a un vídeo metido en una web es el borde, no el
       color. Elipse ajustada a un encuadre apaisado. */
    -webkit-mask-image: radial-gradient(74% 82% at 50% 47%, #000 58%, transparent 92%);
            mask-image: radial-gradient(74% 82% at 50% 47%, #000 58%, transparent 92%);
}
.rexy-video-el, .rexy-video img {
    display: block; width: 100%; height: auto;
    /* La proporción del archivo, sin recortar: cualquier `cover` vuelve
       a cortarle el pupitre por abajo. */
    aspect-ratio: 4 / 3; object-fit: contain;
}

/* La tarjeta de la semana, ahora superpuesta y más pequeña */
.semana-flotante {
    position: absolute; left: -28px; bottom: -22px;
    width: min(268px, 82%);
    z-index: 2;
    transform: scale(.92); transform-origin: bottom left;
    box-shadow: var(--sh-lg);
}
.hero-academia .hero-visual { position: relative; }

/* La entrada de la columna visual. Vale para la secuencia de poses,
   que es lo que hay ahora, y para el vídeo si se vuelve a él. */
.hero-animado .rexy-secuencia,
.hero-animado .rexy-video {
    animation: rexEntra .75s var(--ease-out) .44s both;
}
/* Ojo al orden: .rexy-pose lleva su propio `animation` para el cruce.
   La entrada va en el contenedor y el cruce en cada pose, cada una en
   su elemento: dos animaciones sobre el mismo nodo se pisarían. */
/* (la tarjeta flotante salió del hero; su animación ya no hace falta) */

@media (max-width: 940px) {
    .semana-flotante {
        position: static; width: auto; transform: none;
        margin-top: var(--s-4);
    }
    /* En una columna el vídeo ya manda solo; se queda con su
       proporción y ocupa el ancho disponible. */
    .rexy-video { margin-inline: auto; max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-animado .rexy-secuencia,
    .hero-animado .rexy-video { animation: none; opacity: 1; transform: none; }
}


/* ============================================================
   BURBUJAS DE LA PORTADA
   ------------------------------------------------------------
   Cinco pastillas flotando alrededor de Rexy con lo que trae la
   academia. La columna visual son ~510 px y la mascota ocupa 365 en
   el centro: queda sitio a los lados, y ese hueco vacío era justo lo
   que hacía que el hero pareciera a medio terminar.

   Van todas DENTRO del 0-100% de la columna a propósito. Sacarlas con
   left/right negativos queda más suelto, pero en pantallas justas
   empujan la página a lo ancho, y una barra de scroll horizontal en la
   portada es peor que una burbuja algo metida.
   ============================================================ */
.hero-burbujas {
    list-style: none; margin: 0; padding: 0;
    position: absolute; inset: 0;
    pointer-events: none;      /* que no tapen nada que se pueda pulsar */
    z-index: 2;
}
.hero-burbuja {
    position: absolute;
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 190px;
    padding: 8px 14px 8px 10px;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    box-shadow: 0 8px 22px rgba(15, 26, 46, .10);
    font-size: var(--fs-caption); font-weight: var(--fw-med);
    line-height: 1.25; color: var(--ink-body);
    /* Sin esto, "5 bloques, 62 temas" parte en dos líneas y la pastilla
       deja de leerse de un vistazo, que es todo lo que tiene que hacer. */
    white-space: nowrap;
}
.hero-burbuja i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    background: var(--accent-wash); color: var(--accent-strong);
    border-radius: var(--r-full);
    font-size: 12px;
}

/* Colocadas donde la silueta de Rexy es estrecha: arriba a los lados
   de la cabeza, y abajo por fuera del pupitre. */
.hb-1 { top: 1%;     left: 0; }
.hb-2 { top: 20%;    right: 0; }
/* Al 45% caía justo encima del brazo y del libro abierto, que es la
   zona con más detalle del dibujo. Aquí queda a la altura del pecho,
   sobre la camiseta, donde no tapa nada que se mire. */
.hb-3 { top: 33%;    left: 0; }
.hb-4 { bottom: 16%; right: 0; }
.hb-5 { bottom: 0;   left: 6%; }

/* Flotan muy poco: si se nota el movimiento, molesta a la segunda
   visita. Cada una con su desfase para que no vayan a la vez. */
@keyframes hbFlota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.hero-burbuja { animation: hbFlota 6s ease-in-out infinite; }
.hb-2 { animation-delay: -1.2s; }
.hb-3 { animation-delay: -2.4s; }
.hb-4 { animation-delay: -3.6s; }
.hb-5 { animation-delay: -4.8s; }

/* Entran detrás de la mascota, escalonadas */
.hero-animado .hero-burbuja {
    animation: rexEntra .6s var(--ease-out) both, hbFlota 6s ease-in-out infinite;
}
.hero-animado .hb-1 { animation-delay: .70s, .70s; }
.hero-animado .hb-2 { animation-delay: .80s, .80s; }
.hero-animado .hb-3 { animation-delay: .90s, .90s; }
.hero-animado .hb-4 { animation-delay: 1.0s, 1.0s; }
.hero-animado .hb-5 { animation-delay: 1.1s, 1.1s; }

/* En una columna no hay laterales donde ponerlas: dejan de flotar y
   pasan a ser una fila de etiquetas bajo la mascota. La información es
   la misma; lo que cambia es que ahí abajo sí cabe. */
@media (max-width: 940px) {
    .hero-burbujas {
        position: static; inset: auto;
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: var(--s-2); margin-top: var(--s-5);
    }
    .hero-burbuja { position: static; animation: none; }
    .hero-animado .hero-burbuja { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 560px) {
    .hero-burbuja { font-size: var(--fs-micro); padding: 6px 11px 6px 8px; }
    .hero-burbuja i { width: 22px; height: 22px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-burbuja, .hero-animado .hero-burbuja {
        animation: none; opacity: 1; transform: none;
    }
}


/* ============================================================
   REUNIÓN PREVIA GRATUITA
   ============================================================ */
.reunion-grid {
    display: grid; gap: var(--s-6);
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
}
@media (max-width: 900px) { .reunion-grid { grid-template-columns: 1fr; } }

.reunion-quien {
    display: flex; align-items: center; gap: var(--s-4);
    padding-bottom: var(--s-5); margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}
.reunion-quien strong { display: block; font-size: var(--fs-lg); }
.reunion-quien span { font-size: var(--fs-caption); color: var(--ink-muted); }

.reunion-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.reunion-puntos li { display: flex; gap: var(--s-4); align-items: flex-start; }
.reunion-puntos i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    background: var(--accent-wash); color: var(--accent-strong);
    border-radius: var(--r-full); font-size: var(--fs-caption);
}
.reunion-puntos strong { display: block; font-size: var(--fs-sm); }
.reunion-puntos span { font-size: var(--fs-caption); color: var(--ink-muted); line-height: var(--lh-relaxed); }

/* Rexy saluda desde el lateral. Se va en pantallas justas: ahí el sitio
   lo necesita el formulario, que es lo que hay que rellenar. */
.reunion-rexy { margin-top: var(--s-6); }
@media (max-width: 900px) { .reunion-rexy { display: none; } }

/* Las franjas horarias: casillas grandes, que se pulsan con el pulgar */
.reunion-franjas { display: grid; gap: var(--s-2); }
.reunion-franja {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 10px var(--s-4);
    border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; font-size: var(--fs-sm);
    transition: var(--transition);
}
.reunion-franja:hover { border-color: var(--line-strong); background: var(--surface-subtle); }
/* :has() para teñir la etiqueta entera cuando su casilla está marcada.
   Si el navegador no lo entiende, la casilla se ve marcada igual: se
   pierde el color de fondo, no la información. */
.reunion-franja:has(input:checked) {
    border-color: var(--accent); background: var(--accent-wash);
}
.reunion-franja input { margin: 0; flex-shrink: 0; }

.reunion-gracias { text-align: center; max-width: 620px; margin-inline: auto; }
.reunion-gracias .rexy { margin-inline: auto; }
.reunion-gracias h2 { margin: var(--s-4) 0 var(--s-3); }
.reunion-gracias .btn { margin-top: var(--s-4); }

/* ---- El panel del tutor ---- */
.reunion-fila { margin-bottom: var(--s-4); }
.rf-cab {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.rf-cab strong { font-size: var(--fs-lg); margin-right: var(--s-3); }
.rf-fecha { font-size: var(--fs-caption); color: var(--ink-muted); }
.rf-datos {
    list-style: none; margin: 0 0 var(--s-4); padding: 0;
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    font-size: var(--fs-sm);
}
.rf-datos li { display: flex; align-items: baseline; gap: var(--s-2); }
.rf-datos i { color: var(--ink-muted); width: 16px; flex-shrink: 0; }
.rf-mensaje {
    margin: 0 0 var(--s-4); padding-left: var(--s-4);
    border-left: 3px solid var(--accent);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.rf-confirmar {
    padding: var(--s-4); margin-bottom: var(--s-3);
    background: var(--surface-subtle); border-radius: var(--r-md);
}
.rf-confirmar .form-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rf-estado {
    display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
    padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.rf-estado select { margin: 0; width: auto; }
.rf-estado input[type=text] { margin: 0; flex: 1; min-width: 180px; }
.rf-estado .op { font-size: var(--fs-caption); color: var(--ink-muted); }
.rf-calendario { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-4); }


/* ---- Selector de huecos (estilo TidyCal) ---- */
.agenda-zona {
    margin: 0 0 var(--s-4); font-size: var(--fs-caption); color: var(--ink-muted);
}
.agenda-dias {
    max-height: 380px; overflow-y: auto;
    padding-right: var(--s-2); margin-bottom: var(--s-5);
}
.agenda-dia { margin-bottom: var(--s-4); }
.agenda-dia h3 {
    margin: 0 0 var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-semi);
    display: flex; align-items: baseline; gap: var(--s-2);
}
.agenda-dia h3 span { font-size: var(--fs-caption); color: var(--ink-muted); font-weight: var(--fw-reg); }
/* Rejilla y no lista: con quince huecos, uno por línea obliga a hacer
   scroll para ver una tarde entera. */
.agenda-horas {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}
.agenda-hora {
    padding: 9px 4px;
    background: var(--surface-card); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: var(--fs-sm); font-weight: var(--fw-med);
    cursor: pointer; transition: var(--transition);
}
.agenda-hora:hover { border-color: var(--accent); background: var(--accent-wash); }
.agenda-hora.elegida {
    background: var(--surface-inverse); color: var(--ink-invert);
    border-color: var(--surface-inverse);
}
.agenda-datos { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.agenda-datos[hidden] { display: none; }
.agenda-elegido {
    display: flex; align-items: center; gap: var(--s-3);
    margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
    background: var(--accent-wash); border-radius: var(--r-md);
    font-weight: var(--fw-semi); font-size: var(--fs-sm);
}
.agenda-elegido i { color: var(--accent-strong); }
.agenda-sin-huecos {
    padding: var(--s-4); margin: 0 0 var(--s-5);
    background: var(--surface-subtle); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-body);
}
.reunion-cuando-grande {
    font-size: var(--fs-lg); font-weight: var(--fw-semi);
    color: var(--accent-strong); margin: 0 0 var(--s-3);
}

/* ---- Panel: la agenda del tutor ---- */
.agenda-tabla { width: 100%; }
.agenda-franja-fila {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.agenda-franja-fila .dia { min-width: 100px; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.agenda-franja-fila .horas { flex: 1; font-size: var(--fs-sm); color: var(--ink-body); }