/*
 * Ibercook Design System — Figma Pro design
 * Fonts: Bitter (→ Museo Slab*), DM Sans (→ General Sans*)
 * *Commercial substitutes. Swap via --ib-font-heading / --ib-font-body when licensed.
 */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,700;1,400;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    --ib-navy:       #1E3456;
    --ib-blue:       #455674;
    --ib-red:        #CF0A2C;
    --ib-red-active: #A50303;
    --ib-teal:       #508EAA;
    --ib-off-white:  #F5F5F5;
    --ib-off-white-t: rgba(245,245,245,0.6);
    --ib-light-gray: #E6E6E6;
    --ib-light-gray-t: rgba(230,230,230,0.6);
    --ib-gray:       #999999;
    --ib-white:      #FFFFFF;

    --ib-font-heading: 'Bitter', Georgia, serif;
    --ib-font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;

    --ib-pad:        clamp(1.25rem, 5vw, 6rem);
    --ib-mw:         1920px;
    --ib-radius:     1rem;
    --ib-radius-sm:  0.625rem;
    --ib-radius-pill:1.5rem;
}

/* ============================================================
   BASE
   ============================================================ */
body:not(.ea) {
    background: var(--ib-off-white);
    font-family: var(--ib-font-body);
    color: var(--ib-navy);
    margin: 0;
}

/* ============================================================
   ANNOUNCEMENT BAR (red top strip)
   ============================================================ */
.ib-announce {
    background: var(--ib-red);
    color: var(--ib-white);
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}
.ib-announce a {
    color: inherit;
    font-weight: 700;
}

/* ============================================================
   HEADER COLOR OVERRIDES (align to Figma exact values)
   ============================================================ */
.public-header__top           { background: var(--ib-navy); }
.public-header__main          { background: var(--ib-off-white); }
.public-header__top-inner     { font-family: var(--ib-font-body); }
.public-header__access a,
.public-header .legacy-locale-switcher__item { font-family: var(--ib-font-body); }
.public-header__nav > a,
.public-header__nav-item > a  {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    color: var(--ib-blue);
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 6px;
    text-decoration-thickness: 1.5px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.public-header__nav > a:hover,
.public-header__nav-item > a:hover,
.public-header__nav > a:focus-visible,
.public-header__nav-item > a:focus-visible {
    color: var(--ib-blue);
    text-decoration-line: underline;
}
.public-header__nav > a.is-active,
.public-header__nav-item > a.is-active {
    color: var(--ib-blue);
    font-weight: 600;
    text-decoration-line: underline;
}
.public-header__catalog       {
    font-family: var(--ib-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: var(--ib-radius);
}

/* ============================================================
   HEADER MOBILE — botón hamburguesa + panel lateral + overlay
   (nodo Figma 618:11363 "Menu mobile" para la barra cerrada, y
   618:11288 para el estado abierto: panel deslizante desde la
   derecha con los mismos enlaces del menú principal, más su
   propia cabecera logo + X — ver .public-header__nav-header)
   ============================================================ */
.public-header__menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

/* Barras "escalonadas" (nodo Figma 618:11363): no son del mismo ancho, van
   alineadas a la derecha y decrecen de arriba a abajo (100% / 65% / 27%). */
.public-header__menu-toggle-bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ib-navy);
    transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}
.public-header__menu-toggle-bar:nth-child(1) { width: 100%; }
.public-header__menu-toggle-bar:nth-child(2) { width: 65%; }
.public-header__menu-toggle-bar:nth-child(3) { width: 27%; }

/* Al abrir, las 3 barras forman una X — para eso las dos que quedan visibles
   recuperan el mismo ancho (si no, los dos brazos de la X saldrían de distinta
   longitud). */
.public-header__menu-toggle.is-open .public-header__menu-toggle-bar:nth-child(1) {
    width: 100%;
    transform: translateY(8px) rotate(45deg);
}
.public-header__menu-toggle.is-open .public-header__menu-toggle-bar:nth-child(2) {
    opacity: 0;
}
.public-header__menu-toggle.is-open .public-header__menu-toggle-bar:nth-child(3) {
    width: 100%;
    transform: translateY(-8px) rotate(-45deg);
}

/* Cabecera propia del panel móvil (logo + X), oculta fuera del panel deslizante
   — solo se muestra dentro de @media (max-width: 780px) más abajo. */
.public-header__nav-header {
    display: none;
}

.public-header__overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 52, 86, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 90;
}
.public-header__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.public-header__nav-mobile-extra {
    display: none;
}

body.ib-nav-lock {
    overflow: hidden;
}

/* ============================================================
   MEGA MENÚ "PRODUCTOS" (nodo Figma 845:7622 — navbar desktop, y
   845:8287 en mobile). Se genera automáticamente a partir de los
   departamentos y las novedades, no depende del menú configurable.
   ============================================================ */
