/* =========================================================================
   HospediaPro — Secciones
   Estilos para header, hero, footer y secciones de la home.
   Crece por fases: Fase 2 (Header + Hero + Footer), Fase 3 (Stats + CTA),
   Fase 4 (Cursos), Fase 5 (Temas).
   ========================================================================= */

/* =========================================================================
   1. Botones reutilizables
   ========================================================================= */
.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 600;
    font-size: var(--hp-fs-base);
    text-decoration: none;
    transition: transform var(--hp-trans-fast),
                background var(--hp-trans-fast),
                box-shadow var(--hp-trans-fast),
                color var(--hp-trans-fast);
    cursor: pointer;
    border: 0;
    line-height: 1;
    white-space: nowrap;
}

.hp-btn:hover,
.hp-btn:focus-visible {
    text-decoration: none;
    transform: translateY(-1px);
}

.hp-btn--primary {
    background: var(--hp-color-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.hp-btn--primary:hover,
.hp-btn--primary:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.hp-btn--ghost {
    background: transparent;
    color: var(--hp-color-text);
    border: 1px solid var(--hp-color-border);
}

.hp-btn--ghost:hover,
.hp-btn--ghost:focus-visible {
    background: var(--hp-color-bg);
    border-color: var(--hp-color-primary);
    color: var(--hp-color-primary);
}

/* =========================================================================
   2. Top Bar
   ========================================================================= */
.hp-topbar {
    background: #0f172a;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--hp-fs-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hp-topbar__inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0.5rem var(--hp-container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
}

.hp-topbar__menu {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.hp-topbar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
}

.hp-topbar__list a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--hp-trans-fast);
    display: inline-block;
    padding: 0.25rem 0;
}

.hp-topbar__list a:hover,
.hp-topbar__list a:focus-visible {
    color: #fff;
    text-decoration: none;
}

.hp-topbar__auth {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
    align-items: center;
}

.hp-topbar__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--hp-trans-fast);
}

.hp-topbar__link:hover,
.hp-topbar__link:focus-visible {
    color: #fff;
    text-decoration: none;
}

.hp-topbar__link--register {
    padding: 0.25rem 0.75rem;
    background: var(--hp-color-primary);
    border-radius: var(--hp-radius-sm);
    color: #fff;
}

.hp-topbar__link--register:hover,
.hp-topbar__link--register:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
}

/* Scroll horizontal táctil solo en mobile */
@media (max-width: 768px) {
    .hp-topbar__inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hp-topbar__inner::-webkit-scrollbar {
        display: none;
    }

    .hp-topbar__list {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .hp-topbar__auth {
        white-space: nowrap;
    }
}

/* =========================================================================
   3. Header principal
   ========================================================================= */

/* Reset de los estilos heredados de main.css */
.hp-header {
    padding: 0;
    border-bottom: 1px solid var(--hp-color-border);
    background: var(--hp-color-bg);
    transition: box-shadow var(--hp-trans-base),
                background var(--hp-trans-base);
    position: relative;  /* Crea contexto de apilamiento para el menú absoluto */
    z-index: 200;        /* Por encima del Hero y cualquier sección de la home */
    display: block;
}

.hp-header__inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 1rem var(--hp-container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.hp-header__branding .custom-logo {
    /* El tamaño real lo inyecta hospediapro_logo_inline_css() en <head>.
       Aquí solo garantizamos el fallback base y el comportamiento flex. */
    display: block;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.hp-header__site-title {
    font-family: var(--hp-font-heading);
    font-weight: 800;
    font-size: var(--hp-fs-xl);
    color: var(--hp-color-text);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.hp-header__site-title:hover,
.hp-header__site-title:focus-visible {
    color: var(--hp-color-primary);
    text-decoration: none;
}

/* Sticky behavior */
.hp-header--sticky {
    position: sticky;
    top: 0;
    z-index: 200;
}

.hp-header--sticky.is-sticky {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
}

/* Navegación */
.hp-header__nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hp-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.hp-header__menu li {
    position: relative;
}

.hp-header__menu a {
    color: var(--hp-color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--hp-fs-base);
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color var(--hp-trans-fast);
}

.hp-header__menu a:hover,
.hp-header__menu a:focus-visible {
    color: var(--hp-color-primary);
    text-decoration: none;
}

.menu-chevron {
    font-size: 0.7em;
    transition: transform var(--hp-trans-fast);
}

.hp-header__menu li:hover > a .menu-chevron {
    transform: rotate(180deg);
}

/* Submenús (dropdowns multinivel) */
.hp-header__menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    box-shadow: var(--hp-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--hp-trans-base),
                visibility var(--hp-trans-base),
                transform var(--hp-trans-base);
    z-index: 50;
}

.hp-header__menu li:hover > .sub-menu,
.hp-header__menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hp-header__menu .sub-menu li {
    width: 100%;
}

.hp-header__menu .sub-menu a {
    padding: 0.5rem 1rem;
    display: block;
    font-weight: 400;
}

.hp-header__menu .sub-menu a:hover {
    background: #f8fafc;
}

/* Submenús de nivel 2+ */
.hp-header__menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

/* CTA del header */
.hp-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--hp-trans-fast),
                transform var(--hp-trans-fast);
}

.hp-header__cta:hover,
.hp-header__cta:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Botón hamburguesa */
.hp-header__toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.hp-header__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--hp-color-text);
    transition: transform var(--hp-trans-base),
                opacity var(--hp-trans-fast);
}

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

.hp-header__toggle[aria-expanded="true"] .hp-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

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

.hp-header__menu-notice {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    margin: 0;
}

/* Header mobile */
@media (max-width: 960px) {
    .hp-header__toggle {
        display: flex;
    }

    .hp-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        padding: 0 var(--hp-container-pad); /* Sin padding vertical cuando cerrado */
        border-top: 1px solid var(--hp-color-border);
        box-shadow: var(--hp-shadow-md);
        max-height: 0;
        overflow: hidden;
        visibility: hidden;      /* Oculta completamente el contenido */
        opacity: 0;              /* Evita que cualquier texto sea visible */
        pointer-events: none;    /* No captura clics cuando está cerrado */
        transition: max-height var(--hp-trans-base),
                    opacity var(--hp-trans-base),
                    visibility var(--hp-trans-base),
                    padding var(--hp-trans-base);
        align-items: stretch;
        z-index: 199;
    }

    .hp-header__nav.is-open {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        padding: 1rem var(--hp-container-pad) 1.5rem; /* Padding solo cuando abierto */
    }

    .hp-header__menu {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        width: 100%;
    }

    .hp-header__menu li {
        width: 100%;
        border-bottom: 1px solid var(--hp-color-border);
    }

    .hp-header__menu a {
        padding: 0.875rem 0;
        justify-content: space-between;
    }

    .hp-header__menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: #f8fafc;
        padding: 0.25rem 0;
        display: none;
        min-width: 0;
    }

    .hp-header__menu li.is-submenu-open > .sub-menu {
        display: block;
    }

    .hp-header__menu .sub-menu a {
        padding-left: 1.5rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .hp-header__cta {
        margin-top: 1rem;
        justify-content: center;
    }
}

/* =========================================================================
   4. Hero — Split Screen 50/50
   ========================================================================= */

.hp-hero {
    display: flex;
    min-height: 100vh;         /* Pantalla completa */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ── Lado izquierdo ──────────────────────────────────────────────────── */
.hp-hero__left {
    flex: 0 0 50%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 6rem 5rem 6rem 4rem;
    /* Fondo degradado oscuro estilo hosting — profesional y serio */
    background:
        linear-gradient(
            135deg,
            #050c1a 0%,
            #0a1628 35%,
            #0d1e3a 65%,
            #071222 100%
        );
    overflow: hidden;
}

/* Formas decorativas — dan profundidad sin distraer */
.hp-hero__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Círculo grande difuso — esquina superior derecha */
.hp-hero__deco-circle--1 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, 0.18) 0%,
        transparent 70%
    );
    top: -200px;
    right: -200px;
}

/* Círculo pequeño — esquina inferior izquierda */
.hp-hero__deco-circle--2 {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, 0.12) 0%,
        transparent 70%
    );
    bottom: -100px;
    left: -80px;
}

/* Grid de puntos sutil */
.hp-hero__deco-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient( circle, rgba(255,255,255,.06) 1px, transparent 1px );
    background-size: 32px 32px;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.5) 40%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.5) 40%,
        transparent 100%
    );
}

/* Contenido del lado izquierdo */
.hp-hero__content {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

/* Eyebrow badge */
.hp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--hp-fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #93c5fd;
    background: rgba(59, 130, 246, .12);
    border: 1px solid rgba(59, 130, 246, .25);
    padding: .4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

/* Título */
.hp-hero__title {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
    color: #ffffff;
    font-weight: 800;
}

/* Acento en la primera línea del título si hay <em> */
.hp-hero__title em {
    font-style: normal;
    color: #60a5fa;
}

/* Subtítulo */
.hp-hero__subtitle {
    font-size: var(--hp-fs-lg);
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 2.25rem;
}

.hp-hero__subtitle p {
    margin: 0 0 0.75rem;
}

/* CTA */
.hp-hero__actions {
    margin-bottom: 1.5rem;
}

.hp-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .95rem 2rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-lg);
    text-decoration: none;
    box-shadow: 0 0 0 0 rgba(59,130,246,.5);
    transition:
        background var(--hp-trans-fast),
        transform var(--hp-trans-fast),
        box-shadow var(--hp-trans-base);
}

