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

    --font-title: "Petemoss", serif;   /* títulos/leyendas */
    --font-body:  "Crimson Text", Georgia, serif;  /* textos generales */
    --font-ui:    "Crimson Text", Georgia, serif;  /* botones/rótulos */

    --page-bg:#F7F4EF;
    --surface-card-bg:#F9F7F2;

    --maxw:1200px;
    --header-h:72px;
    --pad-x: clamp(12px, 4vw, 28px);
}

/* =========================
   RESETEOS/BASE
   ========================= */
*{ box-sizing:border-box }
html,body{ height:100%; overflow-x: clip; }
body{
    margin:0;
    font: 400 16px/1.5 var(--font-body);
    color:#172022;
    background:var(--page-bg) !important;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
button,input,select,textarea{ font: inherit; color: inherit; }

/* Títulos globales con Petemoss (sin cursiva) */
h1,h2,h3,h4,h5,h6,.title,.heading{
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: var(--brand);
}


/* =========================
   HEADER SÓLIDO — centrado perfecto + sin recortes
   ========================= */
:root{
    --hdr-h: 122px;
    --hdr-h-lg: 156px;
    --pad-x: 20px;
    --side-min: 64px;
    --act-size: 54px;
    --beige: #e8e1d0;
}

/* Cabecera fija */
.st-header{
    position: fixed;
    left: 0; right: 0; top: 0; z-index: 1000;
    height: var(--hdr-h);
    background: #3d5b58 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible;
}
@media (min-width: 992px){
    .st-header{ height: var(--hdr-h-lg); }
}

/* Contenedor interno (simétrico) */
.st-header__inner{
    width: 100%;
    max-width: var(--maxw, 1400px);
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--pad-x);
    box-sizing: border-box;

    display: grid;
    grid-template-columns: minmax(var(--side-min), 1fr) auto minmax(var(--side-min), 1fr);
    align-items: center;
    column-gap: 12px;
}

/* Marca centrada */
.st-brand{
    justify-self: center;
    display: grid;
    grid-auto-rows: min-content;
    justify-items: center;
    min-width: 0;
}

/* Logo: no se estira; solo límites */
.st-brand__logo{
    display: block;
    width: auto !important;
    height: auto !important;
    max-height: calc(var(--hdr-h) - 32px);
    max-width: min(78vw, 520px);
    object-fit: contain;
}
@media (min-width: 992px){
    .st-brand__logo{
        max-height: calc(var(--hdr-h-lg) - 40px);
        max-width: min(60vw, 640px);
    }
}

/* Lateral izquierdo (simétrico con el derecho) */
.st-slot--left{ width: var(--side-min); }

/* Acciones (derecha) */
.st-actions{
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: var(--side-min);   /* asegura simetría */
}

/* Botón de acción (círculo) */
.st-action{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--act-size);
    height: var(--act-size);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.06);
    transition: transform .15s, background-color .15s, border-color .15s;
    box-sizing: border-box;
}
.st-action:hover{ transform: translateY(-1px); }
.st-icon{ width: 28px; height: 28px; fill: #fff !important; }

/* Estado “scrolled” (lo forzamos desde el script para que sea sólido) */
#stHeader.scrolled{
    background:#3d5b58 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}
#stHeader.scrolled .st-action{
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.06);
}

/* Accesibilidad */
.sr-only{
    position:absolute!important;
    width:1px!important; height:1px!important;
    padding:0!important; margin:-1px!important;
    overflow:hidden!important; clip:rect(0 0 0 0)!important;
    white-space:nowrap!important; border:0!important;
}

/* ——— Mobile tuning ——— */
@media (max-width: 480px){
    :root{ --hdr-h: 126px; --side-min: 64px; }
    .st-action{ width: 56px; height: 56px; }  /* un pelín más de área táctil */
    .st-icon{ width: 28px; height: 28px; }

    /* Reafirmamos columnas simétricas en viewport angosto */
    .st-header__inner{
        grid-template-columns: minmax(var(--side-min), 1fr) auto minmax(var(--side-min), 1fr);
    }

    /* Tope de logo en mobile para que no “baje” al siguiente bloque */
    .st-brand__logo{
        max-height: calc(var(--hdr-h) - 30px);
        max-width: min(72vw, 420px);
    }
}

/* ——— Mobile tuning (icono más chico y más a la derecha) ——— */
@media (max-width: 480px){
    /* alto del header y ancho mínimo del lateral derecho */
    :root{
        --hdr-h: 124px;
        --side-min: 56px;
    }

    /* Reduce SOLO el padding derecho para acercar el botón al borde */
    .st-header__inner{
        padding-left: var(--pad-x);
        padding-right: clamp(6px, 2.2vw, 12px);
        grid-template-columns: minmax(var(--side-min), 1fr) auto minmax(var(--side-min), 1fr);
    }

    /* Botón de acción más pequeño */
    .st-action{
        width: 48px;
        height: 48px;
        border-width: 1px;
    }

    /* Ícono más pequeño dentro del botón */
    .st-icon{
        width: 22px;
        height: 22px;
    }

    /* Tope de logo para que no empuje hacia abajo */
    .st-brand__logo{
        max-height: calc(var(--hdr-h) - 30px);
        max-width: min(72vw, 420px);
    }
}


/* === Forzar el botón al borde derecho en desktop/tablet === */
@media (min-width: 768px){
    /* padding hasta el borde derecho del viewport */
    .st-header{ --edge-pad: clamp(10px, 2vw, 24px); }

    .st-header__inner{ position: relative; }

    /* el grupo de acciones deja el grid y se pega al borde */
    .st-actions{
        position: absolute;
        right: var(--edge-pad);
        top: 50%;
        transform: translateY(-50%);
        min-width: 0;                /* evita reservar ancho extra */
        gap: 14px;                   /* mantiene el espaciado */
        justify-self: initial;       /* ignora el end del grid */
    }
}

