/* ============================================================
    WEBINAR.CSS — Lievant Webinar Template
    Usa CSS Custom Properties inyectadas desde ACF en el PHP:
        --wb-primary    → Color primario  (botones, acentos, countdown)
        --wb-secondary  → Color secundario (títulos hero, rol del speaker)
        --wb-icon-bg    → Fondo de íconos en agenda
    ============================================================ */

    /* ── Variables de respaldo (por si no carga el PHP) ─────────── */
    :root {
        --wb-primary:   #00c1cf;
        --wb-secondary: #061944;
        --wb-icon-bg:   #cf7400;

        --wb-white:     #ffffff;
        --wb-dark:      #0a0f1e;
        --wb-gray-text: #9ca3af;
        --wb-radius-md: 16px;
        --wb-radius-sm: 12px;
        --wb-transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* ── Reset mínimo ────────────────────────────────────────────── */
    .wb-page-wrapper *,
    .wb-page-wrapper *::before,
    .wb-page-wrapper *::after {
        box-sizing: border-box;
    }

    /* ════════════════════════════════════════════════════════════
    OVERRIDE DE OVERFLOW DEL TEMA
    El diagnóstico identificó dos elementos con overflow:hidden:
        • .wb-page-wrapper  (nuestro)
        • #page.hfeed.site  (del tema ThemeMove/Infinity)
    ════════════════════════════════════════════════════════════ */
    #page.hfeed.site,
    #page.site {
        overflow-x: visible !important;
    }

    /* ── Wrapper de página ───────────────────────────────────────── */
    .wb-page-wrapper {
        width: 100%;
        overflow: visible;
        position: relative;
    }

    .wb-article {
        display: block;
        position: relative;
    }

    /* ── Contenedor centrado ─────────────────────────────────────── */
    .wb-container {
        width: 100%;
        max-width: 1160px;
        margin-inline: auto;
        padding-inline: 24px;
    }

    /* ════════════════════════════════════════════════════════════
    FULL-WIDTH BREAKOUT — estrategia position + 100vw
    ──────────────────────────────────────────────────────────
    Funciona incluso cuando hay overflow:hidden en ancestros
    porque usa position:relative + left/transform en lugar de
    margin, escapando del flujo normal sin crear scroll.

        1. position: relative          → habilita left
        2. width: 100vw                → ocupa todo el viewport
        3. left: 50%                   → mueve el origen al centro
        4. transform: translateX(-50%) → recentra desde ese punto
        5. padding-inline con max()    → el contenido interior
            queda centrado y no se pega a los bordes en móvil
    ════════════════════════════════════════════════════════════ */
    .wb-section {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        padding-block: 80px;
        padding-inline: max(24px, calc((100vw - 1160px) / 2));
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-sizing: border-box;
    }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 1: HERO
    ════════════════════════════════════════════════════════════ */
    .wb-hero {
        padding-block: 0;
        line-height: 0;
    }

    .wb-hero__img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 2: REGISTRO
    ════════════════════════════════════════════════════════════ */
    .wb-section--registro {
        background-color: #f4f6f9;
        padding-block: 64px;
    }

    .wb-registro-grid {
        display: grid;
        grid-template-columns: 1fr 420px;
        gap: 48px;
        align-items: start;
    }

    /* ── Badge LIVE ──────────────────────────────────────────────── */
    .wb-live-badge {
        display: inline-flex;
        align-items: center;
        gap: 0px;
        margin-bottom: 20px;

            padding: 5px 10px;
        background: #fff;
        border: 1px solid #c3c3c3;
        border-radius: 20px;
        display: inline-flex;
        letter-spacing: 0;
        font-size: 16px;
    }

    .wb-live-badge__dot {
        position: relative;
        width: 25px;
        height: 25px;
    }

    .wb-live-badge__live {
        margin-left: 8px;
        font-weight: 900;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .wb-live-badge__session {
        font-weight: 300;
        font-size: 14px;
        letter-spacing: 0px;
    }

    /* Animación live dot */
    .ringring {
        border: 3px solid #ff0000;
        border-radius: 50%;
        height: 25px;
        width: 25px;
        position: absolute;
        top: 0;
        left: 0;
        animation: pulsate 1s ease-out infinite;
        opacity: 0;
    }

    .circle {
        width: 15px;
        height: 15px;
        background-color: #ff0000;
        border-radius: 50%;
        position: absolute;
        top: 5px;
        left: 5px;
        box-shadow: 0 0 13px 8px rgba(255, 255, 255, 0.6);
    }

    @keyframes pulsate {
        0%   { transform: scale(0.1); opacity: 0; }
        50%  { opacity: 1; }
        100% { transform: scale(1.2); opacity: 0; }
    }

    /* ── Título y descripción ────────────────────────────────────── */
    .wb-registro__title {
        font-size: clamp(2rem, 4vw, 3rem);
        color: var(--wb-secondary);
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.1;
        margin: 0 0 20px;
        letter-spacing: 0px;
    }

    .wb-registro__desc {
        font-size: 15px;
        line-height: 1.7;
        color: #444;
        margin-bottom: 28px;
    }

    .wb-registro__desc p { margin: 0 0 12px; }

    /* ── Event Card (fecha + plataforma) ─────────────────────────── */
    .event-card {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        padding: 20px 24px;
        margin-bottom: 28px;
    }

    .event-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .event-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.07);
        flex-shrink: 0;
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px;
        -ms-border-radius: 14px;
        -o-border-radius: 14px;
    }

    .icon-svg {
        width: 20px;
        height: 20px;
        color: #444;
    }

    .event-content { display: flex; flex-direction: column; }

    .event-label {
        margin: 0;
        font-size: 12px;
        color: var(--wb-gray-text);
    }

    .event-value {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: #2c2c2c;
        line-height: 1.2;
    }

    /* ── Countdown ───────────────────────────────────────────────── */
    .countdown-container {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .countdown-box {
        width: 78px;
        height: 88px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .countdown-number-wrapper {
        position: relative;
        width: 100%;
        height: 42px;
        overflow: hidden;
    }

    .countdown-number {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        font-size: 38px;
        font-weight: 800;
        line-height: 1;
        color: var(--wb-secondary);
        letter-spacing: -1px;
        transition:
            transform var(--wb-transition),
            opacity 0.45s ease;
    }

    .countdown-number.current { transform: translateY(0);     opacity: 1; }
    .countdown-number.exit    { transform: translateY(100%);  opacity: 0; }
    .countdown-number.next    { transform: translateY(-100%); opacity: 0; }
    .countdown-number.next.show { transform: translateY(0);   opacity: 1; }

    .countdown-label {
        margin-top: 8px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.8px;
        color: rgba(0, 0, 0, 0.5);
    }

    /* ── Formulario (columna derecha) ────────────────────────────── */
    .wb-registro__form {
        padding: 32px 28px;
    }

    .wb-form__title {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 0 8px;
        color: #1a1a1a;
        letter-spacing: 0px;
    }

    .wb-form__subtitle {
        font-size: 13px;
        color: var(--wb-gray-text);
        margin: 0 0 20px;
    }

    /* Estilos del formulario D365 */
    .textFormFieldBlock,
    .dateTimeFormFieldBlock,
    .twoOptionFormFieldBlock,
    .optionSetFormFieldBlock,
    .passesBlock,
    .multiOptionSetFormFieldBlock,
    .lookupFormFieldBlock {
        padding: 0 !important;
    }

    #formLievant .marketingForm input::placeholder { font-size: 14px !important; }

    #formLievant .marketingForm input,
    #formLievant .marketingForm select,
    #formLievant .marketingForm textarea {
        font-family: inherit !important;
        font-weight: 300 !important;
        font-size: 14px !important;
        border: none !important;
        padding: 8px 12px;
        margin: 6px 0 !important;
        border-radius: 10px;
        background: #f1f1f1 !important;
        width: 100%;
    }

    #formLievant .marketingForm button {
        width: 100%;
        background-color: var(--wb-primary);
        font-family: inherit !important;
        font-weight: 700 !important;
        border-radius: 20px;
        color: var(--wb-secondary);
        margin-top: 20px;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        transition: opacity 0.25s ease;
    }

    #formLievant .marketingForm button:hover { opacity: 0.85; }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 3: INTRO / DESCRIPCIÓN CENTRAL
    ════════════════════════════════════════════════════════════ */
    .wb-section--intro {
        background-color: var(--wb-primary);
        padding-block: 60px;
    }

    .wb-intro__inner { text-align: center; }

    /* ════════════════════════════════════════════════════════════
    TIPOGRAFÍA DE SECCIONES
    ════════════════════════════════════════════════════════════ */
    .wb-section__eyebrow {
        font-size: 1rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: rgba(255,255,255,0.75);
        margin: 0 0 8px;
        text-align: center;
    }

    .wb-section__title {
        font-size: clamp(2rem, 4vw, 3.4rem);
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        margin: 0 0 20px;
        line-height: 1.1;
        
    }

    .wb-section__title--dark { color: #111; }

    .wb-section__subtitle {
        font-size: 15px;
        text-align: center;
        max-width: 680px;
        margin-inline: auto;
        margin-bottom: 12px;
        line-height: 1.7;
        letter-spacing: 0px;
    }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 4: AGENDA — CARDS
    ════════════════════════════════════════════════════════════ */
    .wb-section--agenda {
        background-color: var(--wb-secondary);
        padding-block: 80px;
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 40px 0 36px;
    }

    /* Card */
    .card {
        position: relative;
        padding: 28px 24px;
        background: rgba(255,255,255,0.04);
        border-radius: var(--wb-radius-md);
        border: 1px solid rgba(255,255,255,0.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        overflow: hidden;
        transition:
            transform var(--wb-transition),
            border-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    .card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top, rgba(110,84,255,0.18), transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .card:hover {
        transform: translateY(-4px);
        border-color: var(--wb-primary);
        box-shadow:
            0 0 0 1px rgba(0,193,207,0.15),
            0 24px 48px rgba(0,0,0,0.3);
    }

    .card:hover::before { opacity: 1; }

    .card-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: var(--wb-icon-bg);
        color: var(--wb-white);
        transition: transform var(--wb-transition);
    }

    .card-icon svg { width: 22px; height: 22px; }
    .card:hover .card-icon { transform: scale(1.1); }

    .card-title {
        margin: 20px 0 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--wb-white);
        line-height: 1.3;
        letter-spacing: 0px;
    }

    .card-text {
        margin: 14px 0 0;
        font-size: 13px;
        line-height: 1.7;
        color: rgba(255,255,255,0.7);
    }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 5: AUDIENCIA
    ════════════════════════════════════════════════════════════ */
    .wb-section--audience {
        background-color: var(--wb-secondary-dark);
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .audience-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .audience-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 22px;
        background: rgba(255,255,255,0.04);
        border-radius: var(--wb-radius-md);
        border: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition:
            transform var(--wb-transition),
            border-color 0.35s ease;
    }

    .audience-card:hover {
        transform: translateY(-3px);
        border-color: var(--wb-primary);
    }

    .audience-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--wb-radius-sm);
        background: rgba(0,0,0,0.05);
        color: var(--wb-primary);
    }

    .audience-icon svg { width: 20px; height: 20px; }

    .audience-text {
        margin: 0;
        color: var(--wb-white);
        font-size: 15px;
        line-height: 1.5;
        font-weight: 500;
    }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 6: SPEAKERS
    Layout por card:
        ┌─────────┬──────────────┐
        │  FOTO   │     INFO     │  ← fila 1: 2 columnas
        ├─────────┴──────────────┤
        │         BIO            │  ← fila 2: ancho completo
        └────────────────────────┘
    ════════════════════════════════════════════════════════════ */
    .wb-section--speakers {
        background-color: var(--wb-white);
        padding-block: 80px;
    }
    
    /* Grid externo: 2 cards por fila */
    .wb-speakers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 40px;
    }
    
    /* Card: grid interno 2 filas */
    .wb-speaker-card {
        display: grid;
        grid-template-columns: 100px 1fr; /* foto | info */
        grid-template-rows: auto auto;    /* header | bio */
        grid-template-areas:
            "photo info"
            "bio   bio";
        gap: 0 20px;
        padding: 28px;
        align-items: start;
        align-content: start;
    }
    
    /* Foto */
    .wb-speaker__photo-wrap {
        grid-area: photo;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        align-self: center;
    }
    
    .wb-speaker__photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Info (nombre + rol + empresa) */
    .wb-speaker__info {
        grid-area: info;
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-self: center;
    }
    
    .wb-speaker__name {
        margin: 0;
        font-size: 2rem;
        font-weight: 800;
        color: #111;
        line-height: 1.2;
    }
    
    .wb-speaker__role {
        margin: 0;
        font-size: 0.95rem;
        color: var(--wb-secondary);
        font-weight: 600;
    }
    
    .wb-speaker__company {
        margin: 0;
        font-size: 0.9rem;
        color: #777;
        font-weight: 400;
    }
    
    /* Bio — ocupa las 2 columnas */
    .wb-speaker__bio {
        grid-area: bio;
        margin: 18px 0 0;
        padding-top: 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        font-size: 14px;
        line-height: 1.75;
        color: #555;
    }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 7: LUGAR (eventos presenciales)
    ════════════════════════════════════════════════════════════ */
    .wb-section--venue {
        background-color: var(--wb-white);
        padding-block: 80px;
    }

    .wb-venue-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
    }

    .wb-venue__name {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800;
        color: #111;
        margin: 8px 0 16px;
        line-height: 1.2;
    }

    .wb-venue__address {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 15px;
        color: #555;
        line-height: 1.6;
        margin: 0 0 28px;
    }

    .wb-venue__address svg {
        flex-shrink: 0;
        margin-top: 3px;
        color: var(--wb-primary);
    }