.hp-hero__cta:hover,
.hp-hero__cta:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59,130,246,.45);
}

.hp-hero__cta i {
    transition: transform var(--hp-trans-fast);
}

.hp-hero__cta:hover i {
    transform: translateX(4px);
}

/* Texto de soporte */
.hp-hero__support {
    font-size: var(--hp-fs-sm);
    color: rgba(255, 255, 255, .5);
    margin: 0;
}

.hp-hero__support a {
    color: #93c5fd;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, .4);
    transition: color var(--hp-trans-fast);
}

.hp-hero__support a:hover {
    color: #fff;
    text-decoration-color: rgba(255,255,255,.5);
}

/* ── Lado derecho: imagen a pantalla completa ────────────────────────── */
.hp-hero__right {
    flex: 0 0 50%;
    position: relative;
    background-color: #0a1628;   /* Fallback mientras carga */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Overlay sutil en el lado derecho para suavizar el corte */
.hp-hero__right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(5, 12, 26, .35) 0%,
        transparent 40%
    );
    z-index: 1;
    pointer-events: none;
}

/* Placeholder cuando no hay imagen */
.hp-hero__right-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255, 255, 255, .25);
    font-size: var(--hp-fs-sm);
    text-align: center;
    padding: 2rem;
    /* Fondo decorativo para el placeholder */
    background: linear-gradient(135deg, #0a1628 0%, #142540 100%);
}

.hp-hero__right-placeholder i {
    font-size: 3.5rem;
    opacity: .3;
}

.hp-hero__right-placeholder span {
    white-space: pre-line;
    line-height: 1.6;
    max-width: 240px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .hp-hero {
        flex-direction: column;
        min-height: auto;
    }

    .hp-hero__left {
        flex: none;
        width: 100%;
        padding: 4rem 2rem 3.5rem;
    }

    .hp-hero__right {
        flex: none;
        width: 100%;
        height: 55vw;       /* Proporción agradable en mobile */
        min-height: 260px;
        max-height: 420px;
    }

    .hp-hero__right::before {
        background: linear-gradient(
            to bottom,
            rgba(5, 12, 26, .4) 0%,
            transparent 50%
        );
    }

    .hp-hero__content {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hp-hero__left {
        padding: 3rem 1.25rem 2.5rem;
    }

    .hp-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
}

/* =========================================================================
   5. Footer
   ========================================================================= */
.hp-footer {
    margin-top: auto;
    background: var(--hp-footer-bg, #111111);
    color: var(--hp-footer-text, #ffffff);
}

.hp-footer__widgets {
    padding: 4rem var(--hp-container-pad) 3rem;
}

.hp-footer__widgets-inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    display: grid;
    gap: 2.5rem;
}

.hp-footer__widgets[data-columns="1"] .hp-footer__widgets-inner {
    grid-template-columns: 1fr;
}

.hp-footer__widgets[data-columns="2"] .hp-footer__widgets-inner {
    grid-template-columns: repeat(2, 1fr);
}

.hp-footer__widgets[data-columns="3"] .hp-footer__widgets-inner {
    grid-template-columns: repeat(3, 1fr);
}

.hp-footer__widgets[data-columns="4"] .hp-footer__widgets-inner {
    grid-template-columns: repeat(4, 1fr);
}

.hp-footer .widget {
    margin-bottom: 0;
}

.hp-footer .widget-title {
    font-family: var(--hp-font-heading);
    font-size: var(--hp-fs-lg);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--hp-footer-text, #fff);
}

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

.hp-footer ul li {
    margin-bottom: 0.5rem;
}

.hp-footer a {
    color: var(--hp-footer-text, #fff);
    opacity: 0.75;
    text-decoration: none;
    transition: opacity var(--hp-trans-fast);
}

.hp-footer a:hover,
.hp-footer a:focus-visible {
    opacity: 1;
    text-decoration: none;
    color: var(--hp-color-primary);
}

.hp-footer p {
    margin: 0 0 0.75rem;
    opacity: 0.8;
}

@media (max-width: 960px) {
    .hp-footer__widgets[data-columns="3"] .hp-footer__widgets-inner,
    .hp-footer__widgets[data-columns="4"] .hp-footer__widgets-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .hp-footer__widgets-inner {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================================
   6. Sub-Footer
   ========================================================================= */
.hp-subfooter {
    background: var(--hp-subfooter-bg, #0a0a0a);
    color: var(--hp-subfooter-text, #cccccc);
    padding: 1.25rem 0;
}

.hp-subfooter__inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-subfooter__text {
    margin: 0;
    font-size: var(--hp-fs-sm);
    text-align: left;
    color: inherit;
}

.hp-subfooter__text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.hp-subfooter__text a:hover,
.hp-subfooter__text a:focus-visible {
    text-decoration-color: currentColor;
}

.hp-subfooter__name {
    font-weight: 600;
    color: inherit;
}

/* =========================================================================
   7. Overrides legacy (limpiar estilos heredados de main.css Fase 1)
   ========================================================================= */
.site-header {
    padding: 0;
    border-bottom: 0;
    background: transparent;
    display: block;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

.site-footer {
    margin-top: 0;
}

.footer-widgets,
.sub-footer {
    display: none !important; /* solo aplica si alguien usa los viejos wrappers */
}

/* =========================================================================
   8. Stats (Social Proof) — Fase 3
   ========================================================================= */
.hp-stats {
    background: var(--hp-stats-bg, #000);
    color: var(--hp-stats-text, #fff);
    padding: 4.5rem 0;
}

.hp-stats__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.hp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hp-stat__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--hp-stats-accent, #3B82F6);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--hp-trans-base),
                background var(--hp-trans-base);
}

.hp-stat:hover .hp-stat__icon {
    transform: scale(1.08) rotate(-3deg);
    background: rgba(255, 255, 255, 0.14);
}

.hp-stat__value {
    font-family: var(--hp-font-heading);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--hp-stats-accent, #3B82F6);
    letter-spacing: -0.02em;
}

.hp-stat__number {
    display: inline-block;
}

.hp-stat__suffix {
    display: inline-block;
    margin-left: 0.1em;
}

.hp-stat__label {
    font-size: var(--hp-fs-base);
    font-weight: 500;
    color: var(--hp-stats-text, #fff);
    opacity: 0.9;
    max-width: 220px;
}

@media (max-width: 960px) {
    .hp-stats__container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hp-stats__container {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   9. CTA Asesorías — Fase 3
   ========================================================================= */
.hp-cta {
    padding: 5rem 0;
    background: #f8fafc;
}

.hp-cta__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hp-cta--reverse .hp-cta__container {
    direction: rtl;
}

.hp-cta--reverse .hp-cta__content,
.hp-cta--reverse .hp-cta__media {
    direction: ltr;
}

.hp-cta__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-4xl));
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--hp-color-text);
}

.hp-cta__subtitle {
    font-size: var(--hp-fs-lg);
    color: var(--hp-color-text-muted);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.hp-cta__subtitle p {
    margin: 0 0 0.75rem;
}

.hp-cta__button i {
    margin-right: 0.25rem;
}

.hp-cta__media {
    position: relative;
    border-radius: var(--hp-radius-lg);
    overflow: hidden;
}

.hp-cta__image,
.hp-cta__image-placeholder svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-lg);
}

.hp-cta__media--overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.35), rgba(59, 130, 246, 0.15));
    border-radius: var(--hp-radius-lg);
    pointer-events: none;
}

@media (max-width: 960px) {
    .hp-cta {
        padding: 3.5rem 0;
    }

    .hp-cta__container {
        grid-template-columns: 1fr;
        gap: 2rem;
        direction: ltr;
    }

    .hp-cta--reverse .hp-cta__media {
        order: -1;
    }
}

/* =========================================================================
   10. Formulario de Leads — Fase 3
   ========================================================================= */
.hp-leads-form-wrapper {
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-lg);
    padding: 2rem;
    box-shadow: var(--hp-shadow-md);
}

.hp-leads-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hp-leads-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hp-leads-form__field label {
    font-weight: 600;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hp-leads-form__required {
    color: #ef4444;
    font-weight: 700;
}

.hp-leads-form__field input,
.hp-leads-form__field select {
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    font: inherit;
    background: #fff;
    transition: border-color var(--hp-trans-fast),
                box-shadow var(--hp-trans-fast);
}

.hp-leads-form__field input:focus,
.hp-leads-form__field select:focus {
    outline: none;
    border-color: var(--hp-color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.hp-leads-form__field.has-error input,
.hp-leads-form__field.has-error select {
    border-color: #ef4444;
    background: #fef2f2;
}

.hp-leads-form__error {
    font-size: var(--hp-fs-sm);
    color: #dc2626;
    min-height: 1.25em;
    display: none;
}

.hp-leads-form__field.has-error .hp-leads-form__error {
    display: block;
}

.hp-leads-form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.hp-leads-form__actions {
    margin-top: 0.5rem;
}

.hp-leads-form__submit {
    width: 100%;
    justify-content: center;
    font-size: var(--hp-fs-lg);
    padding: 1rem 1.5rem;
}

.hp-leads-form__submit[aria-busy="true"] {
    opacity: 0.85;
    cursor: wait;
}

.hp-leads-form__feedback {
    font-size: var(--hp-fs-sm);
    padding: 0.75rem 1rem;
    border-radius: var(--hp-radius-md);
    display: none;
    line-height: 1.5;
}

.hp-leads-form__feedback.is-success {
    display: block;
    background: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
}

.hp-leads-form__feedback.is-error {
    display: block;
    background: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fecaca;
}

.hp-leads-form__privacy {
    font-size: var(--hp-fs-xs);
    color: var(--hp-color-text-soft);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Página de asesorías */
.hp-advisory-page {
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 60%);
    min-height: calc(100vh - 200px);
}

.hp-advisory-page__hero {
    padding: 4rem 0 5rem;
}

.hp-advisory-page__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.hp-advisory-page__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.hp-advisory-page__lead {
    font-size: var(--hp-fs-lg);
    color: var(--hp-color-text-muted);
    margin-bottom: 2rem;
}

.hp-advisory-page__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-advisory-page__benefits li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    color: var(--hp-color-text);
}

.hp-advisory-page__benefits i {
    color: #10b981;
    font-size: 1.1em;
}

@media (max-width: 960px) {
    .hp-advisory-page__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hp-leads-form-wrapper {
        padding: 1.5rem;
    }
}

/* =========================================================================
   11. Sección Cursos — Fase 4
   ========================================================================= */
.hp-courses {
    padding: 5rem 0;
    background: #fff;
}

.hp-courses__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-courses__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hp-courses__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.hp-courses__subtitle {
    color: var(--hp-color-text-muted);
    font-size: var(--hp-fs-lg);
    margin: 0;
    max-width: 560px;
}

.hp-courses__header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.hp-courses__currency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: var(--hp-color-primary);
    background: rgba(59, 130, 246, 0.08);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Grid de cards */
.hp-courses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

.hp-courses__footer {
    text-align: center;
    margin-top: 1rem;
}

/* =========================================================================
   12. Card de Curso — Fase 4
   ========================================================================= */
.hp-course-card {
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--hp-trans-base),
                box-shadow var(--hp-trans-base);
}

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

/* Thumbnail */
.hp-course-card__thumb-link {
    display: block;
    overflow: hidden;
}

.hp-course-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
    position: relative;
}

.hp-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hp-trans-base);
    display: block;
}

.hp-course-card:hover .hp-course-card__img {
    transform: scale(1.04);
}

.hp-course-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e7ff, #dbeafe);
    color: #93c5fd;
    font-size: 3rem;
}

