/* =====================================================================
   Impulsate & Emprende · Yo Estoy Aquí — Sistema de diseño
   Identidad: aubergine + dorado, editorial y cálida.
   Tipos: Bricolage Grotesque (display) · Hanken Grotesk (cuerpo) ·
          Space Mono (datos/credenciales).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
    /* Color base — paleta editorial cálida 2026 */
    --ink: #1a0e1c;
    --ink-soft: #4d3a4f;
    --plum: #5e2a6e;
    --plum-deep: #3a1135;
    --plum-080: #6e3a7e;
    --magenta: #c81d77;
    --magenta-deep: #9b1259;
    --burdeo: #6e1023;
    --burdeo-2: #8c1d2e;
    --gold: #c9a227;
    --gold-soft: #e6c766;
    --gold-deep: #a8851c;
    --porcelain: #f7f0ea;
    --porcelain-2: #efe4da;
    --porcelain-3: #e6d7c9;
    --line: #e4d8cc;
    --white: #ffffff;
    --exito: #1f7a52;
    --error: #b4203a;

    /* Semántica */
    --bg: var(--porcelain);
    --superficie: var(--white);
    --texto: var(--ink);
    --texto-tenue: var(--ink-soft);
    --acento: var(--plum);
    --acento-2: var(--gold);
    --acento-marca: var(--magenta);

    /* Tipografía */
    --fuente-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    --fuente-cuerpo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fuente-mono: "Space Mono", ui-monospace, "Cascadia Code", monospace;

    /* Escala fluida */
    --paso--1: clamp(0.83rem, 0.78rem + 0.22vw, 0.94rem);
    --paso-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
    --paso-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --paso-2: clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
    --paso-3: clamp(1.75rem, 1.45rem + 1.5vw, 2.7rem);
    --paso-4: clamp(2.1rem, 1.6rem + 2.5vw, 3.6rem);
    --paso-5: clamp(2.6rem, 1.85rem + 3.75vw, 4.9rem);

    /* Espaciado / forma */
    --contenedor: 1180px;
    --radio: 4px;
    --radio-lg: 10px;
    --radio-xl: 22px;
    --sombra: 0 1px 2px rgba(58, 17, 53, 0.05), 0 10px 30px -14px rgba(90, 20, 80, 0.22);
    --sombra-alta: 0 26px 64px -26px rgba(58, 17, 53, 0.5);
    --sombra-color: 0 18px 44px -16px color-mix(in srgb, var(--acento) 55%, transparent);
    --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Color de marca por defecto (lo sobreescriben las clases de marca) */
    --marca: var(--plum);
    --marca-deep: var(--plum-deep);
}

/* ---------------------------------------------------------------------
   2. Reset / base
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-cuerpo);
    font-size: var(--paso-0);
    line-height: 1.62;
    color: var(--texto);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.18em;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

:focus-visible {
    /* Doble capa para contraste suficiente sobre fondos claros Y oscuros:
       contorno oscuro (visible en claro) + halo dorado (visible en oscuro). */
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 80%, transparent);
    border-radius: 3px;
}

::selection {
    background: var(--gold);
    color: var(--ink);
}

/* ---------------------------------------------------------------------
   3. Utilidades de layout
   --------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--contenedor);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.contenedor--angosto {
    max-width: 760px;
}

.seccion {
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

.seccion--ajustada {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radio);
    z-index: 200;
}
.salto-contenido:focus {
    left: 1rem;
    top: 1rem;
}

/* Eyebrow / etiqueta en mono — firma tipográfica del sitio */
.eyebrow {
    font-family: var(--fuente-mono);
    font-size: var(--paso--1);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--magenta);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}
.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.titulo-seccion {
    font-size: var(--paso-3);
    max-width: 18ch;
}

.plomo {
    font-size: var(--paso-1);
    color: var(--texto-tenue);
    max-width: 56ch;
}

/* ---------------------------------------------------------------------
   4. Botones
   --------------------------------------------------------------------- */
