/* === MESA: igual a ESG/Catering, aislado por clase landing-mesa / mesa-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;
}

/* Color de texto por defecto */
html, body{ color:var(--brand-green); }

/* Tipografías y color para títulos y destacados dentro de la landing mesa */
.landing-mesa h1,.landing-mesa h2,.landing-mesa h3,.landing-mesa h4,.landing-mesa h5,.landing-mesa h6,
.landing-mesa .sec-title,
.landing-mesa .sec-heading .sec-title,
.landing-mesa .sub-lead,
.landing-mesa .legend-text,
.landing-mesa .contact-strap > span{
    font-family:var(--font-title) !important;
    font-weight:400 !important;
    font-style:normal !important;
    color:var(--brand-green);
}

/* Botones (igual a ESG/Catering) */
.landing-mesa .btn,
.landing-mesa .btn.btn--cta,
.landing-mesa .split-card__btn,
.landing-mesa .btn-enviar{
    font-family:"Merriweather", Georgia, serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
    line-height:1;
    white-space:nowrap;
}
.landing-mesa .btn.btn--cta:hover{ filter:brightness(1.07); transform:translateY(-1px); }

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

.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 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease; }
.hero-bg > img.active{ opacity:1; }

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

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

/* ===== Tokens mínimos (asegurá que existan a nivel global) ===== */
:root{
    --brand-green: #3d5b58;
    --font-title: "Petemoss", cursive;             /* Títulos */
    --font-body: "Crimson Text", "Crimson", serif; /* Cuerpo / leads */
}


/* ===================== PARA TU MESA PACKS ===================== */

/* Fondo blanco global */
body, .packs-mesa { background: #fff; }

/* ---------- Título principal ---------- */
.packs-mesa .sec-title{
    font-family: var(--font-title) !important; /* Petemoss */
    font-weight: 400 !important;
    font-style: normal !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(18px, 3.6vw, 32px);
    text-align: center;
}

/* ---------- Selector de packs ---------- */
.packs-tabs{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap: clamp(20px,4vw,60px);
    margin-bottom: clamp(18px,3.2vw,28px); /* menos espacio antes de imágenes */
    font-family:"Playfair Display", serif;
}

.packs-tab{
    appearance:none;
    border:0;
    background:transparent;
    cursor:pointer;
    color:var(--brand-green);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
    font-size: clamp(22px,3vw,32px);
    padding:12px clamp(18px,3vw,26px);
    transition:all .2s ease;
}

.packs-tab.is-active{
    background:var(--brand-green);
    color:#fff;
    border-radius:6px;
    box-shadow:0 3px 10px rgba(0,0,0,.2);
}

.packs-tab:not(.is-active):hover{
    color:var(--brand-green-dk);
}

.packs-sep{
    width:2px;
    height:28px;
    background:var(--brand-green);
    opacity:.3;
}

/* ---------- Galería de productos ---------- */
.packs-gallery{
    display:grid;
    grid-template-columns:1fr;
    gap: clamp(18px,3vw,28px);
    align-items:end;
    justify-items:center;
    margin:0 0 clamp(28px,4vw,48px) 0; /* más cerca de los tabs */
}

@media (min-width:820px){
    .packs-gallery{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.packs-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.packs-thumb{
    width:min(520px,84vw);
    aspect-ratio:1/1;
    object-fit:contain;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.14));
    transition:transform .2s ease;
}

.packs-thumb:hover{ transform:translateY(-2px); }

@media (min-width:992px){
    .packs-thumb{ width:min(520px,30vw); }
}

.packs-caption{
    font-family:"Playfair Display",serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--brand-green);
    font-size:clamp(16px,1.6vw,24px);
    text-align:center; /* alineado exacto con su imagen */
}

/* ---------- Cuadro “ESTE PACK CONTIENE” ---------- */
.packs-box{
    --box-radius:28px;
    --box-border:8px;
    position:relative;
    background:transparent; /* sin relleno */
    border:var(--box-border) solid #d6dfdc;
    border-radius:var(--box-radius);
    padding:clamp(32px,4.8vw,52px) clamp(18px,4vw,40px) clamp(26px,4vw,40px);
    max-width:min(1120px,92vw);
    margin:clamp(18px,3vw,32px) auto 0;
    box-shadow:none;
    text-align:center;
}

