/* =========================================
   COLOR GLOBAL DE TEXTO Y MARCA
   ========================================= */

/* ===== Tipografías específicas para la landing de Bodegas ===== */
body.landing-bodegas{
    --font-title: "Petemoss", cursive;
    --font-ui: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/* Paleta base (ajusta si ya tenías estas variables) */
:root{
    --brand-green: #3d5b58;     /* color pedido */
    --brand-green-dk: #2f4745;  /* hover/énfasis */
    --brand-green-lt: #587a76;  /* variantes suaves si las necesitás */
}

/* Texto global */
html, body{ color: var(--brand-green); }

/* Copertura amplia de tipografías de contenido */
body, p, li, blockquote, figcaption,
label, input, textarea, select,
input::placeholder, textarea::placeholder{
    color: var(--brand-green);
}

/* Títulos y títulos de sección */
h1,h2,h3,h4,h5,h6,
.sec-title, .title, .display-1, .display-2{
    color: var(--brand-green);
}

/* Enlaces (mismo tono + hover más oscuro) */
a{ color: var(--brand-green); }
a:hover{ color: var(--brand-green-dk); }

/* Iconos que heredan color (SVG/icomoon/etc.) */
svg, .st-icon{ color: var(--brand-green); fill: currentColor; }

/* Cards, captions del carrusel, straplines, etc. que ya usen inherit */
#catering .cat-card figcaption,
.sub-lead, .legend-text, .legend-strap span{
    color: var(--brand-green);
}

/* Botones: MANTENER contraste de CTA (no los pasamos a verde texto) */
.btn.btn--cta, .btn-enviar{
    /* sus colores actuales; si ya están definidos, podés omitir este bloque */
    color: #e9e3cf;
}

/* Footer hero con imagen: mantener SIEMPRE blanco para legibilidad */
.footer-hero,
.footer-hero *{
    color:#fff !important;
}



/* (opcional) Si tu variables no están, asegúralas acá */
:root{
    --font-title: "Petemoss", serif;
    --font-body: "Crimson Text", Georgia, serif;
    --font-ui:   "Crimson Text", Georgia, serif;
}



/* =========================
   VARIABLES DE MARCA
   ========================= */
:root{
    --brand-green:#3d5b58;
    --brand-green-dk:#2f4d49;

    --font-title:"Petemoss", serif;
    --font-body:"Crimson Text", Georgia, serif;
    --font-ui:"Crimson Text", Georgia, serif;

    --beige:#d1caaf;
    --beige-hover:#eae7da;

    --container-w:1200px;
    --hdr-pad-x:20px;

    --legend-green: var(--brand-green);
    --contact-green: var(--brand-green);
    --footer-green: var(--brand-green);

    --legend-max:1240px;
    --contact-max:1240px;
}

/* =========================
   BASE TIPOGRÁFICA
   ========================= */
html,body{ overflow-x: clip; }
body{
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    color:#123b32;
    background:#fff;
    margin:0;
}
h1,h2,h3,h4,h5,h6,
.sec-title,
.sec-heading .sec-title,
.sub-lead,
.legend-text,
#catering .cat-card figcaption,
.contact-strap > span,
.footer-quote{
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
    font-style: normal !important; /* Petemoss sin cursiva */
    color: var(--brand-green);
}

/* ===== Botones (Crimson, NO cursiva) ===== */
.btn,
.split-card__btn,
.btn-enviar{
    font-family: var(--font-ui);
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* CTA principal */
.hero-cta--out a,
.btn.btn--cta{
    font-family: "Merriweather", Georgia, serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1;
    white-space: nowrap;
}
.btn.btn--cta:hover{ filter:brightness(1.07); transform:translateY(-1px); }

/* =========================
   HERO B2B: Bodegas
   ========================= */

.bodegas-hero{
    position: relative;
    min-height: 92vh;
    padding-top: calc(var(--hdr-h) * .25);
    padding-bottom: 12vh;
    background: transparent;
}
@media (min-width: 992px){
    .bodegas-hero{
        min-height: 94vh;
        padding-top: calc(var(--hdr-h-lg) * .25);
        padding-bottom: 14vh;
    }
}

/* Fondo de hero */
.bodegas-hero .hero-bg{
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.bodegas-hero .hero-bg > img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
}
.bodegas-hero .hero-bg > img.active{ opacity: 1; }

/* Cartel (leyenda) */
.bodegas-hero .hero-inner{
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 var(--hdr-pad-x);
    position: relative;
    z-index: 1;
}
.bodegas-hero .hero-card{
    width: clamp(560px, 58vw, 860px);
    max-width: min(980px, 92vw);
    margin: 0 auto;
    padding: 28px 30px;
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
@media (max-width: 600px){
    .bodegas-hero .hero-inner{ padding: 0 12px; }
    .bodegas-hero .hero-card{
        width: min(92vw, 560px);
        margin-left: auto; margin-right: auto;
        padding: 24px 18px;
    }
}

/* Texto dentro del cartel */
.bodegas-hero .hero-card p{
    margin: 0;
    color: var(--brand-green);
    font-family: var(--font-title);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.22;
    text-align: center;
}

/* CTA centrado bajo el cartel */
.bodegas-hero .hero-cta--out{
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 86px; z-index: 2; margin: 0;
}
@media (max-width: 991px){ .bodegas-hero .hero-cta--out{ bottom: 72px; } }

/* Botón CTA */
.bodegas-hero .hero-cta--out a{
    display:inline-block;
    padding:14px 26px;
    border-radius:14px;
    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%);
    border:2px solid #c6b79d;
    color:#e9e3cf;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.25);
    transition: transform .15s ease, filter .15s ease;

    font-family: "Merriweather", Georgia, serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1;
    white-space: nowrap;
}
.bodegas-hero .hero-cta--out a:hover{
    filter: brightness(1.07);
    transform: translateY(-1px);
}

@media (max-width: 600px){
    .bodegas-hero .hero-cta--out{ bottom: 64px; }
    .bodegas-hero .hero-cta--out a{
        padding: 12px 18px;
        font-size: 14px;
        max-width: 92vw;
    }
}

/* Dots */
.bodegas-hero .hero-dots{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 2;
    display: flex;
    gap: 10px;
}
.bodegas-hero .hero-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.bodegas-hero .hero-dot:hover{ transform: scale(1.1); }
.bodegas-hero .hero-dot.is-active{
    background: #fff;
    border-color: rgba(255,255,255,.95);
    transform: scale(1.15);
}

/* === Fix: eliminar el padding-top heredado de .hero en Bodegas === */
.bodegas-hero{
    padding-top: 0 !important;            /* anula .hero de b2b.css */
}

/* Desktop también sin padding-top */
@media (min-width: 992px){
    .bodegas-hero{ padding-top: 0 !important; }
}

/* Si querés un poco de respiración para el cartel, dalo adentro */
.bodegas-hero .hero-inner{
    padding-top: clamp(8px, 1.8vw, 22px); /* opcional */
}

/* Quitar el cuadro blanco del hero en Bodegas */
.bodegas-hero .hero-card{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Mejora de legibilidad del texto sobre foto */
.bodegas-hero .hero-card p{
    color: #fff !important;                 /* si lo querés verde, cambiá a var(--brand-green) */
    text-shadow: 0 2px 12px rgba(0,0,0,.45); /* contorno suave para leer mejor */
}


/* ===== ¿QUÉ ES SUSTENTIME? — Título recto, caligráfico (XXL) ===== */
.about-b2b{
    position: relative;
    overflow: hidden;
    /* aire contra la curva superior y debajo */
    padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 8vw, 112px);
    background:#fff;
    color: var(--brand-green);
}

/* Más ancho para que el título respire en desktop */
.about-b2b .about-wrap{
    width: min(1400px, 95vw);
    margin: 0 auto;
    text-align: center;
    padding-inline: clamp(10px, 3vw, 24px);
}

/* Título recto (sin curva) — MUY grande y en una sola línea */
.about-b2b .sec-title{
    font-family: var(--font-title) !important; /* Petemoss (Google Fonts) */
    font-weight: 400 !important;
    color: var(--brand-green);

    /* GRANDE: ~64px en móviles chicos → hasta 200px en desktop */
    font-size: clamp(64px, 10.8vw, 200px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    white-space: nowrap;            /* que no se parta en 2 líneas */
    margin: clamp(22px, 2.8vw, 34px) 0 clamp(16px, 2.2vw, 26px);
}

/* Ajuste fino solo para pantallas muy angostas */
@media (max-width: 420px){
    .about-b2b .sec-title{
        /* mantengo una línea, pero sin que “explote” hacia los bordes */
        font-size: clamp(56px, 11vw, 74px);
        letter-spacing: -0.015em;
    }
}

/* Leyenda (Cormorant Garamond Italic), grande y con poco interlineado */
.about-b2b .about-lead{
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: #2e5651;

    /* GRANDE: ~22–24px en mobile → 48px en desktop */
    font-size: clamp(22px, 3.1vw, 48px);
    line-height: 1.16;           /* pegadita, sin “abrirse” demasiado */
    letter-spacing: 0;

    max-width: 74ch;
    margin: 0 auto;
    text-align: center;
}
.about-b2b .about-lead strong{
    display:block;
    margin-top: .3em;
    font-weight: 600;
    font-style: italic;
    color: var(--brand-green);
}

/* Hilo superior (fino) */
.about-b2b .about-thread{
    position:absolute; left:0; right:0; top:0;
    width:100%; height: clamp(80px, 16vw, 140px);
    pointer-events:none;
    transform: translateX(var(--thread-shift, 0));
    transition: transform .2s linear;
    opacity:.95;
}
.about-b2b .about-thread path{
    fill:none; stroke:#d8cfb6; stroke-width:1.3px;
    stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray: var(--thread-len, 1000);
    stroke-dashoffset: var(--thread-off, 1000);
}
@media (prefers-reduced-motion: reduce){
    .about-b2b .about-thread{ transform:none !important; }
    .about-b2b .about-thread path{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
}

/* Reveal reutilizando tu clase .rv (si la usás) */
.about-b2b .sec-title.rv,
.about-b2b .about-lead.rv{ opacity:0; transform:translateY(16px); }
.about-b2b .sec-title.rv.is-in,
.about-b2b .about-lead.rv.is-in{ opacity:1; transform:none; transition:.55s ease; }



/* =========================
   TÍTULOS DE SECCIÓN + SUBFRASE
   ========================= */
.sec-heading{
    --line-p:0;
    display:flex; align-items:center; justify-content:center;
    gap: clamp(14px, 3vw, 40px);
    width:min(1100px, 93vw);
    margin:0 auto clamp(10px, 2.8vw, 24px);
    position:relative;
}
.sec-heading::before,
.sec-heading::after{
    content:""; height:2px; width:min(36vw, 320px); background:#d8cfb6;
    transform:scaleX(var(--line-p)); transform-origin:left;
    transition: transform .2s linear;
}
.sec-heading::after{ transform-origin:right; }
.sec-heading .sec-title{
    font-family: var(--font-title); font-weight:400; font-style:normal;
    font-size: clamp(28px, 4.2vw, 64px); margin:0; color:var(--brand-green);
}
@media (prefers-reduced-motion: reduce){
    .sec-heading{ --line-p:1 !important; }
    .sec-heading::before,.sec-heading::after{ transform:scaleX(1) !important; }
}

.sub-lead{
    width:min(1100px, 93vw);
    margin:0 auto clamp(14px, 3.4vw, 36px);
    font-family: var(--font-title); font-weight:400; font-style:normal;
    color: var(--brand-green);
    font-size: clamp(18px, 2.3vw, 32px);
    text-align:center;
}


/* =========================
   VIDEO DE MARCA (encuadrado)
   ========================= */
.brand-video{
    /* aire arriba/abajo y fondo blanco como el resto */
    padding: clamp(16px, 2vw, 24px) 0;
    background: #fff;
}

.brand-video__wrap{
    /* ancho contenido y altura controlada */
    width: min(1240px, 96vw);
    margin: 0 auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;

    /* Mantenerlo visible “de una”: 16:9 + límite por viewport */
    aspect-ratio: 16 / 9;
    height: clamp(360px, 62vh, 740px);

    /* nunca más alto que la pantalla (restando header + respiro) */
    max-height: calc(100vh - var(--hdr-h-lg, 96px) - 72px);
}

/* Soporte tanto para <video> como para <iframe> (YouTube/Vimeo) */
.brand-video__media,
.brand-video__wrap > video,
.brand-video__wrap > iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;        /* desktop: llena el cuadro */
    object-position: center;  /* centrado del encuadre */
    background:#000;          /* por si hay letterboxing */
    border: 0;
}

/* En mobile, mostrar el video “completo” sin recortes (horizontal) */
@media (max-width: 600px){
    .brand-video__wrap{
        /* que mande el ancho y el aspect-ratio; altura se ajusta sola */
        height: auto;
        border-radius: 12px;
        max-height: calc(100vh - var(--hdr-h, 88px) - 48px);
    }
    .brand-video__media,
    .brand-video__wrap > video,
    .brand-video__wrap > iframe{
        object-fit: contain;   /* evita cortes, conserva el horizontal */
        background:#000;       /* bandas prolijas si aparecen */
    }
}

/* Si el teléfono está en landscape, volvemos a llenar el cuadro */
@media (max-width: 600px) and (orientation: landscape){
    .brand-video__media,
    .brand-video__wrap > video,
    .brand-video__wrap > iframe{
        object-fit: cover;
    }
}

/* =========================================================
   DIFERENCIAL DEL MATERIAL — BODEGAS (corregido/optimizado)
   ========================================================= */

#material-diff.md-section{
  background:#fff;
  padding: clamp(36px, 6.5vw, 88px) 0;
  overflow-x: clip;
}

/* WRAP centrado full width */
#material-diff .md-wrap{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding-inline: clamp(6px, 1.5vw, 18px);
  box-sizing: border-box;
}

/* Frase principal (sigue itálica) */
#material-diff > .md-wrap > .md-sublead{
  width: 100%;
  margin: 0 auto clamp(28px, 4.5vw, 48px);
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--brand-green);
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.25;
}