/* Body */
.hp-course-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.75rem;
}

.hp-course-card__title {
    font-size: var(--hp-fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.hp-course-card__title a {
    color: var(--hp-color-text);
    text-decoration: none;
}

.hp-course-card__title a:hover,
.hp-course-card__title a:focus-visible {
    color: var(--hp-color-primary);
    text-decoration: none;
}

.hp-course-card__excerpt {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta */
.hp-course-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
}

.hp-course-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
}

.hp-course-card__meta-item i {
    color: var(--hp-color-primary);
    width: 14px;
    flex-shrink: 0;
}

/* Footer de la card */
.hp-course-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hp-color-border);
    margin-top: auto;
}

.hp-course-card__price {
    font-family: var(--hp-font-heading);
    font-weight: 800;
    font-size: var(--hp-fs-xl);
    color: var(--hp-color-text);
}

.hp-price {
    display: inline-block;
}

.hp-course-card__free {
    color: #16a34a;
    font-weight: 700;
}

.hp-course-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-sm);
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--hp-trans-fast),
                transform var(--hp-trans-fast);
}

.hp-course-card__cta:hover,
.hp-course-card__cta:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateX(2px);
}

.hp-course-card__cta i {
    transition: transform var(--hp-trans-fast);
}

.hp-course-card__cta:hover i {
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 960px) {
    .hp-courses__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-courses__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hp-courses__header-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 540px) {
    .hp-courses__grid {
        grid-template-columns: 1fr;
    }

    .hp-courses__header-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   13. Sección Temas (Slider) — Fase 5
   ========================================================================= */
.hp-themes {
    padding: 5rem 0;
    background: #f8fafc;
    overflow: hidden;
}

.hp-themes__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-themes__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.hp-themes__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.hp-themes__subtitle {
    color: var(--hp-color-text-muted);
    font-size: var(--hp-fs-lg);
    margin: 0;
    max-width: 520px;
}

/* Slider */
.hp-themes__slider {
    position: relative;
    margin-bottom: 1.5rem;
    touch-action: pan-y;
    overflow: hidden; /* Clip del track aquí, no en el track */
}

.hp-themes__track {
    display: flex;
    gap: 1.5rem;
    /* Sin overflow:hidden aquí — el slider lo maneja en el padre */
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Cards del slider — ancho calculado por JS, no por CSS */
.hp-theme-card {
    flex: 0 0 auto; /* JS asigna el width exacto vía style */
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base);
}

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

.hp-theme-card__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f5f9;
}

.hp-theme-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--hp-trans-base);
}

.hp-theme-card:hover .hp-theme-card__img {
    transform: scale(1.04);
}

.hp-theme-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: rgba(255,255,255,0.8);
    font-size: 2.5rem;
}

.hp-theme-card__thumb-placeholder span {
    font-size: var(--hp-fs-sm);
    font-weight: 600;
}

.hp-theme-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.6rem;
}

.hp-theme-card__name {
    font-size: var(--hp-fs-lg);
    font-weight: 700;
    margin: 0;
}

.hp-theme-card__name a {
    color: var(--hp-color-text);
    text-decoration: none;
}

.hp-theme-card__name a:hover { color: var(--hp-color-primary); }

.hp-theme-card__description {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-muted);
    margin: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-theme-card__author {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
}

.hp-theme-card__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hp-color-border);
}

.hp-theme-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-sm);
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--hp-trans-fast);
}

.hp-theme-card__cta:hover, .hp-theme-card__cta:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
}

.hp-theme-card__demo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: var(--hp-color-text-soft);
    text-decoration: none;
    transition: color var(--hp-trans-fast);
}

.hp-theme-card__demo:hover { color: var(--hp-color-primary); text-decoration: none; }

/* Botones del slider */
.hp-themes__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--hp-color-border);
    box-shadow: var(--hp-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast), box-shadow var(--hp-trans-fast);
    z-index: 10;
    color: var(--hp-color-text);
}

.hp-themes__btn:hover {
    background: var(--hp-color-primary);
    color: #fff;
    border-color: var(--hp-color-primary);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}

.hp-themes__btn--prev { left: -22px; }
.hp-themes__btn--next { right: -22px; }
.hp-themes__btn:disabled { opacity: 0.35; pointer-events: none; }

/* Dots */
.hp-themes__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.hp-themes__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hp-color-border);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast), width var(--hp-trans-fast);
}

.hp-themes__dot.is-active {
    background: var(--hp-color-primary);
    width: 24px;
    border-radius: 4px;
}

.hp-themes__footer {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 960px) {
    .hp-themes__btn--prev { left: -16px; }
    .hp-themes__btn--next { right: -16px; }
}

@media (max-width: 600px) {
    .hp-themes__btn { display: none; }
}

/* =========================================================================
   14. Single Download (Tema) — Fase 5
   ========================================================================= */
.hp-single-theme { overflow-x: hidden; }

.hp-st-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
    padding: 5rem 0 4rem;
}

.hp-st-hero__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hp-st-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}

.hp-st-hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 1rem;
}

.hp-st-hero__excerpt { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; line-height: 1.7; }
.hp-st-hero__excerpt p { margin: 0; }

.hp-st-hero__price {
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hp-st-hero__price-label {
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,0.6);
}

.hp-st-hero__price .hp-price {
    font-family: var(--hp-font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
}

.hp-st-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hp-st-hero__buy { background: var(--hp-color-primary); }
.hp-st-hero__demo { color: #fff; border-color: rgba(255,255,255,0.3); }
.hp-st-hero__demo:hover { border-color: #fff; color: #fff; }

.hp-st-hero__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.hp-st-hero__trust li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,0.7);
}

.hp-st-hero__trust i { color: #4ade80; }

.hp-st-hero__img {
    width: 100%;
    border-radius: var(--hp-radius-lg);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

.hp-st-hero__img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--hp-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255,255,255,0.4);
    font-size: 3rem;
}

/* Secciones internas compartidas */
.hp-st-section-title {
    font-size: var(--hp-fs-2xl);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: var(--hp-color-text);
}

.hp-st-gallery, .hp-st-description, .hp-st-video,
.hp-st-features-benefits, .hp-st-license,
.hp-st-faq, .hp-st-support {
    padding: 4rem 0;
}

.hp-st-gallery:nth-child(even),
.hp-st-features-benefits,
.hp-st-faq { background: #f8fafc; }

.hp-st-gallery__container, .hp-st-description__container,
.hp-st-video__container, .hp-st-features-benefits__container,
.hp-st-license__container, .hp-st-faq__container, .hp-st-support__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* Galería */
.hp-st-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.hp-st-gallery__img {
    width: 100%;
    border-radius: var(--hp-radius-md);
    border: 1px solid var(--hp-color-border);
    cursor: pointer;
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base);
}

.hp-st-gallery__img:hover { transform: scale(1.02); box-shadow: var(--hp-shadow-md); }

/* Video */
.hp-st-video__embed { position: relative; aspect-ratio: 16/9; border-radius: var(--hp-radius-lg); overflow: hidden; }
.hp-st-video__embed iframe { width: 100%; height: 100%; position: absolute; inset: 0; }

/* Features + Benefits */
.hp-st-features-benefits__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.hp-st-features__list, .hp-st-benefits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-st-features__list li, .hp-st-benefits__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--hp-fs-base);
    color: var(--hp-color-text);
    line-height: 1.5;
}

