/* Nota: a diferencia del prototipo standalone, aquí NO se fuerza
     html/body a negro global — el theme ya resetea márgenes y el fondo
     queda scoped a #wh-app para no afectar el resto del sitio. */
  :root{
    /* ---- WorkHard design tokens ---- */
    --ink:#0a0a0a;
    --surface:#141414;
    --surface-2:#1f1f1f;
    --chalk:#ffffff;
    --chalk-dim:#b0b0b0;
    --wh-green:#00eb00;
    --wh-green-dim:#00a800;
    --whatsapp:#25D366;
    --mono: 'Nunito', sans-serif;
    --display: 'Krona One', sans-serif;
    --body: 'Nunito', sans-serif;
    /* Fallback de 1% del alto real de viewport, calculado por JS
       (window.innerHeight) para navegadores que no soportan dvh. Se
       actualiza en resize/orientationchange — ver quiz-experience.js. */
    --vh: 1vh;
  }
  #wh-app *{box-sizing:border-box;}
  #wh-app{
    background:var(--ink);
    color:var(--chalk) !important;
    font-family:var(--body);
    overflow-x:hidden;
    position:relative;
  }
  #wh-app section{ min-height:100vh; width:100%; position:relative; }

  /* Botón fijo de WhatsApp: SIEMPRE visible (position:fixed, no depende
     de qué sección esté activa), centrado verticalmente a la derecha de
     la pantalla. Vive como hijo directo de #wh-app, fuera de las
     <section>, para no heredar su overflow:hidden. Color de marca de
     WhatsApp + el mismo lenguaje "neón" (glow en capas) del resto del
     módulo, con un pulso sutil para llamar la atención sin ser invasivo. */
  .wh-whatsapp-float{
    position:fixed;
    top:50%; right:clamp(16px, 3vw, 32px);
    transform:translateY(-50%);
    z-index:999;
    width:60px; height:60px; border-radius:50%;
    background:var(--whatsapp) !important;
    color:#fff !important;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    box-shadow:0 0 0 6px rgba(37,211,102,.16), 0 0 26px 4px rgba(37,211,102,.5), 0 6px 18px rgba(0,0,0,.4);
    animation:wh-whatsapp-pulse 2.6s ease-in-out infinite;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wh-whatsapp-float svg{ width:30px; height:30px; display:block; }
  .wh-whatsapp-float:hover{
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 0 0 8px rgba(37,211,102,.22), 0 0 34px 8px rgba(37,211,102,.65), 0 6px 18px rgba(0,0,0,.45);
  }
  @keyframes wh-whatsapp-pulse{
    0%, 100%{ box-shadow:0 0 0 6px rgba(37,211,102,.16), 0 0 26px 4px rgba(37,211,102,.5), 0 6px 18px rgba(0,0,0,.4); }
    50%{ box-shadow:0 0 0 10px rgba(37,211,102,.22), 0 0 34px 8px rgba(37,211,102,.7), 0 6px 18px rgba(0,0,0,.4); }
  }

  /* VIDEO y QUIZ deben verse 100% completos sin necesidad de deslizar,
     incluso con la barra de direcciones de Safari/Chrome mobile visible.
     min-height:100vh (arriba) no alcanza porque el contenido puede
     empujar la sección más allá del viewport realmente visible. El alto
     EXACTO real lo fija JS como estilo inline sobre estas dos secciones
     (ver quiz-experience.js / setRealVh, basado en window.innerHeight —
     la única medida confiable en navegadores móviles de terceros sobre
     iOS, donde dvh no siempre refleja la barra de direcciones). Estas
     reglas de acá son solo el fallback antes de que corra el JS, con
     !important para que nada del CSS de Uncode las pise mientras tanto. */
  #wh-video-section,
  #wh-quiz-section{
    height:100vh !important;
    height:100dvh !important;
    height:calc(var(--vh, 1vh) * 100) !important;
    max-height:100vh !important;
    max-height:100dvh !important;
    max-height:calc(var(--vh, 1vh) * 100) !important;
    overflow:hidden !important;
  }

  /* Uncode inyecta reglas globales de color de texto con más especificidad
     que nuestras clases sueltas (ej. body.style-color-wayh-bg p{color:...}).
     Forzamos acá el color base de todo el texto dentro de #wh-app para que
     nunca dependa de la cascada del theme. */
  #wh-app, #wh-app p, #wh-app span, #wh-app div, #wh-app h1, #wh-app h2,
  #wh-app h3, #wh-app h4, #wh-app b, #wh-app strong{
    color:var(--chalk);
  }

  /* Tipografía display (Krona One) trae mucho tracking por defecto;
     la juntamos un poco en todos los títulos/heading para que se vea
     más compacta y legible. */
  .quiz-question, .results-title, .plan-name, .grid-title,
  .grid-final-title, .load-pct, .pin-body h4{
    letter-spacing:-0.02em !important;
  }

  /* ---------- LOADING ---------- */
  #wh-load-screen, #wh-plan-loading-screen{
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--ink);
    transition:opacity .6s ease, visibility .6s ease;
  }
  #wh-load-screen.hidden, #wh-plan-loading-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

  /* Barra de progreso fija arriba de la pantalla, solo visible durante el quiz */
  #wh-top-progress-bar{
    position:fixed; top:0; left:0; width:100%; height:4px;
    background:rgba(255,255,255,.08); z-index:50;
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  #wh-top-progress-bar.visible{ opacity:1; visibility:visible; }
  #wh-top-progress-fill{
    height:100%; width:0%; background:var(--wh-green);
    box-shadow:0 0 10px rgba(0,235,0,.6);
    transition:width .4s ease;
  }
  .load-pct{
    font-family:var(--mono);
    font-size:clamp(64px, 14vw, 160px);
    font-weight:600;
    line-height:1;
    color:var(--chalk) !important;
  }
  .load-pct span{ color:var(--wh-green) !important; }
  .load-label{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--chalk-dim) !important;
    margin-top:12px;
  }
  .load-bar-track{
    width:min(320px, 60vw); height:2px; background:var(--surface-2);
    margin-top:28px; position:relative; overflow:hidden;
  }
  .load-bar-fill{
    position:absolute; left:0; top:0; height:100%; width:0%;
    background:var(--wh-green);
    transition:width .05s linear;
  }

  /* ---------- VIDEO ---------- */
  #wh-video-section{
    background:#000;
    display:flex; align-items:center; justify-content:center;
  }
  #wh-video-section video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    background:#000;
  }
  /* En fullscreen, el navegador ya estira el contenedor al viewport completo;
     esto es un refuerzo para que, al rotar el celular, el video (con
     object-fit:contain) se reacomode a la nueva orientación sin recortarse. */
  #wh-video-section:fullscreen,
  #wh-video-section:-webkit-full-screen{
    width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
  }
  /* El overlay de "Cargando video" está OCULTO por defecto: el atributo
     poster del <video> ya se muestra solo, apenas carga el HTML, sin
     depender de JS. Este overlay solo debe aparecer si el video realmente
     falla (evento 'error' — ver quiz-experience.js), nunca mientras se
     espera la data, porque si no tapa la portada real con un degradado. */
  .video-fallback{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 30% 20%, rgba(0,235,0,.18), transparent 55%),
      linear-gradient(160deg, #101215, #06070a 70%);
    display:none; align-items:center; justify-content:center;
    text-align:center; padding:24px;
  }
  .video-fallback.show{ display:flex; }
  .video-fallback p{
    font-family:var(--mono); font-size:12px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--chalk-dim) !important; max-width:340px;
  }

  /* Aviso flotante "Activa el audio": ahora con el mismo lenguaje visual
     "neón" del botón de play (fondo verde sólido + glow en capas, sin
     trazo), posicionado arriba del botón de silencio y alineado a la
     izquierda (no centrado) para compensar visualmente con el botón de
     play, que sigue centrado. Comparte el auto-hide de los controles
     (ver más abajo) y además se oculta apenas el usuario activa el audio
     (JS) o a los 8s como respaldo. */
  .audio-hint{
    position:absolute;
    left:clamp(20px,4vw,48px);
    bottom:calc(104px + env(safe-area-inset-bottom, 0px));
    z-index:7; max-width:56%; text-align:left;
    background:var(--wh-green) !important;
    border:none;
    color:var(--ink) !important; font-weight:700;
    font-family:var(--mono); font-size:12px; letter-spacing:.02em;
    padding:11px 18px; border-radius:30px;
    box-shadow:0 0 0 6px rgba(0,235,0,.14), 0 0 26px 6px rgba(0,235,0,.5);
    animation:wh-audio-hint-float 2.2s ease-in-out infinite;
    transition:opacity .4s ease, visibility .4s ease;
  }
  .audio-hint.hidden{ opacity:0 !important; visibility:hidden !important; pointer-events:none; }
  @keyframes wh-audio-hint-float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }

  /* Link "¿Ya eres cliente?": ARRIBA del botón de play, más grande/
     protagonista. Blur del fondo bien alto (18px) + capa oscura extra
     para que el texto no se pierda contra videos con fondos claros o
     muy cargados de detalle. translate(-50%, calc(-100% - 60px)) despega
     el pill hacia arriba usando su propio alto (-100%) más el radio del
     botón de play (42px) más un respiro (18px). */
  .vc-existing-client{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, calc(-100% - 60px));
    z-index:6; text-decoration:none;
    font-family:var(--mono); font-size:15.5px; font-weight:600; letter-spacing:.02em;
    color:var(--chalk) !important;
    background:rgba(8,8,8,.62);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1.5px solid rgba(255,255,255,.28);
    padding:14px 26px; border-radius:34px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    box-shadow:0 4px 18px rgba(0,0,0,.5);
    transition:.2s ease;
  }
  .vc-existing-client span{ color:var(--wh-green) !important; font-weight:800; }
  .vc-existing-client:hover{
    border-color:var(--wh-green) !important; background:rgba(0,60,0,.55);
    color:var(--chalk) !important; transform:translate(-50%, calc(-100% - 60px)) scale(1.03);
  }

  /* Botón central de play/pausa: relleno + glow, perfectamente centrado */
  .vc-play-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:84px; height:84px; border-radius:50%;
    background:var(--wh-green) !important; color:var(--ink) !important;
    border:none; cursor:pointer; z-index:6;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 8px rgba(0,235,0,.12), 0 0 34px 6px rgba(0,235,0,.45);
    transition:transform .2s ease, box-shadow .2s ease, opacity .4s ease;
  }
  .vc-play-center svg{ width:30px; height:30px; display:block; }
  .vc-play-center svg.icon-play{ margin-left:3px; } /* compensa el óptico del triángulo */
  .vc-play-center:hover{
    transform:translate(-50%,-50%) scale(1.06);
    box-shadow:0 0 0 10px rgba(0,235,0,.16), 0 0 46px 10px rgba(0,235,0,.6);
  }

  .video-controls{
    position:absolute; left:0; right:0; bottom:0;
    display:flex; align-items:center; gap:14px;
    padding:22px clamp(20px,4vw,48px);
    /* env(safe-area-inset-bottom) evita que los controles queden pegados
       bajo el "home indicator" de iPhone cuando la sección ocupa el
       100dvh exacto. calc() con un valor de respaldo funciona en
       navegadores sin soporte para env(). */
    padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
    z-index:5;
    transition:opacity .4s ease;
  }

  /* Auto-hide: mientras el video reproduce y el cursor está quieto,
     los controles (y el aviso de audio + el link de "ya eres cliente")
     se desvanecen; reaparecen al instante con el mouse. El botón de
     WhatsApp NO se incluye acá a propósito: debe quedar siempre visible. */
  #wh-video-section.controls-hidden .vc-play-center,
  #wh-video-section.controls-hidden .video-controls,
  #wh-video-section.controls-hidden .audio-hint,
  #wh-video-section.controls-hidden .vc-existing-client{
    opacity:0; pointer-events:none;
  }
  .vc-btn{
    background:rgba(255,255,255,.08); backdrop-filter:blur(2px);
    border:1px solid rgba(255,255,255,.18);
    color:var(--chalk) !important; width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:.2s ease;
    box-shadow:0 0 14px 0 rgba(0,235,0,0);
  }
  .vc-btn svg{ width:20px; height:20px; }
  .vc-btn:hover{
    background:var(--wh-green) !important; border-color:var(--wh-green) !important; color:var(--ink) !important;
    box-shadow:0 0 22px 4px rgba(0,235,0,.5);
  }
  .vc-spacer{ flex:1; }
  .vc-skip{
    font-family:var(--mono); font-size:12px; letter-spacing:.15em;
    text-transform:uppercase; color:var(--chalk-dim) !important;
    background:none; border:none; cursor:pointer; padding:10px 4px;
    display:flex; align-items:center; gap:6px;
  }
  .vc-skip svg{ width:14px; height:14px; }
  .vc-skip:hover{ color:var(--wh-green) !important; }

  /* ---------- QUIZ ---------- */
  #wh-quiz-section{
    display:flex; align-items:center; justify-content:center;
    padding:80px 20px;
    background:var(--ink);
  }
  .quiz-wrap{ width:100%; max-width:640px; }
  .quiz-back{
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; color:var(--chalk-dim) !important;
    font-family:var(--mono); font-size:12px; letter-spacing:.15em;
    text-transform:uppercase; cursor:pointer; padding:6px 0; margin-bottom:16px;
    transition:.15s ease;
  }
  .quiz-back svg{ width:14px; height:14px; }
  .quiz-back:hover{ color:var(--wh-green) !important; }
  .quiz-back.invisible{ visibility:hidden; } /* reserva el espacio para que no salte el layout */
  .quiz-eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.25em;
    text-transform:uppercase; color:var(--wh-green) !important; margin-bottom:14px;
  }
  .quiz-question{
    font-family:var(--display); font-size:clamp(28px,4.5vw,42px);
    line-height:1.05; margin-bottom:32px;
    color:var(--chalk) !important;
  }
  .quiz-options{ display:flex; flex-direction:column; gap:12px; }
  .quiz-option.selected{
    border-color:var(--wh-green) !important; background:var(--surface-2) !important;
    box-shadow:0 0 0 1px rgba(0,235,0,.35);
  }
  .quiz-option{
    text-align:left; padding:18px 22px; background:var(--surface) !important;
    border:1px solid var(--surface-2); border-radius:10px;
    color:var(--chalk) !important; font-family:var(--body); font-size:16px;
    cursor:pointer; transition:.15s ease;
  }
  .quiz-option:hover{ border-color:var(--wh-green) !important; background:var(--surface-2) !important; color:var(--chalk) !important; }

  /* ---------- RESULTS ---------- */
  #wh-results-section{
    display:flex; align-items:center; justify-content:center;
    padding:48px 20px; background:var(--ink);
  }
  .results-wrap{ width:100%; max-width:1080px; }
  /* Oculto: reemplazado por el popup de captura de correo (10% dcto) que
     aparece a los 10s en la pantalla de resultados — ver .wh-popup-*
     más abajo y initEmailPopup() en quiz-experience.js. Se deja el CSS
     original comentado como referencia por si se reactiva en el futuro. */
  .offer-timer{
    display:none !important;
  }
  .offer-timer b{ font-size:15px; letter-spacing:.05em; color:var(--wh-green) !important; }

  .results-eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.25em;
    text-transform:uppercase; color:var(--chalk-dim) !important; text-align:center; margin-bottom:8px;
  }
  /* Título de resultados: -30% respecto a la versión anterior (era
     clamp(38px,5.4vw,58px)) para que no compita en tamaño con el resto
     de la sección. */
  .results-title{
    font-family:var(--display); font-size:clamp(27px,3.8vw,41px); text-align:center;
    margin-bottom:24px; color:var(--chalk) !important; line-height:1.1;
  }
  .results-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  }
  @media (max-width:820px){ .results-grid{ grid-template-columns:1fr; } }
  .plan-card{
    background:var(--surface); border:1px solid var(--surface-2); border-radius:14px;
    padding:0 0 20px; display:flex; flex-direction:column; gap:10px;
    position:relative; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow:hidden; cursor:pointer;
  }
  /* Miniatura real del producto de WooCommerce, si está disponible.
     aspect-ratio 1:1 (cuadrado) — el 4:5 anterior se veía demasiado
     angosto/recortado con las fotos reales de los planes. */
  .plan-thumb{
    width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--surface-2);
    position:relative;
  }
  .plan-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* Badge "Recomendado": sobre la miniatura si existe, o en flujo normal
     (antes del % de match) si no hay foto — nunca se superpone al texto. */
  .plan-badge{
    position:absolute; top:12px; left:12px; z-index:2;
    background:var(--wh-green) !important; color:var(--ink) !important; font-family:var(--mono);
    font-weight:700; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
    padding:5px 12px; border-radius:20px;
    box-shadow:0 0 16px 2px rgba(0,235,0,.55);
  }
  .plan-badge-inline{
    position:static; display:inline-block; margin:20px 24px 0;
    align-self:flex-start;
  }

  .plan-card .plan-match,
  .plan-card .plan-name,
  .plan-card .plan-desc,
  .plan-card .plan-price,
  .plan-card .plan-cta{ margin-left:22px; margin-right:22px; }
  .plan-card .plan-thumb + .plan-match{ margin-top:18px; }
  .plan-card > .plan-match:first-child{ margin-top:22px; }

  /* Tarjeta recomendada por el quiz: fondo con tinte verde permanente,
     para distinguirla como "la opción #1" independientemente de cuál
     tenga el glow de seleccionada en un momento dado. */
  .plan-card.top{
    background:linear-gradient(165deg, rgba(0,235,0,.14), var(--surface) 60%);
    border-color:rgba(0,235,0,.4);
  }
  @media (min-width:821px){ .plan-card.top{ transform:translateY(-4px) scale(1.02); z-index:1; } }

  /* ---- Selección con glow parpadeante ----
     Solo una tarjeta a la vez tiene la clase .selected (arranca en la
     recomendada). Las otras dos muestran el mismo glow, pero fijo y solo
     al pasar el mouse — nunca hay más de un glow "encendido" a la vez. */
  @keyframes wh-plan-glow-pulse{
    0%, 100%{
      box-shadow:0 0 0 1px rgba(0,235,0,.35), 0 0 26px 4px rgba(0,235,0,.28);
    }
    50%{
      box-shadow:0 0 0 1px rgba(0,235,0,.7), 0 0 48px 10px rgba(0,235,0,.6);
    }
  }
  .plan-card.selected{
    border-color:var(--wh-green) !important;
    animation:wh-plan-glow-pulse 1.8s ease-in-out infinite;
  }
  .plan-card.top.selected .plan-match{ text-shadow:0 0 18px rgba(0,235,0,.5); }
  .plan-card:not(.selected):hover{
    border-color:var(--wh-green) !important;
    box-shadow:0 0 0 1px rgba(0,235,0,.3), 0 0 30px 6px rgba(0,235,0,.3);
  }

  .plan-match{
    font-family:var(--mono); font-size:34px; color:var(--wh-green) !important; line-height:1;
  }
  .plan-match span{ font-size:13px; color:var(--chalk-dim) !important; }
  .plan-name{ font-family:var(--display); font-size:23px; color:var(--chalk) !important; }
  .plan-desc{ font-size:14px; color:var(--chalk-dim) !important; line-height:1.5; }

  /* Precio normal + oferta -10%: vive dentro de la tarjeta recomendada
     (plan #1). Usa Nunito (var(--body)) para los números en vez de la
     tipografía display — es mucho más legible a estos tamaños — y deja
     explícito con etiquetas cuál es el precio normal, cuál el de oferta
     y cuánto es el % de descuento (calculado desde los valores reales
     de WooCommerce, no hardcodeado). */
  /* Oculto: el precio con descuento visible por defecto en la tarjeta
     recomendada se reemplazó por el popup de captura de correo (10% dcto),
     así el descuento se entrega a cambio del correo en vez de mostrarse
     gratis en la card. */
  .plan-price{
    display:none !important;
  }
  .plan-price-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .plan-price-label{
    font-family:var(--mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.08em; color:var(--chalk-dim) !important;
    display:inline-flex; align-items:center; gap:6px;
  }
  .plan-price-regular{
    font-family:var(--body); font-size:15px; font-weight:700;
    color:var(--chalk-dim) !important; text-decoration:line-through; opacity:.75;
  }
  .plan-price-row-offer{
    padding-top:6px; border-top:1px dashed rgba(0,235,0,.3);
  }
  .plan-price-row-offer .plan-price-label{ color:var(--wh-green) !important; }
  .plan-price-discount{
    background:var(--wh-green) !important; color:var(--ink) !important;
    font-family:var(--mono); font-size:10px; font-weight:800;
    padding:2px 7px; border-radius:20px; letter-spacing:.03em;
  }
  .plan-price-offer{
    font-family:var(--body); font-size:26px; font-weight:800;
    color:var(--wh-green) !important; letter-spacing:-0.01em;
  }

  .plan-cta{
    display:block; text-align:center; text-decoration:none;
    background:var(--ink) !important; border:1px solid var(--chalk); color:var(--chalk) !important;
    padding:12px; border-radius:8px; font-family:var(--mono); font-size:12px;
    letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:.2s;
    margin-top:auto;
  }
  .plan-cta:hover{ background:var(--wh-green) !important; border-color:var(--wh-green) !important; color:var(--ink) !important; }
  .see-more-wrap{ text-align:center; margin-top:26px; }
  .see-more{
    display:inline-flex; align-items:center; gap:8px;
    background:none; border:none; color:var(--chalk-dim) !important; font-family:var(--mono);
    font-size:12px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
    text-decoration:none;
    border-bottom:1px solid var(--chalk-dim); padding-bottom:4px;
  }
  .see-more svg{ width:14px; height:14px; }
  .see-more:hover{ color:var(--wh-green) !important; border-color:var(--wh-green) !important; }

  /* ---------- GRID DE PLANES (siguiente paso tras resultados) ---------- */
  /* Padding superior reducido: antes eran 90px de aire muerto antes del
     botón de volver + título. */
  #wh-grid-section{ padding:32px 20px 100px; background:var(--ink); }

  /* Botón "volver a resultados": ahora es una píldora con borde/fondo
     propios (mismo lenguaje visual que el contador de oferta), no un
     texto suelto flotando desconectado del resto del diseño. */
  .grid-back{
    display:inline-flex; align-items:center; gap:8px;
    max-width:1100px; margin:0 auto 24px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:30px; padding:10px 18px !important;
    color:var(--chalk) !important;
  }
  .grid-back:hover{
    border-color:var(--wh-green) !important;
    background:rgba(0,235,0,.08);
    color:var(--wh-green) !important;
  }
  .grid-title{
    font-family:var(--display); font-size:clamp(30px,5vw,48px); text-align:center; margin-bottom:8px;
    color:var(--chalk) !important;
  }
  .grid-sub{
    text-align:center; color:var(--chalk-dim) !important; font-size:14px; margin-bottom:40px;
  }
  .pin-grid{
    columns:3 260px; column-gap:20px; max-width:1100px; margin:0 auto;
  }
  @media (max-width:700px){ .pin-grid{ columns:1 260px; } }
  .pin-card{
    display:block; break-inside:avoid; margin-bottom:20px; border-radius:14px; overflow:hidden;
    background:var(--surface); border:1px solid var(--surface-2); cursor:pointer;
    text-decoration:none; color:var(--chalk) !important;
    transition:.2s ease;
  }
  .pin-card:hover{ border-color:var(--wh-green) !important; transform:translateY(-2px); }
  .pin-img{ width:100%; display:block; }
  .pin-body{ padding:18px; }
  .pin-body h4{ font-family:var(--display); font-size:19px; margin:0 0 6px; color:var(--chalk) !important; }
  .pin-body p{ font-size:13px; color:var(--chalk-dim) !important; margin:0; line-height:1.5; }
  .pin-price{ margin-top:10px; font-family:var(--mono); font-size:14px; }
  .pin-price s{ color:var(--chalk-dim) !important; opacity:.8; margin-right:6px; }
  .pin-price b{ color:var(--wh-green) !important; font-size:16px; }

  /* Bloque final "¿No encuentras lo que buscas?": ahora es un panel propio
     (tarjeta con borde, más aire y jerarquía tipográfica), no texto
     apretado pegado al final del grid. */
  .grid-final-cta-wrap{
    text-align:center; margin:70px auto 0; max-width:640px;
    background:var(--surface); border:1px solid var(--surface-2);
    border-radius:20px; padding:52px 44px;
  }
  .grid-final-title{
    font-family:var(--display); font-size:clamp(24px,3.2vw,32px);
    margin:0 0 14px; color:var(--chalk) !important;
  }
  .grid-final-text{
    color:var(--chalk-dim) !important; font-size:15px; line-height:1.7;
    max-width:460px; margin:0 auto 30px;
  }
  .grid-final-text strong{ color:var(--wh-green) !important; font-weight:800; }
  .grid-final-cta{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--wh-green) !important; color:var(--ink) !important; text-decoration:none;
    font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    padding:16px 34px; border-radius:8px; transition:.2s ease;
  }
  .grid-final-cta svg{ width:14px; height:14px; }
  .grid-final-cta:hover{ background:var(--chalk) !important; color:var(--ink) !important; box-shadow:0 0 22px 4px rgba(0,235,0,.5); }

  /* !important es necesario: #wh-video-section, #wh-quiz-section y #wh-results-section
     definen display:flex por ID, que tiene más especificidad que una clase.
     Sin esto, agregar/quitar .hidden-section no ocultaba realmente la sección. */
  .hidden-section{ display:none !important; }

  /* =====================================================================
     RESPONSIVE — tablet y mobile. Todo lo de acá abajo son overrides;
     desktop (>900px) queda exactamente igual a las reglas de arriba.
     ===================================================================== */

  /* ---------- TABLET (≤900px) ---------- */
  @media (max-width:900px){
    #wh-results-section{ padding:40px 24px; }
    #wh-grid-section{ padding:28px 24px 80px; }
    .results-title{ margin-bottom:20px; }
  }

  /* ---------- MOBILE (≤600px) ---------- */
  @media (max-width:600px){
    /* Botón de WhatsApp: un poco más chico en mobile, pero manteniendo
       target de toque de sobra (48px+). */
    .wh-whatsapp-float{ width:52px; height:52px; right:14px; }
    .wh-whatsapp-float svg{ width:26px; height:26px; }

    /* Botón central de play: un poco más chico que en desktop pero con
       target de toque de sobra (44px+ recomendado por accesibilidad). */
    .vc-play-center{ width:72px; height:72px; }
    .vc-play-center svg{ width:26px; height:26px; }
    .vc-existing-client{
      transform:translate(-50%, calc(-100% - 50px));
      font-size:13.5px; padding:12px 20px;
    }
    .vc-existing-client:hover{ transform:translate(-50%, calc(-100% - 50px)) scale(1.03); }
    .audio-hint{
      left:16px; max-width:70%; font-size:11px; padding:10px 15px;
      bottom:calc(96px + env(safe-area-inset-bottom, 0px));
    }
    .video-controls{ padding:16px clamp(14px,4vw,24px); padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); gap:10px; }
    .vc-btn{ width:44px; height:44px; }
    .vc-skip{ font-size:13px; padding:10px 2px; }

    /* Quiz: full screen estricto (sin scroll) — padding reducido y
       contenido más compacto para que quepa completo en el alto real
       del viewport (incluye el respiro para notch/home-indicator). */
    #wh-quiz-section{
      padding:calc(56px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .quiz-eyebrow{ font-size:13px; margin-bottom:8px; }
    .quiz-question{ font-size:clamp(22px,6.5vw,30px); margin-bottom:18px; line-height:1.1; }
    .quiz-options{ gap:8px; }
    .quiz-option{ padding:14px 16px; font-size:15px; }

    /* Loaders: números y texto proporcionados a la pantalla */
    .load-pct{ font-size:clamp(52px,22vw,96px); }
    .load-label{ font-size:12px; letter-spacing:.2em; padding:0 24px; text-align:center; }

    /* Resultados */
    #wh-results-section{ padding:32px 18px; align-items:flex-start; }
    .offer-timer{
      max-width:100%; white-space:normal; text-align:center;
      font-size:12px; padding:9px 14px; margin-bottom:12px;
    }
    .offer-timer b{ font-size:14px; }
    .results-eyebrow{ font-size:13px; }
    .results-title{ font-size:clamp(21px,6vw,27px); margin-bottom:16px; line-height:1.15; }
    .results-grid{ gap:14px; }
    .plan-thumb{ aspect-ratio:1/1; }
    .plan-card{ padding-bottom:16px; gap:8px; }
    .plan-card .plan-match,
    .plan-card .plan-name,
    .plan-card .plan-desc,
    .plan-card .plan-price,
    .plan-card .plan-cta{ margin-left:18px; margin-right:18px; }
    .plan-card .plan-thumb + .plan-match{ margin-top:14px; }
    .plan-card > .plan-match:first-child{ margin-top:18px; }
    .plan-match{ font-size:28px; }
    .plan-name{ font-size:20px; }
    .plan-desc{ font-size:13.5px; line-height:1.5; }
    .plan-price{ padding:10px 12px; }
    .plan-price-regular{ font-size:14px; }
    .plan-price-offer{ font-size:22px; }
    .plan-cta{ padding:13px; font-size:12px; }
    .see-more{ font-size:13px; }

    /* Grid Pinterest final */
    #wh-grid-section{ padding:24px 16px 64px; }
    .grid-back{ margin-bottom:18px; padding:9px 14px !important; font-size:11px; }
    .grid-title{ font-size:clamp(26px,8vw,34px); }
    .grid-sub{ font-size:13.5px; margin-bottom:28px; padding:0 8px; }
    .pin-grid{ columns:1 260px; }
    .pin-body h4{ font-size:18px; }
    .pin-body p{ font-size:14px; }
    .grid-final-cta-wrap{ margin-top:44px; padding:36px 24px; }
    .grid-final-title{ font-size:clamp(21px,6vw,26px); }
    .grid-final-text{ font-size:14px; margin-bottom:24px; }
    .grid-final-cta{
      display:flex; width:100%; justify-content:center;
      padding:16px 20px; font-size:13px;
    }
  }

  /* ---------- MOBILE CHICO (≤380px, ej. iPhone SE) o pantallas bajas
     en landscape/con teclado — apretamos aún más el quiz para que quepa
     entero sin scroll. ---------- */
  @media (max-width:380px){
    .wh-whatsapp-float{ width:48px; height:48px; right:10px; }
    .wh-whatsapp-float svg{ width:24px; height:24px; }
    .plan-name{ font-size:19px; }
    .plan-match{ font-size:26px; }
    .video-controls{ gap:8px; }
    .vc-skip span, .vc-skip{ font-size:12px; }
    .vc-existing-client{
      transform:translate(-50%, calc(-100% - 46px));
      font-size:12.5px; padding:10px 18px;
    }
    .vc-existing-client:hover{ transform:translate(-50%, calc(-100% - 46px)) scale(1.03); }
    .audio-hint{ max-width:64%; font-size:10.5px; padding:9px 13px; }
  }
  @media (max-height:700px){
    .quiz-eyebrow{ margin-bottom:6px; }
    .quiz-question{ font-size:clamp(19px,6vw,26px) !important; margin-bottom:12px !important; }
    .quiz-options{ gap:6px; }
    .quiz-option{ padding:11px 14px !important; font-size:14px !important; }
    #wh-quiz-section{ padding-top:calc(40px + env(safe-area-inset-top, 0px)) !important; }
    .vc-play-center{ width:64px; height:64px; }
    .vc-play-center svg{ width:24px; height:24px; }
    .vc-existing-client{ transform:translate(-50%, calc(-100% - 44px)); }
    .vc-existing-client:hover{ transform:translate(-50%, calc(-100% - 44px)) scale(1.03); }
    .audio-hint{ bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
  }

  /* =====================================================================
     OVERRIDES DE INTEGRACIÓN CON UNCODE — dejar la página 100% full-bleed,
     sin el padding/márgenes por defecto que Uncode le mete a page.php.
     Esta hoja SOLO se carga en páginas que tengan el shortcode
     [workhard_quiz_experience], así que es seguro apuntar a las clases
     genéricas de Uncode: no afecta a ninguna otra página del sitio.
     ===================================================================== */
  html, body{
    margin:0 !important; padding:0 !important;
    height:100%;
    /* Evita el "rebote" elástico de iOS/Chrome mobile al final del scroll,
       que dejaba ver un espacio en blanco extra debajo del video/quiz. */
    overscroll-behavior-y:none;
  }

  /* Título automático de la página ("Encuentra tu Plan — WorkHard") que
     Uncode agrega vía page.php aunque esté fuera de nuestro control directo. */
  .post-title-wrapper,
  h1.post-title,
  #page-header{
    display:none !important;
  }

  /* Quita el padding doble arriba/abajo y el max-width que Uncode aplica
     siempre al contenido de una página estándar (post-content / row-container). */
  body.page .post-content,
  body.page .post-content.un-no-sidebar-layout,
  body.page .row-container,
  body.page .row-parent,
  body.page .row-inner,
  body.page .uncell,
  body.page .uncont,
  body.page article.page-body,
  body.page .post-wrapper,
  body.page .post-body{
    padding:0 !important;
    margin:0 !important;
    max-width:none !important;
    width:100% !important;
  }

  body.page .sections-container,
  body.page .page-wrapper,
  body.page .main-container,
  body.page .main-wrapper,
  body.page .box-container,
  body.page .box-wrapper{
    padding:0 !important;
    margin:0 !important;
  }

  /* =====================================================================
     POPUP DE CAPTURA DE CORREO (10% dcto) — aparece a los 10s de llegar
     a la pantalla de resultados. Mismo lenguaje visual "neón" del resto
     del módulo (tarjeta oscura, acento verde, glow), overlay oscuro con
     blur para no perder el contexto de fondo (las 3 tarjetas de plan).
     ===================================================================== */
  .wh-popup-overlay{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    background:rgba(6,7,8,.72);
    backdrop-filter:blur(6px) saturate(1.2);
    -webkit-backdrop-filter:blur(6px) saturate(1.2);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s ease, visibility .35s ease;
  }
  .wh-popup-overlay.wh-popup-visible{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .wh-popup-card{
    position:relative; width:100%; max-width:420px;
    background:var(--surface); border:1px solid rgba(0,235,0,.35);
    border-radius:20px; padding:40px 32px 32px;
    text-align:center;
    box-shadow:0 0 0 1px rgba(0,235,0,.15), 0 0 60px 10px rgba(0,235,0,.18), 0 20px 60px rgba(0,0,0,.55);
    transform:translateY(10px) scale(.98); opacity:0;
    transition:transform .35s ease, opacity .35s ease;
  }
  .wh-popup-overlay.wh-popup-visible .wh-popup-card{
    transform:translateY(0) scale(1); opacity:1;
  }
  .wh-popup-close{
    position:absolute; top:14px; right:14px;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
    color:var(--chalk) !important; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:.2s ease;
  }
  .wh-popup-close svg{ width:16px; height:16px; }
  .wh-popup-close:hover{
    background:var(--wh-green) !important; border-color:var(--wh-green) !important; color:var(--ink) !important;
  }
  .wh-popup-badge{
    display:inline-block; margin:0 auto 16px;
    background:var(--wh-green) !important; color:var(--ink) !important;
    font-family:var(--mono); font-weight:800; font-size:13px; letter-spacing:.1em;
    padding:6px 16px; border-radius:20px;
    box-shadow:0 0 20px 3px rgba(0,235,0,.5);
  }
  .wh-popup-title{
    font-family:var(--display); font-size:clamp(19px,3vw,23px); line-height:1.25;
    margin:0 0 12px; color:var(--chalk) !important; letter-spacing:-0.01em;
  }
  .wh-popup-text{
    font-size:14px; line-height:1.6; color:var(--chalk-dim) !important;
    margin:0 0 22px;
  }
  .wh-popup-text strong{ color:var(--wh-green) !important; font-weight:800; }
  .wh-popup-form{ display:flex; flex-direction:column; gap:10px; }
  .wh-popup-input{
    width:100%; padding:14px 16px; border-radius:10px;
    background:var(--ink) !important; border:1px solid var(--surface-2);
    color:var(--chalk) !important; font-family:var(--body); font-size:15px;
    transition:.2s ease;
  }
  .wh-popup-input::placeholder{ color:var(--chalk-dim); opacity:.7; }
  .wh-popup-input:focus{
    outline:none; border-color:var(--wh-green) !important;
    box-shadow:0 0 0 3px rgba(0,235,0,.18);
  }
  .wh-popup-submit{
    width:100%; padding:14px; border:none; border-radius:10px; cursor:pointer;
    background:var(--wh-green) !important; color:var(--ink) !important;
    font-family:var(--mono); font-size:13px; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; transition:.2s ease;
    box-shadow:0 0 0 6px rgba(0,235,0,.1), 0 0 24px 4px rgba(0,235,0,.35);
  }
  .wh-popup-submit:hover{ transform:translateY(-1px); box-shadow:0 0 0 8px rgba(0,235,0,.14), 0 0 30px 6px rgba(0,235,0,.45); }
  .wh-popup-submit:disabled{ opacity:.6; cursor:default; transform:none; }
  .wh-popup-msg{
    min-height:18px; margin:12px 0 0; font-size:12.5px; line-height:1.5;
    color:var(--chalk-dim) !important;
  }
  .wh-popup-msg.wh-popup-msg-error{ color:#ff6b6b !important; }
  .wh-popup-msg.wh-popup-msg-success{ color:var(--wh-green) !important; }
  .wh-popup-decline{
    display:block; width:100%; margin-top:16px;
    background:none; border:none; cursor:pointer;
    color:var(--chalk-dim) !important; font-family:var(--mono); font-size:12px;
    letter-spacing:.05em; text-decoration:underline; text-underline-offset:3px;
    transition:.15s ease;
  }
  .wh-popup-decline:hover{ color:var(--chalk) !important; }

  @media (max-width:600px){
    .wh-popup-card{ padding:32px 22px 26px; border-radius:16px; }
    .wh-popup-title{ font-size:19px; }
    .wh-popup-text{ font-size:13.5px; margin-bottom:18px; }
    .wh-popup-input, .wh-popup-submit{ padding:13px 14px; font-size:14px; }
  }