/* Título del cuadro: sin fondo ni líneas laterales */
.packs-box__title{
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, -58%);
    background:transparent;
    padding:0;
    font-family:"Playfair Display",serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--brand-green);
    font-size:clamp(22px,2.6vw,40px);
    line-height:1.1;
}
.packs-box__title::before,
.packs-box__title::after{ content:none; }

/* Lista dentro del cuadro */
.packs-box__list{
    list-style:none;
    padding:0;
    margin:clamp(12px,2.4vw,24px) auto 0;
    width:min(760px,86vw);
    text-align:center;
}

.packs-box__list li{
    font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight:600;
    font-size:clamp(16px,1.4vw,22px);
    line-height:1.5;
    color:#1f3e3a;
    padding:clamp(10px,1.6vw,16px) 0;
    border-bottom:1px solid rgba(47,71,69,.15);
}

.packs-box__list li:last-child{ border-bottom:0; }

.packs-code{
    font-weight:800;
    letter-spacing:.06em;
    color:var(--brand-green);
    margin-right:.2em;
}

/* ---------- Responsive tweaks ---------- */
@media (min-width:992px){
    .packs-tab{ font-size:28px; }
}

/* === Ajustes finos: separaciones y título de caja ===================== */

/* 1) Menos espacio entre los selectores y la galería */
.packs-tabs{
    margin-bottom: clamp(14px, 3.2vw, 32px); /* antes: clamp(36px,6vw,72px) */
}

/* 2) Galería más compacta y nombres más cerca de la imagen */
.packs-gallery{
    gap: clamp(10px, 2.5vw, 28px);          /* antes: clamp(22px,4vw,42px) */
    margin-bottom: clamp(20px, 4vw, 42px);  /* un poco menos de aire abajo */
}
.packs-item{ gap: 8px; }                  /* antes: 14px */
.packs-caption{
    margin-top: 0;                          /* por si algún navegador añade margen */
}

/* 3) Caja “ESTE PACK CONTIENE” más cerca de la galería */
.packs-box{
    margin-top: clamp(18px, 3.5vw, 36px);   /* reduce separación superior */
}

/* 4) Título de la caja en UNA sola línea y centrado */
.packs-box__title{
    /* posición y estilo existentes se mantienen, solo ajustamos medidas */
    transform: translate(-50%, -60%);
    font-size: clamp(18px, 2.2vw, 34px);    /* antes: clamp(22px,2.6vw,40px) */
    letter-spacing: .18em;                  /* un pelín menos para que no rompa línea */
    white-space: nowrap;                    /* evita salto */
    max-width: calc(100% - 140px);          /* asegura que entre entre los bordes */
    padding: 0 .7em;                        /* un poco menos de padding */
    background: #fff;                       /* mantiene el corte del borde */
}

/* Rayas laterales del título: mismas, pero alineadas al nuevo alto */
.packs-box__title::before,
.packs-box__title::after{
    height: 4px;
    background: #d6dfdc;
}

/* 5) Responsive extra para evitar que el título parta en pantallas medianas */
@media (min-width: 640px) and (max-width: 1100px){
    .packs-box__title{
        font-size: clamp(18px, 2vw, 28px);
        max-width: calc(100% - 160px);
        letter-spacing: .16em;
    }
}

/* 6) Por si algún margen vertical “se cuela” entre imagen y caption */
.packs-thumb{ display:block; }




/* ===================== PARA TU MESA — botones de acción ===================== */
#packs-mesa .packs-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: clamp(16px, 3.2vw, 56px);
    margin: clamp(18px, 3.2vw, 32px) 0 clamp(32px, 6vw, 80px);
}