/* Grilla 4 col (2x2 en responsive) */
#material-diff .md-grid{
  list-style:none;
  padding:0;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns: repeat(4, minmax(240px,1fr));
  place-content:center;
  place-items:center;
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width:1100px){
  #material-diff .md-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)); }
}
@media (max-width:640px){
  #material-diff .md-grid{
    grid-template-columns:repeat(2,1fr);
    width:min(520px,94vw);
    margin-inline:auto;
    gap: clamp(8px,3vw,12px);
  }
}

/* =========================================================
   CARD: caja fija de icono + tamaño de gráfico variable
   ========================================================= */
#material-diff .md-card{
  width:100%;
  background:#fff;
  border:0;
  border-radius:22px;
  padding: clamp(22px, 3vw, 34px);
  transition:none;

  /* Variables base */
  --md-ico-box: clamp(120px, 12.5vw, 200px);   /* alto del área del ícono (constante) */
  --md-ico-size: var(--md-ico-box);            /* tamaño del gráfico (variable) */
  --md-title-h: clamp(44px, 5.2vw, 68px);
  --md-gap-top: clamp(10px, 1.6vw, 14px);
  --md-gap-bot: clamp(10px, 1.2vw, 12px);

  display:grid !important;
  grid-template-rows:
    var(--md-ico-box)
    var(--md-gap-top)
    var(--md-title-h)
    var(--md-gap-bot)
    auto !important;

  justify-items:center;
  text-align:center;
}
#material-diff .md-card:hover{ transform:none; box-shadow:none; }

