/* === ESG: igual a Catering, aislado por clase landing-esg / esg-hero === */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');

:root{
    --brand-green:#3d5b58;
    --brand-green-dk:#2f4745;
    --font-title:"Petemoss", serif;
    --font-body:"Crimson Text", Georgia, serif;
    --font-ui:"Crimson Text", Georgia, serif;
    --beige:#d1caaf;
    --container-w:1200px;
    --hdr-pad-x:20px;
}

html, body{ color:var(--brand-green); }

.landing-esg h1,.landing-esg h2,.landing-esg h3,.landing-esg h4,.landing-esg h5,.landing-esg h6,
.landing-esg .sec-title,
.landing-esg .sec-heading .sec-title,
.landing-esg .sub-lead,
.landing-esg .legend-text,
.landing-esg .contact-strap > span{
    font-family:var(--font-title) !important;
    font-weight:400 !important;
    font-style:normal !important;
    color:var(--brand-green);
}


/* Títulos caligráficos */
@import url('https://fonts.googleapis.com/css2?family=Petemoss&display=swap');

/* Serif del cuerpo / frases */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* Oswald para leyenda con íconos (si la usás) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');





/* =========================
   HERO B2B (base / igual a Catering)
   ========================= */

/* Tipografía del CTA del hero */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');

.hero{
  position: relative;
  min-height: 92vh;               /* altura visual base */
  padding-bottom: 12vh;            /* aire para el CTA */
  background: transparent;
}
@media (min-width: 992px){
  .hero{
    min-height: 94vh;
    padding-bottom: 14vh;
  }
}

.hero-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--hdr-pad-x);
  position: relative;
  z-index: 1;
}

/* Fondo slideshow */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  display: block;                 /* evita gaps inline */
  font-size: 0;                   /* oculta alt/placeholder */
  line-height: 0;
  color: transparent;
}
.hero-bg > img.active{ opacity: 1; }

/* Anti-ícono roto: si por un instante el img no tiene src */
.hero-bg > img:not([src]),
.hero-bg > img[src=""]{
  display: none !important;
}

/* Cartel (leyenda) — oculto pero presente para no romper el JS */
.hero-card.is-hidden{
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

/* =========================
   CTA del HERO — ESG
   Montserrat bold, SIN letter-spacing, borde beige
   ========================= */
.hero-cta--out a{
  /* tipografía */
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 300 !important;            /* bold */
  text-transform: uppercase;              /* como en la referencia */
  letter-spacing: 0 !important;           /* ← AJUSTA LAS LETRAS (sin separaciones) */
  line-height: 1.1;

  /* visual */
  display: inline-block;
  padding: 14px 34px;
  border-radius: 16px;
  background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%);
  border: 2px solid #c6b79d;              /* borde beige */
  color: #ffffff;                          /* texto blanco */
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .15s ease, filter .15s ease;
  white-space: nowrap;
}
.hero-cta--out a:hover{ filter: brightness(1.1); transform: translateY(-2px); }
.hero-cta--out a:active{ transform: translateY(0); filter: brightness(1.05); }

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

/* Dots */
.hero-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.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;
}
.hero-dot:hover{ transform: scale(1.1); }
.hero-dot.is-active{
  background: #fff;
  border-color: rgba(255,255,255,.95);
  transform: scale(1.15);
}

/* =========================
   HERO ESG (usando la base de arriba)
   ========================= */
body.landing-esg .hero.esg-hero{
  /* mismo alto que Catering */
  min-height: 92vh;
  padding-bottom: 12vh;
  background: transparent;
  overflow: hidden;
}
@media (min-width: 992px){
  body.landing-esg .hero.esg-hero{
    min-height: 94vh;
    padding-bottom: 14vh;
  }
}

/* =========================
   HERO ESG — versión final (sin icono roto ni borde blanco)
   ========================= */
body.landing-esg .hero.esg-hero {
  position: relative;
  min-height: 92vh;            /* igual que Catering */
  padding-bottom: 12vh;
  background: transparent;
  overflow: hidden;            /* evita barras o filetes */
}
@media (min-width: 992px) {
  body.landing-esg .hero.esg-hero {
    min-height: 94vh;
    padding-bottom: 14vh;
  }
}

/* Fondo: ocupa todo sin dejar “filetes” blancos */
body.landing-esg .hero.esg-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0000;          /* transparente sin offwhite */
}

/* Imagen principal del hero */
body.landing-esg .hero.esg-hero .hero-bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  display: block;
  font-size: 0;               /* evita ícono roto/alt */
  line-height: 0;
  color: transparent;
  vertical-align: bottom;     /* corrige subpíxel inferior */
}

/* Imagen visible (slide activo) */
body.landing-esg .hero.esg-hero .hero-bg > img.active { opacity: 1; }

/* Evita ícono roto si la imagen no tiene src */
body.landing-esg .hero.esg-hero .hero-bg > img:not([src]),
body.landing-esg .hero.esg-hero .hero-bg > img[src=""] { display: none !important; }

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

/* Dots si los tenés */
body.landing-esg .hero.esg-hero .hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 10px;
}

/* Asegura que no haya margen o sombra del header */
.st-header { box-shadow: none !important; border-bottom: 0 !important; }