/* === Botón de contacto pegado al borde derecho (desktop/tablet) === */
@media (min-width: 481px){
    /* el header ya es fixed; anclamos el botón al viewport */
    .st-actions{
        position: fixed;
        right: clamp(8px, 2vw, 22px);
        top: calc(var(--hdr-h-lg) / 2);
        transform: translateY(-50%);
        z-index: 1101;
        min-width: 0;
        gap: 14px;
    }
}

/* Mobile se mantiene como lo tenías (dentro del header) */
@media (max-width: 480px){
    .st-actions{
        position: static;
        right: auto; top: auto; transform: none;
    }
}

/* ====== NAV (aislado al header) ====== */
.st-nav{ display:none; }
@media (min-width:981px){ .st-nav{ display:block; } }

.st-menu{
    margin:0; padding:0; list-style:none;
    display:flex; align-items:center; justify-content:center;
    gap: clamp(22px, 3.5vw, 60px);
}

.st-link{
    font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:700; letter-spacing:.02em;
    color:#e8e1d0; text-decoration:none; background:none; border:0;
    padding:.55em .9em; border-radius:10px;
}

/* “Para tu mesa” sin hover visible */
.st-menu > li:first-child .st-link:hover{ color:#e8e1d0; }

/* Caret */
.st-caret{
    display:inline-block; margin-left:.5em; width:.6em; height:.6em;
    border:solid currentColor; border-width:0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px); transition:transform .18s ease;
}

/* Dropdown: centrado bajo el trigger, color = header */
.st-has-dd{ position:relative; }
.st-dd{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
    min-width: 260px;
    background:#3d5b58; /* mismo tono del header */
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px; padding:10px; margin:0; list-style:none;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    display:none; z-index:1205;
}
.st-has-dd.is-open > .st-dd{ display:block; }
.st-has-dd.is-open > .st-link .st-caret{ transform:rotate(225deg) translateY(2px); }

/* Pico del dropdown */
.st-dd::before{
    content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    border:8px solid transparent; border-bottom-color:#3d5b58;
}

/* Items del dropdown + efecto suave al pasar */
.st-dd__link{
    display:block; padding:12px 14px; border-radius:10px;
    color:#fff; font-family:"Montserrat", system-ui; font-weight:600; font-size:15px;
}
@media (hover:hover){
    .st-dd__link:hover{ background:rgba(255,255,255,.08); transform:translateX(2px); transition:.18s ease; }
}
.st-dd-toggle{ cursor:pointer; }