/* Área del ícono: misma altura para todas, gráfico apoyado ABAJO */
#material-diff .md-card .md-ico{
  grid-row:1/2 !important;
  width:var(--md-ico-box) !important;
  height:var(--md-ico-box) !important;
  display:grid !important;
  align-items:end !important;     /* clave: base común */
  justify-items:center !important;
  margin:0 !important;
}

/* Imagen del ícono */
#material-diff .md-card .md-ico-img{
  max-height:var(--md-ico-size);
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Solo la 1ª card: gráfico un poco más chico (si no hace falta, podés quitar esta regla) */
#material-diff .md-grid > li.md-card:first-child{
  --md-ico-size: clamp(90px, 9vw, 140px);
}

/* — TÍTULO (Inter, bold, sin itálica) — */
#material-diff .md-card .md-sublead{
  grid-row:3/4 !important;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:var(--md-title-h) !important;
  margin:0 !important;
  padding:0 !important;

  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal !important;
  font-weight: 700;
  color: var(--brand-green);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height:1.12;
}

/* — TEXTO (Inter, regular) — */
#material-diff .md-card .md-line{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal !important;
  font-weight: 400;
  color: var(--brand-green);
  margin:0 !important;
}
#material-diff .md-card .md-line--bottom{
  grid-row:5/6 !important;
  font-size: clamp(20px, 2.6vw, 28px) !important;
  line-height:1.12 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:640px){
  #material-diff .md-card{
    padding: clamp(14px,3.6vw,18px);
    border-radius:18px;

    --md-ico-box: clamp(100px, 34vw, 150px);  /* caja un poco más baja en mobile */
    --md-title-h: clamp(28px, 6vw, 40px);
    --md-gap-top: clamp(8px, 2.2vw, 12px);
    --md-gap-bot: clamp(8px, 2vw, 10px);
  }
  #material-diff .md-grid{
    width:min(520px,92vw);
    padding-inline:10px;
    gap: clamp(10px,3.6vw,14px);
    justify-items:center;
  }

  /* el 1º ícono se mantiene un toque menor en mobile */
  #material-diff .md-grid > li.md-card:first-child{
    --md-ico-size: clamp(80px, 26vw, 120px);
  }
}

/* ===== BODEGAS — Certificados: tipografía y ajuste mobile ===== */

/* Título "Certificados" (misma fuente que las otras cards) */
#material-diff .md-grid > li.md-card:last-child .md-sublead{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Números de expediente: Inter, sin itálica, legibles y parejos */
#material-diff .md-grid > li.md-card:last-child .md-lines--cert .md-line{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 600;                 /* 400 si lo preferís más fino */
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.2;
  margin: 0 !important;
}

/* Separación vertical entre los dos números */
#material-diff .md-grid > li.md-card:last-child .md-lines--cert{
  display: grid;
  row-gap: .25em;
  justify-items: center;
}

/* --- Evitar superposición del logo anmat con el texto --- */
/* La 4.ª card: mantené misma “caja” de ícono, pero achicá sólo el gráfico */
#material-diff .md-card{
  --md-ico-box: clamp(120px, 12.5vw, 200px);
  --md-ico-size: var(--md-ico-box);
}
#material-diff .md-card .md-ico{
  width: var(--md-ico-box) !important;
  height: var(--md-ico-box) !important;
  display: grid !important;
  align-items: end !important;
  justify-items: center !important;
}
#material-diff .md-card .md-ico-img{
  max-height: var(--md-ico-size);
  width: auto; height: auto; object-fit: contain; display:block;
}

/* SOLO la card de Certificados (última): logo algo menor para dejar aire */
#material-diff .md-grid > li.md-card:last-child{
  --md-ico-size: clamp(90px, 10vw, 140px);
}

/* Mobile: logo un poco más chico y números con tamaño cómodo */
@media (max-width: 640px){
  #material-diff .md-card{ --md-ico-box: clamp(100px, 34vw, 150px); }
  #material-diff .md-grid > li.md-card:last-child{ --md-ico-size: clamp(80px, 22vw, 110px); }
  #material-diff .md-grid > li.md-card:last-child .md-lines--cert .md-line{
    font-size: clamp(15px, 4.1vw, 18px);
    white-space: nowrap;   /* evita cortes raros de los números */
  }
  #material-diff .md-grid > li.md-card:last-child .md-lines--cert{
    row-gap: .2em;
  }
}



/* =========================================================
   BODEGAS — Certificados (card 4): ajuste tipográfico en mobile
   ========================================================= */
@media (max-width: 640px){
  /* columna de números */
  #material-diff .md-card .md-lines--cert{
    row-gap: .15em;               /* un poco más cerrados */
  }
  #material-diff .md-card .md-lines--cert .md-line{
    /* Bodegas usa Inter regular */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;

    /* más chico en mobile y en UNA sola línea */
    font-size: clamp(13px, 3.9vw, 16px);
    line-height: 1.15;
    white-space: nowrap;        /* evita corte por el guion */
    overflow-wrap: normal;
    word-break: keep-all;

    /* números parejos si la fuente lo soporta */
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    text-align: center;
  }
}