#packs-mesa .packs-btn{
    display:inline-block;
    text-align:center;
    text-decoration:none;
    cursor:pointer;

    /* Estilo visual como en tu captura */
    background: var(--brand-green);
    color: #e6dfc8;                        /* beige de texto */
    padding: clamp(12px, 1.6vw, 22px) clamp(30px, 4vw, 80px);
    border-radius: 18px;
    font-family: "Oswald", var(--font-ui), sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    line-height: 1;

    /* fino borde/bevel claro alrededor */
    box-shadow:
            inset 0 0 0 2px rgba(216, 207, 182, 0.9),   /* línea clara fina */
            0 2px 0 rgba(0,0,0,.06),                    /* leve relieve */
            0 10px 18px rgba(0,0,0,.06);               /* sombra suave */
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    min-width: min(420px, 58vw);
}

#packs-mesa .packs-btn:hover{
    transform: translateY(-1px);
    box-shadow:
            inset 0 0 0 2px rgba(216, 207, 182, 0.95),
            0 4px 10px rgba(0,0,0,.08),
            0 14px 24px rgba(0,0,0,.08);
}

#packs-mesa .packs-btn:active{
    transform: translateY(0);
    opacity:.96;
}

/* Responsive: en mobile van apilados y ocupan ancho cómodo */
@media (max-width: 720px){
    #packs-mesa .packs-actions{
        flex-direction: column;
        gap: clamp(12px, 3.6vw, 18px);
        margin-top: clamp(14px, 4vw, 24px);
    }
    #packs-mesa .packs-btn{
        width: min(560px, 92vw);
        min-width: 0;
    }
}


/* ===================== PARA TU MESA — carrusel mobile ===================== */

/* Por defecto: se ve grilla, se oculta carrusel */
#packs-mesa .packs-carousel{ display:none; }

/* Mobile ≤640px: oculta grilla y muestra carrusel */
@media (max-width:640px){
    #packs-mesa .packs-gallery{ display:none !important; }
    #packs-mesa .packs-carousel{ display:block; }
}

/* --- Estilos base del carrusel (scope a la sección) --- */
#packs-mesa .packs-carousel{
    max-width:min(1600px,100vw);
    margin: clamp(8px,1vw,12px) auto 0;
    position:relative;
    background:#fff; /* SIEMPRE fondo blanco */
    --edge-d: clamp(22px, 2.2vw, 42px);
}
#packs-mesa .packs-carousel .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(280px, 62vw, 520px); /* un poco mayor para teléfonos angostos */
}
#packs-mesa .packs-carousel .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;
}
#packs-mesa .packs-carousel .cat-viewport .cat-track > li{ box-sizing:border-box; }

/* Slide */
#packs-mesa .packs-carousel .cat-card{
    text-align:center; background:#fff; padding:clamp(2px,.6vw,8px); width:100%;
}
#packs-mesa .packs-carousel .cat-card figure{
    margin:0; display:grid; justify-items:center; width:100%;
}
#packs-mesa .packs-carousel .cat-card img{
    display:block; margin:0 auto; width:auto;
    height: clamp(240px, 58vw, 420px);
    object-fit:contain;
    filter: drop-shadow(0 12px 16px rgba(0,0,0,.10));
    content-visibility:auto; contain-intrinsic-size:460px 460px;
}
#packs-mesa .packs-carousel .cat-card figcaption{
    font-family:"Playfair Display", serif;
    font-weight:700; text-transform:uppercase;
    letter-spacing:.22em; color:var(--brand-green);
    font-size: clamp(14px, 3.8vw, 18px);
    line-height:1.1;
    margin-top: clamp(2px,.6vw,6px);
}

/* Flechas */
#packs-mesa .packs-carousel .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);
}
#packs-mesa .packs-carousel .cat-btn::before{
    content:""; display:block; width:20px; height:20px;
    border:solid currentColor; border-width:0 5px 5px 0;
}
#packs-mesa .packs-carousel .cat-prev{ left:calc(var(--edge-d) + env(safe-area-inset-left,0px)); }
#packs-mesa .packs-carousel .cat-prev::before{ transform:rotate(135deg); }
#packs-mesa .packs-carousel .cat-next{ right:calc(var(--edge-d) + env(safe-area-inset-right,0px)); }
#packs-mesa .packs-carousel .cat-next::before{ transform:rotate(-45deg); }

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