/* ====== Panel móvil (minimo, sin tocar layout global) ====== */
.st-nav-toggle{
    display:inline-grid; place-items:center;
    width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.06); color:#fff; cursor:pointer; justify-self:end;
}
.st-burger{ width:20px; height:2px; background:#fff; position:relative; display:block; }
.st-burger::before,.st-burger::after{ content:""; position:absolute; left:0; width:100%; height:2px; background:#fff; }
.st-burger::before{ top:-6px; } .st-burger::after{ top:6px; }
@media (min-width:981px){ .st-nav-toggle{ display:none; } }

.st-nav-panel{
    position:fixed; inset:var(--hdr-h, 120px) 0 0 0; z-index:1100;
    background:#2e4a47; padding: clamp(12px, 2.6vw, 18px) clamp(12px, 5vw, 28px) 24px;
    overflow:auto;
}
.st-mob-menu{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.st-mob-link, .st-mob-acc{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:#345b57; border:1px solid rgba(255,255,255,.12); color:#d8cfb6;
    font-family:"Montserrat", system-ui; font-weight:700; font-size:18px;
    padding:16px 18px; border-radius:12px; text-decoration:none;
}
.st-mob-acc{ cursor:pointer; }
.st-mob-acc .st-caret{ border-color:currentColor; transform:rotate(45deg); transition:transform .2s; }
.st-mob-acc[aria-expanded="true"] .st-caret{ transform:rotate(225deg); }
.st-mob-sub{ display:grid; gap:10px; padding:10px 6px 2px 6px; }
.st-mob-sublink{
    display:block; background:#2c4e4a; border:1px solid rgba(255,255,255,.1);
    color:#fff; font-family:"Montserrat", system-ui; font-weight:600; font-size:16px;
    padding:14px 16px; border-radius:10px; text-decoration:none;
}

/* === Ajustes de alineación solicitados (no intrusivos) === */

/* 1) Logo más pegado al borde izquierdo (responsive) */
.st-header__inner{
    /* separo padding izq/der para poder pegar el logo a la izq sin afectar el lado derecho */
    padding-left: clamp(6px, 1vw, 12px);
    padding-right: clamp(12px, 2.4vw, 22px);
}

/* 2) Menú a la derecha, pegado a los iconos */
@media (min-width:981px){
    /* el nav deja de centrarse y se alinea al extremo derecho de su columna */
    .st-nav{
        justify-self: end;
        /* pequeño espacio para que “toque” visualmente los íconos sin superponerse */
        margin-right: 12px; /* ajústalo a gusto */
    }

    /* los ítems del menú empujan hacia la derecha y reducen separación interna */
    .st-menu{
        justify-content: flex-end;
        gap: clamp(16px, 2.6vw, 32px); /* un poco más juntos que antes */
    }
}

/* 3) Íconos de acciones se mantienen completamente a la derecha (sin cambios) */
.st-actions{
    /* ya estaban a la derecha; sin posición fija para no pisar otras capas */
    align-items: center;
}

/* 4) Dropdown permanece centrado bajo el trigger (sin hover para mesa) */
/* (estas reglas ya estaban, se incluyen solo por claridad; no cambian nada global) */
.st-has-dd{ position: relative; }
.st-has-dd.is-open > .st-dd{ display:block; }
.st-dd{
    left: 50%;
    transform: translateX(-50%);
}

/* === LOGO PEGADO AL BORDE IZQUIERDO (responsive) === */

/* Forzamos que el contenedor interno del header use todo el ancho */
.st-header__inner {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | menú | íconos */
    align-items: center;
    /* quitamos cualquier padding global */
    padding-left: 0 !important;
    padding-right: clamp(12px, 2.4vw, 22px);
}

/* El logo debe quedar completamente pegado al borde */
.st-brand {
    justify-self: start;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
}

/* Imagen del logo adaptable */
.st-brand__logo {
    display: block;
    height: auto;
    width: auto;
    max-height: clamp(70px, 10vw, 120px); /* escala según pantalla */
    object-fit: contain;
}

/* Opcional: en pantallas muy pequeñas, reducir aún más el alto */
@media (max-width: 600px) {
    .st-brand__logo {
        max-height: 60px;
    }
}

/* Asegura que no haya espacios fantasmas del header */
.st-header {
    padding: 0 !important;
}

/* ===== OVERRIDES HEADER (no pisa el resto) ===== */

/* Estructura: logo a la izquierda, menú + iconos a la derecha */
.st-header .st-header__inner{
    grid-template-columns: auto 1fr auto;  /* logo | espacio | nav+iconos */
    padding-left: clamp(4px, 1.2vw, 16px);
    padding-right: clamp(8px, 2vw, 22px);
}

/* Logo pegado al borde izquierdo y responsive */
.st-header .st-brand{
    justify-self: start;
}
.st-header .st-brand__logo{
    display:block;
    height:auto; width:auto;
    max-height: calc(var(--hdr-h) - 22px);
}
@media (min-width: 992px){
    .st-header .st-brand__logo{
        max-height: calc(var(--hdr-h-lg) - 18px);
    }
}

/* Menú a la derecha, junto a los iconos */
.st-header .st-nav{
    justify-self: end;
    margin-right: clamp(10px, 1.6vw, 20px); /* separa del grupo de iconos */
}
.st-header .st-menu{
    justify-content: flex-end;
    gap: clamp(18px, 3.2vw, 48px);
}

/* “Para tu mesa” sin hover distinto (pedido) */
.st-header .st-menu > li:first-child .st-link:hover{
    color: inherit;
    text-decoration: none;
}

/* Dropdown por clic + popover centrado respecto al trigger */
.st-header .st-has-dd{ position: relative; }
.st-header .st-has-dd .st-dd{
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-green);        /* mismo color del header */
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
    display: none;
    z-index: 1205;
    min-width: 220px;
}
.st-header .st-has-dd.is-open > .st-dd{ display: block; }
.st-header .st-dd__link{
    color: #fff;
    font-family: "Montserrat", system-ui;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
}
/* efecto suave al pasar por cada opción del desplegable */
.st-header .st-dd__link:hover{
    background: rgba(255,255,255,.08);
}

/* Iconos de la derecha */
@media (min-width:981px){
    .st-header .st-actions{ display:flex; gap:12px; justify-self:end; }
}

/* Toggle (mobile) siempre al borde derecho */
.st-header .st-nav-toggle{ justify-self: end; }

/* Fuerza header sólido que ya usás */
#stHeader.scrolled{ background: var(--brand-green) !important; }


/* ====== HEADER (scoped) ====== */
.st-header{position:fixed;inset:0 0 auto 0;z-index:1000;height:120px;background:#3d5b58!important;box-shadow:0 6px 18px rgba(0,0,0,.12)}
@media (min-width:992px){.st-header{height:156px}}

/* Grid interior: logo izq | nav centro-dcha | acciones dcha | burger solo mobile */
.st-header .st-header__inner{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    /* pegamos al borde izquierdo SIN padding extra */
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: clamp(8px, 2vw, 22px);
    gap: clamp(10px, 2vw, 24px);
}

/* Marca pegada al borde */
.st-header .st-brand{justify-self:start;display:block;margin-left:0!important}
.st-header .st-brand__logo{display:block;height:auto;width:auto;max-height:calc(120px - 22px)}
@media (min-width:992px){.st-header .st-brand__logo{max-height:calc(156px - 18px)}}

/* NAV (desktop) a la derecha, pegado a los iconos */
.st-header .st-nav{display:none}
@media (min-width:981px){
    .st-header .st-nav{display:block;justify-self:end;margin-right:12px}
}
.st-header .st-menu{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:flex-end;gap:clamp(20px,3.2vw,56px)}
.st-header .st-link{
    font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-weight:700;font-size:clamp(16px,1.35vw,22px);letter-spacing:.02em;
    color:#cbbf9b;background:none;border:0;padding:.55em .9em;border-radius:10px;text-decoration:none
}
.st-header .st-menu > li:first-child .st-link:hover{color:#cbbf9b;text-decoration:none}

/* Flecha */
.st-header .st-caret{display:inline-block;margin-left:.5em;width:.6em;height:.6em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}

/* Dropdown (por clic, sin hover global) */
.st-header .st-has-dd{position:relative}
.st-header .st-dd{
    position:absolute;top:calc(100% + 12px);right:0; /* alinear bajo el trigger hacia la derecha */
    min-width:240px;background:#3d5b58;border:1px solid rgba(255,255,255,.18);
    border-radius:14px;padding:10px;list-style:none;margin:0;box-shadow:0 16px 32px rgba(0,0,0,.22);
    display:none;z-index:1205
}
.st-header .st-has-dd.is-open > .st-dd{display:block}
.st-header .st-has-dd.is-open > .st-link .st-caret{transform:rotate(225deg) translateY(2px)}
.st-header .st-dd__link{
    display:block;padding:.75em 1em;border-radius:10px;color:#fff;text-decoration:none;
    font-family:"Montserrat",system-ui;font-weight:600;font-size:16px
}
/* efecto sutil en los items del desplegable */
.st-header .st-dd__link:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}

/* Iconos (solo desktop) */
.st-header .st-actions{display:none}
@media (min-width:981px){
    .st-header .st-actions{display:flex;gap:12px;justify-self:end}
}
.st-header .st-action{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.08);transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.st-header .st-action:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.st-header .st-icon{width:24px;height:24px;fill:#fff;color:#fff}

/* Burger (solo mobile, pegado a la derecha) */
.st-header .st-nav-toggle{
    display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);color:#fff;cursor:pointer;justify-self:end
}
.st-header .st-burger{width:20px;height:2px;background:#fff;position:relative;display:block}
.st-header .st-burger::before,.st-header .st-burger::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#fff}
.st-header .st-burger::before{top:-6px}.st-header .st-burger::after{top:6px}
@media (min-width:981px){.st-header .st-nav-toggle{display:none}}

/* Panel Mobile */
.st-header .st-nav-panel{position:fixed;inset:120px 0 0 0;z-index:1100;background:#2e4a47;padding:16px clamp(12px,5vw,28px) 24px;overflow:auto}
@media (min-width:992px){.st-header .st-nav-panel{inset:156px 0 0 0}}
.st-header .st-mob-menu{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.st-header .st-mob-link,.st-header .st-mob-acc{
    width:100%;display:flex;align-items:center;justify-content:space-between;background:#345b57;border:1px solid rgba(255,255,255,.12);
    color:#cbbf9b;font-family:"Montserrat",system-ui;font-weight:700;font-size:18px;padding:16px 18px;border-radius:12px;text-decoration:none
}
.st-header .st-mob-acc{cursor:pointer}
.st-header .st-mob-acc .st-caret{border-color:currentColor;transform:rotate(45deg);transition:transform .2s}
.st-header .st-mob-acc[aria-expanded="true"] .st-caret{transform:rotate(225deg)}
.st-header .st-mob-sub{display:grid;gap:10px;padding:10px 6px 2px 6px}
.st-header .st-mob-sublink{display:block;background:#2c4e4a;border:1px solid rgba(255,255,255,.1);color:#fff;font-family:"Montserrat",system-ui;font-weight:600;font-size:16px;padding:14px 16px;border-radius:10px;text-decoration:none}

/* Mantener header sólido forzado */
#stHeader.scrolled{background:#3d5b58!important}


/* ===== FIX: logo pegado 100% al borde izquierdo, sin afectar el resto ===== */

/* El header ya ocupa de borde a borde; aseguramos que su contenedor interno también */
.st-header > .st-header__inner{
    max-width: none !important;     /* quita el tope de 1400px */
    margin: 0 !important;           /* elimina el centrado por auto-margins */
    width: 100% !important;
    grid-template-columns: auto 1fr auto !important;  /* logo | menú | iconos */
    padding-left: 0 !important;     /* cero padding a la izquierda */
    padding-right: clamp(8px, 2vw, 22px);             /* mantené el derecho */
    box-sizing: border-box;
}

/* En dispositivos con notch (iOS), respetar el safe-area sin reintroducir huecos grandes */
@supports (padding-left: env(safe-area-inset-left)) {
    .st-header > .st-header__inner{
        padding-left: max(0px, env(safe-area-inset-left)) !important;
    }
}

/* El anchor del logo realmente al ras del borde */
.st-header .st-brand{
    justify-self: start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block;
}

/* El logo mantiene su tamaño responsive según las variables que ya usás */
.st-header .st-brand__logo{
    display: block !important;
    height: auto;
    width: auto;
    max-height: calc(var(--hdr-h) - 22px);
}
@media (min-width: 992px){
    .st-header .st-brand__logo{ max-height: calc(var(--hdr-h-lg) - 18px); }
}

/* El menú continúa a la derecha, contiguo a los íconos */
@media (min-width: 981px){
    .st-header .st-nav{ justify-self: end; margin-right: 12px; }
    .st-header .st-menu{ justify-content: flex-end; gap: clamp(18px, 3vw, 48px); }
}

/* (Opcional) Asegura que el body no agregue márgenes por defecto */
html, body { margin: 0; }

/* === FIX: que el menú no se meta debajo de los íconos en desktop === */
@media (min-width: 981px){
    /* Los íconos vuelven al flujo del grid (nada de fixed/absolute) */
    .st-header .st-actions{
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: flex;
        gap: 12px;
        justify-self: end;   /* se quedan pegados a la derecha */
        z-index: 1;          /* por si hay solapes con el dropdown */
    }

    /* El nav llega a la derecha pero deja un margen antes de los íconos */
    .st-header .st-nav{
        justify-self: end;
        margin-right: 16px;  /* separa menú de los íconos */
    }

    /* El contenedor interno mantiene el grid correcto */
    .st-header > .st-header__inner{
        grid-template-columns: auto 1fr auto !important; /* logo | menú | íconos */
    }
}



/* =========================
   SECCIONES
   ========================= */
.section{ padding:56px 16px; background:transparent !important; }
.container{ max-width:var(--maxw); margin:0 auto }
.title{
    font-family: var(--font-title);
    font-weight:400; font-style:normal;
    color: var(--brand);
    font-size: clamp(22px,3.2vw,40px);
    margin:.25rem 0 1rem;
}

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

/* ===== HOME hero ===== */
.home-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; }

/* Oculta la tarjeta de leyenda por ahora (fallback sin texto) */
.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 (opcional) */
.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; }
}

/* Dots (quedan listos por si activás slideshow) */
.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 (por si esta hoja carga sola) */
:root{
    --brand-green:#3d5b58;
    --brand-green-dk:#2f4745;
    --font-title:"Petemoss", cursive;
    --font-body:"Crimson Text","Crimson",serif;
    --container-w:1200px;
    --hdr-pad-x:20px;
}

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

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

/* Título grande estilo Home */
.about-b2b.home .sec-title{
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
    color: var(--brand-green);
    font-size: clamp(64px, 10.8vw, 200px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin: clamp(22px, 2.8vw, 34px) 0 clamp(22px, 3vw, 36px);
}

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

/* Párrafos (separados) */
.about-b2b.home .about-lead{
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    color: #2e5651;
    font-size: clamp(20px, 2.6vw, 36px);
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 74ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* separación clara entre párrafos */
.about-b2b.home .about-lead + .about-lead{
    margin-top: clamp(18px, 2.2vw, 26px);
}

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

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

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

/* ===== Video de marca (HOME) ===== */
.brand-video{
    background:#fff;
    padding: clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 32px);
}

.brand-video__wrap{
    width: min(1200px, 95vw);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.brand-video__media{
    display:block;
    width:100%;
    height:auto;
    vertical-align: middle;
}

/* Accesibilidad / reduce motion (aplica también al reveal del bloque anterior) */
@media (prefers-reduced-motion: reduce){
    .about-b2b.home .sec-title.rv,
    .about-b2b.home .about-lead.rv{ transform:none !important; }
}

/* Paleta mínima por si este archivo carga aislado */
:root{
    --brand-green:#3d5b58;
}


/* ===== DIFERENCIAL DEL MATERIAL — HOME ===== */
#material-diff.md-section{
    background:#fff;
    padding: clamp(36px, 6.5vw, 0px) 0;
    overflow-x: clip;
}

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

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

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

/* Card */
#material-diff .md-card{
    width:100%;
    background:#fff;
    border:0; border-radius:22px;
    padding: clamp(22px, 3vw, 34px);
    --md-ico-h: clamp(120px, 12.5vw, 200px);
    --md-title-h: clamp(44px, 5.2vw, 68px);
    --md-gap-top: clamp(10px, 1.6vw, 14px);
    --md-gap-bot: clamp(10px, 1.2vw, 12px);
    display:grid;
    grid-template-rows:
    var(--md-ico-h)
    var(--md-gap-top)
    var(--md-title-h)
    var(--md-gap-bot)
    auto;
    justify-items:center;
    text-align:center;
}

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

/* Título de card */
#material-diff .md-card .md-sublead{
    grid-row:3/4;
    display:flex; align-items:flex-end; justify-content:center;
    height:var(--md-title-h);
    margin:0; padding:0;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400;
    color:var(--brand-green);
    font-size: clamp(22px, 2.8vw, 34px);
    line-height:1.12;
}

/* Línea inferior */
#material-diff .md-card .md-line{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight:700;
    color:var(--brand-green);
    margin:0;
}
#material-diff .md-card .md-line--bottom{
    grid-row:5/6;
    font-size: clamp(20px, 2.6vw, 28px);
    line-height:1.12;
}

/* ANMAT multilínea */
#material-diff .md-card .md-lines{
    grid-row:5/6;
    display:flex; flex-direction:column; align-items:center;
    gap:.25em; margin:0; padding:0;
}
#material-diff .md-card .md-lines .md-line{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style: italic; font-weight:700;
    color:var(--brand-green);
    font-size: clamp(20px, 2.6vw, 28px);
    line-height:1.12;
}

