/* =========================================================================
   SUBEN · Landing
   1. Tokens & reset      2. Layout utils     3. Botones / iconos
   4. Header / nav        5. Hero             6. Perfiles
   7. Confianza           8. Nataly           9. Disclaimer / footer
   10. Animaciones        11. Responsive
   ========================================================================= */

/* 1. Tokens & reset ------------------------------------------------------ */
:root {
    /* Paleta de marca */
    --primary: #6F2DBD;
    --secondary: #4B1D88;
    --accent: #EDE4FA;
    --dark: #2E2E2E;
    --light: #FFFFFF;
    --blue: #0097B2;

    /* Escala de morados derivada de la marca */
    --purple-900: #2a1252;
    --purple-800: #4B1D88;
    --purple-700: #5d23a6;
    --purple-600: #6F2DBD;
    --purple-500: #8a45cf;
    --purple-400: #a87fe0;
    --purple-200: #d6c2f0;
    --purple-100: #EDE4FA;
    --purple-050: #f6f1fc;

    /* Azul institucional (perfil profesional) */
    --teal-500: #0097B2;
    --teal-600: #017d94;
    --teal-100: #d6f0f4;
    --teal-050: #e9f7f9;

    --ink: #2E2E2E;
    --body: #585366;
    --muted: #8a839e;

    --bg: #f6f2fc;
    --surface: #FFFFFF;
    --line: #ece4f7;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-pill: 999px;
    --radius-btn: 13px;

    --shadow-sm: 0 4px 16px rgba(111, 45, 189, .08);
    --shadow: 0 18px 44px rgba(111, 45, 189, .14);
    --shadow-lg: 0 30px 70px rgba(111, 45, 189, .18);

    --container: 1280px;
    --ff-head: "Poppins", system-ui, sans-serif;
    --ff-body: "Inter", system-ui, sans-serif;
    --ff-script: "Dancing Script", cursive;
}

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

html {
    scroll-behavior: smooth;
}

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--ff-body);
    color: var(--body);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3 {
    font-family: var(--ff-head);
    color: var(--ink);
    line-height: 1.12;
    margin: 0;
}

.skip-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-130%);
    background: var(--purple-600);
    color: #fff;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-pill);
    z-index: 200;
    transition: transform .2s;
}

.skip-link:focus {
    transform: translateX(-50%) translateY(.6rem);
}

:focus-visible {
    outline: 3px solid var(--purple-400);
    outline-offset: 3px;
    border-radius: 6px;
}

.text-accent {
    color: var(--purple-600);
}

/* 2. Layout utils -------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

/* Páginas con contenedor ampliado (p. ej. orientación profesional):
   afecta header, contenido y footer por igual para mantener la alineación. */
.page--wide .container {
    max-width: 1480px;
}

.section {
    padding-block: clamp(1.5rem, 3vw, 2.4rem);
    position: relative;
}

.section__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
}

.section__title {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 800;
}

/* Título de la sección de perfiles en violeta */
.perfiles .section__title {
    color: var(--purple-600);
}

.section__rule {
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background: var(--purple-400);
    margin: 1rem auto 0;
}

.section__subtitle {
    margin-top: .9rem;
    color: var(--body);
    font-size: 1.02rem;
}

/* 3. Botones / iconos ---------------------------------------------------- */
.icon {
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
}

.icon--sm {
    width: 1.05rem;
    height: 1.05rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .95rem;
    padding: .8rem 1.4rem;
    border-radius: var(--radius-btn);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s;
}

.btn .icon {
    transition: transform .18s;
}

.btn:hover .icon {
    transform: translateX(3px);
}

.btn--primary {
    background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
    color: #fff;
    box-shadow: 0 10px 22px rgba(111, 45, 189, .32);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(111, 45, 189, .4);
}

.btn--soft {
    background: var(--purple-100);
    color: var(--purple-700);
}

.btn--soft:hover {
    background: var(--purple-200);
    transform: translateY(-2px);
}

.btn--outline {
    background: transparent;
    border-color: var(--purple-200);
    color: var(--purple-700);
}

.btn--outline:hover {
    background: var(--purple-050);
    border-color: var(--purple-400);
    transform: translateY(-2px);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
    color: #fff;
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: var(--radius-pill);
}

/* 4. Header / nav -------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(244, 241, 252, .82);
    backdrop-filter: blur(10px);
    transition: box-shadow .25s, background .25s;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .9rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

.logo__img {
    height: 3rem;
    width: auto;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.site-nav__list a {
    font-family: var(--ff-head);
    font-weight: 500;
    font-size: .95rem;
    color: var(--body);
    padding-block: .3rem;
    position: relative;
    transition: color .18s;
}

/* Subrayado animado compartido por hover y estado activo */
.site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--purple-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
    color: var(--purple-600);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
    transform: scaleX(1);
}

.site-nav__list a.is-active {
    color: var(--purple-700);
    font-weight: 600;
}

.site-nav__list a.is-active::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: var(--purple-100);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.nav-toggle span {
    height: 2px;
    border-radius: 2px;
    background: var(--purple-700);
    transition: transform .25s, opacity .2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 5. Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.hero__eyebrow {
    display: inline-block;
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--purple-600);
    margin-bottom: 1rem;
}

.hero__title {
    font-size: clamp(2.4rem, 5.6vw, 4rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.hero__line {
    display: block;
}

.hero__line--accent {
    color: var(--purple-600);
}

.hero__text {
    max-width: 46ch;
    margin-top: 1.3rem;
    font-size: 1.08rem;
    color: var(--body);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 1.8rem;
}

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin-top: 1.6rem;
}

.hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ff-head);
    font-weight: 500;
    font-size: .88rem;
    color: var(--ink);
}

.hero__badges .icon {
    color: var(--purple-500);
}

.hero__media {
    position: relative;
    display: grid;
    place-items: center;
}

.hero__blob {
    position: absolute;
    inset: 4% 0 0 0;
    margin: auto;
    width: min(100%, 520px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 45%, var(--purple-100), var(--purple-050) 60%, transparent 72%);
    border-radius: 42% 58% 57% 43% / 47% 42% 58% 53%;
}

.hero__image {
    position: relative;
    width: min(100%, 520px);
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(74, 47, 150, .18));
}

/* 6. Perfiles ------------------------------------------------------------ */
.perfiles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.2rem, 3vw, 2rem);
}

.perfil {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: clamp(1.7rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.perfil--beneficiario {
    border-top: 4px solid var(--purple-500);
}

.perfil--beneficiario:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px rgba(111, 45, 189, .18);
}

.perfil--profesional {
    border-top: 4px solid var(--teal-500);
}

.perfil--profesional:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px rgba(0, 151, 178, .18);
}

/* Badge superior tipo "Para personas y familias" */
.perfil__badge {
    align-self: flex-start;
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .4rem .85rem;
    border-radius: var(--radius-pill);
}

.perfil--beneficiario .perfil__badge {
    background: var(--purple-100);
    color: var(--purple-700);
}

.perfil--profesional .perfil__badge {
    background: var(--teal-100);
    color: var(--teal-600);
}

.perfil__title {
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    font-weight: 800;
    color: var(--ink);
    margin: 1rem 0 .6rem;
}

.perfil--beneficiario .perfil__brand-em {
    color: var(--purple-600);
}

.perfil--profesional .perfil__brand-em {
    color: var(--teal-500);
}

.perfil__text {
    color: var(--body);
    font-size: .96rem;
    line-height: 1.5;
    margin: 0 0 1.4rem;
}

/* Ilustración (izquierda) + lista (derecha) */
.perfil__body {
    display: grid;
    grid-template-columns: minmax(130px, 42%) 1fr;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.6rem);
    margin-bottom: 1.6rem;
}

.perfil__media {
    display: flex;
    justify-content: center;
}

.perfil__art {
    width: 100%;
    max-width: 235px;
    height: auto;
}

.perfil__list {
    display: grid;
    gap: .7rem;
}

.perfil__list li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .9rem;
    line-height: 1.3;
    color: var(--ink);
}

.perfil__list-icon {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-050);
    color: var(--purple-600);
    transition: transform .18s ease;
}

.perfil__list li:hover .perfil__list-icon {
    transform: scale(1.08);
}

.perfil--profesional .perfil__list-icon {
    background: var(--teal-050);
    color: var(--teal-600);
}

.perfil__list-glyph {
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
}

.perfil__actions {
    margin-top: auto;
    display: grid;
    gap: .65rem;
}

.perfil__actions .btn {
    width: 100%;
    padding: .95rem 1.3rem;
    justify-content: space-between;
}

/* Botón principal teal en el perfil profesional */
.perfil--profesional .perfil__actions .btn--primary {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
    box-shadow: 0 10px 22px rgba(0, 151, 178, .3);
}

/* Botón secundario como outline (jerarquía frente al CTA principal) */
.perfil__actions .btn--soft {
    background: transparent;
    border-color: var(--purple-200);
    color: var(--purple-700);
    box-shadow: none;
}