/* Mobile estrictamente: 1 por vista + track en flex para swipe suave */
@media (max-width:640px){
    #packs-mesa .packs-carousel{ --edge-m: 20px; }
    #packs-mesa .packs-carousel .cat-viewport{
        padding-left:var(--edge-m)!important; padding-right:var(--edge-m)!important;
    }
    #packs-mesa .packs-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;
    }
    #packs-mesa .packs-carousel .cat-viewport .cat-track > li{
        flex:0 0 100% !important; width:100% !important; min-width:100% !important;
    }
    #packs-mesa .packs-carousel .cat-btn{
        width:48px; height:48px; top:50%; transform:translateY(-50%);
    }
    #packs-mesa .packs-carousel .cat-btn::before{ width:18px; height:18px; border-width:0 4px 4px 0; }
}

/* ====== Fix título caja en mobile (2 renglones sin superponer contenido) ====== */
@media (max-width:640px){
    /* Más espacio ENTRE el carrusel y la caja */
    #packs-mesa .packs-carousel{
        margin-bottom: clamp(22px, 7vw, 36px);
    }
    /* Más aire dentro de la caja para alojar el título de 2 líneas */
    #packs-mesa .packs-box{
        padding-top: clamp(72px, 14vw, 96px);  /* antes 56–76px */
        margin-top: clamp(28px, 7vw, 48px);    /* separa aún más de lo de arriba */
    }
    /* Título: permitir 2 líneas y bajarlo un poco para que no ‘toque’ nada */
    #packs-mesa .packs-box__title{
        white-space: normal;
        max-width: calc(100% - 80px);
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.15;
        transform: translate(-50%, -52%);  /* antes -70%: ahora queda más abajo */
        background:#fff;
        padding: 0 .4em;
    }
}

/* ====== Ajuste altura de imagen del carrusel en mobile (se ve sí o sí) ====== */
#packs-mesa .packs-carousel .cat-viewport{ min-height: clamp(280px, 62vw, 520px); }
#packs-mesa .packs-carousel .cat-card img{
    height: clamp(240px, 58vw, 420px);
    width: auto;
    object-fit: contain;
}

/* Centrado duro de cada slide en mobile */
@media (max-width:640px){
    #packs-mesa .packs-carousel .cat-viewport .cat-track > li{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    #packs-mesa .packs-carousel .cat-card{
        width:100%;
        text-align:center;
        padding:0;
    }
    #packs-mesa .packs-carousel .cat-card figure{
        width:100%;
        margin:0;
        display:grid;
        justify-items:center;
    }
    #packs-mesa .packs-carousel .cat-card img{
        display:block;
        margin-inline:auto;
    }
}

/* ===== Centrar la galería cuando el pack tiene solo 2 productos ===== */
.packs-gallery.is-two{
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: center;            /* centra el conjunto */
    max-width: min(1200px, 92vw);
    margin-left: auto;
    margin-right: auto;
}

/* Por si el viewport es más angosto, que siga viéndose lindo */
@media (max-width: 980px){
    .packs-gallery.is-two{
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: clamp(12px, 3vw, 24px);
    }
}

/* ===== Nota/recomendación al pie del cuadro ===== */
.packs-box__note{
    margin: clamp(12px, 2.2vw, 20px) auto 0;
    padding-top: clamp(10px, 1.6vw, 14px);
    border-top: 4px solid #d6dfdc;      /* la “línea” donde marcaste en rojo */
    max-width: min(760px, 86vw);
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.45;
    color: #1f3e3a;
    text-align: center;
}

/* util por si queremos ocultarla cuando no haya texto */
.is-hidden{ display:none !important; }

/* ===== Alinear códigos y descripciones en "Este pack contiene" ===== */

/* La lista queda centrada en el cuadro, pero cada ítem se alinea por columnas */
.packs-box__list{
    width: min(760px, 86vw);
    margin: clamp(12px, 2.4vw, 24px) auto 0;
    padding: 0;
    list-style: none;
}