.hp-st-features__list i { color: #16a34a; margin-top: 2px; flex-shrink: 0; }
.hp-st-benefits__list i { color: var(--hp-color-primary); margin-top: 2px; flex-shrink: 0; }

/* Licencias */
.hp-st-license__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.hp-st-license__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-st-license__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--hp-fs-base);
}

.hp-st-license__list i { color: var(--hp-color-primary); width: 18px; text-align: center; flex-shrink: 0; }

.hp-st-license__how h3 { font-size: var(--hp-fs-lg); margin-bottom: 1rem; }
.hp-st-license__steps {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--hp-color-text-muted);
}

/* FAQ */
.hp-st-faq__list { display: flex; flex-direction: column; gap: 0.75rem; }

.hp-st-faq__item {
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    background: #fff;
    overflow: hidden;
}

.hp-st-faq__question {
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    color: var(--hp-color-text);
    user-select: none;
}

.hp-st-faq__question::-webkit-details-marker { display: none; }

.hp-st-faq__question i {
    transition: transform var(--hp-trans-fast);
    flex-shrink: 0;
    color: var(--hp-color-primary);
}

.hp-st-faq__item[open] .hp-st-faq__question i {
    transform: rotate(180deg);
}

.hp-st-faq__answer {
    padding: 0 1.25rem 1.25rem;
    color: var(--hp-color-text-muted);
    line-height: 1.65;
}

.hp-st-faq__answer p { margin: 0; }

/* CTA Final */
.hp-st-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

.hp-st-cta__container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-st-cta__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hp-st-cta__price {
    margin-bottom: 2rem;
}

.hp-st-cta__price .hp-price {
    font-family: var(--hp-font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
}

.hp-st-cta__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.hp-st-cta__buy { font-size: var(--hp-fs-lg); padding: 1rem 2rem; }
.hp-st-cta .hp-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.hp-st-cta .hp-btn--ghost:hover { border-color: #fff; color: #fff; }

.hp-st-cta__trust {
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

/* Responsive single-download */
@media (max-width: 960px) {
    .hp-st-hero__container,
    .hp-st-features-benefits__container,
    .hp-st-license__content { grid-template-columns: 1fr; gap: 2rem; }
    .hp-st-hero__media { order: -1; }
    .hp-st-hero { padding: 3rem 0; }
}

/* =========================================================================
   15. Sección Videos YouTube — Extra
   ========================================================================= */
.hp-videos {
    padding: 5rem 0;
    background: #fff;
}

.hp-videos__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-videos__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hp-videos__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -0.02em;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.hp-videos__title i { color: #ff0000; font-size: .85em; }

.hp-videos__subtitle {
    color: var(--hp-color-text-muted);
    font-size: var(--hp-fs-lg);
    margin: 0;
}

.hp-videos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

.hp-videos__footer { text-align: center; }

/* Card de video */
.hp-video-card {
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base);
}

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

.hp-video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.hp-video-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--hp-trans-base), opacity var(--hp-trans-base);
}

.hp-video-card:hover .hp-video-card__img {
    transform: scale(1.04);
    opacity: .85;
}

.hp-video-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #ff0000;
    font-size: 3rem;
}

/* Botón play overlay */
.hp-video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hp-video-card__play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,0,0,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--hp-trans-base), background var(--hp-trans-fast);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.hp-video-card__play-btn i {
    color: #fff;
    font-size: 1.25rem;
    margin-left: 3px;
}

.hp-video-card:hover .hp-video-card__play-btn {
    transform: scale(1.1);
    background: #ff0000;
}

.hp-video-card__badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--hp-color-primary);
    color: #fff;
    font-size: var(--hp-fs-xs);
    font-weight: 600;
    padding: .2rem .65rem;
    border-radius: 999px;
}

.hp-video-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .6rem;
}

.hp-video-card__title {
    font-size: var(--hp-fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-video-card__title a { color: var(--hp-color-text); text-decoration: none; }
.hp-video-card__title a:hover { color: var(--hp-color-primary); }

.hp-video-card__excerpt {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-video-card__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.hp-video-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--hp-fs-xs);
    color: var(--hp-color-text-soft);
}

.hp-video-card__meta-item i { color: var(--hp-color-primary); font-size: .75em; }

.hp-video-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: #ff0000;
    color: #fff;
    border-radius: var(--hp-radius-sm);
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--hp-trans-fast);
    align-self: flex-start;
}

