/* TRACENDE — presentación en escritorio (marco sobre la columna móvil).
   Mobile-first INTACTO: todo esto vive dentro de @media (min-width:760px).
   No toca la lógica del quiz; solo el entorno visual en pantallas grandes. */

@media (min-width:760px){

  /* Fondo de marca en los laterales (en vez de negro plano) */
  body{
    background:
      radial-gradient(900px 620px at 50% -8%, rgba(31,195,189,.16), transparent 60%),
      radial-gradient(1100px 760px at 115% 112%, rgba(31,195,189,.07), transparent 55%),
      linear-gradient(180deg,#05090c 0%, #04070a 100%) !important;
    align-items:flex-start;
  }

  /* La columna del quiz: enmarcada como una pieza intencional */
  #app{
    max-width:480px !important;
    margin-inline:auto;
    border-left:1px solid rgba(255,255,255,.06);
    border-right:1px solid rgba(255,255,255,.06);
    box-shadow:0 0 0 1px rgba(31,195,189,.10), 0 44px 130px rgba(0,0,0,.66);
  }

  /* Barras fijas inferiores: igualar al ancho del marco (siguen centradas) */
  .ctabar{ max-width:480px !important; }

  /* Botón "Atrás" flotante: pegarlo al borde izquierdo de la columna */
  button[style*="left:14px"]{ left:calc(50% - 226px) !important; }
}

/* Pantallas muy anchas: un poco más de aire en el marco */
@media (min-width:1200px){
  #app{ box-shadow:0 0 0 1px rgba(31,195,189,.12), 0 56px 150px rgba(0,0,0,.7); }
}

/* ============================================================
   OPCIÓN B — layout de ESCRITORIO real, pantalla por pantalla.
   Solo ≥900px. Móvil 100% intacto. Reversible.
   Se ensancha la columna SOLO en la pantalla activa rediseñada
   (vía :has), el resto queda en el marco angosto.
   ============================================================ */
