/* ==========================================================================
   Academy by Alumne Flex — hoja principal del portal público.

   Los ficheros de tokens/ vienen tal cual del design system de Claude Design;
   no se tocan. Todo lo de abajo es el porte de los 21 componentes del
   _ds_bundle.js a CSS: los mismos valores, con los estados de React (hover,
   press, focus) convertidos en pseudoclases.

   Bootstrap se carga ANTES que esta hoja y sólo aporta grid, utilidades y JS.
   Ningún componente de Bootstrap (.btn, .card, .navbar…) se usa: las clases
   propias van prefijadas con ac-.
   ========================================================================== */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/layout.css");
@import url("tokens/base.css");

/* --------------------------------------------------------------- cimientos */

/* El token del design system fija la barra en 68 px, pensada para un lockup
   pequeño. Aquí el logo va a 270 px de ancho (90 de alto), así que la barra
   crece. Se redefine el token en vez de escribir la altura suelta: lo que
   depende de ella —el sticky de la tarjeta lateral de la ficha— sigue cuadrando
   solo. Los ficheros de tokens/ no se tocan; esta es la capa que los consume. */
:root { --nav-height: 106px; }

body {
    /* Bootstrap fija su propio font-size/line-height en el reboot. */
    font: var(--type-body);
    color: var(--text-body);
    background: var(--surface-page);
}

img { max-width: 100%; }

.ac-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter-lg);
}

.ac-narrow { max-width: var(--container-narrow); }

.ac-section { padding: var(--section-y) 0; }
.ac-section--compact { padding: var(--section-y-compact) 0; }
.ac-section--top { padding: var(--section-y) 0 0; }
.ac-section--bottom { padding: 0 0 var(--section-y); }

/* Bandas de énfasis: una o dos por página como mucho (regla de marca). */
.ac-band-dark { background: var(--surface-inverse); color: var(--text-on-dark-muted); }
.ac-band-dark h1, .ac-band-dark h2, .ac-band-dark h3 { color: var(--text-on-dark); }
.ac-band-subtle { background: var(--surface-subtle); }

/* Trama de puntos de marca. El color lo pone quien la usa vía `color`. */
.ac-dots {
    position: absolute;
    inset: 0;
    background-image: var(--pattern-dots);
    background-size: var(--pattern-dots-size);
    pointer-events: none;
}

.ac-eyebrow {
    font: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--flex-orange);
}
.ac-eyebrow--muted { color: var(--text-muted); }

.ac-lead { font: var(--type-body); font-size: var(--fs-body-lg); color: var(--text-muted); }

.ac-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--surface-accent);
    color: var(--text-on-accent);
    border-radius: 0 0 var(--radius-sm) 0;
    font: var(--type-label);
}
.ac-skip-link:focus { left: 0; text-decoration: none; color: var(--text-on-accent); }

/* -------------------------------------------------------------------- Icon */

.ac-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
    stroke-width: 2;
}
.ac-icon--thin { stroke-width: 1.75; }
.ac-icon--bold { stroke-width: 2.2; }

/* ------------------------------------------------------------------ Button */

.ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font: var(--type-label);
    font-family: var(--font-sans);
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-control);
    padding: 11px 20px;
    font-size: var(--fs-body-sm);
    min-height: 44px;
}
.ac-btn:hover { text-decoration: none; }
.ac-btn:active { transform: var(--press-scale); }
.ac-btn:disabled,
.ac-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.ac-btn--sm { padding: 8px 14px; font-size: var(--fs-body-sm); min-height: 36px; }
.ac-btn--lg { padding: 14px 26px; font-size: var(--fs-body); min-height: 52px; }
.ac-btn--block { width: 100%; }

.ac-btn--primary { background: var(--surface-accent); color: var(--text-on-accent); box-shadow: var(--shadow-xs); }
.ac-btn--primary:hover:not(:disabled) { background: var(--orange-600); box-shadow: var(--shadow-accent); color: var(--text-on-accent); }

.ac-btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-strong); }
.ac-btn--secondary:hover:not(:disabled) { background: var(--surface-subtle); border-color: var(--ink-500); color: var(--text-strong); }

.ac-btn--ghost { background: transparent; color: var(--text-strong); }
.ac-btn--ghost:hover:not(:disabled) { background: var(--surface-muted); color: var(--text-strong); }

