:root{--yolk:#FFC93C;--sun:#FFE08A;--ink:#3A2111;--red:#E5483A;--green:#5A8F3E;--white:#FFFDF8}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font:1.05rem/1.65 Nunito,system-ui,sans-serif}
h1,h2,h3,.logo{font-family:Fraunces,Georgia,serif;font-weight:900;line-height:1.05}
h1{font-size:clamp(2.6rem,6.5vw,5rem)}
h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.2rem}
a{color:inherit}:focus-visible{outline:3px solid var(--red);outline-offset:3px}
section{padding:4.5rem clamp(1.2rem,6vw,5rem)}
.top{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:1.2rem clamp(1.2rem,6vw,5rem)}
.logo{text-decoration:none;font-size:1.6rem;display:flex;align-items:center;gap:.5rem}
.egg,.blob{border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.logo .egg{width:26px;height:32px;background:var(--white);border:3px solid var(--ink);box-shadow:inset 0 -8px 0 var(--yolk)}
nav{display:flex;gap:1.5rem;align-items:center;font-weight:800}
nav a{text-decoration:none}.nbtn{background:var(--ink);color:var(--yolk);padding:.55rem 1.2rem;border-radius:99px}
.btn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:99px;padding:.95rem 1.9rem;font:800 1rem Nunito;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 #A9291D;transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #A9291D}
.btn.light{background:var(--yolk);color:var(--ink);box-shadow:0 5px 0 #B8861A}
/* hero */
.hero{background:var(--yolk);display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;min-height:100vh;padding-top:7rem;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:28px;background:radial-gradient(circle at 24px 0,transparent 23px,var(--red) 24px) 0 0/48px 28px repeat-x}
.chip{display:inline-block;background:var(--ink);color:var(--yolk);padding:.3rem 1rem;border-radius:99px;font-weight:800;font-size:.85rem;margin-bottom:1.2rem}
.lead{font-size:1.2rem;max-width:46ch;margin:1.3rem 0 2rem}
.fry{position:relative;width:min(440px,85%);aspect-ratio:1;justify-self:center;background:var(--white);border-radius:46% 54% 58% 42%/52% 44% 56% 48%;box-shadow:0 16px 0 #0002;animation:wob 6s ease-in-out infinite}
.yolk{position:absolute;width:42%;aspect-ratio:1;left:29%;top:29%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE066,#F59E0B 70%);box-shadow:inset -8px -10px 0 #0000001f;transition:transform .15s}
@keyframes wob{50%{border-radius:54% 46% 44% 56%/46% 56% 44% 54%}}
/* marquee */
.marq{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;padding:1.6rem 0 .9rem;font:900 1.4rem Fraunces,serif}
.marq div{display:inline-block;animation:mq 22s linear infinite}
.marq span{margin:0 1.4rem}.marq span::before{content:"\25CF";margin-right:2.8rem;color:var(--yolk)}
@keyframes mq{to{transform:translateX(-50%)}}
/* crianza */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.blob{display:grid;place-items:center;width:110px;height:136px;font:900 1.5rem Fraunces,serif;margin-bottom:1rem;font-style:normal;color:var(--ink)}
.b1{background:var(--yolk)}.b2{background:#BFE0A0}.b3{background:#F7B3A9}
.cards h3{font-size:1.5rem;margin-bottom:.4rem}
/* cartón */
.carton{background:var(--sun);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.types{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0}
.types button{border:3px solid var(--ink);background:var(--white);color:var(--ink);font:800 .95rem Nunito;padding:.45rem 1.1rem;border-radius:99px;cursor:pointer}
.types button[aria-checked=true]{background:var(--ink);color:var(--yolk)}
.qty{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.qty button{width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:var(--white);font:900 1.3rem Nunito;cursor:pointer}
.tot{font-size:1.1rem;margin-bottom:1.3rem}.tot b{font:900 2.4rem Fraunces,serif;display:block;line-height:1}.tot small{font-weight:700}
.box{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;background:#C9B08A;padding:1.1rem;border-radius:24px;border:4px solid #A68B62;box-shadow:0 10px 0 #8B7048}
.cup{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#9E8560,#B9A27C);border:0;cursor:pointer;display:grid;place-items:center;padding:0}
.cup i{display:block;width:70%;height:86%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--egg,#fff);box-shadow:inset -5px -6px 0 #0002,0 3px 0 #0003;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.cup.on i{transform:scale(1)}.cup.small i{width:50%;height:62%}
/* pollos */
.meat{background:var(--ink);color:var(--white);text-align:center}
.meat h2{color:var(--yolk)}.meat p{max-width:56ch;margin:0 auto 2rem}
/* contacto */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact ul{list-style:none;padding:0;display:grid;gap:1rem}
.contact li b{display:block;font:900 1.05rem Fraunces,serif;color:var(--red)}
.contact form{display:grid;gap:1rem}
label{display:grid;gap:.3rem;font-weight:800}
input,textarea{font:inherit;font-weight:400;padding:.75rem 1rem;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);width:100%}
.st{min-height:1.4rem;font-weight:800}.st.err{color:#B3261E}
footer{background:var(--yolk);text-align:center;padding:1.4rem;font-weight:700}
@media(max-width:860px){
 .hero,.carton,.contact,.cards{grid-template-columns:1fr}
 .hero{min-height:auto;padding-bottom:5rem}.fry{width:65%}
 nav a:not(.nbtn){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}