/* ==========================================================================
   HERO — Composición de imágenes flotantes del producto (OpoVinco Showcase)
   Configurable desde el panel de administración (Hero · Imágenes flotantes).
   Namespace: .opogc-hero-showcase
   ========================================================================== */

/* --- Ajuste cuando no hay ninguna imagen configurada en el hero --- */
.opogc-hero-inner--no-visual {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 680px;
}

/* --- Contenedor visual del hero --- */
.opogc-hero-visual {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.opogc-hero-visual--empty {
    display: none !important;
}

/* --- Grid del hero en PC/escritorio (proporción equilibrada con presencia aumentada ~16%) --- */
@media (min-width: 1025px) {
    .opogc-hero-inner:not(.opogc-hero-inner--no-visual) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
        gap: clamp(2rem, 3.5vw, 3.25rem) !important;
    }
}

/* --- Escenario de la composición (presencia aumentada ~16% con margen de respiración) --- */
.opogc-hero-showcase {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 630px;
    min-height: 530px;
    margin-left: auto;
    margin-right: 1.25rem;
}

/* --- Halo de luz ambiental sutil detrás del conjunto (profundidad SaaS OpoVinco) --- */
.opogc-hero-showcase::before {
    content: "";
    position: absolute;
    inset: -8% -4% -6% -4%;
    background: radial-gradient(
        circle at 52% 48%,
        rgba(16, 185, 129, 0.065) 0%,
        rgba(16, 185, 129, 0.025) 38%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* --- Sombra ambiental conjunta bajo el conjunto (suelo difuso invisible SaaS) --- */
.opogc-hero-showcase::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 6%;
    bottom: 4%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(15, 23, 42, 0.14) 0%,
        rgba(15, 23, 42, 0.07) 38%,
        rgba(15, 23, 42, 0.02) 65%,
        transparent 78%
    );
    filter: blur(12px);
    opacity: 0.52;
    pointer-events: none;
    z-index: 0;
}

/* --- Pieza base (elemento exterior interactivo) --- */
.opogc-hero-showcase__item {
    position: absolute;
    display: block;
    text-decoration: none;
    outline: none;
    transform-origin: center center;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.28s ease;
    -webkit-tap-highlight-color: transparent;
}

.opogc-hero-showcase__item--static {
    cursor: default;
}

/* --- Contenedor interno exclusivo de la animación flotante --- */
.opogc-hero-showcase__float {
    display: block;
    will-change: transform;
}

/* --- Imagen del producto --- */
.opogc-hero-showcase__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
}

/* ==========================================================================
   DISTRIBUCIÓN DE LAS TRES PIEZAS (ESCRITORIO)
   ========================================================================== */

/* 1. TEMARIO VISUAL — Pieza protagonista (frontal, mayor tamaño, sombra profunda) */
.opogc-hero-showcase__item--temario {
    --opogc-item-rot: -3deg;
    left: 2%;
    top: 12%;
    width: 58%;
    z-index: 3;
    transform: rotate(var(--opogc-item-rot));
}