/* .public-header__main (la barra del logo+nav, no el header entero con el aviso
   y la barra superior) pasa a ser la referencia de posicionamiento del megamenú:
   así "top:100%" cae justo pegado al borde inferior de la navbar (sin hueco, para
   que el :hover no se pierda al bajar el ratón) y "left:50%" lo centra respecto a
   toda la navbar en vez de respecto al link suelto "Productos". */
.public-header__main {
    position: relative;
}
/* .public-header__nav (y sus nav-items) solo miden lo que ocupa su propio texto
   y quedan centrados dentro de la navbar (align-items:center en la fila), muy
   por encima del borde inferior real de la barra. Se estira toda la cadena
   (nav → este item) a la altura completa para que la zona de :hover del item
   llegue justo hasta donde empieza el megamenú, sin hueco muerto que cruzar. */
.public-header__nav {
    align-self: stretch;
}
.public-header__nav-item--mega {
    position: static;
    display: flex;
    align-items: center;
    align-self: stretch;
    height: 100%;
}

/* El desplegable se ancla a su propio nav-item (position:relative heredado), no
   al ancho completo de la barra, por eso no necesita position:static como --mega.
   Sin align-self:stretch/height:100% (heredados de una época en que esto se abría
   por :hover y hacía falta estirar el item para no dejar una franja muerta al
   bajar el ratón — ya no aplica, el menú se abre por clic vía nav-dropdown
   controller): con ellos, dentro del panel móvil (.public-header__nav mide
   100vh) el item intentaba ocupar el alto completo del panel, dejando un hueco
   en blanco enorme debajo de "Nuestras marcas". */
.public-header__nav-item--dropdown {
    display: flex;
    align-items: center;
}

/* Flecha de "Productos"/"Nuestras marcas" — gira al abrir el desplegable
   (nodo Figma 618:11288: apunta hacia abajo cerrada, hacia arriba abierta).
   text-decoration: none para que el subrayado de hover/activo del enlace
   (.public-header__nav > a:hover, más abajo) se vea solo bajo el texto, no
   bajo el símbolo de la flecha. */
.public-header__nav-item > a > span[aria-hidden] {
    display: inline-block;
    margin-left: 0.35rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.public-header__nav-item.is-open > a > span[aria-hidden] {
    transform: rotate(180deg);
}

/* Desplegable simple ("Nuestras marcas" y similares) — mismo look que el mega
   menú de Productos (sombra, radio, tipografía) pero en formato lista compacta. */
.public-header__dropdown {
    top: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: var(--ib-radius-sm);
    box-shadow: 0 24px 48px rgba(30, 52, 86, 0.14);
}
.public-header__dropdown a {
    font-family: var(--ib-font-body);
    color: var(--ib-navy);
    border-radius: var(--ib-radius-sm);
}
.public-header__dropdown a:hover,
.public-header__dropdown a:focus-visible {
    background: var(--ib-off-white);
    color: var(--ib-navy);
}

.ib-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, calc(100% - 4rem));
    background: var(--ib-off-white);
    box-shadow: 0 24px 48px rgba(30, 52, 86, 0.14);
    padding: 2.5rem 3rem;
    gap: 3rem;
    z-index: 50;
}

.public-header__nav-item.is-open .ib-mega-menu {
    display: flex;
}

.ib-mega-menu__novedades {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-right: 2rem;
    border-right: 1px solid rgba(30, 52, 86, 0.12);
}

.ib-mega-menu__eyebrow {
    font-family: var(--ib-font-heading);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--ib-red);
    margin: 0;
}

.ib-mega-menu__novedades-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ib-mega-menu__novedad {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: var(--ib-blue);
}

.ib-mega-menu__novedad-label {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    font-weight: 500;
}
.ib-mega-menu__novedad:hover .ib-mega-menu__novedad-label { color: var(--ib-red); }

.ib-mega-menu__discover {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ib-blue);
    text-decoration: none;
}
.ib-mega-menu__discover:hover { color: var(--ib-red); }

.ib-mega-menu__departments {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.ib-mega-menu__column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* Línea separadora entre columnas de departamentos, igual que en el Figma
   (ahí aparece entre Novedades y la 1ª columna, y también entre cada columna) */
.ib-mega-menu__column:not(:first-child) {
    padding-left: 2rem;
    border-left: 1px solid rgba(30, 52, 86, 0.12);
}

.ib-mega-menu__dept {
    font-family: var(--ib-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ib-navy);
    line-height: 1.2;
    margin: 0;
    text-decoration: none;
}
.ib-mega-menu__dept:hover { color: var(--ib-red); }

.ib-mega-menu__dept-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ib-mega-menu__all {
    align-self: flex-end;
    margin-top: auto;
    font-family: var(--ib-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ib-blue);
    text-decoration: none;
}
.ib-mega-menu__all:hover { color: var(--ib-red); }

/* ============================================================
   HOME HERO — override site-slider for full-height left layout
   ============================================================ */
.ib-hero-section { position: relative; }
.ib-hero-section .site-slider { background: transparent; }

.ib-hero-section .site-slider__viewport {
    aspect-ratio: unset;
    height: clamp(480px, 55vw, 800px);
    max-height: 800px;
}

.ib-hero-section .site-slider__slide { background: var(--ib-light-gray); }

.ib-hero-section .site-slider__overlay {
    background: linear-gradient(to right, rgba(245, 245, 245, 0.96) 1%, rgba(245, 245, 245, 0.5) 60%, transparent 72%);
    justify-content: flex-start;
    align-items: center;
    padding: 0 var(--ib-pad);
}

.ib-hero-section .site-slider__copy {
    width: min(48%, 640px);
    text-align: left;
    color: var(--ib-navy);
}

.ib-hero-section .site-slider__copy img.site-slider__badge {
    top: -2.75rem;
    left: auto;
    right: 12%;
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.2));
}

