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

/* 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 (CLEAN)
   ========================= */

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

.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;
}
.hero-bg > img.active{ opacity: 1; }

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

/* Botón CTA */
.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;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1;
    white-space: nowrap;
}
.hero-cta--out a:hover{ filter: brightness(1.07); transform: translateY(-1px); }

@media (max-width: 600px){
    .hero-cta--out{ bottom: 64px; }
    .hero-cta--out a{
        padding: 12px 18px;
        font-size: 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);
}






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

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

/* ===== ¿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;
    font-size: clamp(22px, 3.1vw, 48px);
    line-height: 1.16;
    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 — versión corregida y optimizada
   ========================================================= */

#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 */
#material-diff .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 superior 4 columnas */
#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);
}

/* Responsive 2x2 */
@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);
    }
}

/* =========================================================
   ESTRUCTURA DE CADA CARD
   ========================================================= */

#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 */
    --md-ico-size: var(--md-ico-box);            /* tamaño del gráfico */
    --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;
}

/* Ícono (fila 1, 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: todos apoyados en la base */
    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 el 1º ítem ("Reducción de agua") → ícono más chico pero alineado */
#material-diff .md-grid > li.md-card:first-child{
    --md-ico-size: clamp(90px, 9vw, 140px);
}

/* — TÍTULO — */
#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:"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;
}

/* — TEXTO INFERIOR — */
#material-diff .md-card .md-line{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic;
    font-weight:700;
    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);
        --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;
    }

    /* ícono de agua sigue menor */
    #material-diff .md-grid > li.md-card:first-child{
        --md-ico-size: clamp(80px, 26vw, 120px);
    }
}


/* =========================================================
   CATERING — Certificados (card 4): fix visual correcto en mobile
   ========================================================= */

@media (max-width: 640px){
  #material-diff .md-card .md-lines--cert{
    row-gap: .15em;
  }

  #material-diff .md-card .md-lines--cert .md-line{
    /* igual que en desktop: Cormorant Garamond bold italic */
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: var(--brand-green) !important;

    /* ajuste sólo de tamaño, no de estilo */
    font-size: clamp(15px, 3.9vw, 17px);
    line-height: 1.1;

    /* evita saltos de línea en el guion */
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;

    /* mantiene el espaciado del diseño original */
    letter-spacing: 0.015em;
    font-variant-numeric: proportional-nums;
    text-align: center;
  }
}

@media (max-width: 360px){
  #material-diff .md-card .md-lines--cert .md-line{
    font-size: 13.5px;
  }
}

/* === Certificados: restaurar tipografía base igual al resto === */
#material-diff .md-lines--cert .md-line{
  /* igual que .md-card .md-line del resto de las cards */
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: var(--brand-green) !important;

  /* quitar el efecto que cambió la apariencia en desktop */
  font-variant-numeric: normal !important;  /* sin lining/oldstyle forzado */
  letter-spacing: normal !important;

  /* que no corten en el guion */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* === Solo mobile: bajar tamaño, mantener en 1 línea === */
@media (max-width: 640px){
  #material-diff .md-lines--cert .md-line{
    font-size: clamp(14px, 4vw, 18px);  /* ↓ tamaño en mobile */
    line-height: 1.12;
    text-align: center;
  }
}

/* Muy angosto */
@media (max-width: 360px){
  #material-diff .md-lines--cert .md-line{ font-size: 13px; }
}


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

/* En pantallas ≤640px, reducimos el tamaño y evitamos cortes de línea */
@media (max-width: 640px){
  #material-diff .md-card .md-lines--cert{
    row-gap: .15em; /* menos espacio vertical */
  }

  #material-diff .md-card .md-lines--cert .md-line{
    /* Catering mantiene Cormorant Garamond en itálica */
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    color: var(--brand-green) !important;

    /* más pequeño para mobile */
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.15;

    /* forzamos una sola línea (sin saltos por el guion) */
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;

    /* mejora visual de dígitos */
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
}

/* En móviles muy angostos */
@media (max-width: 360px){
  #material-diff .md-card .md-lines--cert .md-line{
    font-size: 13px;
  }
}



/* =========================
   PAIN POINTS (4 cards alineadas a las columnas superiores)
   ========================= */

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