.opogc-hero-showcase__item--temario .opogc-hero-showcase__img {
    box-shadow:
        0 28px 56px -20px rgba(15, 23, 42, 0.22),
        0 4px 12px -2px rgba(15, 23, 42, 0.08),
        0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

.opogc-hero-showcase__item--temario .opogc-hero-showcase__float {
    animation: opogcFloatTemario 8.2s ease-in-out infinite alternate;
    animation-delay: 0s;
}

/* 2. TEST — Pieza secundaria trasera (arriba-derecha, sombra más ligera) */
.opogc-hero-showcase__item--test {
    --opogc-item-rot: 4deg;
    right: 0.5%;
    top: 1%;
    width: 49%;
    z-index: 1;
    transform: rotate(var(--opogc-item-rot));
}

.opogc-hero-showcase__item--test .opogc-hero-showcase__img {
    box-shadow:
        0 16px 32px -12px rgba(15, 23, 42, 0.13),
        0 2px 6px -1px rgba(15, 23, 42, 0.05),
        0 1px 2px 0 rgba(15, 23, 42, 0.03);
}

.opogc-hero-showcase__item--test .opogc-hero-showcase__float {
    animation: opogcFloatTest 9.4s ease-in-out infinite alternate;
    animation-delay: -3.2s;
}

/* 3. PLANIFICADOR — Pieza secundaria intermedia (abajo-derecha, sombra intermedia) */
.opogc-hero-showcase__item--plan {
    --opogc-item-rot: -2deg;
    right: 0.5%;
    top: 54.5%;
    width: 50%;
    z-index: 2;
    transform: rotate(var(--opogc-item-rot));
}

.opogc-hero-showcase__item--plan .opogc-hero-showcase__img {
    box-shadow:
        0 20px 42px -14px rgba(15, 23, 42, 0.16),
        0 3px 8px -2px rgba(15, 23, 42, 0.06),
        0 1px 2px 0 rgba(15, 23, 42, 0.04);
}

.opogc-hero-showcase__item--plan .opogc-hero-showcase__float {
    animation: opogcFloatPlan 7.5s ease-in-out infinite alternate;
    animation-delay: -5.1s;
}

/* --- Animaciones flotantes verticales elegantes (sin rotación en el keyframe) --- */
@keyframes opogcFloatTemario {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes opogcFloatTest {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

@keyframes opogcFloatPlan {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-9px); }
}

/* ==========================================================================
   ADAPTACIONES PARA 1 O 2 PIEZAS VISIBLES
   ========================================================================== */

/* Con 2 piezas: equilibrio armonioso */
.opogc-hero-showcase--count-2 .opogc-hero-showcase__item:first-child {
    left: 2%;
    top: 12%;
    width: 56%;
    z-index: 2;
    transform: rotate(-3deg);
}

.opogc-hero-showcase--count-2 .opogc-hero-showcase__item:last-child {
    right: 2%;
    bottom: 8%;
    width: 52%;
    z-index: 1;
    transform: rotate(4deg);
}

/* Con 1 pieza: centrada y destacada */
.opogc-hero-showcase--count-1 {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opogc-hero-showcase--count-1 .opogc-hero-showcase__item {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 82%;
    max-width: 380px;
    transform: rotate(-1.5deg);
    margin: 0 auto;
}

/* ==========================================================================
   INTERACCIÓN (HOVER Y TECLADO)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .opogc-hero-showcase__item:not(.opogc-hero-showcase__item--static):hover {
        z-index: 10 !important;
        transform: rotate(var(--opogc-item-rot, 0deg)) scale(1.02);
    }

    .opogc-hero-showcase__item:not(.opogc-hero-showcase__item--static):hover .opogc-hero-showcase__img {
        box-shadow:
            0 32px 64px -16px rgba(15, 23, 42, 0.22),
            0 4px 12px 0 rgba(16, 185, 129, 0.10),
            0 0 0 1.5px rgba(16, 185, 129, 0.35);
    }

    .opogc-hero-showcase__item:hover .opogc-hero-showcase__float {
        animation-play-state: paused;
    }
}

.opogc-hero-showcase__item:focus-visible {
    z-index: 10 !important;
    outline: 3px solid var(--opogc-green-pastel, #4CAF7D);
    outline-offset: 4px;
    border-radius: 16px;
}

.opogc-hero-showcase__item:focus-visible .opogc-hero-showcase__float {
    animation-play-state: paused;
}

/* ==========================================================================
   WAITLIST HERO — MÓDULO DE CONVERSIÓN PREMIUM
   ========================================================================== */

.opogc-hero__cta--wl {
    margin-top: 0.85rem;
    margin-bottom: 0;
    width: 100%;
    max-width: 535px;
}

.opogc-wl--hero {
    width: 100%;
    max-width: 535px;
    text-align: left;
}

.opogc-wl--hero .opogc-wl__form {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    width: 100%;
}

/* Wrapper del formulario: superficie blanca limpia, píldora, borde verde/gris sutil, sombra amplia y suave */
.opogc-wl--hero .opogc-wl__pill-box {
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 9999px;
    padding: 5px 6px 5px 18px;
    box-shadow:
        0 10px 25px -4px rgba(15, 23, 42, 0.08),
        0 4px 10px -2px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(16, 185, 129, 0.06);
    gap: 0.5rem;
    box-sizing: border-box;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.opogc-wl--hero .opogc-wl__pill-box:hover {
    border-color: rgba(16, 185, 129, 0.42);
    box-shadow:
        0 14px 28px -4px rgba(15, 23, 42, 0.10),
        0 6px 12px -2px rgba(15, 23, 42, 0.05),
        0 0 0 1px rgba(16, 185, 129, 0.10);
}

.opogc-wl--hero .opogc-wl__pill-box:focus-within {
    border-color: #10b981;
    box-shadow:
        0 12px 28px -4px rgba(15, 23, 42, 0.09),
        0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* Campo email: editable, fondo transparente sobre píldora blanca, placeholder de contraste adecuado */
.opogc-wl--hero .opogc-wl__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    color: #0f172a;
    padding: 0.65rem 0.5rem;
    line-height: 1.4;
    box-sizing: border-box;
}

.opogc-wl--hero .opogc-wl__input::placeholder {
    color: #64748b;
    opacity: 1;
    font-weight: 450;
}

/* Botón: verde OpoVinco, sombra sutil estática, hover discreto, texto íntegro visible */
.opogc-wl--hero .opogc-wl__btn {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #059669;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.90rem;
    font-weight: 600;
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 9999px;
    padding: 0.72rem 1.45rem;
    white-space: nowrap;
    margin: 0;
    box-shadow: 0 2px 6px -1px rgba(5, 150, 105, 0.30);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .opogc-wl--hero .opogc-wl__btn:hover {
        background: #047857;
        box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.40);
        transform: translateY(-1px);
    }
}

.opogc-wl--hero .opogc-wl__btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.25);
}