.ib-hero-section .site-slider__copy .site-slider__eyebrow {
    color: var(--ib-red);
    font-family: var(--ib-font-heading);
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.ib-hero-section .site-slider__copy h2 {
    color: var(--ib-navy);
    font-family: var(--ib-font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
}

.ib-hero-section .site-slider__copy .site-slider__accent-title {
    color: var(--ib-navy);
    font-family: var(--ib-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.1;
    margin-top: .25rem;
}

.ib-hero-section .site-slider__copy p {
    color: var(--ib-blue);
    font-family: var(--ib-font-body);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5;
}

.ib-hero-section .site-slider__actions { justify-content: flex-start; }

.ib-hero-section .site-slider__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 2rem;
    border-radius: var(--ib-radius);
    background: var(--ib-red);
    color: var(--ib-white);
    font-family: var(--ib-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.ib-hero-section .site-slider__cta:hover,
.ib-hero-section .site-slider__cta:active { background: var(--ib-red-active); }

.ib-hero-section .site-slider__cta--secondary {
    background: transparent;
    color: var(--ib-red);
    box-shadow: inset 0 0 0 1.5px var(--ib-red);
}
.ib-hero-section .site-slider__cta--secondary:hover {
    background: var(--ib-navy);
    color: var(--ib-white);
    box-shadow: inset 0 0 0 1.5px var(--ib-navy);
}
.ib-hero-section .site-slider__cta--secondary:active { background: var(--ib-red-active); color: var(--ib-white); box-shadow: none; }

.ib-hero-section .site-slider__bullets {
    bottom: 1.5rem;
}

.ib-hero-section .site-slider__bullet {
    width: 8px;
    height: 8px;
    background: rgba(30, 52, 86, 0.25);
}

.ib-hero-section .site-slider__bullet.is-active {
    width: 20px;
    border-radius: 4px;
    background: var(--ib-red);
}

.ib-hero-section .site-slider__nav {
    background: rgba(30, 52, 86, 0.15);
}
.ib-hero-section .site-slider__nav:hover {
    background: rgba(30, 52, 86, 0.55);
}

/* ============================================================
   FEATURES STRIP
   ============================================================ */
.ib-features {
    padding: 3rem var(--ib-pad);
    max-width: var(--ib-mw);
    margin: 0 auto;
}

.ib-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.ib-feature {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.ib-feature__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ib-navy);
}
/* El icono se gestiona como imagen (Media) desde el editor HTML del admin. CKEditor
   puede envolver la imagen insertada en <figure class="image">, así que se neutraliza
   ese wrapper y se fuerza a que cualquier imagen (suelta o envuelta) llene el icono
   56x56 sin deformarse. */
.ib-feature__icon figure,
.ib-feature__icon .image {
    margin: 0;
}
.ib-feature__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ib-feature__title {
    font-family: var(--ib-font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 0.25rem;
    line-height: 1.1;
}

.ib-feature__text {
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    color: var(--ib-gray);
    margin: 0;
    line-height: 1.4;
}

/* ============================================================
   SHARED SECTION LABELS
   ============================================================ */
.ib-section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ib-section-label__line {
    display: block;
    width: 35px;
    height: 2px;
    background: var(--ib-red);
    flex-shrink: 0;
}

.ib-section-label__text {
    font-family: var(--ib-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ib-red);
    margin: 0;
    line-height: 1;
    letter-spacing: 0.06em;
}

.ib-section-title {
    font-family: var(--ib-font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 0.5rem;
    line-height: 1.05;
}

.ib-section-subtitle {
    font-family: var(--ib-font-body);
    font-size: 1.125rem;
    color: var(--ib-blue);
    margin: 0 0 2.5rem;
    line-height: 1.5;
}

/* Título de la sección "Marcas" de home, editable desde admin (campo home_head_brand).
   Mismo aspecto que .ib-section-title/.ib-section-subtitle pero sin depender de que el
   HTML pegado en el editor incluya esas clases — basta con <h2> y <p> a secas. */
.ib-section-heading h2 {
    font-family: var(--ib-font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 0.5rem;
    line-height: 1.05;
}

.ib-section-heading p {
    font-family: var(--ib-font-body);
    font-size: 1.125rem;
    color: var(--ib-blue);
    margin: 0 0 2.5rem;
    line-height: 1.5;
}

/* ============================================================
   BRAND LANDING HERO (páginas /marcas, /ibercook, /ibercook-natural)
   ============================================================ */
.brand-hero {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem var(--ib-pad) 2.5rem;
    text-align: center;
}

.brand-hero__eyebrow {
    font-family: var(--ib-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ib-red);
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

.brand-hero__title {
    font-family: var(--ib-font-heading);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 1rem;
    line-height: 1.05;
}

.brand-hero__subtitle {
    font-family: var(--ib-font-body);
    font-size: 1.25rem;
    color: var(--ib-blue);
    margin: 0;
    line-height: 1.5;
}

/* Cabecera de /marcas, editable desde admin (campo marcas_cabecera). Nodo Figma
   207:876: todo centrado — <h4> (eyebrow rojo, se repite dos veces: encima del hero
   y encima de "Elige tu marca"), <h1> (título hero), <p> (subtítulo, navy) y <h2>
   (título de la sección de marcas). Sin clases, el estilo va por etiqueta. */
.brand-index-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2.5rem;
}

.brand-index-heading h4 {
    font-family: var(--ib-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ib-red);
    margin: 0 0 0.5rem;
}

.brand-index-heading p + h4 {
    margin-top: 1rem;
}

.brand-index-heading h1 {
    font-family: var(--ib-font-heading);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 1rem;
    line-height: 1.05;
}

.brand-index-heading > p {
    font-family: var(--ib-font-body);
    font-size: 1.25rem;
    color: var(--ib-navy);
    margin: 0 0 2.5rem;
    line-height: 1.5;
}

.brand-index-heading h2 {
    font-family: var(--ib-font-heading);
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 0.5rem;
    line-height: 1.05;
}

/* ============================================================
   BRANDS SECTION
   ============================================================ */
.ib-brands {
    background: var(--ib-light-gray-t);
    padding: 3.5rem var(--ib-pad);
}

.ib-brands__inner {
    max-width: var(--ib-mw);
    margin: 0 auto;
}

.ib-brands__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Brand card — "Card destacada", nodo Figma 333:2293 (Default) / 48:669 (Hover) */
.ib-brand-card {
    background: var(--ib-off-white);
    border-radius: var(--ib-radius);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    min-height: 380px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s;
}
.ib-brand-card:hover { border-color: var(--ib-navy); }

.ib-brand-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    flex: 1 1 auto;
    padding: 2.25rem 2rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
/* El editor HTML del admin envuelve en <p> cualquier elemento suelto (span/a) que no
   esté ya dentro de un bloque — neutraliza el margen por defecto de ese <p> extra para
   que el HTML pegado desde la plantilla "Card destacada" no descuadre el espaciado. */
.ib-brand-card__info > p {
    margin: 0;
}

.ib-brand-card__tag {
    display: inline-flex;
    align-items: center;
    background: var(--ib-light-gray);
    border-radius: var(--ib-radius-pill);
    padding: 0.4rem 1rem;
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ib-navy);
    line-height: 1;
    align-self: flex-start;
}

.ib-brand-card__name {
    font-family: var(--ib-font-heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0;
    line-height: 1.05;
}

.ib-brand-card__sub {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ib-red);
    margin: 0;
    line-height: 1;
}

.ib-brand-card__sub--blue { color: var(--ib-blue); }

.ib-brand-card__description {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    color: var(--ib-blue);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.ib-brand-card__info .ib-btn {
    align-self: flex-start;
}

.ib-brand-card__image {
    flex: 0 0 auto;
    width: clamp(180px, 35%, 420px);
    overflow: hidden;
    position: relative;
}

.ib-brand-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.ib-brand-card:hover .ib-brand-card__image img { transform: scale(1.05); }

main.bg-platos {
    background-image: url('/images/bg-platos.webp');
    background-size: cover;
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.ib-newsletter {
    background: var(--ib-navy);
    position: relative;
    overflow: hidden;
    margin: 0 var(--ib-pad);
    border-radius: var(--ib-radius);
}

.ib-newsletter__inner {
    max-width: var(--ib-mw);
    margin: 0 auto;
    padding: 4rem var(--ib-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.ib-newsletter__eyebrow {
    font-family: var(--ib-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ib-red);
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

.ib-newsletter__title {
    font-family: var(--ib-font-heading);
    font-size: clamp(2.25rem, 3.8vw, 3.5rem);
    font-weight: 700;
    color: var(--ib-off-white);
    margin: 0 0 1rem;
    line-height: 1.05;
}

.ib-newsletter__subtitle {
    font-family: var(--ib-font-body);
    font-size: 1.25rem;
    color: rgba(245, 245, 245, 0.75);
    margin: 0;
    line-height: 1.55;
}

.ib-newsletter__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.ib-newsletter__field { display: flex; flex-direction: column; gap: 0.375rem; }
.ib-newsletter__field--full { grid-column: span 2; display: flex; flex-direction: column; gap: 0.375rem; }

.ib-newsletter__label {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(245, 245, 245, 0.8);
    line-height: 1;
}

.ib-newsletter__input,
.ib-newsletter__select {
    width: 100%;
    background: var(--ib-light-gray);
    border: none;
    border-radius: var(--ib-radius);
    padding: 0.8125rem 1.125rem;
    font-family: var(--ib-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ib-navy);
    appearance: none;
    height: 55px;
    box-sizing: border-box;
}
.ib-newsletter__input::placeholder { color: var(--ib-gray); }
.ib-newsletter__select { cursor: pointer; padding-right: 2.75rem; }

/* Select con flecha propia (mismo patrón que .ib-form__select-wrap) */
.ib-newsletter__select-wrap { position: relative; }
.ib-newsletter__select-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ib-blue);
}

.ib-newsletter__submit { grid-column: span 2; margin-top: 0.375rem; }

.ib-newsletter__flash {
    grid-column: span 2;
    padding: 0.75rem 1rem;
    border-radius: var(--ib-radius-sm);
    background: rgba(255, 255, 255, 0.14);
    color: var(--ib-off-white);
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
}
.ib-newsletter__flash--info { background: rgba(255, 255, 255, 0.1); font-weight: 500; }

.ib-newsletter__legal {
    margin: 0;
    font-family: var(--ib-font-body);
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgba(245, 245, 245, 0.55);
}

.ib-newsletter__checks { gap: 0.375rem; }
.ib-newsletter__check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}
.ib-newsletter__check-input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: none;
    border-radius: 3px;
    background: var(--ib-light-gray);
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
}
.ib-newsletter__check-input:checked { background: var(--ib-red); }
.ib-newsletter__check-input:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--ib-off-white);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.ib-newsletter__check-label {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    color: rgba(245, 245, 245, 0.85);
    line-height: 1.45;
}
.ib-newsletter__check-label a { color: var(--ib-off-white); text-decoration: underline; }

.ib-newsletter ul.form-errors {
    grid-column: span 2;
    margin: -0.5rem 0 0;
    padding-left: 1.1rem;
    color: #ffb4c0;
    font-family: var(--ib-font-body);
    font-size: 0.8125rem;
}
.ib-newsletter__field ul.form-errors { grid-column: auto; margin-top: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.ib-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ib-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.875rem 1.875rem;
    border-radius: var(--ib-radius);
    text-decoration: none;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: opacity 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
}
.ib-btn--primary {
    background: var(--ib-red);
    color: var(--ib-white);
}
.ib-btn--primary:hover,
.ib-btn--primary:active { background: var(--ib-red-active); }

.ib-btn--secondary,
.ib-btn--outline {
    background: transparent;
    color: var(--ib-red);
    box-shadow: inset 0 0 0 1.5px var(--ib-red);
}
.ib-btn--secondary:hover,
.ib-btn--outline:hover {
    background: var(--ib-navy);
    color: var(--ib-white);
    box-shadow: inset 0 0 0 1.5px var(--ib-navy);
}
.ib-btn--secondary:active,
.ib-btn--outline:active {
    background: var(--ib-red-active);
    color: var(--ib-white);
    box-shadow: none;
}

.ib-btn--navy {
    background: var(--ib-navy);
    color: var(--ib-white);
}
.ib-btn--navy:hover,
.ib-btn--navy:active { background: var(--ib-blue); }

/* ============================================================
   FORMULARIO GENÉRICO (.ib-form)
   Componente reutilizable para los formularios configurables (LandingForm) que se
   asocian como campo a cualquier tipo de página. Vive en ibercook.css (cargado en
   TODAS las páginas públicas) para que la maquetación sea SIEMPRE la misma sin
   depender del bundle CSS de cada página.

   Diferenciador por página: añadir un modificador al bloque, p. ej.
     {% include 'page/_landing_form.html.twig' with { ..., variant: 'ib-form-block--navy' } %}
   y sobreescribir lo que se quiera bajo ese modificador; o bien apoyarse en un
   ancestro que la página ya tenga (p. ej. `.ct-page .ib-form__input { ... }`).
   ============================================================ */
.ib-form-block {
    display: block;
}

.ib-form-block__title {
    font-family: var(--ib-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 0.75rem;
    line-height: 1.05;
}

.ib-form-block__intro {
    font-family: var(--ib-font-body);
    color: var(--ib-blue);
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.ib-form-block__notice,
.ib-form-block__success {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: var(--ib-radius-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.ib-form-block__notice {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.ib-form-block__success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.16);
}
.ib-form-block__success strong { display: block; margin-bottom: 0.35rem; }

.ib-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.ib-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.ib-form__group--full { grid-column: 1 / -1; }

.ib-form__label {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ib-blue);
}

/* Symfony añade class="required" a la label de cualquier campo obligatorio.
   Regla global (no scoped a .ib-form) para que aplique también a .cnt-form,
   .pub-modal y cualquier otro formulario público que cargue este CSS. */
label.required::after {
    content: ' *';
    color: var(--ib-red);
}

.ib-form__input,
.ib-form__select,
.ib-form__textarea {
    background: var(--ib-light-gray);
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-family: var(--ib-font-body);
    color: var(--ib-navy);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    outline: none;
    transition: background 0.15s, box-shadow 0.15s;
}
.ib-form__input::placeholder,
.ib-form__textarea::placeholder { color: var(--ib-gray); }

.ib-form__input:focus,
.ib-form__select:focus,
.ib-form__textarea:focus {
    background: #d8d8d8;
    box-shadow: 0 0 0 2px var(--ib-blue);
}

.ib-form__textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Select con flecha propia */
.ib-form__select-wrap { position: relative; }
.ib-form__select-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ib-blue);
}

/* Estado de error (form_errors de Symfony imprime .form-error-message / ul) */
.ib-form__group .form-error-message,
.ib-form__error,
.ib-form ul.form-errors li {
    font-size: 0.8125rem;
    color: var(--ib-red);
    margin: 0.125rem 0 0;
    list-style: none;
    padding: 0;
}
.ib-form__group:has(.form-error-message) .ib-form__input,
.ib-form__group:has(.form-error-message) .ib-form__select,
.ib-form__group:has(.form-error-message) .ib-form__textarea {
    box-shadow: 0 0 0 1.5px var(--ib-red);
}

/* Texto legal (RGPD), siempre después de los campos y antes de los checks */
.ib-form__legal {
    font-family: var(--ib-font-body);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ib-blue);
}
.ib-form__legal p { margin: 0; }

/* Checkboxes (privacidad / marketing) */
.ib-form__checks {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.ib-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.ib-form__check-input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 0.5px solid var(--ib-navy);
    border-radius: 3px;
    background: var(--ib-light-gray);
    appearance: none;
    cursor: pointer;
    margin-top: 1px;
    position: relative;
    transition: background 0.12s;
}
.ib-form__check-input:checked { background: var(--ib-navy); }
.ib-form__check-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: 2px solid var(--ib-off-white);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.ib-form__check-label {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    color: var(--ib-navy);
    line-height: 1.45;
}
.ib-form__check-label a { color: var(--ib-blue); font-style: italic; text-decoration: underline; }
/* La etiqueta admite HTML (label_html) y el admin suele escribir el texto dentro de
   un <p>; su margen por defecto desalineaba el texto respecto al checkbox. Se
   neutraliza el margen del label y de cualquier bloque que meta dentro. */
.ib-form__check-label label { margin: 0; cursor: pointer; }
.ib-form__check-label p { margin: 0; }

/* Honeypot anti-spam */
.ib-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ib-form__submit {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--ib-red);
    color: var(--ib-off-white);
    font-family: var(--ib-font-body);
    font-size: 1.125rem;
    font-weight: 500;
    border: none;
    border-radius: 14px;
    padding: 0.875rem 2rem;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.ib-form__submit:hover { background: var(--ib-red-active); }
.ib-form__submit:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 640px) {
    .ib-form__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.ib-footer {
    background: var(--ib-light-gray);
    border-radius: var(--ib-radius) var(--ib-radius) 0 0;
    padding: 3.5rem var(--ib-pad) 1.5rem;
    margin-top: 0;
}

.ib-footer__inner {
    max-width: var(--ib-mw);
    margin: 0 auto;
}

.ib-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem 4rem;
    padding-bottom: 2.5rem;
}

.ib-footer__brand-logo {
    margin-bottom: 1.25rem;
}
.ib-footer__brand-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.ib-footer__tagline {
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    color: var(--ib-blue);
    line-height: 1.55;
    margin: 0 0 1.5rem;
    max-width: 280px;
}

.ib-footer__social {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.ib-footer__social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ib-radius-sm);
    background: var(--ib-navy);
    color: var(--ib-white);
    text-decoration: none;
    transition: opacity 0.18s;
}
.ib-footer__social-link:hover { opacity: 0.8; }

.ib-footer__congalsa-label {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    color: var(--ib-gray);
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.ib-footer__congalsa-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.ib-footer__col-title {
    font-family: var(--ib-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 1.25rem;
    line-height: 1;
    text-transform: uppercase;
}

.ib-footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ib-footer__links a {
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ib-blue);
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s;
}
.ib-footer__links a:hover { color: var(--ib-red); }

.ib-footer__divider {
    height: 1px;
    background: rgba(30, 52, 86, 0.12);
    margin-bottom: 1.5rem;
}

.ib-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.ib-footer__copyright {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    color: var(--ib-gray);
    margin: 0;
}

.ib-footer__legal {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.ib-footer__legal a {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    color: var(--ib-gray);
    text-decoration: none;
    transition: color 0.15s;
}
.ib-footer__legal a:hover { color: var(--ib-navy); }

/* ============================================================
   MISC PAGE HELPERS
   ============================================================ */
.ib-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    background: var(--ib-light-gray);
    color: var(--ib-gray);
    font-family: var(--ib-font-body);
    font-size: 1rem;
    text-align: center;
    padding: 2rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .ib-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ib-brands__grid {
        grid-template-columns: 1fr;
    }
    .ib-newsletter__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .ib-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 780px) {
    /* Header: oculta la barra superior (acceso cliente + idioma, nodo Figma no la incluye
       en mobile) y convierte el menú principal en un panel deslizante desde la derecha */
    .public-header__top { display: none; }

    /* Barra compacta de una sola línea (nodo Figma 618:11363 "Menu mobile"): logo a
       la izquierda, buscador + hamburguesa a la derecha. Sin este override,
       .public-header__main-inner hereda flex-direction:column de base-site.css
       (pensado para apilar todo el menú) y .public-header__actions (ancho 100%)
       cae en una segunda línea debajo del logo en vez de compartir la primera. */
    .public-header__main-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 85px;
        padding-block: 0;
    }

    .public-header__brand {
        width: 150px;
    }

    .public-header__actions {
        width: auto;
        justify-content: flex-end;
        gap: 1.25rem;
    }

    .public-header__catalog:not(.public-header__catalog--mobile) { display: none; }

    .public-header__menu-toggle { display: flex; }

    .public-header__nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 95;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: min(85vw, 360px);
        height: 100vh;
        margin: 0;
        padding: 0 1.5rem 2rem;
        background: var(--ib-off-white);
        box-shadow: -12px 0 32px rgba(30, 52, 86, 0.18);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.28s ease;
    }
    .public-header__nav.is-open {
        transform: translateX(0);
    }

    /* Cabecera del panel (nodo Figma 618:11288): logo a la izquierda, X a la
       derecha, misma altura que la barra superior de fondo para que quede a
       juego visualmente. El botón reutiliza .public-header__menu-toggle con
       la clase .is-open fija en el twig (las 3 barras ya forman una X con esa
       clase) — aquí siempre está "abierto" porque el panel solo es visible
       cuando el menú lo está. */
    .public-header__nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 85px;
        margin: 0 -1.5rem;
        padding: 0 1.5rem;
        border-bottom: 1px solid rgba(30, 52, 86, 0.1);
        flex-shrink: 0;
    }
    .public-header__nav-header .public-header__brand {
        width: 130px;
    }

    .public-header__nav > a,
    .public-header__nav-item > a {
        width: 100%;
        padding: 0.75rem 0;
        font-size: 1.125rem;
        border-bottom: 1px solid rgba(30, 52, 86, 0.1);
    }

    .public-header__nav-item {
        display: flex;
        flex-direction: column;
    }

    /* El "estirado a toda la altura" del item "Productos" es cosa del hover de
       escritorio — en el panel móvil (columna vertical) hay que anularlo o el
       item ocuparía una altura enorme dentro del panel deslizante */
    .public-header__nav-item--mega {
        align-self: auto;
        height: auto;
    }

    /* Sin hover en táctil: clic en la flecha abre/cierra (mismo controlador
       nav-dropdown que desktop, con preventDefault + toggle .is-open — antes se
       forzaba siempre visible con !important y el clic no tenía ningún efecto). */
    .public-header__dropdown {
        position: static;
        display: none;
        flex-direction: column;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0.5rem 1rem;
        background: transparent;
    }
    .public-header__nav-item.is-open .public-header__dropdown {
        display: flex;
    }
    .public-header__dropdown a {
        padding: 0.5rem 0;
        font-size: 1rem;
    }

    /* Mega menú "Productos": mismo criterio, clic para abrir/cerrar en vez de
       siempre expandido, en una sola columna en vez de 4 */
    .ib-mega-menu {
        position: static;
        display: none;
        flex-direction: column;
        width: 100%;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0.5rem 0 0.5rem 1rem;
        gap: 1.5rem;
    }
    .public-header__nav-item.is-open .ib-mega-menu {
        display: flex;
    }

    .ib-mega-menu__novedades {
        flex: 1 1 auto;
        padding-right: 0;
        padding-bottom: 1.25rem;
        border-right: none;
        border-bottom: 1px solid rgba(30, 52, 86, 0.12);
    }

    /* Novedades en mobile (nodo Figma 618:11001): foto arriba, título debajo,
       en vez de la fila miniatura+texto de desktop. Como como mucho hay 1 o 2
       productos (limit:2 en ProductNavigationProvider), cada uno ocupa la mitad
       del ancho aunque solo haya uno — de ahí la rejilla de 2 columnas fija en
       vez de flex-wrap. */
    .ib-mega-menu__novedades-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .ib-mega-menu__novedad {
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
        text-align: center;
    }
    .ib-mega-menu__discover {
        align-self: center;
        margin-top: 0.25rem;
    }
    .ib-mega-menu__departments {
        display: block;
    }
    .ib-mega-menu__column {
        display: contents;
    }
    .ib-mega-menu__dept-group {
        padding: 0.65rem 0;
        gap: 0.5rem;
        border-bottom: 1px solid rgba(30, 52, 86, 0.08);
    }
    .ib-mega-menu__dept {
        font-size: 1.0625rem;
    }
    .ib-mega-menu__all {
        display: block;
        padding: 0.65rem 0;
        font-size: 1.0625rem;
        border-bottom: 1px solid rgba(30, 52, 86, 0.08);
    }

    .public-header__nav-mobile-extra {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(30, 52, 86, 0.12);
    }

    .public-header__nav-mobile-access {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }
    .public-header__nav-mobile-access a {
        font-family: var(--ib-font-body);
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--ib-navy);
        text-decoration: none;
    }

    .public-header__nav-mobile-extra .legacy-locale-switcher {
        justify-content: flex-start;
    }

    .ib-features__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Slider hero en móvil: se mantiene el overlay a pantalla completa con el
       texto abajo, pero el fondo pasa de un velo casi opaco (0.88, que borraba
       la foto) a un degradado que solo cubre la parte inferior — arriba la
       imagen se ve nítida y abajo hay contraste suficiente para el texto navy. */
    .ib-hero-section .site-slider__overlay {
        background: linear-gradient(
            to top,
            rgba(245, 245, 245, 0.97) 0%,
            rgba(245, 245, 245, 0.85) 30%,
            rgba(245, 245, 245, 0.35) 58%,
            rgba(245, 245, 245, 0) 82%
        );
        align-items: flex-end;
        padding: 0 1.25rem 2rem;
    }
    .ib-hero-section .site-slider__copy {
        width: 100%;
    }

    /* Brand cards (home + /marcas): imagen arriba a todo el ancho y texto debajo,
       en vez de imagen al lado (nodo Figma 492:3563, "Card destacado" mobile) */
    .ib-brand-card {
        flex-direction: column;
    }
    .ib-brand-card__image {
        order: -1;
        width: 100%;
        height: 188px;
    }

    /* Newsletter: margen algo más ajustado que var(--ib-pad) en mobile */
    .ib-newsletter {
        margin: 0 1rem;
    }
    .ib-newsletter__inner {
        padding: 2.5rem 1.5rem;
    }
    .ib-newsletter__form {
        grid-template-columns: 1fr;
    }
    .ib-newsletter__field--full,
    .ib-newsletter__submit {
        grid-column: span 1;
    }

    /* Footer: el bloque de marca pasa a ocupar el ancho completo por encima de los
       enlaces, y "Productos"/"Soluciones" quedan a 2 columnas (nodo 645:5952) */
    .ib-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }
    .ib-footer__brand {
        grid-column: 1 / -1;
    }
    .ib-footer__brand-logo img {
        height: 40px;
    }
    .ib-footer__legal {
        gap: 1.25rem;
    }

    .ib-static-page__prose h2 { font-size: 1.5rem; }
    .ib-static-page__prose h3 { font-size: 1.2rem; }
}