/* Mobile */
@media (max-width:640px){
    #material-diff .md-card{
        padding: clamp(14px,3.6vw,18px);
        border-radius:18px;
        --md-ico-h: clamp(100px, 34vw, 150px);
        --md-title-h: clamp(28px, 6vw, 40px);
        --md-gap-top: clamp(8px, 2.2vw, 12px);
        --md-gap-bot: clamp(8px, 2vw, 10px);
    }
    #material-diff .md-grid{
        width:min(520px,92vw);
        padding-inline:10px;
        gap: clamp(10px,3.6vw,14px);
        justify-items:center;
    }
    #material-diff .md-card .md-ico{ margin-inline:auto; justify-self:center; }
}

/* Paleta mínima por si este archivo carga aislado */
:root{ --brand-green:#3d5b58; }


/* ===== PAIN POINTS (HOME) — forzar tipografía y tamaños igual a Catering ===== */
.landing-home #pain-points .pps-card__inner .md-sublead,
.landing-home #pain-points .pps-card__inner .md-sublead--white {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 700;              /* como en Catering (más presencia) */
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.18;
    font-size: clamp(22px, 2.8vw, 36px); /* mismo “look” que la captura */
}

/* Cards: mismo fondo sólido y centrado que Catering */
.landing-home #pain-points .pps-card--img {
    background: var(--brand-green, #3d5b58) !important;
    background-image: none !important;
}
.landing-home #pain-points .pps-card__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-block: clamp(10px, 1.8vw, 16px);
    padding-inline: clamp(14px, 2.2vw, 22px);
}