.perfil__actions .btn--soft:hover {
    background: var(--purple-050);
    border-color: var(--purple-400);
    transform: translateY(-2px);
}

.perfil--profesional .perfil__actions .btn--soft {
    border-color: var(--teal-100);
    color: var(--teal-600);
}

.perfil--profesional .perfil__actions .btn--soft:hover {
    background: var(--teal-050);
    border-color: var(--teal-500);
}

/* 7. Confianza ----------------------------------------------------------- */
.confianza__panel {
    position: relative;
    background: #f3f1f7;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem);
    overflow: hidden;
}

.confianza__panel .section__head {
    margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.confianza__leaf {
    position: absolute;
    top: -10px;
    right: -40px;
    width: clamp(120px, 16vw, 200px);
    opacity: .4;
    pointer-events: none;
    transform: scaleX(-1);
}

.confianza__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.feature {
    padding: .4rem clamp(1rem, 2vw, 1.6rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .2s;
}

/* Divisor vertical entre columnas */
.feature + .feature {
    border-left: 1px solid var(--purple-200);
}

.feature:hover {
    transform: translateY(-4px);
}

.feature__art {
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    background: var(--purple-100);
    border-radius: 50%;
    margin-bottom: .9rem;
}

.feature__art img {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
}

.feature__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.feature__text {
    font-size: .88rem;
    color: var(--body);
    line-height: 1.45;
}

/* 8. Sobre SUBEN + contacto --------------------------------------------- */
.sobre__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: clamp(1.2rem, 2.5vw, 1.8rem);
    align-items: stretch;
}

.nataly__card {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

/* Tarjeta morada "¿Necesitas orientación?" */
.contacto-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, var(--purple-700), var(--purple-600));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 3vw, 2.4rem);
    box-shadow: 0 24px 50px rgba(111, 45, 189, .28);
}

.contacto-card__title {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
}

.contacto-card__rule {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .55);
    margin: 1rem 0;
}

.contacto-card__text {
    color: #e9e1fb;
    font-size: .96rem;
    margin: 0 0 1.5rem;
}

.contacto-card__metodos {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.contacto-card__metodos a,
.contacto-card__static {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #fff;
    font-size: .95rem;
    transition: opacity .18s ease;
}

.contacto-card__metodos a:hover {
    opacity: .85;
}

.contacto-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.contacto-card__cta {
    margin-top: auto;
    width: 100%;
    background: #fff;
    color: var(--purple-700);
    font-weight: 700;
}

.contacto-card__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .18);
}

.nataly__media {
    position: relative;
    display: grid;
    place-items: center;
}

.nataly__ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(100%, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--purple-100), var(--purple-050) 70%);
}

.nataly__photo {
    position: relative;
    width: min(100%, 340px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: var(--shadow);
}

/* Planta sobre los libros "Trabajo Social", superpuesta abajo-izquierda */
.nataly__plant {
    position: absolute;
    left: 0;
    bottom: -2%;
    width: clamp(110px, 34%, 150px);
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(111, 45, 189, .2));
}

.nataly__title {
    margin: 1rem 0 1.2rem;
}

.nataly__name {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
}

.nataly__role {
    display: block;
    font-family: var(--ff-script);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.4vw, 2.8rem);
    color: var(--purple-600);
}

.nataly__quote {
    margin: 0 0 1.7rem;
    color: var(--body);
    font-size: 1.05rem;
    line-height: 1.6;
}

.nataly__quote strong {
    color: var(--purple-700);
    font-weight: 700;
}

.nataly__pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.pillar {
    padding-inline: .2rem;
}

.pillar__dot {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: .6rem;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.pillar__title {
    font-size: .98rem;
    font-weight: 700;
}

.pillar__text {
    font-size: .82rem;
    color: var(--body);
    margin-top: .25rem;
    line-height: 1.4;
}

/* 9. Footer -------------------------------------------------------------- */
.site-footer {
    background: var(--purple-900);
    color: #cfc6ee;
    margin-top: clamp(2rem, 5vw, 4rem);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: clamp(1.8rem, 4vw, 3.5rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* El logo tiene texto oscuro: sobre el footer oscuro va en un chip blanco */
.site-footer .logo__img {
    background: #fff;
    padding: .5rem .7rem;
    border-radius: 12px;
}

.site-footer__desc {
    margin: 1.1rem 0 1.4rem;
    font-size: .92rem;
    max-width: 42ch;
    color: #b3a7e0;
}

.site-footer__contact {
    display: grid;
    gap: .6rem;
}

.site-footer__contact a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    transition: color .18s;
}

.site-footer__contact a:hover {
    color: #fff;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.site-footer__col h3 {
    color: #fff;
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.site-footer__col ul {
    display: grid;
    gap: .55rem;
}

.site-footer__col a {
    font-size: .92rem;
    transition: color .18s;
}

.site-footer__col a:hover {
    color: #fff;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .85rem;
    color: #9c8fd0;
}

/* 8a. Modal (evaluación) ------------------------------------------------- */
body.modal-open {
    overflow: hidden;
}

dialog.modal {
    width: min(680px, calc(100% - 1.5rem));
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

dialog.modal::backdrop {
    background: rgba(33, 26, 58, .55);
    backdrop-filter: blur(2px);
}

dialog.modal[open] {
    animation: modal-in .22s ease;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Modal de producto (recurso individual) ───────────────────────── */
dialog.modal.modal--producto {
    width: min(1060px, calc(100% - 1.5rem));
}

.modal--producto .modal__panel {
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

.recm__top {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(1rem, 2.4vw, 1.6rem);
    padding-right: 1.8rem;
}

.recm__cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 28% 22%, var(--purple-100), transparent 60%),
        linear-gradient(160deg, var(--purple-050), #fff);
    border: 1px solid var(--purple-100);
    overflow: hidden;
}

.recm__cover-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.1rem 1.4rem 1.6rem;
}

.recm__cover-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-700);
    background: var(--purple-100);
    padding: .3rem .55rem;
    border-radius: 999px;
}

.recm__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: .6rem;
}

.recm__thumb {
    aspect-ratio: 1.5;
    display: grid;
    place-items: center;
    border-radius: var(--radius-btn);
    background: var(--purple-050);
    border: 1.5px solid var(--purple-100);
    color: var(--purple-500);
    overflow: hidden;
}

.recm__thumb.is-active {
    border-color: var(--purple-400);
    background: #fff;
}

.recm__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .35rem;
}

.recm__preview {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--purple-600);
}

.recm__buy {
    display: flex;
    flex-direction: column;
}

.recm__tag {
    align-self: flex-start;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-700);
    background: var(--purple-100);
    padding: .35rem .65rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}

.recm__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
}

.recm__desc {
    color: var(--body);
    font-size: .95rem;
    margin-top: .6rem;
}

.recm__rule {
    border: 0;
    border-top: 1px solid var(--purple-100);
    margin: .8rem 0;
}

.recm__price {
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: clamp(1.8rem, 4.5vw, 2.3rem);
    color: var(--purple-600);
    text-align: center;
    margin-bottom: .7rem;
}

.recm__buy-cta {
    width: 100%;
    font-size: 1rem;
    padding: .85rem 1.4rem;
}

.recm__perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin-top: .9rem;
    text-align: center;
}

.recm__perks li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--body);
}

.recm__perks .icon {
    color: var(--purple-600);
}

.recm__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
    margin-top: 1rem;
}

.recm__card {
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
}

.recm__card-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--purple-800);
    margin-bottom: .8rem;
}

.recm__card-icon {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.recm__list {
    display: grid;
    gap: .55rem;
}

.recm__list--2col {
    grid-template-columns: 1fr 1fr;
    gap: .55rem 1.2rem;
}

.recm__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    color: var(--body);
}

.recm__list .icon {
    flex: none;
    margin-top: .1rem;
    color: var(--purple-500);
}

.recm__help {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: .9rem;
    padding: .9rem 1.2rem;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
}

.recm__help-img {
    width: 4.6rem;
    height: auto;
    flex: none;
    align-self: flex-end;
}

.recm__help-body {
    flex: 1;
    min-width: 0;
}

.recm__help-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--purple-800);
    margin-bottom: .25rem;
}

.recm__help-title .icon {
    color: var(--purple-600);
}

.recm__help-body p {
    font-size: .88rem;
    color: var(--body);
}

.recm__help-cta {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .recm__top { grid-template-columns: 1fr; padding-right: 0; }
    .recm__info { grid-template-columns: 1fr; }
    .recm__help { flex-direction: column; text-align: center; }
    .recm__help-img { align-self: center; }
    .recm__help-title { justify-content: center; }
    .recm__help-cta { width: 100%; }
}

@media (max-width: 480px) {
    .recm__list--2col { grid-template-columns: 1fr; }
    .recm__perks { gap: .5rem; }
}

.modal__panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3.5vw, 2.6rem);
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--purple-050);
    color: var(--ink);
    cursor: pointer;
    transition: background .18s ease;
}

.modal__close:hover {
    background: var(--purple-100);
}

.modal__head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.4rem;
    padding-right: 2.2rem;
}