/* === HERO base (duplicado para robustez / no tocar alturas) === */
.hero{ position:relative; min-height:92vh; padding-bottom:12vh; background:transparent; }
@media (min-width:992px){ .hero{ min-height:94vh; padding-bottom:14vh; } }
.hero-inner{ max-width:var(--container-w); margin:0 auto; padding:0 var(--hdr-pad-x); position:relative; z-index:1; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg picture{ position:absolute; inset:0; display:block; }
.hero-bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity .9s ease;
  display:block; font-size:0; line-height:0; color:transparent; vertical-align:bottom;
}
.hero-bg img.active{ opacity:1; }
.hero-bg img:not([src]), .hero-bg img[src=""]{ display:none !important; }

.hero-card.is-hidden{
  position:absolute !important; left:-9999px !important;
  width:0 !important; height:0 !important;
  overflow:hidden !important; padding:0 !important; margin:0 !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
}
.hero-cta--out{ position:absolute; left:50%; transform:translateX(-50%); bottom:86px; z-index:2; margin:0; }
@media (max-width:991px){ .hero-cta--out{ bottom:72px; } }
.hero-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:24px; z-index:2; display:flex; gap:10px; }
.st-header{ box-shadow:none !important; border-bottom:0 !important; }
body.landing-esg .hero.esg-hero{ min-height:92vh; padding-bottom:12vh; background:transparent; overflow:hidden; }
@media (min-width:992px){ body.landing-esg .hero.esg-hero{ min-height:94vh; padding-bottom:14vh; } }


/* ===== CTA HERO ESG — Montserrat bold sin tracking ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap');

.landing-esg .hero-cta--out a.btn.btn--cta{
  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: 0 !important;    /* ← sin separaciones */
  line-height: 1.1 !important;

  /* mantenemos el look actual (borde beige, radios, etc.) */
  padding: 14px 34px !important;
  border-radius: 16px !important;
  background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%) !important;
  border: 2px solid #c6b79d !important;  /* borde beige */
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.landing-esg .hero-cta--out a.btn.btn--cta:hover{
  filter: brightness(1.1) !important;
  transform: translateY(-2px) !important;
}

@media (max-width:600px){
  .landing-esg .hero-cta--out a.btn.btn--cta{
    padding: 12px 22px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    max-width: 92vw !important;
  }
}

/* CTA HERO ESG — texto beige */
.landing-esg .hero-cta--out a.btn.btn--cta{
  color: var(--beige) !important;   /* antes #ffffff */
  text-shadow: none !important;     /* por si algún estilo lo aclara */
}




/* ===== ¿QUÉ ES SUSTENTIME? — ESG ===== */
.about-b2b.esg{
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 8vw, 112px);
    background: #fff;
    color: var(--brand-green);
}

/* Contenedor centrado */
.about-b2b.esg .about-wrap{
    width: min(1400px, 95vw);
    margin: 0 auto;
    text-align: center;
    padding-inline: clamp(10px, 3vw, 24px);
}

/* Título (Petemoss), recto y MUY grande en una línea */
.about-b2b.esg .sec-title{
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
    color: var(--brand-green);
    font-size: clamp(64px, 10.8vw, 200px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin: clamp(22px, 2.8vw, 34px) 0 clamp(16px, 2.2vw, 26px);
}

@media (max-width: 420px){
    .about-b2b.esg .sec-title{
        font-size: clamp(56px, 11vw, 74px);
        letter-spacing: -0.015em;
    }
}

/* Leads (Crimson, no itálica) */
.about-b2b.esg .about-lead{
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;          /* sin itálicas */
    color: #2e5651;
    font-size: clamp(20px, 2.6vw, 36px); /* un toque más sobrio que catering */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 74ch;
    margin: 0 auto;
    text-align: center;
}

.about-b2b.esg .about-lead + .about-lead{
    margin-top: .45em;
}

.about-b2b.esg .about-lead strong{
    display:block;
    margin-top: .35em;
    font-weight: 700;
    color: var(--brand-green);
}

/* Hilo superior con stroke fino y animable por JS */
.about-b2b.esg .about-thread{
    position:absolute; left:0; right:0; top:0;
    width:100%; height: clamp(80px, 16vw, 140px);
    pointer-events:none;
    opacity:.95;
}
.about-b2b.esg .about-thread path{
    fill:none;
    stroke:#d8cfb6;
    stroke-width:1.3px;
    stroke-linecap:round;
    stroke-linejoin:round;
}

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

/* =========================
   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;
    }
}
/* ===== Paleta / fuentes mínimas ===== */
:root{
    --brand-green:#3d5b58;
}

/* ===== FIX TIPOGRAFÍA — ¿Qué es Sustentime? ===== */

/* Título principal (Petemoss) — mantener como está */
.about-b2b.esg .sec-title{
  font-family: "Petemoss", serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--brand-green) !important;
}

/* Texto descriptivo — Cormorant Garamond itálica */
.about-b2b.esg .about-lead{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--brand-green) !important;
  font-size: clamp(20px, 2.4vw, 34px) !important;
  line-height: 1.28 !important;
  text-align: center !important;
}