.boton {
    --boton-bg: var(--plum);
    --boton-texto: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: var(--paso-0);
    line-height: 1;
    padding: 0.95em 1.6em;
    border: 1.5px solid var(--boton-bg);
    border-radius: 100px;
    background: var(--boton-bg);
    color: var(--boton-texto);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transicion), background-color var(--transicion),
        border-color var(--transicion), box-shadow var(--transicion);
}
.boton:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--boton-bg) 70%, transparent);
}
.boton:active {
    transform: translateY(0);
}

.boton--oro {
    --boton-bg: var(--gold);
    --boton-texto: var(--ink);
    border-color: var(--gold);
}
.boton--fantasma {
    --boton-bg: transparent;
    --boton-texto: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 25%, transparent);
}
.boton--fantasma:hover {
    border-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.boton--claro {
    --boton-bg: var(--white);
    --boton-texto: var(--plum-deep);
}
.boton--grande {
    font-size: var(--paso-1);
    padding: 1.05em 1.9em;
}
.boton .icono {
    width: 1.15em;
    height: 1.15em;
}

/* ---------------------------------------------------------------------
   5. Encabezado / navegación
   --------------------------------------------------------------------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--porcelain) 86%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transicion), background-color var(--transicion);
}
.cabecera.esta-fija {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--porcelain) 94%, transparent);
}
.cabecera__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 76px;
}
.cabecera__marca {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--fuente-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.05rem;
}
.cabecera__monograma {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--plum), var(--magenta));
    color: var(--gold);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.nav {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 2rem);
}
.nav__lista {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.8vw, 1.9rem);
    list-style: none;
    padding: 0;
}
.nav__enlace {
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ink);
    padding: 0.4rem 0;
    position: relative;
}
.nav__enlace::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width var(--transicion);
}
.nav__enlace:hover::after,
.nav__enlace[aria-current="page"]::after {
    width: 100%;
}
.nav__enlace[aria-current="page"] {
    font-weight: 700; /* refuerzo no cromático del estado activo (WCAG 1.4.1) */
}
.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    position: relative;
    transition: transform var(--transicion), opacity var(--transicion);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }

/* ---------------------------------------------------------------------
   6. Hero — la firma: dualidad de marcas + arco de impulso
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--magenta) 16%, transparent), transparent 55%),
        radial-gradient(90% 70% at 5% 110%, color-mix(in srgb, var(--plum) 14%, transparent), transparent 50%),
        var(--porcelain);
    overflow: hidden;
}
.hero__arco {
    position: absolute;
    inset: auto -10% -55% -10%;
    height: 80%;
    border-radius: 50% 50% 0 0;
    border-top: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
    pointer-events: none;
    opacity: 0.5;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero__titulo {
    font-size: var(--paso-5);
    margin-block: 0.5rem 1.4rem;
}
.hero__titulo .resalte {
    color: var(--plum);
    position: relative;
    white-space: nowrap;
}
.hero__titulo .resalte--magenta { color: var(--magenta); }
.hero__plomo {
    font-size: var(--paso-1);
    color: var(--texto-tenue);
    max-width: 44ch;
}
.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.1rem;
}
.hero__dato {
    margin-top: 2.4rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.hero__dato-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hero__dato-num {
    font-family: var(--fuente-display);
    font-size: var(--paso-2);
    font-weight: 700;
    color: var(--plum);
}
.hero__dato-etq {
    font-family: var(--fuente-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

/* Puertas de marca (los 2 logos como acceso) */
.puertas {
    display: grid;
    gap: 1.1rem;
}
.puerta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.6rem 1.6rem 1.4rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radio-xl);
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--sombra);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
    overflow: hidden;
}
.puerta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--marca);
}
.puerta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alta);
    border-color: color-mix(in srgb, var(--marca) 40%, var(--line));
}
.puerta__logo {
    height: 46px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}
