/* Naidikō v6 · inmersiva y juguetona (referencia: palmo.co.in), con raíz Pacífico y trazo de marcador del logo */
@font-face { font-family: 'Anton'; src: url('/assets/fonts/anton.woff2') format('woff2'); font-display: optional; }
@font-face { font-family: 'Familjen Grotesk'; src: url('/assets/fonts/familjen.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root { --cream: #F4EEE3; --cream-2: #EADFCC; --ink: #2B1424; --acai: #3A1B32; --pulp: #8E2D63; --gold: #C9A227; --marker: #8E5F32; --wa: #1F7A3E;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif; --sans: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif; --pad: clamp(18px, 4.5vw, 72px); --max: 1280px; --ease: cubic-bezier(0.16, 1, 0.3, 1); }
*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { margin: 0; overflow-x: clip; }
body { background: var(--cream); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--pulp); outline-offset: 3px; } main:focus { outline: none; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 500; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--cream); } .skip:focus { top: 12px; }
h2 { font: 400 clamp(52px, 7.5vw, 120px)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
.kick { font: 700 13px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--marker); margin-bottom: 14px; }
.ic { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px; font: 700 16px var(--sans); text-decoration: none; cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 14px 30px -14px rgba(31, 122, 62, 0.9); } .btn-dark { background: var(--ink); color: var(--cream); }
.link-scribble { position: relative; display: inline-block; padding: 12px 18px; font-weight: 700; text-decoration: none; }
.scribble { position: absolute; inset: -4px -10px; width: calc(100% + 20px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.scribble path, .arrow path { fill: none; stroke: var(--marker); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease); }
.in .scribble path, .in .arrow path, .link-scribble:hover .scribble path { stroke-dashoffset: 0; }
/* barra */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: 24px; padding: 12px var(--pad); transition: background-color 0.35s, box-shadow 0.35s; }
.bar.solid { background: rgba(244, 238, 227, 0.95); box-shadow: 0 1px 0 rgba(43, 20, 36, 0.12); }
.bar-logo img { width: 132px; } .bar-nav { display: flex; gap: 24px; margin-left: auto; } .bar-nav a { font-weight: 600; font-size: 15px; text-decoration: none; } .bar-nav a:hover { color: var(--pulp); }
.bag-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; font-weight: 700; cursor: pointer; }
.bag-btn b { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--cream); font-size: 14px; }
/* héroe */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px clamp(20px, 4vw, 60px); align-items: center; min-height: 100svh; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 110px var(--pad) 40px; }
.hero h1 { font: 400 clamp(64px, 9.4vw, 152px)/0.88 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
.split-text .w { display: inline-block; white-space: nowrap; } .split-text .ch { display: inline-block; transform: translateY(105%); opacity: 0; animation: up 0.9s var(--ease) forwards; animation-delay: calc(var(--i) * 28ms + 120ms); }
@keyframes up { to { transform: none; opacity: 1; } }
.lede { max-width: 46ch; margin: 22px 0 26px; font-size: clamp(17px, 1.3vw, 20px); color: #4F3A47; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-fruit { position: relative; justify-self: center; width: min(420px, 90%); transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -12px), 0); }
.racimo { width: 100%; filter: drop-shadow(0 40px 40px rgba(43, 20, 36, 0.28)); animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(1.5deg); } }
.note { position: absolute; left: -46%; top: 58%; display: flex; align-items: flex-start; gap: 6px; font: 700 18px/1.2 var(--sans); color: var(--marker); transform: rotate(-4deg); }
.note .arrow { width: 96px; height: 72px; margin-top: -14px; }
.proof { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; padding-top: 18px; border-top: 2px dashed rgba(142, 95, 50, 0.45); }
.proof li { display: grid; gap: 2px; font-size: 15px; color: #5A4651; } .proof b { font: 400 26px/1.05 var(--display); text-transform: uppercase; color: var(--ink); letter-spacing: 0.01em; }
/* la pepa se parte */
.split { position: relative; height: 260vh; background: var(--ink); color: var(--cream); }
.split-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.half { position: absolute; top: 50%; left: 50%; width: min(34vw, 380px); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.5)); }
.half-l { transform: translate(calc(-100% + 6% - var(--k, 0) * 26vw), -50%) rotate(calc(var(--k, 0) * -16deg)); }
.half-r { transform: translate(calc(-6% + var(--k, 0) * 26vw), -50%) rotate(calc(var(--k, 0) * 14deg)); }
.split-copy { position: relative; z-index: 2; max-width: 560px; padding: 0 var(--pad); text-align: center; opacity: calc((var(--k, 0) - 0.35) * 3); transform: translateY(calc((1 - var(--k, 0)) * 40px)); }
.split-copy .kick { color: var(--gold); } .split-copy p:last-child { margin-top: 18px; color: rgba(244, 238, 227, 0.88); }
.counter { position: absolute; right: var(--pad); bottom: 28px; font: 400 clamp(56px, 8vw, 120px)/1 var(--display); color: var(--gold); opacity: 0.9; }
/* tienda */
.shop, .game, .faq { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad); }
.sec-head { display: grid; gap: 10px; margin-bottom: clamp(30px, 4vw, 54px); } .sec-lede { max-width: 58ch; color: #4F3A47; } .sec-lede b { color: var(--pulp); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 28px; background: var(--cream-2); transition: transform 0.5s var(--ease); }
.card:hover { transform: translateY(-6px) rotate(-0.4deg); }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #d9ccb6; } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .card:hover .card-img img { transform: scale(1.05); }
.card-body { display: grid; gap: 14px; align-content: start; padding: 22px 24px 26px; }
.card h3 { font: 400 clamp(34px, 3.4vw, 52px)/0.95 var(--display); text-transform: uppercase; } .card p { color: #4F3A47; font-size: 15.5px; }
.packs { display: flex; gap: 8px; } .packs button { min-height: 42px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; font-weight: 700; cursor: pointer; } .packs button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.card-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .price { font: 400 40px/1 var(--display); color: var(--pulp); }
.add { min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 700; cursor: pointer; transition: transform 0.3s var(--ease); } .add:hover { transform: scale(1.04); } .add.ok { background: var(--wa); }
/* origen */
.origin { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--cream-2); }
.origin-copy { display: grid; gap: 16px; justify-items: start; max-width: 520px; justify-self: end; } .origin-copy p { color: #4F3A47; }
.polaroids { position: relative; min-height: 460px; }
.pol { position: absolute; width: min(70%, 440px); padding: 12px 12px 44px; background: #fff; box-shadow: 0 30px 50px -30px rgba(43, 20, 36, 0.55); transition: transform 0.6s var(--ease); }
.pol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .pol figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 600 15px var(--sans); color: var(--marker); }
.pol-1 { left: 0; top: 0; transform: rotate(-5deg); } .pol-2 { right: 0; bottom: 0; transform: rotate(4deg); } .pol:hover { transform: rotate(0) scale(1.03); z-index: 2; }
/* juego */
.game-box { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #2f5b3a 0%, #1e3d27 100%); }
#game { display: block; width: 100%; height: auto; aspect-ratio: 900 / 420; touch-action: none; }
.game-ui { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(30, 61, 39, 0.55); color: var(--cream); text-align: center; }
.game-ui[hidden] { display: none; } .game-msg { font: 400 clamp(32px, 4vw, 54px)/1 var(--display); text-transform: uppercase; } .game-ui .link-scribble { color: var(--cream); }
.game-score { position: absolute; left: 18px; top: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(244, 238, 227, 0.92); font-weight: 700; font-size: 15px; }
/* mayoreo */
.b2b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 80px); padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--acai); color: var(--cream); }
.b2b-copy { display: grid; gap: 16px; align-content: start; max-width: 560px; justify-self: end; } .b2b .kick { color: var(--gold); } .b2b-copy p { color: rgba(244, 238, 227, 0.86); }
.kf { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(244, 238, 227, 0.2); display: grid; gap: 8px; justify-items: start; } .kf h3 { font: 400 30px var(--display); text-transform: uppercase; } .kf .link-scribble { color: var(--cream); }
.slip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 26px; border-radius: 8px; background: #FBF8F2; color: var(--ink); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.6); transform: rotate(0.6deg); align-self: start; }
.slip-h { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-weight: 700; } .slip-h span:last-child { color: var(--marker); }
.slip label, .bag-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; } .wide { grid-column: 1 / -1; }
.slip input, .slip select, .bag-form input { min-height: 46px; padding: 8px 4px; border: 0; border-bottom: 1.5px solid rgba(43, 20, 36, 0.4); background: transparent; } .slip input:focus, .bag-form input:focus { outline: none; border-bottom-color: var(--pulp); }
.form-msg { min-height: 1.3em; font-size: 14px; font-weight: 600; color: #A33A1E; }
/* preguntas */
.faq h2 { margin-bottom: 26px; } .faq details { border-top: 2px solid var(--ink); } .faq details:last-of-type { border-bottom: 2px solid var(--ink); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 400 clamp(24px, 2.4vw, 34px)/1.1 var(--display); text-transform: uppercase; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--pulp); } .faq details[open] summary::after { content: "–"; } .faq details p { padding: 0 0 22px; max-width: 70ch; color: #4F3A47; }
/* pie */
.foot { display: grid; justify-items: center; gap: 16px; padding: 70px var(--pad) 110px; background: var(--ink); color: var(--cream); text-align: center; }
.foot-logo { width: min(420px, 70%); } .foot-big { font: 400 clamp(40px, 6vw, 84px)/0.95 var(--display); text-transform: uppercase; color: var(--gold); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; } .foot-links a { font-weight: 600; } .credits { max-width: 70ch; font-size: 13px; color: rgba(244, 238, 227, 0.75); }
/* pedido */
.bag { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: flex-end; background: rgba(43, 20, 36, 0.5); } .bag[hidden] { display: none; }
.bag-panel { width: min(440px, 100%); height: 100%; overflow: auto; padding: 24px; background: var(--cream); display: grid; align-content: start; gap: 16px; animation: slide 0.45s var(--ease); }
@keyframes slide { from { transform: translateX(100%); } } .bag-panel header { display: flex; justify-content: space-between; align-items: center; } .bag-panel h2 { font-size: 48px; }
.bag-x { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: none; font-size: 24px; cursor: pointer; }
.bag-list { display: grid; gap: 10px; } .bag-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(43, 20, 36, 0.15); }
.qty { display: inline-flex; align-items: center; gap: 8px; } .qty button { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: none; font-weight: 700; cursor: pointer; }
.bag-empty { color: #5A4651; } .bag-sub { display: flex; align-items: baseline; gap: 10px; font-weight: 700; } .bag-sub b { font: 400 34px var(--display); color: var(--pulp); } .bag-sub small { color: #5A4651; font-weight: 500; }
.bag-form { display: grid; gap: 12px; } .bag-fine { font-size: 13px; color: #5A4651; }
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 14px 30px -10px rgba(31, 122, 62, 0.9); } .wa-fab .ic { width: 30px; height: 30px; }
.mbar { display: none; }
.rv { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .rv.in { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .bar-nav { display: none; } .hero, .origin, .b2b { grid-template-columns: 1fr; } .hero { padding-top: 96px; } .hero-fruit { width: min(300px, 70%); order: -1; } .note { left: auto; right: -12%; top: 62%; }
  .proof, .cards, .slip { grid-template-columns: 1fr; } .origin-copy, .b2b-copy { justify-self: start; } .polaroids { min-height: 380px; } .half { width: 40vw; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(43, 20, 36, 0.96); }
  .mbar .btn { min-height: 48px; } .wa-fab { display: none; } body { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .split-text .ch, .rv { opacity: 1; transform: none; } .scribble path, .arrow path { stroke-dashoffset: 0; } }
[hidden] { display: none !important; }
/* ---- pulido ---- */
.palma { position: absolute; z-index: -1; left: 50%; top: 46%; width: 165%; max-width: none; transform: translate(-50%, -50%) rotate(-8deg); opacity: 0.9; pointer-events: none; }
.hero-fruit { isolation: isolate; }
.split-hint { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); font-weight: 700; letter-spacing: 0.08em; color: var(--gold); transition: opacity 0.4s; animation: nudge 1.8s ease-in-out infinite; }
.split.opened .split-hint { opacity: 0; } @keyframes nudge { 50% { transform: translate(-50%, 6px); } }
.pol-1 { width: min(62%, 400px); left: 0; top: 0; } .pol-2 { width: min(62%, 400px); right: 0; top: 34%; bottom: auto; }
.bi { display: flex; gap: 12px; align-items: center; } .bi img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; flex: none; }
@media (max-width: 960px) {
  .hero { gap: 14px; padding-top: 88px; } .hero-fruit { width: min(210px, 52%); margin-bottom: -10px; } .palma { width: 190%; }
  .note { left: auto; right: -78%; top: 34%; font-size: 15px; } .note .arrow { display: none; }
  .split-stage { align-items: end; } .half { top: 30%; width: 38vw; } .split-copy { padding-bottom: 15vh; } .split-copy h2 { font-size: clamp(44px, 12vw, 64px); } .split-hint { bottom: 4vh; } .counter { bottom: auto; top: 76px; font-size: 48px; }
  #game { aspect-ratio: 600 / 760; } .polaroids { min-height: 420px; } .pol-1, .pol-2 { width: 74%; } .pol-2 { top: 40%; }
}
@media (max-width: 960px) { .note { right: auto; left: -74%; top: 44%; text-align: right; } }
@media (max-width: 960px) { .note { left: -40%; } }
@media (max-width: 520px) { .note { display: none; } }