/* Grid y altura de cards igual a Catering */
.landing-home #pain-points.pps-section {
    background: #fff;
    padding-top: clamp(12px, 2vw, 18px);
    padding-bottom: clamp(6px, 1.2vw, 12px) !important; /* queda “pegado” a lo que sigue */
}
.landing-home #pain-points .pps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.6vw, 28px);
}
@media (max-width:1100px){
    .landing-home #pain-points .pps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
    .landing-home #pain-points .pps-grid { grid-template-columns: 1fr; gap: clamp(8px, 3.5vw, 14px); }
    .landing-home #pain-points .pps-card { min-height: clamp(90px, 14vh, 130px); border-radius: 14px; }
}

/* Sombras/borde y radios como en Catering */
.landing-home #pain-points .pps-card {
    border-radius: 18px;
    overflow: hidden;
    min-height: clamp(110px, 18vh, 170px);
    height: 100%;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    transition: none;
}
.landing-home #pain-points .pps-card:hover {
    transform: none;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* ===== PAIN POINTS HOME — MISMO ESTILO QUE CATERING ===== */

/* Tipografía Cormorant itálica, centrada y con mismo tamaño */
.landing-home #pain-points .md-sublead--white {
    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, .25);
    font-size: clamp(26px, 2.8vw, 42px);
    line-height: 1.18;
    letter-spacing: 0;
    margin: 0 !important;
    text-align: center;
    display: inline-block;
}