/* full-bleed como arriba (bullets) */
.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 */
.pps-card{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    min-height: clamp(110px, 18vh, 170px);   /* ↓ antes: clamp(130px,20vh,190px) */
    height:100%;
    display:flex !important;                 /* ← fuerza flex */
    align-items:center !important;           /* ← centra vertical */
    justify-content:center !important;       /* ← centra horizontal */
    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 y texto blanco */
.pps-card--img{
    background: var(--brand-green, #3d5b58) !important;
    background-image:none !important;
}
.pps-card--img::before{ display:none !important; }

/* Contenedor interno: también centrado y ancho completo */
.pps-card__inner{
    width:100%;
    height:100%;
    display:flex !important;                 /* ← refuerza centrado */
    align-items:center !important;
    justify-content:center !important;
    text-align:center;
    padding-block: clamp(10px, 1.8vw, 16px); /* ↓ padding vertical */
    padding-inline: clamp(14px, 2.2vw, 22px);
    color:#fff !important;                 /* ← centra el texto */
}

/* (si usás títulos/cuerpo dentro) */
.pps-card__title{
    font-family:"Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:700; letter-spacing:.01em;
    font-size: clamp(24px, 2.8vw, 36px);
    line-height:1.1;
    margin:0 !important;
    color:#fff !important;
}
.pps-card__text{
    font-family:"Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:600;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height:1.28;
    margin:0 !important;
    color:#fff !important;
}

/* Subtítulo blanco que usás dentro de las cards */
.md-sublead--white{
    color:#fff !important;
    text-shadow:0 2px 10px rgba(0,0,0,.25);
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic;
    font-size: clamp(40px, 1.4vw, 42px);
    line-height:1.28;
    margin:0 !important;
}

/* ===== Compactación específica en MOBILE ===== */
@media (max-width:560px){
    .pps-grid{
        gap: clamp(8px, 3.5vw, 14px);
    }
    .pps-card{
        min-height: clamp(90px, 14vh, 130px);  /* ↓ altura en mobile */
        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);
        margin-bottom: .25em;
    }
    .pps-card__text{
        font-size: clamp(12px, 4vw, 14px);
        line-height:1.2;
    }
    .md-sublead--white{
        font-size: clamp(18px, 5.2vw, 22px);
        line-height:1.22;
    }
}

/* Tight bottom spacing (acerca la siguiente sección) */
#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; }

/* ===== DIFERENCIAL DEL MATERIAL — FULL BLEED centrado ===== */

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

/* WRAP full-bleed centrado como ancho total */
#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 (solo ESTA va en 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 superior 4 col */
#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);
    }
}

/* ===== Cards (icono / gap / TÍTULO / gap / texto) ===== */
#material-diff .md-card{
    width:100%;
    background:#fff;
    border:0; border-radius:22px;
    padding: clamp(22px, 3vw, 34px);
    transition:none;

    --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 !important;
    grid-template-rows:
    var(--md-ico-h)
    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; }

/* Ícono */
#material-diff .md-card .md-ico{
    grid-row:1/2 !important;
    width:var(--md-ico-h) !important;
    height:var(--md-ico-h) !important;
    margin:0 !important;
    display:grid !important; place-items:center !important;
}
#material-diff .md-card .md-ico-img{ width:100%; height:100%; object-fit:contain; display:block; }

/* — TÍTULO de la card (SIN itálica, en negrita) */
#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 inferior de la card (SIN itálica, normal) */
#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;
}

/* Contenedor de varias líneas para el card ANMAT */
#material-diff .md-card .md-lines{
    grid-row: 5/6 !important;       /* ocupa la fila del texto inferior */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25em;                      /* separación entre códigos */
    margin: 0 !important;
    padding: 0 !important;
}

/* Líneas de certificado: estilo normal, sin itálica ni bold */
#material-diff .md-card .md-lines .md-line{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;                /* normal */
    color: var(--brand-green);
    margin: 0 !important;
    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; }
}



/* =========================================================
   MATERIAL-DIFF — Certificados: MISMA TIPOGRAFÍA QUE EL RESTO
   (Inter, normal) + tamaños correctos en mobile
   ========================================================= */

