/* ==========================================================================
   True Food CR — hoja de estilo del sitio informativo
   Todo sale del TrueFood_VisualDNA.pdf. Nada de color ni tipografía
   se inventa acá: si no está en la guía, no está en esta hoja.
   ========================================================================== */

:root{
  /* Paleta principal — guía, pág. 6 */
  --lima:#E9FE60;          /* Pantone 387 C */
  --tinta:#000000;
  --papel:#FFFFFF;
  --gris:#58595B;

  /* Neutros de apoyo, con sesgo hacia el lima para que no se vean grises muertos */
  --hueso:#F5F7EC;
  --linea:#E2E6D4;

  /* Paleta secundaria — es el sistema de color del empaque, guía pág. 7.
     Cookie Dough sale de la ficha técnica (no existía cuando se hizo la guía). */
  --c-blanco:#6BC4E8;
  --c-semillas:#80BC00;
  --c-frances:#F26178;
  --c-buns:#CF63CE;
  --c-pizza:#FF671D;
  --c-cookie:#FD98D1;

  --display:"Josefin Sans","Avenir Next","Century Gothic",sans-serif;
  --texto:"DM Sans","Helvetica Neue",Arial,sans-serif;

  --aire:clamp(3.75rem,9vw,7rem);
  --borde:clamp(1.25rem,5vw,3.5rem);
  --ancho:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-blanco);outline-offset:3px;border-radius:2px}

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--lima);
        padding:.7rem 1.1rem;z-index:100;font-weight:700}
.saltar:focus{left:0}

h1,h2,h3{text-wrap:balance}
h1{font-family:var(--display);font-weight:300;margin:0}
h2{font-family:var(--display);font-weight:300;margin:0 0 1.2rem;
   font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.03;letter-spacing:-.012em}
h3{font-family:var(--texto);font-weight:700;margin:0 0 .4rem;font-size:1.125rem}
p{margin:0 0 1.05rem;max-width:62ch}
p:last-child{margin-bottom:0}

.seccion{padding:var(--aire) var(--borde)}
.inner{max-width:var(--ancho);margin-inline:auto}
.rotulo{font-size:.8125rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
        color:var(--gris);margin:0 0 1rem}
.lede{font-size:clamp(1.0625rem,1.9vw,1.25rem);line-height:1.5;max-width:52ch}

/* ==========================================================================
   Encabezado
   ========================================================================== */
.nav{position:sticky;top:0;z-index:50;background:var(--papel);
     border-bottom:1px solid var(--linea)}
/* En celular: logo e idioma arriba, y el menu de secciones abajo, deslizable.
   Nada de hamburguesa — esconderia justo lo que el comprador viene a buscar. */
.nav-in{max-width:var(--ancho);margin-inline:auto;padding:.6rem var(--borde) 0;
        display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.nav-logo{order:1;flex:0 0 auto}
.nav-logo img{height:clamp(50px,10vw,62px);width:auto}
.idioma{order:2;margin-left:auto;display:flex;align-items:center;gap:.15rem;
        font-size:.8125rem;font-weight:700;letter-spacing:.06em}
.secciones{order:3;flex:1 0 100%;min-width:0}

.secciones ul{list-style:none;margin:0;padding:0 0 .55rem;display:flex;gap:1.35rem;
              overflow-x:auto;overscroll-behavior-x:contain;
              scrollbar-width:none;-webkit-overflow-scrolling:touch}
.secciones ul::-webkit-scrollbar{display:none}
.secciones li{flex:0 0 auto}
.secciones a{display:block;white-space:nowrap;text-decoration:none;
             font-size:.8125rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
             color:var(--gris);padding:.35rem 0;border-bottom:2px solid transparent}
.secciones a:hover,.secciones a:focus-visible{color:var(--tinta);border-bottom-color:var(--lima)}
/* margen de respiro al final de la tira, para que se note que sigue */
.secciones li:last-child{padding-right:var(--borde)}

/* En celular la tira se desliza; sin una pista visual nadie lo descubre.
   El degradado del borde derecho dice "hay mas" sin ocupar lugar. */
@media (max-width:939px){
  .secciones{position:relative}
  .secciones::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.4rem;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--papel) 72%)}
}