/* Frase con strong (segunda línea) */
.about-b2b.esg .about-lead strong{
  display: block;
  font-weight: 700 !important;
  font-style: italic !important;
  color: var(--brand-green) !important;
}


/* ===== DIFERENCIAL DEL MATERIAL (igual a catering) ===== */
#material-diff.md-section{
    background:#fff;
    padding: clamp(36px, 6.5vw, 0px) 0;
    overflow-x: clip;
}
#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 */
#material-diff > .md-wrap > .md-sublead{
    width:100%;
    margin:0 auto clamp(28px, 4.5vw, 48px);
    text-align:center;
    /* igual a catering: serif en itálica */
    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;
}
/* Grid 4 → 2 → 2 */
#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 */
#material-diff .md-card{
    width:100%;
    background:#fff;
    border:0; border-radius:22px;
    padding: clamp(22px, 3vw, 34px);
    --md-ico-h: clamp(120px, 12.5vw, 200px);
    --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;
    grid-template-rows:
    var(--md-ico-h)
    var(--md-gap-top)
    var(--md-title-h)
    var(--md-gap-bot)
    auto;
    justify-items:center;
    text-align:center;
}
/* Ícono */
#material-diff .md-card .md-ico{
    grid-row:1/2;
    width:var(--md-ico-h); height:var(--md-ico-h);
    margin:0; display:grid; place-items:center;
}
#material-diff .md-card .md-ico-img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Título de card (como catering: serif itálica) */
#material-diff .md-card .md-sublead{
    grid-row:3/4;
    display:flex; align-items:flex-end; justify-content:center;
    height:var(--md-title-h);
    margin:0; padding:0;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400;
    color:var(--brand-green);
    font-size: clamp(22px, 2.8vw, 34px);
    line-height:1.12;
}
/* Línea inferior (como catering) */
#material-diff .md-card .md-line{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight:700;
    color:var(--brand-green);
    margin:0;
}
#material-diff .md-card .md-line--bottom{
    grid-row:5/6;
    font-size: clamp(20px, 2.6vw, 28px);
    line-height:1.12;
}
/* ANMAT multilínea */
#material-diff .md-card .md-lines{
    grid-row:5/6;
    display:flex; flex-direction:column; align-items:center;
    gap:.25em; margin:0; padding:0;
}
#material-diff .md-card .md-lines .md-line{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic; font-weight:700;
    color:var(--brand-green);
    font-size: clamp(20px, 2.6vw, 28px);
    line-height:1.12;
}
/* Mobile */
@media (max-width:640px){
    #material-diff .md-card{
        padding: clamp(14px,3.6vw,18px);
        border-radius:18px;
        --md-ico-h: clamp(100px, 34vw, 150px);
        --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;
    }
    #material-diff .md-card .md-ico{ margin-inline:auto; justify-self:center; }
}

/* 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);
  }
}

/* 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);
  }
}

/* Alinear íconos del bloque Material Diferencial por la base */
#material-diff .md-grid {
  align-items: end; /* antes: center */
}

/* Mantén el ícono de agua reducido */
#material-diff .md-grid > li.md-card:first-child {
  --md-ico-h: clamp(90px, 9vw, 140px);
}

/* Ajuste móvil */
@media (max-width: 640px) {
  #material-diff .md-grid {
    align-items: center; /* en mobile se ve mejor centrado */
  }
  #material-diff .md-grid > li.md-card:first-child {
    --md-ico-h: clamp(80px, 26vw, 120px);
  }
}


/* =========================================================
   ESG — Certificados (card 4): ajuste tipográfico en mobile
   ========================================================= */

/* Solo afecta a la columna de números (usa tu clase md-lines--cert) */
@media (max-width: 640px){
    #material-diff .md-card .md-lines--cert{
        row-gap: .15em; /* un pelín más cerrados */
    }
    #material-diff .md-card .md-lines--cert .md-line{
        font-size: clamp(14px, 4.2vw, 18px); /* antes 20/28 → baja en mobile */
        line-height: 1.15;
        white-space: nowrap;        /* evita cortes en el guion */
        overflow-wrap: normal;      /* idem */
        word-break: keep-all;       /* idem */
        letter-spacing: .01em;      /* mejora lectura de números largos */
        font-variant-numeric: tabular-nums;  /* números parejos (si la fuente lo soporta) */
    }
}

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


/* === Alinear el ancho de la frase con el del video === */
:root{
  --container-w: 1200px;
  --container-mw: min(var(--container-w), 95vw);
}

/* video ya usa min(1200px,95vw); lo dejamos explícito usando la var */
.brand-video__wrap{
  width: var(--container-mw);
}

/* la frase bajo el video toma EXACTAMENTE el mismo ancho */
#material-diff > .md-wrap > .md-sublead{
  width: var(--container-mw);   /* antes: width:100% */
  margin: 0 auto clamp(28px, 4.5vw, 48px);
  text-align: center;
}


/* =========================
   PAIN POINTS — IGUAL A CATERING
   ========================= */