/* Desktop/tablet: igual que .md-line del resto de las cards */
#material-diff .md-card .md-lines.md-lines--cert .md-line,
#material-diff .md-card .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: 400 !important;
  color: var(--brand-green) !important;

  /* mismo tamaño base que .md-line--bottom */
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.12;

  /* no se cortan por el guion */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;

  /* anulamos tweaks previos */
  letter-spacing: normal !important;
  font-variant-numeric: normal !important;
}

/* Mobile (≤640px): más chico pero SIEMPRE en una sola línea */
@media (max-width:640px){
  #material-diff .md-card .md-lines.md-lines--cert .md-line,
  #material-diff .md-card .md-lines--cert .md-line{
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.15;
    text-align: center;
  }
}









/* =========================
   PAIN POINTS
   ========================= */

.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;
}

/* 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 !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 sólido */
.pps-card--img{ background: var(--brand-green, #3d5b58) !important; background-image:none !important; }
.pps-card--img::before{ display:none !important; }

/* Contenido centrado */
.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;
}

/* Texto en Pain Points — SIN itálica (forzamos por si hay estilos globales) */
.pps-card .md-sublead,
.pps-card .md-sublead--white,
.pps-card__inner p,
.pps-card__title,
.pps-card__text{
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-style:normal !important;   /* ← quita itálica */
    font-weight:400;
    letter-spacing:.01em;
    line-height:1.2;
    color:#fff !important;
    margin:0 !important;
    text-align:center !important;
}

/* Tamaños coherentes */
.pps-card__title{ font-size: clamp(22px, 2.6vw, 34px); }
@media (max-width:560px){
    .pps-card__title{ font-size: clamp(16px, 5.2vw, 22px); line-height:1.22; }
}

/* Compactación */
@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); }
}

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


/* — TÍTULO de la card (sin itálica) — ALINEADO PIXEL-PERFECT */
#material-diff {
    /* tamaño único para el título (puedes ajustar si querés) */
    --md-title-size: clamp(22px, 2.8vw, 34px);
}

#material-diff .md-card .md-sublead{
    grid-row: 3/4 !important;
    display: flex;
    align-items: flex-end;           /* baseline óptico al fondo */
    justify-content: center;
    box-sizing: border-box;

    /* tipografía */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-style: normal !important;   /* sin itálica */
    font-weight: 700;                /* bold arriba */
    color: var(--brand-green);
    font-size: var(--md-title-size);
    line-height: 1.1;                /* línea compacta y consistente */

    /* Alto calculado desde el propio tamaño del título:
       1 línea = altura estable y EXACTAMENTE igual en todas las cards */
    height: calc(var(--md-title-size) * 1.2);

    margin: 0 !important;
    padding: 0 !important;
}



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

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

/* ---------- Heading y leyenda ---------- */
#catering .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;
}
#catering .sec-heading::before,
#catering .sec-heading::after{
  content:"";
  height:2px;
  width:min(36vw, 320px);
  background:#d8cfb6;
  opacity:.95;
}
#catering .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;
}
#catering .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){
  #catering .sub-lead{ white-space:normal; line-height:1.25; }
}

/* ---------- Carrusel (contenedor centrado) ---------- */
#catering .catering-carousel{
  /* centrado duro del bloque */
  max-width:min(1600px, 100vw);
  margin-left:auto; margin-right:auto;
  position:relative;
  background:#fff;
  margin-top:clamp(8px,1vw,12px);
  /* variables de separación laterales (desktop) */
  --edge-d: clamp(22px, 2.2vw, 42px);
}

/* viewport: mismo padding a izquierda y derecha (centra el carrusel) */
#catering .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{
  --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 en desktop */
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  box-sizing:border-box;
}
#catering .cat-viewport .cat-track > li{ box-sizing:border-box; }

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

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