.opogc-wl--hero .opogc-wl__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

/* Nota inferior y Privacidad: inmediatamente debajo, icono pequeño y sobrio, alineada a la izquierda */
.opogc-wl--hero .opogc-wl__nota {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.65rem 0 0 0.5rem;
    padding: 0;
    font-size: 0.81rem;
    line-height: 1.4;
    color: #64748b;
    text-align: left;
    justify-content: flex-start;
}

.opogc-wl--hero .opogc-wl__nota svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #10b981;
}

.opogc-wl--hero .opogc-wl__nota a {
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.18s ease;
}

.opogc-wl--hero .opogc-wl__nota a:hover {
    color: #059669;
}

/* Estado de error: justo debajo del formulario, color rojo oscuro moderado, margen ~8px */
.opogc-wl--hero .opogc-wl__error {
    margin: 8px 0 0 0.5rem;
    font-size: 0.83rem;
    font-weight: 500;
    color: #991b1b;
    line-height: 1.35;
}

.opogc-wl--hero .opogc-wl__form.is-invalid .opogc-wl__pill-box {
    border-color: #ef4444;
    box-shadow:
        0 4px 14px rgba(239, 68, 68, 0.10),
        0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet (≤1024px): menor solapamiento, giros más suaves y flotación reducida ~20% */
@media (max-width: 1024px) {
    .opogc-hero-showcase {
        min-height: 430px;
        max-width: 530px;
        margin-inline: auto;
    }

    .opogc-hero-showcase__item--temario {
        width: 58%;
        transform: rotate(-2.5deg);
    }

    .opogc-hero-showcase__item--test {
        width: 50%;
        transform: rotate(3deg);
    }

    .opogc-hero-showcase__item--plan {
        width: 52%;
        top: 45%;
        right: 5%;
        transform: rotate(-1.5deg);
    }

    .opogc-hero-showcase::after {
        opacity: 0.42;
        bottom: 5%;
        height: 13%;
    }

    @keyframes opogcFloatTemario {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-8px); }
    }

    @keyframes opogcFloatTest {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-6.5px); }
    }

    @keyframes opogcFloatPlan {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-7px); }
    }
}

/* ==========================================================================
   HERO MÓVIL (≤720px) — JERARQUÍA, RITMO, ORDEN Y ACCESIBILIDAD
   ========================================================================== */