.ac-btn--dark { background: var(--surface-inverse); color: var(--text-on-dark); }
.ac-btn--dark:hover:not(:disabled) { background: #1E2A44; color: var(--text-on-dark); }

.ac-btn--on-dark { background: rgba(255,255,255,.10); color: var(--text-on-dark); border-color: var(--border-on-dark); }
.ac-btn--on-dark:hover:not(:disabled) { background: rgba(255,255,255,.18); color: var(--text-on-dark); }

/* -------------------------------------------------------------- IconButton */

.ac-iconbtn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: var(--transition-control);
    background: var(--surface-card);
    color: var(--text-strong);
}
.ac-iconbtn--sm { width: 32px; height: 32px; }
.ac-iconbtn--lg { width: 48px; height: 48px; }
.ac-iconbtn--square { border-radius: var(--radius-button); }
.ac-iconbtn--solid { background: var(--surface-accent); color: var(--text-on-accent); border-color: transparent; }
.ac-iconbtn--soft { background: var(--surface-accent-soft); color: var(--flex-orange); border-color: transparent; }
.ac-iconbtn--ghost { background: transparent; color: var(--text-body); border-color: transparent; }
.ac-iconbtn:hover:not(:disabled) { filter: brightness(.96); transform: var(--lift-hover); }
.ac-iconbtn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------------- Badge */

.ac-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-chip);
    font: var(--type-label);
    font-size: var(--fs-caption);
    background: var(--surface-accent-soft);
    color: var(--orange-700);
}
.ac-badge--solid   { background: var(--surface-accent); color: var(--text-on-accent); }
.ac-badge--neutral { background: var(--surface-muted); color: var(--text-body); }
.ac-badge--dark    { background: var(--surface-inverse); color: var(--text-on-dark); }
.ac-badge--success { background: var(--state-success-soft); color: var(--state-success); }
.ac-badge--amber   { background: var(--surface-amber-soft); color: #8A5A00; }
.ac-badge--outline { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.ac-badge--outline-on-dark { background: transparent; color: var(--text-on-dark-muted); box-shadow: inset 0 0 0 1px var(--border-on-dark); }
.ac-badge--upper { letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* --------------------------------------------------------------------- Tag */

.ac-tag {
    font: var(--type-body-sm);
    font-weight: var(--fw-medium);
    padding: 7px 14px;
    border-radius: var(--radius-chip);
    cursor: pointer;
    transition: var(--transition-control);
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-body);
    text-decoration: none;
    display: inline-block;
}
.ac-tag:hover { background: var(--surface-subtle); color: var(--text-body); text-decoration: none; }
.ac-tag.is-active {
    border-color: var(--flex-orange);
    background: var(--surface-accent-soft);
    color: var(--orange-700);
}

/* -------------------------------------------------------------------- Card */

.ac-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
    padding: var(--pad-card);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-card);
}
.ac-card--subtle   { background: var(--surface-subtle); }
.ac-card--accent   { background: var(--surface-accent-soft); border-color: var(--orange-100); }
.ac-card--dark     { background: var(--surface-inverse); border-color: var(--border-on-dark); color: var(--text-on-dark); }
.ac-card--gradient { background: var(--gradient-peach); border-color: transparent; }
.ac-card--flat     { box-shadow: var(--shadow-none); }
.ac-card--panel    { border-radius: var(--radius-panel); padding: var(--space-8); }

.ac-card--interactive { cursor: pointer; }
.ac-card--interactive:hover,
.ac-card--interactive:focus-within {
    transform: var(--lift-hover);
    box-shadow: var(--shadow-lg);
    border-color: var(--orange-200);
}

/* --------------------------------------------------------------- ArrowLink */

.ac-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--flex-orange);
    text-decoration: none;
    font: var(--type-label);
    transition: var(--transition-control);
}
.ac-arrowlink:hover { text-decoration: none; color: var(--orange-700); }
.ac-arrowlink .ac-icon { transition: transform var(--dur-fast) var(--ease-standard); }
.ac-arrowlink:hover .ac-icon,
.ac-card--interactive:hover .ac-arrowlink .ac-icon { transform: translateX(3px); }
.ac-arrowlink--sm { font-size: var(--fs-body-sm); }
.ac-arrowlink--on-dark { color: var(--text-on-dark); }
.ac-arrowlink--strong { color: var(--text-strong); }

/* ------------------------------------------------------------- AvatarGroup */

.ac-avatars { display: flex; align-items: center; --avatar: 30px; }
.ac-avatars > * {
    width: var(--avatar);
    height: var(--avatar);
    border-radius: var(--radius-pill);
    border: 2px solid var(--surface-card);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-100);
    color: var(--orange-700);
    font: var(--type-label);
    font-size: calc(var(--avatar) * .38);
}
.ac-avatars > * + * { margin-left: calc(var(--avatar) * -.28); }
.ac-avatars--on-dark > * { border-color: var(--surface-inverse); }
.ac-avatars__more { background: var(--surface-muted) !important; color: var(--text-body) !important; }

/* ------------------------------------------------------------- ProgressBar */

.ac-progress { height: 6px; border-radius: var(--radius-pill); background: var(--ink-200); overflow: hidden; }
.ac-progress__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gradient-flex);
    transition: width var(--dur-slow) var(--ease-out);
}

/* -------------------------------------------------------------------- Stat */