.modal__icon {
    width: 4rem;
    height: 4rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.modal__icon .icon {
    width: 2rem;
    height: 2rem;
}

.modal__title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
}

.modal__subtitle {
    color: var(--body);
    font-size: .95rem;
    margin-top: .35rem;
}

.modal__form {
    display: grid;
    gap: 1.1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.req {
    color: #e1466f;
}

.field__label {
    font-family: var(--ff-head);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
}

/* Input con icono (WhatsApp) */
.field-icon {
    position: relative;
    display: block;
}

.field-icon .icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--purple-500);
    pointer-events: none;
}

/* Mayor especificidad para que no la pise el shorthand `padding` de `.field input` */
.field .field-icon input {
    padding-left: 2.6rem;
}

/* Select temático */
.select {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--purple-050);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem 2.4rem .7rem .9rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a839e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1.05rem;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.select:focus {
    outline: none;
    border-color: var(--purple-400);
    background-color: #fff;
}

/* Toggle de perfil (¿Eres?) */
.toggle-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
}

.toggle-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.toggle-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-card__icon {
    color: var(--muted);
    display: inline-flex;
}

.toggle-card__label {
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
}

.toggle-card__check {
    margin-left: auto;
    color: var(--purple-600);
    opacity: 0;
    transition: opacity .15s ease;
}

.toggle-card:has(input:checked) {
    border-color: var(--purple-500);
    background: var(--purple-050);
}

.toggle-card:has(input:checked) .toggle-card__icon {
    color: var(--purple-600);
}

.toggle-card:has(input:checked) .toggle-card__check {
    opacity: 1;
}

.toggle-card:has(input:focus-visible) {
    outline: 2px solid var(--purple-400);
    outline-offset: 2px;
}

.field-counter {
    align-self: flex-end;
    font-size: .78rem;
    color: var(--muted);
}

/* Zona de adjuntos */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-align: center;
    padding: 1.3rem;
    border: 1.5px dashed var(--purple-200);
    border-radius: var(--radius-sm);
    background: var(--purple-050);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.dropzone:hover {
    border-color: var(--purple-400);
    background: #faf8ff;
}

.dropzone__icon {
    color: var(--purple-500);
}

.dropzone__text {
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
}

.dropzone__hint {
    font-size: .8rem;
    color: var(--muted);
}

/* Aviso de privacidad */
.modal__notice {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
}

.modal__notice-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.modal__notice p {
    margin: 0;
    font-size: .85rem;
    color: var(--body);
}

.modal__notice strong {
    color: var(--purple-700);
}

.modal__submit {
    width: 100%;
    justify-content: center;
    margin-top: .2rem;
}

/* 8b. Campos de formulario (compartidos con el modal) -------------------- */
.field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field label {
    font-family: var(--ff-head);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
}

.field__opt {
    color: var(--muted);
    font-weight: 400;
}

.field input,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--purple-050);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    transition: border-color .18s ease, background .18s ease;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--purple-400);
    background: #fff;
}

.field textarea {
    resize: vertical;
    min-height: 6rem;
}

/* 9b. Página Beneficiarios ----------------------------------------------- */
.page-hero {
    padding-top: clamp(1.5rem, 3vw, 2.4rem);
}

.page-hero__card {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(120deg, var(--purple-100), var(--purple-050));
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    overflow: hidden;
}

.page-hero__eyebrow {
    display: inline-block;
    font-family: var(--ff-head);
    font-weight: 600;
    color: var(--purple-600);
    margin-bottom: .4rem;
}

.page-hero__title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.page-hero__text {
    margin-top: 1rem;
    max-width: 46ch;
    color: var(--body);
    font-size: 1.05rem;
}

.page-hero__media {
    display: flex;
    justify-content: center;
}

.page-hero__media img {
    width: min(100%, 420px);
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(111, 45, 189, .18));
}

.categorias__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.2vw, 1.5rem);
}

.categoria {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    /* Tono más tenue: mezcla el color de la categoría con blanco */
    background: color-mix(in srgb, var(--tint, var(--surface)) 28%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, var(--purple-400)) 15%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.categoria:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--accent, var(--purple-600)) 22%, transparent);
}

.categoria__icon {
    width: 6.8rem;
    height: 6.8rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.categoria__icon img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

.categoria__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.categoria__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent, var(--purple-700));
    margin-bottom: .45rem;
}

.categoria__text {
    color: var(--body);
    font-size: .92rem;
    margin-bottom: 1.1rem;
}

.categoria__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--accent, var(--purple-400)) 30%, transparent);
    padding: .55rem 1.1rem;
    border-radius: var(--radius-pill);
    transition: background .18s ease, color .18s ease;
}

.categoria__more .icon {
    color: var(--accent, var(--purple-600));
    transition: transform .18s ease;
}

.categoria:hover .categoria__more {
    background: var(--accent, var(--purple-600));
    color: #fff;
}

.categoria:hover .categoria__more .icon {
    color: #fff;
    transform: translateX(3px);
}

/* 404 */
.error-page__inner {
    text-align: center;
    max-width: 520px;
    margin-inline: auto;
}

.error-page__code {
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: 1;
    color: var(--purple-600);
}

.error-page__title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    margin: .6rem 0 .8rem;
}

.error-page__text {
    color: var(--body);
    margin-bottom: 1.6rem;
}

/* 9c. Página Solicitar evaluación --------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.badge--soft {
    background: var(--purple-100);
    color: var(--purple-700);
}

.icon--flip {
    transform: scaleX(-1);
}

.eval-hero {
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.eval-section {
    padding-top: 0;
}

.eval-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* Encabezado numerado de cada paso */
.form-step {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: clamp(1.8rem, 3vw, 2.4rem) 0 1.1rem;
}

.form-step:first-child {
    margin-top: 0;
}

.form-step__num {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
    color: #fff;
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .9rem;
}

.form-step__title {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 700;
}

.form-step__hint {
    margin: -.4rem 0 1rem;
    color: var(--body);
    font-size: .92rem;
}

.eval-grid {
    display: grid;
    gap: 1rem;
}

.eval-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ¿Quién eres? */
.who-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .7rem;
}

.who-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.who-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.who-card__icon {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-050);
    color: var(--purple-600);
    margin-bottom: .35rem;
}

.who-card__title {
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
}

.who-card__text {
    font-size: .8rem;
    color: var(--muted);
}

.who-card:has(input:checked) {
    border-color: var(--purple-500);
    background: var(--purple-050);
}

.who-card:has(input:checked) .who-card__icon {
    background: var(--purple-600);
    color: #fff;
}

.who-card:has(input:focus-visible) {
    outline: 2px solid var(--purple-400);
    outline-offset: 2px;
}

/* ¿Qué tipo de ayuda buscas? */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .8rem;
}

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 2rem 1rem 1.3rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.svc-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.svc-card__radio {
    position: absolute;
    top: .9rem;
    left: .9rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid var(--purple-200);
    transition: border-color .18s ease;
}

.svc-card__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--purple-600);
    transform: scale(0);
    transition: transform .15s ease;
}

.svc-card__icon {
    color: var(--purple-600);
}

.svc-card__icon .icon {
    width: 1.7rem;
    height: 1.7rem;
}

.svc-card__title {
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
    color: var(--ink);
}

.svc-card__text {
    font-size: .8rem;
    color: var(--body);
    line-height: 1.4;
}

.svc-card__price {
    margin-top: auto;
    padding-top: .4rem;
    font-family: var(--ff-head);
    font-weight: 800;
    color: var(--purple-700);
}

.svc-card:hover {
    border-color: var(--purple-300, var(--purple-400));
    box-shadow: var(--shadow-sm);
}

.svc-card:has(input:checked) {
    border-color: var(--purple-500);
    background: var(--purple-050);
}

.svc-card:has(input:checked) .svc-card__radio {
    border-color: var(--purple-600);
}

.svc-card:has(input:checked) .svc-card__radio::after {
    transform: scale(1);
}

.svc-card:has(input:focus-visible) {
    outline: 2px solid var(--purple-400);
    outline-offset: 2px;
}

/* Nota informativa de precios */
.eval-note {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
}

.eval-note__icon {
    color: var(--purple-600);
    flex: none;
    margin-top: .1rem;
}

.eval-note p {
    margin: 0;
    font-size: .88rem;
    color: var(--body);
}

/* Aceptación */
.check-line {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .92rem;
    color: var(--body);
    cursor: pointer;
}

.check-line input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
    flex: none;
    accent-color: var(--purple-600);
}

.check-line a {
    color: var(--purple-600);
    font-weight: 600;
    text-decoration: underline;
}

/* Acciones */
.eval-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.6rem;
}

.eval-actions__back {
    flex: none;
}

.eval-actions__back:hover .icon {
    transform: scaleX(-1) translateX(3px);
}

.eval-actions__submit {
    flex: 1;
    justify-content: center;
}

.eval-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1.1rem 0 0;
    font-size: .85rem;
    color: var(--muted);
}

