/* MysterFoodie Uni · landing de uni.mysterfoodie.com. Se carga después de style.css (mismo sistema de diseño).
   PALETA: amarillo ocre del card de lista de espera de la web (#f5a623 · #fff6e0 · #f3d9a0 · #8f5500), tinta café oscuro.
   TIPOGRAFÍA: Nan Holo Gigawide (la del h1 de la web) SOLO en taglines de 4 a 8 palabras (.tagline y h1);
   todo lo demás va en Poppins con texto explicado. build_uni.py valida el número de palabras. */

body.pg-uni {
  --gold: #f5a623; --gold-soft: #fff6e0; --gold-line: #f3d9a0; --gold-d: #c47f00; --ochre: #8f5500; --brown: #3a2600;
  --ink: #2b2112; --muted: #5e5342; --soft: #fff6e0; --line: #f1e0b8; --paper: #fffdf8;
  --red: #8f5500; --orange: #e8941a; --acc: #8f5500; --acc-d: #6f4100;
  --grad: linear-gradient(180deg, #f8bb45 0%, #f5a623 55%, #ec9a14 100%);
  --p-red: #f5a623; --p-orange: #e8941a; --p-indigo: #c47f00; --p-gray: #a8864a;
}

/* ---------- tipografía: display solo en taglines ---------- */
.pg-uni .tagline, .pg-uni h1 { font-family: var(--display); font-weight: 800; line-height: 1.16; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; margin: 0 0 .5em; }
.pg-uni .tagline { font-size: clamp(1.2rem, 2.9vw, 1.8rem); }
.pg-uni h1 { font-size: clamp(1.4rem, 3.5vw, 2.15rem); }

/* ---------- botones y encabezado ---------- */
.pg-uni .btn { color: var(--ink); }
.pg-uni .btn-dark { color: #ffe9b8; }
.pg-uni .btn-line { color: var(--ink); border-color: var(--ink); }
.pg-uni .btn-ghost { color: #fff; border-color: rgba(255,255,255,.85); }
.pg-uni .btn-free, .pg-uni .site-header .btn.btn-free { box-shadow: 0 0 0 0 rgba(245,166,35,.6); animation: uni-pulse 2.6s ease-out infinite; }
@keyframes uni-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(245,166,35,0); } }
@media (prefers-reduced-motion: reduce) { .pg-uni .btn-free, .pg-uni .site-header .btn.btn-free { animation: none; } }

/* ---------- hero (ocre) ---------- */
.pg-uni .hero { background: var(--grad); color: var(--ink); }
.pg-uni .hero h1, .pg-uni .hero .tagline { color: var(--ink); }
.pg-uni .hero .lead { color: var(--ink); }
.pg-uni .hero .eyebrow { color: var(--brown); }
.pg-uni .hero .btn-light { background: var(--ink); color: #ffe9b8; }
.pg-uni .hero .btn-ghost { color: var(--ink); border-color: var(--ink); }
.hero-uni .grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-bottom: 0; }
.hero-uni .copy { padding-bottom: 56px; }
.hero-uni .fine { margin: 18px 0 0; font-size: .82rem; color: rgba(43,33,18,.88); max-width: 54ch; }
.hero-uni .fine a { color: var(--ink); text-decoration: underline; }
.pill-row { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.pill-soon { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--gold); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.pill-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(245,166,35,.3); }
.px-gif { image-rendering: pixelated; height: auto; display: inline-block; flex: none; margin: 0; }
.hero-facts { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; padding: 0; max-width: 56ch; }
.hero-facts li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; line-height: 1.35; }