.ac-stat { display: flex; flex-direction: column; gap: 4px; }
.ac-stat__value {
    font: var(--type-h2);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
}
.ac-stat__label { font: var(--type-body-sm); color: var(--text-muted); }
.ac-band-dark .ac-stat__value { color: var(--text-on-dark); }
.ac-band-dark .ac-stat__label { color: var(--text-on-dark-muted); }

/* ---------------------------------------------------------- SectionHeading */

.ac-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
}
.ac-heading__text { display: flex; flex-direction: column; gap: var(--space-3); max-width: 680px; }
.ac-heading__title { font: var(--type-h2); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.ac-heading__desc { font: var(--type-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-muted); }
.ac-heading--center { flex-direction: column; align-items: center; text-align: center; }
.ac-heading--center .ac-heading__text { align-items: center; }
.ac-band-dark .ac-heading__title { color: var(--text-on-dark); }
.ac-band-dark .ac-heading__desc { color: var(--text-on-dark-muted); }

/* ------------------------------------------------------------------ Inputs */

.ac-field { display: flex; flex-direction: column; gap: 6px; }
.ac-field__label { font: var(--type-label); color: var(--text-strong); }
.ac-field__hint { font: var(--type-body-sm); font-size: var(--fs-caption); color: var(--text-muted); }
.ac-field__error { font: var(--type-body-sm); font-size: var(--fs-caption); color: var(--state-danger); }

.ac-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-card);
    border-radius: var(--radius-input);
    padding: var(--pad-input-y) var(--pad-input-x);
    border: 1px solid var(--border-subtle);
    transition: var(--transition-control);
    color: var(--text-muted);
}
.ac-input:focus-within { border-color: var(--flex-orange); box-shadow: var(--focus-ring); }
.ac-input input {
    border: none;
    outline: none;
    background: transparent;
    font: var(--type-body);
    color: var(--text-strong);
    width: 100%;
    min-width: 0;
    padding: 0;
}
.ac-input input::placeholder { color: var(--text-muted); }
.ac-field.is-invalid .ac-input { border-color: var(--state-danger); }

.ac-selectwrap { position: relative; display: flex; align-items: center; }
.ac-selectwrap .ac-icon { position: absolute; right: 14px; pointer-events: none; color: var(--text-muted); }
.ac-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font: var(--type-body);
    color: var(--text-strong);
    background: var(--surface-card);
    border-radius: var(--radius-input);
    padding: var(--pad-input-y) 40px var(--pad-input-y) var(--pad-input-x);
    border: 1px solid var(--border-subtle);
    outline: none;
    transition: var(--transition-control);
}
.ac-select:focus { border-color: var(--flex-orange); box-shadow: var(--focus-ring); }

.ac-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ac-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-check__box {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    transition: var(--transition-control);
    margin-top: 1px;
    color: transparent;
}
.ac-check input:checked + .ac-check__box {
    background: var(--surface-accent);
    border-color: var(--flex-orange);
    color: #fff;
}
.ac-check input:focus-visible + .ac-check__box { box-shadow: var(--focus-ring); }
.ac-check__box .ac-icon { stroke-width: 3; }
.ac-check__label { font: var(--type-body-sm); color: var(--text-body); }

/* -------------------------------------------------------------- CourseCard */

.ac-course {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.ac-course__media {
    height: 132px;
    background: var(--gradient-peach);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--orange-600);
}
.ac-course__media img { width: 100%; height: 100%; object-fit: cover; }
.ac-course__badge { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.ac-course__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--pad-card);
    flex: 1;
}
.ac-course__title { font: var(--type-h4); color: var(--text-strong); }
.ac-course__desc { font: var(--type-body-sm); color: var(--text-muted); }
.ac-course__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-3);
    flex-wrap: wrap;
}
.ac-course__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--type-body-sm);
    font-size: var(--fs-caption);
    color: var(--text-muted);
}
/* El enlace cubre la tarjeta entera: toda ella es zona de clic, pero en el DOM
   sigue habiendo un solo enlace con texto propio. */
.ac-course__link::after { content: ""; position: absolute; inset: 0; }
.ac-course { position: relative; }

/* Rejilla de tarjetas. auto-fill con mínimo 280 px, como manda el design system. */
.ac-grid { display: grid; gap: var(--gap-grid); }
.ac-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ac-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ac-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ac-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* -------------------------------------------------------------- ModuleItem */