.pps-section{
    background:#fff;
    padding: clamp(16px, 3.5vw, 30px) 0;
}
.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;
}
/* Texto guía */
.pps-guide{
    width:min(1200px, 96vw);
    margin: 0 auto clamp(18px, 3.2vw, 28px);
    text-align:center;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight:400;
    color: var(--brand-green);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height:1.25;
}
/* Grid */
.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 */
.pps-card{
    position:relative; border-radius:18px; overflow:hidden;
    min-height: clamp(110px, 18vh, 170px);
    height:100%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}
/* Igual a catering: fondo verde sólido y texto blanco */
.pps-card--img{
    background: var(--brand-green) !important;
    background-image:none !important;
}
.pps-card--img::before{ display:none !important; }

/* Contenido centrado y en dos líneas (título + subtítulo) */
.pps-card__inner{
    width:100%; height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    padding-block: clamp(10px, 1.8vw, 16px);
    padding-inline: clamp(14px, 2.2vw, 22px);
    color:#fff !important;
}
/* Tipos iguales a catering (blanco, grande) */
.pps-card__title{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight:700;
    color:#fff;
    font-size: clamp(24px, 2.8vw, 36px);
    line-height:1.1;
    margin:0 0 .15em 0;
}
.pps-card__text{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight:600;
    color:#fff;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height:1.28;
    margin:0;
    max-width: 42ch;
}

/* Mobile */
@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__title{ font-size: clamp(18px, 5.4vw, 22px); }
    .pps-card__text{ font-size: clamp(12px, 4vw, 14px); }
}

/* Acerca la siguiente sección como en catering */
#pain-points-esg.pps-section{
    padding-bottom: clamp(6px, 1.2vw, 12px) !important;
}
#pain-points-esg .pps-wrap{ padding-bottom: 0 !important; }
#pain-points-esg .pps-grid{ margin-bottom: 0 !important; }
#pain-points-esg .pps-card{ margin-bottom: 0 !important; }

/* =========================================================
   FIX ESG — Forzar tipografías y layout exacto como Bodegas
   (sobrescribe bodega.css, que pone Petemoss en h1..h6)
   ========================================================= */

/* 1) MATERIAL DIFERENCIAL: igual que Bodegas (Inter bold + Inter normal) */
#material-diff .md-card .md-sublead{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;                   /* título en bold */
    color: var(--brand-green) !important;
    font-size: clamp(22px, 2.8vw, 34px) !important;
    line-height: 1.12 !important;
}
#material-diff .md-card .md-line,
#material-diff .md-card .md-lines .md-line{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;                   /* texto inferior normal */
    color: var(--brand-green) !important;
    font-size: clamp(20px, 2.6vw, 28px) !important;
    line-height: 1.12 !important;
}

/* 2) PAIN POINTS ESG — título arriba + subtítulo abajo en Cormorant italic */
#pain-points-esg .pps-card__inner .pps-title,
#pain-points-esg .pps-card__inner h3.pps-title{
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700 !important;                   /* título fuerte */
    color: #fff !important;
    font-size: clamp(24px, 2.8vw, 36px) !important;
    line-height: 1.1 !important;
    margin: 0 0 .15em 0 !important;
    text-shadow: none !important;
}
#pain-points-esg .pps-card__inner .pps-subtitle{
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #fff !important;
    font-size: clamp(14px, 1.6vw, 18px) !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    max-width: 42ch !important;
    text-shadow: none !important;
}

/* 3) Texto guía sobre las cards (Cormorant italic como la referencia) */
#pain-points-esg .pps-guide{
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--brand-green) !important;
    font-size: clamp(22px, 2.6vw, 30px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    margin: 0 auto clamp(18px, 3.2vw, 28px) !important;
}

/* 4) Fondo/estructura de las cards como en Bodegas */
#pain-points-esg .pps-card{
    background: var(--brand-green) !important;
    border-radius: 18px !important;
    min-height: clamp(110px, 18vh, 170px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
}
#pain-points-esg .pps-card__inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: clamp(10px, 1.8vw, 16px) clamp(14px, 2.2vw, 22px) !important;
    color: #fff !important;
}

/* 5) Mobile igual a la referencia */
@media (max-width:560px){
    #pain-points-esg .pps-card{ border-radius:14px !important; min-height: clamp(90px,14vh,130px) !important; }
    #pain-points-esg .pps-title{ font-size: clamp(18px, 5.4vw, 22px) !important; }
    #pain-points-esg .pps-subtitle{ font-size: clamp(12px, 4vw, 14px) !important; }
}

/* ===== ESG — Pain Points idéntico a Catering/Bodegas ===== */

/* Guía */
#pain-points-esg .pps-guide{
    width:min(1200px,96vw);
    margin:0 auto clamp(18px,3.2vw,28px);
    text-align:center;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400; color:var(--brand-green);
    font-size:clamp(22px,2.6vw,30px); line-height:1.25;
}

/* Cards (mismo layout que ya tenés) */
#pain-points-esg .pps-card__inner{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:#fff;
}

/* Título y bajada en Cormorant itálica — CLAVE para igualar */
#pain-points-esg .pps-card__title,
#pain-points-esg .pps-card__text{
    font-family:"Cormorant Garamond", Georgia, serif !important;
    font-style:normal !important;
    color:#fff !important;
    text-shadow:none !important;

}