.eval-secure .icon {
    color: var(--purple-500);
}

/* Banda de cierre de la página */
.eval-closing {
    padding-block: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.eval-closing__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.8rem;
    overflow: hidden;
}

.eval-closing__icon {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.eval-closing__inner p {
    margin: 0;
    font-weight: 500;
    color: var(--purple-800);
}

.eval-closing__leaf {
    position: absolute;
    right: -10px;
    bottom: -18px;
    width: 6rem;
    height: auto;
    opacity: .5;
    pointer-events: none;
}

/* 9d. Página SUBEN Pro (Orientación profesional) ------------------------ */
/* Acento institucional teal para la marca "Pro" */
.text-teal {
    color: var(--teal-500);
}

/* Separación entre el hero y el formulario (página de evaluación) */
.eval-hero + .eval-section {
    padding-top: clamp(1.8rem, 4vw, 3rem);
}

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb {
    margin-bottom: clamp(1rem, 2.5vw, 1.8rem);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--muted);
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.breadcrumb li + li::before {
    content: "›";
    color: var(--muted);
}

.breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    transition: color .18s ease;
}

.breadcrumb a:hover {
    color: var(--purple-600);
}

.breadcrumb [aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

/* Hero -------------------------------------------------------------------- */
.pro-hero {
    padding-block: clamp(.8rem, 2vw, 1.6rem) clamp(1.2rem, 2.5vw, 2rem);
}

/* Ilustración más protagonista: la columna del media ocupa más ancho */
.pro-hero__inner {
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.pro-hero .hero__image {
    width: min(100%, 720px);
}

.pro-hero .hero__blob {
    width: min(100%, 680px);
}

.pro-hero__title {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.02;
}

.pro-hero__lead {
    margin-top: 1.1rem;
    max-width: 22ch;
    font-family: var(--ff-head);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.pro-hero__lead em {
    font-style: normal;
    color: var(--purple-600);
}

.pro-hero .hero__text {
    max-width: 52ch;
}

/* Tarjeta de confianza */
.pro-trust {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.8rem;
    padding: 1.1rem 1.3rem;
    background: var(--teal-050);
    border: 1px solid var(--teal-100);
    border-radius: var(--radius);
    max-width: 30rem;
}

.pro-trust__icon {
    flex: none;
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--teal-500);
}

.pro-trust__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pro-trust__title {
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
}

.pro-trust__text {
    font-size: .85rem;
    color: var(--body);
}

/* Grid "¿Qué necesitas hoy?" --------------------------------------------- */
/* Espaciado compacto entre secciones de la página Pro */
.pro-recursos,
.pro-cta {
    padding-block: clamp(1rem, 2.2vw, 1.8rem);
}

.pro-recursos .section__head {
    margin-bottom: clamp(1.2rem, 2.5vw, 1.9rem);
}

.pro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.1rem, 2.2vw, 1.8rem);
}

.pro-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.4rem, 2.5vw, 1.9rem);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pro-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.pro-card__num {
    position: absolute;
    top: 1.2rem;
    right: 1.3rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .8rem;
}

.pro-card__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-right: 2rem;
    margin-bottom: 1rem;
}

.pro-card__icon {
    flex: none;
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.pro-card__icon .icon {
    width: 1.6rem;
    height: 1.6rem;
}

.pro-card__title {
    font-family: var(--ff-head);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.pro-card__text {
    font-size: .92rem;
    color: var(--body);
    line-height: 1.55;
}

.pro-card__list {
    display: grid;
    gap: .65rem;
    margin: 1.1rem 0 1.5rem;
}

.pro-card__list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    color: var(--ink);
}

.pro-card__list .icon {
    flex: none;
}

/* CTA de tarjeta: ocupa el ancho y se ancla al fondo */
.pro-card__cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: .5rem;
    color: #fff;
}

.pro-card__cta:hover {
    filter: brightness(1.06);
}

/* Acentos por tarjeta ----------------------------------------------------- */
.pro-card--teal .pro-card__icon {
    background: var(--teal-050);
    color: var(--teal-500);
}

.pro-card--teal .pro-card__list .icon {
    color: var(--teal-500);
}

.pro-card--teal .pro-card__cta {
    background: var(--teal-500);
}

.pro-card--purple .pro-card__icon {
    background: var(--purple-100);
    color: var(--purple-600);
}

.pro-card--purple .pro-card__list .icon {
    color: var(--purple-600);
}

.pro-card--purple .pro-card__cta {
    background: var(--purple-600);
}

/* Banda CTA "¿No sabes por dónde empezar?" ------------------------------- */
.pro-cta__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 360px) 1fr minmax(0, 240px);
    gap: clamp(1.2rem, 2.5vw, 2.2rem);
    align-items: center;
    background: var(--purple-050);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.3rem, 2.8vw, 2.4rem);
}

.pro-cta__media {
    position: relative;
    display: grid;
    place-items: center;
}

.pro-cta__blob {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(100%, 340px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 45%, var(--purple-100), transparent 70%);
    border-radius: 42% 58% 57% 43% / 47% 42% 58% 53%;
}

.pro-cta__media img {
    position: relative;
    width: min(100%, 340px);
    height: auto;
}

.pro-cta__title {
    font-family: var(--ff-head);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--purple-700);
}

.pro-cta__text {
    margin-top: .7rem;
    max-width: 48ch;
    color: var(--body);
}

.pro-cta__action {
    margin-top: 1.4rem;
    gap: .5rem;
}

.pro-cta__note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-size: .85rem;
    color: var(--muted);
}

.pro-cta__aside {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .8rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.3rem;
}

.pro-cta__aside-icon {
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.pro-cta__aside p {
    margin: 0;
    font-size: .88rem;
    color: var(--body);
}

/* 9e. Página Recursos / formatos (/recursos) ----------------------------- */
/* Hero: contenido + ilustración + tarjeta de orientación */
.rec-hero {
    padding-block: clamp(.6rem, 1.5vw, 1.2rem) clamp(1rem, 2vw, 1.6rem);
}

.rec-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
}

.rec-hero__title {
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.rec-hero .hero__text {
    margin-top: 1rem;
    max-width: 42ch;
}

.rec-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin: 1.5rem 0;
}

.rec-hero__badges li {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: 6.6rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--body);
}

.rec-hero__badge-icon {
    width: 2.9rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--purple-600), var(--purple-500));
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(111, 45, 189, .45);
    transition: transform .18s, box-shadow .18s;
}

.rec-hero__badge-icon .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.rec-hero__badges li:hover .rec-hero__badge-icon {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(111, 45, 189, .55);
}

.rec-hero__media {
    position: relative;
    display: grid;
    place-items: center;
}

.rec-hero .hero__image {
    width: min(100%, 600px);
    transform: scaleX(-1);
}

.rec-hero .hero__blob {
    width: min(100%, 560px);
}

/* Espaciado compacto entre secciones de la página de recursos */
.rec-individuales,
.rec-pack,
.rec-ayuda,
.rec-garantias {
    padding-block: clamp(.9rem, 2vw, 1.6rem);
}

/* Título de sección con icono */
.rec-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    font-family: var(--ff-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
}

.rec-section-title__icon {
    display: inline-flex;
    color: var(--purple-600);
}

/* Recursos individuales (rejilla de productos placeholder) */
.rec-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(.8rem, 1.5vw, 1.2rem);
}

.rec-prod {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1rem 1.4rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.rec-prod:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.rec-prod__tag {
    align-self: flex-start;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--purple-600);
    background: var(--purple-100);
    border-radius: var(--radius-pill);
    padding: .3rem .6rem;
}

.rec-prod__mock {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: .6rem 0 1rem;
    display: grid;
    place-items: center;
}

.rec-prod__mock-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(74, 47, 150, .18));
    transition: transform .2s ease;
}

.rec-prod:hover .rec-prod__mock-img {
    transform: translateY(-3px);
}

.rec-prod__title {
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
}

.rec-prod__price {
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--purple-600);
    margin: .3rem 0 .9rem;
}

.rec-prod__cta {
    width: 100%;
    justify-content: center;
}

.rec-individuales__all {
    text-align: center;
    margin-top: 1.6rem;
}

.rec-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--purple-600);
    border: 1px solid var(--purple-200);
    border-radius: var(--radius-pill);
    padding: .6rem 1.2rem;
    transition: background .18s ease;
}

.rec-link:hover {
    background: var(--purple-050);
}

/* Pack destacado */
.rec-pack__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: center;
    background: linear-gradient(135deg, var(--purple-050), var(--purple-100));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3.5vw, 2.8rem);
}

.rec-pack__box {
    display: grid;
    place-items: center;
}

.rec-pack__box-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 36px rgba(74, 47, 150, .24));
}

.rec-pack__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--teal-600);
    background: var(--teal-050);
    border-radius: var(--radius-pill);
    padding: .35rem .8rem;
}

.rec-pack__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-head);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--purple-700);
    margin: .8rem 0 .5rem;
}

.rec-pack__crown {
    width: 1.6rem;
    height: 1.6rem;
    color: #e0a317;
}