.ac-module {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    transition: var(--transition-control);
    text-decoration: none;
}
.ac-module:hover { background: var(--surface-subtle); text-decoration: none; }
.ac-module.is-active { border-color: var(--orange-200); background: var(--surface-accent-soft); }
.ac-module__dot {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ac-module__dot--done   { background: var(--state-success-soft); color: var(--state-success); }
.ac-module__dot--active { background: var(--surface-accent-soft); color: var(--flex-orange); }
.ac-module__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ac-module__title { font: var(--type-label); color: var(--text-strong); }
.ac-module__meta { font: var(--type-body-sm); font-size: var(--fs-caption); color: var(--text-muted); }

.ac-modules {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ac-modules__group {
    font: var(--type-label);
    color: var(--text-strong);
    padding: 14px 14px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ac-modules__group .ac-icon { color: var(--flex-orange); }

/* ------------------------------------------------------------------ NavBar */

.ac-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: var(--nav-height);
    padding: 8px var(--gutter-lg);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}
.ac-nav__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
.ac-nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
/* El lockup manda en la barra: se fija el ANCHO y el alto se calcula solo,
   para que la proporción del logo no dependa de un número escrito a mano. */
.ac-nav__brand img { width: 270px; height: auto; display: block; }
.ac-nav__links { display: flex; align-items: center; gap: var(--space-6); margin-right: auto; }
.ac-nav__link {
    font: var(--type-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-body);
    text-decoration: none;
    transition: var(--transition-control);
}
.ac-nav__link:hover { color: var(--text-strong); text-decoration: none; }
.ac-nav__link.is-active { font-weight: var(--fw-semibold); color: var(--flex-orange); }
.ac-nav__toggle { display: none; }

.ac-offcanvas .ac-nav__links { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.ac-offcanvas .ac-nav__link { font-size: var(--fs-body-lg); }

/* ------------------------------------------------------------------ Footer */

.ac-footer {
    background: var(--surface-inverse);
    color: var(--text-on-dark-muted);
    padding: var(--space-16) var(--gutter-lg) var(--space-8);
}
.ac-footer__top {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    justify-content: space-between;
}
.ac-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 320px; }
.ac-footer__lockup { display: inline-flex; align-items: center; gap: 10px; }
.ac-footer__lockup img { height: 30px; width: auto; display: block; }
.ac-footer__name {
    font: var(--type-h4);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
    color: var(--text-on-dark);
}
.ac-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.ac-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.ac-footer__col > span {
    font: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-on-dark);
}
.ac-footer__col a { font: var(--type-body-sm); color: var(--text-on-dark-muted); text-decoration: none; }
.ac-footer__col a:hover { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.ac-footer__legal {
    max-width: var(--container-max);
    margin: var(--space-12) auto 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-on-dark);
    font: var(--type-body-sm);
    font-size: var(--fs-caption);
}

/* ------------------------------------------------------- movimiento de marca */

@keyframes ac-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ac-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes ac-word { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ac-rise { animation: ac-rise .6s var(--ease-standard) both; }
.ac-rise-1 { animation-delay: .08s; }
.ac-rise-2 { animation-delay: .16s; }
.ac-rise-3 { animation-delay: .24s; }
.ac-rise-4 { animation-delay: .32s; }
.ac-rise-5 { animation-delay: .40s; }
.ac-float { animation: ac-float 7s 1s cubic-bezier(.45,0,.55,1) infinite alternate; }
.ac-float--rev { animation: ac-float 8s .5s cubic-bezier(.45,0,.55,1) infinite alternate-reverse; }

/* ------------------------------------------------------------- Home: hero */

.ac-hero { position: relative; overflow: hidden; padding: 72px 0 88px; background: var(--surface-page); }
.ac-hero__dots {
    color: var(--ink-300);
    opacity: .55;
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.ac-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}
.ac-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.ac-hero__title {
    font: var(--type-display);
    font-size: 60px;
    letter-spacing: var(--ls-display);
    line-height: 1.04;
    color: var(--text-strong);
}
.ac-hero__audience {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font: var(--fw-semibold) 22px/1.3 var(--font-sans);
    letter-spacing: -.01em;
    color: var(--text-body);
}
.ac-hero__word { color: var(--flex-orange); display: inline-block; animation: ac-word .45s var(--ease-standard) both; }
.ac-hero__proof {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    font: var(--type-body-sm);
    color: var(--text-body);
}
.ac-hero__proof span { display: inline-flex; align-items: center; gap: 8px; }
.ac-hero__proof .ac-icon { color: var(--flex-orange); }

.ac-hero__stage { position: relative; height: 560px; }
.ac-hero__photo {
    position: absolute;
    inset: 0 0 0 24px;
    border-radius: var(--radius-panel);
    border-top-right-radius: 96px;
    background: var(--gradient-peach);
    overflow: hidden;
}
.ac-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-hero__cert {
    position: absolute;
    left: -16px;
    bottom: 56px;
    width: 300px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xl);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ac-hero__live {
    position: absolute;
    right: -8px;
    top: 40px;
    background: var(--surface-inverse);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xl);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ac-hero__pill {
    position: absolute;
    right: 24px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    font: var(--fw-semibold) 13px/1 var(--font-sans);
    color: var(--text-strong);
}

/* Cajita de icono: el tratamiento estándar de bullet con glifo. */
.ac-iconbox {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--surface-accent-soft);
    color: var(--flex-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ac-iconbox--sm { width: 28px; height: 28px; }
.ac-iconbox--md { width: 36px; height: 36px; }
.ac-iconbox--on-dark { background: rgba(255,106,0,.18); }

.ac-tile { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-card); background: var(--surface-subtle); }
.ac-tile__title { font: var(--type-label); font-size: 15px; color: var(--text-strong); }
.ac-tile__desc { font: var(--type-body-sm); font-size: 13px; color: var(--text-muted); }
.ac-tile .ac-icon { color: var(--flex-orange); }

.ac-format { min-height: 260px; display: flex; flex-direction: column; gap: 14px; padding: var(--space-8); }
.ac-format__big { font: var(--fw-extrabold) 44px/1 var(--font-sans); letter-spacing: var(--ls-display); color: var(--text-strong); }
.ac-format__cert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font: var(--type-body-sm);
    font-size: 13px;
    color: var(--text-body);
}
.ac-format__cert .ac-icon { color: var(--flex-orange); }

.ac-swap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 18px 20px;
    border-radius: var(--radius-card);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border-on-dark);
}
.ac-swap__old {
    font: var(--type-label);
    font-size: 16px;
    color: var(--text-on-dark);
    text-decoration: line-through;
    text-decoration-color: var(--flex-orange);
    text-decoration-thickness: 2px;
}
.ac-swap__new { font: var(--type-body-sm); color: var(--text-on-dark-muted); }