/* Dos columnas: [código] [descripción] */
.packs-box__list li{
    display: grid;
    grid-template-columns: 6.5ch 1fr;      /* ancho fijo por “caracteres” del código */
    column-gap: .6em;
    align-items: baseline;
    text-align: left;                      /* evita el centrado heredado del box */
    border-bottom: 1px solid rgba(47,71,69,.15);
    padding: clamp(10px,1.6vw,16px) 0;
}

/* Quita el borde al último */
.packs-box__list li:last-child{ border-bottom: 0; }

/* Columna del código: números tabulares para que queden parejitos */
.packs-code{
    justify-self: end;                     /* pega el código a la regla vertical imaginaria */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: .06em;
    color: var(--brand-green);
    font-weight: 800;
}

/* Columna de descripción: añadimos la barra con CSS para que quede siempre igual */
.packs-desc{
    position: relative;
}
.packs-desc::before{
    content: "|";
    margin-right: .6em;
    color: rgba(47,71,69,.8);
    font-weight: 700;
}

/* Responsive: si el espacio es muy estrecho, apilar con buen aspecto */
@media (max-width: 480px){
    .packs-box__list li{
        grid-template-columns: 1fr;
        row-gap: .25em;
        text-align: center;
    }
    .packs-code{ justify-self: center; }
    .packs-desc::before{ display: none; }   /* sin barra en una sola columna */
}

/* ===== "ESTE PACK CONTIENE" — centrar filas y alinear códigos ===== */

/* El <ul> ya está centrado con margin:auto; no lo tocamos mucho */
.packs-box__list{
    width: min(760px, 86vw);
    margin: clamp(12px, 2.4vw, 24px) auto 0;
    padding: 0;
    list-style: none;
}

/* Cada li es un grid de 2 columnas, pero el li en sí se centra */
.packs-box__list li{
    --code-w: 6.5ch;                       /* ancho fijo de la columna de código */
    display: grid;
    grid-template-columns: var(--code-w) 1fr;
    column-gap: .6em;
    align-items: baseline;

    width: max-content;                    /* << centra el contenido real */
    margin: 0 auto;                        /* << centrado horizontal del li */
    text-align: left;

    padding: clamp(10px,1.6vw,16px) 0;
    border-bottom: 1px solid rgba(47,71,69,.15);
}
.packs-box__list li:last-child{ border-bottom: 0; }

/* Columna del código alineada y parejita */
.packs-code{
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: .06em;
    color: var(--brand-green);
    font-weight: 800;
}

/* Columna de descripción normal */
.packs-desc{
    justify-self: start;
    text-align: left;
}

/* IMPORTANTE: no generes otra barra desde CSS (evita “||”) */
/* .packs-desc::before { content: none; }  <-- asegúrate de NO tener este bloque activo */

/* En móviles, si quieres apilar (opcional) */
@media (max-width: 480px){
    .packs-box__list li{
        grid-template-columns: 1fr;
        row-gap: .25em;
        width: 100%;
    }
    .packs-code, .packs-desc{
        justify-self: center;
        text-align: center;
    }
}


/* === Packs: centrado del bloque y códigos alineados entre filas === */
.packs-box__list{
    width: min(760px, 86vw);
    margin: clamp(12px, 2.4vw, 24px) auto 0; /* centra el <ul> */
    padding: 0;
    list-style: none;
    text-align: initial;                     /* evita heredar centrado */
}

.packs-box__list li{
    display: grid;
    grid-template-columns: 7ch 1fr;          /* 1ª col fija (código), 2ª ocupa resto */
    column-gap: .75em;
    align-items: baseline;

    width: 100% !important;                  /* TODAS las filas mismo ancho */
    margin: 0 !important;                    /* sin desplazamientos laterales */
    padding: clamp(10px,1.6vw,16px) 0;
    border-bottom: 1px solid rgba(47,71,69,.15);
}
.packs-box__list li:last-child{ border-bottom: 0; }

.packs-code{
    justify-self: end;                       /* código pegado a la “regla” */
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: .06em;
    color: var(--brand-green);
    font-weight: 800;
}

.packs-desc{
    justify-self: start;
    text-align: left;
}
/* Si agregabas una barra con ::before, evitar “||” */
.packs-desc::before{ content: none; }