/* Aún más chico en pantallas muy angostas */
@media (max-width: 360px){
  #material-diff .md-card .md-lines--cert .md-line{
    font-size: 12.5px;
  }
}


/* Solo el 1.er ítem de Material Diferencial (Reducción de agua) */
#material-diff .md-grid > li.md-card:first-child{
  /* elegí el tamaño que prefieras */
  --md-ico-h: clamp(90px, 9vw, 140px); /* antes: clamp(120px, 12.5vw, 200px) */
}

/* (opcional) un poco más chico aún en mobile */
@media (max-width: 640px){
  #material-diff .md-grid > li.md-card:first-child{
    --md-ico-h: clamp(80px, 26vw, 120px);
  }
}



/* =========================
   PAIN POINTS – Bodegas (mismo criterio de tipografía)
   ========================= */

.pps-section{
    background:#fff;
    padding: clamp(16px, 3.5vw, 42px) 0;
}

/* full-bleed */
.pps-wrap{
    position:relative;
    width:100vw; max-width:100vw;
    left:50%; transform:translateX(-50%);
    margin:0; padding-inline: clamp(6px, 1.5vw, 18px);
    box-sizing:border-box;
}

/* 4 cols → 2 → 1 */
.pps-grid{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows:1fr;
    align-items:stretch;
    gap: clamp(16px, 2.6vw, 28px);
}
@media (max-width:1100px){ .pps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pps-grid{ grid-template-columns:1fr; } }

/* Cards: centrado */
.pps-card{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    min-height: clamp(110px, 18vh, 170px);
    height:100%;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
    transition:none;
}
.pps-card:hover{
    transform:none;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* Fondo verde sólido */
.pps-card--img{
    background: var(--brand-green, #3d5b58) !important;
    background-image:none !important;
}
.pps-card--img::before{ display:none !important; }

/* Contenido (Inter normal, sin itálica) */
.pps-card__inner{
    width:100%; height:100%;
    display:flex !important; align-items:center !important; justify-content:center !important;
    text-align:center;
    padding-block: clamp(10px, 1.8vw, 16px);
    padding-inline: clamp(14px, 2.2vw, 22px);
    color:#fff !important;
}

/* Forzamos la fuente y estilo dentro de las cards */
.pps-card__inner p,
.pps-card__title,
.pps-card__text,
.md-sublead--white{
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;     /* más delicado */
    color:#fff !important;
    margin:0 !important;
    text-align:center !important;
    letter-spacing:.01em;
    line-height:1.2;
    font-size: clamp(18px, 2.4vw, 26px); /* tamaño cómodo por defecto */
}

/* MOBILE: más compactas */
@media (max-width:560px){
    .pps-grid{ gap: clamp(8px, 3.5vw, 14px); }
    .pps-card{ min-height: clamp(90px, 14vh, 130px); border-radius:14px; }
    .pps-card__inner{
        padding-block: clamp(8px, 3.8vw, 12px);
        padding-inline: clamp(10px, 3.6vw, 14px);
    }
    .pps-card__inner p,
    .pps-card__title,
    .pps-card__text,
    .md-sublead--white{
        font-size: clamp(16px, 4.8vw, 20px);
        line-height:1.22;
    }
}

/* Título/leyenda centrado con aire */
#pain-points .pps-lead{
    max-width: min(1100px, 92vw);
    margin: 0 auto clamp(16px, 3vw, 28px);
    text-align: center;
}

/* Spacing inferior */
#pain-points.pps-section{ padding-bottom: clamp(6px, 1.2vw, 12px) !important; }
#pain-points .pps-wrap{ padding-bottom: 0 !important; }
#pain-points .pps-grid{ margin-bottom: 0 !important; }
#pain-points .pps-card{ margin-bottom: 0 !important; }

/* BODEGAS — Forzar Inter normal SOLO dentro de las cards */
#pain-points .pps-grid .pps-card .pps-card__inner > .md-sublead,
#pain-points .pps-grid .pps-card .pps-card__inner > .md-sublead--white,
#pain-points .pps-grid .pps-card .pps-card__inner > p,
#pain-points .pps-grid .pps-card .pps-card__inner .pps-card__title,
#pain-points .pps-grid .pps-card .pps-card__inner .pps-card__text{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-style: normal !important;     /* sin itálica */
    font-weight: 400 !important;       /* delicado */
    letter-spacing: .01em;
    line-height: 1.2;
    color: #fff !important;
    text-shadow: none !important;      /* anula el glow de .md-sublead--white */
    margin: 0 !important;
    text-align: center !important;
}

/* Tamaños como Catering */
#pain-points .pps-grid .pps-card .pps-card__inner .pps-card__title{
    font-size: clamp(22px, 2.6vw, 34px);
}
@media (max-width:560px){
    #pain-points .pps-grid .pps-card .pps-card__inner .pps-card__title{
        font-size: clamp(16px, 5.2vw, 22px);
        line-height: 1.22;
    }
}



/* ===== BODEGAS — Pain Points con tipografía serif del sitio (Catering) ===== */
#pain-points .pps-grid .pps-card .pps-card__inner .md-sublead,
#pain-points .pps-grid .pps-card .pps-card__inner .md-sublead--white,
#pain-points .pps-grid .pps-card .pps-card__inner p,
#pain-points .pps-grid .pps-card .pps-card__inner .pps-card__title,
#pain-points .pps-grid .pps-card .pps-card__inner .pps-card__text{
    font-family: "Cormorant Garamond", Georgia, serif !important; /* misma que Catering */
    font-style: normal !important;      /* sin itálica, como en tu 2ª imagen */
    font-weight: 400 !important;        /* más delicado */
    text-shadow: none !important;       /* quita el glow blanco que trae b2b.css */
    letter-spacing: .01em;
    line-height: 1.2;
    color: #fff !important;
}

/* BODEGAS — ajustar tamaño SOLO en las cards del pain points */
.sector-bodegas .pps-grid .pps-card .pps-card__inner .md-sublead,
.sector-bodegas .pps-grid .pps-card .pps-card__inner .md-sublead--white,
.sector-bodegas .pps-grid .pps-card .pps-card__inner p,
.sector-bodegas .pps-grid .pps-card .pps-card__inner .pps-card__title,
.sector-bodegas .pps-grid .pps-card .pps-card__inner .pps-card__text{
    font-size: clamp(25px, 2.6vw, 34px) !important;  /* ↓ tamaño solo en Bodegas */
    line-height: 1.18;
}

/* Opcional: bajar un toque la altura mínima solo en Bodegas */
.sector-bodegas .pps-card{
    min-height: clamp(100px, 16vh, 160px);
}