.rec-pack__text {
    color: var(--body);
    max-width: 48ch;
}

.rec-pack__includes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.1rem;
    margin: 1.3rem 0;
}

.rec-pack__includes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 5rem;
    font-size: .72rem;
    text-align: center;
    color: var(--body);
}

.rec-pack__inc-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--purple-600);
}

.rec-pack__pricing {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
}

.rec-pack__price-old,
.rec-pack__price-now {
    display: flex;
    flex-direction: column;
}

.rec-pack__price-label {
    font-size: .72rem;
    color: var(--muted);
}

.rec-pack__price-old s {
    color: var(--muted);
    font-weight: 600;
}

.rec-pack__price-amount {
    font-family: var(--ff-head);
    font-size: 2rem;
    font-weight: 800;
    color: var(--purple-600);
    line-height: 1;
}

.rec-pack__price-save {
    margin-left: auto;
    align-self: stretch;
    display: grid;
    place-items: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--teal-600);
    background: var(--teal-050);
    border-radius: var(--radius-sm);
    padding: .5rem .9rem;
    text-align: center;
}

.rec-pack__cta {
    margin-top: 1.2rem;
    width: 100%;
    justify-content: center;
    gap: .5rem;
}

.rec-pack__perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.4rem;
    margin-top: 1rem;
}

.rec-pack__perks li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--body);
}

.rec-pack__perks .icon {
    color: var(--purple-600);
}

/* Banda "¿No sabes qué recurso elegir?" */
.rec-ayuda__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 250px) 1fr auto;
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: center;
    background: var(--purple-050);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1.4rem, 3vw, 2.4rem);
}

.rec-ayuda__media {
    position: relative;
    display: grid;
    place-items: end center;
    align-self: end;
}

.rec-ayuda__blob {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(100%, 250px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 45%, var(--purple-100), transparent 70%);
    border-radius: 42% 58% 57% 43% / 47% 42% 58% 53%;
}

.rec-ayuda__media img {
    position: relative;
    width: min(100%, 250px);
    height: auto;
}

.rec-ayuda__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-head);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 800;
    color: var(--purple-700);
}

.rec-ayuda__title .icon {
    color: var(--purple-600);
}

.rec-ayuda__text {
    margin-top: .5rem;
    color: var(--body);
}

.rec-ayuda__action {
    white-space: nowrap;
    gap: .5rem;
}

/* Tira de garantías */
.rec-garantias__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.rec-garantias__grid li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    color: var(--body);
}

.rec-garantias__icon {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

/* Responsive de la página de recursos */
@media (max-width: 980px) {
    .rec-hero__inner {
        grid-template-columns: 1fr 1fr;
    }

    .rec-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .rec-pack__panel {
        grid-template-columns: 1fr;
    }

    .rec-garantias__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .rec-hero__inner {
        grid-template-columns: 1fr;
    }

    .rec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rec-ayuda__panel {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .rec-ayuda__title {
        justify-content: center;
    }
}

/* 10. Animaciones -------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* 11. Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    .confianza__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem 1rem;
    }

    /* En 2 columnas los divisores verticales no encajan: los retiramos */
    .feature + .feature {
        border-left: 0;
    }

    .categorias__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sobre__grid {
        grid-template-columns: 1fr;
    }

    /* Hub Pro: 3 → 2 columnas y banda CTA apilada */
    .pro-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pro-cta__panel {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pro-cta__text {
        margin-inline: auto;
    }

    .pro-cta__note {
        justify-content: center;
    }

    .eval-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .who-grid,
    .svc-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .nataly__card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Card centrado: el icono del pilar también va centrado bajo su texto */
    .pillar__dot {
        margin-inline: auto;
    }

    .nataly__quote {
        text-align: left;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .nav-toggle {
        display: flex;
    }

    .site-nav {
        position: fixed;
        inset: 64px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        background: #fff;
        padding: 1.4rem clamp(1.1rem, 4vw, 2.5rem) 1.8rem;
        box-shadow: var(--shadow);
        transform: translateY(-130%);
        opacity: 0;
        pointer-events: none;
        transition: transform .28s ease, opacity .28s ease;
    }

    .site-nav.is-open {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
    }

    .site-nav__list a {
        padding: .7rem .8rem;
        border-radius: 10px;
        transition: background .18s, color .18s;
    }

    /* En el menú móvil diferenciamos con fondo en vez de subrayado */
    .site-nav__list a::after {
        display: none;
    }

    .site-nav__list a:hover,
    .site-nav__list a:focus-visible {
        background: var(--purple-050);
    }

    .site-nav__list a.is-active {
        background: var(--purple-100);
    }

    .site-nav__cta {
        width: 100%;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__content {
        order: 2;
    }

    .hero__media {
        order: 1;
    }

    .hero__rule {
        margin-inline: auto;
    }

    .hero__text {
        margin-inline: auto;
    }

    .page-hero__card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-hero__content {
        order: 2;
    }

    .page-hero__media {
        order: 1;
    }

    .page-hero__text {
        margin-inline: auto;
    }
}

/* Perfiles: 2 columnas en tablet, 1 columna recién en móvil/tablet pequeña */
@media (max-width: 720px) {
    .perfiles__grid {
        grid-template-columns: 1fr;
    }
}

/* En tablet 2-col las descripciones tienen distinto nº de líneas;
   reservamos un alto igual para que las listas/botones queden alineados. */
@media (min-width: 721px) and (max-width: 980px) {
    .perfil__text {
        min-height: 4.4em;
    }
}

@media (max-width: 560px) {
    .confianza__grid {
        grid-template-columns: 1fr;
    }

    .perfil__body {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .perfil__media {
        max-width: 200px;
        margin-inline: auto;
    }

    .perfil__list {
        text-align: left;
        max-width: 320px;
        margin-inline: auto;
    }

    .categorias__grid {
        grid-template-columns: 1fr;
    }

    .nataly__pillars {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .eval-grid--4,
    .svc-grid {
        grid-template-columns: 1fr;
    }

    .pro-grid {
        grid-template-columns: 1fr;
    }

    .who-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eval-actions {
        flex-direction: column;
    }

    /* Apilados: sin divisoria vertical */
    .pillar + .pillar {
        border-left: 0;
    }

    .site-footer__nav {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Informes y casos prácticos (/informes-y-casos-practicos)
   ══════════════════════════════════════════════════════════════════ */

/* Eyebrow "SUBEN Pro" sobre el título del hero */
.ic-hero__eyebrow {
    display: inline-block;
    font-family: var(--ff-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--purple-700);
    background: var(--purple-100);
    padding: .4rem .8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

/* La ilustración ya viene sin fondo y en su orientación correcta:
   anulamos el volteo horizontal que aplica .rec-hero. */
.ic-hero .hero__image {
    width: min(100%, 640px);
    transform: none;
}

/* Espaciado compacto entre secciones (reduce el exceso de .section) */
.ic-ayuda,
.ic-flujo,
.ic-precios {
    padding-block: clamp(1rem, 2.2vw, 1.7rem);
}

.ic-ayuda .section__head,
.ic-flujo .section__head,
.ic-precios .section__head {
    margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
}

/* ── "¿En qué te puedo ayudar?" — 4 tarjetas ──────────────────────── */
.ic-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

.ic-card {
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
    transition: transform .18s, box-shadow .18s;
}

.ic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(111, 45, 189, .55);
}

.ic-card__icon {
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
    margin-bottom: 1rem;
}

.ic-card__icon .icon {
    width: 1.7rem;
    height: 1.7rem;
}

.ic-card__title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: .6rem;
}

.ic-card__text {
    font-size: .9rem;
    color: var(--body);
    margin-bottom: 1rem;
}

.ic-card__list {
    display: grid;
    gap: .55rem;
}

.ic-card__list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .86rem;
    color: var(--body);
}

.ic-card__list .icon {
    flex: none;
    margin-top: .1rem;
    color: var(--purple-500);
}

/* ── "¿Cómo funciona?" — pasos ────────────────────────────────────── */
.ic-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    counter-reset: none;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ic-step {
    position: relative;
    text-align: center;
    padding: 0 .4rem;
}

/* Conector punteado entre pasos */
.ic-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.4rem;
    left: calc(50% + 2.8rem);
    width: calc(100% - 5.6rem);
    border-top: 2px dashed var(--purple-200);
}

.ic-step__icon {
    position: relative;
    width: 4.8rem;
    height: 4.8rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-050);
    border: 1.5px solid var(--purple-100);
    color: var(--purple-600);
}

.ic-step__icon .icon {
    width: 1.9rem;
    height: 1.9rem;
}

.ic-step__num {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-600);
    color: #fff;
    font-family: var(--ff-head);
    font-size: .8rem;
    font-weight: 700;
    box-shadow: 0 0 0 3px #fff;
}

.ic-step__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: .35rem;
}

.ic-step__text {
    font-size: .86rem;
    color: var(--body);
}

/* ── "Servicios y precios" — 3 tarjetas ───────────────────────────── */
.ic-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.ic-price {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--purple-100);
    border-top: 4px solid var(--purple-500);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
}

.ic-price--teal {
    border-top-color: var(--teal-500);
}

.ic-price__head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .9rem;
}