/* Mobile: apilar centrado */
@media (max-width: 480px){
    .packs-box__list li{
        grid-template-columns: 1fr;
        row-gap: .25em;
    }
    .packs-code, .packs-desc{
        justify-self: center;
        text-align: center;
    }
}


/* ================== PACK TABS — MOBILE PÍLDORAS ================== */
@media (max-width: 640px){
  .packs-tabs{
    justify-content:flex-start;
    gap: 10px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .packs-tabs::-webkit-scrollbar{ display:none; }
  .packs-sep{ display:none; }  /* fuera los separadores “|” en mobile */

  .packs-tab{
    scroll-snap-align: start;
    border: 1px solid rgba(47,71,69,.18);
    background: #fff;
    color: var(--brand-green);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 14px;
    letter-spacing: .12em;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
  }
  .packs-tab.is-active{
    background: var(--brand-green);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
  }
  /* un poco menos de aire debajo de los tabs para acercar galería/carrusel */
  .packs-tabs{ margin-bottom: 12px; }
}


/* ====== PACK TABS en una sola fila (≥641px) ====== */
@media (min-width: 641px){
  .packs-tabs{
    flex-wrap: nowrap !important;     /* no permite salto de línea */
    overflow-x: auto;                 /* si no entran, que deslicen horizontal */
    -webkit-overflow-scrolling: touch;
    gap: clamp(22px, 3vw, 60px);      /* separación fluida */
    padding-inline: clamp(8px, 1.2vw, 16px); /* un poco de resguardo en bordes */
    scrollbar-width: none;            /* oculta scrollbar en Firefox */
  }
  .packs-tabs::-webkit-scrollbar{ display: none; } /* oculta scrollbar en WebKit */

  /* cada tab es “tamaño contenido” y no se reduce */
  .packs-tab,
  .packs-sep{
    flex: 0 0 auto !important;        /* evita shrink y mantiene todo en 1 fila */
  }
}


/* ===== ESTE PACK CONTIENE — caja totalmente responsive ===== */
.packs-box{
  /* ancho y centrado */
  width: 100%;
  max-width: min(1120px, 94vw);
  margin: clamp(16px, 3vw, 28px) auto 0;

  /* borde y radio (los tuyos) */
  --box-radius: 28px;
  --box-border: 8px;
  border: var(--box-border) solid #d6dfdc;
  border-radius: var(--box-radius);

  /* paddings fluidos y SIN desbordes */
  padding: clamp(30px, 4.5vw, 52px) clamp(16px, 4vw, 40px) clamp(26px, 4vw, 40px);
  box-sizing: border-box;
  background: #fff;
}

/* Título centrado sobre el borde (desktop/tablet en una línea) */
.packs-box__title{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -58%);
  padding: 0 .65em;                 /* “corta” el borde por debajo */
  background: #fff;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--brand-green);
  font-size: clamp(18px, 2.2vw, 34px);
  white-space: nowrap;
  max-width: calc(100% - clamp(80px, 12vw, 180px));  /* nunca choca con el borde */
}
.packs-box__title::before,
.packs-box__title::after{
  content: "";
  display: none; /* si usabas rayas laterales, puedes reactivarlas */
}