/* Hueco de imagen: el design system manda degradado durazno + glifo cuando no
   hay fotografía, así que el placeholder es parte del diseño, no un parche. */
.ac-media {
    border-radius: var(--radius-panel);
    background: var(--gradient-peach);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C24D00;
}
.ac-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-media__note { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font: var(--type-label); text-align: center; padding: 0 24px; }
.ac-media--tr { border-top-right-radius: 96px; }
.ac-media--bl { border-bottom-left-radius: 72px; }
.ac-media--tl { border-top-left-radius: 56px; }
.ac-media--br { border-bottom-right-radius: 56px; }

.ac-event { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-subtle); text-decoration: none; }
.ac-event:hover { background: var(--surface-muted); text-decoration: none; }
.ac-event__date { width: 48px; display: flex; flex-direction: column; align-items: center; line-height: 1; flex: 0 0 auto; }
.ac-event__day { font: var(--fw-extrabold) 18px/1 var(--font-sans); color: var(--text-strong); }
.ac-event__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ac-event__title { font: var(--type-label); color: var(--text-strong); }
.ac-event__meta { font: var(--type-body-sm); font-size: 13px; color: var(--text-muted); }

.ac-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    flex-wrap: wrap;
}
.ac-cta-band__text { display: flex; flex-direction: column; gap: var(--space-3); max-width: 620px; }

.ac-live-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--state-danger);
    box-shadow: 0 0 0 4px var(--state-danger-soft);
    flex: 0 0 auto;
}

/* -------------------------------------------------------- Catálogo: filtros */

.ac-catalog { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-12); align-items: start; }

.ac-filters { display: flex; flex-direction: column; gap: var(--space-7, 28px); }
.ac-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}
.ac-filters__title { font: var(--type-label); color: var(--text-strong); }
.ac-filters__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-filters__count { font: var(--type-body-sm); font-size: 13px; color: var(--text-muted); }
.ac-filters__clear { font: var(--type-body-sm); color: var(--text-muted); text-decoration: none; align-self: flex-start; }
.ac-filters__clear:hover { color: var(--text-strong); }

.ac-results { display: flex; flex-direction: column; gap: var(--space-6); }
.ac-results__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ac-results__count { font: var(--type-body-sm); color: var(--text-muted); }
.ac-sort { display: flex; align-items: center; gap: 8px; font: var(--type-body-sm); color: var(--text-muted); }
.ac-sort select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 32px 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    font: var(--type-label);
    color: var(--text-strong);
    background: var(--surface-card) no-repeat right 10px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.ac-sort__wrap { position: relative; display: inline-flex; align-items: center; }
.ac-sort__wrap .ac-icon { position: absolute; right: 10px; pointer-events: none; color: var(--text-muted); }

.ac-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.ac-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: var(--space-4); }
.ac-pager a, .ac-pager span {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    border: 1px solid var(--border-subtle);
    font: var(--type-label);
    color: var(--text-body);
    text-decoration: none;
    background: var(--surface-card);
}
.ac-pager a:hover { background: var(--surface-subtle); text-decoration: none; }
.ac-pager .is-active { border-color: var(--flex-orange); background: var(--surface-accent-soft); color: var(--orange-700); }
.ac-pager .is-gap { border-color: transparent; background: transparent; color: var(--text-muted); }

/* -------------------------------------------------------------- Ficha curso */