/* pesos y tamaños */
#pain-points-esg .pps-card__title{
    font-weight:700;                 /* bold */
    font-size:clamp(20px,2.4vw,32px);
    line-height:1.1; margin:0 0 .15em 0;
}
#pain-points-esg .pps-card__text{
    font-weight:400;                 /* semibold suave */
    font-size:clamp(16px,1.8vw,20px);
    line-height:1.28; margin:0; max-width:42ch;
}

/* Mobile */
@media (max-width:560px){
    #pain-points-esg .pps-card__title{ font-size:clamp(18px,5.4vw,22px); }
    #pain-points-esg .pps-card__text{ font-size:clamp(12px,4vw,14px); }
}

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

/* ===== ESG Pain Points — título más grande + separación con la frase ===== */

/* Más grande y con mejor lectura */
#pain-points-esg .pps-card__title{
    font-size: clamp(24px, 2.8vw, 36px) !important; /* antes 24/36 */
    line-height: 1.08 !important;
    letter-spacing: .01em;
    margin: 0 !important;
}

/* Frase un toque más grande también (opcional) */
#pain-points-esg .pps-card__text{
    font-size: clamp(15px, 1.7vw, 20px) !important; /* antes 14/18 */
}

/* Separación entre título y frase (usa gap del contenedor) */
#pain-points-esg .pps-card__inner{
    row-gap: clamp(6px, .9vw, 12px) !important; /* espacio vertical entre ambos */
}

/* Un poco más de altura para que respire con el nuevo tamaño */
#pain-points-esg .pps-card{
    min-height: clamp(120px, 20vh, 190px) !important;
}

/* Mobile: mantén proporciones cómodas */
@media (max-width:560px){
    #pain-points-esg .pps-card__title{ font-size: clamp(20px, 6vw, 24px) !important; }
    #pain-points-esg .pps-card__text{ font-size: clamp(13px, 4.4vw, 16px) !important; }
    #pain-points-esg .pps-card__inner{ row-gap: clamp(4px, 2.5vw, 8px) !important; }
}

#pain-points-esg .pps-card__text{
  word-break: keep-all;     /* evita quiebres feos */
  hyphens: none;            /* sin guiones automáticos */
}

/* === PAIN POINTS ESG — Alinear verticalmente todas las cards === */

/* Altura fija (responsiva) reservada para el título */
:root{
  --pps-title-h: clamp(44px, 5.2vw, 68px); /* 2 líneas aprox del h3 */
}

/* Cambiamos el inner a grid para controlar filas */
#pain-points-esg .pps-card__inner{
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  row-gap: clamp(6px, .9vw, 12px) !important;
  grid-template-rows: var(--pps-title-h) auto; /* fila 1: título / fila 2: bajada */
  height: 100%;
}

/* El título ocupa SIEMPRE la misma “caja” y se apoya al fondo */
#pain-points-esg .pps-card__title{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: var(--pps-title-h) !important;
  margin: 0 !important;
  text-align: center !important;
}

/* La bajada queda en la segunda fila; 2 renglones forzados ya están con <br> */
#pain-points-esg .pps-card__text{
  text-align: center !important;
  word-break: keep-all;  /* sin quiebres raros */
  hyphens: none;
}


/* =========================
   ESG — Campañas de verano (carrusel)
   ========================= */

/* Fondo y títulos (ya los tenías) */

#campanas-esg {
    background:#fff !important;
    box-shadow:none !important;
    padding-top:clamp(20px,3vw,40px);
    padding-bottom:clamp(20px,3vw,40px);
}
#campanas-esg .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;
}
#campanas-esg .sec-heading::before,
#campanas-esg .sec-heading::after{
    content:""; height:2px; width:min(36vw,320px);
    background:#d8cfb6; opacity:.95;
}
#campanas-esg .sec-title{
    font-family:var(--font-title)!important;
    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;
}
/* Frase en Cormorant (como ya definiste) */
#campanas-esg .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){
    #campanas-esg .sub-lead{ white-space:normal; line-height:1.25; }
}

/* -------- Carrusel (scope ESG) -------- */
#campanas-esg .catering-carousel{
    max-width:min(1600px,100vw);
    margin:clamp(8px,1vw,12px) auto 0;
    position:relative; background:#fff;
    --edge-d: clamp(22px, 2.2vw, 42px);
}
#campanas-esg .cat-viewport{
    padding-block:clamp(4px,.8vw,8px);
    padding-left:var(--edge-d);
    padding-right:var(--edge-d);
    overflow:hidden; box-sizing:border-box;
    min-height:clamp(340px,38vw,580px);
}
#campanas-esg .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); /* 3 por vista desktop */
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:transform; box-sizing:border-box;
}
#campanas-esg .cat-viewport .cat-track > li{ box-sizing:border-box; }