@media (min-width:900px){

  /* ===== GENÉRICO: toda pantalla con .dL → desktop 2 columnas, FULL WIDTH, SIN marco ===== */
  #app:has(.screen.on .dL){
    max-width:1080px !important;
    border-left:0 !important; border-right:0 !important; box-shadow:none !important;
  }
  .screen.on:has(.dL){
    display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
    min-height:calc(100dvh - 56px); padding:0 50px 150px !important;
  }
  .screen.on:has(.dL) .dL{ align-self:center; }
  .screen.on:has(.dL) .dR{ align-self:center; width:100%; }

  /* --- INICIO (0): manifiesto grande + panel der --- */
  .screen[data-s="0"] .entrada-h1{ font-size:66px !important; line-height:1 !important; }
  .screen[data-s="0"] .entrada-sub{ font-size:18px !important; max-width:34ch; }
  .screen[data-s="0"] .dformula{
    display:inline-flex !important; align-items:center; gap:11px; margin-top:28px;
    padding:14px 19px; background:rgba(31,195,189,.07); border:1px solid var(--line);
    border-radius:13px; font-size:15px; color:#dfeeee;
  }
  .screen[data-s="0"] .dformula b{ font-family:'Sora'; font-weight:700; color:var(--teal); font-size:17px; }
  .screen[data-s="0"] .dR{
    background:linear-gradient(180deg,rgba(23,32,38,.9),rgba(18,24,29,.92));
    border:1px solid var(--line); border-radius:20px; padding:28px !important;
    box-shadow:0 30px 90px rgba(0,0,0,.5);
  }
  .screen[data-s="0"] .dR .lbl:first-child{ margin-top:0 !important; }

  /* --- PREGUNTAS (3,5,6,7,8): más compactas, columnas más juntas --- */
  #app:has(.screen.on:is([data-s="3"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"])){ max-width:1000px !important; }
  .screen.on:is([data-s="3"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]){ gap:48px !important; }
  .screen:is([data-s="3"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .dL{ max-width:34ch; }
  .screen:is([data-s="3"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .dL .q{ font-size:44px !important; line-height:1.08; }
  .screen:is([data-s="3"],[data-s="5"],[data-s="6"],[data-s="7"],[data-s="8"]) .opt{ padding:18px 20px; font-size:17px; }

  /* --- ELIGE 3 (1): sidebar + grilla 3 columnas --- */
  .screen[data-s="1"].on{ grid-template-columns:340px 1fr !important; align-items:start !important; padding-top:6vh !important; }
  .screen[data-s="1"] .dL{ align-self:start !important; padding-top:30vh; }
  .screen[data-s="1"] .order{ font-size:66px; }
  .screen[data-s="1"] #movs{ grid-template-columns:repeat(3,1fr) !important; }

  /* --- FICHA (2) --- */
  .screen[data-s="2"] .q{ font-size:52px !important; }
  .screen[data-s="2"] .fhscroll{ margin:0 !important; padding:4px 0 8px !important; }
  .screen[data-s="2"] .fcard{ flex:0 0 290px !important; }

  /* --- CÓMO ENCAJÁS (4) --- */
  .screen[data-s="4"] .q{ font-size:48px !important; }

  /* --- MÚSICA (9): lista en 2 columnas --- */
  .screen[data-s="9"].on{ align-items:start !important; padding-top:7vh !important; }
  .screen[data-s="9"] .dL{ align-self:start !important; }
  .screen[data-s="9"] .q{ font-size:48px !important; }
  .screen[data-s="9"] .plist{ display:grid !important; grid-template-columns:1fr 1fr; gap:9px; }

  /* --- CUERPO (10) --- */
  .screen[data-s="10"] .q{ font-size:48px !important; }
  .screen[data-s="10"] .avstage{ min-height:460px; }

  /* --- CONSTELACIÓN (12) + LOADING (11): full width sin marco --- */
  #app:has(.screen.on:is([data-s="11"],[data-s="12"])){
    max-width:1340px !important; border-left:0 !important; border-right:0 !important; box-shadow:none !important;
  }
  .screen[data-s="12"] .kick{ font-size:22px !important; }
  .screen[data-s="12"] #web{ height:82vh !important; }

  /* ===== PÁGINAS SUELTAS (crear cuenta, resultado, paywall, historia): #app con .dL directo ===== */
  #app:has(> .dL){
    max-width:1040px !important; border-left:0 !important; border-right:0 !important; box-shadow:none !important;
    display:grid !important; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
    min-height:100dvh; padding:48px 50px 150px !important;
  }
  #app:has(> .dL) > .dL{ align-self:center; }
  #app:has(> .dL) > .dR{ align-self:center; width:100%; }
  #app:has(> .dL) h1{ font-size:54px !important; line-height:1.04 !important; }

  /* ===== PAYWALL (TU_PRACTICA): página de scroll, full width sin marco ===== */
  #app:has(> .scroll){
    max-width:1080px !important; border-left:0 !important; border-right:0 !important; box-shadow:none !important;
  }
  #app:has(> .scroll) :is(.sec,.mag,.hero .ct,.rhero .ct){ max-width:860px; margin-left:auto !important; margin-right:auto !important; }
  #app:has(> .scroll) h1{ font-size:58px !important; line-height:1.02 !important; }
  #app:has(> .scroll) .road{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:14px; }

  /* RESULTADO: puerta elegida GRANDE arriba, las demás abajo */
  #app:has(> .scroll) .pcardR{ flex-direction:column !important; align-items:stretch !important; gap:22px !important; padding:26px !important; }
  #app:has(> .scroll) .pz-img{ width:190px !important; height:auto !important; aspect-ratio:3/4; flex:none !important; margin:0 auto !important; }
  #app:has(> .scroll) .pz-kick,
  #app:has(> .scroll) .pz-name{ text-align:center; }
  #app:has(> .scroll) .pz-name{ font-size:46px !important; }

  /* HISTORIA (TU_SITUACION): columna derecha alta → alinear arriba + intro fija */
  #app:has(> .dL):has(.q){ align-items:start !important; }
  #app:has(> .dL):has(.q) > .dL{ align-self:start !important; }

  /* GRACIAS: confirmación centrada, sin marco */
  #app:has(> .hero){
    max-width:680px !important; border-left:0 !important; border-right:0 !important; box-shadow:none !important;
  }
  #app:has(> .hero) h1{ font-size:46px !important; }
  #app:has(> .hero) .check{ width:96px !important; height:96px !important; }
}