.hp-video-card__cta:hover { background: #cc0000; color: #fff; text-decoration: none; }

@media (max-width: 960px) { .hp-videos__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .hp-videos__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   16. Single Video — Extra
   ========================================================================= */
.hp-single-video { background: #f8fafc; }

.hp-sv-player-wrap {
    background: #000;
    padding: 1.5rem 0;
}

.hp-sv-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-sv-player {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--hp-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.hp-sv-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hp-sv-no-video { text-align: center; padding: 2rem 0; }
.hp-sv-fallback-img { max-width: 100%; border-radius: var(--hp-radius-lg); margin: 0 auto; }
.hp-sv-no-video-msg { color: rgba(255,255,255,.7); margin-top: 1rem; }

.hp-sv-content-wrap { padding: 2.5rem 0 4rem; }

.hp-sv-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.hp-sv-breadcrumb {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.hp-sv-breadcrumb a { color: var(--hp-color-text-soft); }
.hp-sv-breadcrumb a:hover { color: var(--hp-color-primary); }

.hp-sv-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -.02em;
    margin-bottom: 1rem;
}

.hp-sv-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hp-sv-cat-badge {
    background: rgba(59,130,246,.1);
    color: var(--hp-color-primary);
    font-size: var(--hp-fs-xs);
    font-weight: 600;
    padding: .2rem .7rem;
    border-radius: 999px;
    text-decoration: none;
}

.hp-sv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
}

.hp-sv-yt-link { color: #ff0000; font-weight: 600; }
.hp-sv-yt-link:hover { color: #cc0000; }

.hp-sv-body { margin-top: 1.5rem; }

.hp-sv-nav {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hp-color-border);
}

.hp-sv-nav__prev, .hp-sv-nav__next {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    text-decoration: none;
    color: var(--hp-color-text);
    transition: border-color var(--hp-trans-fast), box-shadow var(--hp-trans-fast);
    flex: 1;
}

.hp-sv-nav__next { justify-content: flex-end; text-align: right; }
.hp-sv-nav__prev:hover, .hp-sv-nav__next:hover { border-color: var(--hp-color-primary); box-shadow: var(--hp-shadow-sm); }
.hp-sv-nav__prev span, .hp-sv-nav__next span { display: flex; flex-direction: column; gap: .15rem; font-size: var(--hp-fs-sm); font-weight: 600; }
.hp-sv-nav__prev small, .hp-sv-nav__next small { font-size: var(--hp-fs-xs); font-weight: 400; color: var(--hp-color-text-soft); }

/* Sidebar */
.hp-sv-sidebar { position: sticky; top: 80px; }

.hp-sv-sidebar__title {
    font-size: var(--hp-fs-lg);
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--hp-color-primary);
}

.hp-sv-related {
    display: flex;
    gap: .75rem;
    text-decoration: none;
    color: var(--hp-color-text);
    padding: .75rem 0;
    border-bottom: 1px solid var(--hp-color-border);
    transition: color var(--hp-trans-fast);
}

.hp-sv-related:hover { color: var(--hp-color-primary); text-decoration: none; }

.hp-sv-related__thumb {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 16/9;
    border-radius: var(--hp-radius-sm);
    overflow: hidden;
    background: #000;
}

.hp-sv-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-sv-related__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ff0000; background: #111; }

.hp-sv-related__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.3);
}

.hp-sv-related__play i { color: #fff; font-size: 1rem; }

.hp-sv-related__title { font-size: var(--hp-fs-sm); font-weight: 600; line-height: 1.35; margin: 0 0 .25rem; }
.hp-sv-related__date { font-size: var(--hp-fs-xs); color: var(--hp-color-text-soft); }

@media (max-width: 960px) {
    .hp-sv-layout { grid-template-columns: 1fr; }
    .hp-sv-sidebar { position: static; }
}

/* =========================================================================
   17. Sección Podcasts — Extra
   ========================================================================= */
.hp-podcasts {
    padding: 5rem 0;
    background: #f8fafc;
}

.hp-podcasts__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-podcasts__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hp-podcasts__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.hp-podcasts__title i { color: var(--hp-pod-accent, #3B82F6); }
.hp-podcasts__subtitle { color: var(--hp-color-text-muted); font-size: var(--hp-fs-lg); margin: 0; }

.hp-podcasts__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.hp-podcasts__footer { text-align: center; }

/* Card de podcast */
.hp-podcast-card {
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: box-shadow var(--hp-trans-base), border-color var(--hp-trans-base);
}

.hp-podcast-card:hover {
    box-shadow: var(--hp-shadow-md);
    border-color: rgba(59,130,246,.3);
}

.hp-podcast-card__cover {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.hp-podcast-card__cover-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--hp-radius-md);
    display: block;
}

.hp-podcast-card__cover-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--hp-pod-accent, #3B82F6), #1d4ed8);
    border-radius: var(--hp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    font-size: 1.75rem;
}

.hp-podcast-card__ep-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: var(--hp-pod-accent, #3B82F6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.hp-podcast-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }

.hp-podcast-card__meta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.hp-podcast-card__season,
.hp-podcast-card__date,
.hp-podcast-card__duration {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--hp-fs-xs);
    color: var(--hp-color-text-soft);
}

.hp-podcast-card__season { color: var(--hp-pod-accent, #3B82F6); font-weight: 600; }
.hp-podcast-card__season i, .hp-podcast-card__date i, .hp-podcast-card__duration i { font-size: .7em; }

.hp-podcast-card__title { font-size: var(--hp-fs-base); font-weight: 700; line-height: 1.3; margin: 0; }
.hp-podcast-card__title a { color: var(--hp-color-text); text-decoration: none; }
.hp-podcast-card__title a:hover { color: var(--hp-pod-accent, #3B82F6); }

.hp-podcast-card__excerpt {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reproductor inline */
.hp-podcast-card__player { margin-top: .25rem; }

.hp-podcast-card__listen-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: var(--hp-pod-accent, #3B82F6);
    text-decoration: none;
}

.hp-podcast-card__listen-link:hover { text-decoration: underline; }

@media (max-width: 768px) { .hp-podcasts__grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .hp-podcast-card { flex-direction: column; } .hp-podcast-card__cover { width: 100%; height: 160px; } .hp-podcast-card__cover-img { width: 100%; height: 160px; } .hp-podcast-card__cover-placeholder { width: 100%; height: 160px; } }

/* =========================================================================
   18. Reproductor de audio compartido (card + single)
   ========================================================================= */
.hp-podcast-card__controls,
.hp-sp-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.hp-pod-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hp-pod-accent, #3B82F6);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast);
}

.hp-pod-play-btn--lg { width: 52px; height: 52px; font-size: 1.1rem; }
.hp-pod-play-btn:hover { background: #2563eb; transform: scale(1.05); }
.hp-pod-play-btn.is-playing i::before { content: "\f04c"; }

.hp-pod-progress-wrap {
    flex: 1;
    height: 4px;
    background: var(--hp-color-border);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.hp-pod-progress-wrap--lg { height: 6px; }

.hp-pod-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--hp-pod-accent, #3B82F6);
    border-radius: 2px;
    transition: width .1s linear;
    pointer-events: none;
}

.hp-pod-time {
    font-size: var(--hp-fs-xs);
    color: var(--hp-color-text-soft);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

/* Single podcast extras */
.hp-sp-track { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.hp-sp-times { display: flex; justify-content: space-between; }
.hp-sp-total-time { font-size: var(--hp-fs-xs); color: var(--hp-color-text-soft); font-variant-numeric: tabular-nums; }

.hp-sp-extra-controls { display: flex; align-items: center; gap: .5rem; }

.hp-sp-speed-btn {
    background: var(--hp-color-border);
    border: 0;
    border-radius: var(--hp-radius-sm);
    padding: .3rem .6rem;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    cursor: pointer;
    color: var(--hp-color-text);
    transition: background var(--hp-trans-fast);
}

.hp-sp-speed-btn:hover { background: var(--hp-pod-accent, #3B82F6); color: #fff; }

.hp-sp-download-btn {
    display: flex;
    align-items: center;
    color: var(--hp-color-text-soft);
    font-size: 1rem;
    text-decoration: none;
    transition: color var(--hp-trans-fast);
}

.hp-sp-download-btn:hover { color: var(--hp-pod-accent, #3B82F6); }

/* =========================================================================
   19. Single Podcast — Extra
   ========================================================================= */
.hp-single-podcast { background: #fff; }

.hp-sp-hero {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    padding: 4rem 0;
    color: #fff;
}

.hp-sp-container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

.hp-sp-cover__img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--hp-radius-lg);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    display: block;
}

.hp-sp-cover__placeholder {
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,.08);
    border-radius: var(--hp-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255,255,255,.4);
}

.hp-sp-breadcrumb {
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,.6);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.hp-sp-breadcrumb a { color: rgba(255,255,255,.6); }
.hp-sp-breadcrumb a:hover { color: #fff; }

.hp-sp-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }

.hp-sp-badge {
    font-size: var(--hp-fs-xs);
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.hp-sp-badge--ep { background: var(--hp-pod-accent, #3B82F6); color: #fff; }
.hp-sp-badge--season { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); text-decoration: none; }
.hp-sp-badge--season:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }

.hp-sp-title { font-size: clamp(1.5rem, 3vw, 2.25rem); color: #fff; margin-bottom: .75rem; line-height: 1.15; }

.hp-sp-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hp-sp-meta span { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--hp-fs-sm); color: rgba(255,255,255,.7); }

.hp-sp-excerpt { color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 1.5rem; }

.hp-sp-player {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--hp-radius-md);
    padding: 1.25rem;
}

.hp-sp-content-wrap { padding: 3rem 0; }
.hp-sp-content-wrap .hp-sp-container { grid-template-columns: 1fr; }

.hp-sp-nav-wrap {
    padding: 0 0 4rem;
    background: #fff;
}

.hp-sp-nav-wrap .hp-sp-container { grid-template-columns: 1fr; }

.hp-sp-nav {
    display: flex;
    gap: 1rem;
}

.hp-sp-nav__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    text-decoration: none;
    color: var(--hp-color-text);
    flex: 1;
    transition: border-color var(--hp-trans-fast), box-shadow var(--hp-trans-fast);
}

.hp-sp-nav__next { justify-content: flex-end; text-align: right; }
.hp-sp-nav__item:hover { border-color: var(--hp-pod-accent, #3B82F6); box-shadow: var(--hp-shadow-sm); text-decoration: none; }
.hp-sp-nav__item span { display: flex; flex-direction: column; gap: .15rem; }
.hp-sp-nav__item small { font-size: var(--hp-fs-xs); color: var(--hp-pod-accent, #3B82F6); font-weight: 600; }

@media (max-width: 768px) {
    .hp-sp-container { grid-template-columns: 1fr; gap: 1.5rem; }
    .hp-sp-cover__img, .hp-sp-cover__placeholder { width: 160px; height: 160px; }
    .hp-sp-nav { flex-direction: column; }
}

/* =========================================================================
   20. Archive Videos + Archive Podcasts — páginas de listado completo
   ========================================================================= */

/* Hero compartido */
.hp-archive-videos__hero,
.hp-archive-podcast__hero {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    color: #fff;
    padding: 3.5rem var(--hp-container-pad);
}

.hp-archive-videos__hero-inner,
.hp-archive-podcast__hero-inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.hp-archive-videos__hero-icon,
.hp-archive-podcast__hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.hp-archive-videos__hero-icon { color: #ff0000; }
.hp-archive-podcast__hero-icon { color: var(--hp-pod-accent, #3B82F6); }

.hp-archive-videos__title,
.hp-archive-podcast__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}

.hp-archive-videos__subtitle,
.hp-archive-podcast__subtitle {
    color: rgba(255,255,255,.75);
    font-size: var(--hp-fs-lg);
    margin: 0;
}

/* Filtros de temporada y categoría */
.hp-archive-podcast__seasons,
.hp-archive-videos__cats {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.hp-archive-season-btn,
.hp-archive-cat-btn {
    display: inline-block;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: var(--hp-fs-sm);
    font-weight: 500;
    transition: background var(--hp-trans-fast), border-color var(--hp-trans-fast), color var(--hp-trans-fast);
}

.hp-archive-season-btn:hover,
.hp-archive-cat-btn:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
}

.hp-archive-season-btn.is-active,
.hp-archive-cat-btn.is-active {
    background: var(--hp-color-primary);
    border-color: var(--hp-color-primary);
    color: #fff;
}

/* Contenido */
.hp-archive-videos__content,
.hp-archive-podcast__content {
    padding: 3.5rem 0 5rem;
}

.hp-archive-videos__container,
.hp-archive-podcast__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* Estado vacío */
.hp-archive-videos__empty,
.hp-archive-podcast__empty {
    text-align: center;
    padding: 4rem 0;
    color: var(--hp-color-text-muted);
}

.hp-archive-videos__empty i,
.hp-archive-podcast__empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: .4;
}

.hp-archive-videos__empty p,
.hp-archive-podcast__empty p {
    font-size: var(--hp-fs-lg);
    margin-bottom: 1.5rem;
}

/* Paginación */
.hp-archive-videos__pagination,
.hp-archive-podcast__pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.hp-archive-videos__pagination .page-numbers,
.hp-archive-podcast__pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.hp-archive-videos__pagination .page-numbers li a,
.hp-archive-videos__pagination .page-numbers li span,
.hp-archive-podcast__pagination .page-numbers li a,
.hp-archive-podcast__pagination .page-numbers li span {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-sm);
    color: var(--hp-color-text);
    text-decoration: none;
    font-size: var(--hp-fs-sm);
    transition: background var(--hp-trans-fast), border-color var(--hp-trans-fast);
}

.hp-archive-videos__pagination .page-numbers li a:hover,
.hp-archive-podcast__pagination .page-numbers li a:hover {
    background: var(--hp-color-primary);
    border-color: var(--hp-color-primary);
    color: #fff;
}

.hp-archive-videos__pagination .page-numbers li span.current,
.hp-archive-podcast__pagination .page-numbers li span.current {
    background: var(--hp-color-primary);
    border-color: var(--hp-color-primary);
    color: #fff;
}

/* =========================================================================
   21. Archive Cursos — página de listado completo
   ========================================================================= */
.hp-archive-courses__hero {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    color: #fff;
    padding: 3.5rem var(--hp-container-pad);
}

.hp-archive-courses__hero-inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.hp-archive-courses__hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    color: var(--hp-color-primary);
}

.hp-archive-courses__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}

.hp-archive-courses__subtitle {
    color: rgba(255,255,255,.75);
    font-size: var(--hp-fs-lg);
    margin: 0;
}

.hp-archive-courses__meta-bar {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hp-archive-courses__count {
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,.65);
}

.hp-archive-courses__content {
    padding: 3.5rem 0 5rem;
}

.hp-archive-courses__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-archive-courses__empty {
    text-align: center;
    padding: 4rem 0;
    color: var(--hp-color-text-muted);
}

.hp-archive-courses__empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: .4;
}

.hp-archive-courses__empty p {
    font-size: var(--hp-fs-lg);
    margin-bottom: 1.5rem;
}

/* =========================================================================
   22. Catálogo de Temas — página completa
   ========================================================================= */
.hp-archive-themes__hero {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    color: #fff;
    padding: 3.5rem var(--hp-container-pad);
}

.hp-archive-themes__hero-inner {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.hp-archive-themes__hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    color: #3B82F6;
}

.hp-archive-themes__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}

.hp-archive-themes__subtitle {
    color: rgba(255,255,255,.75);
    font-size: var(--hp-fs-lg);
    margin: 0;
}

.hp-archive-themes__meta-bar {
    max-width: var(--hp-container-max);
    margin: 0 auto;
}

.hp-archive-themes__count {
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,.65);
}

.hp-archive-themes__content {
    padding: 3.5rem 0 5rem;
    background: #f8fafc;
}

.hp-archive-themes__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* Grid de cards (estático, sin slider) */
.hp-archive-themes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

/* Card del catálogo (basada en hp-theme-card pero sin flex:0) */
.hp-theme-grid-card {
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base);
}

.hp-theme-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-lg);
}

.hp-theme-grid-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f5f9;
}

.hp-theme-grid-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--hp-trans-base);
}

.hp-theme-grid-card:hover .hp-theme-grid-card__img {
    transform: scale(1.04);
}

.hp-theme-grid-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: rgba(255,255,255,.8);
    font-size: 2.5rem;
}

.hp-theme-grid-card__thumb-placeholder span {
    font-size: var(--hp-fs-sm);
    font-weight: 600;
}

.hp-theme-grid-card__price-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: .3rem .75rem;
    border-radius: 999px;
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-sm);
    color: #fff;
}

.hp-theme-grid-card__price-badge .hp-price {
    color: #fff;
}

.hp-theme-grid-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .6rem;
}