@media (min-width:940px){
  .nav-in{padding:.55rem var(--borde);gap:1.8rem;flex-wrap:nowrap}
  .secciones{order:2;flex:1 1 auto;margin-left:.4rem}
  .secciones ul{padding-bottom:0;gap:1.6rem}
  .idioma{order:3;margin-left:0;flex:0 0 auto}
}

/* El encabezado pegado tapa el destino de un ancla si no se compensa. */
/* Medido: el encabezado mide hasta 128px en celular/tableta y 87px en
   escritorio. La compensacion va por encima de eso para que el titulo de la
   seccion quede visible y no debajo de la barra. */
section[id]{scroll-margin-top:144px}
@media (min-width:940px){section[id]{scroll-margin-top:100px}}
.idioma a,.idioma span{padding:.3rem .5rem;border-radius:2px;text-decoration:none}
.idioma [aria-current="true"]{background:var(--tinta);color:var(--lima)}
.idioma a:not([aria-current]){color:var(--gris)}
.idioma a:not([aria-current]):hover{color:var(--tinta);background:var(--hueso)}

/* ==========================================================================
   Portada — la foto llena la pantalla al abrir y el titular va encima.
   La barra de menu flota sobre la foto y se vuelve blanca al bajar.
   Solo en Inicio: lo activa la clase .con-portada en el <body>.
   ========================================================================== */
.portada{position:relative;height:100svh;min-height:520px;max-height:1000px;
         overflow:hidden;background:var(--tinta);
         display:flex;align-items:center;justify-content:center}