@media (max-width:560px){
    .sector-bodegas .pps-grid .pps-card .pps-card__inner .md-sublead,
    .sector-bodegas .pps-grid .pps-card .pps-card__inner .md-sublead--white,
    .sector-bodegas .pps-grid .pps-card .pps-card__inner p,
    .sector-bodegas .pps-grid .pps-card .pps-card__inner .pps-card__title,
    .sector-bodegas .pps-grid .pps-card .pps-card__inner .pps-card__text{
        font-size: clamp(14px, 4.4vw, 18px) !important;
        line-height: 1.2;
    }
}






/* =========================
   BODEGAS — carrusel estable (1 item en mobile)
   ========================= */

/* Fondo blanco compacto */
#bodegas,
#bodegas .section{
    background:#fff!important;
    box-shadow:none!important;
    padding-top:clamp(20px,3vw,40px);
    padding-bottom:clamp(20px,3vw,40px);
}

/* Contenedor del heading con líneas laterales */
#bodegas .sec-heading{
    display:flex; align-items:center; justify-content:center;
    gap:clamp(14px,3vw,40px);
    width:min(1200px,94vw);
    margin:0 auto clamp(8px,2vw,20px);
    position:relative; text-align:center;
}
#bodegas .sec-heading::before,
#bodegas .sec-heading::after{
    content:""; height:2px; width:min(36vw,320px);
    background:#d8cfb6; opacity:.95;
}

/* Título */
#bodegas .sec-title{
    font-family:var(--font-title) !important; /* Petemoss */
    font-weight:400 !important;
    color:var(--brand-green);
    font-size:clamp(64px,9vw,160px) !important;
    line-height:1.04; letter-spacing:-.01em;
    margin:0; white-space:nowrap;
}

/* Leyenda */
#bodegas .sub-lead{
    width:min(1200px,94vw);
    margin:0 auto clamp(4px,.8vw,10px);
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400;
    color:var(--brand-green);
    font-size:clamp(26px,3.2vw,46px) !important;
    line-height:1.12; text-align:center;
    white-space:nowrap;
}
@media (max-width:1000px){
    #bodegas .sub-lead{ white-space:normal; line-height:1.25; }
}

/* Carrusel */
#bodegas .catering-carousel{
    width:min(1600px,100vw);
    position:relative;
    background:#fff;
    margin:clamp(8px,1vw,12px) auto 0;
}
#bodegas .cat-viewport{
    padding-block:clamp(4px,.8vw,8px);
    padding-inline:clamp(6px,1vw,12px);
    overflow:hidden; box-sizing:border-box;
    min-height:clamp(340px,38vw,580px);
}
#bodegas .cat-track{
    --gap:clamp(4px,.9vw,10px);
    list-style:none; margin:0; padding:0;
    display:grid; grid-auto-flow:column;
    align-items:center; justify-items:center;
    gap:var(--gap);
    grid-auto-columns:calc((100% - var(--gap) * 2) / 3);
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

/* Slide */
#bodegas .cat-card{ text-align:center; background:#fff; padding:clamp(2px,.6vw,8px); width:100%; }
#bodegas .cat-card figure{ margin:0; display:grid; justify-items:center; width:100%; }
#bodegas .cat-card img{
    display:block; margin:0 auto; width:auto;
    height:clamp(340px,38vw,580px);
    object-fit:contain;
    transition:transform .3s ease;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.08));
    content-visibility:auto;
    contain-intrinsic-size:580px 580px;
}
#bodegas .cat-card figcaption{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400;
    font-size:clamp(24px,2.6vw,38px);
    color:var(--brand-green);
    line-height:1.12;
    margin-top:clamp(0px,.2vw,4px);
}

/* Flechas */
#bodegas .cat-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; z-index:8;
    width:54px; height:54px; display:flex; align-items:center; justify-content:center;
    color:var(--brand-green);
}
#bodegas .cat-btn::before{
    content:""; display:block; width:20px; height:20px;
    border:solid currentColor; border-width:0 5px 5px 0;
}
#bodegas .cat-prev{ left:calc(env(safe-area-inset-left,0px) + 6px); }
#bodegas .cat-prev::before{ transform:rotate(135deg); }
#bodegas .cat-next{ right:calc(env(safe-area-inset-right,0px) + 6px); }
#bodegas .cat-next::before{ transform:rotate(-45deg); }

/* Tablet: 2 por vista */
@media (max-width:980px){
    #bodegas .cat-track{ grid-auto-columns:calc((100% - var(--gap)) / 2); }
}

/* Mobile: 1 por vista */
@media (max-width:640px){
    #bodegas .catering-carousel .cat-viewport{ padding:0!important; }
    #bodegas .catering-carousel .cat-viewport .cat-track{
        display:flex!important; flex-wrap:nowrap!important;
        gap:0!important; grid-auto-columns:unset!important;
        justify-content:flex-start!important;
    }
    #bodegas .catering-carousel .cat-viewport .cat-track > li{
        flex:0 0 100%!important; width:100%!important; min-width:100%!important;
    }
    #bodegas .cat-card{ padding:0!important; }
    #bodegas .cat-card img{ height:clamp(250px,60vw,410px); margin-inline:auto; }

    #bodegas .cat-prev{ left:calc(env(safe-area-inset-left,0px) + 2px)!important; }
    #bodegas .cat-next{ right:calc(env(safe-area-inset-right,0px) + 12px)!important; }
}

/* ===== Frase con la misma tipografía que los rótulos ===== */
#bodegas .sub-lead--cormorant{
    font-family:"Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--brand-green);
    font-size: clamp(26px,3.2vw,46px);
    line-height: 1.25;
    text-align: center;
    width:min(1200px,94vw);
    margin: 0 auto clamp(14px,2.2vw,24px);
    white-space: normal;
}

/* ===== Grid fijo de 4 productos ===== */
#bodegas .bodega-grid{
    width:min(1600px,100vw);
    margin: 0 auto;
    background:#fff;
}
#bodegas .bodega-track{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 28px);
    align-items:start;
    justify-items:center;
}
@media (max-width: 1100px){
    #bodegas .bodega-track{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
    #bodegas .bodega-track{ grid-template-columns: 1fr; }
}

/* Tarjeta */
#bodegas .bodega-card{
    text-align:center; background:#fff;
    padding: clamp(2px, .6vw, 8px);
    width:100%;
}
#bodegas .bodega-card figure{
    margin:0; display:grid; justify-items:center; width:100%;
}

/* Imagen */
#bodegas .bodega-card img{
    display:block; margin:0 auto; width:auto;
    height:clamp(220px, 28vw, 360px);
    object-fit:contain;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.08));
}

/* Rótulo (misma estética) */
#bodegas .bodega-card figcaption{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(20px,2.2vw,28px);
    color: var(--brand-green);
    line-height: 1.22;
    margin-top: .35em;
}


/* =========================
   BODEGAS — GALERÍA 3 IMÁGENES FULL-BLEED
   ========================= */