.hp-theme-grid-card__name {
    font-size: var(--hp-fs-xl);
    font-weight: 700;
    margin: 0;
}

.hp-theme-grid-card__name a {
    color: var(--hp-color-text);
    text-decoration: none;
}

.hp-theme-grid-card__name a:hover { color: var(--hp-color-primary); }

.hp-theme-grid-card__description {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-muted);
    margin: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-theme-grid-card__author {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
}

.hp-theme-grid-card__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--hp-color-border);
}

.hp-theme-grid-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-sm);
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--hp-trans-fast);
}

.hp-theme-grid-card__cta:hover {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
}

.hp-theme-grid-card__demo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: var(--hp-color-text-soft);
    text-decoration: none;
    transition: color var(--hp-trans-fast);
}

.hp-theme-grid-card__demo:hover {
    color: var(--hp-color-primary);
    text-decoration: none;
}

.hp-archive-themes__empty {
    text-align: center;
    padding: 4rem 0;
    color: var(--hp-color-text-muted);
}

.hp-archive-themes__empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: .4;
}

.hp-archive-themes__empty p {
    font-size: var(--hp-fs-lg);
    margin-bottom: 1.5rem;
}

@media (max-width: 960px) {
    .hp-archive-themes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .hp-archive-themes__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   23. Sección Plugins — diferencial sobre estilos de Temas
   ========================================================================= */
.hp-plugins {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    /* Fondo oscuro profundo estilo hosting — cohesivo con Hero y About */
    background:
        linear-gradient(
            135deg,
            #050d1f 0%,
            #071528 40%,
            #0a1e38 70%,
            #060f20 100%
        );
}

/* Decoración: círculo difuso esmeralda (color de plugins) */
.hp-plugins::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, .1) 0%,
        transparent 65%
    );
    top: -250px;
    right: -200px;
    pointer-events: none;
}

/* Decoración: círculo difuso azul inferior izquierda */
.hp-plugins::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, .08) 0%,
        transparent 65%
    );
    bottom: -150px;
    left: -100px;
    pointer-events: none;
}

.hp-plugins__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    position: relative;
    z-index: 1;
}

.hp-plugins__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hp-plugins__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    color: #ffffff;
}

.hp-plugins__subtitle {
    color: rgba(255, 255, 255, .65);
    font-size: var(--hp-fs-lg);
    margin: 0;
    max-width: 520px;
}

/* Botón "Ver todos" sobre fondo oscuro */
.hp-plugins__cta-top {
    color: rgba(255, 255, 255, .85) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.hp-plugins__cta-top:hover,
.hp-plugins__cta-top:focus-visible {
    color: #fff !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, .12) !important;
}

.hp-plugins__footer {
    text-align: center;
    margin-top: 2.5rem;
}

/* Botón "Ver todos" del footer también adaptado */
.hp-plugins__footer .hp-btn--primary {
    background: #10b981;
    box-shadow: 0 4px 16px rgba(16, 185, 129, .35);
}

.hp-plugins__footer .hp-btn--primary:hover {
    background: #059669;
    box-shadow: 0 6px 24px rgba(16, 185, 129, .45);
}

/* ── Cards de plugin sobre fondo oscuro ─────────────────────────── */

/* Las cards de plugin reutilizan .hp-theme-card pero las sobreescribimos */
.hp-plugins .hp-theme-card {
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform var(--hp-trans-base),
                box-shadow var(--hp-trans-base),
                border-color var(--hp-trans-base),
                background var(--hp-trans-base);
}

.hp-plugins .hp-theme-card:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(16, 185, 129, .5);
    box-shadow: 0 8px 32px rgba(16, 185, 129, .15), 0 2px 8px rgba(0,0,0,.3);
}

.hp-plugins .hp-theme-card__name a {
    color: #ffffff;
}

.hp-plugins .hp-theme-card__name a:hover {
    color: #34d399;
}

.hp-plugins .hp-theme-card__description {
    color: rgba(255, 255, 255, .6);
}

.hp-plugins .hp-theme-card__author {
    color: rgba(255, 255, 255, .45);
}

.hp-plugins .hp-theme-card__footer {
    border-top-color: rgba(255, 255, 255, .1);
}

.hp-plugins .hp-theme-card__demo {
    color: rgba(255, 255, 255, .5);
}

.hp-plugins .hp-theme-card__demo:hover {
    color: #34d399;
}

/* Precio en la card del slider — blanco sobre oscuro */
.hp-plugin-card__price {
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-base);
    color: #ffffff;
    margin-right: auto;
}

/* Placeholder de plugin */
.hp-plugin-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: linear-gradient(135deg, #064e3b, #065f46);
    color: rgba(255,255,255,.9);
    font-size: 2.5rem;
}

.hp-plugin-card__thumb-placeholder span {
    font-size: var(--hp-fs-sm);
    font-weight: 600;
}

/* Botón CTA de plugin: esmeralda */
.hp-plugin-card__cta {
    background: #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, .3);
}

.hp-plugin-card__cta:hover,
.hp-plugin-card__cta:focus-visible {
    background: #059669 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .45) !important;
}

/* Botones del slider (flechas) sobre fondo oscuro */
.hp-plugins .hp-themes__btn {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
}

.hp-plugins .hp-themes__btn:hover {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

/* Dots del slider */
.hp-plugins .hp-themes__dot {
    background: rgba(255, 255, 255, .25);
}

.hp-plugins .hp-themes__dot.is-active {
    background: #10b981;
}

/* Single plugin — diferencial visual */
.hp-single-plugin .hp-st-hero__eyebrow i {
    color: #10b981;
}

/* =========================================================================
   24. Sección Newsletter
   ========================================================================= */
.hp-newsletter {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
}

.hp-newsletter__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hp-newsletter__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .9;
    line-height: 1;
}

