/** Shopify CDN: Minification failed

Line 145:2 Unexpected "}"

**/
/* ============================================================
   FRUMMYS · base.css
   Estilos globales del tema: reset, tipografía, header,
   footer, menú móvil, botones y utilidades compartidas.
   Los tokens de color/medidas viven en theme.liquid (:root).
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:var(--paper);color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-size:16px;line-height:1.55;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;
  }
/* === ANUNCIO CABECERA — sistema de campaña (estático) === */
  .ann-bar{
    padding:11px 16px;text-align:center;
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  }
/* Plantillas de campaña — cambia la clase del .ann-bar para activar */
  .ann-bar.campaign-default    { background:#2C2A28; color:var(--cream); }
.ann-bar.campaign-default    .ann-icon { color:var(--brand-red); }
.ann-bar.campaign-blackfriday{ background:#000;            color:#C4E83C; }
.ann-bar.campaign-blackfriday .ann-icon { color:#C4E83C; }
.ann-bar.campaign-navidad    { background:var(--brand-red); color:var(--cream); }
.ann-bar.campaign-navidad    .ann-icon { color:#C4E83C; }
.ann-bar.campaign-sanvalentin{ background:#E91E63;          color:var(--cream); }
.ann-bar.campaign-sanvalentin .ann-icon { color:var(--cream); }
.ann-bar.campaign-summer     { background:#F06A2E;          color:#2C2A28; }
.ann-bar.campaign-summer     .ann-icon { color:#2C2A28; }
.ann-content{
    display:inline-flex;align-items:center;gap:14px;
    flex-wrap:wrap;justify-content:center;
  }
.ann-item{display:inline-flex;align-items:center;gap:8px}
.ann-icon{width:16px;height:16px;flex-shrink:0;display:inline-block}
.ann-sep{opacity:.4;font-weight:400}
/* Botón carrito mantenemos color tinta porque es elemento UI pequeño y aporta contraste */

  

    /* === HEADER === */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(255,254,250,.92);backdrop-filter:blur(20px);
    padding:14px 40px;border-bottom:1px solid var(--line);
  }
.nav{
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;max-width:1500px;margin:0 auto;gap:24px;
  }
.logo-link{display:inline-flex;align-items:center;text-decoration:none;line-height:0;justify-self:start}
.logo-img{height:44px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:18px;justify-self:center}
.menu-group{display:flex;align-items:center;gap:4px}
.menu-divider{width:1px;height:18px;background:rgba(26,15,31,.18)}
.menu a{
    color:var(--ink);text-decoration:none;
    font-weight:500;font-size:14px;
    padding:8px 14px;border-radius:999px;
    transition:background .18s,color .18s;
    display:inline-flex;align-items:center;gap:7px;
    line-height:1;
  }
.menu a:hover{background:rgba(26,15,31,.06)}
.menu a.cat::before{
    content:'';width:7px;height:7px;border-radius:50%;
    background:var(--cat,var(--brand-red));
    flex-shrink:0;
  }
.menu a.cat:hover{background:color-mix(in srgb, var(--cat) 12%, transparent)}
.menu a.cat.active{
    background:var(--cat);
    color:var(--cream);
    font-weight:700;
  }
.menu a.cat.active::before{background:var(--cream)}
.icons{display:flex;gap:10px;align-items:center;justify-self:end}
.icon-btn{
    width:42px;height:42px;border-radius:50%;
    background:transparent;
    border:1.5px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .18s,color .18s;
    color:var(--ink);
    padding:0;
    flex-shrink:0;
  }
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--ink);color:var(--cream)}
.cart-btn{
    background:var(--brand-red);color:var(--cream);
    border-color:var(--brand-red);
    width:auto;height:42px;border-radius:999px;
    padding:0 18px;
    gap:8px;
    font-family:'DM Sans';font-weight:700;font-size:13px;
    letter-spacing:.02em;
    text-decoration:none;
  }
.cart-btn:hover{background:#C13E2A;border-color:#C13E2A;color:var(--cream)}
.cart-btn .cart-icon{display:inline-flex;align-items:center}
.cart-btn .cart-icon svg{width:16px;height:16px}
.cart-btn .cart-text{display:inline-flex;align-items:center;gap:5px}
.cart-btn .cart-count{
    background:rgba(255,249,240,.22);
    padding:1px 7px;border-radius:999px;
    font-size:11px;font-weight:700;min-width:18px;text-align:center;
  }
@media (max-width:1100px){
    .menu{gap:12px}
    .menu a{padding:7px 11px;font-size:13px}
  }
@media (max-width:980px){
    header{padding:12px 18px}
    .nav{grid-template-columns:auto 1fr auto;gap:14px}
    .menu{display:none}
    .logo-img{height:36px}
    .icon-btn{width:38px;height:38px}
    .icon-btn svg{width:16px;height:16px}
    .cart-btn{padding:0 14px;height:38px}
    .cart-btn .cart-text{display:none}
  }
.btn-primary::after{content:'→';font-size:18px;margin-left:14px;display:inline-block;transition:transform .18s}
@keyframes float{
    0%,100%{transform:translateY(0) rotate(-3deg)}
    50%{transform:translateY(-18px) rotate(3deg)}
  }
/* === Floating tags orbitando alrededor === */

  /* === Posicionamiento de cada tag === */
  /* Esquinas y posiciones que orbitan las 3 bolsas */

  
  @media (max-width:680px){
    /* En móvil, ocultamos algunos para evitar congestión */
    .tag-conservantes,
  }
.cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.btn-primary{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--section-accent);color:var(--cream);
    padding:20px 56px;
    border-radius:999px;
    font-family:'DM Sans';font-weight:700;
    font-size:16px;letter-spacing:.04em;
    text-decoration:none;
    transition:background .18s,transform .18s;
  }
.btn-primary:hover{background:#C13E2A;transform:translateY(-1px)}
.btn-primary:hover::after{transform:translateX(4px)}
.btn-link{
    color:var(--ink);text-decoration:underline;text-underline-offset:4px;
    font-family:'DM Sans';font-weight:500;font-size:15px;
  }
.btn-link:hover{color:var(--section-accent)}
@keyframes float-bodegon{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
  }
@keyframes float-tag{
    0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
    50%{transform:translateY(-7px) rotate(var(--rot,0deg))}
  }
/* Posiciones de los 4 tags */
  .tag-azucar       { top:16%;   left:0%;   --rot:-2deg;   animation-delay:0s; }
.tag-colorantes   { top:14%;   right:-2%; --rot:1.5deg;  animation-delay:0.6s; }
.tag-conservantes { bottom:18%;left:-3%;  --rot:-1.5deg; animation-delay:1.2s; }
.tag-saborizantes { bottom:24%;right:0%;  --rot:1deg;    animation-delay:0.3s; }
@media (max-width:980px){
    .hero{
      grid-template-columns:1fr;
      grid-template-areas:
        "topbar"
        "visual"
        "text"
        "icons";
      padding:40px 24px 56px;
      gap:32px;
    }
    .hero-bodegon{max-width:540px}
    .hero-visual{min-height:360px;padding-top:30px}
    .hi-svg{width:60px;height:60px}
    .hi-label{font-size:14px}
  }
@media (max-width:680px){
    .hero{padding:32px 18px 48px;gap:32px}
    .hero-visual{min-height:300px;padding-top:20px}
    .hero-bodegon{max-width:440px}
    .orbit-tag{font-size:11px;padding:6px 11px 6px 9px}
    .hero-icons-row{grid-template-columns:repeat(5,1fr)}
    .hi{padding:4px 8px;gap:14px}
    .hi-svg{width:48px;height:48px}
    .hi-label{font-size:12px;letter-spacing:0}
  }
@media (max-width:680px){
    .hero-topbar .ht-pct{font-size:34px}
    .hero-topbar .ht-lbl{font-size:10px}
  }
@keyframes marquee-scroll{
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
  }
.sec-pill{
    display:inline-block;
    font-family:'DM Sans';
    font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;
    color:var(--cream);
    padding:6px 12px;border-radius:999px;
    margin-bottom:18px;
  }
.sec-snacks .sec-pill{background:var(--c-snacks)}
.sec-kids   .sec-pill{background:var(--c-kids)}
.sec-sport  .sec-pill{background:var(--c-sport)}
.sec-visual{
    width:100%;
    height:230px;
    margin:8px 0 18px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
.sec-visual-portrait{
    height:240px;
  }
.sec-img{
    max-width:92%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 8px 14px rgba(44,42,40,.08));
  }
/* Tamaños por mundo: bolsas más grandes, barrita más pequeña */
.sec-snacks .sec-img,
.sec-kids .sec-img{
    max-width:78%;
    max-height:108%;
    transform:scale(1.12);
  }
.sec-sport .sec-img{
    max-width:80%;
    max-height:78%;
  }
.sec-name{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:700;font-size:42px;line-height:1;
    color:var(--ink);margin:0 0 12px;
    letter-spacing:-.015em;
  }
.sec-tagline{
    font-family:'DM Sans';font-size:15px;line-height:1.5;
    color:var(--ink-soft);margin:0;
  }
.sec-meta-line{
    display:flex;align-items:center;gap:8px;
    font-family:'DM Sans';font-size:12px;color:var(--grey);
    text-transform:uppercase;letter-spacing:.08em;
  }
.sec-meta-line strong{
    color:var(--ink);font-weight:700;letter-spacing:.04em;
  }
.sec-arrow{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:22px;color:var(--ink);
    transition:transform .2s;
  }
@media (max-width:980px){
    .sections{padding:70px 24px 60px}
    .sections-h2{font-size:46px}
    .sections-grid{grid-template-columns:1fr;gap:14px}
    .sec-card{min-height:auto;padding:26px 22px 20px}
    .sec-name{font-size:34px}
  }
/* === ETIQUETA BLANCA (card izquierda) === */
  .label-card{
    background:#FFFFFF;
    border:1.5px solid var(--section-accent);
    border-radius:12px;
    padding:38px 36px 30px;
    position:relative;
    box-shadow:0 12px 32px rgba(231,72,71,.08);
  }
.label-tag{
    position:absolute;
    top:-13px;left:32px;
    background:var(--section-accent);
    color:var(--cream);
    font-family:'DM Sans';
    font-size:10.5px;font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:999px;
    white-space:nowrap;
  }
.label-product{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:26px;font-weight:700;
    color:var(--ink);
    margin:8px 0 4px;
    letter-spacing:-.01em;
  }
.label-batch{
    font-family:'DM Sans';
    font-size:11.5px;color:var(--grey);
    text-transform:uppercase;letter-spacing:.1em;
    margin-bottom:24px;
  }
.label-h{
    font-family:'DM Sans';
    font-size:11px;color:var(--ink);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin:24px 0 12px;
    padding-bottom:8px;
    border-bottom:1px solid var(--line);
  }
.ing-row{
    display:grid;
    grid-template-columns:36px 1fr auto;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px dashed var(--line);
    font-family:'DM Sans';
  }
.ing-row:last-of-type{border-bottom:none}
.ing-num{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:18px;
    color:var(--section-accent);
    font-weight:700;
  }
.ing-text{}
.ing-name{
    font-size:15px;
    color:var(--ink);
    font-weight:500;
    line-height:1.2;
  }
.ing-detail{
    display:block;
    font-size:12px;
    color:var(--grey);
    font-weight:400;
    margin-top:3px;
  }
.ing-pct{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:22px;
    font-weight:700;
    color:var(--ink);
  }
.label-foot{
    margin-top:22px;
    padding-top:20px;
    border-top:1.5px solid var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
  }
.label-total{
    font-family:'DM Sans';
    font-size:12px;
    color:var(--grey);
    text-transform:uppercase;
    letter-spacing:.1em;
  }
.label-total strong{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:20px;
    color:var(--ink);
    font-weight:700;
    margin-left:8px;
    letter-spacing:0;
  }
.label-stamp{
    width:64px;height:64px;
    border:2px solid var(--section-accent);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;
    color:var(--section-accent);
    font-family:'Bricolage Grotesque',sans-serif;
    transform:rotate(-8deg);
  }
.stamp-big{font-size:16px;font-weight:700;line-height:1}
.stamp-sm{font-size:8px;letter-spacing:.06em;margin-top:2px;font-weight:600}
/* === LISTA NEGRA (card derecha) === */
  .free-card{
    background:#FBF8F0;
    border:1.5px solid var(--ink);
    border-radius:12px;
    padding:36px 30px 28px;
    display:flex;
    flex-direction:column;
    position:relative;
    box-shadow:0 12px 32px rgba(44,42,40,.06);
  }
.free-tag{
    position:absolute;
    top:-13px;left:32px;
    background:var(--ink);
    color:var(--cream);
    font-family:'DM Sans';
    font-size:10.5px;font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:999px;
    white-space:nowrap;
  }
.free-h{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:26px;
    color:var(--ink);
    font-weight:700;
    line-height:1.1;
    margin:8px 0 22px;
    letter-spacing:-.01em;
  }
.free-h em{font-style:italic;color:var(--section-accent)}
.label-quote{
    margin:auto 0 0;
    padding:22px 0 0;
    border-top:1px solid var(--line);
    font-family:'Bricolage Grotesque',sans-serif;
    font-style:italic;
    font-size:15px;
    color:var(--ink);
    line-height:1.45;
    quotes:none;
  }
.label-quote-attr{
    display:block;
    font-style:normal;
    font-size:11px;
    color:var(--grey);
    margin-top:8px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-family:'DM Sans';
  }
@media (max-width:980px){
    .eb{padding:70px 24px 60px}
    .eb-title{font-size:46px}
    .eb-grid{grid-template-columns:1fr;gap:16px}
    .label-card{padding:32px 24px 24px}
    .label-product{font-size:22px}
    .free-card{padding:28px 22px 22px}
    .free-h{font-size:22px}
  }
/* Tabs */
  .pf-tabs{
    display:flex;gap:8px;flex-wrap:wrap;
    margin-bottom:36px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
  }
.pf-tab{
    background:transparent;
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-family:'DM Sans';font-size:13px;font-weight:600;
    padding:10px 18px;border-radius:999px;
    cursor:pointer;
    transition:all .18s;
    letter-spacing:.01em;
  }
.pf-tab:hover{border-color:var(--ink);color:var(--ink)}
.pf-tab.active{
    background:var(--section-accent);color:var(--cream);
    border-color:var(--section-accent);
  }
/* Pack 25 (hero) ocupa 2 columnas en grid amplio */
  @media (min-width:1100px){
    .pc-pack-hero{grid-column:span 2}
    .pc-pack-hero .pc-img{aspect-ratio:auto;min-height:280px}
  }
/* Responsive */
  @media (max-width:1100px){
    .products-grid{grid-template-columns:repeat(2,1fr)}
  }
@media (max-width:680px){
    .products{padding:60px 24px 70px}
    .products-h2{font-size:42px}
    .products-grid{grid-template-columns:1fr;gap:16px}
    .pc-name{font-size:22px}
  }
@media (max-width:980px){
    .manifiesto{padding:60px 24px 80px}
    .mani-grid{
      grid-template-columns:1fr;
      gap:36px;
      padding:48px 28px;
      text-align:center;
    }
    .mani-portrait{margin:0 auto}
    .mani-portrait img{width:180px;height:180px}
    .mani-content{margin:0 auto}
    .mani-quote{font-size:24px}
    .mani-attr{display:inline-block}
  }
/* === BUNDLE BANNER — Suscripción === */
  .bundle-banner{
    max-width:1500px;
    margin:0 auto;
    padding:40px 60px 60px;
  }
@media (max-width:980px){
    .bundle-banner{padding:30px 24px 50px}
    .bb-grid{
      grid-template-columns:1fr;
      gap:32px;
      padding:40px 28px;
    }
    .bb-title{font-size:34px}
    .bb-content{padding-right:0}
  }
.rv-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
.rv-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:30px 28px 26px;
    display:flex;
    flex-direction:column;
    transition:transform .25s, box-shadow .25s, border-color .25s;
  }
.rv-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(44,42,40,.08);
    border-color:var(--ink);
  }
.rv-stars{
    color:var(--section-accent);
    font-size:15px;
    letter-spacing:1.5px;
    margin-bottom:16px;
  }
.rv-text{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:16px;
    line-height:1.45;
    color:var(--ink);
    font-weight:500;
    margin:0 0 22px;
    flex:1;
    quotes:'"' '"';
  }
.rv-text::before{
    content:open-quote;
    color:var(--section-accent);
    font-weight:700;
  }
.rv-text::after{
    content:close-quote;
    color:var(--section-accent);
    font-weight:700;
  }
.rv-product{
    align-self:flex-start;
    background:var(--cream-2);
    color:var(--ink-soft);
    font-family:'DM Sans';
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:5px 11px;
    border-radius:999px;
    margin-bottom:20px;
  }
.rv-author{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
.rv-author strong{
    display:block;
    font-family:'DM Sans';
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.005em;
  }
.rv-author small{
    display:block;
    font-size:11.5px;
    color:var(--grey);
    margin-top:2px;
    font-family:'DM Sans';
  }
.rv-avatar{
    width:40px;height:40px;
    border-radius:50%;
    background:var(--section-accent);
    color:var(--cream);
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
.rv-note{
    text-align:center;
    margin-top:32px;
    font-family:'DM Sans';
    font-size:11.5px;
    color:var(--grey);
    font-style:italic;
    letter-spacing:.02em;
  }
@media (max-width:980px){
    .reviews{padding:60px 24px}
    .reviews-head h2{font-size:36px}
    .rv-grid{grid-template-columns:1fr;gap:14px}
    .rv-card{padding:26px 24px 22px}
  }
@media (max-width:1080px){
    .faq{padding:70px 30px}
    .faq-grid{
      grid-template-columns:1fr;
      gap:36px;
    }
    .faq-aside{
      position:relative;
      top:auto;
    }
    .faq-title{font-size:34px}
    .faq-desc{max-width:100%}
  }
@media (max-width:680px){
    .faq{padding:50px 24px}
    .faq-list{
      grid-template-columns:1fr;
      gap:20px;
    }
    .faq-title{font-size:28px}
  }
/* === NEWS === */

  /* === FOOTER — sin cambios estructurales, ya era claro === */
  footer{background:#2C2A28;color:rgba(255,249,240,.7);border-top:4px solid #E5523E;
    padding:90px 40px 40px;border-top:1px solid var(--line);
  }
.foot-grid{
    max-width:1500px;margin:0 auto;
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px;
  }
.foot-logo{font-family:'Bricolage Grotesque';font-weight:800;font-size:36px;color:#E5523E;letter-spacing:-.04em;margin-bottom:16px}
.foot-tag{font-size:14px;color:rgba(255,249,240,.85);max-width:280px;line-height:1.55;margin-bottom:24px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;color:var(--ink)}
.foot-col h4{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:#E5523E;margin-bottom:18px;font-weight:700;
  }
.foot-col a{display:block;color:rgba(255,249,240,.85);text-decoration:none;font-size:14px;padding:6px 0}
.foot-col a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.foot-bottom{max-width:1500px;margin:0 auto;border-top:1px solid rgba(255,249,240,.2);padding-top:24px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,249,240,.7);flex-wrap:wrap;gap:14px}
@media (max-width:1100px){
    .sections-grid{grid-template-columns:1fr 1fr}
    .sec-card.snacks{grid-column:1/-1}
    .products-grid{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:2fr 1fr 1fr;gap:40px}
  }
@media (max-width:880px){
    .ing{grid-template-columns:1fr;padding:80px 20px;gap:40px}
    .bundle-banner{grid-template-columns:1fr;padding:80px 20px;gap:40px}
    .reviews-grid{grid-template-columns:1fr}
    .sections-head{grid-template-columns:1fr;gap:30px}
    .sections-grid{grid-template-columns:1fr}
    .sec-card.snacks{grid-column:auto}
    .mani-inner{grid-template-columns:1fr;gap:24px}
    .mani-mark{font-size:90px}
    .mani-text p{font-size:22px}
  }
@media (max-width:560px){
    .products-grid,.foot-grid{grid-template-columns:1fr}
    h2{font-size:38px}
  }
/* === LOGO OFICIAL (header y footer) === */
  
  
  .foot-logo{margin-bottom:18px;line-height:0}
.foot-logo-img{height:48px;width:auto;display:block}
@media (max-width:980px){
    
    .foot-logo-img{height:42px}
  }
/* === FOOTER PRINCIPAL === */
  .ft{
    background:var(--cream-2);
    color:var(--ink);
    padding:70px 60px 30px;
  }
.ft-inner{
    max-width:1500px;
    margin:0 auto;
  }
/* Columnas */
  .ft-cols{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
    gap:40px;
    margin-bottom:40px;
  }
.ft-brand{}
.ft-logo{
    display:inline-block;
    margin:0 0 16px;
    transition:opacity .2s;
  }
.ft-logo:hover{opacity:.75}
.ft-logo img{
    height:38px;
    width:auto;
    display:block;
  }
.ft-name{
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:30px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 14px;
    letter-spacing:-.015em;
  }
.ft-name em{
    font-style:italic;
    color:var(--brand-red);
  }
.ft-tag{
    font-family:'DM Sans';
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.55;
    margin:0 0 18px;
    max-width:280px;
  }
.ft-social{
    display:flex;
    gap:8px;
  }
.ft-social a{
    width:36px;height:36px;
    border-radius:50%;
    background:var(--cream);
    border:1.5px solid var(--brand-red);
    color:var(--brand-red);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:background .2s, color .2s, border-color .2s, transform .2s;
  }
.ft-social a svg{
    display:block;
  }
.ft-social a:hover{
    background:var(--brand-red);
    color:var(--cream);
    border-color:var(--brand-red);
    transform:translateY(-2px);
  }
.ft-col h4{
    font-family:'DM Sans';
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--grey);
    margin:0 0 16px;
  }
.ft-col ul{
    list-style:none;
    padding:0;
    margin:0;
  }
.ft-col li{
    margin-bottom:9px;
  }
.ft-col a{
    font-family:'DM Sans';
    font-size:13px;
    color:var(--ink-soft);
    text-decoration:none;
    transition:color .2s;
  }
.ft-col a:hover{
    color:var(--brand-red);
  }
/* Bloque profundo: certs + VidaBrands */
  .ft-deep{
    border-top:1px solid var(--line);
    padding-top:32px;
    margin-bottom:30px;
  }
.ft-block-label{
    font-family:'DM Sans';
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--grey);
    margin-bottom:18px;
    display:block;
  }
/* Bloque certificaciones (sin card, integrado) */
  .ft-certs-area{
    /* sin background ni border, fluye sobre el fondo del footer */
  }
.ft-certs{
    display:flex;
    gap:24px;
    align-items:center;
    flex-wrap:wrap;
  }
.ft-cert-item{
    display:flex;
    align-items:center;
    gap:12px;
  }
.ft-cert-img{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
.ft-cert-img img{
    height:44px;
    width:auto;
    display:block;
  }
.ft-cert-name{
    font-family:'DM Sans';
    font-size:11.5px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.005em;
  }
/* Barra legal */
  /* Bloque "Frummys by VidaBrands" vertical centrado */
  .ft-by-block{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    text-align:left;
    margin:52px 0 32px;
  }
.ft-by-label{
    font-family:'DM Sans';
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--grey);
  }
.ft-by-logo{
    display:block;
    line-height:0;
    transition:opacity .2s;
  }
.ft-by-logo:hover{
    opacity:.75;
  }
.ft-by-logo img{
    height:36px;
    width:auto;
    display:block;
  }
.ft-by-link{
    font-family:'DM Sans';
    font-size:12.5px;
    color:#3A8A4A;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.02em;
    transition:color .2s;
  }
.ft-by-link:hover{
    color:#2A6A38;
  }
/* Barra legal */
  .ft-bot{
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    font-family:'DM Sans';
    font-size:11.5px;
    color:var(--grey);
    letter-spacing:.01em;
  }
.ft-legal{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
  }
.ft-legal a{
    color:var(--grey);
    text-decoration:none;
    transition:color .2s;
  }
.ft-legal a:hover{
    color:var(--brand-red);
  }
@media (max-width:1080px){
    .ft{padding:50px 30px 24px}
    .ft-cols{
      grid-template-columns:1fr 1fr;
      gap:32px;
      padding-bottom:36px;
      margin-bottom:30px;
    }
    .ft-brand{grid-column:1 / -1}
    .ft-deep{
      grid-template-columns:1fr;
      gap:18px;
    }
    .ft-certs{gap:20px}
  }
@media (max-width:680px){
    .ft-cols{grid-template-columns:1fr;gap:28px}
    .ft-bot{flex-direction:column;align-items:flex-start;gap:10px}
  }
@media (max-width:980px){
    .hero-blob{ width:80%; }
    .hero-bag{ width:70%; }
  }
@media (max-width:680px){
    .hero-blob{ width:85%; }
    .hero-bag{ width:72%; }
  }
/* === MENÚ MÓVIL (hamburguesa + panel) — añadido === */
  .nav-toggle{
    display:none;
    width:42px;height:42px;flex-shrink:0;
    align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--line);
    border-radius:var(--r-pill);color:var(--ink);cursor:pointer;
    transition:background .18s;
  }
.nav-toggle:hover{background:rgba(44,42,40,.06)}
.nav-toggle svg{width:20px;height:20px;display:block}
.nav-toggle .icon-close{display:none}
body.menu-open .nav-toggle .icon-open{display:none}
body.menu-open .nav-toggle .icon-close{display:block}
.mobile-menu{
    display:none;
    position:fixed;left:0;right:0;top:0;bottom:0;
    z-index:99;
    background:var(--paper);
    padding:90px 24px 32px;
    overflow-y:auto;
    flex-direction:column;gap:6px;
  }
body.menu-open .mobile-menu{display:flex}
body.menu-open{overflow:hidden}
.mm-section-label{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:var(--grey);
    margin:18px 6px 6px;
  }
.mobile-menu a{
    display:flex;align-items:center;gap:12px;
    color:var(--ink);text-decoration:none;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:600;font-size:22px;letter-spacing:-.02em;
    padding:14px 16px;border-radius:var(--r-md);
    transition:background .18s;
  }
.mobile-menu a:hover,.mobile-menu a:focus-visible{background:rgba(44,42,40,.06)}
.mobile-menu a.cat::before{
    content:'';width:11px;height:11px;border-radius:50%;
    background:var(--cat,var(--brand-red));flex-shrink:0;
  }
.mobile-menu a.cat.active{color:var(--cat,var(--brand-red))}
.mm-divider{height:1px;background:var(--line);margin:14px 6px}
@media (max-width:980px){
    .nav-toggle{display:inline-flex}
  }
@media (min-width:981px){
    .mobile-menu{display:none !important}
    body.menu-open{overflow:auto}
  }

/* ============================================================
   HERO · CSS base completo (compartido por hero, hero-kids, hero-sport)
   ============================================================ */
/* === ORBIT TAGS — solo 4, en variaciones rojo brand === */

  
  

      /* === HERO === */
    .hero{
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:auto 1fr auto;
      grid-template-areas:
        "topbar  visual"
        "text    visual"
        "icons   icons";
      gap:0 80px;
      padding:60px 60px 70px;
      max-width:1500px;
      margin:0 auto;
      align-items:stretch;
      position:relative;
      overflow:hidden;
    }
  .hero-text{
      grid-area:text;
      padding-top:32px;
      align-self:start;
    }
  h1.hero-title{
      font-family:'Bricolage Grotesque','Inter',sans-serif;
      font-size:clamp(40px,5.6vw,72px);
      font-weight:700;line-height:1.02;
      letter-spacing:-.035em;
      color:var(--ink);
      margin:0 0 28px;
    }
  h1.hero-title em{font-style:italic;font-weight:600;color:var(--section-accent)}
  .hero-sub{
      font-size:18px;line-height:1.6;
      color:var(--grey,#6b5a62);
      max-width:480px;margin:0 0 36px;
    }
  /* === HERO VISUAL === */
    .hero-visual{
      grid-area:visual;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
      min-height:100%;
    }
  .hero-stage{
      position:relative;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      transform:translateY(40px);
    }
  .hero-bodegon{
      width:100%;
      max-width:760px;
      height:auto;
      display:block;
      filter:drop-shadow(0 28px 36px rgba(231,72,71,.18)) drop-shadow(0 14px 22px rgba(0,0,0,.12));
      animation:float-bodegon 6s ease-in-out infinite;
      position:relative;
      z-index:1;
    }
  /* === ORBIT TAGS — todos outline (cream + borde rojo + texto rojo) === */
    .orbit-tag{
      position:absolute;
      background:var(--cream);
      color:var(--section-accent);
      border:1.5px solid var(--section-accent);
      padding:8px 15px 8px 12px;
      border-radius:999px;
      box-shadow:0 6px 18px rgba(231,72,71,.10), 0 2px 6px rgba(0,0,0,.04);
      display:inline-flex;align-items:center;gap:8px;
      font-family:'DM Sans';font-size:12.5px;font-weight:600;
      letter-spacing:.005em;
      white-space:nowrap;
      z-index:3;
      animation:float-tag 5s ease-in-out infinite;
    }
  .orbit-tag .ot-dot{
      width:7px;height:7px;border-radius:50%;
      background:var(--section-accent);
      flex-shrink:0;
    }
  .orbit-tag .ot-label{line-height:1}
  /* === TIRA DE 5 ICONOS A TODO ANCHO (sustituye stats) === */
    .hero-icons-row{
      grid-area:icons;
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:0;
      padding-top:56px;
      margin-top:32px;
      border-top:1px solid var(--line);
    }
  .hi{
      display:flex;flex-direction:column;align-items:center;gap:20px;
      color:var(--section-accent);text-align:center;
      padding:6px 24px;
      border-left:1px solid rgba(231,72,71,.15);
    }
  .hi:first-child{border-left:none}
  .hi-svg{
      width:80px;height:80px;
      display:flex;align-items:center;justify-content:center;
    }
  .hi-svg svg{width:100%;height:100%}
  .hi-label{
      font-family:'DM Sans';font-size:16px;font-weight:500;
      color:var(--section-accent);letter-spacing:.01em;line-height:1.2;
    }
  /* === HERO TOPBAR — barra horizontal "96% fruta & verdura" === */
    .hero-topbar{
      grid-area:topbar;
      display:inline-flex;
      align-items:center;
      gap:14px;
      padding:14px 0;
      margin:0;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      width:fit-content;
      align-self:start;
    }
  .hero-topbar .ht-pct{
      font-family:'Bricolage Grotesque','Inter',sans-serif;
      font-size:42px;
      font-weight:800;
      line-height:1;
      letter-spacing:-.04em;
      color:var(--section-accent);
    }
  .hero-topbar .ht-lbl{
      font-family:'DM Sans',sans-serif;
      font-size:11px;
      font-weight:600;
      letter-spacing:.08em;
      line-height:1.2;
      color:var(--ink);
      text-transform:uppercase;
    }
  /* === MARQUEE — rojo brand FRUMMYS === */
    .marquee{
      background:var(--section-accent);
      color:var(--cream);
      padding:14px 0;
      overflow:hidden;
      display:flex;
    }
  .marquee-track{
      flex-shrink:0;
      display:flex;
      align-items:center;
      font-family:'Bricolage Grotesque';
      font-weight:600;
      font-size:14px;
      letter-spacing:.04em;
      white-space:nowrap;
      min-width:100%;
      animation:marquee-scroll 50s linear infinite;
      will-change:transform;
    }
  .marquee-track .mq-claim{
      display:inline-block;
      vertical-align:middle;
      padding:0 22px;
      line-height:1;
    }
  .marquee-track .mq-sep{
      display:inline-block;
      vertical-align:middle;
      color:var(--cream);
      opacity:.4;
      font-weight:300;
      font-size:16px;
      line-height:1;
      user-select:none;
    }
  /* ============================================== */
    /* HERO HOME · bolsa Mix sobre círculo rojo       */
    /* ============================================== */
    .hero-stage{
      position:relative;
      width:100%;
      aspect-ratio:1/1;
      display:flex;
      align-items:center;
      justify-content:center;
    }
  .hero-blob{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:90%;
      aspect-ratio:1/1;
      background:var(--section-accent);
      border-radius:50%;
      z-index:1;
    }
  .hero-bag{
      position:relative;
      z-index:2;
      width:78%;
      max-width:520px;
      animation:float-bodegon 6s ease-in-out infinite;
    }
  .hero-bag img{
      width:100%;
      height:auto;
      display:block;
    }