/* Slide */
#campanas-esg .cat-card{ text-align:center; background:#fff; padding:clamp(2px,.6vw,8px); width:100%; }
#campanas-esg .cat-card figure{ margin:0; display:grid; justify-items:center; width:100%; }
#campanas-esg .cat-card img{
    display:block; margin:0 auto; width:auto;
    height:clamp(340px,38vw,580px);
    object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.08));
    content-visibility:auto; contain-intrinsic-size:580px 580px;
}
#campanas-esg .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 */
#campanas-esg .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);
}
#campanas-esg .cat-btn::before{
    content:""; display:block; width:20px; height:20px;
    border:solid currentColor; border-width:0 5px 5px 0;
}
#campanas-esg .cat-prev{ left:calc(var(--edge-d) + env(safe-area-inset-left,0px)); }
#campanas-esg .cat-prev::before{ transform:rotate(135deg); }
#campanas-esg .cat-next{ right:calc(var(--edge-d) + env(safe-area-inset-right,0px)); }
#campanas-esg .cat-next::before{ transform:rotate(-45deg); }

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

/* Mobile ≤640px: 1 por vista + centrado */
@media (max-width:640px){
    #campanas-esg .catering-carousel{ --edge-m: 20px; }
    #campanas-esg .catering-carousel .cat-viewport{
        padding-left:var(--edge-m)!important; padding-right:var(--edge-m)!important; overflow:hidden;
    }
    #campanas-esg .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;
    }
    #campanas-esg .catering-carousel .cat-viewport .cat-track > li{
        flex:0 0 100%!important; width:100%!important; min-width:100%!important;
    }
    #campanas-esg .cat-card{ padding:0!important; }
    #campanas-esg .cat-card img{ height:clamp(250px,60vw,410px); margin-inline:auto; }

    #campanas-esg .catering-carousel .cat-btn{
        width:48px; height:48px; top:50%; transform:translateY(-50%);
    }
    #campanas-esg .catering-carousel .cat-prev{
        left:calc(var(--edge-m) + env(safe-area-inset-left,0px))!important;
    }
    #campanas-esg .catering-carousel .cat-next{
        right:calc(var(--edge-m) + env(safe-area-inset-right,0px))!important;
    }
}

/* Phablet/Tablet ≤768px: asegurar 1 × vista si hiciera falta */
@media (max-width:768px){
    #campanas-esg .catering-carousel .cat-viewport{ padding:0!important; }
    #campanas-esg .catering-carousel .cat-viewport .cat-track{
        display:flex!important; flex-wrap:nowrap!important; gap:0!important; grid-auto-columns:unset!important;
    }
    #campanas-esg .catering-carousel .cat-viewport .cat-track > li{
        flex:0 0 100%!important; width:100%!important; min-width:100%!important;
    }
    #campanas-esg .catering-carousel .cat-btn::before{ width:18px; height:18px; border-width:0 4px 4px 0; }
}


#campanas-esg .sub-lead{
    font-family:"Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--brand-green) !important;
    font-size: clamp(26px, 3.2vw, 46px) !important;
    line-height: 1.12 !important;
}


/* =========================================================
   ESG — Carrusel: alias de los estilos de Catering
   (aplica el mismo CSS dentro de #campanas-esg)
   ========================================================= */

/* contenedor */
#catering .catering-carousel,
#campanas-esg .catering-carousel{
  max-width:min(1600px, 100vw);
  margin-left:auto; margin-right:auto;
  position:relative;
  background:#fff;
  margin-top:clamp(8px,1vw,12px);
  --edge-d: clamp(22px, 2.2vw, 42px);
}

/* viewport */
#catering .cat-viewport,
#campanas-esg .cat-viewport{
  padding-block:clamp(4px,.8vw,8px);
  padding-left:var(--edge-d);
  padding-right:var(--edge-d);
  overflow:hidden;
  box-sizing:border-box;
  min-height:clamp(340px,38vw,580px);
}

/* track */
#catering .cat-track,
#campanas-esg .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;
  box-sizing:border-box;
}
#catering .cat-viewport .cat-track > li,
#campanas-esg .cat-viewport .cat-track > li{ box-sizing:border-box; }

/* slide */
#catering .cat-card,
#campanas-esg .cat-card{
  text-align:center; background:#fff;
  padding:clamp(2px,.6vw,8px); width:100%;
}
#catering .cat-card figure,
#campanas-esg .cat-card figure{ margin:0; display:grid; justify-items:center; width:100%; }
#catering .cat-card img,
#campanas-esg .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;
}
#catering .cat-card figcaption,
#campanas-esg .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 */
#catering .cat-btn,
#campanas-esg .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);
}
#catering .cat-btn::before,
#campanas-esg .cat-btn::before{
  content:""; display:block; width:20px; height:20px;
  border:solid currentColor; border-width:0 5px 5px 0;
}
#catering .cat-prev, #campanas-esg .cat-prev{ left:calc(var(--edge-d) + env(safe-area-inset-left,0px)); }
#catering .cat-prev::before, #campanas-esg .cat-prev::before{ transform:rotate(135deg); }
#catering .cat-next, #campanas-esg .cat-next{ right:calc(var(--edge-d) + env(safe-area-inset-right,0px)); }
#catering .cat-next::before, #campanas-esg .cat-next::before{ transform:rotate(-45deg); }

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