@media (max-width: 720px) {
    /* --- 1. Reordenación visual del hero con Flexbox ---
       0: Pregunta -> 1: Titular -> 2: Subtítulo -> 3: Formulario (se ve sin bajar) ->
       4: Láminas -> 5: Beneficios -> 6: Fundadores -> 7: Confianza */
    .opogc-hero-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        text-align: center !important;
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .opogc-hero-content {
        display: contents !important;
    }

    .opogc-hero-title {
        order: 1 !important;
        font-size: clamp(1.62rem, 6.6vw, 2.05rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.025em !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        word-break: normal !important;
    }

    .opogc-hero-title__main,
    .opogc-hero-title__accent {
        display: block !important;
        max-width: 100% !important;
    }

    .opogc-hero__subtitle {
        order: 2 !important;
        margin-top: 0 !important;
        margin-bottom: 0.85rem !important;
        font-size: 0.98rem !important;
        line-height: 1.48 !important;
        text-align: center !important;
    }

    .opogc-hero-visual {
        order: 4 !important;
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 1.15rem !important;
    }

    .opogc-bento-panel {
        order: 5 !important;
        margin-top: 0 !important;
        margin-bottom: 1.15rem !important;
        padding: 0.65rem 0.75rem !important;
        border-radius: 20px !important;
        text-align: left !important;
    }

    .opogc-hero__cta {
        order: 3 !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important; /* aire antes de las láminas */
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-fd {
        order: 6 !important;
        display: inline-flex !important;
        justify-content: center !important;
        margin-top: 0 !important; /* ya separa el margen de las tarjetas */
        margin-bottom: 0.35rem !important;
        text-align: center !important;
    }

    .opogc-hero-content > .opogc-trust-bar-inner,
    .opogc-hero-inner > .opogc-trust-bar-inner {
        order: 7 !important;
        justify-content: center !important;
        margin-top: 0.65rem !important;
        margin-bottom: 0.5rem !important;
        gap: 1rem !important;
    }

    /* --- 2. Composición de las 3 láminas en móvil (OpoVinco Showcase) ---
       - Escenario vertical con altura real (clamp 390px-440px) para alojar el conjunto sin cortes
       - Temario como pieza grande y protagonista (arriba, centrada, z-index 3)
       - Test y Planificador secundarias abajo, solapadas con profundidad y ángulo
       - Sin overflow oculto: preserva sombras, bordes redondeados y foco accesible */
    .opogc-hero-showcase {
        position: relative !important;
        width: min(100%, 360px) !important;
        max-width: 360px !important;
        min-height: clamp(390px, 105vw, 440px) !important;
        height: clamp(390px, 105vw, 440px) !important;
        margin: 0.25rem auto 1rem auto !important;
    }

    .opogc-hero-showcase::after {
        left: 8% !important;
        right: 6% !important;
        bottom: 4% !important;
        height: 11% !important;
        opacity: 0.28 !important;
        filter: blur(9px) !important;
    }

    .opogc-hero-showcase__item {
        position: absolute !important;
        display: block !important;
        margin: 0 !important;
        outline: none;
        transform-origin: center center;
        -webkit-tap-highlight-color: transparent;
    }

    .opogc-hero-showcase__float {
        display: block !important;
        will-change: transform;
    }

    .opogc-hero-showcase__img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
        transition: box-shadow 0.25s ease !important;
    }

    /* 1. Temario: protagonista, mayor tamaño, centrado superior, frontal */
    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--temario {
        --opogc-item-rot: -2.5deg;
        width: 74% !important;
        max-width: 270px !important;
        top: 2% !important;
        left: 13% !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 3 !important;
        transform: rotate(var(--opogc-item-rot)) !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--temario .opogc-hero-showcase__img {
        box-shadow: 0 18px 36px -10px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--temario .opogc-hero-showcase__float {
        animation: opogcFloatTemarioMob 7.4s ease-in-out infinite alternate !important;
        animation-delay: 0s !important;
    }

    /* 2. Planificador: secundaria, abajo-izquierda, solapada bajo Temario */
    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--plan {
        --opogc-item-rot: -2.5deg;
        width: 48% !important;
        max-width: 185px !important;
        top: 60.5% !important;
        left: 1.5% !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
        transform: rotate(var(--opogc-item-rot)) !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--plan .opogc-hero-showcase__img {
        box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.14), 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--plan .opogc-hero-showcase__float {
        animation: opogcFloatPlanMob 6.8s ease-in-out infinite alternate !important;
        animation-delay: -4.2s !important;
    }

    /* 3. Test: secundaria, abajo-derecha, inclinada hacia la derecha, capa intermedia */
    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--test {
        --opogc-item-rot: 3deg;
        width: 48% !important;
        max-width: 185px !important;
        top: 64.5% !important;
        right: 1.5% !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 2 !important;
        transform: rotate(var(--opogc-item-rot)) !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--test .opogc-hero-showcase__img {
        box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.14), 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--test .opogc-hero-showcase__float {
        animation: opogcFloatTestMob 8.6s ease-in-out infinite alternate !important;
        animation-delay: -2.6s !important;
    }

    /* Pausar animación en toque/foco/activo */
    .opogc-hero-showcase__item:active .opogc-hero-showcase__float,
    .opogc-hero-showcase__item:focus-visible .opogc-hero-showcase__float {
        animation-play-state: paused !important;
    }

    /* Animaciones flotantes móviles discretas (3.5px a 4.5px max) */
    @keyframes opogcFloatTemarioMob {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-4.5px); }
    }

    @keyframes opogcFloatPlanMob {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-3.5px); }
    }

    @keyframes opogcFloatTestMob {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-3.5px); }
    }

    .opogc-hero-showcase--count-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.65rem !important;
        height: auto !important;
        min-height: auto !important;
    }

    .opogc-hero-showcase--count-2 .opogc-hero-showcase__item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
    }

    .opogc-hero-showcase--count-1 {
        display: flex !important;
        justify-content: center !important;
        height: auto !important;
        min-height: auto !important;
    }

    .opogc-hero-showcase--count-1 .opogc-hero-showcase__item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin-inline: auto !important;
    }

    /* --- 3. Beneficios: corrección completa de truncado (1 columna vertical) --- */
    .opogc-bento-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .opogc-bento-pill {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.65rem 0.85rem !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
    }

    .opogc-bento-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .opogc-bento-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .opogc-bento-text {
        flex: 1 !important;
        min-width: 0 !important;
        line-height: 1.3 !important;
    }

    .opogc-bento-title {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.25 !important;
    }

    .opogc-bento-desc {
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        color: #64748b !important;
        margin-top: 2px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3 !important;
    }

    /* --- 4. Formulario de acceso anticipado: input visible a anchura completa + botón debajo --- */
    .opogc-hero__cta--wl {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important; /* igual que .opogc-hero__cta: aire antes de las láminas */
    }

    .opogc-wl--hero {
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .opogc-wl--hero .opogc-wl__form {
        width: 100% !important;
    }

    .opogc-wl--hero .opogc-wl__pill-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 9px !important;
    }

    .opogc-wl--hero .opogc-wl__input {
        width: 100% !important;
        flex: none !important;
        background: #ffffff !important;
        border: 1px solid rgba(16, 185, 129, 0.30) !important;
        border-radius: 12px !important;
        padding: 0.82rem 1rem !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        color: #0f172a !important;
        min-height: 48px !important;
        box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .opogc-wl--hero .opogc-wl__input:focus {
        border-color: #10b981 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important;
    }

    .opogc-wl--hero .opogc-wl__form.is-invalid .opogc-wl__input {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important;
    }

    .opogc-wl--hero .opogc-wl__btn {
        width: 100% !important;
        flex: none !important;
        border-radius: 12px !important;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        min-height: 48px !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
        box-shadow: 0 3px 8px -1px rgba(5, 150, 105, 0.32) !important;
    }

    .opogc-wl--hero .opogc-wl__error {
        margin: 8px auto 0 auto !important;
        text-align: center !important;
    }

    .opogc-wl--hero .opogc-wl__nota {
        justify-content: center !important;
        text-align: center !important;
        margin: 0.55rem auto 0 auto !important;
        font-size: 0.79rem !important;
        padding-left: 0 !important;
    }
}