.hp-newsletter__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.hp-newsletter__subtitle {
    font-size: var(--hp-fs-lg);
    color: rgba(255, 255, 255, .75);
    margin: 0;
    line-height: 1.65;
}

/* Formulario */
.hp-newsletter__form-wrap {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--hp-radius-lg);
    padding: 2rem;
}

.hp-newsletter__fields {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.hp-newsletter__field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.hp-newsletter__field input {
    padding: .875rem 1rem;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--hp-radius-md);
    font: inherit;
    font-size: var(--hp-fs-base);
    color: #fff;
    transition: border-color var(--hp-trans-fast), background var(--hp-trans-fast);
}

.hp-newsletter__field input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.hp-newsletter__field input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .15);
}

.hp-newsletter__field.has-error input {
    border-color: #fca5a5;
    background: rgba(239, 68, 68, .1);
}

.hp-newsletter__error {
    font-size: var(--hp-fs-xs);
    color: #fca5a5;
    min-height: 1.2em;
    display: none;
}

.hp-newsletter__field.has-error .hp-newsletter__error {
    display: block;
}

.hp-newsletter__btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--hp-color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 600;
    font-size: var(--hp-fs-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: .25rem;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast);
}

.hp-newsletter__btn:hover {
    background: var(--hp-color-primary-dark);
    transform: translateY(-1px);
}

.hp-newsletter__btn[aria-busy="true"] {
    opacity: .85;
    cursor: wait;
}

.hp-newsletter__feedback {
    margin-top: .875rem;
    padding: .75rem 1rem;
    border-radius: var(--hp-radius-md);
    font-size: var(--hp-fs-sm);
    display: none;
    line-height: 1.5;
}

.hp-newsletter__feedback.is-success {
    display: block;
    background: rgba(74, 222, 128, .15);
    border: 1px solid rgba(74, 222, 128, .4);
    color: #bbf7d0;
}

.hp-newsletter__feedback.is-error {
    display: block;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

.hp-newsletter__privacy {
    margin: .875rem 0 0;
    font-size: var(--hp-fs-xs);
    color: rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    gap: .35rem;
}

@media (max-width: 960px) {
    .hp-newsletter__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* =========================================================================
   25. Sección Clientes (Logos)
   ========================================================================= */

/* Variantes de fondo */
.hp-clients--light {
    background: #ffffff;
    border-bottom: 1px solid var(--hp-color-border);
}

.hp-clients--dark {
    background: var(--hp-color-dark-soft);
}

.hp-clients--bordered {
    background: #ffffff;
    border-top: 1px solid var(--hp-color-border);
    border-bottom: 1px solid var(--hp-color-border);
}

.hp-clients {
    padding: 2.5rem 0;
}

.hp-clients__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* Título opcional */
.hp-clients__title {
    text-align: center;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 2rem;
    opacity: .55;
}

.hp-clients--dark .hp-clients__title {
    color: #fff;
}

/* Grid de logos — se adapta automáticamente al número de logos */
.hp-clients__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 3rem;
}

/* Cada logo ocupa el espacio que necesita, con un máximo */
.hp-client {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-client__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity var(--hp-trans-base), transform var(--hp-trans-base);
}

.hp-client__link:hover,
.hp-client__link:focus-visible {
    text-decoration: none;
}

/* El <img> del logo */
.hp-client__logo {
    display: block;
    max-width: 160px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Modo oscuro: invertir logos claros */
.hp-clients--dark .hp-client__logo {
    filter: brightness(0) invert(1);
    opacity: .75;
}

.hp-clients--dark .hp-client__link:hover .hp-client__logo,
.hp-clients--dark .hp-client__link:focus-visible .hp-client__logo {
    opacity: 1;
}

/* Escala de grises + colorear en hover */
.hp-clients__grid--grayscale .hp-client__logo {
    filter: grayscale(100%);
    opacity: .6;
    transition: filter var(--hp-trans-base), opacity var(--hp-trans-base);
}

.hp-clients--dark .hp-clients__grid--grayscale .hp-client__logo {
    filter: brightness(0) invert(1);
    opacity: .5;
}

.hp-clients__grid--grayscale .hp-client:hover .hp-client__logo,
.hp-clients__grid--grayscale .hp-client:focus-within .hp-client__logo {
    filter: grayscale(0%);
    opacity: 1;
}

.hp-clients--dark .hp-clients__grid--grayscale .hp-client:hover .hp-client__logo,
.hp-clients--dark .hp-clients__grid--grayscale .hp-client:focus-within .hp-client__logo {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* Hover con leve elevación en los logos enlazados */
.hp-client__link:not(.hp-client__link--static):hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .hp-clients {
        padding: 2rem 0;
    }

    .hp-clients__grid {
        gap: 1.5rem 2rem;
    }

    .hp-client__logo {
        max-width: 120px;
        max-height: 48px;
    }
}

@media (max-width: 480px) {
    .hp-clients__grid {
        gap: 1.25rem 1.5rem;
    }

    .hp-client__logo {
        max-width: 100px;
        max-height: 40px;
    }
}

/* =========================================================================
   26. Sección Planes de Hosting + Currency Switcher
   ========================================================================= */

/* --- Currency Switcher -------------------------------------------------- */
.hp-currency-switcher {
    position: relative;
    display: inline-block;
}

.hp-currency-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: transparent;
    border: 1.5px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    font: inherit;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: var(--hp-color-text);
    cursor: pointer;
    transition: border-color var(--hp-trans-fast), background var(--hp-trans-fast);
    white-space: nowrap;
}

.hp-currency-switcher__toggle:hover,
.hp-currency-switcher__toggle[aria-expanded="true"] {
    border-color: var(--hp-color-primary);
    background: rgba(59,130,246,.05);
}

.hp-currency-switcher__arrow {
    font-size: .65em;
    transition: transform var(--hp-trans-fast);
}

.hp-currency-switcher__toggle[aria-expanded="true"] .hp-currency-switcher__arrow {
    transform: rotate(180deg);
}

.hp-currency-switcher__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    box-shadow: var(--hp-shadow-lg);
    list-style: none;
    margin: 0;
    padding: .4rem 0;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--hp-trans-base), visibility var(--hp-trans-base), transform var(--hp-trans-base);
}

.hp-currency-switcher.is-open .hp-currency-switcher__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hp-currency-switcher__option {
    display: block;
    padding: .5rem 1rem;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text);
    text-decoration: none;
    transition: background var(--hp-trans-fast);
}

.hp-currency-switcher__option:hover {
    background: #f8fafc;
    color: var(--hp-color-primary);
    text-decoration: none;
}

.hp-currency-switcher__option.is-active {
    color: var(--hp-color-primary);
    font-weight: 700;
    background: rgba(59,130,246,.06);
}

/* --- Sección Hosting (home) ---------------------------------------------- */
.hp-hosting {
    padding: 5rem 0;
    background: #f8fafc;
}

.hp-hosting__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-hosting__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.hp-hosting__header-text { flex: 1; }

.hp-hosting__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}

.hp-hosting__subtitle {
    color: var(--hp-color-text-muted);
    font-size: var(--hp-fs-lg);
    margin: 0;
    max-width: 560px;
}

.hp-hosting__switcher-wrap {
    flex-shrink: 0;
    padding-top: .25rem;
}

/* --- Grid de planes ------------------------------------------------------ */
.hp-hosting__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* --- Card de plan -------------------------------------------------------- */
.hp-hosting-card {
    background: #fff;
    border: 1.5px solid var(--hp-color-border);
    border-radius: var(--hp-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base);
}

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

/* Variante destacada */
.hp-hosting-card--featured {
    border-color: var(--hp-color-primary);
    background: linear-gradient(180deg, #f0f6ff 0%, #fff 40%);
    box-shadow: 0 8px 32px rgba(59,130,246,.15);
    transform: translateY(-8px);
    z-index: 1;
}

.hp-hosting-card--featured:hover {
    transform: translateY(-12px);
    box-shadow: 0 16px 40px rgba(59,130,246,.22);
}

/* Badge ("Más popular") */
.hp-hosting-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hp-color-primary);
    color: #fff;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Header del plan */
.hp-hosting-card__header { text-align: center; }

.hp-hosting-card__name {
    font-size: var(--hp-fs-2xl);
    font-weight: 800;
    margin: 0 0 .35rem;
    letter-spacing: -.02em;
    color: var(--hp-color-text);
}

.hp-hosting-card--featured .hp-hosting-card__name {
    color: var(--hp-color-primary);
}

.hp-hosting-card__subtitle {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    margin: 0;
    font-weight: 500;
}

/* Precio */
.hp-hosting-card__price-wrap {
    text-align: center;
    padding: 1.25rem 0;
    border-top: 1px solid var(--hp-color-border);
    border-bottom: 1px solid var(--hp-color-border);
}

.hp-hosting-card__price-regular {
    font-size: var(--hp-fs-base);
    color: var(--hp-color-text-soft);
    text-decoration: line-through;
    margin-bottom: .25rem;
}

.hp-hosting-card__price-regular .hp-price {
    font-size: inherit;
}

.hp-hosting-card__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
}

.hp-hosting-card__price .hp-price {
    font-family: var(--hp-font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--hp-color-text);
    letter-spacing: -.03em;
    line-height: 1;
}