/* ============================================================
   PÁGINA ESTÁTICA (tipo de página por defecto — avisos legales,
   política de privacidad/cookies, cualquier página de solo texto)
   ============================================================ */
.ib-static-page {
    padding: clamp(2.5rem, 6vw, 5rem) var(--ib-pad) 5rem;
}

.ib-static-page__inner {
    max-width: 860px;
    margin: 0 auto;
}

.ib-static-page__hero {
    margin: 0 0 2.25rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--ib-light-gray);
}

.ib-static-page__title {
    font-family: var(--ib-font-heading);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    color: var(--ib-navy);
    line-height: 1.05;
    margin: 0;
}

.ib-static-page__prose {
    font-family: var(--ib-font-body);
    font-size: 1.0625rem;
    color: var(--ib-blue);
    line-height: 1.75;
}

.ib-static-page__prose h2 {
    font-family: var(--ib-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ib-navy);
    margin: 2.5rem 0 1rem;
    line-height: 1.15;
}
.ib-static-page__prose h2:first-child { margin-top: 0; }

.ib-static-page__prose h3 {
    font-family: var(--ib-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ib-navy);
    margin: 2rem 0 0.85rem;
    line-height: 1.2;
}

.ib-static-page__prose p { margin: 0 0 1.15rem; }

.ib-static-page__prose ul,
.ib-static-page__prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
}
.ib-static-page__prose li { margin-bottom: 0.5rem; }

.ib-static-page__prose a {
    color: var(--ib-red);
    text-decoration: underline;
}
.ib-static-page__prose a:hover { color: var(--ib-red-active); }

.ib-static-page__prose strong { color: var(--ib-navy); font-weight: 700; }

.ib-static-page__prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
}
.ib-static-page__prose table td,
.ib-static-page__prose table th {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--ib-light-gray);
    text-align: left;
}

.ib-static-page__prose img {
    max-width: 100%;
    border-radius: var(--ib-radius-sm);
    margin: 1rem 0;
}