/* Móvil muy estrecho (≤340px): escala proporcional suave de la composición */
@media (max-width: 340px) {
    .opogc-hero-showcase {
        height: 375px !important;
        min-height: 375px !important;
    }

    .opogc-hero-showcase::after {
        display: none !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--temario {
        width: 70% !important;
        left: 15% !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--plan {
        width: 45% !important;
        left: 2% !important;
        top: 60% !important;
    }

    .opogc-hero-showcase--count-3 .opogc-hero-showcase__item--test {
        width: 45% !important;
        right: 2% !important;
        top: 63.5% !important;
    }
}

/* ==========================================================================
   ACCESIBILIDAD — PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .opogc-hero-showcase__float {
        animation: none !important;
        transform: none !important;
    }

    .opogc-hero-showcase__item {
        transition: none !important;
    }

    .opogc-hero-showcase__item:hover {
        transform: rotate(var(--opogc-item-rot, 0deg)) !important;
    }
}


/* --------------------------------------------------------------------------
   Pregunta de dolor encima del titular (top.php). Más pequeña que el titular,
   en negrita y en el oscuro del texto. En móvil va la primera (order 0) y
   compacta, para no empujar más de la cuenta lo que hay debajo.
   -------------------------------------------------------------------------- */
.opogc-hero .opogc-hero__pregunta {
    margin: 0 0 0.6rem;
    font-family: var(--opogc-font-body);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--opogc-text);
    text-wrap: balance;
    overflow-wrap: break-word;
}

@media (max-width: 720px) {
    .opogc-hero .opogc-hero__pregunta {
        order: 0 !important;
        margin: 0 0 0.4rem !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}