/* Tokens: portados tal cual desde Chile's Cookies Design System (tokens/*.css) */
:root{
--burgundy-950:#2E040E;--burgundy-900:#43061A;--burgundy-800:#590A22;--burgundy-700:#6B0E26;--burgundy-600:#851A35;--burgundy-500:#A02844;
--velvet-700:#7E1424;--velvet-600:#9E1B2E;--velvet-500:#B8283A;--velvet-300:#E07A84;
--rose-50:#FFF5F5;--rose-100:#FCE8E9;--rose-200:#F7D2D6;--rose-300:#EFB2BA;--rose-400:#E38D99;
--cream-0:#FFFFFF;--cream-50:#FFFBF5;--cream-100:#FBF3E8;--cream-200:#F4E7D4;--cream-300:#E9D6BB;
--cocoa-950:#1C1210;--cocoa-900:#2A1A16;--cocoa-800:#3B2620;--cocoa-600:#5E4034;--cocoa-500:#7A5646;--cocoa-300:#B89A8A;--cocoa-100:#EADFD8;
--gold-600:#A8803C;--gold-500:#C9A15B;--gold-300:#E5CF9E;--gold-100:#F6EDD9;
--surface-page:var(--cream-50);--surface-card:var(--cream-0);
--text-strong:var(--cocoa-900);--text-body:var(--cocoa-800);--text-muted:var(--cocoa-600);--text-brand:var(--burgundy-700);
--border-subtle:var(--cream-300);--focus-ring:var(--rose-400);
--shadow-sm:0 2px 6px rgba(67,6,26,.08),0 1px 2px rgba(67,6,26,.06);
--shadow-md:0 8px 20px -6px rgba(67,6,26,.16),0 2px 6px rgba(67,6,26,.06);
--shadow-lg:0 22px 44px -14px rgba(67,6,26,.26),0 6px 14px rgba(67,6,26,.08);
--shadow-cookie:0 18px 30px -12px rgba(46,4,14,.45);
--ease-out:cubic-bezier(.22,1,.36,1);--dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;
--radius-lg:20px;--radius-xl:28px;--radius-2xl:40px;
--font-display:"Young Serif","Cooper Black",Georgia,serif;
--font-body:"Figtree","Helvetica Neue",system-ui,sans-serif;
--font-script:"Caveat","Segoe Print",cursive;
--header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:400 16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--text-brand);margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--burgundy-700)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font:700 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--velvet-600)}
.h2{font-size:clamp(36px,5vw,52px);line-height:1.05}
.sprite{position:absolute}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.header{position:sticky;top:0;z-index:20;background:rgba(255,251,245,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.header .wrap{height:var(--header-h);display:flex;align-items:center;gap:clamp(12px,2.5vw,32px)}
.header .logo img{height:60px;width:60px}
.nav{display:flex;gap:clamp(14px,2.5vw,28px);margin-left:auto}
.nav a{font:600 15px var(--font-body);color:var(--text-strong);text-decoration:none;padding:8px 0}
.nav a:hover{color:var(--velvet-600)}

/* Badge y botón */
.badge{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;font:800 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:var(--burgundy-700);color:var(--cream-50)}
.badge--velvet{background:var(--velvet-600)}
.badge--cocoa{background:var(--cocoa-900)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 30px;border-radius:999px;border:2px solid var(--burgundy-700);background:var(--burgundy-700);color:var(--cream-50);font:700 17px/1 var(--font-body);letter-spacing:.01em;text-decoration:none;box-shadow:0 4px 0 var(--burgundy-950);transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--burgundy-800);color:var(--cream-50)}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn .ico{width:20px;height:20px}

/* Hero */
.hero{background:var(--rose-100);overflow:hidden}
.hero .wrap{padding-top:72px;padding-bottom:96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero h1{font-size:clamp(48px,6.5vw,84px);line-height:1}
.hero-copy>p{font-size:19px;line-height:1.55;max-width:470px}
.features{display:flex;flex-wrap:wrap;gap:8px 24px;font:600 14px var(--font-body);color:var(--burgundy-700)}
.features span{display:flex;align-items:center;gap:8px}
.hero-art{position:relative;height:clamp(380px,45vw,520px)}
.hero-arch{position:absolute;right:0;top:0;width:82%;height:100%;border-radius:240px 240px 40px 40px;object-fit:cover;box-shadow:var(--shadow-cookie)}
.hero-circle{position:absolute;left:0;bottom:36px;width:190px;height:190px;border-radius:50%;object-fit:cover;border:8px solid var(--cream-50);box-shadow:var(--shadow-lg)}
.hero-script{position:absolute;left:0;top:-8px;z-index:2;padding:8px 14px;border-radius:18px;background:var(--cream-50);box-shadow:var(--shadow-md);font:700 26px/1.05 var(--font-script);color:var(--velvet-600);transform:rotate(-6deg)}

/* Sabores */
.flavors{padding:96px 0}
.section-head{margin-bottom:40px;display:flex;flex-direction:column;gap:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px}
.card{display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);transition:all var(--dur-slow) var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-photo{position:relative;aspect-ratio:4/3;background:var(--rose-100);overflow:hidden}
.card-photo--oreo{background:var(--cocoa-100)}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.card:hover .card-photo img{transform:scale(1.05)}
.card-photo .badge{position:absolute;top:14px;left:14px}
.card-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.card-body h3{font-size:26px;line-height:1.15}
.card-body p{font-size:15px;line-height:1.55;color:var(--text-muted)}

/* Proceso */
.process{background:var(--burgundy-700);color:var(--cream-50)}
.process .wrap{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:56px;align-items:center}
.process-photo{width:100%;height:clamp(280px,40vw,440px);object-fit:cover;border-radius:var(--radius-2xl)}
.process-copy{display:flex;flex-direction:column;gap:28px}
.process h2{color:var(--cream-50)}
.process-copy>p{font-size:18px;line-height:1.6;color:var(--rose-100);max-width:520px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}
.steps li{display:flex;gap:20px;align-items:flex-start}
.step-n{flex:none;width:52px;height:52px;border-radius:50%;border:2px dashed var(--rose-300);display:grid;place-items:center;font:400 18px var(--font-display);color:var(--rose-200)}
.steps h3{color:var(--cream-50);font-size:24px;margin-bottom:4px}
.steps p{color:var(--rose-100);line-height:1.55}

/* Regalos */
.gifts{padding:96px 0}
.gift-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px;align-items:center;background:var(--rose-50);border:2px dashed var(--rose-400);border-radius:var(--radius-2xl);padding:clamp(24px,4vw,48px)}
.gift-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.script{font:700 30px var(--font-script);color:var(--velvet-600);transform:rotate(-2deg)}
.gift-copy h2{font-size:clamp(34px,4.5vw,48px);line-height:1.05}
.gift-copy p{font-size:17px;line-height:1.6;max-width:460px}
.gift-seal{justify-self:center;width:min(100%,320px);aspect-ratio:1;border-radius:50%;background:var(--cream-50);display:grid;place-items:center;box-shadow:var(--shadow-md)}
.gift-seal img{width:82%;height:auto;aspect-ratio:1}

/* Preguntas */
.faq{background:var(--cream-100)}
.faq .wrap{max-width:820px;padding-top:88px;padding-bottom:88px}
.faq h2{font-size:clamp(34px,4.5vw,48px);line-height:1.05;text-align:center;margin-bottom:32px}
.qa{display:flex;flex-direction:column;gap:10px}
.qa details{background:var(--rose-50);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:background var(--dur-base)}
.qa details[open]{background:var(--surface-card)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font:700 16px var(--font-body);color:var(--text-strong)}
.qa summary::-webkit-details-marker{display:none}
.qa .plus{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--rose-100);color:var(--burgundy-700);transition:all var(--dur-base) var(--ease-out)}
.qa details[open] .plus{background:var(--burgundy-700);color:var(--cream-50);transform:rotate(45deg)}
.qa .plus .ico{width:16px;height:16px}
.qa details p{padding:0 22px 20px;font-size:15px;line-height:1.6;color:var(--text-muted)}

/* Footer */
.footer{background:var(--cocoa-900);color:var(--cream-100)}
.footer .wrap{padding-top:56px;padding-bottom:56px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.footer img{height:110px;width:110px}
.footer-name{font:400 26px var(--font-display);color:var(--cream-50)}
.footer-tag{font-size:14px;line-height:1.6;color:var(--cocoa-300);margin-top:6px}

@media (max-width:600px){
  .nav{gap:16px}
  .nav a{font-size:14px}
  .header .logo img{height:52px;width:52px}
  .hero .wrap{padding-top:48px;padding-bottom:64px}
  .hero-circle{width:140px;height:140px}
  .flavors,.gifts{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}