/* Migas · portada. Misma identidad que la app: expedición nocturna, acentos cálidos. */
:root{
  --bg:#0c1118;--bg-2:#121a24;--surface:#17212d;--surface-2:#1e2a38;
  --ink:#f1ece2;--ink-soft:#a39d90;--accent:#e9b857;--accent-ink:#1a1405;--accent-2:#d9674a;
  --line:#26323f;--display:'Fraunces',Georgia,serif;--texto:'Lexend',system-ui,sans-serif;--r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--texto);font-weight:300;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0 0 14px;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.6vw,66px)}
h1 em{font-style:italic;color:var(--accent)}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:22px}
p{margin:0 0 12px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.row{display:flex;align-items:center;gap:14px}
.spacer{flex:1}
.centro{text-align:center;margin-left:auto;margin-right:auto}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:12px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:720px}
.mini{font-size:13px;color:var(--ink-soft);margin-top:14px}

/* fondo */
.cielo{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(1200px 600px at 80% -10%,#1b2a3c 0%,transparent 60%),radial-gradient(800px 500px at -10% 40%,#1a1f2e 0%,transparent 60%),var(--bg)}
.cielo span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:flota 18s ease-in-out infinite alternate}
.cielo span:nth-child(1){width:420px;height:420px;background:#e9b857;left:60%;top:-10%;opacity:.12}
.cielo span:nth-child(2){width:360px;height:360px;background:#d9674a;left:-8%;top:55%;opacity:.10;animation-delay:-6s}
.cielo span:nth-child(3){width:300px;height:300px;background:#4a90d9;left:75%;top:70%;opacity:.08;animation-delay:-12s}
@keyframes flota{to{transform:translate(40px,-30px) scale(1.08)}}

/* cabecera */
.top{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:rgba(12,17,24,.72);border-bottom:1px solid var(--line)}
.top .wrap{height:66px}
.logo{font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent);display:flex;align-items:center;letter-spacing:.02em}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:16px 0 0 -2px var(--accent-2),30px 0 0 -4px var(--accent)}
.logo span:last-child{margin-left:38px}
.logo.chico{font-size:18px}
.menu{display:flex;gap:22px;margin-left:30px;font-size:14px;color:var(--ink-soft)}
.menu a:hover{color:var(--ink)}
.top .btn.fantasma{margin-left:auto}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-weight:500;font-size:15px;transition:.15s;cursor:pointer}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.primario{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primario:hover{filter:brightness(1.06)}
.btn.fantasma{background:transparent}
.btn.grande{padding:14px 26px;font-size:17px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:90px 24px 70px;min-height:78vh}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-vis{position:relative;height:460px}
.tarjeta{position:absolute;width:250px;background:#fbf7ee;color:#23201a;border-radius:14px;padding:18px 18px 14px;box-shadow:0 30px 60px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.4) inset;font-family:var(--display);transform:rotate(var(--rot));animation:mece 7s ease-in-out infinite alternate}
.tarjeta p{font-size:18px;line-height:1.3;margin:8px 0 10px;font-weight:500}
.tarjeta small{display:block;font-family:var(--texto);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a7265;font-weight:500}
.tarjeta .num{font-size:13px;color:var(--accent-2);font-weight:700;letter-spacing:.1em}
.t1{--rot:-7deg;left:0;top:30px}
.t2{--rot:4deg;right:0;top:0;animation-delay:-2s}
.t3{--rot:-3deg;left:40px;bottom:40px;background:#17212d;color:#f1ece2;border:1px solid #2e3b4a;animation-delay:-4s}
.t3 .fam{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);font-weight:600;font-family:var(--texto)}
.t3 p{font-size:28px;margin:4px 0 6px;color:var(--accent)}
.t3 small{color:#a39d90;text-transform:none;letter-spacing:0;font-size:12px}
.t4{--rot:6deg;right:30px;bottom:0;width:210px;background:#e9b857;color:#1a1405;animation-delay:-5s}
.t4 p{font-style:italic}
.t4 small{color:#5a4a1a}
@keyframes mece{to{transform:rotate(var(--rot)) translateY(-10px)}}

/* bloques */
.bloque{padding:90px 0}
.bloque.oscuro{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.pasos article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;position:relative;transition:.2s}
.pasos article:hover{transform:translateY(-3px);border-color:var(--accent)}
.pasos span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-family:var(--display);margin-bottom:14px}
.pasos p{color:var(--ink-soft);font-size:15px;margin:0}
.lista{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lista li{padding:14px 16px 14px 44px;background:var(--surface);border:1px solid var(--line);border-radius:14px;position:relative;font-size:15px;color:var(--ink-soft)}
.lista li b{color:var(--ink);font-weight:500}
.lista li::before{content:'';position:absolute;left:16px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(233,184,87,.18)}

/* usos */
.usos{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px}
.uso{border-radius:var(--r);padding:34px 30px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:10px}
.uso.empresa{background:linear-gradient(160deg,#182230,#121a24)}
.uso.familia{background:linear-gradient(160deg,#2a2016,#171410)}
.uso ul{margin:4px 0 16px;padding-left:18px;color:var(--ink-soft);font-size:15px}
.uso li{margin:5px 0}
.uso .btn{align-self:flex-start;margin-top:auto}

/* temas */
.temas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.tema{border-radius:16px;padding:26px 22px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;border:1px solid rgba(255,255,255,.08);font-family:var(--display);transition:.2s;position:relative;overflow:hidden}
.tema:hover{transform:translateY(-3px) scale(1.01)}
.tema b{font-size:24px;font-weight:600}
.tema small{font-family:var(--texto);font-size:13px;opacity:.75}
.tema.piratas{background:linear-gradient(160deg,#0d1f30,#081623);color:#d9a84a}
.tema.agentes{background:linear-gradient(160deg,#1d1d24,#09090b);color:#d4af37}
.tema.detectives{background:linear-gradient(160deg,#322517,#161009);color:#dcae6a;font-family:'Courier New',monospace}
.tema.magos{background:linear-gradient(160deg,#2a1b3f,#120a1f);color:#c9a2ff}
.tema.egipto{background:linear-gradient(160deg,#c9a26a,#8f6a36);color:#2a1d08}
.tema.deportivo{background:linear-gradient(160deg,#1f7a4a,#0d4a2a);color:#f3f7f1}
.tema.halloween{background:linear-gradient(160deg,#2a1230,#0f0712);color:#ff8a2b}
.tema.navidad{background:linear-gradient(160deg,#9a1d2a,#4d0e15);color:#f6ead0}
.tema.neutro{background:#f6f4ef;color:#0b6b74;border-color:#ddd}

/* precio */
.precio{text-align:center;display:flex;flex-direction:column;align-items:center}
.precio h2{font-size:clamp(48px,7vw,96px);color:var(--accent);font-style:italic}

/* faq */
.faq{max-width:760px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:'+';color:var(--accent);font-size:22px;font-family:var(--display)}
.faq details[open] summary::after{content:'−'}
.faq details p{color:var(--ink-soft);margin:12px 0 0;font-size:15px}

/* pie */
.pie{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--ink-soft)}
.pie a:hover{color:var(--accent)}
.sep{opacity:.5}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:50px;min-height:0}
  .hero-vis{height:380px;max-width:520px;margin:0 auto;width:100%}
  .tarjeta{width:200px}.tarjeta p{font-size:15px}
  .pasos,.temas{grid-template-columns:1fr 1fr}
  .dos,.usos{grid-template-columns:1fr}
  .menu{display:none}
}
@media (max-width:560px){
  .pasos,.temas{grid-template-columns:1fr}
  .top .btn.fantasma{display:none}
  .hero-vis{height:420px}
  .t2{right:-10px}.t3{left:0}.t4{right:0}
}