.bodega-gallery{ position:relative; isolation:isolate; margin:0; padding:0; overflow:visible; }
.bodega-gallery,
.bodega-gallery .section{ background: transparent !important; }
.bodega-gallery::before{
    content:""; position:absolute; z-index:0; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    background: linear-gradient(to bottom,#fff 0%,#fff 60%, var(--legend-green) 60%, var(--legend-green) 100%);
}
.bodega-gallery .gallery-grid{
    position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    left:50%; transform:translateX(-50%); width:100vw; max-width:100vw; margin:0;
}
.bodega-gallery .gallery-item{ position:relative; overflow:hidden; background:#fff; padding:1mm; }
.bodega-gallery .gallery-item img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 45%; }
@media (max-width:1024px){
    .bodega-gallery .gallery-grid{ grid-template-columns:1fr; }
    .bodega-gallery .gallery-item{ padding:2mm; }
    .bodega-gallery .gallery-item img{ object-position:center 40%; }
}

    /* =========================
       BODEGAS — LEYENDA + ICONOS (full-bleed)
       ========================= */
    #leyenda-bodegas.legend-section{
        position:relative; isolation:isolate;
        padding: clamp(.7rem, 1.1vw, 1.3rem) 0 clamp(2.3rem, 3.2vw, 4rem);
        background: var(--legend-green); overflow:hidden;
    }
    #leyenda-bodegas.legend-section::before{
        content:""; position:absolute; inset:0; background: var(--legend-green); z-index:0;
    }

    /* full-bleed para abrir íconos a los bordes */
    #leyenda-bodegas .legend-wrap{
        position:relative; z-index:2; width:100vw;
        margin-left:50%; transform:translateX(-50%);
        padding-inline: clamp(6px, 1vw, 16px);
    }

    /* Leyenda principal — Petemoss, sin cursiva (forzamos contra b2b.css) */
    #leyenda-bodegas .legend-text{
        color:#fff !important;
        text-align:center;
        margin-top: clamp(.2rem, .5vw, .6rem);
        margin-bottom: clamp(2.4rem, 3.6vw, 3.6rem);
        font-style: normal !important;
        font-family: var(--font-title);
        font-weight: 400;
        font-size: clamp(1.2rem, 2.25vw, 2rem);
        line-height:1.28;
        max-width:1120px; margin-inline:auto;
    }
    #leyenda-bodegas .legend-text .legend-line{ display:block; color:#fff !important; }
    @media (min-width:1024px){ #leyenda-bodegas .legend-text .legend-line{ white-space:nowrap; } }
    @media (max-width:1023.98px){
        #leyenda-bodegas .legend-text{ max-width:46ch; }
        #leyenda-bodegas .legend-text .legend-line{ display:inline; }
        #leyenda-bodegas .legend-text .legend-line + .legend-line::before{ content:" "; }
    }

    /* Iconos + textos — Oswald bold en blanco */
    #leyenda-bodegas .legend-trust{
        display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-end;
        gap: clamp(.4rem, 1vw, 1rem); width:100%;
        margin: 0 auto clamp(1.6rem, 2.2vw, 2.2rem);
        padding-inline: clamp(4px, .8vw, 14px); padding-top: clamp(6px, 1.2vw, 16px);
    }
    #leyenda-bodegas .trust-item{
        flex:0 0 auto; display:grid; grid-auto-rows:min-content; justify-items:center;
        gap: clamp(10px, 1.2vw, 14px); text-align:center; color:#fff; z-index:2;
    }
    #leyenda-bodegas .trust-item img{
        width: clamp(70px, 8vw, 110px); height:auto;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,.15)); transition: transform .25s ease;
    }
    #leyenda-bodegas .trust-item span{
        font-family:"Oswald", var(--font-ui), sans-serif !important;
        font-weight:700 !important;
        font-style:normal !important;               /* ← por si alguna regla la pone itálica */
        text-transform:uppercase; letter-spacing:.10em;
        font-size: clamp(1rem, 1.7vw, 1.35rem); color:#fff; text-align:center;
    }
    @media (hover:hover){ #leyenda-bodegas .trust-item:hover img{ transform: translateY(-4px) scale(1.03); } }
    @media (max-width:900px){
        #leyenda-bodegas .legend-wrap{ padding-inline: clamp(10px, 3vw, 24px); }
        #leyenda-bodegas .legend-trust{ flex-wrap:wrap; justify-content:center; gap: clamp(1rem, 3vw, 2rem); }
        #leyenda-bodegas .trust-item{ flex:1 1 46%; }
    }
    @media (max-width:560px){
        #leyenda-bodegas .legend-wrap{ padding-inline: clamp(14px, 4vw, 28px); }
        #leyenda-bodegas .trust-item{ flex:1 1 100%; }
    }

    #leyenda-bodegas .trust-item span,
    #leyenda-bodegas .legend-strap > span{
        font-family: var(--font-ui) !important;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.10em;
    }



    /* Strap final — Oswald en mayúsculas (sin cursiva) */
    #leyenda-bodegas .legend-strap{
        align-items:center;
        width:100%;
        max-width:var(--legend-max);
        margin:0 auto;
        gap: clamp(14px, 2.4vw, 28px);
        padding-inline:0;
        position:relative;
        z-index:2;
        display:flex;               /* <- estaba 'ddisplay' */
    }
    #leyenda-bodegas .legend-strap::before,
    #leyenda-bodegas .legend-strap::after{
        content:""; flex:1 1 0; height:2px; background:#d8cfb6; opacity:.95;
    }
    #leyenda-bodegas .legend-strap > span{
        font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
        color:#d8cfb6 !important;
        font-family:"Oswald", var(--font-ui), sans-serif;
        font-weight:700 !important;
        text-transform:uppercase;
        letter-spacing:.14em;
        line-height:1;
    }

    /* Animaciones (reveal) */
    #leyenda-bodegas .rv{ opacity:0; transform: translateY(16px); transition: opacity .52s ease, transform .52s ease; will-change: opacity, transform; }
    #leyenda-bodegas .rv.is-in{ opacity:1; transform:none; }
    #leyenda-bodegas .legend-text .legend-line{ opacity:0; transform: translateY(.45em); transition: opacity .5s ease-out, transform .5s ease-out; }
    #leyenda-bodegas .legend-text.is-in .legend-line{ opacity:1; transform:none; }
    #leyenda-bodegas .legend-text .legend-line:nth-child(1){ transition-delay:0ms; }
    #leyenda-bodegas .legend-text .legend-line:nth-child(2){ transition-delay:140ms; }
    #leyenda-bodegas .legend-trust .trust-item:nth-child(1){ transition-delay:0ms; }
    #leyenda-bodegas .legend-trust .trust-item:nth-child(2){ transition-delay:120ms; }
    #leyenda-bodegas .legend-trust .trust-item:nth-child(3){ transition-delay:240ms; }
    #leyenda-bodegas .legend-trust .trust-item:nth-child(4){ transition-delay:360ms; }
    #leyenda-bodegas .legend-strap{ transition-delay:520ms; }
    @media (prefers-reduced-motion: reduce){
        #leyenda-bodegas .rv, #leyenda-bodegas .legend-text .legend-line{
            transition:none !important; opacity:1 !important; transform:none !important;
        }
    }