/* Cards iguales al layout de Catering */
.landing-home #pain-points .pps-card {
    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);
    background: var(--brand-green, #3d5b58);
    transition: transform .15s ease;
}
.landing-home #pain-points .pps-card:hover {
    transform: translateY(-2px);
}

/* Contenedor y grid */
.landing-home #pain-points .pps-wrap {
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding-inline: clamp(6px, 1.5vw, 18px);
    box-sizing: border-box;
}
.landing-home #pain-points .pps-grid {
    list-style: none;
    margin: 0 auto;
    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) {
    .landing-home #pain-points .pps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .landing-home #pain-points .pps-grid {
        grid-template-columns: 1fr;
        gap: clamp(8px, 3.5vw, 14px);
    }
}

/* Subir la sección: menos espacio superior y pegada a Material Diff */
.landing-home #pain-points.pps-section {
    background: #fff;
    padding-top: clamp(6px, 1.5vw, 12px) !important;
    padding-bottom: clamp(6px, 1.2vw, 12px) !important;
    margin-top: -30px; /* <- ajusta altura: súbelo o bájalo según necesites */
}

/* Ajuste suave de hover para estética */
.landing-home #pain-points .pps-card:hover .md-sublead--white {
    filter: brightness(1.08);
    transform: scale(1.02);
    transition: all .2s ease;
}


/* ====== HOME — Carrusel (hereda de Catering) ====== */

/* Encabezado y leyenda */
#home-catalog .sec-heading,
#home-catalog .sub-lead { width:min(1200px,94vw); margin-left:auto; margin-right:auto; }

#home-catalog .sec-heading{
    display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,40px);
    position:relative;
    /* ↓ menos aire bajo el título */
    margin-bottom: clamp(0px, 1.2vw, 12px);
}
#home-catalog .sec-heading::before,
#home-catalog .sec-heading::after{
    content:""; height:2px; width:min(36vw,320px); background:#d8cfb6; opacity:.95;
}
#home-catalog .sec-title{
    font-family:var(--font-title) !important; font-weight:400 !important; font-style:normal !important;
    color:var(--brand-green);
    font-size:clamp(48px, 7.5vw, 140px);
    line-height:1.04; letter-spacing:-.01em; margin:0; white-space:nowrap;
}
#home-catalog .sub-lead{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400; color:var(--brand-green);
    font-size:clamp(22px,3vw,42px); line-height:1.14; text-align:center;
}

/* Contenedor carrusel (reusa la clase .catering-carousel para el JS) */
#home-catalog .catering-carousel{
    max-width:min(1600px,100vw);
    /* ↓ acercamos carrusel al encabezado */
    margin: clamp(0px, .6vw, 8px) auto 0;
    position:relative; background:#fff;
    --edge-d: clamp(22px, 2.2vw, 42px);
}
#home-catalog .cat-viewport{
    /* ↓ menos padding vertical */
    padding-block:clamp(0px, .5vw, 6px);
    padding-left:var(--edge-d); padding-right:var(--edge-d);
    overflow:hidden; box-sizing:border-box;
    /* ↓ menos alto mínimo para que no quede “flotando” */
    min-height:clamp(280px, 34vw, 520px);
}
#home-catalog .cat-track{
    --gap:clamp(4px,.9vw,10px);
    list-style:none; margin:0; padding:0;
    display:grid; grid-auto-flow:column; gap:var(--gap);
    /* ↓ alinear los slides al “piso” del viewport */
    align-items:end;
    justify-items:center;
    grid-auto-columns:calc((100% - var(--gap) * 2) / 3);
    transition:transform .7s cubic-bezier(.22,.61,.36,1); will-change:transform;
}
#home-catalog .cat-card{ text-align:center; background:#fff; padding:clamp(2px,.6vw,8px); width:100%; }
#home-catalog .cat-card figure{ margin:0; display:grid; justify-items:center; width:100%; }
#home-catalog .cat-card img{
    display:block; margin:0 auto; width:auto;
    /* ↓ subimos la imagen (un poco más baja en px y vw) */
    height:clamp(300px, 34vw, 520px);
    object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.08));
    content-visibility:auto; contain-intrinsic-size:520px 520px;
}
/* MISMA tipografía de Catering en captions (Cormorant Garamond italic) */
#home-catalog .cat-card figcaption{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-style:italic; font-weight:400; color:var(--brand-green);
    font-size:clamp(24px,2.6vw,38px); line-height:1.12;
    /* ↓ acercamos el texto a la imagen */
    margin-top: clamp(-6px, -0.4vw, 2px);
}

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

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

/* Mobile: 1 por vista + centrado y flechas simétricas */
@media (max-width:640px){
    #home-catalog .catering-carousel{ --edge-m: 20px; }
    #home-catalog .cat-viewport{ padding-left:var(--edge-m)!important; padding-right:var(--edge-m)!important; }
    #home-catalog .cat-track{ display:flex!important; gap:0!important; grid-auto-columns:unset!important; align-items:flex-end; }
    #home-catalog .cat-track > li{ flex:0 0 100%!important; min-width:100%!important; }
    #home-catalog .cat-card{ padding:0!important; }
    /* ↓ alturas más compactas en tel. */
    #home-catalog .cat-card img{ height:clamp(240px, 58vw, 400px); }
    #home-catalog .cat-btn{ width:48px; height:48px; }
    #home-catalog .cat-prev{ left:calc(var(--edge-m) + env(safe-area-inset-left,0px))!important; right:auto!important; }
    #home-catalog .cat-next{ right:calc(var(--edge-m) + env(safe-area-inset-right,0px))!important; left:auto!important; }
}
@media (max-width:768px){
    #home-catalog .cat-viewport{ padding:0!important; }
    #home-catalog .cat-track{ display:flex!important; gap:0!important; grid-auto-columns:unset!important; align-items:flex-end; }
    #home-catalog .cat-track > li{ flex:0 0 100%!important; min-width:100%!important; }
    #home-catalog .cat-btn::before{ width:18px; height:18px; border-width:0 4px 4px 0; }
}