.ic-price__icon {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.ic-price--teal .ic-price__icon {
    background: var(--teal-100);
    color: var(--teal-600);
}

.ic-price__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.ic-price__text {
    font-size: .9rem;
    color: var(--body);
    margin-bottom: 1.2rem;
}

.ic-price__amount {
    margin-top: auto;
    margin-bottom: 1.1rem;
}

.ic-price__from {
    display: block;
    font-size: .82rem;
    color: var(--body);
    margin-bottom: .15rem;
}

.ic-price__value {
    display: block;
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--purple-600);
}

.ic-price--teal .ic-price__value {
    color: var(--teal-600);
}

.ic-price__cta {
    width: 100%;
    gap: .5rem;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
}

.ic-price__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(111, 45, 189, .6);
}

.ic-price--teal .ic-price__cta {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
}

.ic-price--teal .ic-price__cta:hover {
    box-shadow: 0 10px 22px -8px rgba(1, 125, 148, .55);
}

.ic-precios__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.6rem;
    font-size: .86rem;
    color: var(--body);
}

.ic-precios__note .icon {
    color: var(--purple-500);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .ic-cards { grid-template-columns: repeat(2, 1fr); }
    .ic-price-grid { grid-template-columns: 1fr; }
    .ic-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .ic-step:not(:last-child)::after { display: none; }
}

@media (max-width: 560px) {
    .ic-cards { grid-template-columns: 1fr; }
    .ic-steps { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Cursos y capacitaciones (/cursos-y-capacitaciones)
   ══════════════════════════════════════════════════════════════════ */

/* Sistema de acento por color (cada tarjeta define --c y --c-soft) */
.cc--purple { --c: var(--purple-600); --c-soft: var(--purple-100); }
.cc--teal   { --c: var(--teal-600);   --c-soft: var(--teal-100); }
.cc--pink   { --c: #c52d77;           --c-soft: #fbe0ee; }
.cc--amber  { --c: #c9780f;           --c-soft: #fcecc9; }

/* Espaciado compacto entre secciones */
.cc-principales,
.cc-beneficios,
.cc-talleres {
    padding-block: clamp(1rem, 2.2vw, 1.7rem);
}

.cc-principales .section__head {
    margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
}

.cc-principales__eyebrow {
    display: inline-block;
    font-family: var(--ff-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--purple-600);
    margin-bottom: .5rem;
}

/* ── "Nuestros cursos principales" — 4 tarjetas ───────────────────── */
.cc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
}

.cc-course {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
    transition: transform .18s, box-shadow .18s;
}

.cc-course:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(111, 45, 189, .55);
}

.cc-course__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.cc-course__icon {
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--c-soft);
    color: var(--c);
}

.cc-course__icon .icon { width: 1.7rem; height: 1.7rem; }

.cc-course__tag {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c);
    background: var(--c-soft);
    padding: .32rem .6rem;
    border-radius: 999px;
}

.cc-course__title {
    font-family: var(--ff-head);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
    min-height: 2.75em;
}

.cc-course__rule {
    display: block;
    width: 38px;
    height: 3px;
    border-radius: 2px;
    background: var(--c);
    margin: .7rem 0 1.1rem;
}

.cc-course__features {
    display: grid;
    gap: .7rem;
    margin-bottom: 1.3rem;
}

.cc-course__features li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    color: var(--ink);
}

.cc-course__features .icon { color: var(--c); flex: none; }

.cc-course__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 1rem;
}

.cc-course__from { font-size: .88rem; color: var(--body); }

.cc-course__price {
    font-family: var(--ff-head);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--c);
}

.cc-course__cta {
    width: 100%;
    justify-content: center;
    gap: .5rem;
    color: var(--c);
    background: #fff;
    border: 1.5px solid var(--c);
}

.cc-course__cta:hover { background: var(--c-soft); }

/* ── Tira de beneficios ───────────────────────────────────────────── */
.cc-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
}

.cc-feature {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.cc-feature:not(:last-child) {
    border-right: 1px dashed var(--purple-200);
    padding-right: 1.4rem;
}

.cc-feature__icon {
    width: 4.1rem;
    height: 4.1rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--purple-100);
    color: var(--purple-600);
}

.cc-feature__icon .icon {
    width: 2.3rem;
    height: 2.3rem;
}

.cc-feature__title {
    display: block;
    font-weight: 800;
    color: var(--ink);
    font-size: .98rem;
    margin-bottom: .2rem;
}

.cc-feature__text {
    display: block;
    font-size: .84rem;
    color: var(--body);
}

/* ── "Talleres y masterclass destacados" — 3 tarjetas ─────────────── */
.cc-talleres__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
}

.cc-taller-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
}

.cc-taller {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
    transition: transform .18s, box-shadow .18s;
}

.cc-taller:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(111, 45, 189, .55);
}

.cc-taller__media {
    position: relative;
    display: grid;
    place-items: center;
    height: 158px;
    background: var(--c-soft);
    overflow: hidden;
}

.cc-taller__img {
    max-height: 128px;
    max-width: 74%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .2s ease;
}

.cc-taller:hover .cc-taller__img { transform: scale(1.04); }

.cc-taller__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.3rem;
}

.cc-taller__title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: .5rem;
}

.cc-taller__text {
    font-size: .88rem;
    color: var(--body);
    margin-bottom: 1rem;
}

.cc-taller__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--body);
}

.cc-taller__duration {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.cc-taller__duration .icon {
    color: var(--c);
}

.cc-taller__price strong {
    font-family: var(--ff-head);
    font-size: 1.05rem;
    color: var(--c);
}

.cc-taller__cta {
    width: 100%;
    border-color: var(--c);
    color: var(--c);
}

.cc-taller__cta:hover {
    background: var(--c-soft);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .cc-grid { grid-template-columns: repeat(2, 1fr); }
    .cc-taller-grid { grid-template-columns: 1fr; }
    .cc-features { grid-template-columns: repeat(2, 1fr); }
    .cc-feature:nth-child(2n) { border-right: 0; padding-right: 0; }
}

@media (max-width: 560px) {
    .cc-grid { grid-template-columns: 1fr; }
    .cc-features { grid-template-columns: 1fr; }
    .cc-feature { border-right: 0 !important; padding-right: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Normativa y actualizaciones (/normativa-y-actualizaciones)
   ══════════════════════════════════════════════════════════════════ */

/* Espaciado compacto entre secciones */
.nm-biblioteca,
.nm-acceso,
.nm-temas {
    padding-block: clamp(1rem, 2.2vw, 1.7rem);
}

.nm-biblioteca .section__head,
.nm-temas .section__head {
    margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
}

/* ── Hero: callout de acceso exclusivo ────────────────────────────── */
.nm-lock {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.4rem;
    padding: 1rem 1.2rem;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    max-width: 30rem;
}

.nm-lock__icon {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--purple-600), var(--purple-500));
    color: #fff;
}

.nm-lock__text {
    font-size: .9rem;
    color: var(--body);
}

.nm-lock__text strong {
    color: var(--purple-700);
}

/* ── "¿Qué encontrarás?" — 4 tarjetas con acento ──────────────────── */
.nm-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
}

.nm-card {
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
    transition: transform .18s, box-shadow .18s;
}

.nm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(111, 45, 189, .55);
}

.nm-card__icon {
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-soft);
    color: var(--c);
    margin-bottom: 1rem;
}

.nm-card__icon .icon {
    width: 1.8rem;
    height: 1.8rem;
}

.nm-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: .6rem;
}

.nm-card__text {
    font-size: .9rem;
    color: var(--body);
    margin-bottom: 1rem;
}

.nm-card__list {
    display: grid;
    gap: .5rem;
}

.nm-card__list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .86rem;
    color: var(--body);
}

.nm-card__list .icon {
    flex: none;
    margin-top: .1rem;
    color: var(--c);
}

/* ── "¿Cómo puedes acceder?" — banda ──────────────────────────────── */
.nm-acceso__panel {
    display: grid;
    grid-template-columns: .8fr 2.2fr;
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: center;
    background: var(--purple-050);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.nm-acceso__media {
    display: grid;
    place-items: center;
}

.nm-acceso__img {
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px rgba(74, 47, 150, .2));
}

.nm-acceso__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--purple-700);
}

.nm-acceso__intro {
    font-size: .92rem;
    color: var(--body);
    margin: .5rem 0 1.2rem;
    max-width: 60ch;
}

.nm-acceso__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.nm-access-card {
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-btn);
    padding: 1.1rem;
}

.nm-access-card__icon {
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
    margin-bottom: .7rem;
}

.nm-access-card__title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: .4rem;
}

.nm-access-card__text {
    font-size: .85rem;
    color: var(--body);
    margin-bottom: .8rem;
}

.nm-access-card__link {
    font-size: .85rem;
}

.nm-acceso__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.2rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--purple-700);
}

