/* Añadidos de «Dos orillas» sobre el CSS del juego de emprendimiento (jugar.css + naipe.css). */
.qcard .eyebrow{display:block;margin-bottom:12px}
.q-banner.alto{aspect-ratio:4/5}
.q-banner.vela img{filter:blur(8px) brightness(1.15) saturate(.55) contrast(.9);transform:scale(1.06)}
.q-banner{position:relative}
.q-banner .vela-t{position:absolute;inset:0;display:grid;place-items:center;color:#F7F8E5;font:500 22px var(--font-display);text-shadow:0 2px 14px #000;transition:opacity .5s}
.q-banner:not(.vela) .vela-t{opacity:0}
.q-banner img{transition:filter 1.1s ease,transform 1.6s ease}
.opt .ph{flex:none}
.opt.ok{border-color:#9CCB6B!important;background:rgba(156,203,107,.14)!important;box-shadow:0 0 0 1px rgba(156,203,107,.5)}
.opt.ko{border-color:#C9A58F!important;opacity:.85}
.opt:disabled.ok,.opt:disabled.ko{opacity:1!important}
.fb{margin:18px 0 6px;padding:14px 16px;border-radius:14px;border:1px solid var(--q-line);background:rgba(21,13,9,.55);text-align:left;animation:escena-entra .45s both}
.fb p{margin:0;font-size:15px;line-height:1.5;color:#F7F8E5}.fb small{display:block;margin-top:8px;font-size:12px;color:rgba(247,248,229,.55);line-height:1.4}
.mt{margin-top:16px}
/* Simulaciones */
.sim{margin:0 0 18px;text-align:left}
.billete{display:grid;grid-template-columns:1fr auto;background:#F7F8E5;color:#1C120D;border-radius:14px;overflow:hidden}
.billete>div{padding:14px 16px}.billete .corte{border-left:2px dashed rgba(28,18,13,.35);display:grid;place-items:center;font-size:30px}
.billete small{display:block;font-size:11px;color:#5d6257;margin-bottom:2px}.billete b{font:500 22px var(--font-display)}
.chat{display:grid;gap:8px;background:rgba(21,13,9,.55);border:1px solid var(--q-line);border-radius:14px;padding:14px}
.burbuja{max-width:80%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:rgba(247,248,229,.12);font-size:15px;color:#F7F8E5}
.escribe{display:inline-flex;gap:4px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:rgba(247,248,229,.12);width:max-content}
.escribe i{width:6px;height:6px;border-radius:50%;background:rgba(247,248,229,.6);animation:punto 1.2s infinite}.escribe i:nth-child(2){animation-delay:.2s}.escribe i:nth-child(3){animation-delay:.4s}
@keyframes punto{50%{opacity:.25;transform:translateY(-2px)}}
.monedas{display:flex;justify-content:space-between;align-items:center;background:rgba(21,13,9,.55);border:1px solid var(--q-line);border-radius:14px;padding:14px 16px;color:#F7F8E5}
.monedas span{font-size:13px;color:rgba(247,248,229,.6)}.monedas b{font:500 30px var(--font-display);font-variant-numeric:tabular-nums}
.brujula{display:flex;align-items:center;gap:14px;background:rgba(21,13,9,.55);border:1px solid var(--q-line);border-radius:14px;padding:14px 16px}
.brujula svg{width:56px;height:56px;flex:none}.brujula .aguja{transform-origin:50% 50%;animation:bamboleo 3.2s ease-in-out infinite}
@keyframes bamboleo{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(26deg)}}
.brujula p{margin:0;font-size:15px;color:#F7F8E5}
/* Sello y pasaporte */
.tinta{display:grid;place-items:center;width:168px;height:168px;margin:6px auto 22px;border-radius:50%;border:3px double #C8903C;color:#C8903C;font:500 21px/1.15 var(--font-display);transform:rotate(-9deg);animation:estampa .6s cubic-bezier(.2,1.5,.4,1);box-shadow:inset 0 0 0 6px rgba(21,13,9,.9),inset 0 0 0 7px rgba(200,144,60,.5)}
.tinta small{display:block;font:11px var(--font-sans);letter-spacing:.06em;opacity:.85;margin-top:4px}
@keyframes estampa{from{transform:scale(2) rotate(-24deg);opacity:0}}
.pasaporte{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 20px}
.pasaporte i{aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(247,248,229,.25);display:grid;place-items:center;color:#C8903C;font-size:18px}
.pasaporte i.on{border:1.5px solid #C8903C;background:rgba(200,144,60,.12)}
.sello-t{font:500 24px var(--font-display);margin:0 0 6px;color:#F7F8E5}.sello-p{margin:0 0 20px;color:rgba(247,248,229,.75);font-size:15px}
/* Resultado */
.rol-h{font:500 clamp(40px,12vw,56px)/1.02 var(--font-display);margin:2px 0 10px;color:#F7F8E5;letter-spacing:-.02em}
.rol-p{font-size:17px;line-height:1.5;color:rgba(247,248,229,.88);margin:0 0 6px}
.zona-sello{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;text-align:left;margin:18px 0 6px}
.zona-sello .tinta{margin:0;width:104px;height:104px;font-size:34px;border-width:2px}
.zona-sello .tinta span{display:grid;justify-items:center;gap:2px}.zona-sello .tinta small{font-size:9px}
.zona-sello b{font:500 24px var(--font-display);color:#F7F8E5}.zona-sello p{margin:2px 0 0;font-size:14px;color:rgba(247,248,229,.75)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0;text-align:left}
.card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--q-line);animation:escena-entra .7s both}
.card:nth-child(2){animation-delay:.25s}
.card img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.card div{position:absolute;inset:auto 0 0 0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(14,8,5,.92));font-size:13px;color:rgba(247,248,229,.8)}
.card em{display:block;font:600 12px var(--font-sans);color:#E8644D;font-style:normal;margin-bottom:3px}
.card b{display:block;font:500 19px var(--font-display);color:#F7F8E5}
.sig{margin-top:22px;padding-top:18px;border-top:1px solid var(--q-line)}
.sig p{color:rgba(247,248,229,.8);font-size:15px;margin:0 0 12px}
.btn-sec{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:10px 16px;text-align:center;line-height:1.25;margin-top:10px;border-radius:var(--radius-xl);border:1.5px solid var(--q-line);background:transparent;color:#F7F8E5;font:600 15px var(--font-sans);text-decoration:none;cursor:pointer}
.btn-sec:hover{border-color:rgba(232,100,77,.6)}

.cta .ph,.btn-sec .ph{width:1.3em;height:1.3em}
.sig{margin-bottom:18px}.sig .btn-sec{margin-top:6px}

/* ══ Imágenes: enteras, sin recorte ══════════════════════════════════════
   La casa recorta el banner a una franja 21:9 con degradado; mis escenas son 3:2 y perdían casi la mitad.
   Aquí la escena se ve completa. Los retratos 9:16 se muestran enteros (contain) sobre su propio fondo difuminado. */
.q-banner{ aspect-ratio:3/2 !important; background:#120A07 }
.q-banner img{ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%) !important; mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%) !important; object-fit:cover }
@keyframes banner-entra{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.q-banner img.lista{ animation:banner-entra 700ms cubic-bezier(.22,1,.36,1) both !important; opacity:1 }
.q-banner.alto{ aspect-ratio:auto !important; height:min(62vh,540px) }
.q-banner.alto::before{ content:""; position:absolute; inset:-20px; background:var(--retrato) center/cover; filter:blur(24px) brightness(.55); }
.q-banner.alto img{ position:relative; object-fit:contain !important; -webkit-mask-image:none !important; mask-image:none !important }
.q-banner.alto.vela img{ filter:blur(10px) brightness(1.1) saturate(.55) }
.cf-card img{ transform:none !important; object-position:center 14% !important }

/* ══ Transiciones y respuesta en el sitio ═════════════════════════════════ */
.screen.sale{ animation:escena-sale 230ms cubic-bezier(.4,0,1,1) both !important }
@keyframes escena-sale{ to{ opacity:0; transform:translateX(-18px) scale(.985) } }
.qa{ transition:opacity .2s ease, transform .2s ease }
.qa-sale{ opacity:0; transform:translateY(6px) }
.qa-entra{ animation:qa-entra .42s cubic-bezier(.22,1,.36,1) both }
@keyframes qa-entra{ from{ opacity:0; transform:translateY(14px) } }
.ans{ text-align:center; padding:6px 0 2px }
.ans-ico{ display:inline-grid; font-size:54px; line-height:1; margin-bottom:8px; animation:pop .5s cubic-bezier(.2,1.6,.4,1) both }
.ans-ok .ans-ico{ color:#9CCB6B } .ans-ko .ans-ico{ color:#C9A58F }
@keyframes pop{ from{ transform:scale(.3); opacity:0 } }
.ans-lbl{ margin:0 0 4px; font-size:14px; letter-spacing:.02em; color:rgba(247,248,229,.7) }
.ans-resp{ font:500 clamp(26px,7.5vw,34px)/1.1 var(--font-display); margin:0 0 14px; color:#F7F8E5; letter-spacing:-.01em }
.ans-dato{ margin:0 auto; max-width:46ch; font-size:15.5px; line-height:1.55; color:rgba(247,248,229,.9) }
.ans-fuente{ display:block; margin:10px 0 4px; font-size:12px; line-height:1.4; color:rgba(247,248,229,.5) }
.opt:active{ transform:scale(.985) }

/* ══ Sellos de tinta (imágenes) ═══════════════════════════════════════════ */
.sello-img{ display:block; width:180px; height:180px; margin:4px auto 18px; transform:rotate(-8deg); animation:estampa .7s cubic-bezier(.2,1.5,.4,1) both; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)) }
.pasaporte i{ overflow:hidden }
.pasaporte i img{ width:100%; height:100%; object-fit:contain; display:block; animation:estampa .5s cubic-bezier(.2,1.5,.4,1) both }
.zona-img{ width:104px; height:104px; object-fit:contain; transform:rotate(-8deg); animation:estampa .7s .25s cubic-bezier(.2,1.5,.4,1) both; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)) }
.zona-sello{ grid-template-columns:auto 1fr }

/* ══ Personajes verticales: en pantalla ancha, retrato a la izquierda y contenido a la derecha ══ */
@media (min-width:760px){
  #app:has(.qcard.split){ max-width:980px }
  .qcard.split{ display:grid; grid-template-columns:minmax(250px,38%) 1fr; gap:36px; align-items:center; text-align:left; padding:28px }
  .qcard.split .q-banner{ margin:0 !important; border-radius:16px !important; aspect-ratio:auto !important; height:100%; min-height:460px; max-height:660px }
  .qcard.split .qright{ display:flex; flex-direction:column; justify-content:center; min-width:0 }
  .qcard.split .eyebrow, .qcard.split .q-title, .qcard.split .ans{ text-align:left }
  .qcard.split .ans-dato{ margin-left:0; margin-right:0 }
  .qcard.split .duel{ grid-template-columns:1fr 1fr }
}
.qright{ min-width:0 }

/* ══ La mano de tres cartas: tu país · tu referente · la carta de TheNomba (edición Hispanidad) ══ */
.mano3{ display:flex; justify-content:center; align-items:flex-end; margin:8px auto 24px; perspective:1400px }
.nc{ width:min(30vw,158px); aspect-ratio:2/3; margin:0 -9px; position:relative; transition:transform .5s cubic-bezier(.22,1,.36,1) }
.nc0{ transform:rotate(-8deg) translateY(10px) } .nc1{ transform:translateY(-8px); z-index:2 } .nc2{ transform:rotate(8deg) translateY(10px) }
@media (hover:hover){ .nc:hover{ transform:translateY(-14px) rotate(0) } }
.nc-in{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .95s cubic-bezier(.3,.7,.2,1) }
.mano3.volteadas .nc-in{ transform:rotateY(180deg) } .mano3.volteadas .nc1 .nc-in{ transition-delay:.18s } .mano3.volteadas .nc2 .nc-in{ transition-delay:.36s }
.nc-back,.nc-front{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:10px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.5) }
.nc-back{ background:#2a1b14 url(naipes/dorso.webp) center/cover; display:grid; place-items:center }
.nc-back .nc-hg{ width:27%; color:#E3B363; filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) }
.nc-front{ transform:rotateY(180deg); background:radial-gradient(120% 80% at 50% -10%,rgba(232,100,77,.10),transparent 60%),linear-gradient(180deg,#2b1c14,#150c08); border:1px solid rgba(247,248,229,.2); color:#F7F8E5; text-align:center }
.nc-marco{ position:absolute; inset:7px; border:1px solid rgba(201,162,39,.55); border-radius:6px; z-index:2; pointer-events:none }
.nc-marco::after{ content:""; position:absolute; inset:3px; border:1px solid rgba(201,162,39,.22); border-radius:4px }
.nc-hg svg{ width:100%; height:auto; display:block }
.nc-nombre{ display:block; font:500 clamp(13px,3.9vw,18px)/1.12 var(--font-display); letter-spacing:-.01em; padding:0 10px }
.nc-pie,.nc-ed,.nc-vel small{ display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase }
.nc-pie{ position:absolute; bottom:12px; left:0; right:0; color:rgba(247,248,229,.55) }
.nc-ed{ color:#E8644D; margin:0 0 4px }
.nc-idx{ position:absolute; top:13px; left:13px; font-size:17px; color:#C8903C; z-index:3; line-height:0 }
.nc-pais .nc-sello{ display:block; width:74%; margin:20% auto 8px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)) }
.nc-ref img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 14% }
.nc-vel{ position:absolute; left:0; right:0; bottom:0; padding:38px 8px 14px; background:linear-gradient(transparent,rgba(14,8,5,.94)); z-index:3 }
.nc-vel small{ color:#E8644D; margin-bottom:3px }
.nc-nomba{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:16px 8px }
.nc-nomba .nc-hg.grande{ width:36%; color:#C8903C; margin:4px 0 }
@media (min-width:760px){ .nc{ width:178px; margin:0 -6px } .nc-nombre{ font-size:19px } }
.cards.uno{ grid-template-columns:minmax(0,230px); justify-content:center }
.aviso{ margin:0 0 16px; padding:12px 14px; border-radius:12px; border:1px solid rgba(232,100,77,.4); background:rgba(232,100,77,.08); font-size:13.5px; line-height:1.5; color:rgba(247,248,229,.88) }
@media (prefers-reduced-motion:reduce){ .nc,.nc-in{ transition:none !important } }