/* mobile ≤640px: 1 por vista + centrado + flechas simétricas */
@media (max-width:640px){
  #catering .catering-carousel,
  #campanas-esg .catering-carousel{ --edge-m: 20px; }

  #catering .catering-carousel .cat-viewport,
  #campanas-esg .catering-carousel .cat-viewport{
    padding-left:var(--edge-m)!important;
    padding-right:var(--edge-m)!important;
    overflow:hidden;
  }

  #catering .catering-carousel .cat-viewport .cat-track,
  #campanas-esg .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;
  }
  #catering .catering-carousel .cat-viewport .cat-track > li,
  #campanas-esg .catering-carousel .cat-viewport .cat-track > li{
    flex:0 0 100%!important; width:100%!important; min-width:100%!important;
  }

  #catering .cat-card, #campanas-esg .cat-card{ padding:0!important; }
  #catering .cat-card img, #campanas-esg .cat-card img{ height:clamp(250px,60vw,410px); margin-inline:auto; }

  #catering .catering-carousel .cat-btn,
  #campanas-esg .catering-carousel .cat-btn{ width:48px; height:48px; top:50%; transform:translateY(-50%); }
  #catering .catering-carousel .cat-prev,
  #campanas-esg .catering-carousel .cat-prev{
    left:calc(var(--edge-m) + env(safe-area-inset-left,0px))!important; right:auto!important;
  }
  #catering .catering-carousel .cat-next,
  #campanas-esg .catering-carousel .cat-next{
    right:calc(var(--edge-m) + env(safe-area-inset-right,0px))!important; left:auto!important;
  }
}

/* phablet ≤768px: asegura 1×vista */
@media (max-width:768px){
  #catering .catering-carousel .cat-viewport,
  #campanas-esg .catering-carousel .cat-viewport{ padding:0!important; }
  #catering .catering-carousel .cat-viewport .cat-track,
  #campanas-esg .catering-carousel .cat-viewport .cat-track{
    display:flex!important; flex-wrap:nowrap!important; gap:0!important; grid-auto-columns:unset!important;
  }
  #catering .catering-carousel .cat-viewport .cat-track > li,
  #campanas-esg .catering-carousel .cat-viewport .cat-track > li{
    flex:0 0 100%!important; width:100%!important; min-width:100%!important;
  }
  #catering .catering-carousel .cat-btn::before,
  #campanas-esg .catering-carousel .cat-btn::before{ width:18px; height:18px; border-width:0 4px 4px 0; }
}




/* =========================
   ESG — GALERÍA 3 IMÁGENES FULL-BLEED (igual a Bodegas)
   ========================= */
#galeria-esg {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent !important;
}

#galeria-esg::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%
  );
}

#galeria-esg .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;
}

#galeria-esg .gallery-item{
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 1mm;
  box-sizing: border-box;
}

#galeria-esg .gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 45%;
}

/* Mobile/Tablet */
@media (max-width: 1024px){
  #galeria-esg .gallery-grid{ grid-template-columns: 1fr; }
  #galeria-esg .gallery-item{ padding: 2mm; }
  #galeria-esg .gallery-item img{ object-position: center 40%; }
}



/* =========================
   ESG — LEYENDA + ICONOS (full-bleed, fixes de tipografía)
   ========================= */
#leyenda-esg.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-esg.legend-section::before{
    content:""; position:absolute; inset:0; background: var(--legend-green); z-index:0;
}

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

/* Leyenda principal — Cormorant italic (como en el fix de Bodegas) */
#leyenda-esg .legend-text{
    color:#fff !important;
    text-align:center;
    margin-top: clamp(.2rem, .5vw, .6rem);
    margin-bottom: clamp(2.4rem, 3.6vw, 3.6rem);
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(1.2rem, 2.25vw, 2rem);
    line-height:1.28;
    max-width:1120px; margin-inline:auto;
}
#leyenda-esg .legend-text .legend-line{ display:block; color:#fff !important; }
@media (min-width:1024px){ #leyenda-esg .legend-text .legend-line{ white-space:nowrap; } }
@media (max-width:1023.98px){
    #leyenda-esg .legend-text{ max-width:46ch; }
    #leyenda-esg .legend-text .legend-line{ display:inline; }
    #leyenda-esg .legend-text .legend-line + .legend-line::before{ content:" "; }
}

/* Iconos + textos — Oswald bold en blanco */
#leyenda-esg .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-esg .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-esg .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-esg .trust-item span{
    font-family:"Oswald", var(--font-ui), sans-serif !important;
    font-weight:700 !important;
    font-style:normal !important;
    text-transform:uppercase; letter-spacing:.10em;
    font-size: clamp(1rem, 1.7vw, 1.35rem); color:#fff; text-align:center;
}
@media (hover:hover){ #leyenda-esg .trust-item:hover img{ transform: translateY(-4px) scale(1.03); } }
@media (max-width:900px){
    #leyenda-esg .legend-wrap{ padding-inline: clamp(10px, 3vw, 24px); }
    #leyenda-esg .legend-trust{ flex-wrap:wrap; justify-content:center; gap: clamp(1rem, 3vw, 2rem); }
    #leyenda-esg .trust-item{ flex:1 1 46%; }
}
@media (max-width:560px){
    #leyenda-esg .legend-wrap{ padding-inline: clamp(14px, 4vw, 28px); }
    #leyenda-esg .trust-item{ flex:1 1 100%; }
}

/* Strap final — Cormorant italic (fix aplicado) */
#leyenda-esg .legend-strap{
    align-items:center;
    width:100%;
    max-width:var(--legend-max);
    margin:0 auto;
    gap: clamp(18px, 2.8vw, 34px);
    padding-inline:0;
    position:relative;
    z-index:2;
    display:flex;
}
#leyenda-esg .legend-strap::before,
#leyenda-esg .legend-strap::after{
    content:""; flex:1 1 0; height:2px; background:#d8cfb6; opacity:.95;
}
#leyenda-esg .legend-strap > span{
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: clamp(.12em, .22vw, .28em) !important;
    font-variant-ligatures: none !important;
    font-kerning: none !important;
    -webkit-font-smoothing: antialiased;
    font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
    color:#d8cfb6 !important;
    white-space: nowrap;
}

