/**
 * Home Styles — Educatea Campus
 * Estilos específicos del front-page.php.
 * Depende de design-system.css y global.css.
 *
 * @package Educatea Campus
 */

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.ec-hero {
    position: relative;
    min-height: calc(100vh - var(--ec-header-height));
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--ec-navy-dark) 0%, #1a1060 40%, var(--ec-indigo) 80%, var(--ec-violet) 100%);
    overflow: hidden;
    padding-block: var(--ec-space-24);
}

/* Fondo con patrón decorativo */
.ec-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(148, 0, 253, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(252, 162, 0, .10) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, rgba(65, 73, 182, 0.12) 0%, transparent 40%);
    pointer-events: none;
}

/* Partículas / grid decorativo */
.ec-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.ec-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ec-space-16);
    align-items: center;
}

.ec-hero__content {}

.ec-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-space-2);
    padding: var(--ec-space-2) var(--ec-space-4);
    background: rgba(252, 162, 0, .12);
    border: 1px solid rgba(252, 162, 0, .3);
    border-radius: var(--ec-radius-full);
    color: var(--ec-amber);
    font-size: var(--ec-text-sm);
    font-weight: var(--ec-font-semibold);
    letter-spacing: .04em;
    margin-bottom: var(--ec-space-6);
}

.ec-hero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-yellow);
    animation: ec-pulse 2s infinite;
}

.ec-hero__title {
    font-size: var(--ec-text-6xl);
    font-weight: var(--ec-font-extrabold);
    color: var(--ec-white);
    line-height: 1.1;
    margin-bottom: var(--ec-space-6);
}

.ec-hero__title span {
    background: linear-gradient(90deg, var(--ec-amber), var(--ec-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ec-hero__description {
    font-size: var(--ec-text-lg);
    color: var(--ec-on-dark-80);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: var(--ec-space-10);
}

.ec-hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-4);
    align-items: center;
}

.ec-hero__stats {
    display: flex;
    gap: var(--ec-space-8);
    margin-top: var(--ec-space-12);
    padding-top: var(--ec-space-8);
    border-top: 1px solid var(--ec-border-on-dark);
}

.ec-hero__stat-number {
    font-size: var(--ec-text-3xl);
    font-weight: var(--ec-font-extrabold);
    color: var(--ec-white);
    display: block;
    line-height: 1;
}

.ec-hero__stat-label {
    font-size: var(--ec-text-sm);
    color: var(--ec-on-dark-60);
    margin-top: var(--ec-space-1);
}

/* Imagen hero derecha */
.ec-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.ec-hero__img-wrap {
    position: relative;
    width: 480px;
    height: 540px;
    border-radius: var(--ec-radius-xl);
    overflow: hidden;
    box-shadow: var(--ec-shadow-lg), 0 0 60px var(--ec-magenta-alpha-20);
}

.ec-hero__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Tarjeta flotante sobre la imagen */
.ec-hero__floating-card {
    position: absolute;
    bottom: -24px;
    left: -24px;
    background: var(--ec-bg-on-dark);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--ec-border-on-dark-mid);
    border-radius: var(--ec-radius-md);
    padding: var(--ec-space-4) var(--ec-space-5);
    color: var(--ec-white);
    min-width: 200px;
}

.ec-hero__floating-card strong {
    display: block;
    font-size: var(--ec-text-xl);
    font-weight: var(--ec-font-extrabold);
    color: var(--ec-amber);
}

.ec-hero__floating-card span {
    font-size: var(--ec-text-sm);
    color: var(--ec-on-dark-80);
}

/* ─── Sección Presentación Marina ────────────────────────────────────────────── */
.ec-presentacion {
    background: var(--ec-bg);
}

.ec-presentacion__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ec-space-16);
    align-items: center;
}

.ec-presentacion__img-wrap {
    position: relative;
    border-radius: var(--ec-radius-xl);
    overflow: hidden;
    height: 520px;
    box-shadow: var(--ec-shadow-lg);
}

.ec-presentacion__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Decoración blob detrás de la imagen */
.ec-presentacion__img-bg {
    position: absolute;
    inset: -20px;
    background: linear-gradient(135deg, var(--ec-magenta), var(--ec-navy));
    border-radius: var(--ec-radius-xl);
    z-index: -1;
    opacity: .15;
}

.ec-presentacion__congreso-badge {
    display: flex;
    align-items: center;
    gap: var(--ec-space-3);
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-md);
    padding: var(--ec-space-4) var(--ec-space-5);
    box-shadow: var(--ec-shadow);
    margin-top: var(--ec-space-8);
}

.ec-presentacion__congreso-badge img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.ec-presentacion__congreso-badge-text strong {
    display: block;
    font-size: var(--ec-text-sm);
    font-weight: var(--ec-font-bold);
    color: var(--ec-navy);
    line-height: 1.2;
}

.ec-presentacion__congreso-badge-text span {
    font-size: var(--ec-text-xs);
    color: var(--ec-text-muted);
}