/* ---------- MOBILE (≤640px): 1 por vista + centrado + flechas simétricas ---------- */
@media (max-width:640px){
  /* variables solo mobile */
  #catering .catering-carousel{ --edge-m: 20px; }  /* ajustá 16–26 si quisieras */

  /* viewport con padding L/R iguales para centrar todo el bloque */
  #catering .catering-carousel .cat-viewport{
    padding-left:var(--edge-m)!important;
    padding-right:var(--edge-m)!important;
    overflow:hidden;
  }

  /* forzamos 1 slide por vista */
  #catering .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{
    flex:0 0 100%!important; width:100%!important; min-width:100%!important;
  }

  /* imagen un poco más baja en mobile */
  #catering .cat-card{ padding:0!important; }
  #catering .cat-card img{ height:clamp(250px,60vw,410px); margin-inline:auto; }

  /* flechas del mismo tamaño y a la MISMA distancia del borde */
  #catering .catering-carousel .cat-btn{
    width:48px; height:48px; top:50%; transform:translateY(-50%);
  }
  #catering .catering-carousel .cat-prev{
    left:calc(var(--edge-m) + env(safe-area-inset-left,0px))!important;
    right:auto!important;
  }
  #catering .catering-carousel .cat-next{
    right:calc(var(--edge-m) + env(safe-area-inset-right,0px))!important;
    left:auto!important;
  }
}

/* ---------- Phablet/Tablet (≤768px) — asegura 1 × vista ---------- */
@media (max-width:768px){
  #catering .catering-carousel .cat-viewport{ padding:0!important; }
  #catering .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{
    flex:0 0 100%!important; width:100%!important; min-width:100%!important;
  }
  #catering .catering-carousel .cat-btn::before{ width:18px; height:18px; border-width:0 4px 4px 0; }
}






/* =========================
   GALERÍA 3 IMÁGENES FULL-BLEED
   ========================= */
.full-bleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }

.b2b-gallery,
.b2b-gallery.section,
.b2b-gallery.section--cream,
.b2b-gallery .section,
.b2b-gallery .section--cream{ background: transparent !important; }
.b2b-gallery{ position:relative; isolation:isolate; margin:0; padding:0; overflow:visible; }
.b2b-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%);
}
.b2b-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;
}
.b2b-gallery .gallery-item{ position:relative; overflow:hidden; background:#fff; padding:1mm; }
.b2b-gallery .gallery-item img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 45%; }
@media (max-width:1024px){
    .b2b-gallery .gallery-grid{ grid-template-columns:1fr; }
    .b2b-gallery .gallery-item{ padding:2mm; }
    .b2b-gallery .gallery-item img{ object-position:center 40%; }
}

/* =========================
   LEYENDA + ICONOS + STRAP (full-bleed y más “a los bordes”)
   ========================= */
.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;
}
.legend-section::before{
    content:"";
    position:absolute;
    inset:0;
    background: var(--legend-green);
    z-index:0;
}

/* Hacemos que el wrap sea full-bleed para que los íconos puedan ir más a los bordes */
.legend-wrap{
    position:relative;
    z-index:2;
    width:100vw;
    margin-left:50%;
    transform:translateX(-50%);  /* ← centra el 100vw respecto de la página */
    padding-inline: clamp(6px, 1vw, 16px);  /* ← muy poco padding lateral en desktop */
}

/* === LEYENDA PRINCIPAL (Petemoss / blanco) === */
.legend-text{
    color:#ffffff !important;
    text-align:center;
    margin-top: clamp(.2rem, .5vw, .6rem);
    margin-bottom: clamp(2.4rem, 3.6vw, 3.6rem);
    font-family: var(--font-title);
    font-weight:400;
    font-style:italic !important;
    font-size: clamp(1.2rem, 2.25vw, 2rem);
    line-height:1.28;
    max-width:1120px;
    margin-inline:auto;
}
.legend-text .legend-line{ display:block; color:#ffffff !important; }
@media (min-width:1024px){
    .legend-text .legend-line{ white-space:nowrap; }
}
@media (max-width:1023.98px){
    .legend-text{ max-width:46ch; }
    .legend-text .legend-line{ display:inline; }
    .legend-text .legend-line + .legend-line::before{ content:" "; }
}

/* === ICONOS + TEXTOS (Oswald Bold / blanco) === */
.legend-trust{
    display:flex;
    flex-wrap:nowrap;
    justify-content: space-between;  /* ← empuja a los extremos */
    align-items:flex-end;
    gap: clamp(.4rem, 1vw, 1rem);    /* ← gap chico para “pegar” más */
    width:100%;
    margin: 0 auto clamp(1.6rem, 2.2vw, 2.2rem);

    /* “seguridad” mínima en bordes, muy pequeña en desktop */
    padding-inline: clamp(4px, .8vw, 14px);
    padding-top: clamp(6px, 1.2vw, 16px);
}

.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:#ffffff;
    z-index:2;
}
.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;
}
.trust-item span{
    font-family: "Oswald", var(--font-ui), sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.10em;
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    text-align:center;
    color:#ffffff;
}