/* Animaciones (reveal) */
#leyenda-esg .rv{ opacity:0; transform: translateY(16px); transition: opacity .52s ease, transform .52s ease; will-change: opacity, transform; }
#leyenda-esg .rv.is-in{ opacity:1; transform:none; }
#leyenda-esg .legend-text .legend-line{ opacity:0; transform: translateY(.45em); transition: opacity .5s ease-out, transform .5s ease-out; }
#leyenda-esg .legend-text.is-in .legend-line{ opacity:1; transform:none; }
#leyenda-esg .legend-text .legend-line:nth-child(1){ transition-delay:0ms; }
#leyenda-esg .legend-text .legend-line:nth-child(2){ transition-delay:140ms; }

@media (prefers-reduced-motion: reduce){
    #leyenda-esg .rv, #leyenda-esg .legend-text .legend-line{
        transition:none !important; opacity:1 !important; transform:none !important;
    }
}




/* =========================
   CONTACTO — ESG (CTA Montserrat bold, texto beige, SIN borde beige)
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

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

/* Título gigante con líneas */
#contacto-esg .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-esg .contact-strap::before,
#contacto-esg .contact-strap::after{
    content:""; flex:1 1 0; height:2px; background:#d8cfb6;
}
#contacto-esg .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; white-space:nowrap; letter-spacing:-.01em; text-align:center;
}
@media (max-width: 600px){
    #contacto-esg .contact-strap{ gap:10px; }
    #contacto-esg .contact-strap > span{
        font-size: clamp(28px, 10vw, 44px);
        line-height:1.12; white-space:normal; text-align:center;
    }
}

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

/* Labels */
#contacto-esg .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-esg .form-field input,
#contacto-esg .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-esg .form-field input::placeholder,
#contacto-esg .form-field textarea::placeholder{
    color:#8ea19c;
    font: 400 clamp(1.1rem, 1.7vw, 1.25rem)/1.38 var(--font-body);
}
#contacto-esg .form-field input:focus,
#contacto-esg .form-field textarea:focus{
    border-color:#aebcb7; box-shadow: 0 0 0 3px rgba(61,91,88,.08);
}

/* Botón (Montserrat Bold, SIN tracking, SIN borde beige, texto beige) */
#contacto-esg .contact-actions{
    display:flex; justify-content:center;
    margin-top: clamp(1.4rem, 3vw, 2rem);
}
#contacto-esg .btn-enviar{
    /* tipografía */
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 500 !important;                 /* Bold */
    text-transform: uppercase !important;
    letter-spacing: 0 !important;                /* ← sin separaciones */
    line-height: 1 !important;
    color: var(--beige, #d1caaf) !important;     /* texto beige */

    /* dimensiones */
    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;

    /* look (sin borde beige) */
    --outer:#8aa09d;                              /* borde verdoso/gris */
    background: linear-gradient(165deg, var(--brand-green) 0%, var(--brand-green-dk) 100%);
    border: 3px solid var(--outer);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
                0 2px 0 var(--outer);
}
#contacto-esg .btn-enviar:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
}
#contacto-esg .btn-enviar:active{
    transform:translateY(0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
                0 1px 0 var(--outer);
}

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

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

/* Mobile */
@media (max-width:600px){
    #contacto-esg .contact-actions{
        padding-inline: clamp(10px, 3.5vw, 16px);
    }
    #contacto-esg .btn-enviar{
        width:100%;
        min-width:0;
        letter-spacing:0 !important;             /* asegura sin tracking */
        padding: clamp(.95rem, 3.5vw, 1.15rem) clamp(1.2rem, 6vw, 2rem);
    }
}



/* Push-up (usa los mismos estilos globales que ya tenés) */
/* 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; }
}


/* ===== FIX TIPOGRAFÍA — FOOTER ESG ===== */

/* Frase sobre el footer ("Vos ves futuro...") */
.footer-hero--esg .footer-quote{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #fff !important;
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.3 !important;
  text-align: right !important;
  padding-right: clamp(20px, 4vw, 80px);
}

/* Contacto y redes */
.footer-bar, .footer-bar__wrap, 
.footer-bar a, .footer-bar span, 
.footer-bar p{
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--beige, #d1caaf) !important;
  text-decoration: none !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;
  }
}