.nm-acceso__note .icon {
    color: var(--purple-500);
}

/* ── "Algunos temas disponibles" — chips ──────────────────────────── */
.nm-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

.nm-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 8px 20px -18px rgba(111, 45, 189, .6);
}

.nm-chip__icon {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.nm-temas__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.3rem;
    font-size: .88rem;
    color: var(--body);
}

.nm-temas__note .icon {
    color: var(--purple-500);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .nm-cards { grid-template-columns: repeat(2, 1fr); }
    .nm-acceso__panel { grid-template-columns: 1fr; }
    .nm-acceso__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .nm-cards { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════
   Asesoría profesional personalizada (/asesoria-profesional-personalizada)
   ══════════════════════════════════════════════════════════════════ */

/* Rejillas de 5 (¿En qué puedo ayudarte? y ¿Cómo funciona?) */
.ic-cards--5 { grid-template-columns: repeat(5, 1fr); }
.ic-steps--5 { grid-template-columns: repeat(5, 1fr); }

/* Hero: tarjeta flotante sobre la ilustración */
.as-hero .rec-hero__media { position: relative; }

.as-hero__float {
    position: absolute;
    top: 4%;
    right: 0;
    z-index: 3;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .85rem .95rem;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.as-hero__float .icon { color: var(--purple-500); }

/* 4 badges en una sola fila (sin envolver): columnas flexibles */
.as-hero__badges {
    flex-wrap: nowrap;
    gap: .7rem;
    align-items: start;
}

.as-hero__badges li {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    font-size: .72rem;
}

.as-precios__heart { color: var(--purple-400); }

/* Modalidades y tarifas: 4 tarjetas con acento propio */
.as-price--purple { --acc: var(--purple-600); --acc-soft: var(--purple-100); }
.as-price--orange { --acc: #e07d2c; --acc-soft: #fdeada; }
.as-price--pink   { --acc: #d3448f; --acc-soft: #fbe3f0; }
.as-price--teal   { --acc: var(--teal-600); --acc-soft: var(--teal-100); }

.as-price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    align-items: stretch;
}

.as-price {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--purple-100);
    border-top: 4px solid var(--acc);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
    transition: transform .18s ease, box-shadow .18s ease;
}

.as-price:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.as-price__flag {
    position: absolute;
    top: -.7rem;
    right: 1.2rem;
    background: var(--acc);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
}

.as-price__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: 1rem;
}

.as-price__icon {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc);
}

.as-price__icon .icon { width: 1.5rem; height: 1.5rem; }

.as-price__badge {
    font-size: .66rem;
    font-weight: 700;
    color: var(--acc);
    background: var(--acc-soft);
    border-radius: var(--radius-pill);
    padding: .3rem .65rem;
    white-space: nowrap;
}

.as-price__title {
    font-family: var(--ff-head);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.as-price__text {
    margin: .5rem 0 .9rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--body);
}

.as-price__amount {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin-bottom: 1rem;
}

.as-price__value {
    font-family: var(--ff-head);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--acc);
}

.as-price__from {
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}

.as-price__list {
    display: grid;
    gap: .55rem;
    margin-bottom: 1.3rem;
}

.as-price__list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--ink);
}

.as-price__list .icon { color: var(--acc); flex: none; }

.as-price__cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    background: var(--acc);
}

.as-price__cta:hover { filter: brightness(1.06); }

/* Responsive */
@media (max-width: 980px) {
    .ic-cards--5 { grid-template-columns: repeat(3, 1fr); }
    .ic-steps--5 { grid-template-columns: repeat(3, 1fr); }
    .as-price-grid { grid-template-columns: repeat(2, 1fr); }
    .as-hero__float { display: none; }
}

@media (max-width: 560px) {
    .ic-cards--5 { grid-template-columns: 1fr; }
    .ic-steps--5 { grid-template-columns: 1fr; }
    .as-price-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Modalidades de orientación / SUBEN Orienta (/solicitar-evaluacion)
   ══════════════════════════════════════════════════════════════════ */

/* Acento por modalidad */
.se-mod--purple, .se--purple { --acc: var(--purple-600); --acc-soft: var(--purple-100); }
.se-mod--teal,   .se--teal   { --acc: var(--teal-600);   --acc-soft: var(--teal-100); }
.se-mod--pink,   .se--pink   { --acc: #d3448f;           --acc-soft: #fbe3f0; }

/* Landing: 3 tarjetas de modalidad */
.se-mod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.se-mod {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--acc);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem 1.6rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.se-mod:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.se-mod__media {
    width: 100%;
    aspect-ratio: 16 / 11;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--acc-soft);
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.se-mod__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .5rem;
    transition: transform .2s ease;
}

.se-mod:hover .se-mod__img { transform: scale(1.03); }

.se-mod__title {
    font-family: var(--ff-head);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
}

.se-mod__text {
    margin: .6rem 0 1.5rem;
    font-size: .95rem;
    color: var(--body);
}

.se-mod__cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    background: var(--acc);
}

.se-mod__cta:hover { filter: brightness(1.06); }

/* Nota de confidencialidad */
.se-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 660px;
    margin: 2rem auto 0;
    padding: 1.1rem 1.4rem;
    background: var(--purple-050);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.se-note__icon {
    width: 2.8rem;
    height: 2.8rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--purple-600);
}

.se-note__body { display: flex; flex-direction: column; }
.se-note__title { font-weight: 700; font-size: .95rem; color: var(--ink); }
.se-note__text { font-size: .86rem; color: var(--body); }

/* Página de detalle */
.se-detalle { padding-block: clamp(1rem, 2.5vw, 2rem); }

.se-dhero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    margin: clamp(.6rem, 1.5vw, 1.2rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}

.se-dhero__title {
    font-family: var(--ff-head);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--acc);
}

.se-dhero__text {
    margin-top: 1rem;
    max-width: 48ch;
    font-size: 1.05rem;
    color: var(--body);
}

.se-dhero__media { position: relative; display: grid; place-items: center; }
.se-dhero .hero__image { width: min(100%, 430px); }
.se-dhero .hero__blob {
    width: min(100%, 400px);
    background: radial-gradient(circle at 50% 45%, var(--acc-soft), transparent 68%);
}

/* Bloques de información */
.se-info {
    display: grid;
    grid-template-columns: 1fr 1fr .82fr;
    gap: 1.4rem;
    align-items: start;
    margin-bottom: 1.6rem;
}

.se-info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.se-info-card__title {
    font-family: var(--ff-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.se-info-list { display: grid; gap: .7rem; }

.se-info-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--ink);
}

.se-info-list .icon { color: var(--acc); flex: none; margin-top: .1rem; }

.se-modalidad {
    background: var(--acc-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.se-modalidad__title {
    font-family: var(--ff-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--acc);
    margin-bottom: .6rem;
}

.se-modalidad__value { font-size: .92rem; font-weight: 600; color: var(--ink); }

.se-modalidad__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    color: var(--acc);
}

.se-modalidad__meta-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.se-modalidad__meta-value {
    font-family: var(--ff-head);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ink);
    margin-top: .2rem;
}

/* Barra de inversión */
.se-precio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    background: var(--acc-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.8rem;
}

.se-precio__amount { display: flex; flex-direction: column; }
.se-precio__label { font-size: .85rem; font-weight: 600; color: var(--body); }
.se-precio__value {
    font-family: var(--ff-head);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--acc);
}

.se-precio__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.se-precio__btn { gap: .5rem; }
.se-precio__btn--primary { color: #fff; background: var(--acc); }
.se-precio__btn--primary:hover { filter: brightness(1.06); }
.se-precio__btn--wa { background: #fff; color: var(--acc); border: 1.5px solid var(--acc); }

.se-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.2rem;
    font-size: .86rem;
    color: var(--muted);
}

/* Responsive */
@media (max-width: 900px) {
    .se-mod-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
    .se-dhero { grid-template-columns: 1fr; }
    .se-info { grid-template-columns: 1fr; }
    .se-precio { flex-direction: column; align-items: stretch; text-align: center; }
    .se-precio__amount { align-items: center; }
    .se-precio__actions { justify-content: center; }
}

/* Modal de detalle de modalidad (SUBEN Orienta) */
dialog.modal.modal--modalidad { width: min(940px, calc(100% - 1.5rem)); }

/* Panel compacto para que quepa sin scroll */
.se-modal { padding: clamp(1.1rem, 2.2vw, 1.6rem); }

.se-modal__head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-right: 2.2rem;
    margin-bottom: 1rem;
}

.se-modal__icon {
    width: 2.7rem;
    height: 2.7rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc);
}

.se-modal__icon .icon { width: 1.4rem; height: 1.4rem; }

.se-modal__title {
    font-family: var(--ff-head);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--acc);
}

.se-modal__text { margin-top: .2rem; font-size: .9rem; line-height: 1.4; color: var(--body); }

.se-modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr .85fr;
    gap: 1.1rem;
    margin-bottom: 1rem;
}