/* ===== Tokens mínimos (por si faltan) ===== */
:root{
    --legend-green: var(--brand-green, #3d5b58);
}

/* =========================
   HOME — GALERÍA 3 IMÁGENES FULL-BLEED
   ========================= */
#galeria-home.home-gallery{ position:relative; isolation:isolate; margin:0; padding:0; overflow:visible; }
#galeria-home,
#galeria-home .section{ background: transparent !important; }

/* Fondo blanco → verde (abre paso a la leyenda) */
#galeria-home::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%);
}

/* Mosaico 3 columnas (full-bleed) */
#galeria-home .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-home .gallery-item{ position:relative; overflow:hidden; background:#fff; padding:1mm; }
#galeria-home .gallery-item img{
    width:100%; height:100%; display:block; object-fit:cover; object-position:center 45%;
}

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

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

/* Full-bleed horizontal */
#leyenda-home .legend-wrap{
    position:relative; z-index:2; width:100vw;
    margin-left:50%; transform:translateX(-50%);
    padding-inline: clamp(6px, 1vw, 16px);
}

/* Leyenda principal — Cormorant Garamond italic */
#leyenda-home .legend-text{
    color:#fff !important; text-align:center;
    margin-top: clamp(.2rem, .5vw, .6rem);
    margin-bottom: clamp(2.2rem, 3.2vw, 3.4rem);
    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-home .legend-text .legend-line{ display:block; color:#fff !important; }
@media (min-width:1024px){ #leyenda-home .legend-text .legend-line{ white-space:nowrap; } }
@media (max-width:1023.98px){
    #leyenda-home .legend-text{ max-width:46ch; }
    #leyenda-home .legend-text .legend-line{ display:inline; }
    #leyenda-home .legend-text .legend-line + .legend-line::before{ content:" "; }
}

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

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

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

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


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







/* =========================
   FOOTER (ajustes IG + logo)
   ========================= */
:root{
    --footer-green: var(--brand);
    --footer-max: 1240px;
    --footer-beige: #e8e1d0;
    --footer-beige-hover: #eae7da;
}

/* —— Hero (frase sobre foto) —— */
.footer-hero{
    position:relative; isolation:isolate;
    background:#233; background-image: var(--footer-hero-bg);
    background-size:cover; background-position:center;
    padding: clamp(44px, 10vw, 120px) 0; text-align:center;
}
.footer-hero__content{ width:min(var(--footer-max), 93vw); margin:0 auto; padding-inline: clamp(16px, 3vw, 32px); }
.footer-quote{
    margin:0 0 clamp(10px, 1.6vw, 18px);
    font-family: var(--font-title); font-weight:400; font-style:normal;
    font-size: clamp(24px, 3vw, 46px); line-height:1.28;
    color:#fff !important; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.footer-hero, .footer-hero *{ color:#fff !important; }
.footer-hero::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22));
    z-index:0;
}
.footer-hero > *{ position:relative; z-index:1; }

/* —— Barra de contacto —— */
.footer-bar{
    background: var(--footer-green);
    color: var(--footer-beige);
    padding: clamp(44px, 6vw, 84px) 0;
}
.footer-bar,
.footer-bar *:where(span,em,strong,p,small){ color: var(--footer-beige); }
.footer-bar a:link,
.footer-bar a:visited{ color: var(--footer-beige); text-decoration: none; }
.footer-bar a:hover,
.footer-bar a:focus{ color: var(--footer-beige-hover); }

/* Desktop: izquierda (contacto + redes), derecha (logo) */
.footer-bar__wrap{
    width:min(var(--footer-max), 93vw);
    margin:0 auto;
    padding-inline: clamp(16px, 3vw, 32px);
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    align-items:center;                        /* ← antes: end  → logo más arriba */
    gap: clamp(22px, 4vw, 56px);
}

/* Contacto */
.footer-contact p{
    margin:0 0 .55rem;
    font-family: var(--font-legend);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 36px);
    line-height:1.25;
}
.footer-contact a{ font: inherit; }

/* Redes */
.footer-socials{
    display:flex; align-items:center; flex-wrap:wrap;
    gap: clamp(18px, 3.2vw, 40px);
    margin-top: clamp(14px, 2.8vw, 36px);
}
.footer-social{
    display:flex; align-items:center; gap:14px;
    color: inherit; text-decoration:none;
}
.footer-social img{
    width: clamp(48px, 5.6vw, 72px);
    height: clamp(48px, 5.6vw, 72px);
    object-fit: contain;
    display:block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}
.footer-social span{
    font-family: var(--font-legend);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height:1.1;
    color: var(--footer-beige) !important;
}
.footer-social:hover span{ color: var(--footer-beige-hover) !important; }

/* —— SOLO DESKTOP: Instagram más grande que LinkedIn —— */
@media (min-width: 981px){
    /* LinkedIn (1º) queda como está; IG (2º) más grande */
    .footer-socials .footer-social:nth-child(2) img{
        width: clamp(56px, 6.6vw, 86px);
        height: clamp(56px, 6.6vw, 86px);
    }
}