/* insignias 8-bit en la paleta */
.pb-gold { --pb-bg: #f5a623; --pb-fg: #2b2112; }
.pb-ink { --pb-bg: #2b2112; --pb-fg: #f5a623; }

/* ---------- franja de tagline ---------- */
.tag-band { background: var(--grad); color: var(--ink); padding: 28px 0; }
.tag-band .wrap { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; text-align: center; }
.tag-band .tagline { margin: 0; }
.tag-band .px-gif { width: 64px; }

/* ---------- marcos de celular y iPad ---------- */
.dev-phone, .dev-ipad { position: relative; background: #1b1610; box-shadow: 0 26px 50px rgba(58,38,0,.30), inset 0 0 0 2px #4a3d28; width: var(--w, 240px); max-width: 100%; }
.dev-phone { border-radius: 36px; padding: 8px; }
.dev-ipad { border-radius: 30px; padding: 14px; }
.dev-phone img, .dev-ipad img { display: block; width: 100%; height: auto; max-height: none; margin: 0; }
.dev-phone img { border-radius: 28px; }
.dev-ipad img { border-radius: 17px; }
.hero-devices { display: flex; align-items: flex-end; justify-content: center; gap: 3%; width: min(100%, 560px); margin: 0 auto; align-self: end; }
.hero-devices .dev-ipad { --w: 62%; flex: none; margin-bottom: 0; }
.hero-devices .dev-phone { --w: 32%; flex: none; margin-bottom: 0; }
.dev-cap { margin: 12px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; justify-items: center; align-items: start; }
.phones figure { margin: 0; display: grid; justify-items: center; gap: 0; }
.phones .dev-phone { --w: 250px; }
.phones .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 800; margin: 18px 0 8px; }
.phones figcaption { text-align: center; max-width: 30ch; }
.phones figcaption b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.phones figcaption span { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.demo-note { text-align: center; margin: 26px auto 0; font-size: .85rem; color: var(--muted); max-width: 60ch; }

.uni-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.uni-ticks li { padding-left: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.uni-ticks li::before { content: ""; position: static; left: auto; top: auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(245,166,35,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f5500' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.uni-ticks b { display: block; }
.uni-ticks span { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.split-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.split-app .dev-ipad { --w: min(100%, 430px); margin: 0 auto; }

/* ---------- tarjetas explicativas ---------- */
.info-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-card { padding: 26px; border-top: 4px solid var(--gold); }
.info-card .ib { margin-bottom: 14px; line-height: 0; }
.info-card h3 { margin: 0 0 .45em; }
.info-card p { color: var(--muted); margin: 0 0 .85em; line-height: 1.65; }
.info-card p:last-child { margin-bottom: 0; }
.info-card .tag { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 700; background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--ochre); border-radius: 999px; padding: 3px 11px; }
.earn-top { display: flex; align-items: center; gap: 22px; margin: 0 0 28px; }
.earn-top .tagline { margin: 0; }
.earn-top .px-gif { width: 88px; }

.rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rank-grid .card { padding: 26px; position: relative; border-top: 4px solid var(--gold); }
.rank-grid .card .ib { margin-bottom: 12px; line-height: 0; }
.rank-grid .card .step { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ochre); margin-bottom: 6px; }
.rank-grid .card p { color: var(--muted); margin: 0 0 .8em; line-height: 1.65; }
.rank-grid .card p:last-child { margin-bottom: 0; }
.uni-warn { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--gold-soft); border: 1px solid var(--gold-line); font-size: .9rem; color: var(--muted); line-height: 1.6; }
.uni-warn b { color: var(--ink); }
.uni-warn a { text-decoration: underline; color: var(--ochre); }
.cat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cat-cards .card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cat-cards .card .n { display: block; font-size: .8rem; font-weight: 700; color: var(--ochre); margin-bottom: 10px; letter-spacing: .02em; }
.uni-card-wrap { padding: 56px 0 72px; }
.uni-card-wrap .academy { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.uni-card-wrap .academy-copy .tagline { margin: 0 0 14px; }
.uni-card-wrap .px-gif { width: 76px; }

/* ---------- pasos en la paleta ---------- */
.pg-uni .steps li::before, .pg-uni .steps li:nth-child(n)::before { background: var(--gold); color: var(--ink); }
.pg-uni .steps li, .pg-uni .steps li:nth-child(n) { border-left-color: var(--gold); }
.pg-uni .steps p { line-height: 1.65; }

/* ---------- pie ---------- */
.pg-uni .site-footer { background: var(--ink); }
.pg-uni .site-footer h4 { color: var(--gold); }
.site-footer .copy a.by { color: rgba(255,255,255,.75); }

/* ---------- marcatextos de las notas en la paleta ---------- */
body.pg-uni .nota { background: linear-gradient(transparent 56%, rgba(245,166,35,.42) 56%, rgba(245,166,35,.42) 94%, transparent 94%); }
body.pg-uni .nota:hover, body.pg-uni .nota.open { background: linear-gradient(transparent 56%, rgba(245,166,35,.78) 56%, rgba(245,166,35,.78) 94%, transparent 94%); }
body.pg-uni .nota:focus-visible { box-shadow: 0 0 0 3px rgba(245,166,35,.5); }
body.pg-uni .hero .nota, body.pg-uni .tag-band .nota { background: linear-gradient(transparent 56%, rgba(43,33,18,.20) 56%, rgba(43,33,18,.20) 94%, transparent 94%); }
body.pg-uni .hero .nota:hover, body.pg-uni .hero .nota.open, body.pg-uni .tag-band .nota:hover, body.pg-uni .tag-band .nota.open { background: linear-gradient(transparent 56%, rgba(43,33,18,.38) 56%, rgba(43,33,18,.38) 94%, transparent 94%); }
body.pg-uni .site-footer .nota { background: linear-gradient(transparent 56%, rgba(245,166,35,.32) 56%, rgba(245,166,35,.32) 94%, transparent 94%); }
body.pg-uni .site-footer .nota:hover, body.pg-uni .site-footer .nota.open { background: linear-gradient(transparent 56%, rgba(245,166,35,.6) 56%, rgba(245,166,35,.6) 94%, transparent 94%); }

@media (max-width: 960px) {
  .phones { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split-app { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .info-grid, .info-grid.two, .rank-grid, .cat-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hero-uni .grid { grid-template-columns: minmax(0, 1fr); }
  .hero-devices { margin-top: 8px; width: min(100%, 460px); }
}
@media (max-width: 520px) {
  .phones .dev-phone { --w: min(78vw, 270px); }
  .earn-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tag-band .px-gif { width: 52px; }
}