.se-modal__col-title {
    font-family: var(--ff-head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .6rem;
}

.se-modal__aside { align-self: start; }
.se-modal__precio { margin-bottom: 0; }

/* Compactado de los bloques reutilizados dentro del modal */
.se-modal .se-info-list { gap: .45rem; }
.se-modal .se-info-list li { font-size: .84rem; line-height: 1.3; }
.se-modal .se-modalidad { padding: 1.1rem; }
.se-modal .se-modalidad__meta { margin-top: .7rem; }
.se-modal .se-modalidad__meta-value { font-size: 1.15rem; }
.se-modal .se-precio { padding: 1rem 1.3rem; }
.se-modal .se-precio__value { font-size: 2rem; }
.se-modal .se-secure { margin-top: .8rem; }

@media (max-width: 760px) {
    .se-modal__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Tesis e investigación (/tesis-e-investigacion)
   ══════════════════════════════════════════════════════════════════ */

/* "¿En qué puedo ayudarte?" — 5 tarjetas numeradas */
.te-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}

.te-card {
    position: relative;
    text-align: center;
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.7rem 1.2rem 1.5rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
    transition: transform .18s ease, box-shadow .18s ease;
}

.te-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.te-card__num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-600);
    color: #fff;
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .78rem;
}

.te-card__icon {
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.te-card__icon .icon { width: 1.6rem; height: 1.6rem; }

.te-card__title {
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.te-card__text { margin-top: .5rem; font-size: .85rem; line-height: 1.5; color: var(--body); }

/* "Modalidades y tarifas" — 4 tarifas por etapa */
.te-price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    align-items: stretch;
}

.te-price {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.4rem 1.5rem;
    box-shadow: 0 12px 30px -22px rgba(111, 45, 189, .5);
}

.te-price--featured {
    border: 2px solid var(--purple-500);
    box-shadow: var(--shadow);
}

.te-price__flag {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .35rem .8rem;
    border-radius: 999px;
}

.te-price__etapa {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-600);
    background: var(--purple-100);
    padding: .3rem .7rem;
    border-radius: 999px;
}

.te-price__icon {
    width: 3rem;
    height: 3rem;
    margin: 1rem auto .6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-600);
}

.te-price__title {
    font-family: var(--ff-head);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
}

.te-price__list {
    display: grid;
    gap: .55rem;
    width: 100%;
    margin: 1rem 0 1.2rem;
    text-align: left;
}

.te-price__list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
    color: var(--ink);
}

.te-price__list .icon { color: var(--purple-500); flex: none; margin-top: .1rem; }

.te-price__amount {
    margin-top: auto;
    margin-bottom: 1rem;
    font-family: var(--ff-head);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--purple-600);
}

.te-price__cta {
    width: 100%;
    justify-content: center;
    gap: .5rem;
    color: var(--purple-700);
    background: #fff;
    border: 1.5px solid var(--purple-200);
}

.te-price__cta:hover { background: var(--purple-050); }

.te-price--featured .te-price__cta {
    color: #fff;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-600));
    border-color: transparent;
}

/* Banda 1: ¿No sabes qué modalidad elegir? */
.te-help__panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    background: var(--purple-050);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.2rem, 2.5vw, 1.9rem);
}

.te-help__icon {
    width: 3.4rem;
    height: 3.4rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--purple-600);
}

.te-help__title {
    font-family: var(--ff-head);
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 800;
    color: var(--purple-700);
}

.te-help__text { margin-top: .3rem; font-size: .95rem; color: var(--body); }

.te-help__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.te-help__note {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--muted);
}

/* Banda 2: Cada tesis tiene desafíos */
.te-cierre__panel {
    display: grid;
    grid-template-columns: minmax(0, 170px) 1fr auto;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    background: var(--purple-050);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.4rem, 3vw, 2.2rem);
}

.te-cierre__media {
    position: relative;
    display: grid;
    place-items: end center;
    align-self: end;
}

.te-cierre__blob {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(100%, 160px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 45%, var(--purple-100), transparent 70%);
    border-radius: 42% 58% 57% 43% / 47% 42% 58% 53%;
}

.te-cierre__media img { position: relative; width: min(100%, 160px); height: auto; }

.te-cierre__title {
    font-family: var(--ff-head);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 800;
    color: var(--purple-700);
    line-height: 1.15;
}

.te-cierre__title .text-accent { display: block; }

.te-cierre__text { margin-top: .4rem; font-size: .95rem; color: var(--body); }

.te-cierre__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

/* Responsive */
@media (max-width: 980px) {
    .te-cards { grid-template-columns: repeat(3, 1fr); }
    .te-price-grid { grid-template-columns: repeat(2, 1fr); }
    .te-help__panel,
    .te-cierre__panel { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .te-help__cta,
    .te-cierre__cta { align-items: center; }
}

@media (max-width: 600px) {
    .te-cards { grid-template-columns: 1fr; }
    .te-price-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Modal de temario de curso (/cursos-y-capacitaciones)
   ══════════════════════════════════════════════════════════════════ */
dialog.modal.modal--curso { width: min(1120px, calc(100% - 1.5rem)); }

.cm { padding: clamp(1.2rem, 2.5vw, 2rem); }

.cm__grid {
    display: grid;
    grid-template-columns: 1.5fr .95fr;
    gap: clamp(1.2rem, 2.5vw, 2rem);
}

.cm__tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c);
    background: var(--c-soft);
    padding: .35rem .7rem;
    border-radius: 999px;
}

.cm__tag .icon { color: var(--c); }

.cm__title {
    font-family: var(--ff-head);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
    margin: .8rem 0 .5rem;
    padding-right: 2rem;
}

.cm__subtitle { color: var(--body); font-size: .98rem; max-width: 52ch; }

.cm__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.5rem;
    margin: 1.2rem 0;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

.cm__meta li { display: flex; align-items: center; gap: .5rem; }
.cm__meta .icon { color: var(--c); flex: none; }
.cm__meta li > span { display: flex; flex-direction: column; font-size: .78rem; color: var(--body); line-height: 1.25; }
.cm__meta strong { font-family: var(--ff-head); font-size: .9rem; color: var(--ink); }

.cm__temario-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.cm__temario-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-head);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c);
}

.cm__temario-title .icon { color: var(--c); }
.cm__temario-hint { font-size: .8rem; color: var(--muted); }

.cm__modules { display: grid; gap: .6rem; }

.cm__module {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.cm__module[open] { border-color: var(--c); }

.cm__module-head {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    cursor: pointer;
}

.cm__module-head::-webkit-details-marker { display: none; }

.cm__module-num {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: .82rem;
}

.cm__module-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-soft);
    color: var(--c);
}

.cm__module-title { flex: 1; font-size: .95rem; color: var(--ink); }
.cm__module-chevron { color: var(--muted); display: inline-flex; transition: transform .2s ease; }
.cm__module[open] .cm__module-chevron { transform: rotate(180deg); }

.cm__module-desc {
    margin: 0;
    padding: 0 1rem 1rem 4.5rem;
    font-size: .88rem;
    color: var(--body);
    line-height: 1.5;
}

.cm__metodologia {
    display: flex;
    gap: .9rem;
    margin-top: 1.2rem;
    padding: 1.1rem 1.2rem;
    background: var(--c-soft);
    border-radius: var(--radius);
}

.cm__metodologia-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--c);
}

.cm__metodologia-body { display: flex; flex-direction: column; gap: .2rem; }
.cm__metodologia-title { font-family: var(--ff-head); font-weight: 700; font-size: .95rem; color: var(--c); }
.cm__metodologia-text { font-size: .86rem; color: var(--body); line-height: 1.5; }

.cm__aside { display: flex; flex-direction: column; gap: 1.2rem; }

.cm__incluye {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
}

.cm__incluye-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-head);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c);
    margin-bottom: 1rem;
}

.cm__incluye-title .icon { color: var(--c); }
.cm__incluye-list { display: grid; gap: .9rem; }
.cm__incluye-list li { display: flex; gap: .7rem; align-items: flex-start; }

.cm__incluye-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: var(--c);
}

.cm__incluye-body { display: flex; flex-direction: column; }
.cm__incluye-name { font-family: var(--ff-head); font-weight: 700; font-size: .9rem; color: var(--ink); }
.cm__incluye-text { font-size: .82rem; color: var(--body); }

.cm__buy {
    text-align: center;
    background: var(--c-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.cm__buy-label {
    display: block;
    font-family: var(--ff-head);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c);
}

.cm__buy-price {
    display: block;
    font-family: var(--ff-head);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--c);
}

.cm__buy-secure {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--body);
    margin: .3rem 0 1rem;
}

.cm__buy-cta { width: 100%; justify-content: center; gap: .5rem; background: var(--c); color: #fff; }
.cm__buy-cta:hover { filter: brightness(1.06); }
.cm__buy-note { display: block; margin-top: .7rem; font-size: .78rem; color: var(--muted); }

@media (max-width: 860px) {
    .cm__grid { grid-template-columns: 1fr; }
    .cm__module-desc { padding-left: 1rem; }
}