/* =============================================================
   OPSFET Flujo · Base
   Tokens de diseño, body lock, overlay fullscreen y reset interno.
   Cargar SIEMPRE primero — el resto de hojas depende de las variables.
   ============================================================= */

/* El atributo `hidden` SIEMPRE debe ocultar. Como casi todo en este CSS
   usa `display: ... !important` (necesario por la guerra con Elementor),
   sin esto el `[hidden]` queda vencido y los bloques que el JS oculta
   por condición siguen visibles. */
.opsfet-flujo [hidden] {
    display: none !important;
}

/* ---------- Tokens de diseño ---------- */
:root {
    --opsfet-verde:        #a3c93f;
    --opsfet-verde-oscuro: #8caf30;
    /* Solo para FONDOS de hover. Para texto usar --opsfet-verde-texto,
       que cumple contraste AA sobre blanco y sobre el verde claro. */
    --opsfet-verde-texto:  #566b12;
    --opsfet-verde-claro:  #ecf3d3;
    --opsfet-verde-glow:   rgba(163, 201, 63, .18);
    --opsfet-azul-oscuro:  #2c4a52;
    --opsfet-gris:         #5a6670;
    --opsfet-gris-claro:   #e8ebed;
    --opsfet-gris-borde:   #e2e6e9;
    --opsfet-blanco:       #ffffff;
    --opsfet-fondo:        #f3f7f5;
    --opsfet-texto:        #131617;
    --opsfet-texto-suave:  #5a6670;

    --opsfet-sombra-suave:  0 1px 2px rgba(20, 30, 40, .04), 0 2px 8px rgba(20, 30, 40, .04);
    --opsfet-sombra-media:  0 6px 22px rgba(20, 30, 40, .08), 0 2px 6px rgba(20, 30, 40, .04);
    --opsfet-sombra-fuerte: 0 18px 44px rgba(163, 201, 63, .22), 0 6px 14px rgba(20, 30, 40, .08);
    --opsfet-sombra-cta:    0 14px 34px rgba(163, 201, 63, .42), 0 4px 10px rgba(163, 201, 63, .25);

    --opsfet-radius-sm: 10px;
    --opsfet-radius:    16px;
    --opsfet-radius-lg: 22px;

    --opsfet-t-fast:   0.18s;
    --opsfet-t-base:   0.28s;
    --opsfet-t-slow:   0.42s;
    --opsfet-ease:     cubic-bezier(.4, 0, .2, 1);
    --opsfet-ease-out: cubic-bezier(.16, 1, .3, 1);
    --opsfet-spring:   cubic-bezier(.34, 1.56, .64, 1);

    --opsfet-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ---------- Bloqueamos el scroll del fondo cuando el flujo está activo ---------- */
body.opsfet-flujo-fullscreen {
    overflow: hidden !important;
}

/* Ocultar header/footer/breadcrumbs del tema (defensivo).
   Importante: excluimos NUESTRO header y footer con :not() para no esconderlos. */
body.opsfet-flujo-fullscreen header:not(.opsfet-flujo-header),
body.opsfet-flujo-fullscreen footer:not(.opsfet-flujo-footer),
body.opsfet-flujo-fullscreen .site-header,
body.opsfet-flujo-fullscreen .site-footer,
body.opsfet-flujo-fullscreen #masthead,
body.opsfet-flujo-fullscreen #colophon,
body.opsfet-flujo-fullscreen .entry-header:not(.opsfet-flujo-header),
body.opsfet-flujo-fullscreen .breadcrumbs,
body.opsfet-flujo-fullscreen .post-navigation {
    display: none !important;
}

/* ---------- Contenedor: overlay fullscreen ---------- */
.opsfet-flujo {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;

    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Fondo: dos halos de color (el patrón de puntos se retiró por coste de paint). */
    background-color: var(--opsfet-fondo) !important;
    background-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(163, 201, 63, .14), transparent 60%),
        radial-gradient(ellipse 60% 60% at 100% 100%, rgba(44, 74, 82, .08), transparent 60%) !important;

    color: var(--opsfet-texto) !important;
    font-family: var(--opsfet-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    animation: opsfetFadeIn .5s var(--opsfet-ease-out) both;
}

/* Si hay admin bar de WP, dejamos hueco para que se vea */
body.admin-bar.opsfet-flujo-fullscreen .opsfet-flujo {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.opsfet-flujo-fullscreen .opsfet-flujo {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
}

@keyframes opsfetFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Reset interno (baja especificidad con :where) ----------
   :where() tiene especificidad 0, así nuestras clases ganan a esto.
   Solo reseteamos elementos hoja, NO contenedores estructurales
   (header/footer/main/section/div) para que sus clases puedan estilarlos. */
.opsfet-flujo,
.opsfet-flujo *,
.opsfet-flujo *::before,
.opsfet-flujo *::after {
    box-sizing: border-box;
}

.opsfet-flujo :where(h1, h2, h3, h4, p, span, ul, ol, li) {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
}

.opsfet-flujo :where(button) {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-align: inherit;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
}

.opsfet-flujo :where(a) {
    color: inherit;
    background: transparent;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    border: 0;
    font: inherit;
}

/* Outline: nada por defecto, sí en focus-visible (accesibilidad teclado) */
.opsfet-flujo button,
.opsfet-flujo a {
    outline: 0 !important;
}

.opsfet-flujo button:focus-visible,
.opsfet-flujo a:focus-visible {
    outline: 3px solid var(--opsfet-verde) !important;
    outline-offset: 3px !important;
}

/* El JS pone foco programático en el título al cambiar de paso (a11y).
   Como el título tiene tabindex="-1" no puede recibir foco por Tab del usuario,
   solo programático. Por eso eliminamos el outline siempre — no es necesario. */
.opsfet-flujo-titulo:focus,
.opsfet-flujo-titulo:focus-visible {
    outline: none !important;
}


.opsfet-flujo :where(h1, h2, h3) {
    color: var(--opsfet-texto);
    font-family: inherit;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.opsfet-flujo :where(p) {
    color: var(--opsfet-texto-suave);
    line-height: 1.55;
    font-family: inherit;
}