/* =========================
   FIX BODEGAS — Leyenda + Strap en Cormorant Italic (como Catering)
   (DEJAR ESTE BLOQUE AL FINAL DEL ARCHIVO)
   ========================= */

/* Frase grande en cursiva */
#leyenda-bodegas .legend-text{
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
}

/* Strap “VAJILLA SUSTENTABLE DE UN ÚNICO USO” en cursiva */
#leyenda-bodegas .legend-strap > span{
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    text-transform: none !important;     /* como en Catering */
    letter-spacing: .02em !important;
    color: #d8cfb6 !important;
}

/* === Strap con tracking amplio (estilo referencia) === */
#leyenda-bodegas .legend-strap > span{
    /* seguimos con Cormorant italic (tu elección actual) */
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700 !important;

    /* CLAVES PARA EL ASPECTO SEPARADO */
    text-transform: uppercase !important;                  /* mismas mayúsculas de la ref */
    letter-spacing: clamp(.12em, .22vw, .28em) !important; /* tracking amplio y responsivo */
    font-variant-ligatures: none !important;               /* sin ligaduras que “junten” letras */
    font-kerning: none !important;                         /* evita acercamiento automático */
    -webkit-font-smoothing: antialiased;                   /* render prolijo */

    /* opcional: asegurá que quede en una sola línea */
    white-space: nowrap;
}

/* un poco más de aire entre líneas y texto si lo querés exactamente igual */
#leyenda-bodegas .legend-strap{
    gap: clamp(18px, 2.8vw, 34px); /* subí el gap si las líneas quedan muy pegadas */
}




/* =========================
   CONTACTO — Bodegas (scope #contacto-bodegas)
   ========================= */
#contacto-bodegas.contact-section{
    background:#fff;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
}
#contacto-bodegas .contact-wrap{
    max-width: var(--contact-max);
    margin:0 auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

/* Título */
#contacto-bodegas .contact-strap{
    display:flex; align-items:center; gap:clamp(14px, 2.4vw, 28px);
    width:100%; max-width:var(--contact-max);
    margin:0 auto clamp(1.6rem, 3.6vw, 2.6rem);
}
#contacto-bodegas .contact-strap::before,
#contacto-bodegas .contact-strap::after{
    content:""; flex:1 1 0; height:2px; background:#d8cfb6;
}
#contacto-bodegas .contact-strap > span{
    font-family: var(--font-title);
    font-weight:400; font-style:normal;
    color: var(--brand-green);
    font-size: clamp(64px, 9vw, 160px);
    line-height:1.04; letter-spacing:-.01em; white-space:nowrap; text-align:center;
}
@media (max-width:600px){
    #contacto-bodegas .contact-strap{ gap:10px; }
    #contacto-bodegas .contact-strap > span{
        font-size: clamp(28px, 10vw, 44px);
        line-height:1.12; white-space:normal; text-align:center;
    }
}

/* Formulario */
#contacto-bodegas .contact-form{ width:100%; }
#contacto-bodegas .form-grid{
    display:grid; gap: clamp(1rem, 2.6vw, 1.6rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#contacto-bodegas .form-field--full{ grid-column: 1 / -1; }

/* Labels */
#contacto-bodegas .form-field label{
    display:block; margin-bottom:.55rem;
    font: 600 clamp(1.15rem, 1.6vw, 1.35rem)/1 var(--font-ui);
    letter-spacing:.01em; color:#36524f;
}

/* Inputs / Textarea */
#contacto-bodegas .form-field input,
#contacto-bodegas .form-field textarea{
    width:100%;
    border:1.5px solid #cfd6d3;
    background:#f6f8f7;
    border-radius: 18px;
    padding: clamp(1.05rem, 1.6vw, 1.25rem) clamp(1.1rem, 1.8vw, 1.4rem);
    font: 400 clamp(1.15rem, 1.6vw, 1.25rem)/1.38 var(--font-body);
    outline:none; transition: box-shadow .2s, border-color .2s;
}
#contacto-bodegas .form-field input::placeholder,
#contacto-bodegas .form-field textarea::placeholder{
    color:#8ea19c;
    font: 400 clamp(1.1rem, 1.7vw, 1.25rem)/1.38 var(--font-body);
}
#contacto-bodegas .form-field input:focus,
#contacto-bodegas .form-field textarea:focus{
    border-color:#aebcb7; box-shadow: 0 0 0 3px rgba(61,91,88,.08);
}

/* Botón */
#contacto-bodegas .contact-actions{
    display:flex; justify-content:center;
    margin-top: clamp(1.4rem, 3vw, 2rem);
}
#contacto-bodegas .btn-enviar{
    --outer:#8aa09d;
    display:inline-block;
    text-transform:uppercase; letter-spacing:.18em;
    font: 900 clamp(1rem, 1.6vw, 1.15rem)/1 var(--font-ui);
    color:#d1caaf;
    min-width: clamp(260px, 36vw, 440px);
    padding: clamp(.95rem, 1.6vw, 1.15rem) clamp(1.6rem, 4vw, 2.4rem);
    border-radius:20px;
    border:3px solid var(--outer);
    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 2px 0 var(--outer);
}
#contacto-bodegas .btn-enviar:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#contacto-bodegas .btn-enviar:active{ transform:translateY(0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 1px 0 var(--outer); }

/* Responsive */
@media (max-width:860px){
    #contacto-bodegas .form-grid{ grid-template-columns:1fr; }
}

/* Errores */
#contacto-bodegas .is-invalid{
    border-color:#d55; box-shadow:0 0 0 3px rgba(220,85,85,.12);
}
#contacto-bodegas .error-msg{
    display:block; margin-top:.35rem;
    color:#b54040; font:600 0.95rem/1.2 var(--font-ui, system-ui);
}


/* Botón Push-Up */
.pushup{
    position:fixed;
    right:clamp(14px, 2.4vw, 24px);
    bottom:clamp(16px, 2.8vw, 28px);
    z-index:1200;
    width:56px; height:56px;
    border-radius:999px;
    border:2px solid #e8e1d0;                  /* beige */
    background: linear-gradient(165deg, #3d5b58, #2f4a47); /* verdes marca */
    color:#e8e1d0;
    box-shadow:0 8px 22px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.06);
    display:grid; place-items:center;
    cursor:pointer;
    opacity:0; transform:translateY(10px) scale(.95);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, filter .15s;
}
.pushup:hover{ filter:brightness(1.06); }
.pushup:active{ transform:translateY(12px) scale(.94); }
.pushup.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Un poquito más chico en mobile angosto */
@media (max-width:480px){
    .pushup{ width:52px; height:52px; }
}