/* ─── Sección Cursos ──────────────────────────────────────────────────────────── */
.ec-cursos-home {
    background: var(--ec-surface-alt);
}

.ec-cursos-home__header {
    text-align: center;
    margin-bottom: var(--ec-space-16);
}

.ec-cursos-home__header .ec-section-subtitle {
    margin-inline: auto;
}

.ec-cursos-home__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ec-space-8);
    margin-bottom: var(--ec-space-12);
}

.ec-curso-card {}

.ec-curso-card__thumb {
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ec-navy) 0%, var(--ec-navy-mid) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ec-curso-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--ec-transition-slow);
}

.ec-curso-card:hover .ec-curso-card__thumb img {
    transform: scale(1.05);
}

.ec-curso-card__thumb-placeholder {
    color: var(--ec-on-dark-30);
    font-size: var(--ec-text-5xl);
}

.ec-curso-card__body {
    padding: var(--ec-space-6);
}

.ec-curso-card__category {
    font-size: var(--ec-text-xs);
    font-weight: var(--ec-font-semibold);
    color: var(--ec-violet);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: var(--ec-space-2);
}

.ec-curso-card__title {
    font-size: var(--ec-text-xl);
    font-weight: var(--ec-font-bold);
    color: var(--ec-navy);
    margin-bottom: var(--ec-space-3);
    line-height: 1.3;
}

.ec-curso-card__meta {
    display: flex;
    gap: var(--ec-space-4);
    margin-bottom: var(--ec-space-5);
}

.ec-curso-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--ec-space-1);
    font-size: var(--ec-text-sm);
    color: var(--ec-text-muted);
}

.ec-curso-card__meta-icon {
    font-style: normal;
    opacity: .7;
}

.ec-curso-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--ec-space-4);
    border-top: 1px solid var(--ec-border);
}

.ec-curso-card__price {
    font-size: var(--ec-text-xl);
    font-weight: var(--ec-font-extrabold);
    color: var(--ec-navy);
}

.ec-curso-card__price-currency {
    font-size: var(--ec-text-sm);
    font-weight: var(--ec-font-regular);
    color: var(--ec-text-muted);
    margin-left: var(--ec-space-1);
}

.ec-cursos-home__cta {
    text-align: center;
}

.ec-cursos-home__empty {
    text-align: center;
    padding: var(--ec-space-16);
    color: var(--ec-text-muted);
}

/* ─── CTA Soporte ────────────────────────────────────────────────────────────── */
.ec-cta-soporte {
    background: linear-gradient(135deg, var(--ec-indigo) 0%, #2d1a8e 40%, var(--ec-violet) 100%);
    position: relative;
    overflow: hidden;
}

.ec-cta-soporte::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 50%, rgba(255, 255, 255, .08) 0%, transparent 40%),
        radial-gradient(circle at 90% 50%, rgba(255, 255, 255, .06) 0%, transparent 40%);
    pointer-events: none;
}

.ec-cta-soporte__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin-inline: auto;
}

.ec-cta-soporte__title {
    font-size: var(--ec-text-4xl);
    font-weight: var(--ec-font-extrabold);
    color: var(--ec-white);
    margin-bottom: var(--ec-space-4);
    line-height: 1.2;
}

.ec-cta-soporte__text {
    font-size: var(--ec-text-lg);
    color: var(--ec-on-dark-85);
    line-height: 1.7;
    margin-bottom: var(--ec-space-10);
}

.ec-cta-soporte__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ec-space-4);
}

/* ─── Animaciones ────────────────────────────────────────────────────────────── */
@keyframes ec-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.85);
    }
}

@keyframes ec-fadeup {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-animate-fadeup {
    animation: ec-fadeup .6s ease both;
}

.ec-animate-fadeup--delay-1 {
    animation-delay: .1s;
}

.ec-animate-fadeup--delay-2 {
    animation-delay: .2s;
}

.ec-animate-fadeup--delay-3 {
    animation-delay: .35s;
}

.ec-animate-fadeup--delay-4 {
    animation-delay: .5s;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ec-hero__inner {
        grid-template-columns: 1fr;
    }

    .ec-hero__visual {
        display: none;
    }

    .ec-hero__title {
        font-size: var(--ec-text-4xl);
    }

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

    .ec-presentacion__inner {
        grid-template-columns: 1fr;
    }

    .ec-presentacion__img-wrap {
        height: 360px;
    }
}

@media (max-width: 640px) {
    .ec-hero {
        min-height: auto;
    }

    .ec-hero__title {
        font-size: var(--ec-text-3xl);
    }

    .ec-hero__stats {
        flex-direction: column;
        gap: var(--ec-space-4);
    }

    .ec-cursos-home__grid {
        grid-template-columns: 1fr;
    }

    .ec-cta-soporte__title {
        font-size: var(--ec-text-2xl);
    }

    .ec-hero__cta-group {
        flex-direction: column;
        align-items: flex-start;
    }
}