.puerta__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.puerta__lema {
    font-size: var(--paso--1);
    color: var(--texto-tenue);
}
.puerta__flecha {
    font-family: var(--fuente-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--marca);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   7. Franja de certificaciones
   --------------------------------------------------------------------- */
.sellos {
    border-block: 1px solid var(--line);
    background: var(--porcelain-2);
}
.sellos__inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 1.8rem;
}
.sellos__rotulo {
    font-family: var(--fuente-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    max-width: 11ch;
    line-height: 1.4;
}
.sellos__lista {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    flex-wrap: wrap;
    justify-content: center;
}
.sello img {
    height: clamp(34px, 6vw, 50px);
    width: auto;
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter var(--transicion), opacity var(--transicion);
}
.sello:hover img,
.sello:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
}

/* ---------------------------------------------------------------------
   8. Galería de cursos
   --------------------------------------------------------------------- */
.grupo-marca + .grupo-marca {
    margin-top: clamp(3rem, 6vw, 5rem);
}
.grupo-marca__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.grupo-marca__id {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.grupo-marca__logo {
    height: 40px;
    width: auto;
}
.grupo-marca__txt h3 {
    font-size: var(--paso-2);
}
.grupo-marca__txt p {
    font-size: var(--paso--1);
    color: var(--texto-tenue);
}

.rejilla-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: clamp(1.1rem, 2.5vw, 1.8rem);
}

/* Tarjeta de curso (parcial reutilizable) */
.tarjeta-curso {
    --marca: var(--plum);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--line);
    border-radius: var(--radio-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--sombra);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta-curso--impulsate { --marca: var(--plum); --marca-deep: var(--plum-deep); }
.tarjeta-curso--yo-estoy-aqui { --marca: var(--magenta); --marca-deep: var(--magenta-deep); }