.portada .diapos{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.portada .diapo{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.portada .diapo.activa{opacity:1}
.portada .diapo img{width:100%;height:100%;object-fit:cover;display:block}

/* Velo: sin el, el texto blanco se pierde sobre la miga clara.
   Mas oscuro arriba (por el menu) y abajo (por los puntos), liviano al medio
   para que la foto no se apague. */
.portada-velo{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(24,17,9,.50) 0%,rgba(24,17,9,.10) 26%,
                           rgba(24,17,9,.10) 52%,rgba(24,17,9,.58) 100%),
    radial-gradient(ellipse 62% 46% at 50% 52%,rgba(24,17,9,.42),rgba(24,17,9,0) 72%)}

.portada-txt{position:relative;z-index:2;text-align:center;color:#fff;
             padding:0 var(--borde)}
.portada-txt h1{font-size:clamp(2.7rem,7.6vw,5.9rem);line-height:1.02;letter-spacing:-.005em;
                text-shadow:0 2px 30px rgba(0,0,0,.45)}
.portada-txt h1 span{display:block}
.portada-sub{font-size:clamp(1rem,1.85vw,1.3rem);line-height:1.5;
             margin:clamp(1rem,2.4vw,1.6rem) auto 0;max-width:44ch;
             color:rgba(255,255,255,.94);text-shadow:0 1px 18px rgba(0,0,0,.55)}

/* <picture> mete un elemento de por medio: sin esto la foto no llena la caja. */
.portada .diapo picture{position:absolute;inset:0;display:block}

.portada .puntos{position:absolute;left:0;right:0;bottom:clamp(1.5rem,4.5vh,3rem);z-index:2;
                 display:flex;justify-content:center;gap:.55rem}

/* Barra flotante sobre la portada */
body.con-portada .nav{position:fixed;left:0;right:0;top:0;
  background:transparent;border-bottom-color:transparent;
  transition:background .35s ease,border-color .35s ease}
body.con-portada .nav.solida{background:var(--papel);border-bottom-color:var(--linea)}
body.con-portada .nav:not(.solida) .secciones a{color:rgba(255,255,255,.9)}
body.con-portada .nav:not(.solida) .secciones a:hover,
body.con-portada .nav:not(.solida) .secciones a:focus-visible{color:#fff}
body.con-portada .nav:not(.solida) .idioma a:not([aria-current]){color:rgba(255,255,255,.82)}
body.con-portada .nav:not(.solida) .idioma a:not([aria-current]):hover{color:#fff;background:rgba(255,255,255,.16)}
body.con-portada .nav:not(.solida) .idioma [aria-current="true"]{background:var(--lima);color:var(--tinta)}
body.con-portada .nav:not(.solida) .secciones::after{background:none}

/* El logo redondo trae su propia mancha lima, asi que el mismo archivo se lee
   sobre la foto de la portada y sobre el blanco del resto. Sin cambio de
   version, sin cruce de opacidades. */
.nav-logo{display:block}

/* ==========================================================================
   El mantra — regla de marca: siempre en este orden
   ========================================================================== */
.mantra{background:var(--tinta);color:var(--papel);text-align:center}
.mantra ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
           align-items:center;gap:.1rem}
.mantra li{font-family:var(--display);font-weight:200;
           font-size:clamp(2.2rem,10vw,4rem);line-height:1.14;letter-spacing:-.01em}
@media (min-width:760px){
  .mantra ol{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;
             gap:.2rem 2.6rem}
  .mantra li+li::before{content:"\00b7";color:var(--lima);margin-right:2.6rem;font-weight:400}
}
.mantra p{margin:clamp(1.4rem,4vw,2.2rem) auto 0;color:#B9BDB0;font-size:1rem;max-width:46ch}

/* ==========================================================================
   Productos — bolsa como se ve en el congelador + el pan servido
   ========================================================================== */
.productos{background:var(--papel)}
.rejilla{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.2rem);margin-top:2.4rem}
@media (min-width:620px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rejilla{grid-template-columns:repeat(3,1fr)}}

.prod{display:flex;flex-direction:column;min-width:0}
.prod-fotos{position:relative;background:var(--hueso);overflow:hidden}
.prod-bolsa{width:100%;aspect-ratio:1;object-fit:cover}
.prod-servido{position:absolute;right:5%;bottom:5%;width:38%;aspect-ratio:1;object-fit:cover;
              border-radius:50%;border:5px solid var(--papel)}
/* En el pote de Cookie Dough el "Gluten Free" cae justo abajo a la derecha:
   ahí el círculo taparía texto del empaque, así que va del otro lado. */
.prod-fotos--izq .prod-servido{right:auto;left:5%}
.prod-nombre{display:flex;align-items:baseline;gap:.55rem;margin:1rem 0 .2rem}
.prod-punto{width:13px;height:13px;border-radius:50%;flex:0 0 13px;
            background:var(--c);transform:translateY(-1px)}
.prod h3{margin:0;font-size:1.1875rem}
.prod-desc{font-size:1rem;line-height:1.5;margin:0 0 .7rem;color:#2A2E1E}
.prod-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.prod-specs li{font-size:.8125rem;line-height:1.3;color:var(--gris);
               border:1px solid var(--linea);border-radius:2px;padding:.22em .5em}
.prod-falta{font-size:.8125rem;color:var(--gris);font-style:italic;margin-top:.5rem}

/* ==========================================================================
   Dónde comprar — la fila de logos ES la credencial
   ========================================================================== */
.donde{background:var(--hueso)}
.cadenas{list-style:none;margin:2.2rem 0 0;padding:0;
         display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
         background:var(--linea);border:1px solid var(--linea)}
@media (min-width:700px){.cadenas{grid-template-columns:repeat(5,1fr)}}
/* Son cinco cadenas y en celular la rejilla es de dos: el último ocupa
   la fila entera para que no quede una celda huérfana al lado. */
@media (max-width:699px){.cadenas li:last-child{grid-column:1 / -1}}
.cadenas li{background:var(--papel);display:grid;place-items:center;
            padding:clamp(1.1rem,3vw,1.8rem) 1rem;min-height:118px}
.cadenas img{max-height:50px;width:auto;max-width:100%;object-fit:contain}
/* El logo de BM es una caja azul, no un wordmark suelto. A la misma altura que
   los demás pesa menos de lo que debería, así que se le da un poco más. */
.cadenas img.logo-cuadrado{max-height:66px}
.donde-nota{margin-top:1.4rem;font-size:.9375rem;color:var(--gris)}

/* ==========================================================================
   Sellos — solo certificaciones vigentes.
   Las marcas de terceros se reproducen tal cual las emiten, sin recolorear.
   ========================================================================== */
.sellos{background:var(--papel)}
.sellos-fila{list-style:none;margin:2.2rem 0 0;padding:0;
             display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,2.4rem);align-items:center}
.sello{width:clamp(96px,22vw,124px);flex:0 0 auto;text-align:center}
.sello img{width:100%;border-radius:50%}
.sello-txt{border:2px solid var(--tinta);border-radius:50%;aspect-ratio:1;
           display:grid;place-items:center;padding:.8rem;line-height:1.15}
.sello-txt b{display:block;font-size:clamp(.9375rem,2.4vw,1.0625rem)}
.sello-txt span{display:block;font-size:.6875rem;color:var(--gris);margin-top:.15rem}
.sello-gf{width:100%;height:auto;display:block;padding:6% 0}
.sello-pie{font-size:.75rem;color:var(--gris);margin-top:.5rem;line-height:1.3}

/* ==========================================================================
   Quiénes somos
   ========================================================================== */
.nosotras{background:var(--lima)}
.nosotras-in{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
@media (min-width:840px){.nosotras-in{grid-template-columns:.85fr 1.15fr}}
.nosotras img{width:100%;aspect-ratio:3/4;object-fit:cover}
.nosotras h2{margin-bottom:1rem}
.nosotras p{color:#1E2410}
.firma{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,3vw,1.75rem);
       line-height:1.25;margin-top:1.6rem}
.credenciales{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.credenciales li{background:var(--tinta);color:var(--lima);font-size:.8125rem;font-weight:700;
                 letter-spacing:.05em;text-transform:uppercase;padding:.35em .7em;border-radius:2px}

/* ==========================================================================
   Distribución y exportación — la sección del comprador
   ========================================================================== */
.b2b{background:var(--tinta);color:var(--papel)}
.b2b h2{color:var(--papel)}
.b2b .rotulo{color:#8E927F}
.b2b .lede{color:#D6DAC8}
.b2b-cols{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:2.6rem}
@media (min-width:900px){.b2b-cols{grid-template-columns:1.25fr .75fr}}

/* Línea de contexto: lo mínimo que un comprador necesita antes de escribir.
   El detalle de caja va en la ficha técnica, por correo. */
.datos{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.datos li{font-size:.9375rem;line-height:1.35;color:var(--papel);
          border:1px solid rgba(255,255,255,.34);border-radius:2px;padding:.4em .8em}

.cta{font-family:var(--display);font-weight:300;
     font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.2;letter-spacing:-.005em;
     margin:0 0 1.8rem;max-width:22ch}

/* Bloque de certificaciones: se actualiza acá y en ningún otro lado.
   Cuando llegue BRC se agrega a la lista y se borra .tramite.
   El gluten free ya está certificado por Gluten-Free Food Program. */
.certs{margin-top:2rem;border-left:3px solid var(--lima);padding-left:1.1rem}
.certs ul{list-style:none;margin:0 0 .8rem;padding:0}
.certs li{font-size:1rem;line-height:1.55}
.certs li::before{content:"·";color:var(--lima);font-weight:700;margin-right:.5rem}
.tramite{font-size:.9375rem;color:#B9BDB0;margin:0}

.contactos{display:grid;gap:1.4rem}
.tarjeta{border:1px solid rgba(255,255,255,.24);padding:1.2rem 1.3rem}
.tarjeta .nom{font-weight:700;font-size:1.0625rem;line-height:1.3}
.tarjeta .cargo{font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;
                color:var(--lima);margin-top:.15rem}
.tarjeta a{display:block;margin-top:.6rem;font-size:.9375rem;text-decoration:none;
           border-bottom:1px solid rgba(255,255,255,.3);width:fit-content;
           word-break:break-word}
.tarjeta a:hover{border-bottom-color:var(--lima);color:var(--lima)}
.b2b-foto{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:1.4rem}

/* ==========================================================================
   Contacto y pie
   ========================================================================== */
.contacto{background:var(--hueso)}
.enlaces{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;
         background:var(--linea);border:1px solid var(--linea)}
@media (min-width:700px){.enlaces{grid-template-columns:repeat(3,1fr)}}
.enlaces li{background:var(--papel)}
.enlaces a{display:block;padding:1.3rem 1.4rem;text-decoration:none}
.enlaces a:hover{background:var(--lima)}
.enlaces .que{display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
                 color:var(--gris);line-height:1.4}
.enlaces .val{display:block;font-weight:700;font-size:1.0625rem;margin-top:.2rem;word-break:break-word}

/* El pie va todo centrado en una sola columna: los sellos arriba, el logo
   debajo y el texto al final. Antes el logo iba a la izquierda y el
   copyright a la derecha, y se veia montado. */
.pie{background:var(--tinta);color:#B9BDB0;
     padding:clamp(2.4rem,6vw,3.6rem) var(--borde) clamp(2.8rem,7vw,4.2rem)}
.pie-in{max-width:var(--ancho);margin-inline:auto;
        margin-top:clamp(2rem,6vw,2.8rem);
        display:flex;flex-direction:column;align-items:center;text-align:center;
        gap:1.5rem}
.pie-logo{width:96px}
.pie p{font-size:.875rem;margin:0;max-width:46ch;line-height:1.7}
.pie a{color:var(--lima)}

/* ====================================================================
   PÁGINAS DE PRODUCTO  (/producto/*.html)
   ==================================================================== */
.pagina-producto main{padding-top:0}
.miga{max-width:1180px;margin:0 auto;padding:1.4rem 1.5rem .2rem;font-size:.8125rem;color:var(--gris)}
.miga a{color:var(--gris)}
.miga a:hover{color:var(--tinta)}

/* La pagina de producto es una sola pieza: a la izquierda todo lo que se lee
   —nombre, congelado, ingredientes, ficha y sellos— y a la derecha las fotos.
   Antes el nombre quedaba arriba y debajo un hueco enorme al lado de la foto.
   El orden del HTML es nombre / fotos / datos para que en celular la foto
   caiga justo debajo del nombre; en pantalla ancha la rejilla la manda a la
   derecha y los datos suben a la izquierda. */
.prod-hero{display:grid;grid-template-columns:1fr 1fr;align-items:start;
           gap:1.9rem 3rem;max-width:1180px;margin:0 auto;padding:2rem 1.5rem 3.5rem}
.prod-hero img{width:100%;height:auto;border-radius:4px}
.prod-hero h1{font-family:"Josefin Sans",sans-serif;font-weight:300;
              font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02;margin:0 0 .9rem}
.prod-hero-fotos{display:grid;gap:1.1rem}
.prod-hero-datos h2{font-family:"Josefin Sans",sans-serif;font-weight:300;
                    font-size:1.5rem;margin:0 0 .6rem}
.prod-hero-datos h2:not(:first-child){margin-top:2.2rem}
.prod-hero-datos .tabla-ficha{margin-top:.4rem}
/* Los mismos sellos del pie, pero sobre fondo claro: aca no llevan placa. */
.prod-sellos{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:2.2rem}
.prod-sellos .sello{width:auto;height:62px;background:none;padding:0}

@media (min-width:761px){
  /* grid-template-rows es lo que evita el hueco: sin el, la columna de fotos
     cruza las dos filas y estira la primera para repartir su alto, dejando
     un vacio enorme entre el chip de Congelado e Ingredientes. Con "auto 1fr"
     la fila del nombre mide lo que mide su contenido y la segunda absorbe
     todo lo que sobra. */
  .prod-hero{grid-template-rows:auto 1fr}
  .prod-hero-txt  {grid-column:1;grid-row:1}
  .prod-hero-datos{grid-column:1;grid-row:2}
  .prod-hero-fotos{grid-column:2;grid-row:1 / span 2}
}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.chips li{border:1px solid var(--tinta);border-radius:999px;padding:.28rem .8rem;font-size:.8125rem}
.prod-hero .chips li:first-child{background:var(--c);border-color:var(--c)}

.ingr{line-height:1.7}
.alerg{font-weight:700;margin-top:1.2rem}

.tabla-ficha{width:100%;border-collapse:collapse;margin-top:1.2rem;max-width:760px}
.tabla-ficha th,.tabla-ficha td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid #E4E7DA;
                                vertical-align:top;font-size:.9375rem}
.tabla-ficha th{font-weight:500;color:var(--gris);width:42%}
.tabla-ficha .cod{font-variant-numeric:tabular-nums;letter-spacing:.03em}

.otros{background:var(--hueso)}
.lista-otros{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.2rem 0 0;padding:0}
.lista-otros a{display:flex;align-items:center;gap:.5rem;font-weight:500}
.lista-otros .punto{width:11px;height:11px;border-radius:50%;background:var(--c);flex:0 0 11px}
.cta-vuelta{margin-top:1.8rem;font-weight:500}

@media (max-width:760px){
  .prod-hero{grid-template-columns:1fr;padding-bottom:2rem}
  .tabla-ficha th{width:50%}
}

/* enlaces de las páginas de producto y de las tarjetas: sin subrayado por defecto */
.prod h3 a,.miga a,.lista-otros a,.cta-vuelta a,.pie a{text-decoration:none}
.prod h3 a:hover,.prod h3 a:focus-visible,.miga a:hover,.lista-otros a:hover,
.cta-vuelta a:hover,.pie a:hover{text-decoration:underline;text-underline-offset:3px}
/* La tarjeta entera entra al producto, foto incluida. En vez de envolver todo
   en un <a> —que duplicaria el destino para lectores de pantalla y para
   Google— se estira el enlace del nombre sobre la tarjeta con un
   pseudo-elemento. Sigue habiendo un solo enlace real. */
.prod-link{position:relative}
.prod-link h3 a::after{content:"";position:absolute;inset:0}
.prod-link:hover .prod-fotos{filter:brightness(.97)}
.prod-link:hover h3 a{text-decoration:underline;text-underline-offset:3px}
/* el encabezado de producto no necesita tanto aire cuando la foto es alta */
.tabla-ficha .sub{display:block;font-size:.75rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);opacity:.8;margin-top:.2rem}

/* ====================================================================
   Puntos del carrusel de la portada y tira de sellos del pie.
   ==================================================================== */
.punto-carr{width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
            background:rgba(255,255,255,.5);transition:background .2s,transform .2s}
.punto-carr.activo{background:var(--lima);transform:scale(1.25)}
.punto-carr:focus-visible{outline:3px solid var(--lima);outline-offset:3px}

/* ==========================================================================
   Banda "Comida real" — foto a todo lo ancho con el texto encima.
   Replica la seccion de la pagina actual de Shopify (pedido de Lorena).
   ========================================================================== */
.banda{position:relative;display:flex;align-items:center;justify-content:center;
       min-height:clamp(400px,48vw,700px);overflow:hidden;background:var(--tinta)}
.banda-foto{position:absolute;inset:0;width:100%;height:100%;max-width:none;
            object-fit:cover;object-position:center}
/* Sin velo, el texto blanco se pierde en la harina clara del pan. */
.banda-velo{position:absolute;inset:0;background:rgba(30,19,10,.44)}
.banda-txt{position:relative;z-index:2;color:#fff;text-align:center;
           padding:clamp(3rem,8vw,5.5rem) var(--borde);max-width:1020px;margin-inline:auto}
.banda-txt h2{margin:0;color:#fff;font-size:clamp(1.8rem,3.9vw,3rem);line-height:1.12;
              text-shadow:0 2px 24px rgba(0,0,0,.5)}
.banda-punto{font-size:1.5rem;line-height:1;margin:.85rem 0 1.35rem;opacity:.8;max-width:none}
.banda-txt p:not(.banda-punto){margin:0 auto;max-width:68ch;
              font-size:clamp(1rem,1.55vw,1.15rem);line-height:1.62;
              color:rgba(255,255,255,.95);text-shadow:0 1px 16px rgba(0,0,0,.55)}


/* Tira de sellos del pie: solo las marcas, sin texto.
   Los dos sellos son de color sobre transparente y el pie es negro, asi que
   cada uno va sobre su propia placa blanca. Se igualan por ALTO, no por
   ancho: uno es cuadrado y el otro redondo, y por ancho se ven disparejos. */
.pie-sellos{border-bottom:1px solid #2A2A2A;padding:.4rem 1.5rem 2.6rem;display:flex;
            align-items:center;justify-content:center;gap:1.25rem;flex-wrap:wrap}
.pie-sellos .sello{width:auto;height:74px;background:#fff;border-radius:6px;
                   padding:8px;box-sizing:content-box}
.contactos-anchos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;max-width:760px}

@media (max-width:640px){
  .pie-sellos{gap:.9rem;padding:.2rem 1rem 2rem}
  .pie-sellos .sello{height:58px;padding:7px}
}

/* Contacto: el bloque de Fundadoras no necesita tanto aire */
.b2b{padding-block:calc(var(--aire) * .62)}
.b2b h2{margin-bottom:1.6rem}
.contactos-anchos{margin-top:0}