/* ============================================================ La Michoacana de San Juan · Sistema de marca (compartido) FUENTE ÚNICA DE VERDAD para colores y tipografías de TODO el sitio. Alineado al manual de marca oficial (§5 colores, §6 tipografías). NO introducir colores ni fuentes fuera de este archivo. ============================================================ */ :root{ /* === Paleta OFICIAL · manual §5 (únicos colores permitidos) === */ --teal:#00A8B5; /* Turquesa principal — helado (acción principal) */ --teal-deep:#007884; /* Turquesa oscuro — sombras / texto-acento sobre claro */ --pink:#E89BAC; /* Rosa principal — splash y detalles */ --pink-soft:#F8DCE2; /* Rosa claro — fondos suaves */ --pink-pale:#FCEFF3; /* Tinte más claro del rosa */ --beige:#C9A77F; /* Beige — cono de waffle */ --beige-light:#E8C9A6; /* Beige claro — luces del cono */ --warm:#E8C9A6; /* acento cálido sobre fondos oscuros */ --wine:#5A2A2F; /* Vino oscuro — texto, líneas y fondos oscuros */ --ink:#5A2A2F; /* texto principal = vino */ --black:#1A1A1A; /* Negro contorno */ --cream:#FFF8F1; /* off-white cálido (fondo neutro, derivado de beige claro) */ --muted:#8C6E72; /* texto secundario — vino desaturado */ --white:#ffffff; --shadow:0 14px 40px -18px rgba(90,42,47,.30); --shadow-sm:0 8px 24px -14px rgba(90,42,47,.35); --radius:22px; --maxw:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,sans-serif; color:var(--wine); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; /* parte palabras/emails largos en pantallas chicas */ } h1,h2,h3,h4,.display{font-family:'Poppins',sans-serif;font-weight:600;line-height:1.1;color:var(--wine)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .en{display:block;font-weight:400;color:var(--muted);font-family:'Inter',sans-serif} /* ===== i18n: mostrar un solo idioma según navegador/elección ===== */ /* Por defecto (sin JS) se ven ambos. El recibe lang-es o lang-en. */ html.lang-es .t-en{display:none} html.lang-en .t-es{display:none} /* Selector de idioma ES | EN (en la topbar) */ .langsw{display:inline-flex;align-items:center;gap:3px} .langsw button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;font-family:'Poppins',sans-serif; font-size:.72rem;font-weight:600;padding:.18em .5em;border-radius:6px;cursor:pointer;line-height:1;opacity:.65;transition:all .15s} .langsw button:hover{opacity:1} .langsw button.active{background:#fff;color:var(--wine);opacity:1;border-color:#fff} /* Botones */ .btn{ display:inline-flex;align-items:center;gap:.5em; font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem; padding:.85em 1.6em;border-radius:50px;border:none;cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; } /* Turquesa = color principal/acción (helado). Rosa = splash/acento. Manual §5 */ .btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 10px 22px -8px rgba(0,120,132,.6)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 26px -8px rgba(0,120,132,.75)} .btn-teal{background:var(--wine);color:#fff;box-shadow:0 10px 22px -8px rgba(90,42,47,.55)} .btn-teal:hover{transform:translateY(-3px)} .btn-ghost{background:#fff;color:var(--wine);box-shadow:var(--shadow-sm)} .btn-ghost:hover{transform:translateY(-3px)} /* Top bar */ .topbar{background:var(--wine);color:#fff;font-size:.84rem} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 22px;flex-wrap:wrap} .topbar a{color:#fff;opacity:.92} .topbar a:hover{opacity:1;color:var(--warm)} .topbar .socials{display:flex;gap:14px;align-items:center} .topbar .socials svg{width:16px;height:16px;fill:currentColor} /* Header */ header.site{position:sticky;top:0;z-index:50;background:rgba(255,248,241,.92);backdrop-filter:blur(10px);box-shadow:0 2px 14px -8px rgba(90,42,47,.3)} header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 22px} .brand{display:flex;align-items:center;gap:12px} .brand img{height:56px;width:auto} .brand b{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;color:var(--wine);line-height:1.05} .brand b span{display:block;font-size:.7rem;color:var(--teal-deep);letter-spacing:.12em;text-transform:uppercase} nav.main{display:flex;align-items:center;gap:26px} nav.main a{font-weight:500;font-size:.98rem;position:relative;padding:4px 0} nav.main a:hover{color:var(--teal-deep)} nav.main a.active{color:var(--teal-deep)} nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--pink);transition:width .2s} nav.main a:hover::after,nav.main a.active::after{width:100%} .nav-actions{display:flex;align-items:center;gap:12px} .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px} .menu-toggle svg{width:30px;height:30px;stroke:var(--wine)} /* Hero (home) */ .hero{position:relative;overflow:hidden;background: radial-gradient(1100px 500px at 85% -10%, var(--pink-soft), transparent 60%), radial-gradient(900px 500px at 0% 110%, #d8f4f8, transparent 60%), var(--cream)} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:70px 22px 90px} .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--teal-deep);font-weight:600;font-family:'Poppins',sans-serif; padding:.4em 1em;border-radius:50px;box-shadow:var(--shadow-sm);font-size:.85rem;margin-bottom:18px} .hero h1{font-size:clamp(2.4rem,5vw,3.7rem);font-weight:700} .hero h1 .accent{color:var(--teal-deep)} .hero p.sub{margin:18px 0 28px;font-size:1.12rem;color:var(--muted);max-width:34ch} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap} .hero-media{position:relative} .hero-media .photo{border-radius:30px;box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%; border:8px solid #fff;transform:rotate(2deg)} .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;z-index:-1} .badge-float{position:absolute;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif} .badge-float .dot{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem} .badge-float small{display:block;color:var(--muted);font-family:'Inter';font-weight:400;font-size:.72rem} .badge-1{bottom:24px;left:-26px} .badge-2{top:30px;right:-18px} .wave{display:block;width:100%;height:60px} /* Page banner (páginas internas) */ .page-hero{position:relative;overflow:hidden;text-align:center;padding:64px 22px 70px;background: radial-gradient(900px 420px at 80% -20%, var(--pink-soft), transparent 60%), radial-gradient(800px 420px at 0% 120%, #d8f4f8, transparent 60%), var(--cream)} .page-hero .crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px} .page-hero .crumb a:hover{color:var(--teal-deep)} .page-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:700} .page-hero p{margin:14px auto 0;max-width:52ch;color:var(--muted);font-size:1.08rem} .page-hero .slogan{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;background:#fff;color:var(--teal-deep); font-family:'Poppins',sans-serif;font-weight:600;padding:.4em 1em;border-radius:50px;box-shadow:var(--shadow-sm);font-size:.85rem} /* Section heading */ .sec{padding:78px 0} .sec-sm{padding:54px 0} .sec-head{text-align:center;max-width:640px;margin:0 auto 46px} .sec-head .kicker{color:var(--teal-deep);font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.9rem} .sec-head h2{font-size:clamp(2rem,3.6vw,2.7rem);margin:.2em 0 .35em} .sec-head p{color:var(--muted)} /* Category grid */ .cats{background:#fff} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .cat-card{background:var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;display:flex;flex-direction:column} .cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .cat-card .ph{aspect-ratio:4/3;overflow:hidden} .cat-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .cat-card:hover .ph img{transform:scale(1.07)} .cat-card .ph-emoji{width:100%;height:100%;display:grid;place-items:center;font-size:3.4rem; background:linear-gradient(135deg,var(--c1,var(--pink-soft)),var(--c2,var(--pink)));transition:transform .5s ease} .cat-card:hover .ph-emoji{transform:scale(1.07)} .cat-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1} .cat-card h3{font-size:1.3rem} .cat-card .en{font-size:.9rem} .cat-card .price{margin-top:auto;color:var(--teal-deep);font-family:'Poppins';font-weight:600} /* Featured strip */ .featured{background:linear-gradient(180deg,var(--pink-pale),#fff)} .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .feat-row.rev .feat-text{order:2} .feat-row img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:5/4;object-fit:cover;width:100%} .feat-text h3{font-size:2rem;margin-bottom:10px} .feat-text p{color:var(--muted);margin-bottom:18px} .feat-row+.feat-row{margin-top:56px} /* Why us */ .why{background:var(--wine);color:#fff} .why h2{color:#fff} .why .sec-head p{color:#E7D2D4} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .why-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:30px 24px;text-align:center} .why-card .ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:0 auto 16px;font-size:1.9rem;background:rgba(255,255,255,.1)} .why-card h4{color:#fff;font-size:1.2rem;margin-bottom:8px} .why-card p{color:#E7D2D4;font-size:.92rem} /* Delivery & Pickup */ .delivery{background:#fff} .delivery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .delivery-card{background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:30px 22px;text-align:center; border-top:4px solid var(--teal);transition:transform .2s ease, box-shadow .2s ease} .delivery-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .delivery-card.pickup{border-top-color:var(--pink)} .delivery-card .dc-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px; font-size:1.9rem;background:#fff;box-shadow:var(--shadow-sm)} .delivery-card h3{font-size:1.25rem} .delivery-card .en{display:block;margin-top:4px;color:var(--muted);font-size:.85rem} .delivery-card .dc-call{display:inline-block;margin-top:12px;color:var(--teal-deep);font-family:'Poppins',sans-serif;font-weight:600} .delivery-card .dc-call:hover{text-decoration:underline} .delivery-note{text-align:center;margin-top:30px;color:var(--muted);font-size:.95rem} .delivery-note strong{color:var(--wine)} /* Hours + location */ .visit{background:var(--cream)} .visit-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:stretch} .hours-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:38px 34px} .hours-card h3{font-size:1.7rem;margin-bottom:6px} .hours-card .open-pill{display:inline-flex;align-items:center;gap:8px;background:#e0f4f6;color:var(--teal-deep);font-weight:600; padding:.3em .9em;border-radius:50px;font-size:.85rem;margin:10px 0 22px;font-family:'Poppins'} .hours-card .open-pill .live{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(0,168,181,.6);animation:pulse 2s infinite} .hours-card .open-pill.closed{background:#f6e7e9;color:var(--wine)} .hours-card .open-pill.closed .live{background:#b88;animation:none;box-shadow:none} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,168,181,.6)}70%{box-shadow:0 0 0 8px rgba(0,168,181,0)}100%{box-shadow:0 0 0 0 rgba(0,168,181,0)}} .hours-list{list-style:none;border-top:1px solid #eee} .hours-list li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0eef2;font-size:.97rem} .hours-list li span:first-child{color:var(--muted)} .hours-list li b{color:var(--wine);font-family:'Poppins'} .addr{margin:22px 0 0;display:flex;flex-direction:column;gap:8px;font-size:.96rem} .addr a{color:var(--teal-deep);font-weight:600} .map-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);min-height:380px;background:#ddd} .map-card iframe{width:100%;height:100%;border:0;display:block;min-height:380px} /* ===== Menú (página) ===== */ .cat-nav{position:sticky;top:78px;z-index:40;background:rgba(255,248,241,.95);backdrop-filter:blur(8px); border-bottom:1px solid #f0e6df;padding:12px 0} .cat-nav .wrap{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none} .cat-nav .wrap::-webkit-scrollbar{display:none} .cat-nav a{flex:0 0 auto;font-family:'Poppins',sans-serif;font-weight:600;font-size:.86rem;color:var(--wine); background:#fff;border:1px solid #f0e0e3;padding:.45em 1em;border-radius:50px;transition:all .18s} .cat-nav a:hover{background:var(--teal);color:#fff;border-color:var(--teal)} .menu-cat{margin-bottom:48px;scroll-margin-top:150px} .menu-cat-head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--pink-soft);padding-bottom:10px;margin-bottom:22px;flex-wrap:wrap} .menu-cat-head h2{font-size:1.7rem} .menu-cat-head .count{color:var(--muted);font-size:.9rem} .menu-items{display:grid;grid-template-columns:1fr 1fr;gap:6px 48px} .menu-item{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dashed #ece1da} .menu-item .nm{font-weight:500} .menu-item .lead{flex:1;border-bottom:1px dotted #d9cabf;transform:translateY(-4px)} .menu-item .pr{font-family:'Poppins',sans-serif;font-weight:600;color:var(--teal-deep);white-space:nowrap} .menu-note{background:var(--pink-pale);border-radius:var(--radius);padding:20px 24px;color:var(--wine);font-size:.95rem;margin-top:6px} /* ===== Galería de productos (tarjetas con foto) ===== */ .menu-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px} .pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--pink-soft);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease} .pcard:hover{transform:translateY(-4px);box-shadow:0 16px 32px -14px rgba(90,42,47,.35)} .pcard .ph{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--pink-pale)} .pcard .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .pcard:hover .ph img{transform:scale(1.06)} .pcard .pbody{display:flex;flex-direction:column;gap:2px;padding:11px 13px 14px;flex:1} .pcard .pname{font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;line-height:1.16;color:var(--wine)} .pcard .psub{font-size:.78rem;color:var(--muted);line-height:1.2} /* Placeholder de marca (producto sin foto) */ .pcard.noimg .ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink-soft) 0%,var(--beige-light) 100%)} .pcard.noimg .ph .emoji{font-size:2.9rem;line-height:1;filter:drop-shadow(0 3px 5px rgba(90,42,47,.18))} /* Etiqueta "Nuevo" sobre la foto */ .pcard .pnew{position:absolute;top:9px;left:9px;z-index:2;background:var(--teal-deep);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.02em;border-radius:7px;padding:.18em .55em;box-shadow:0 4px 10px -3px rgba(0,120,132,.6)} /* ===== Nuestra historia (página) ===== */ .story-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .story-intro img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%} .story-intro p{color:var(--muted);margin-bottom:14px;font-size:1.05rem} .lead-quote{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--wine);line-height:1.4;max-width:24ch} .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .mv-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px 30px;border-top:5px solid var(--teal)} .mv-card.pink{border-top-color:var(--pink)} .mv-card .ic{font-size:1.9rem;margin-bottom:8px} .mv-card h3{font-size:1.4rem;margin-bottom:8px} .mv-card p{color:var(--muted)} .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .value-card{text-align:center;background:var(--cream);border-radius:var(--radius);padding:28px 20px} .value-card .ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px;font-size:1.7rem;background:var(--pink-soft)} .value-card h4{font-size:1.15rem;margin-bottom:6px} .value-card p{color:var(--muted);font-size:.9rem} .promise{background:linear-gradient(120deg,var(--pink),var(--pink-soft));text-align:center;color:var(--wine)} .promise h2{color:var(--wine)} .promise .slg{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.6rem,3.2vw,2.3rem);margin:.3em 0} .promise .slg .en{font-weight:400;font-size:1.05rem;color:rgba(90,42,47,.8)} /* ===== Contacto (página) ===== */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start} .contact-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:34px 32px;min-width:0} .contact-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:8px} .contact-list li{display:flex;gap:14px;align-items:flex-start} .contact-list .ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:var(--pink-soft)} .contact-list .lbl{font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .contact-list a{color:var(--teal-deep);font-weight:600;overflow-wrap:anywhere} .contact-list a:hover{text-decoration:underline} .contact-list>li{min-width:0} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field label{font-family:'Poppins',sans-serif;font-weight:600;font-size:.86rem} .field input,.field textarea{font-family:'Inter',sans-serif;font-size:1rem;color:var(--wine); border:1.5px solid #ecdfe2;border-radius:14px;padding:.7em .9em;background:var(--cream);transition:border-color .18s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--teal)} .field textarea{min-height:120px;resize:vertical} .form-note{font-size:.82rem;color:var(--muted);margin-top:6px} /* Social / IG */ .social-cta{background:linear-gradient(120deg,var(--pink),var(--pink-soft));color:var(--wine);text-align:center} .social-cta h2{color:var(--wine);font-size:clamp(1.8rem,3.4vw,2.6rem)} .social-cta p{color:rgba(90,42,47,.85);max-width:46ch;margin:12px auto 26px} .social-cta .btn-ghost{color:var(--teal-deep)} /* Footer */ footer.site{background:var(--wine);color:#E7D2D4;padding:60px 0 26px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px} footer .brand b{color:#fff} footer h5{color:#fff;font-family:'Poppins';font-size:1.05rem;margin-bottom:14px} footer ul{list-style:none;display:flex;flex-direction:column;gap:9px} footer a:hover{color:var(--warm)} footer .socials{display:flex;gap:14px;margin-top:14px} footer .socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center} footer .socials a:hover{background:var(--pink)} footer .socials svg{width:18px;height:18px;fill:#fff} .foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;text-align:center;font-size:.85rem;color:#C6A9AC} /* Responsive */ @media(max-width:980px){ .hero .wrap{grid-template-columns:1fr;gap:50px} .hero-media{max-width:430px;margin:0 auto} .cat-grid{grid-template-columns:repeat(2,1fr)} .why-grid{grid-template-columns:repeat(2,1fr)} .delivery-grid{grid-template-columns:repeat(2,1fr)} .visit-grid{grid-template-columns:1fr} .feat-row,.feat-row.rev .feat-text{grid-template-columns:1fr;order:0} .feat-row img{order:-1} .foot-grid{grid-template-columns:1fr 1fr} .story-intro{grid-template-columns:1fr;gap:30px} .contact-grid{grid-template-columns:1fr} .values-grid{grid-template-columns:repeat(2,1fr)} } /* Menú hamburguesa: desde 920px (el nav tiene 6 ítems y ya no cabe en tablets) */ @media(max-width:920px){ /* sin backdrop-filter en móvil: si no, el header sería el "containing block" del menú fixed y lo atraparía dentro de su caja (no cubriría la pantalla). */ header.site{background:var(--cream);backdrop-filter:none;-webkit-backdrop-filter:none} /* Panel queda dentro del viewport (right:0, sin translate) y se oculta con clip-path: así NO genera scroll horizontal y el header sticky sigue funcionando. */ nav.main{position:fixed;top:0;bottom:0;right:0;width:min(80vw,330px);background:var(--cream);flex-direction:column; align-items:flex-start;padding:90px 30px;gap:20px;box-shadow:var(--shadow);z-index:60;overflow-y:auto; visibility:hidden;clip-path:inset(0 0 0 100%);transition:clip-path .3s ease, visibility .3s ease} nav.main.open{visibility:visible;clip-path:inset(0 0 0 0)} nav.main a{font-size:1.1rem} nav.main a .en{display:inline;color:var(--muted);font-size:.85rem;margin-left:6px} .menu-toggle{display:block;z-index:70} .nav-actions .btn{padding:.7em 1.1em;font-size:.9rem} } @media(max-width:680px){ .cat-grid{grid-template-columns:1fr} .why-grid{grid-template-columns:1fr} .delivery-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .topbar .info{display:none} .hero .wrap{padding:48px 22px 70px} .badge-1{left:-8px}.badge-2{right:-6px} .menu-items{grid-template-columns:1fr;gap:0} .menu-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .mv-grid{grid-template-columns:1fr} .values-grid{grid-template-columns:1fr} .cat-nav{top:64px} } /* Teléfonos angostos: header compacto para que logo + CTA quepan */ @media(max-width:480px){ header.site .wrap{gap:10px;padding:10px 16px} .brand img{height:46px} .brand b{font-size:1rem} .brand b span{font-size:.62rem} .nav-actions{gap:8px} /* botón "Llámanos" se vuelve solo-ícono (el texto queda para lectores de pantalla) */ .nav-actions .btn{font-size:0;padding:.6em .8em} .nav-actions .btn::before{content:"📞";font-size:1.05rem} /* botones largos pueden envolver en pantallas muy angostas (no se salen) */ .btn{white-space:normal;text-align:center} }