/* ═══════════════════════════════════════════════════════════ SANTA BRASA — Editorial Luxury sobre paleta de brasa ═══════════════════════════════════════════════════════════ */ :root{ --carbon:#0E0B0A; --carbon-2:#151010; --carbon-3:#1C1514; --ember:#D9542B; --ember-hot:#F0703C; --cream:#EDE0CC; --ash:#B8AFA4; --ash-dim:#8A8078; --hair:rgba(237,224,204,.10); --hair-strong:rgba(237,224,204,.18); --shell-pad:.5rem; --r-out:2rem; --r-in:calc(var(--r-out) - var(--shell-pad)); --ease:cubic-bezier(.32,.72,0,1); --ease-soft:cubic-bezier(.22,1,.36,1); --measure:68ch; --gutter:clamp(1.25rem,5vw,4.5rem); } *,*::before,*::after{box-sizing:border-box} html{ color-scheme:dark; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7rem; /* overflow-x en el por sí solo no frena el desplazamiento lateral en iOS: el sigue desplazándose. `clip` lo corta sin crear un contenedor de scroll (a diferencia de `hidden`, que rompería position:sticky). */ overflow-x:clip; overscroll-behavior-y:none; } body{ margin:0; background:var(--carbon); color:var(--cream); font-family:'Switzer',ui-sans-serif,system-ui,sans-serif; font-size:clamp(1rem,.95rem + .25vw,1.0625rem); line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100%; } img,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a,button{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(217,84,43,.2); } h1,h2,h3{ font-family:'Clash Display',ui-sans-serif,system-ui,sans-serif; font-weight:700; line-height:.95; letter-spacing:-.02em; margin:0; text-wrap:balance; } p{margin:0} ::selection{background:var(--ember);color:#fff} :focus-visible{ outline:2px solid var(--ember-hot); outline-offset:3px; border-radius:4px; } .skip-link{ position:fixed;top:0;left:50%;transform:translate(-50%,-120%); z-index:80;background:var(--ember);color:#fff; padding:.75rem 1.5rem;border-radius:0 0 1rem 1rem;font-weight:600; transition:transform .3s var(--ease); } .skip-link:focus-visible{transform:translate(-50%,0)} /* ── Grano fijo ─────────────────────────────────────────── */ .grain{ position:fixed;inset:0;z-index:60;pointer-events:none; opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Doble bisel ────────────────────────────────────────── */ .shell{ background:rgba(237,224,204,.045); border:1px solid var(--hair); border-radius:var(--r-out); padding:var(--shell-pad); } .shell > .core{ background:var(--carbon-2); border-radius:var(--r-in); box-shadow:inset 0 1px 1px rgba(237,224,204,.09); overflow:hidden; height:100%; } /* ── Eyebrow ────────────────────────────────────────────── */ .eyebrow{ display:inline-block; border:1px solid var(--hair-strong); border-radius:999px; padding:.3rem .85rem; font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-bottom:1.75rem; } /* ── Botones ────────────────────────────────────────────── */ .btn{ --btn-bg:var(--ember); --btn-fg:#fff; display:inline-flex;align-items:center;gap:.75rem; background:var(--btn-bg);color:var(--btn-fg); border:none;border-radius:999px; padding:.6rem .6rem .6rem 1.6rem; font:inherit;font-weight:600;letter-spacing:-.01em; cursor:pointer; transition:transform .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease); box-shadow:0 0 0 0 rgba(217,84,43,.4); } .btn:hover{background:var(--ember-hot);box-shadow:0 12px 40px -12px rgba(240,112,60,.7)} .btn:active{transform:scale(.975)} .btn__pip{ width:2rem;height:2rem;flex:none; border-radius:999px; background:rgba(255,255,255,.16); display:grid;place-items:center; transition:transform .5s var(--ease),background-color .5s var(--ease); } .btn__pip svg{width:.875rem;height:.875rem} .btn:hover .btn__pip{transform:translate(3px,-3px) scale(1.06);background:rgba(255,255,255,.26)} .btn--ghost{ --btn-bg:transparent;--btn-fg:var(--cream); border:1px solid var(--hair-strong); padding:.6rem 1.6rem; box-shadow:none; } .btn--ghost:hover{background:rgba(237,224,204,.07);box-shadow:none} /* Los .btn llevan el padding cargado a la izquierda para compensar el pip de la derecha. Sin pip, la etiqueta queda corrida: --plain la vuelve a centrar, igual que ya hacía .btn--ghost por su cuenta. */ .btn--plain{padding-inline:1.6rem;justify-content:center;text-align:center} .btn--sm{padding:.4rem .4rem .4rem 1.15rem;font-size:.875rem} .btn--sm .btn__pip{width:1.65rem;height:1.65rem} /* ── Nav ────────────────────────────────────────────────── */ .nav-shell{ position:fixed;top:0;left:0;right:0;z-index:70; display:flex;justify-content:center; padding:calc(1.5rem + env(safe-area-inset-top)) var(--gutter) 0; pointer-events:none; } .nav{ pointer-events:auto; display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem); background:rgba(14,11,10,.72); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); border:1px solid var(--hair); border-radius:999px; padding:.5rem .5rem .5rem 1.25rem; transition:box-shadow .6s var(--ease),background-color .6s var(--ease); } .is-scrolled .nav{ background:rgba(14,11,10,.88); box-shadow:0 20px 60px -24px rgba(0,0,0,.9); } .nav__brand{display:flex;align-items:center;min-height:2.75rem;padding-inline:.15rem} /* Sin mix-blend-mode: el PNG nuevo trae alpha real. El anterior arrastraba el negro del recorte del menú y necesitaba `screen` para disimularlo. */ .nav__brand img{width:auto;height:2.4rem} .nav__links{ display:flex;gap:1.75rem;list-style:none;margin:0;padding:0; font-size:.875rem;font-weight:500;color:var(--ash); } .nav__links a{transition:color .4s var(--ease)} .nav__links a:hover{color:var(--cream)} .burger{ display:none; width:2.75rem;height:2.75rem; background:none;border:1px solid var(--hair-strong);border-radius:999px; cursor:pointer;position:relative; } .burger span{ position:absolute;left:50%;top:50%; width:1rem;height:1.5px;background:var(--cream); transition:transform .5s var(--ease),opacity .3s var(--ease); } .burger span:nth-child(1){transform:translate(-50%,-4px)} .burger span:nth-child(2){transform:translate(-50%,3px)} .burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)} .overlay{ position:fixed;inset:0;z-index:65; background:rgba(14,11,10,.9); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); display:grid;place-items:center; overscroll-behavior:contain; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .overlay[hidden]{display:none} .overlay__links{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:.5rem;text-align:center; } .overlay__links a{ font-family:'Clash Display',sans-serif; font-size:clamp(2rem,9vw,3.25rem);font-weight:600;letter-spacing:-.02em; opacity:0;transform:translateY(2rem); transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s var(--ease); } .overlay.is-open .overlay__links a{opacity:1;transform:translateY(0)} .overlay__links li:nth-child(1) a{transition-delay:.06s} .overlay__links li:nth-child(2) a{transition-delay:.12s} .overlay__links li:nth-child(3) a{transition-delay:.18s} .overlay__links li:nth-child(4) a{transition-delay:.24s;color:var(--ember)} .overlay__links a:hover{color:var(--ember-hot)} /* ── Hero ───────────────────────────────────────────────── */ .hero{ position:relative; min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,5vw,5rem); padding:10rem var(--gutter) 6rem; } .hero__glow{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(60% 55% at 78% 42%,rgba(217,84,43,.30),transparent 70%), radial-gradient(50% 40% at 12% 88%,rgba(240,112,60,.12),transparent 70%); } .hero__title{ font-size:clamp(3.25rem,9.5vw,7.5rem); margin-bottom:1.75rem; } .hero__title em{ font-style:normal; color:var(--ember); } .hero__lede{ max-width:46ch;color:var(--ash); font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); margin-bottom:2.5rem; } .hero__lede strong{color:var(--cream);font-weight:500} .hero__actions{display:flex;flex-wrap:wrap;gap:.875rem} /* Los clips son verticales 9:16. El contenedor adopta esa misma proporción para que se vean enteros —sin recorte— y se limita por ALTURA en vez de por anchura, que es lo que evita que ocupen media pantalla. */ .shell--hero{--r-out:2.5rem;width:fit-content;max-width:100%;margin-inline:auto} .hero__stage .core{ position:relative; aspect-ratio:9/16; height:min(76svh,720px); max-width:100%; } .hero__stage video{width:100%;height:100%;object-fit:cover} /* ── Marquee ────────────────────────────────────────────── */ .marquee{ border-block:1px solid var(--hair); padding:1.25rem 0;overflow:hidden; background:var(--carbon-2); } .marquee__track{ display:flex;gap:2rem;align-items:center;width:max-content; animation:slide 38s linear infinite; font-family:'Clash Display',sans-serif; font-size:clamp(1rem,2.2vw,1.5rem);font-weight:600; text-transform:uppercase;letter-spacing:.06em;color:var(--ash-dim); } .marquee i{color:var(--ember);font-style:normal} @keyframes slide{to{transform:translateX(-50%)}} /* ── Secciones ──────────────────────────────────────────── */ .section{padding:clamp(6rem,12vw,10rem) var(--gutter)} .section__head{max-width:var(--measure);margin-bottom:clamp(3rem,6vw,4.5rem)} .section__title{font-size:clamp(2.25rem,5.5vw,4.25rem);margin-bottom:1.25rem} .section__lede{max-width:52ch;color:var(--ash)} .section__lede strong{color:var(--cream);font-weight:500} /* ── Toggle de corte ────────────────────────────────────── */ .cut-toggle{ position:relative;display:inline-flex; border:1px solid var(--hair);border-radius:999px; padding:.3rem;margin-bottom:clamp(2rem,4vw,3rem); background:rgba(237,224,204,.04); } .cut-toggle__btn{ position:relative;z-index:1; background:none;border:none;cursor:pointer; font:inherit;font-size:.875rem;font-weight:600; color:var(--ash);padding:.7rem 1.35rem;border-radius:999px; transition:color .5s var(--ease); white-space:nowrap; } .cut-toggle__btn.is-active{color:#fff} .cut-toggle__pill{ position:absolute;z-index:0;top:.3rem;bottom:.3rem; background:var(--ember);border-radius:999px; transition:transform .6s var(--ease),width .6s var(--ease); } /* ── Bento ──────────────────────────────────────────────── */ .bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.875rem,1.5vw,1.25rem); } /* Los cuatro sándwiches van a igual tamaño: los clips son verticales y escalarlos distinto en cada card hacía que unos se vieran mucho más recortados que otros. Papitas ocupa la fila entera. */ .card,.card--wide{grid-column:span 3} .card--side{grid-column:span 6} .card .core{display:flex;flex-direction:column} .card__media{position:relative;overflow:hidden;background:#000} .card__media video,.card__media img{ width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; transition:transform 1.1s var(--ease-soft); } /* Los clips son verticales 9:16 con el logo arriba y el nombre abajo. Se encuadra sobre el sándwich (≈64 % de la altura) para que entre entero sin arrastrar la marca ni el rótulo, que ya están en el

de la card. / .cardmedia video{object-position:50% 64%} .cardmedia img{object-position:50% 50%} .card:hover .cardmedia video,.card:hover .cardmedia img{transform:scale(1.05)} .cardflag{ position:absolute;top:.85rem;right:.85rem; background:var(--ember);color:#fff; border-radius:999px;padding:.22rem .7rem; font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; } .cardbody{padding:1.5rem 1.5rem 1.65rem;display:flex;flex-direction:column;flex:1} .cardname{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.5rem} .carddesc{color:var(--ash);font-size:.9375rem;margin-bottom:1.25rem;flex:1} .cardprice{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:auto} .cardexpand{display:none} .price{ font-family:'Clash Display',sans-serif; font-size:1.75rem;font-weight:700;color:var(--cream); font-variant-numeric:tabular-nums; transition:opacity .3s var(--ease); } .price.is-swapping{opacity:0} .pricecut{font-size:.75rem;color:var(--ash-dim);letter-spacing:.02em} .card--side .core{flex-direction:row;align-items:stretch} .card--side .cardmedia{flex:0 0 38%} .card--side .cardmedia img{height:100%;aspect-ratio:auto} .card--side .cardbody{justify-content:center} .sizes{list-style:none;margin:0;padding:0;display:flex;gap:2.5rem;flex-wrap:wrap} .sizes li{display:flex;flex-direction:column;gap:.15rem} .sizes span{font-size:.75rem;color:var(--ash-dim);text-transform:uppercase;letter-spacing:.12em} .sizes b{font-family:'Clash Display',sans-serif;font-size:1.5rem;font-weight:700} / ── Fuego / pasos ──────────────────────────────────────── / .section--fuego{background:var(--carbon-2);border-block:1px solid var(--hair)} .steps{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(.875rem,1.5vw,1.25rem); } .step .core{padding:2.25rem 2rem 2.5rem;background:var(--carbon-3)} .stepnum{ display:block; font-family:'Clash Display',sans-serif; font-size:.8125rem;font-weight:600;letter-spacing:.2em; color:var(--ember);margin-bottom:2.5rem; } .stepname{font-size:1.625rem;margin-bottom:.75rem} .step p{color:var(--ash);font-size:.9375rem} / ── Delivery ───────────────────────────────────────────── / / Sin la tarjeta 9:16 al lado, la sección toma el mismo fondo que el header —el muro con la Virgen— y el copy va encima. / #delivery{ position:relative; isolation:isolate; background:url("assets/img/fondo-vertical.jpg") center/cover no-repeat; } #delivery::before{ content:""; position:absolute;inset:0;z-index:0; / Cargado a la izquierda, que es donde vive el texto: así el muro se sigue viendo hacia la derecha en vez de quedar un rectángulo negro plano. / background:linear-gradient(100deg, rgba(14,11,10,.95) 0%, rgba(14,11,10,.88) 42%, rgba(14,11,10,.62) 74%, rgba(14,11,10,.45) 100%); } / La Virgen va como capa aparte y no dentro del `background` de la sección: `fondo-vertical.jpg` es 9:16 y en una sección ancha el `cover` la recorta hasta hacerla desaparecer. Acá ocupa el lugar que tenía la tarjeta. / #delivery::after{ content:""; position:absolute;z-index:0;pointer-events:none; right:7%;top:50%;transform:translateY(-50%); width:min(32%,380px);aspect-ratio:2/3; background:url("assets/img/virgen.webp") center/contain no-repeat; opacity:.5; } #delivery > {position:relative;z-index:1} .delivery{ display:grid;grid-template-columns:1fr; gap:clamp(2rem,5vw,5rem);align-items:center; max-width:56ch; } .facts{margin:2.5rem 0;padding:0;display:grid;gap:1.75rem} .facts div{ display:grid;grid-template-columns:8rem 1fr;gap:1rem; padding-bottom:1.75rem;border-bottom:1px solid var(--hair); } .facts dt{ font-size:.6875rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--ash-dim);padding-top:.3rem; } .facts dd{margin:0;font-size:1.0625rem;line-height:1.55} .facts a{ display:inline-flex;align-items:center;min-height:2.75rem; color:var(--ember);font-weight:600; border-bottom:1px solid rgba(217,84,43,.35); transition:color .4s var(--ease),border-color .4s var(--ease); } .facts a:hover{color:var(--ember-hot);border-color:var(--ember-hot)} /* ── Promos ─────────────────────────────────────────────── / .section--promos{background:var(--carbon-2);border-block:1px solid var(--hair)} .section--promos[hidden]{display:none} .promos{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:clamp(1rem,2vw,1.5rem); } .promo .core{ background:var(--carbon-3); padding:2rem 1.85rem 1.85rem; display:flex;flex-direction:column;gap:1.35rem; } .promohead{position:relative;display:grid;gap:.3rem} .promotagline{ font-size:.6875rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--ash-dim); } .promoname{font-size:clamp(1.75rem,3vw,2.25rem)} .promoflag{ position:absolute;top:0;right:0; border:1px solid rgba(217,84,43,.5);border-radius:999px; padding:.25rem .7rem; font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ember); } .promoitems{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;flex:1} .promoitems li{ position:relative;padding-left:1.35rem; color:var(--ash);font-size:.9375rem;line-height:1.45; } .promoitems li::before{ content:"";position:absolute;left:0;top:.58em; width:.4rem;height:.4rem;border-radius:999px;background:var(--ember); } .promofoot{ display:flex;align-items:center;justify-content:space-between; gap:1rem;flex-wrap:wrap; border-top:1px solid var(--hair);padding-top:1.25rem; } .promoprice{ font-family:'Clash Display',sans-serif;font-weight:700; font-size:1.35rem;line-height:1.1; } .promo .add{flex:none} / ── Zonas de reparto ───────────────────────────────────── / .zones{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem);align-items:center; } .zonesmap .core{padding:1.25rem 1.25rem 1rem;background:var(--carbon-3)} / El mapa de Google llega en claro; el filtro lo invierte y lo devuelve a la paleta de la casa. hue-rotate compensa la inversión del tono, que si no deja los verdes de las plazas en rosa. / .zonemap{ position:relative; / Cuadrado: el zoom sale de min(ancho,alto), así que la proporción 1:1 es la que deja entrar el anillo exterior con el mayor zoom posible. / aspect-ratio:1/1; max-width:34rem; margin-inline:auto; overflow:hidden; border-radius:calc(var(--r-in) - .75rem); background:#0E0B0A; isolation:isolate; } .zonemapbase{ position:absolute;inset:0; width:100%;height:100%;border:0; / Sin interacción a propósito: los anillos están posicionados sobre el centro, así que si el mapa se pudiera arrastrar dejarían de coincidir. / pointer-events:none; filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.9) contrast(1.06); } .zonemapoverlay{position:absolute;inset:0;pointer-events:none} .zonemapheat, .zonemapring, .zonemaporigin{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); border-radius:999px; } .zonemapheat{ background:radial-gradient(circle, rgba(240,112,60,.55) 0%, rgba(217,84,43,.34) 32%, rgba(217,84,43,.16) 62%, rgba(217,84,43,0) 100%); mix-blend-mode:screen; } .zonemapring{border:1px dashed rgba(240,112,60,.55)} .zonemapring.is-edge{border-color:rgba(240,112,60,.32)} .zonemapring-label{ position:absolute;left:50%; transform:translate(-50%,-50%); padding:.15rem .5rem; border-radius:999px; background:rgba(14,11,10,.82); color:var(--cream); font-size:.625rem;font-weight:600;letter-spacing:.08em; font-variant-numeric:tabular-nums; white-space:nowrap; } .zonemaporigin{ width:.85rem;height:.85rem; background:var(--ember-hot); box-shadow:0 0 0 .28rem rgba(240,112,60,.3),0 0 18px rgba(240,112,60,.8); animation:origin-pulse 3.2s var(--ease-soft) infinite; } @keyframes origin-pulse{ 0%,100%{box-shadow:0 0 0 .28rem rgba(240,112,60,.3),0 0 18px rgba(240,112,60,.8)} 50% {box-shadow:0 0 0 .55rem rgba(240,112,60,.12),0 0 26px rgba(240,112,60,.55)} } .zonemapfoot{ margin-top:.9rem; display:flex;align-items:center;justify-content:space-between; gap:.75rem;flex-wrap:wrap; font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ash-dim); } .zonemaplink{ display:inline-flex;align-items:center;min-height:2.75rem; color:var(--ember);font-weight:600; border-bottom:1px solid rgba(217,84,43,.35); transition:color .4s var(--ease),border-color .4s var(--ease); } .zonemaplink:hover{color:var(--ember-hot);border-color:var(--ember-hot)} .zonestier{margin-bottom:1.75rem} .zonestier-head{ display:flex;align-items:center;gap:.5rem; font-size:.8125rem;font-weight:600;letter-spacing:.02em; color:var(--cream);margin-bottom:.75rem; } .zonestier-head em{font-style:normal;font-weight:400;color:var(--ash-dim)} .zonesbullet{ width:.55rem;height:.55rem;border-radius:999px;flex:none; background:var(--ash-dim); } .zonestier.is-core .zonesbullet{background:var(--ember-hot)} .zonestier.is-near .zonesbullet{background:var(--ember)} .zoneschips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .zoneschips li{ border:1px solid var(--hair-strong);border-radius:999px; padding:.35rem .8rem;font-size:.8125rem;color:var(--ash); background:rgba(237,224,204,.03); } .zonesnote{ border-top:1px solid var(--hair);padding-top:1.25rem; font-size:.8125rem;color:var(--ash-dim);max-width:46ch; } / ── Pedidos en cantidad ────────────────────────────────── / .section--bulk{padding-top:0} .bulk .core{ background:var(--carbon-3); padding:clamp(2rem,4vw,3rem); display:flex;align-items:center;justify-content:space-between; gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap; } .bulkcopy{max-width:46ch} .bulktitle{ font-family:'Clash Display',ui-sans-serif,sans-serif;font-weight:700; line-height:.98;letter-spacing:-.02em; font-size:clamp(1.75rem,3.4vw,2.5rem); margin:.75rem 0 1rem; } .bulklede{color:var(--ash);font-size:.9375rem} .bulkactions{display:flex;gap:.75rem;flex-wrap:wrap} / ── Footer ─────────────────────────────────────────────── / .footer{ border-top:1px solid var(--hair); padding:clamp(3.5rem,7vw,5.5rem) var(--gutter) 2.5rem; background:var(--carbon-2); } .footerinner{ display:flex;justify-content:space-between;align-items:center; gap:2rem;flex-wrap:wrap; padding-bottom:2.5rem;border-bottom:1px solid var(--hair); } .footerlogo{ width:auto;height:6.5rem; / Sin mix-blend-mode: este PNG ya viene con alpha real, así que no hace falta el truco de `screen` que necesitaba el recorte del menú (traía el negro incrustado). Con `screen` encima el naranja de la marca se lavaba. / } .footermeta{text-align:right;color:var(--ash);font-size:.9375rem} .footermeta a{ display:inline-flex;align-items:center;min-height:2.75rem; color:var(--ember);font-weight:600; } .footermeta a:hover{color:var(--ember-hot)} .footermeta p + p{margin-top:.15rem} .social{ list-style:none;margin:1.1rem 0 0;padding:0; display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap; } .social a{ display:grid;place-items:center; width:2.75rem;height:2.75rem; border:1px solid var(--hair-strong);border-radius:999px; color:var(--ash); transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease); } .social a:hover{color:var(--cream);border-color:var(--ember);background:rgba(217,84,43,.12)} .social svg{width:1.15rem;height:1.15rem} / El nombre del canal queda para lectores de pantalla: en pantalla mandan los íconos / .sociallabel{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap; } .footerlegal{ margin-top:2rem;font-size:.75rem;color:var(--ash-dim); letter-spacing:.04em;text-align:center; } / ── Panel de marca: producto en pincelada + logo ───────── / .stagebrand{ display:none; position:relative; width:min(100%,30rem); height:clamp(15rem,31svh,21rem); place-items:center; isolation:isolate; } .stagesandwich{ position:absolute;inset:auto 0 0; z-index:1; width:100%;height:74%;max-width:none; object-fit:cover;object-position:center 63%; filter:drop-shadow(0 14px 22px rgba(0,0,0,.52)); -webkit-mask:url("assets/img/brush-mask.svg") center/100% 100% no-repeat; mask:url("assets/img/brush-mask.svg") center/100% 100% no-repeat; } .stagehero-logo{ position:relative;z-index:2; width:min(62%,18rem);height:auto; filter:drop-shadow(0 12px 22px rgba(0,0,0,.55)); } .stagedesktop-virgin{display:none} @keyframes breathe{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.02)} } / ── Botón de agregar al pedido ──────────────────────────── / .add{ display:inline-flex;align-items:center;gap:.6rem; margin-top:1.15rem;align-self:flex-start; background:transparent;color:var(--cream); border:1px solid var(--hair-strong);border-radius:999px; padding:.55rem .55rem .55rem 1.25rem; font:inherit;font-size:.875rem;font-weight:600; cursor:pointer;min-height:2.75rem; transition:background-color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),color .45s var(--ease); } .add:hover{background:var(--ember);border-color:var(--ember);color:#fff} .add:active{transform:scale(.97)} .addpip{ width:1.6rem;height:1.6rem;flex:none;border-radius:999px; background:rgba(237,224,204,.12); display:grid;place-items:center; transition:transform .45s var(--ease),background-color .45s var(--ease); } .addpip svg{width:.8rem;height:.8rem} .add:hover .addpip{background:rgba(255,255,255,.25);transform:rotate(90deg)} .add.is-added{background:var(--ember);border-color:var(--ember);color:#fff} / Mismo caso que .btn--plain: sin .addpip el padding tiene que ser parejo. / .add--plain{padding-inline:1.25rem;justify-content:center;text-align:center} .add--mini{ margin-top:.5rem;padding:.55rem 1rem;font-size:.75rem; min-height:2.75rem; } / ── Botón flotante del carrito ──────────────────────────── / .cart-fab{ position:fixed;z-index:64; right:clamp(1rem,3vw,2rem); bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom)); display:inline-flex;align-items:center;gap:.65rem; background:var(--ember);color:#fff; border:none;border-radius:999px; padding:.85rem 1.35rem; font:inherit;font-weight:600; cursor:pointer; box-shadow:0 18px 50px -14px rgba(217,84,43,.85); animation:fab-in .6s var(--ease-soft) both; transition:transform .45s var(--ease),background-color .45s var(--ease); } .cart-fab[hidden]{display:none} .cart-fab:hover{background:var(--ember-hot);transform:translateY(-2px)} .cart-fab:active{transform:scale(.97)} .cart-fab svg{width:1.15rem;height:1.15rem} .cart-fabcount{ min-width:1.5rem;height:1.5rem;padding:0 .35rem; border-radius:999px;background:rgba(0,0,0,.28); display:grid;place-items:center; font-size:.8125rem;font-variant-numeric:tabular-nums; } .cart-fab.is-bump{animation:bump .45s var(--ease-soft)} @keyframes fab-in{from{opacity:0;transform:translateY(1.5rem) scale(.9)}to{opacity:1;transform:none}} @keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.12)}} / ── Panel del carrito ───────────────────────────────────── / .cart{ position:fixed;inset:0;z-index:75; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); display:flex;justify-content:flex-end; opacity:0;transition:opacity .45s var(--ease); } .cart[hidden]{display:none} .cart.is-open{opacity:1} .cartpanel{ width:min(26rem,100%); background:var(--carbon-2); border-left:1px solid var(--hair); display:flex;flex-direction:column; padding:calc(1.75rem + env(safe-area-inset-top)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); transform:translateX(100%); transition:transform .55s var(--ease); overscroll-behavior:contain; } .cart.is-open .cartpanel{transform:none} .carthead{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem} .carttitle{font-size:1.75rem} .cartclose{ width:2.75rem;height:2.75rem;flex:none; background:none;border:1px solid var(--hair-strong);border-radius:999px; color:var(--cream);cursor:pointer;display:grid;place-items:center; transition:background-color .4s var(--ease)} .cartclose:hover{background:rgba(237,224,204,.08)} .cartclose svg{width:1rem;height:1rem} .cartlist{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;display:grid;gap:.75rem;align-content:start} .cartitem{ display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem; padding:.9rem 1rem;border:1px solid var(--hair);border-radius:1rem; background:rgba(237,224,204,.03); animation:item-in .4s var(--ease-soft) both; } @keyframes item-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}} .cartinfo{grid-column:1;display:flex;flex-direction:column;gap:.2rem;min-width:0} .cartname{font-weight:600;font-size:.9375rem;min-width:0;overflow-wrap:anywhere} .cartcut{font-size:.75rem;color:var(--ash-dim)} / Los ingredientes, para repasar el producto antes de mandar el pedido / .cartdesc{font-size:.75rem;line-height:1.45;color:var(--ash);margin-top:.15rem} .cartline{grid-column:2;grid-row:1;display:flex;align-items:center;gap:.5rem} .cartqty{ width:2.75rem;height:2.75rem;flex:none; background:none;border:1px solid var(--hair-strong);border-radius:999px; color:var(--cream);font:inherit;font-size:1rem;line-height:1;cursor:pointer; display:grid;place-items:center; transition:background-color .35s var(--ease),border-color .35s var(--ease)} .cartqty:hover{background:var(--ember);border-color:var(--ember);color:#fff} .cartn{min-width:1.25rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:600} .cartsub{ grid-column:1/-1;text-align:right; font-family:'Clash Display',sans-serif;font-weight:700; font-variant-numeric:tabular-nums; } / Observación por producto / .cartmod{grid-column:1/-1;display:grid;gap:.5rem;margin-top:.15rem} .cartmod-toggle{ justify-self:start; display:inline-flex;align-items:center;gap:.4rem; min-height:2.25rem;padding:.35rem 0; background:none;border:0; color:var(--ember);font:inherit;font-size:.75rem;font-weight:600; cursor:pointer;text-align:left; border-bottom:1px solid rgba(217,84,43,.35); transition:color .35s var(--ease),border-color .35s var(--ease); } .cartmod-toggle:hover{color:var(--ember-hot);border-color:var(--ember-hot)} .cartmod-field{ width:100%;resize:vertical; padding:.6rem .7rem; background:rgba(14,11,10,.55); border:1px solid var(--hair-strong);border-radius:.65rem; color:var(--cream);font:inherit;font-size:.8125rem;line-height:1.45; transition:border-color .35s var(--ease); } .cartmod-field::placeholder{color:var(--ash-dim)} .cartmod-field:focus{border-color:var(--ember);outline-offset:2px} .cartmod-field[hidden]{display:none} .cartempty{color:var(--ash-dim);text-align:center;padding:3rem 0;flex:1} .cartempty[hidden]{display:none} .cartfoot{border-top:1px solid var(--hair);padding-top:1.25rem;margin-top:1.25rem} .carttotal{ display:flex;justify-content:space-between;align-items:baseline; margin-bottom:1rem; } .carttotal span{color:var(--ash);font-size:.875rem;letter-spacing:.04em;text-transform:uppercase} .carttotal b{font-family:'Clash Display',sans-serif;font-size:1.85rem;font-variant-numeric:tabular-nums} .cartsend{width:100%;justify-content:space-between} .cartsend[aria-disabled="true"]{opacity:.45;pointer-events:none} .cartnote{margin-top:.75rem;font-size:.75rem;color:var(--ash-dim);text-align:center} .cartdisclaimer{ margin-top:.6rem;font-size:.6875rem;line-height:1.45; color:var(--ash-dim);opacity:.85;text-align:center; } / ── Detalle de producto en móvil ───────────────────────── / .card-modal{ position:fixed;inset:0;z-index:76; display:grid;place-items:center;padding:1rem; background:rgba(0,0,0,.68); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .card-modal[hidden]{display:none} .card-modalpanel{ position:relative;width:min(100%,28rem);max-height:calc(100svh - 2rem); overflow:auto;background:var(--carbon-2);border:1px solid var(--hair-strong); border-radius:var(--r-out);padding:var(--shell-pad); box-shadow:0 24px 70px -24px rgba(0,0,0,.95); } .card-modalcontent > .core{overflow:hidden;border-radius:var(--r-in);background:var(--carbon-2)} .card-modalcontent .cardmedia{margin:0} .card-modalcontent .cardmedia video,.card-modalcontent .cardmedia img{aspect-ratio:16/10} .card-modalcontent .cardbody{padding:1.25rem} .card-modalclose{ position:absolute;z-index:2;top:1rem;right:1rem; width:2.75rem;height:2.75rem;border:1px solid var(--hair-strong);border-radius:999px; background:rgba(14,11,10,.75);color:var(--cream);display:grid;place-items:center;cursor:pointer; } .card-modalclose svg{width:1rem;height:1rem} / ── Reveal on scroll ───────────────────────────────────── / .reveal{ opacity:0;transform:translateY(2.5rem);filter:blur(6px); transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft),filter .9s var(--ease-soft); } .reveal.is-in{opacity:1;transform:none;filter:none} .reveal[data-delay="1"]{transition-delay:.12s} .reveal[data-delay="2"]{transition-delay:.24s} / Escalonado automático de las cards del menú / .bento .reveal:nth-child(1){transition-delay:.05s} .bento .reveal:nth-child(2){transition-delay:.13s} .bento .reveal:nth-child(3){transition-delay:.21s} .bento .reveal:nth-child(4){transition-delay:.29s} .bento .reveal:nth-child(5){transition-delay:.37s} / Las cards se elevan y se les enciende el borde al pasar por encima / .card{transition:transform .6s var(--ease-soft),border-color .6s var(--ease-soft)} .card:hover{transform:translateY(-6px);border-color:rgba(217,84,43,.45)} / El título del hero entra por líneas / .herotitle{ animation:title-in 1.1s var(--ease-soft) both; } @keyframes title-in{ from{opacity:0;transform:translateY(1.5rem);filter:blur(8px)} to{opacity:1;transform:none;filter:none} } / Latido lento del resplandor del hero / .heroglow{animation:glow 11s ease-in-out infinite} @keyframes glow{ 0%,100%{opacity:.85;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} } / Subrayado que crece bajo los enlaces de la nav / .navlinks a{position:relative} .navlinks a::after{ content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:1px; background:var(--ember);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease); } .navlinks a:hover::after{transform:scaleX(1)} / Las papitas y El Texano no tienen vídeo: se les da un zoom lento propio / .card--side .cardmedia img{animation:drift 18s ease-in-out infinite} @keyframes drift{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} } / ═══════════════ RESPONSIVE ═══════════════ / @media (max-width:1024px){ .navlinks{gap:1.25rem} .bento{grid-template-columns:repeat(4,1fr)} .zones{grid-template-columns:1fr} .zonesmap{max-width:34rem;margin-inline:auto;width:100%} .card,.card--wide{grid-column:span 2} .card--side{grid-column:span 4} .steps{grid-template-columns:1fr} } @media (max-width:768px){ :root{--r-out:1.25rem;--shell-pad:.35rem} / El clip 9:16 queda diminuto en móvil: se cambia por el panel de marca / .stagevideo{display:none} .stagebrand{display:grid} .navlinks{display:none} .nav .btn--sm{display:none} .burger{display:block} / Navegación desnuda: la marca a la izquierda y la hamburguesa pegada al borde derecho, que es donde la busca el pulgar. / .nav-shell{justify-content:flex-start;padding-left:1.25rem;padding-right:1.25rem} .nav{ width:100%; gap:.85rem;padding:0;background:none;border:0;border-radius:0; -webkit-backdrop-filter:none;backdrop-filter:none; } .is-scrolled .nav{background:none;box-shadow:none} .burger{border:0;border-radius:0;margin-left:auto} / En móvil el hero deja de ser dos bloques apilados —la imagen enmarcada arriba y el copy debajo, que se leía como un reel— y pasa a ser una sola composición: la foto es el fondo de la sección a sangre y encima, en flujo normal, la Virgen y el texto como un único bloque centrado. Que estén EN FLUJO es lo importante: antes la Virgen era una capa absoluta y el copy se anclaba abajo, así que todo el espacio sobrante caía entre los dos — 67px en un iPhone 12 y 180px en un Pro Max. Ahora los separa un `gap` y nada más, idéntico en todas las pantallas. / .hero{ grid-template-columns:1fr; padding:7rem 1.25rem 2.5rem; min-height:100svh; gap:.5rem; / ← la distancia Virgen ↔ titular / align-content:center; align-items:start; isolation:isolate; / El vertical de 800x1200 alcanza en móvil: a 390px de ancho ya es 2x. / background:url("assets/img/fondo-vertical.jpg") center/cover no-repeat; } .heroglow{display:none} / Velo general: arriba se deja ver la foto (que es lo que gusta) y de la mitad para abajo se cierra. / .hero::before{ content:""; position:absolute;inset:0;z-index:0; background:linear-gradient(to bottom, rgba(14,11,10,.15) 0%, rgba(14,11,10,.10) 26%, rgba(14,11,10,.62) 54%, rgba(14,11,10,.90) 78%, rgba(14,11,10,.96) 100%); } .hero > {position:relative;z-index:1} /* El stage deja de ser tarjeta: es sólo el soporte de la Virgen. / .herostage{order:-1;margin:0} .hero .shell--hero{ width:100%;max-width:none;margin:0; background:none;border:0;border-radius:0;padding:0; } .herostage .core{ height:auto;max-width:none;aspect-ratio:auto;overflow:visible; border-radius:0;box-shadow:none;background:none; } .stagebrand{ position:relative; background:none; place-items:center; padding:0; } .stagebrand{height:clamp(15rem,31svh,20rem)} .stagehero-logo{width:min(64%,17rem);transform:translateY(-5rem)} / Velo propio del texto, que viaja CON él. El degradado de arriba es fijo, pero el bloque de texto se mueve según el alto de pantalla; sin esto, en algunas alturas el titular caía sobre la parte clara de la foto o sobre la Virgen y se leía mal. / / A una columna el texto ocupa todo el ancho, así que el velo diagonal de escritorio deja de servir: se pasa a uno vertical y parejo. / #delivery::before{ background:linear-gradient(to bottom, rgba(14,11,10,.72) 0%, rgba(14,11,10,.86) 48%, rgba(14,11,10,.94) 100%); } / A una columna no hay hueco a la derecha: la Virgen se centra detrás del texto, más tenue para no pelearle la lectura. / #delivery::after{ right:auto;left:50%;top:42%; transform:translate(-50%,-50%); width:min(58%,280px); opacity:.09; } .delivery{max-width:none} .herocopy::before{ content:""; position:absolute; inset:-1.5rem -1.5rem -2.5rem; z-index:-1; background:radial-gradient(115% 95% at 45% 55%, rgba(14,11,10,.94) 45%, rgba(14,11,10,.55) 75%, rgba(14,11,10,0) 100%); } .herocopy{position:relative;z-index:1} / A 52px "Sabor auténtico." partía en dos líneas y el titular se comía tres renglones de la pantalla. A 11vw entra en dos y le devuelve aire a la foto. / .herotitle{ font-size:clamp(2.5rem,11vw,3.5rem); margin-bottom:1.125rem; } .herolede{margin-bottom:1.75rem} / El pill de ubicación es lo único que separa la Virgen del titular: con el margen de escritorio (1.75rem) el bloque quedaba flotando lejos de ella. / .hero .eyebrow{margin-bottom:.5rem} .section{padding:4.5rem 1rem} / Dos columnas también en móvil: con cuatro productos, una sola columna obligaba a un scroll larguísimo para verlos todos. / .bento{grid-template-columns:repeat(2,1fr);gap:.6rem} .card,.card--wide{grid-column:span 1} .card--side{grid-column:span 2} .card--side .core{flex-direction:column} .card--side .cardmedia{flex:none} .card--side .cardmedia img{aspect-ratio:16/10} / Tipografía y espaciado comprimidos para que quepan dos por fila / .cardbody{padding:.85rem .85rem 1rem} .cardname{font-size:1.0625rem} .carddesc{font-size:.75rem;margin-bottom:.6rem;line-height:1.45} .price{font-size:1.15rem} .pricecut{font-size:.625rem} .cardprice{gap:.3rem} .cardexpand{ display:inline-flex;align-items:center;justify-content:center; width:100%;min-height:2.5rem;margin:.15rem 0 .7rem; padding:.45rem .75rem;background:rgba(237,224,204,.05); border:1px solid var(--hair-strong);border-radius:.75rem; color:var(--ash);font:inherit;font-size:.75rem;font-weight:600;cursor:pointer; } .cardexpand-close{display:none} .add{ width:100%;justify-content:center; margin-top:.75rem;padding:.5rem .75rem;font-size:.8125rem; } .addpip{display:none} .cardflag{top:.5rem;right:.5rem;font-size:.5625rem;padding:.18rem .5rem} / Papitas ocupa la fila entera, así que puede respirar / .card--side .cardbody{padding:1.25rem} .card--side .cardname{font-size:1.5rem} .card--side .carddesc{font-size:.875rem} .sizes{gap:1.5rem} .delivery{grid-template-columns:1fr} .facts div{grid-template-columns:1fr;gap:.35rem} .promo .core{padding:1.5rem 1.35rem 1.35rem} .promoflag{position:static;justify-self:start;margin-top:.35rem} .promohead{gap:.25rem} .zones{gap:2rem} .zonesmap .core{padding:.85rem .85rem .75rem} .zonestier{margin-bottom:1.35rem} .bulk .core{flex-direction:column;align-items:flex-start;padding:1.75rem 1.35rem 2rem} .bulkactions{width:100%} .bulkactions .btn{flex:1 1 12rem;justify-content:center} .social{justify-content:center} .footer{padding:3.5rem 1rem calc(2rem + env(safe-area-inset-bottom))} .footerinner{flex-direction:column;text-align:center} .footermeta{text-align:center} } / ═══════════════════════════════════════════════════════════ Hero de escritorio — misma composición que en móvil Una sola columna centrada sobre el muro a sangre, en vez de las dos columnas con el clip vertical. Bloque autocontenido: borrándolo vuelve el hero con el vídeo, sin tocar nada más. ═══════════════════════════════════════════════════════════ / @media (min-width:769px){ .hero{ grid-template-columns:1fr; justify-items:center; text-align:center; align-content:center; gap:1.25rem; min-height:100svh; padding:8rem var(--gutter) 4rem; isolation:isolate; / HD: reexportado del original de 5350x8025, recortado a la franja superior —lo único que se ve con `top`/`cover` en apaisado— así no se cargan píxeles invisibles. El JPG de 800px que usa el móvil acá se ampliaba 2.4x y se veía blando. / background:url("assets/img/fondo-hero-1600.webp") center top/cover no-repeat; } / Pantallas grandes o retina: la versión de 2400. / @media (min-width:1281px),(min-resolution:1.5dppx){ .hero{background-image:url("assets/img/fondo-hero-2400.webp")} } .heroglow{display:none} .hero::before{ content:""; position:absolute;inset:0;z-index:0; background:linear-gradient(to bottom, rgba(14,11,10,.18) 0%, rgba(14,11,10,.10) 28%, rgba(14,11,10,.34) 46%, rgba(14,11,10,.62) 62%, rgba(14,11,10,.82) 80%, rgba(14,11,10,.90) 100%); } .hero > {position:relative;z-index:1} /* Sale el clip vertical y entra la Virgen, igual que en móvil. / .herostage{order:-1;margin:0;width:auto} .hero .stagevideo{display:none} .hero .shell--hero{ width:auto;max-width:none;margin:0; background:none;border:0;border-radius:0;padding:0; } .herostage .core{ height:auto;max-width:none;aspect-ratio:auto;overflow:visible; border-radius:0;box-shadow:none;background:none; } .hero .stagebrand{ display:grid; position:static;width:auto;height:auto; background:none; place-items:center; padding:0; } / Escritorio conserva la composición original con la Virgen. / .hero .stagesandwich,.hero .stagehero-logo{display:none} .hero .stagedesktop-virgin{ display:block;width:auto;height:auto; max-height:26svh;max-width:18vw; filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); animation:breathe 7s var(--ease-soft) infinite; } / Centrado: a ancho completo, el texto a la izquierda con la Virgen centrada encima quedaba descolgado. / / Apilado, el titular de 7.5rem se comía la pantalla: en dos columnas convivía con el vídeo al lado, pero acá compite en vertical con la Virgen y el CTA. / .herotitle{font-size:clamp(3rem,5vw,5rem)} .herocopy{max-width:min(68ch,860px);margin-inline:auto} .herolede{max-width:52ch;margin-inline:auto} .heroactions{justify-content:center} / Sin velo propio detrás del copy: sobre el fondo en HD se leía como un recuadro negro. La legibilidad la resuelve el degradado de la sección, que al ocupar todo el ancho no dibuja una caja. / .herocopy::before{content:none} } / ══════════ fin del hero de escritorio ══════════ / @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} ,::before,::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .reveal{opacity:1;transform:none;filter:none} .overlaylinks a{opacity:1;transform:none} .stagebrand img,.heroglow,.card--side .cardmedia img,.zonemap__origin{animation:none} .card:hover{transform:none} }