.ac-course-hero { background: var(--surface-inverse); padding: 40px 0 64px; }
.ac-course-hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-16); }
.ac-course-hero h1 { font: var(--type-h1); color: var(--text-on-dark); letter-spacing: var(--ls-heading); max-width: 720px; }
.ac-course-hero__lead { font: var(--type-body); font-size: var(--fs-body-lg); color: var(--text-on-dark-muted); max-width: 640px; }
.ac-course-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    font: var(--type-body-sm);
    color: var(--text-on-dark-muted);
}
.ac-course-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ac-course-hero__meta .ac-icon { color: var(--flex-orange); }

.ac-crumbs { display: flex; align-items: center; gap: 8px; font: var(--type-body-sm); color: var(--text-on-dark-muted); flex-wrap: wrap; }
.ac-crumbs a { color: var(--text-on-dark-muted); text-decoration: none; }
.ac-crumbs a:hover { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }

.ac-course-body { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-16); align-items: start; }
.ac-course-main { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-12); }
.ac-course-main h2 { font: var(--type-h3); color: var(--text-strong); }
.ac-course-block { display: flex; flex-direction: column; gap: var(--space-4); }

/* La tarjeta lateral sube sobre la banda oscura, como en el diseño. */
.ac-buybox {
    margin-top: -200px;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ac-buybox__media {
    height: 200px;
    background: var(--gradient-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.ac-buybox__media > img { width: 100%; height: 100%; object-fit: cover; }
/* El vídeo de presentación ocupa toda la caja, sea <video> o <iframe>. */
.ac-buybox__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: cover; }
.ac-buybox__play {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--surface-accent);
    box-shadow: var(--shadow-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
}
.ac-buybox__preview { position: absolute; bottom: 12px; left: 14px; font: var(--type-body-sm); font-size: 13px; color: var(--text-on-dark-muted); }
.ac-buybox__body { padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--space-4); }
.ac-buybox__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-buybox__price strong { font: var(--fw-extrabold) 32px/1 var(--font-sans); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.ac-buybox__was { font: var(--type-body); font-size: 17px; color: var(--text-muted); text-decoration-thickness: 1px; }
.ac-buybox__note { font: var(--type-body-sm); color: var(--text-muted); }
.ac-buybox__list { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.ac-buybox__list div { display: flex; align-items: center; gap: 10px; font: var(--type-body-sm); color: var(--text-body); }
.ac-buybox__list .ac-icon { color: var(--flex-orange); }

.ac-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ac-outcomes div { display: flex; gap: 10px; align-items: flex-start; font: var(--type-body-sm); color: var(--text-body); }
.ac-outcomes .ac-icon { color: var(--state-success); margin-top: 2px; }

.ac-faq { display: flex; flex-direction: column; }
.ac-faq__item { border-bottom: 1px solid var(--border-subtle); }
.ac-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    text-align: left;
    font: var(--type-label);
    font-size: 15px;
    color: var(--text-strong);
    cursor: pointer;
}
.ac-faq__q .ac-icon { color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.ac-faq__q[aria-expanded="true"] .ac-icon { transform: rotate(180deg); }
.ac-faq__a { font: var(--type-body-sm); color: var(--text-muted); padding-bottom: 16px; }

.ac-teachers { display: flex; flex-direction: column; gap: var(--space-6); }
.ac-teacher { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.ac-teacher__avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--gradient-peach);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--fw-extrabold) 24px/1 var(--font-sans);
    color: #C24D00;
    flex: 0 0 auto;
}
/* La biografía es HTML: sin esto, el margen de Bootstrap descuadra el bloque. */
.ac-teacher__bio p { margin: 0; }
.ac-teacher__bio p + p { margin-top: var(--space-3); }

/* Texto enriquecido que llega de la API (descripción del curso). */
.ac-rich { font: var(--type-body); color: var(--text-body); }
.ac-rich > * + * { margin-top: var(--space-4); }
.ac-rich h2, .ac-rich h3, .ac-rich h4 { font: var(--type-h4); color: var(--text-strong); }
.ac-rich ul, .ac-rich ol { padding-left: 22px; }
.ac-rich li + li { margin-top: 6px; }
.ac-rich a { color: var(--flex-orange); }

/* --------------------------------------------------------------- Rutas */

.ac-path { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-12); align-items: start; padding: var(--space-8); }
.ac-path__intro { display: flex; flex-direction: column; gap: 14px; }
.ac-path__title { font: var(--type-h3); color: var(--text-strong); }
.ac-path__desc { font: var(--type-body-sm); color: var(--text-muted); }