/* Respeta usuarios con reducción de animaciones */
@media (prefers-reduced-motion: reduce){
    .pushup{ transition:none; }
}

/* Scroll suave nativo cuando se usa un <a>, y de paso para el sitio */
html{ scroll-behavior:smooth; }
/* Flecha del botón push-up en color beige del sitio */
.pushup{ color: var(--beige, #e8e1d0); }     /* define el color del ícono */
.pushup svg{ color: inherit; opacity: 1; }   /* asegura que el SVG tome ese color */


@import url('https://fonts.googleapis.com/css2?family=Petemoss&family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Montserrat:wght@600;700&display=swap');

:root{
    /* color de texto pedido en toda la web */
    --brand-green: #3d5b58;

    /* familias tipográficas */
    --font-title: "Petemoss", cursive;                    /* TÍTULOS (¿Qué es…, Catering, Contacto) */
    --font-legend: "Cormorant Garamond", serif;           /* Leyendas/explicativos en cursiva */
    --font-ui: "Montserrat", system-ui, -apple-system,    /* Botones (Semibold) */
    Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* color de texto global (no altera fondos ni bordes) */
html, body { color: var(--brand-green); }

/* -------------------------------------------------------
   TÍTULOS (todas las variantes de títulos de sección)
   ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.sec-title,
.sec-heading .sec-title,
#catering .sec-heading .sec-title,
.contact-strap > span {
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
    font-style: normal !important; /* Petemoss no necesita cursiva */
    color: var(--brand-green) !important;
}

/* -------------------------------------------------------
   LEYENDAS / TEXTOS EXPLICATIVOS EN CURSIVA
   (todos con Cormorant Garamond italic)
   ------------------------------------------------------- */
.about-b2b .about-lead,             /* leyenda de “¿Qué es Sustentime?” */
#catering .sub-lead,                /* “Sugerencias de uso…” */
#catering .cat-card figcaption,     /* títulos de cada producto del carrusel */
.legend-text,                       /* frase después del mosaico de 3 imágenes */
.legend-strap span,                 /* “factores de confianza” (sustentable…, UV) */
.contact-section .form-field label,
.contact-section .form-field input,
.contact-section .form-field textarea,
.contact-section .form-field input::placeholder,
.contact-section .form-field textarea::placeholder,
.footer-hero *,
.footer-quote,
footer, footer a, footer p, footer li {
    font-family: var(--font-legend) !important;
    font-style: italic !important;
    color: var(--brand-green);
}

/* Si prefieres mantener MAYÚSCULAS de “factores de confianza”,
   deja esta línea; si no, comenta text-transform */
.legend-strap span{
    text-transform: none !important;
    font-weight: 500 !important;
}
/* ====== BODEGAS — BOTONES = MISMO LOOK QUE CATERING =================== */
/* Tipografía base de botones (como Catering) */
body.landing-bodegas .btn,
body.landing-bodegas .btn.btn--cta,
body.landing-bodegas .split-card__btn,
body.landing-bodegas .btn-enviar{
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 600 !important;         /* Semibold */
    letter-spacing: .02em !important;
    font-style: normal !important;
}

/* === HERO CTA (idéntico) ============================================== */
.bodegas-hero .hero-cta--out a{
    display:inline-block;
    padding:14px 26px !important;
    border-radius:14px !important;

    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%) !important;
    border:2px solid #c6b79d !important;
    color:#e9e3cf !important;

    /* sombra exacta de Catering */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.25) !important;

    /* tipografía del CTA de Catering */
    font-family: "Merriweather", Georgia, serif !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.14em !important;
    line-height:1 !important;
    white-space:nowrap !important;

    /* reset de “doble borde/anillos” que ves en Bodegas */
    outline: none !important;
    box-sizing: border-box;
    filter:none !important;
}
.bodegas-hero .hero-cta--out a:hover{
    filter:brightness(1.07) !important;
    transform:translateY(-1px) !important;
}
/* si algún focus global agrega contornos, los anulamos aquí */
.bodegas-hero .hero-cta--out a:focus{
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.25) !important;
}

/* === BOTÓN ENVIAR (idéntico) ========================================== */
#contacto-bodegas .btn-enviar{
    --outer:#8aa09d;
    display:inline-block;
    min-width: clamp(260px, 36vw, 440px);
    padding: clamp(.95rem, 1.6vw, 1.15rem) clamp(1.6rem, 4vw, 2.4rem);
    border-radius:20px;

    text-transform:uppercase;
    letter-spacing: .01em !important;  
    font: 500 clamp(1rem, 1.6vw, 1.15rem)/1 "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    color:#d1caaf;

    border:3px solid var(--outer);
    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 2px 0 var(--outer);

    /* reset de cualquier sombra/contorno heredado */
    outline: none !important;
}
#contacto-bodegas .btn-enviar:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#contacto-bodegas .btn-enviar:active{ transform:translateY(0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 1px 0 var(--outer); }

/* === Mobile: mismos ajustes de Catering ================================ */
@media (max-width:600px){
    .bodegas-hero .hero-cta--out{ bottom:64px; }
    .bodegas-hero .hero-cta--out a{ padding:12px 18px; font-size:14px; max-width:92vw; }
}


/* === FIX HERO CTA — Tipografía correcta (Montserrat Bold beige) === */
.bodegas-hero .hero-cta--out a {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;               /* Bold */
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    color: #d1caaf !important;                 /* beige texto */
    border-color: #c6b79d !important;          /* beige borde */
    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.25) !important;
}

/* Hover idéntico */
.bodegas-hero .hero-cta--out a:hover {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}

/* === FIX HERO CTA — Tipografía Montserrat sin tanto espaciado === */
.bodegas-hero .hero-cta--out a {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;   /* <-- ajustado: más compacto */
    line-height: 1 !important;
    white-space: nowrap !important;

    color: #d1caaf !important;           /* beige texto */
    border-color: #c6b79d !important;    /* beige borde */
    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.25) !important;

    padding: 14px 26px;
    border-radius: 14px;
    transition: transform .15s ease, filter .15s ease;
}

.bodegas-hero .hero-cta--out a:hover {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}


/* ===== SOLO MOBILE: corrige línea blanca en el hero ===== */
@media (max-width: 980px) {
  html, body {
    background-color: #3d5b58; /* mismo color del header/hero */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* Hero ocupa exactamente el viewport en mobile */
  #hero, .hero, .bodegas-hero, .esg-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;   /* fallback */
    height: 100dvh;      /* fix iOS/Android */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3d5b58; /* evita flash blanco mientras carga */
  }

  #hero img, #hero video,
  .hero img, .hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* quita gaps por subpíxeles */
    background-color: #3d5b58;
  }

  /* Si la sección siguiente es blanca y se nota 1px, la solapamos */
  .next-section, .despues-del-hero {
    margin-top: -1px;
  }
}