/* Utilidades de color por marca (puertas, encabezados de grupo) */
.marca-impulsate { --marca: var(--plum); --marca-deep: var(--plum-deep); }
.marca-yo-estoy-aqui { --marca: var(--magenta); --marca-deep: var(--magenta-deep); }
.tarjeta-curso:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-alta);
    border-color: color-mix(in srgb, var(--marca) 35%, var(--line));
}
.tarjeta-curso__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(130% 120% at 100% 0, color-mix(in srgb, var(--marca) 38%, transparent), transparent 60%),
        linear-gradient(150deg, var(--marca), var(--marca-deep, var(--plum-deep)));
    display: grid;
    place-items: center;
    overflow: hidden;
}
.tarjeta-curso__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tarjeta-curso__media-marca {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: 2.6rem;
    color: rgba(255, 255, 255, 0.16);
    letter-spacing: -0.04em;
    user-select: none;
}
.tarjeta-curso__chip {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--white);
    border-radius: 100px;
    padding: 0.32rem 0.7rem 0.32rem 0.4rem;
    box-shadow: 0 4px 12px -6px rgba(36, 16, 35, 0.4);
    z-index: 2;
}
.tarjeta-curso__chip img {
    height: 18px;
    width: auto;
}
.tarjeta-curso__chip span {
    font-family: var(--fuente-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.tarjeta-curso__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.2rem 1.25rem 1.35rem;
    flex: 1;
}
.tarjeta-curso__categoria {
    font-family: var(--fuente-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--marca);
}
.tarjeta-curso__titulo {
    font-size: var(--paso-1);
    line-height: 1.12;
}
.tarjeta-curso__resumen {
    font-size: var(--paso--1);
    color: var(--texto-tenue);
    flex: 1;
}
.tarjeta-curso__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 0.7rem;
    margin-top: 0.3rem;
    border-top: 1px dashed var(--line);
    font-family: var(--fuente-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.tarjeta-curso__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.tarjeta-curso__cta {
    margin-top: 0.4rem;
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: var(--paso--1);
    color: var(--marca);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    transition: gap var(--transicion);
}
.tarjeta-curso:hover .tarjeta-curso__cta {
    gap: 0.75em;
}

/* ---------------------------------------------------------------------
   9. Banda CTA
   --------------------------------------------------------------------- */
.cta-banda {
    position: relative;
    background: linear-gradient(135deg, var(--plum-deep), var(--plum) 55%, var(--magenta));
    color: var(--white);
    border-radius: var(--radio-xl);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    overflow: hidden;
    isolation: isolate;
}
.cta-banda::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent);
    opacity: 0.5;
    z-index: -1;
}
.cta-banda h2 {
    color: var(--white);
    font-size: var(--paso-3);
    max-width: 20ch;
}
.cta-banda p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 48ch;
    margin-top: 0.9rem;
}
.cta-banda__acciones {
    margin-top: 2rem;
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.cta-banda .eyebrow {
    color: var(--gold);
}

.grupo-marca__intro {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    max-width: 30ch;
}

/* ---------------------------------------------------------------------
   10. Pie de página
   --------------------------------------------------------------------- */
.pie {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.72);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.pie a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pie a:hover { color: var(--gold); }
.pie__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
}
.pie__lema {
    font-family: var(--fuente-display);
    font-size: var(--paso-1);
    color: var(--white);
    max-width: 30ch;
    line-height: 1.25;
}
.pie__col h4 {
    color: var(--white);
    font-family: var(--fuente-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    font-weight: 400;
}
.pie__lista {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: var(--paso--1);
}
.pie__direccion {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.pie__direccion .icono { color: var(--gold); flex-shrink: 0; margin-top: 0.2rem; }
.pie__redes {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.1rem;
}
.pie__red {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    display: grid;
    place-items: center;
    transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.pie__red:hover {
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    border-color: var(--gold);
    transform: translateY(-2px);
}
.pie__barra {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}
.pie__creditos a { color: rgba(255, 255, 255, 0.78); }

/* ---------------------------------------------------------------------
   11. WhatsApp flotante
   --------------------------------------------------------------------- */
.wsp {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: #25d366;
    color: #0b3d24;
    padding: 0.85rem 1.1rem;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--fuente-display);
    box-shadow: 0 14px 30px -10px rgba(11, 61, 36, 0.5);
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.wsp:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 38px -12px rgba(11, 61, 36, 0.6);
}
.wsp__icono { width: 26px; height: 26px; }
.wsp__txt { font-size: 0.92rem; }

/* ---------------------------------------------------------------------
   12. Banner de cookies
   --------------------------------------------------------------------- */
.cookies {
    position: fixed;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    max-width: 440px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-alta);
    padding: 1.3rem 1.4rem;
    z-index: 95;
    font-size: var(--paso--1);
}
.cookies[hidden] { display: none; }
.cookies p { color: var(--texto-tenue); }
.cookies__acciones {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   13. Formularios
   --------------------------------------------------------------------- */
.campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}
.campo label {
    font-weight: 600;
    font-size: var(--paso--1);
}
.campo .requerido { color: var(--magenta); }
.campo input,
.campo textarea,
.campo select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radio-lg);
    background: var(--white);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    outline: none;
    border-color: var(--plum);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--plum) 18%, transparent);
}
.campo--error input,
.campo--error textarea {
    border-color: var(--error);
}
.campo__error {
    color: var(--error);
    font-size: var(--paso--1);
}
.campo--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7rem;
}
.campo--check input {
    width: auto;
    margin-top: 0.25rem;
    accent-color: var(--plum);
}
.campo--check label {
    font-weight: 400;
    color: var(--texto-tenue);
}
.trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.alerta {
    padding: 1rem 1.2rem;
    border-radius: var(--radio-lg);
    margin-bottom: 1.5rem;
    font-size: var(--paso--1);
}
.alerta--exito {
    background: color-mix(in srgb, var(--exito) 14%, var(--white));
    border: 1px solid color-mix(in srgb, var(--exito) 40%, transparent);
    color: var(--exito);
}
.alerta--error {
    background: color-mix(in srgb, var(--error) 12%, var(--white));
    border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
    color: var(--error);
}

/* ---------------------------------------------------------------------
   14. Contenido tipográfico (legales, detalle)
   --------------------------------------------------------------------- */