/* Cadena de pasos: la línea es un pseudo-elemento a la altura de los círculos. */
.ac-chain { display: grid; gap: 0; position: relative; }
.ac-chain::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 1px; background: var(--border-subtle); }
.ac-chain__step { display: flex; flex-direction: column; gap: var(--space-3); padding-right: 20px; position: relative; text-decoration: none; }
.ac-chain__n {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: var(--fw-bold) 12px/1 var(--font-sans);
    background: var(--surface-card);
    color: var(--text-body);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ac-chain__n--first { background: var(--flex-orange); color: #fff; box-shadow: none; }
.ac-chain__n--cert { background: var(--surface-inverse); color: #fff; box-shadow: none; }
.ac-chain__text { display: flex; flex-direction: column; gap: 6px; }
.ac-chain__title { font: var(--type-label); color: var(--text-strong); }
.ac-chain__meta { font: var(--type-body-sm); font-size: 13px; color: var(--text-muted); }
a.ac-chain__step:hover .ac-chain__title { color: var(--flex-orange); }

.ac-brandpanel {
    border-radius: var(--radius-panel);
    border-bottom-right-radius: 56px;
    background: var(--gradient-flex);
    padding: var(--space-10);
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
}
.ac-brandpanel > * { position: relative; }
.ac-brandpanel img { width: 56px; }
.ac-brandpanel span { font: var(--type-h3); color: #fff; }

/* ------------------------------------------------------ Estado próximamente */

.ac-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-8);
    border-radius: var(--radius-panel);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}
.ac-soon__dots { color: var(--orange-300); opacity: .28; }
.ac-soon__mark {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    background: var(--gradient-peach);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #C24D00;
    position: relative;
}
.ac-soon__title { font: var(--type-h3); color: var(--text-strong); position: relative; }
.ac-soon__text { font: var(--type-body); color: var(--text-muted); max-width: 460px; position: relative; }
.ac-soon__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; position: relative; }

/* ------------------------------------------------------------------ Signup */

.ac-signup { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; }
.ac-signup__form { padding: var(--space-16) var(--gutter-lg); display: flex; align-items: center; justify-content: center; }
.ac-signup__inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-6); }
.ac-signup__aside {
    background: var(--gradient-flex);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    position: relative;
    overflow: hidden;
}
.ac-signup__aside > div { position: relative; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-7, 28px); }
.ac-signup__claim { font: var(--type-h3); font-size: 28px; color: #fff; letter-spacing: var(--ls-heading); }
.ac-signup__card { background: rgba(255,255,255,.14); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.ac-signup__card .ac-eyebrow { color: rgba(255,255,255,.85); }
.ac-signup__legal { font: var(--type-body-sm); font-size: 13px; color: var(--text-muted); text-align: center; }
.ac-signup__legal a { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }

.ac-notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-accent-soft);
    color: var(--orange-700);
    font: var(--type-body-sm);
}
.ac-notice .ac-icon { margin-top: 2px; flex: 0 0 auto; }
.ac-notice--info { background: var(--state-info-soft); color: var(--state-info); }
.ac-notice--danger { background: var(--state-danger-soft); color: var(--state-danger); }
.ac-notice--success { background: var(--state-success-soft); color: var(--state-success); }

/* ------------------------------------------------------------ diagnóstico */