/* Lista centrada y SIN recortes de texto */
.packs-box__list{
  width: 100%;
  max-width: min(760px, 90vw);
  margin: clamp(10px, 2.2vw, 20px) auto 0;
  padding: 0;
  list-style: none;
  text-align: initial;
}
.packs-box__list li{
  display: grid;
  grid-template-columns: clamp(6ch, 7ch, 8.5ch) 1fr; /* col fija para código */
  column-gap: .75em;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: clamp(10px, 1.6vw, 16px) 0;
  border-bottom: 1px solid rgba(47,71,69,.15);

  /* evita desbordes largos (móvil) */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.packs-box__list li:last-child{ border-bottom: 0; }

.packs-code{
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: .06em;
  color: var(--brand-green);
  font-weight: 800;
}
.packs-desc{ justify-self: start; text-align: left; }

/* Nota al pie: mismo ancho y sin desbordes */
.packs-box__note{
  max-width: min(760px, 90vw);
  margin: clamp(10px, 2vw, 18px) auto 0;
  padding-top: clamp(8px, 1.2vw, 14px);
  border-top: 4px solid #d6dfdc;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* ===== Mobile: más espacio arriba para el título y texto sin salir ===== */
@media (max-width: 640px){
  .packs-box{
    padding-top: clamp(72px, 16vw, 100px); /* deja lugar al título en dos líneas */
  }
  .packs-box__title{
    white-space: normal;             /* permite 2 líneas */
    line-height: 1.15;
    transform: translate(-50%, -52%);
    max-width: calc(100% - 72px);    /* guarda margen con el borde curvo */
    font-size: clamp(18px, 5vw, 24px);
  }
  .packs-box__list li{
    grid-template-columns: 1fr;      /* apila código y descripción */
    row-gap: .25em;
    text-align: center;
  }
  .packs-code, .packs-desc{
    justify-self: center;
    text-align: center;
  }
}




/* =========================
   MESA — GALERÍA 3 IMÁGENES FULL-BLEED
   (mismo layout que Bodegas / ESG)
   ========================= */
#galeria-mesa.bodega-gallery{
    position:relative; isolation:isolate; margin:0; padding:0; overflow:visible;
}
#galeria-mesa,
#galeria-mesa .section{ background: transparent !important; }
#galeria-mesa::before{
    content:""; position:absolute; z-index:0; top:0; bottom:0; left:50%; width:100vw;
    transform:translateX(-50%);
    /* el verde sube a la mitad exacta como ESG */
    background: linear-gradient(to bottom,#fff 0%,#fff 60%, var(--brand-green) 60%, var(--brand-green) 100%);
}
#galeria-mesa .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-mesa .gallery-item{ position:relative; overflow:hidden; background:#fff; padding:1mm; }
#galeria-mesa .gallery-item img{
    width:100%; height:100%; display:block; object-fit:cover; object-position:center 45%;
}
@media (max-width:1024px){
    #galeria-mesa .gallery-grid{ grid-template-columns:1fr; }
    #galeria-mesa .gallery-item{ padding:2mm; }
    #galeria-mesa .gallery-item img{ object-position:center 40%; }
}

/* =========================
   BOTONES BAJO EL CUADRO (sin franja beige)
   ========================= */

/* Fuerza fondo blanco en toda la sección packs y elimina cualquier “franja” heredada */
#packs-mesa,
#packs-mesa .section,
#packs-mesa .packs-wrap{
    background:#fff !important;
}

/* Contenedor de botones */
#packs-mesa .packs-actions,
#packsActions.packs-actions{
    background: transparent !important;        /* quita franja */
    display: flex; align-items: center; justify-content: center;
    gap: clamp(18px, 3vw, 32px);
    margin: clamp(18px, 3vw, 28px) auto clamp(30px, 4vw, 44px); /* aire arriba/abajo */
    padding: 0; border: 0;
    width: 100%;
}

/* (Opcional) Asegura que los <a.packs-btn> respeten el layout */
#packs-mesa .packs-actions .packs-btn{
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none;
}

/* =========================
   MESA — LEYENDA + ICONOS (full-bleed, blanco sobre verde)
   ========================= */
#leyenda-mesa.legend-section{
    position:relative; isolation:isolate;
    padding: clamp(.7rem, 1.1vw, 1.3rem) 0 clamp(2.3rem, 3.2vw, 4rem);
    background: var(--brand-green);
    overflow:hidden;
}
#leyenda-mesa.legend-section::before{
    content:""; position:absolute; inset:0; background: var(--brand-green); z-index:0;
}
#leyenda-mesa .legend-wrap{
    position:relative; z-index:2; width:100vw;
    margin-left:50%; transform:translateX(-50%);
    padding-inline: clamp(6px, 1vw, 16px);
}
#leyenda-mesa .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-mesa .legend-text .legend-line{ display:block; color:#fff !important; }
@media (min-width:1024px){ #leyenda-mesa .legend-text .legend-line{ white-space:nowrap; } }
@media (max-width:1023.98px){
    #leyenda-mesa .legend-text{ max-width:46ch; }
    #leyenda-mesa .legend-text .legend-line{ display:inline; }
    #leyenda-mesa .legend-text .legend-line + .legend-line::before{ content:" "; }
}

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

/* Strap */
#leyenda-mesa .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-mesa .legend-strap::before,
#leyenda-mesa .legend-strap::after{
    content:""; flex:1 1 0; height:2px; background:#d8cfb6; opacity:.95;
}
#leyenda-mesa .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);
    font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
    color:#d8cfb6 !important;
    white-space:nowrap;
}