.prosa > * + * { margin-top: 1.1rem; }
.prosa h2 { font-size: var(--paso-2); margin-top: 2.5rem; }
.prosa h3 { font-size: var(--paso-1); margin-top: 1.8rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li + li { margin-top: 0.4rem; }
.prosa a { color: var(--plum); }

.acciones-fila {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ---------------------------------------------------------------------
   15. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
    .pie__grid { grid-template-columns: 1fr 1fr; }
    .pie__lema-col { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .nav__toggle { display: inline-flex; }
    .nav__lista {
        position: fixed;
        inset: 76px 0 auto 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        padding: 0.5rem clamp(1.1rem, 4vw, 2.5rem) 1.5rem;
        transform: translateY(-120%);
        visibility: hidden; /* fuera del orden de tabulación cuando está cerrado */
        transition: transform var(--transicion), visibility var(--transicion);
        box-shadow: var(--sombra);
    }
    .nav[data-abierto="true"] .nav__lista { transform: translateY(0); visibility: visible; }
    .nav__lista li { width: 100%; border-bottom: 1px solid var(--line); }
    .nav__enlace { display: block; padding: 0.95rem 0; width: 100%; }
    .nav__cta { margin-top: 1rem; }
    .pie__grid { grid-template-columns: 1fr; }
    .wsp__txt { display: none; }
    .wsp { padding: 0.9rem; }
    /* Cuando el aviso de cookies está visible, subir el FAB para no solaparlo. */
    body.hay-cookies .wsp { bottom: calc(clamp(1rem, 3vw, 2rem) + 8.5rem); }
}

/* ---------------------------------------------------------------------
   Ficha de curso
   --------------------------------------------------------------------- */
.ficha {
    --marca: var(--plum);
    --marca-deep: var(--plum-deep);
    padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(3rem, 7vw, 5.5rem);
}

/* Migas de pan */
.migas {
    margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

/* ---------------------------------------------------------------------
   Página de contacto
   --------------------------------------------------------------------- */
.contacto__intro {
    max-width: 52ch;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}
.contacto__intro .plomo {
    margin-top: 1rem;
}

.contacto__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.contacto__formulario {
    background: var(--superficie);
    border: 1px solid var(--line);
    border-radius: var(--radio-xl);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow: var(--sombra);
}

/* Aviso de curso preseleccionado */
.contacto__aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    background: color-mix(in srgb, var(--plum) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
    border-radius: var(--radio-lg);
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
}
.contacto__aviso-etq {
    font-family: var(--fuente-mono);
    font-size: var(--paso--1);
    letter-spacing: 0.05em;
    color: var(--texto-tenue);
}
.contacto__aviso-curso {
    color: var(--plum);
    font-size: var(--paso-0);
}

/* Error de consentimiento mostrado como bloque (fuera del flex del checkbox) */
.campo__error--bloque {
    display: block;
    margin: -0.6rem 0 1.2rem;
}

.contacto__acciones {
    margin-top: 0.5rem;
}
.contacto__acciones .boton {
    width: 100%;
    justify-content: center;
}

/* Columna lateral con datos directos */
.contacto__lateral {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
}
.contacto__tarjeta {
    background: var(--plum);
    color: var(--white);
    border-radius: var(--radio-xl);
    padding: clamp(1.4rem, 3.5vw, 2rem);
}
.contacto__tarjeta + .contacto__tarjeta {
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--line);
}
.contacto__tarjeta-titulo {
    font-size: var(--paso-1);
    color: inherit;
}
.contacto__tarjeta-texto {
    margin-top: 0.6rem;
    color: color-mix(in srgb, currentColor 80%, transparent);
    font-size: var(--paso--1);
}

.contacto__canales,
.contacto__sedes {
    list-style: none;
    padding: 0;
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contacto__canal,
.contacto__sede {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}
.contacto__canal-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 16%, transparent);
}
.contacto__canal-texto {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.contacto__canal-etq {
    font-family: var(--fuente-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}
.contacto__canal-enlace {
    font-weight: 600;
    word-break: break-word;
}
.contacto__sede {
    font-size: var(--paso--1);
    line-height: 1.4;
}

@media (max-width: 860px) {
    .contacto__grid {
        grid-template-columns: 1fr;
    }
}
.migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    font-family: var(--fuente-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--texto-tenue);
}
.migas__item a {
    color: var(--texto-tenue);
    text-decoration: none;
    transition: color var(--transicion);
}
.migas__item a:hover {
    color: var(--marca);
}
.migas__sep {
    color: var(--line);
}
.migas__item--actual {
    color: var(--ink);
    max-width: 38ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Encabezado editorial */
.ficha__encabezado {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 30ch;
    margin-bottom: clamp(2rem, 5vw, 3.2rem);
}
.ficha__titulo {
    font-size: var(--paso-4);
}
.ficha__resumen {
    font-size: var(--paso-1);
    color: var(--texto-tenue);
    max-width: 52ch;
}

/* Cuerpo a dos columnas */
.ficha__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.ficha__principal {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 2.8rem);
}
.ficha__bloque h2 {
    font-size: var(--paso-2);
    margin-bottom: 1rem;
}
.ficha__bloque p {
    color: var(--texto-tenue);
}

/* Barra lateral con metadatos en mono */
.ficha__lateral {
    position: sticky;
    top: 100px;
}
.ficha-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--superficie);
    border: 1px solid var(--line);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra);
    padding: clamp(1.4rem, 3vw, 1.9rem);
    overflow: hidden;
    position: relative;
}
.ficha-tarjeta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--marca);
}
.ficha-tarjeta__marca img {
    height: 36px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}