.wb-venue__image-wrap {
    position: relative;  /* contiene el img absoluto */
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	height:100%;
/*     min-height: 280px;   /* fallback si el texto es muy corto */ */
}
 
.wb-venue__image {
    position: absolute;  /* se pega a los 4 bordes del wrapper */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
 
.wb-venue__image-wrap:hover .wb-venue__image {
    transform: scale(1.03);
}

    /* Enlace de lugar en event-card */
    .event-value--link {
        font-size: 17px;
        font-weight: 600;
        color: var(--wb-primary);
        text-decoration: none;
        line-height: 1.2;
        margin: 0;
        display: block;
    }

    .event-value--link:hover { text-decoration: underline; }

    /* ════════════════════════════════════════════════════════════
    SECCIÓN 8: CTA FINAL
    ════════════════════════════════════════════════════════════ */
    .wb-section--cta {
        background-color: var(--wb-secondary);
        padding-block: 80px;
    }

    .wb-cta__inner {
        text-align: center;
    }

    .wb-cta__title {
        font-size: clamp(1.8rem, 3.5vw, 3rem);
        font-weight: 700;
        color: var(--wb-white);
        margin: 0 0 12px;
    }

    .wb-cta__subtitle {
        font-size: 15px;
        color: rgba(255,255,255,0.75);
        margin: 0 0 32px;
    }

    /* ════════════════════════════════════════════════════════════
    BOTÓN COMPARTIDO
    ════════════════════════════════════════════════════════════ */
    .wb-btn {
        display: inline-block;
        padding: 14px 36px;
        background-color: var(--wb-primary);
        color: var(--wb-secondary);
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.5px;
        border-radius: 999px;
        text-decoration: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .wb-btn:hover {
        opacity: 0.88;
        transform: translateY(-2px);
        color: var(--wb-secondary);
    }

    .wb-cta-center { text-align: center; margin-top: 12px; }

    /* ════════════════════════════════════════════════════════════
    GLASSBOX COMPARTIDO
    ════════════════════════════════════════════════════════════ */
    .glassbox {
        background: rgba(255,255,255,0.55);
        border-radius: var(--wb-radius-md);
        box-shadow: 0 4px 30px rgba(0,0,0,0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.2);
    }

    /* ════════════════════════════════════════════════════════════
    RESPONSIVO
    ════════════════════════════════════════════════════════════ */

    /* Tablet ─────────────────────────────────────────────────── */
    @media (max-width: 1100px) {
        .cards-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 900px) {
        .wb-registro-grid {
            grid-template-columns: 1fr;
        }

        .wb-registro__form {
            order: -1; /* Formulario primero en móvil */
            width: 80vw;
        }

        .wb-speakers-grid {
            grid-template-columns: 1fr;
        }

        .wb-venue-grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        /* Imagen del venue primero en tablet/móvil */
        .wb-venue__image-wrap { order: -1; }
    }

    /* Móvil ──────────────────────────────────────────────────── */
    @media (max-width: 640px) {
        .wb-section { padding-block: 52px; }

        .wb-section--registro { padding-block: 40px; }

        .cards-grid { grid-template-columns: 1fr; gap: 16px; }

        .audience-list { grid-template-columns: 1fr; }

        .event-card { flex-direction: column; gap: 16px; }

        .wb-speakers-grid { grid-template-columns: 1fr; }

        .countdown-container { gap: 8px; }

        .countdown-box { width: 64px; height: 76px; }

        .countdown-number { font-size: 30px; }

        .audience-card { align-items: flex-start; }

        /* Speaker card: apila en móvil */
        .wb-speaker-card {
            grid-template-columns: 1fr;
            grid-template-areas:
                "photo"
                "info"
                "bio";
            text-align: center;
        }

        .wb-speaker__photo-wrap { justify-self: center; }

        .wb-speaker__info { align-items: center; }

        .wb-speaker__bio { text-align: left; }
    }

    /* ════════════════════════════════════════════════════════════
    MODAL REGISTRO EXITOSO
    ════════════════════════════════════════════════════════════ */
    .wb-success-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 24px;
    }

    .wb-success-modal {
        background: #fff;
        border-radius: 20px;
        padding: 48px 40px;
        max-width: 480px;
        width: 100%;
        text-align: center;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
        animation: wb-modal-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes wb-modal-in {
        from { transform: translateY(24px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .wb-success__icon {
        width: 64px;
        height: 64px;
        background: var(--wb-primary);
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }

    .wb-success__title {
        font-size: 1.6rem;
        font-weight: 800;
        color: #111;
        margin: 0 0 12px;
        letter-spacing: 0px;
    }

    .wb-success__text {
        font-size: 15px;
        color: #555;
        line-height: 1.7;
        margin: 0 0 28px;
    }

    .wb-success__cals {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .wb-cal-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .wb-cal-btn:hover {
        opacity: 0.85;
        transform: translateY(-2px);
    }

    .wb-cal-btn--google {
        background: #4285f4;
        color: #fff !important;
    }

    .wb-cal-btn--outlook {
        background: #0078d4;
        color: #fff;
    }
    .wb-cal-btn--m365 {
        background: #d83b01;
        color: #fff;
    }

    .wb-success__close {
        background: none;
        border: none;
        font-size: 13px;
        color: #aaa;
        cursor: pointer;
        text-decoration: underline;
        padding: 0;
    }

    .wb-success__close:hover { color: #555; }

    @media (max-width: 480px) {
        .wb-success-modal { padding: 36px 24px; }
        .wb-success__cals { flex-direction: column; align-items: center; }
    }