/* Animación reveal */
#leyenda-mesa .rv{ opacity:0; transform: translateY(16px); transition: opacity .52s ease, transform .52s ease; }
#leyenda-mesa .rv.is-in{ opacity:1; transform:none; }
#leyenda-mesa .legend-text .legend-line{ opacity:0; transform: translateY(.45em); transition: opacity .5s ease-out, transform .5s ease-out; }
#leyenda-mesa .legend-text.is-in .legend-line{ opacity:1; transform:none; }


html, body { background: #fff !important; }

/* === Más espacio entre los CTA y la galería === */
#packs-mesa .packs-actions{
    /* separa botones de las imágenes */
    margin-bottom: clamp(64px, 7vw, 120px) !important;
}

/* La galería arranca sin sumar espacios raros */
#galeria-mesa{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ajustes responsivos (un poco menos en pantallas chicas) */
@media (max-width: 1024px){
    #packs-mesa .packs-actions{
        margin-bottom: clamp(40px, 9vw, 80px) !important;
    }
}
@media (max-width: 560px){
    #packs-mesa .packs-actions{
        margin-bottom: clamp(28px, 12vw, 60px) !important;
    }
}


/* ===== Footer hero MESA (frase centrada sobre imagen) ===== */
.landing-mesa .footer-hero--mesa{
    /* Reutiliza reglas base de .footer-hero (home.css) */
    position: relative;
    min-height: clamp(280px, 40vw, 460px);
    background: var(--footer-hero-bg) center/cover no-repeat;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* Oscurecido suave para mejor contraste de la frase */
.landing-mesa .footer-hero--mesa::after{
    content:"";
    position:absolute; inset:0;
    background: rgba(0,0,0,.18);
    z-index:0;
}

.landing-mesa .footer-hero--mesa .footer-hero__content{
    position: relative; z-index: 1;
    width: min(1200px, 92vw);
    margin-inline: auto;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(12px, 2vw, 20px);
}

.landing-mesa .footer-quote--mesa{
    /* tipografía y look como en tu captura */
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
    line-height: 1.2;
    font-size: clamp(20px, 2.6vw, 42px);
    max-width: 28ch;
    margin: 0;
}

/* Asegura blanco aunque exista algún override global */
.landing-mesa .footer-hero--mesa,
.landing-mesa .footer-hero--mesa *{
    color:#fff !important;
}

/* Ajustes de la barra del footer (mismo look que ESG) */
.landing-mesa #site-footer .footer-bar{
    background: var(--brand-green);
    color: #d8cfb6;
}
.landing-mesa #site-footer .footer-bar *{
    color: #d8cfb6;
}

/* El bloque ocupa solo lo necesario y queda centrado */
.landing-mesa .footer-hero--mesa .footer-quote--mesa{
    max-width: max-content;        /* evita que se achique y fuerce saltos */
    margin: 0;
    text-align: center;
}

/* Dos renglones forzados */
.landing-mesa .footer-hero--mesa .footer-quote--mesa .l1,
.landing-mesa .footer-hero--mesa .footer-quote--mesa .l2{
    display: block;
}

/* El segundo renglón va entero en una sola línea */
.landing-mesa .footer-hero--mesa .footer-quote--mesa .l2{
    white-space: nowrap;
}

/* (opcional) si en tu CSS anterior tenías un límite de ancho, anúlalo aquí */
.landing-mesa .footer-quote--mesa{ max-width: unset; }