/* Logo a la derecha, centrado vertical y sin deformación */
.footer-logo{ justify-self:center; align-self:center; }   /* ← centrado en su columna */
.footer-logo img{
    display:block;
    width:auto !important;
    height:auto !important;
    max-height: clamp(140px, 15vw, 230px);
    max-width: 100%;
    aspect-ratio: auto;
}

/* —— Responsive —— */
@media (max-width: 980px){
    .footer-bar__wrap{
        grid-template-columns: 1fr;
        justify-items:center;
        text-align:center;
        gap: clamp(18px, 4vw, 28px);
    }

    /* Orden móvil: logo → contacto → redes (ya estaba OK) */
    .footer-logo{ order:1; }
    .footer-contact{ order:2; }
    .footer-socials{
        order:3;
        flex-direction:column;
        align-items:center;
        gap: clamp(12px, 3.5vw, 16px);
        margin-top: clamp(8px, 2.2vw, 14px);
    }
    /* invertimos si IG está primero en el HTML */
    .footer-socials .footer-social:nth-child(1){ order:2; } /* IG */
    .footer-socials .footer-social:nth-child(2){ order:1; } /* LinkedIn */

    .footer-social img{
        width: clamp(56px, 10vw, 76px);
        height: clamp(56px, 10vw, 76px);
    }
    .footer-logo img{
        max-height: clamp(140px, 22vw, 220px);
        margin-inline:auto;
    }
    .footer-contact p{ font-size: clamp(18px, 5vw, 24px); }
    .footer-social span{ font-size: clamp(18px, 4.8vw, 24px); }
}

/* — Ajuste fino desktop — */
@media (min-width: 981px){

    /* IG un poquito más chico que antes */
    .footer-socials .footer-social:nth-child(2) img{
        /* antes: clamp(56px, 6.6vw, 86px) */
        width:  clamp(52px, 6vw, 80px);
        height: clamp(52px, 6vw, 80px);
    }

    /* Logo: más arriba y más grande */
    .footer-logo{
        justify-self:center;
        align-self:flex-start;
        margin-top: clamp(-8px, -1.4vw, -14px);
    }
    .footer-logo img{
        max-height: clamp(160px, 17vw, 260px); /* si se quiere un poco más grande */
    }
}

/* —— MOBILE: info arriba, logo abajo —— */
@media (max-width: 980px){
    .footer-bar__wrap{
        grid-template-columns: 1fr;
        justify-items: stretch;
        text-align: left;
        gap: clamp(18px, 4vw, 28px);
    }

    /* 1) Columna izquierda (tel/mail/redes) PRIMERO */
    .footer-left{
        order: 1;
        justify-self: start;
        justify-items: start;
        text-align: left;
        row-gap: clamp(12px, 2vw, 18px);
    }

    .footer-contact,
    .footer-contact p{ text-align: left; }

    .footer-socials{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(12px, 3.5vw, 16px);
        margin-top: clamp(8px, 2.2vw, 14px);
        text-align: left;
    }

    .footer-social{
        display: flex; align-items: center; gap: 14px;
        margin-left: 0;
    }

    .footer-social img{
        width: clamp(56px, 10vw, 76px);
        height: clamp(56px, 10vw, 76px);
    }

    /* 2) LOGO al final y centrado */
    .footer-logo{
        order: 3;
        justify-self: center;
    }
    .footer-logo img{
        max-height: clamp(140px, 22vw, 220px);
        margin-inline: auto;   /* centrado real */
    }

    .footer-contact p{ font-size: clamp(18px, 5vw, 24px); }
    .footer-social span{ font-size: clamp(18px, 4.8vw, 24px); }
}

/* Solo MOBILE: corre redes un poco más a la izquierda */
@media (max-width: 980px){
    /* Desplaza todo el bloque de redes hacia la izquierda */
    .footer-socials{
        margin-left: clamp(-12px, -2.8vw, -18px);
    }

    /* Asegura que cada fila (icono + texto) acompañe el corrimiento */
    .footer-social{
        margin-left: 0;
    }

}

/* Hero sobre el footer con foto de fondo (ya definido) */
/* solo ajustes de layout y alineación */
.footer-hero{
    /* si quieres un poco más de altura visual, puedes usar min-height */
    min-height: clamp(180px, 28vw, 360px);
    padding: clamp(44px, 8vw, 120px) 0;
    background-size: cover;
    background-position: center;
}

/* texto alineado a la derecha en desktop */
.footer-hero__content{
    text-align: right;                 /* override del centrado */
}

/* tipografía blanca ya la tienes en .footer-quote; reforzamos el glow */
.footer-quote{
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
    /* si quieres un toque más grande como en la foto: */
    font-size: clamp(26px, 3.2vw, 48px);
    line-height: 1.28;
}

/* En mobile, centrado */
@media (max-width: 768px){
    .footer-hero__content{ text-align: center; }
}


/* ====== Header fijo: reservar espacio debajo ====== */
:root{
    /* ya los tenías — aquí solo documentamos */
    --hdr-h: 128px;         /* mobile */
    --hdr-h-lg: 156px;      /* desktop */
}

/* Empuja TODO el contenido por debajo del header fijo */
body{
    padding-top: var(--hdr-h);
}
@media (min-width: 992px){
    body{ padding-top: var(--hdr-h-lg); }
}

/* El hero ya NO necesita compensar el header */
.hero{ padding-top: 0 !important; }
@media (min-width: 992px){
    .hero{ padding-top: 0 !important; }
}

/* Navegación por ancla: que no quede tapado por el header */
[id]{ scroll-margin-top: var(--hdr-h); }
@media (min-width: 992px){
    [id]{ scroll-margin-top: var(--hdr-h-lg); }
}


/* ====== Tokens básicos (omite si ya están en tu CSS global) ====== */
: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;
}

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

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