.ac-diag { max-width: 860px; margin: 0 auto; padding: var(--space-12) var(--gutter); display: flex; flex-direction: column; gap: var(--space-6); }
.ac-diag table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.ac-diag th, .ac-diag td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ac-diag th { width: 240px; color: var(--text-strong); font-weight: var(--fw-semibold); }
.ac-diag code { font: var(--type-mono); background: var(--surface-subtle); padding: 2px 6px; border-radius: var(--radius-xs); }
.ac-diag__ok { color: var(--state-success); font-weight: var(--fw-semibold); }
.ac-diag__ko { color: var(--state-danger); font-weight: var(--fw-semibold); }
.ac-diag__warn { color: #8A5A00; font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------- utilidades */

.ac-stack { display: flex; flex-direction: column; }
.ac-stack-2 { gap: var(--space-2); }
.ac-stack-3 { gap: var(--space-3); }
.ac-stack-4 { gap: var(--space-4); }
.ac-stack-5 { gap: var(--space-5); }
.ac-stack-6 { gap: var(--space-6); }
.ac-stack-8 { gap: var(--space-8); }
.ac-stack-10 { gap: var(--space-10); }
.ac-stack-12 { gap: var(--space-12); }
.ac-row { display: flex; align-items: center; }
.ac-row-2 { gap: var(--space-2); }
.ac-row-3 { gap: var(--space-3); }
.ac-row-4 { gap: var(--space-4); }
.ac-row-5 { gap: var(--space-5); }
.ac-wrap { flex-wrap: wrap; }
.ac-relative { position: relative; }
.ac-muted { color: var(--text-muted); }
.ac-strong { color: var(--text-strong); }
.ac-on-dark { color: var(--text-on-dark); }
.ac-on-dark-muted { color: var(--text-on-dark-muted); }
.ac-accent { color: var(--flex-orange); }
.ac-t-body-sm { font: var(--type-body-sm); }
.ac-t-label { font: var(--type-label); }
.ac-t-h3 { font: var(--type-h3); }
.ac-t-h4 { font: var(--type-h4); }
.ac-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1199.98px) {
    .ac-hero__title { font-size: 48px; }
    .ac-hero__stage { height: 480px; }
    .ac-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899.98px) {
    :root { --section-y: 64px; --section-y-compact: 48px; --gutter-lg: 24px; }

    .ac-nav__links { display: none; }
    .ac-nav__toggle { display: inline-flex; }
    .ac-offcanvas .ac-nav__links { display: flex; }

    .ac-hero { padding: 48px 0 56px; }
    .ac-hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
    .ac-hero__title { font-size: 40px; }
    .ac-hero__stage { height: 380px; }
    /* Las tarjetas flotantes son decorativas: en móvil estorban. */
    .ac-hero__cert, .ac-hero__live { display: none; }
    .ac-hero__photo { inset: 0; }

    .ac-grid--2, .ac-grid--3, .ac-grid--4 { grid-template-columns: 1fr; }
    .ac-heading { flex-direction: column; align-items: flex-start; }

    .ac-catalog { grid-template-columns: 1fr; gap: var(--space-6); }

    .ac-course-hero__grid, .ac-course-body { grid-template-columns: 1fr; gap: var(--space-8); }
    .ac-buybox { margin-top: 0; position: static; }
    .ac-outcomes { grid-template-columns: 1fr; }

    .ac-path { grid-template-columns: 1fr; gap: var(--space-6); }
    .ac-chain { grid-template-columns: 1fr !important; gap: var(--space-5); }
    /* En una sola columna la línea horizontal no significa nada. */
    .ac-chain::before { display: none; }
    .ac-chain__step { padding-right: 0; }

    .ac-signup { grid-template-columns: 1fr; min-height: 0; }
    .ac-signup__aside { order: -1; padding: var(--space-10) var(--gutter-lg); }

    .ac-footer__top { flex-direction: column; gap: var(--space-10); }
    .ac-footer__cols { gap: var(--space-10); }
}

@media (max-width: 639.98px) {
    .ac-hero__title { font-size: 34px; }
    .ac-hero__audience { font-size: 18px; }
    .ac-hero__stage { height: 280px; }
    .ac-cta-band { gap: var(--space-6); }
    .ac-cta-band h2 { font-size: var(--fs-h2); }
    .ac-course-hero h1 { font-size: var(--fs-h2); }
    .ac-format__big { font-size: 34px; }
    .ac-footer__cols { flex-direction: column; gap: var(--space-8); }
    .ac-btn--lg { padding: 12px 20px; min-height: 48px; }
}

/* Regla de marca: el movimiento es intencionado y corto. Si el sistema pide
   menos movimiento, se quita todo — no hay nada que dependa de la animación. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .ac-nav, .ac-footer, .ac-buybox__play { display: none; }
    .ac-band-dark { background: #fff; color: #000; }
}

/* Rejillas que el diseño apila en pantallas medias. Marcadas en la plantilla
   con data-stack-md para no repetir la media query en cada `style` inline. */
@media (max-width: 899.98px) {
    [data-stack-md] { grid-template-columns: 1fr !important; }
}

/* Offcanvas de Bootstrap con la piel de Academy. */
.ac-offcanvas { background: var(--surface-card); }
.ac-offcanvas .offcanvas-header { border-bottom: 1px solid var(--border-subtle); padding: 16px var(--gutter); }
.ac-offcanvas .offcanvas-body { padding: var(--space-6) var(--gutter); }

/* El buscador del catálogo mientras se refresca por fetch. */
[aria-busy="true"] { opacity: .55; transition: opacity var(--dur-fast) var(--ease-standard); }

/* Junto al rail de filtros, tres tarjetas se quedan por debajo del mínimo de
   280 px en cuanto el contenedor baja de 1200. Antes de apilar, dos. */
@media (max-width: 1199.98px) {
    .ac-catalog .ac-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* La trama de puntos del hero está enmascarada para una composición a dos
   columnas. Apilada en móvil queda detrás del texto y se lee como ruido. */
@media (max-width: 899.98px) {
    .ac-hero__dots { display: none; }
}

/* En móvil el lockup a 270 px se comería la barra entera junto al botón de
   menú, así que baja a un tamaño que siga siendo legible. */
@media (max-width: 899.98px) {
    .ac-nav__brand img { width: 190px; }
}
@media (max-width: 419.98px) {
    .ac-nav__brand img { width: 160px; }
}

/* Con el logo más pequeño en pantallas estrechas, la barra recupera su altura. */
@media (max-width: 899.98px) {
    :root { --nav-height: 80px; }
}
@media (max-width: 419.98px) {
    :root { --nav-height: 70px; }
}