.hp-hosting-card--featured .hp-hosting-card__price .hp-price {
    color: var(--hp-color-primary);
}

.hp-hosting-card__period {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    font-weight: 500;
}

.hp-hosting-card__price-na {
    font-size: var(--hp-fs-lg);
    color: var(--hp-color-text-muted);
    font-weight: 600;
}

.hp-hosting-card__sale-badge {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    padding: .15rem .65rem;
    border-radius: 999px;
    margin-top: .4rem;
}

/* Características */
.hp-hosting-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1;
}

.hp-hosting-card__feature {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text);
    line-height: 1.45;
}

.hp-hosting-card__feature i {
    flex-shrink: 0;
    font-size: 1rem;
}

.hp-hosting-card__feature i.fa-circle-check { color: #16a34a; }
.hp-hosting-card__feature i.fa-circle-xmark { color: #d1d5db; }

.hp-hosting-card__feature--inactive {
    color: var(--hp-color-text-soft);
    opacity: .6;
}

/* CTA */
.hp-hosting-card__cta-wrap { margin-top: auto; }

.hp-hosting-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .875rem 1.5rem;
    background: var(--hp-color-text);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 600;
    font-size: var(--hp-fs-base);
    text-decoration: none;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast);
}

.hp-hosting-card__cta:hover,
.hp-hosting-card__cta:focus-visible {
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.hp-hosting-card--featured .hp-hosting-card__cta {
    background: var(--hp-color-primary);
}

.hp-hosting-card--featured .hp-hosting-card__cta:hover {
    background: var(--hp-color-primary-dark);
}

.hp-hosting-card__cta i {
    transition: transform var(--hp-trans-fast);
}

.hp-hosting-card__cta:hover i {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 960px) {
    .hp-hosting__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .hp-hosting-card--featured { transform: none; }
    .hp-hosting-card--featured:hover { transform: translateY(-4px); }
    .hp-hosting__header { flex-direction: column; }
}

/* =========================================================================
   27. Page Template Hosting — Hero + Ilustración
   ========================================================================= */
.hp-page-hosting__hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    overflow: hidden;
}

.hp-page-hosting__hero-container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hp-page-hosting__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}

.hp-page-hosting__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 1rem;
}

.hp-page-hosting__subtitle {
    font-size: var(--hp-fs-lg);
    color: rgba(255,255,255,.8);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hp-page-hosting__hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.hp-page-hosting__hero-cta {
    font-size: var(--hp-fs-lg);
    padding: 1rem 2rem;
}

/* Trust pills */
.hp-page-hosting__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.hp-page-hosting__trust li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,.7);
}

.hp-page-hosting__trust i { color: #4ade80; }

/* Ilustración hero */
.hp-page-hosting__hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-hosting-illus {
    width: 100%;
    max-width: 380px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--hp-radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hp-hosting-illus__server {
    font-size: 4.5rem;
    color: #93c5fd;
    animation: hp-server-pulse 2.5s ease-in-out infinite;
}

@keyframes hp-server-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .7; transform: scale(.95); }
}

.hp-hosting-illus__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.hp-hosting-illus__stat {
    text-align: center;
}

.hp-hosting-illus__stat-value {
    display: block;
    font-family: var(--hp-font-heading);
    font-size: var(--hp-fs-xl);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

.hp-hosting-illus__stat-label {
    display: block;
    font-size: var(--hp-fs-xs);
    color: rgba(255,255,255,.6);
    margin-top: .2rem;
}

/* Plans wrap en la página */
.hp-page-hosting__plans-wrap .hp-hosting {
    background: #fff;
}

/* Content */
.hp-page-hosting__content {
    padding: 3rem 0;
}

.hp-page-hosting__content-container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* FAQ */
.hp-page-hosting__faq {
    padding: 4rem 0 5rem;
    background: #f8fafc;
}

.hp-page-hosting__faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-page-hosting__faq-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -.02em;
    margin-bottom: 2rem;
    text-align: center;
}

/* Hero switcher (en el hero) */
.hp-page-hosting__hero-switcher .hp-currency-switcher__toggle {
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
}

.hp-page-hosting__hero-switcher .hp-currency-switcher__toggle:hover {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.14);
}

.hp-page-hosting__hero-switcher .hp-currency-switcher__dropdown {
    background: #fff;
    color: var(--hp-color-text);
}

/* Responsive page hosting */
@media (max-width: 960px) {
    .hp-page-hosting__hero-container { grid-template-columns: 1fr; gap: 2.5rem; }
    .hp-page-hosting__hero-media { display: none; }
}

/* =========================================================================
   28. Sección About — Split 50/50
   ========================================================================= */

.hp-about {
    display: flex;
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

/* ── Lado izquierdo: imagen ────────────────────────────────────────────── */
.hp-about__image {
    flex: 0 0 50%;
    position: relative;
    background-color: #0a1628;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 500px;
}

/* Overlay degradado hacia la derecha para el corte suave */
.hp-about__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 55%,
        rgba(255, 255, 255, 0.06) 100%
    );
    pointer-events: none;
}

/* Placeholder */
.hp-about__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255,255,255,.25);
    background: linear-gradient(135deg, #0a1628, #142540);
    font-size: var(--hp-fs-sm);
    text-align: center;
    padding: 2rem;
}

.hp-about__image-placeholder i {
    font-size: 3rem;
    opacity: .3;
}

.hp-about__image-placeholder span {
    white-space: pre-line;
    line-height: 1.6;
}

/* ── Lado derecho: contenido ──────────────────────────────────────────── */
.hp-about__content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 4rem 5rem 5rem;
    /* Fondo oscuro sofisticado — mismo lenguaje visual que el Hero */
    background:
        linear-gradient(
            145deg,
            #070f1e 0%,
            #0c1a32 50%,
            #081526 100%
        );
    position: relative;
    overflow: hidden;
}

/* Decoración sutil de fondo — círculo difuso en la esquina */
.hp-about__content::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, .12) 0%,
        transparent 70%
    );
    bottom: -200px;
    right: -150px;
    pointer-events: none;
}

/* Eyebrow — color acento azul claro sobre fondo oscuro */
.hp-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #60a5fa;
    margin-bottom: 1rem;
}

.hp-about__eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a5fa;
    flex-shrink: 0;
    animation: hp-about-dot-pulse 2s ease-in-out infinite;
}

@keyframes hp-about-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.7); }
}

/* Título — blanco puro */
.hp-about__title {
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #ffffff;
    margin: 0 0 .875rem;
}

/* Subtítulo — blanco semitransparente */
.hp-about__subtitle {
    font-size: var(--hp-fs-lg);
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 1rem;
    line-height: 1.4;
}

/* Descripción — gris azulado claro */
.hp-about__description {
    font-size: var(--hp-fs-base);
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
    margin: 0 0 2rem;
    max-width: 480px;
}

/* CTA */
.hp-about__actions {
    margin-bottom: 2.5rem;
}

.hp-about__cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .875rem 1.75rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-base);
    text-decoration: none;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast), box-shadow var(--hp-trans-fast);
}

.hp-about__cta:hover,
.hp-about__cta:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59,130,246,.4);
}

.hp-about__cta i {
    transition: transform var(--hp-trans-fast);
}

.hp-about__cta:hover i {
    transform: translateX(3px);
}

/* ── Estadísticas coloridas sobre fondo oscuro ─────────────────────────── */
.hp-about__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 2rem;
}

.hp-about-stat {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem;
    border-radius: var(--hp-radius-md);
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .08);
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base), border-color var(--hp-trans-base), background var(--hp-trans-base);
}

.hp-about-stat:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
    border-color: var(--hp-about-stat-color, var(--hp-color-primary));
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* Icono con fondo de color de acento semitransparente */
.hp-about-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--hp-radius-md);
    background: color-mix(in srgb, var(--hp-about-stat-color, #3B82F6) 20%, transparent);
    color: var(--hp-about-stat-color, var(--hp-color-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: background var(--hp-trans-base);
}

.hp-about-stat:hover .hp-about-stat__icon {
    background: color-mix(in srgb, var(--hp-about-stat-color, #3B82F6) 30%, transparent);
}

/* Fallback para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .hp-about-stat__icon {
        background: rgba(59, 130, 246, .2);
    }
}

.hp-about-stat__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.hp-about-stat__value {
    font-family: var(--hp-font-heading);
    font-size: var(--hp-fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--hp-about-stat-color, var(--hp-color-primary));
    letter-spacing: -.02em;
    white-space: nowrap;
}

.hp-about-stat__label {
    font-size: var(--hp-fs-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    line-height: 1.3;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .hp-about {
        flex-direction: column;
    }

    .hp-about__image {
        flex: none;
        width: 100%;
        min-height: 300px;
        max-height: 440px;
    }

    .hp-about__image-overlay {
        background: linear-gradient(
            to bottom,
            transparent 50%,
            rgba(255,255,255,.08) 100%
        );
    }

    .hp-about__content {
        flex: none;
        width: 100%;
        padding: 3.5rem 2rem 4rem;
    }

    .hp-about__description {
        max-width: 100%;
    }
}

@media (max-width: 540px) {
    .hp-about__content {
        padding: 3rem 1.25rem 3.5rem;
    }

    .hp-about__stats {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .hp-about-stat {
        padding: .875rem;
    }
}