@media (hover:hover){
    .trust-item:hover img{ transform: translateY(-4px) scale(1.03); }
}

/* En tablet dejamos respirar un poco, pero siguen abiertos */
@media (max-width: 900px){
    .legend-wrap{ padding-inline: clamp(10px, 3vw, 24px); }
    .legend-trust{
        flex-wrap:wrap;
        justify-content:center;
        gap: clamp(1rem, 3vw, 2rem);
    }
    .trust-item{ flex:1 1 46%; }
}

/* En mobile, 1 por fila para legibilidad */
@media (max-width:560px){
    .legend-wrap{ padding-inline: clamp(14px, 4vw, 28px); } /* un poco más de seguridad */
    .trust-item{ flex:1 1 100%; }
}


/* === FRASE FINAL (Vajilla sustentable...) === */
.legend-strap{
    display:flex;
    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;
}
.legend-strap::before,
.legend-strap::after{
    content:"";
    flex:1 1 0;
    height:2px;
    background:#d8cfb6;                       /* beige */
    opacity:.95;
}
.legend-strap > span{
    font-family:"Oswald", var(--font-ui), sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
    line-height:1;
    text-align:center;
    font-size: clamp(.95rem, 1.4vw, 1.15rem);
    color:#d8cfb6 !important;                 /* beige */
}

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

/* =========================
   CONTACTO (título XXL + campos más grandes)
   ========================= */
.contact-section{
    background:#fff;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
}

.contact-wrap{
    max-width: var(--contact-max);
    margin:0 auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

/* Título igual que “Catering” */
.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);
}
.contact-strap::before,
.contact-strap::after{
    content:"";
    flex:1 1 0;
    height:2px;
    background:#d8cfb6;
}
.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;
}

/* —— MOBILE: título más chico y centrado ——— */
@media (max-width: 600px){
    .contact-strap{
        gap: 10px;                      /* un poco menos de separación */
    }
    .contact-strap > span{
        font-size: clamp(28px, 10vw, 44px);  /* ↓ tamaño en mobile */
        line-height: 1.12;
        white-space: normal;            /* permite ajustar a una o dos líneas */
        text-align: center;             /* centrado real del texto */
    }
}

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

/* Labels más grandes */
.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;
}

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

/* Botón enviar */
.contact-actions{
    display:flex;
    justify-content:center;
    margin-top: clamp(1.4rem, 3vw, 2rem);
}
.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);
    font-style: normal !important;
}
.btn-enviar:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-enviar:active{ transform:translateY(0); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 1px 0 var(--outer); }

/* Stacking en mobile */
@media (max-width:860px){
    .form-grid{ grid-template-columns:1fr; }
}

/* Estados de error del form */
.form-field.is-error input,
.form-field.is-error textarea { border-color:#d9534f !important; box-shadow:0 0 0 3px rgba(217,83,79,.08); }
.field-error { color:#d9534f; font:600 0.9rem/1.2 var(--font-ui, system-ui); margin-top:.35rem; }

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


/* -------------------------------------------------------
   FUENTES (Google) + variables de marca y 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;
}

/* -------------------------------------------------------
   BOTONES — “Solicitá tu cotización” y envío del formulario
   (Montserrat Semibold)
   ------------------------------------------------------- */
.btn,
.btn.btn--cta,
.split-card__btn,
.btn-enviar{
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;     /* Semibold */
    font-style: normal !important;
    letter-spacing: .02em;
}

/* CTA principal: mantener mayúsculas si ya las tenías */
.btn.btn--cta{
    text-transform: uppercase;
}

/* Botón enviar del formulario */
.btn-enviar{
    text-transform: uppercase;
}

/* -------------------------------------------------------
   PEQUEÑOS AJUSTES DE COLOR PARA ICONOS/SVG QUE HEREDAN
   ------------------------------------------------------- */
svg, .st-icon { color: var(--brand-green); fill: currentColor; }

/* No tocar el contraste del hero-footer sobre imagen: que quede blanco */
.footer-hero, .footer-hero * { color: #fff !important; }

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



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