.ficha-tarjeta__datos {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}
.ficha-dato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
    border-top: 1px dashed var(--line);
}
.ficha-dato:first-child {
    border-top: 0;
    padding-top: 0;
}
.ficha-dato dt {
    font-family: var(--fuente-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}
.ficha-dato dd {
    margin: 0;
    font-family: var(--fuente-mono);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
}
.ficha-tarjeta__acciones {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.ficha-tarjeta__acciones .boton {
    width: 100%;
}
.ficha-tarjeta__nota {
    font-size: var(--paso--1);
    color: var(--texto-tenue);
    text-align: center;
}

/* Sección de cursos relacionados */
.ficha-relacionados {
    border-top: 1px solid var(--line);
    background: var(--porcelain-2);
}
.ficha-relacionados__intro {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
    max-width: 30ch;
}

@media (max-width: 880px) {
    .ficha__cuerpo {
        grid-template-columns: 1fr;
    }
    .ficha__lateral {
        position: static;
    }
}

/* ---------------------------------------------------------------------
   16. Movimiento reducido
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------------------------------------------------------
   Página de marca
   El color de acento --marca lo aporta la clase utilitaria marca-<slug>.
   --------------------------------------------------------------------- */
.hero-marca {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--marca) 18%, transparent), transparent 55%),
        radial-gradient(90% 70% at 5% 110%, color-mix(in srgb, var(--marca-deep) 16%, transparent), transparent 50%),
        var(--porcelain);
}
.hero-marca__arco {
    position: absolute;
    inset: auto -10% -55% -10%;
    height: 80%;
    border-radius: 50% 50% 0 0;
    border-top: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
    pointer-events: none;
    opacity: 0.5;
}
.hero-marca__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    max-width: 60ch;
    padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero-marca__logo {
    height: auto;
    width: clamp(180px, 30vw, 240px);
    margin-bottom: 0.4rem;
}
.hero-marca__eyebrow {
    color: var(--marca);
}
.hero-marca__titulo {
    font-size: var(--paso-5);
    color: var(--marca-deep);
}
.hero-marca__lema {
    font-size: var(--paso-2);
    font-family: var(--fuente-display);
    font-weight: 600;
    color: var(--marca);
    max-width: 30ch;
}
.hero-marca__plomo {
    font-size: var(--paso-1);
    color: var(--texto-tenue);
    max-width: 52ch;
}
.hero-marca__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.2rem;
}

/* Estado vacío amable (cuando la marca aún no tiene cursos publicados) */
.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
    max-width: 56ch;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.2rem, 4vw, 2.5rem);
    background: var(--superficie);
    border: 1px solid var(--line);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra);
}
.estado-vacio__titulo {
    font-size: var(--paso-2);
    color: var(--marca-deep);
}
.estado-vacio__texto {
    color: var(--texto-tenue);
    margin-bottom: 0.4rem;
}