:root { --verde:#174735; --verde-osc:#0f2d23; --crema:#f6f0df; --mostaza:#e8b94a; --coral:#ed6e4d; --tinta:#173126; --gris:#637067; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--crema); }
body { margin:0; color:var(--tinta); background:var(--crema); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.saltar { position:fixed; z-index:20; top:-4rem; left:1rem; padding:.7rem 1rem; color:#fff; background:#111; border-radius:0 0 .5rem .5rem; }.saltar:focus { top:0; }
.barra { position:absolute; z-index:5; top:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.35rem clamp(1.2rem,4vw,4.5rem); color:#fff; }.marca { display:inline-flex; align-items:baseline; gap:.22rem; font-family:Georgia,serif; font-size:1.55rem; font-weight:bold; letter-spacing:-.07em; }.marca span { font-size:.68em; font-weight:normal; letter-spacing:-.04em; }.marca i { color:var(--mostaza); font-style:normal; font-size:.55em; }.barra nav { display:flex; gap:2rem; font-size:.84rem; }.barra nav a,.barra__pedido { opacity:.9; }.barra nav a:hover,.barra__pedido:hover { opacity:1; text-decoration:underline; text-underline-offset:.35rem; }.barra__pedido { padding:.55rem 0; font-size:.88rem; font-weight:bold; }.barra__pedido span { color:var(--mostaza); font-size:1.25rem; }
.hero-scrub { height:280vh; position:relative; background:var(--verde-osc); }.hero-scrub__pegado { position:sticky; top:0; height:100vh; overflow:hidden; color:#fff; }.hero-scrub__canvas { position:absolute; width:100%; height:100%; inset:0; background:#173d2d; }.hero-scrub__velo { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,30,20,.84),rgba(13,43,30,.52) 42%,rgba(13,43,30,.04) 78%),linear-gradient(0deg,rgba(10,34,24,.45),transparent 45%); }.hero-scrub__contenido { position:relative; z-index:1; display:flex; min-height:100%; max-width:1320px; margin:auto; padding:clamp(8rem,17vh,12rem) clamp(1.2rem,8vw,7rem) 5rem; flex-direction:column; align-items:flex-start; justify-content:center; }.eyebrow { margin:0 0 .9rem; color:inherit; font-size:.72rem; font-weight:bold; letter-spacing:.16em; text-transform:uppercase; }.hero-scrub h1,h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:normal; letter-spacing:-.065em; line-height:.94; }.hero-scrub h1 { max-width:850px; font-size:clamp(3.5rem,8vw,7.7rem); }.hero-scrub h1 em { color:var(--mostaza); }.hero-scrub__texto { width:min(31rem,100%); margin:1.6rem 0 2rem; font-size:clamp(1rem,1.4vw,1.16rem); color:#f5f0df; }.boton { display:inline-flex; align-items:center; gap:1.6rem; padding:.95rem 1.15rem 1rem 1.35rem; border-radius:100px; font-size:.86rem; font-weight:bold; transition:transform .2s,background .2s; }.boton:hover { transform:translateY(-3px); }.boton span { font-size:1.2rem; line-height:0; }.boton--crema { color:var(--verde-osc); background:var(--crema); }.boton--verde { color:#fff; background:var(--verde); }.hero-scrub__guia { position:absolute; z-index:2; right:clamp(1.2rem,4vw,4.5rem); bottom:1.5rem; display:flex; align-items:center; gap:.7rem; margin:0; color:#fff; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; writing-mode:vertical-rl; }.hero-scrub__guia span { color:var(--mostaza); font-size:1.1rem; }
.presentacion { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:3rem; max-width:1280px; margin:auto; padding:clamp(5rem,12vw,10rem) clamp(1.2rem,7vw,6rem); }.presentacion .eyebrow,.seccion .eyebrow,.fiado .eyebrow,.combo .eyebrow,.visita .eyebrow { color:#ad542e; }.presentacion h2,.seccion h2,.fiado h2,.combo h2,.visita h2,.pedido h2 { font-size:clamp(2.5rem,4.6vw,5rem); }.presentacion > p { max-width:29rem; margin:0; color:var(--gris); }.beneficios { margin:0; padding:0; list-style:none; }.beneficios li { display:grid; gap:.1rem; padding:0 0 1rem; margin:0 0 1rem; border-bottom:1px solid #d5d1c5; }.beneficios b { font-size:.86rem; }.beneficios span { color:var(--gris); font-size:.85rem; }
.seccion { max-width:1400px; margin:auto; padding:1rem clamp(1.2rem,4vw,4rem) clamp(5rem,10vw,9rem); }.seccion__cabecera { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin:0 auto 2.6rem; max-width:1180px; }.seccion__cabecera h2 { max-width:43rem; }.productos { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.producto { padding:0; overflow:hidden; border:1px solid #e0dbcc; background:#fffdf7; transition:transform .25s; }.producto:hover { transform:translateY(-.4rem); }.producto__visual { display:grid; min-height:15rem; place-items:center; background:#e8e2cc; font-size:5rem; }.producto__visual span { filter:drop-shadow(.3rem .5rem 0 rgba(0,0,0,.13)); transform:rotate(-8deg); }.producto__visual--pan span { transform:rotate(-25deg); }.producto__visual--abarrotes span { transform:rotate(7deg); }.producto__visual--snacks span { transform:rotate(-4deg); }.producto__visual--bebidas { background:#cce1cf; }.producto__visual--pan { background:#efc88a; }.producto__visual--abarrotes { background:#e9d7ab; }.producto__visual--snacks { background:#ecad82; }.producto p { margin:1.15rem 1.15rem .18rem; color:#a65a35; font-size:.7rem; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }.producto h3 { margin:0 1.15rem 1rem; font:normal 1.45rem/1 Georgia,serif; letter-spacing:-.06em; }.producto b { display:block; margin:0 1.15rem 1.3rem; font-size:.84rem; }
.fiado { display:grid; grid-template-columns:.85fr 1.6fr 1fr; gap:clamp(2rem,6vw,7rem); align-items:center; padding:clamp(4.5rem,10vw,9rem) clamp(1.2rem,10vw,11rem); color:var(--crema); background:var(--verde); }.fiado .eyebrow { color:var(--mostaza); }.fiado h2 { font-size:clamp(3.2rem,6vw,6.4rem); }.fiado__texto > p:last-child { max-width:26rem; color:#d6e0cc; }.fiado__sello { width:11rem; height:11rem; display:grid; place-content:center; border:1px solid #d9ae49; border-radius:50%; color:var(--mostaza); font-size:.75rem; line-height:1.15; letter-spacing:.11em; text-align:center; text-transform:uppercase; transform:rotate(-11deg); }.fiado__sello strong { font:normal 2rem Georgia,serif; letter-spacing:-.1em; }.fiado__nota { align-self:end; padding:1.4rem 0 0; border-top:1px solid rgba(246,240,223,.4); }.fiado__nota span { color:var(--mostaza); font:4rem/.6 Georgia,serif; }.fiado__nota p { margin:1rem 0 0; font:italic 1.25rem/1.2 Georgia,serif; }
.combo { display:grid; grid-template-columns:1fr 1fr; align-items:center; max-width:1180px; min-height:23rem; margin:clamp(4rem,8vw,7rem) auto; padding:clamp(2rem,6vw,5rem); color:#fff; background:var(--coral); }.combo .eyebrow { color:#ffe5a3; }.combo h2 { font-size:clamp(3.5rem,6vw,6rem); }.combo p:not(.eyebrow) { max-width:23rem; }.combo b { display:block; margin-top:1.5rem; color:#ffe5a3; font-size:1.3rem; }.combo__ilustracion { position:relative; height:15rem; }.combo__ilustracion span { position:absolute; display:grid; width:7.5rem; height:7.5rem; place-items:center; border-radius:50%; background:#ffd672; box-shadow:.45rem .55rem 0 rgba(131,51,32,.24); font-size:4.5rem; }.combo__ilustracion span:nth-child(1) { top:1rem; left:4%; transform:rotate(-13deg); }.combo__ilustracion span:nth-child(2) { right:8%; bottom:0; transform:rotate(12deg); }.combo__ilustracion span:nth-child(3) { z-index:1; top:0; right:31%; width:5rem; height:5rem; background:#fff5d0; font-size:3rem; }
.visita { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(3rem,10vw,11rem); max-width:1180px; margin:auto; padding:clamp(4rem,8vw,7rem) clamp(1.2rem,0vw,0rem) clamp(6rem,11vw,10rem); }.visita__mapa { position:relative; min-height:22rem; display:grid; place-items:center; overflow:hidden; background:repeating-linear-gradient(90deg,#d6d9ca 0 2px,transparent 2px 6.3rem),repeating-linear-gradient(0deg,#d6d9ca 0 2px,transparent 2px 5rem),#e6e8da; }.visita__mapa:before,.visita__mapa:after { position:absolute; background:#c6cbba; content:''; }.visita__mapa:before { width:130%; height:2.8rem; transform:rotate(-26deg); }.visita__mapa:after { width:2.4rem; height:130%; transform:rotate(32deg); }.visita__mapa span { z-index:1; width:8rem; height:8rem; display:grid; place-content:center; border-radius:50%; color:#fff; background:var(--coral); font:1.5rem/.9 Georgia,serif; letter-spacing:-.1em; text-align:center; }.visita__mapa i { position:absolute; z-index:1; bottom:15%; right:14%; width:.8rem; height:.8rem; border-radius:50%; background:var(--verde); }.visita__mapa small { position:absolute; z-index:1; bottom:1rem; left:1rem; color:#637067; font-size:.68rem; }.visita__texto p:not(.eyebrow) { color:var(--gris); }.enlace { display:inline-block; margin-top:1rem; padding-bottom:.25rem; color:var(--verde); border-bottom:1px solid var(--verde); font-size:.88rem; font-weight:bold; }.enlace span { color:var(--coral); font-size:1.25rem; }
.pedido { padding:clamp(5rem,10vw,9rem) 1.2rem; color:#fff; background:var(--verde-osc); text-align:center; }.pedido .eyebrow { color:var(--mostaza); }.pedido h2 { font-size:clamp(3rem,6vw,6.5rem); }.pedido > p:not(.eyebrow) { max-width:34rem; margin:1.7rem auto 2.2rem; color:#d8dfd3; }.pedido .boton { background:var(--mostaza); color:var(--verde-osc); }
footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem clamp(1.2rem,4vw,4rem); color:#f3f1e7; background:#10291f; } footer p,footer > a:last-child { margin:0; color:#b8c6b5; font-size:.75rem; }footer > a:last-child:hover { color:#fff; }
html.js .hero-entrada,html.js .revelar,html.js .productos > * { opacity:0; transform:translateY(1.4rem); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rvl-d,0ms); }html.js .en { opacity:1; transform:none; }html.anim-fallback .hero-entrada,html.anim-fallback .revelar,html.anim-fallback .productos > * { opacity:1; transform:none; }
@media (max-width:760px) { .barra { padding:1.1rem 1.2rem; }.barra nav { display:none; }.barra__pedido { font-size:.76rem; }.hero-scrub { height:220vh; }.hero-scrub__velo { background:linear-gradient(0deg,rgba(7,30,20,.85),rgba(13,43,30,.08) 70%); }.hero-scrub__contenido { justify-content:end; padding:7rem 1.2rem 5rem; }.hero-scrub h1 { font-size:clamp(3rem,15vw,5rem); }.hero-scrub__texto { margin:1rem 0 1.5rem; }.hero-scrub__guia { right:1rem; }.presentacion,.fiado,.visita { grid-template-columns:1fr; gap:2rem; padding-right:1.2rem; padding-left:1.2rem; }.presentacion { padding-top:4.5rem; }.productos { grid-template-columns:repeat(2,1fr); }.producto__visual { min-height:10rem; font-size:3.8rem; }.producto h3 { font-size:1.25rem; }.seccion__cabecera { display:block; }.fiado__sello { width:8.5rem; height:8.5rem; }.fiado__nota { max-width:17rem; }.combo { grid-template-columns:1fr; margin:3rem 1.2rem; }.combo__ilustracion { height:11rem; }.visita__mapa { min-height:19rem; }.pedido h2 { font-size:clamp(2.8rem,13vw,4.6rem); }footer { display:grid; grid-template-columns:1fr auto; }footer p { grid-column:1/-1; grid-row:2; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero-scrub { height:100svh; }.hero-scrub__guia { display:none; }*,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }