/* ==========================================================================
   header-footer.css — estilos compartidos de header y footer (todas las páginas)
   Se carga DESPUÉS de styles.css.
   ========================================================================== */

/* ##########################################################################
   BEGIN · MENÚ MÓVIL + ACORDEÓN  (movido desde el <style> de index.html)
   Si ya tienes un header-footer.css propio en tu servidor, NO lo reemplaces:
   pega este bloque completo al FINAL de tu archivo.
   ########################################################################## */

/* ============================================================
   MENÚ MÓVIL — acordeón cerrado por defecto
   Solo se muestran las secciones principales. Los submenús se
   despliegan al tocar cada encabezado.
   ============================================================ */
@media(max-width:980px){
  .mobile-nav .mobile-accordion{
    display:block;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .mobile-nav .mobile-nav-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 0;
    margin:0;
    border:0;
    background:transparent;
    color:var(--bronce);
    font:inherit;
    font-size:12px;
    line-height:1.2;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }

  .mobile-nav .mobile-nav-chevron{
    flex:0 0 auto;
    color:var(--bronce);
    font-size:18px;
    line-height:1;
    transition:transform .22s ease;
  }

  .mobile-nav .mobile-nav-submenu{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .28s ease, opacity .22s ease;
  }

  .mobile-nav .mobile-nav-submenu > *{
    overflow:hidden;
  }

  .mobile-nav .mobile-accordion.is-open .mobile-nav-submenu{
    grid-template-rows:1fr;
    opacity:1;
  }

  .mobile-nav .mobile-accordion.is-open .mobile-nav-chevron{
    transform:rotate(180deg);
  }

  .mobile-nav .mobile-nav-submenu a{
    display:block;
    border-bottom:0;
    padding:10px 0 10px 16px;
    font-size:14px;
    opacity:.72;
  }

  .mobile-nav .mobile-nav-submenu a:last-child{
    padding-bottom:15px;
  }
}


/* ============================================================
   MENÚ MÓVIL — versión compacta
   Las secciones quedan juntas y cada submenú se despliega justo
   debajo del encabezado que se tocó.
   ============================================================ */
@media(max-width:980px){
  .mobile-nav{
    justify-content:flex-start !important;
    gap:0 !important;
    padding-top:78px !important;
    padding-bottom:24px !important;
  }

  .mobile-nav .mobile-accordion,
  .mobile-nav > a{
    flex:0 0 auto !important;
    min-height:0 !important;
    margin:0 !important;
  }

  .mobile-nav .mobile-accordion{
    padding:0 !important;
  }

  .mobile-nav .mobile-nav-toggle{
    min-height:0 !important;
    padding:16px 0 !important;
    margin:0 !important;
  }

  .mobile-nav .mobile-nav-submenu{
    margin:0 !important;
    padding:0 !important;
  }

  .mobile-nav .mobile-nav-submenu > *{
    min-height:0 !important;
  }

  .mobile-nav .mobile-nav-submenu a{
    padding:10px 0 10px 16px !important;
    margin:0 !important;
  }

  .mobile-nav > a{
    padding:16px 0 !important;
  }

  .mobile-nav .mobile-utility-row{
    margin-top:12px !important;
  }
}


/* ============================================================
   CORRECCIÓN DEFINITIVA MENÚ MÓVIL
   El submenú no ocupa altura cuando está cerrado.
   ============================================================ */
@media(max-width:980px){
  .mobile-nav{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:72px 20px 24px !important;
  }

  .mobile-nav .mobile-accordion{
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .mobile-nav .mobile-nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:16px 0 !important;
  }

  /* Cerrado: no reserva absolutamente ningún espacio */
  .mobile-nav .mobile-nav-submenu{
    display:none !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
  }

  /* Abierto: aparece inmediatamente debajo del título */
  .mobile-nav .mobile-accordion.is-open .mobile-nav-submenu{
    display:block !important;
  }

  .mobile-nav .mobile-nav-submenu a{
    display:block !important;
    margin:0 !important;
    padding:10px 0 10px 14px !important;
    border:0 !important;
    font-size:14px !important;
    line-height:1.3 !important;
  }

  .mobile-nav .mobile-nav-submenu a:last-child{
    padding-bottom:14px !important;
  }

  .mobile-nav > a{
    flex:0 0 auto !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:16px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .mobile-nav .mobile-utility-row{
    flex:0 0 auto !important;
    margin-top:12px !important;
  }
}


/* Ajuste visual: "Distribuidores" igual al resto de secciones principales */
@media(max-width:980px){
  .mobile-nav > a[href="distribuidores.html"], .mobile-nav > a[href="distributors.html"]{
    color:var(--bronce) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:1.2px !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
    padding:16px 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Hamburguesa siempre por encima del panel (home con header transparente).
   En index.html la fila principal del header crea su propio contexto de
   apilamiento (z-index:1) y dejaba el botón de cerrar (X) debajo del panel.
   El logo conserva z-index:1 para seguir viéndose sobre las capas del header.
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  header#siteNav .main-nav-row{ z-index:auto !important; }
  header#siteNav .main-nav-row .brand{ position:relative; z-index:1; }
}


/* END · MENÚ MÓVIL + ACORDEÓN */

/* ============================================================
   MENÚ MÓVIL — título navegable + flecha independiente
   El texto de cada sección abre su página principal; únicamente
   la flecha despliega/contrae el submenú de anclas.
   ============================================================ */
@media(max-width:980px){
  .mobile-nav .mobile-nav-row{
    display:flex !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    gap:0 !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .mobile-nav .mobile-nav-parent-link{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:16px 0 !important;
    margin:0 !important;
    border:0 !important;
    color:var(--bronce) !important;
    opacity:1 !important;
    font:inherit !important;
    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:1.2px !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
    text-decoration:none !important;
  }

  .mobile-nav .mobile-nav-row .mobile-nav-toggle{
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    cursor:pointer !important;
  }
}


/* ============================================================
   FASE 1 · Usabilidad y accesibilidad sin rediseño visual
   ============================================================ */
.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;
}
button.btn{font-family:inherit;}
a.btn, a.link-arrow, a.hero-text-link, a.sol-cta{ text-decoration:none; }
.btn:focus-visible, .link-arrow:focus-visible, .hero-text-link:focus-visible, .sol-cta:focus-visible,
.nav-burger:focus-visible, .mobile-nav a:focus-visible, .mobile-nav button:focus-visible,
[data-route][role="link"]:focus-visible{ outline:2px solid var(--bronce); outline-offset:3px; }

@media(max-width:980px){
  /* Hit-area de 44px manteniendo visualmente las tres líneas del icono en ~30px. */
  .nav-burger{ width:44px !important; height:44px !important; padding:10px 7px !important; }
  .mobile-nav .mobile-nav-row .mobile-nav-toggle{ min-height:44px !important; }
  .mobile-nav .mobile-utility-row a,
  .mobile-nav .mobile-utility-row button{ min-height:44px; }
}

@media(max-width:640px){
  [data-page="home"] .hero .home-slider-pause{ width:44px !important; height:44px !important; }
  .pv-close-btn{ width:44px !important; height:44px !important; }
}


/* ============================================================
   FASE 2 · Usabilidad: legibilidad, estados, idioma y controles
   Mantiene diseño/estructura; mejora claridad y accesibilidad.
   ============================================================ */
@media(max-width:980px){
  /* Lectura más cómoda en navegación móvil sin cambiar jerarquía. */
  .mobile-nav .mobile-nav-parent-link,
  .mobile-nav .mobile-nav-toggle,
  .mobile-nav > a[href="distribuidores.html"], .mobile-nav > a[href="distributors.html"]{font-size:13px !important;}
  .mobile-utility-row a,
  .mobile-utility-row button{font-size:13px !important;}
}

/* Microtexto funcional: sube un punto de lectura donde sí afecta tareas. */
.cf-row label{font-size:12px;}
.finder-group-label{font-size:13px;}
.finder-count,.dict-count,.equip-count{font-size:14px;}
.finder-reset{font-size:14px; min-height:40px;}
.equip-filter{font-size:13px; min-height:40px;}
.cafi-tab{
  font-size:13px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
}

/* Foco visible en controles de filtros, carruseles y diccionario. */
.equip-filter:focus-visible,.equip-arrow:focus-visible,.equip-dot:focus-visible,
.sol-dots button:focus-visible,.finder-opt:focus-visible,.finder-reset:focus-visible,
.finder-slider-arrow:focus-visible,.finder-slider-dot:focus-visible,
.cafi-tab:focus-visible,.az-letter:focus-visible{
  outline:2px solid var(--bronce);
  outline-offset:3px;
}

/* Estado deshabilitado inequívoco en navegación de carruseles. */
.equip-arrow:disabled,.finder-slider-arrow:disabled{
  opacity:.42;
  cursor:not-allowed;
}

@media(max-width:640px){
  .breadcrumb ol{font-size:13px;}
  .cf-row label{font-size:12px;}
  .cafi-tab{font-size:13px; min-height:44px;}
  .az-letter{min-width:34px; min-height:34px; width:34px; height:34px;}
}

/* Usuarios que solicitan menos movimiento: elimina desplazamientos y transiciones
   no esenciales sin ocultar contenido. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  .equip-track,.mobile-nav .mobile-nav-chevron,.sol-track,
  .finder-card-inner,.finder-slider-dot,.equip-dot{
    transition:none !important;
  }
}

/* ============================================================
   SISTEMA TIPOGRÁFICO HOMOLOGADO · prueba visual CAFIVER
   Escala acordada: reduce variaciones sin alterar estructura.
   ============================================================ */
:root{
  --type-h1:52px;
  --type-h2:40px;
  --type-h3:28px;
  --type-h4:20px;
  --type-lead:18px;
  --type-body:16px;
  --type-secondary:15px;
  --type-button:14px;
  --type-nav:13px;
  --type-small:13px;
  --type-micro:12px;
}

/* Títulos principales */
.hero h1,
.pv-marcas-header h1{
  font-size:var(--type-h1) !important;
}

/* Títulos de sección principales */
.section-head h2,
.history-head h2,
[data-page="home"] .home-paths-head h2,
[data-page="home"] .home-about-bridge h2,
.story-text h2,
.susten-stat-block h2{
  font-size:var(--type-h2) !important;
}

/* Títulos de bloque */
.fork-card h3,
.portfolio-box h3,
.article-body h3,
.nl-box h3,
.cf-intro h3,
[data-page="home"] .biz-card h3,
[data-page="home"] .home-path-card h3{
  font-size:var(--type-h3) !important;
}

/* Títulos de cards */
.biz-card h4,
.pillar h4,
.brand-card h4,
.sol-card h4,
.equip-info h4,
.audience-card h4,
.sector-text h4,
.sub-card h4,
.blog-list-item h4,
.recipe-card h4,
.article-body h4{
  font-size:var(--type-h4) !important;
}

/* Leads / bajadas */
.hero p.lead,
.pv-marcas-header p.lead,
.section-head p{
  font-size:var(--type-lead) !important;
}

/* Párrafo principal */
.article-body > p,
.article-body > ul,
.article-body > ol,
.legal p,
.cf-intro p{
  font-size:var(--type-body) !important;
}

/* Párrafo secundario y contenido de cards */
.fork-card p,
.biz-card p,
.pillar p,
.ind-link-card p,
.product-card p,
.brand-card p,
.line-card p,
.recog-card p,
.sustain-card p,
.sol-card p,
.incl-item p,
.step p,
.audience-card p,
.sector-text p,
.sub-card p,
.blog-list-item p,
.recipe-card p{
  font-size:var(--type-secondary) !important;
}

/* Botones y CTAs */
.btn,
.link-arrow,
.hero-text-link,
.sol-cta,
.finder-reset{
  font-size:var(--type-button) !important;
}

/* Navegación de escritorio */
nav.links > a,
nav.links .nav-item > a,
.nav-item .dropdown a{
  font-size:var(--type-nav) !important;
}

/* Inputs y campos: 16px evita zoom automático en iOS */
input,
select,
textarea,
.pv-search-input,
.nl-form input{
  font-size:var(--type-body) !important;
}

/* Etiquetas, filtros, breadcrumbs */
.breadcrumb ol,
.cf-row label,
.finder-group-label,
.equip-filter,
.cafi-tab,
.finder-count,
.dict-count,
.equip-count{
  font-size:var(--type-small) !important;
}

/* Microtexto funcional */
.eyebrow,
.fork-card .tag,
.brand-card .role,
.recog-card .tag,
.sustain-card .tag,
.pv-stat-lbl,
.foot-col h5{
  font-size:var(--type-micro) !important;
}

/* Footer */
footer p,
footer a,
.foot-col a,
.foot-col p{
  font-size:14px !important;
}

@media(max-width:980px){
  :root{
    --type-h1:44px;
    --type-h2:34px;
    --type-h3:26px;
    --type-h4:20px;
    --type-lead:17px;
    --type-body:16px;
    --type-secondary:15px;
    --type-button:14px;
    --type-nav:13px;
    --type-small:13px;
    --type-micro:12px;
  }

  .mobile-nav .mobile-nav-parent-link,
  .mobile-nav .mobile-nav-toggle,
  .mobile-nav > a,
  .mobile-nav > a[href="distribuidores.html"], .mobile-nav > a[href="distributors.html"]{
    font-size:var(--type-nav) !important;
  }
  .mobile-nav .mobile-nav-submenu a{
    font-size:14px !important;
  }
}

@media(max-width:640px){
  :root{
    --type-h1:36px;
    --type-h2:30px;
    --type-h3:24px;
    --type-h4:18px;
    --type-lead:16px;
    --type-body:16px;
    --type-secondary:15px;
    --type-button:14px;
    --type-nav:14px;
    --type-small:13px;
    --type-micro:12px;
  }

  .mobile-nav .mobile-nav-parent-link,
  .mobile-nav .mobile-nav-toggle,
  .mobile-nav > a,
  .mobile-nav > a[href="distribuidores.html"], .mobile-nav > a[href="distributors.html"],
  .mobile-nav .mobile-nav-submenu a{
    font-size:var(--type-nav) !important;
  }
}

/* ============================================================
   HEADER DESKTOP — réplica visual del INDEX (ancho completo)
   Corrige el centrado/compression heredado por .wrap en internas.
   ============================================================ */
@media (min-width:981px){
  header.nav.cafiver-split-nav .utility-bar .wrap,
  header.nav.cafiver-split-nav .main-nav-row .wrap{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:56px !important;
    padding-right:56px !important;
  }

  header.nav.cafiver-split-nav .utility-bar .wrap{
    min-height:60px !important;
  }

  header.nav.cafiver-split-nav .main-nav-row .wrap{
    min-height:80px !important;
    gap:34px !important;
  }

  header.nav.cafiver-split-nav .main-nav-row .brand img{
    height:68px !important;
    width:auto !important;
  }

  header.nav.cafiver-split-nav .main-nav-row nav.links{
    margin-left:auto !important;
    justify-content:flex-end !important;
    gap:20px !important;
    flex-wrap:nowrap !important;
  }

  header.nav.cafiver-split-nav .main-nav-row nav.links > a,
  header.nav.cafiver-split-nav .main-nav-row .nav-item > a{
    font-size:15px !important;
    letter-spacing:.1px !important;
  }

  header.nav.cafiver-split-nav .utility-nav a,
  header.nav.cafiver-split-nav .utility-nav button{
    font-size:14px !important;
  }

  header.nav.cafiver-split-nav .utility-nav{
    gap:14px !important;
  }

  header.nav.cafiver-split-nav .utility-nav .utility-contact,
  header.nav.cafiver-split-nav .utility-nav .utility-language,
  header.nav.cafiver-split-nav .utility-nav .utility-buy{
    min-height:40px !important;
  }

  header.nav.cafiver-split-nav .utility-nav .utility-buy{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* === CAFIVER MOBILE MENU · ESTRUCTURA FINAL 2026-10-05 === */
@media(max-width:980px){
  /* Inicio forma parte de la navegación principal y ocupa la primera posición. */
  .mobile-nav > .mobile-home-link{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:16px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    background:transparent !important;
    color:var(--bronce) !important;
    font-family:inherit !important;
    font-size:var(--type-nav,14px) !important;
    line-height:1.2 !important;
    letter-spacing:1.2px !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
    text-decoration:none !important;
    opacity:1 !important;
  }
  .mobile-nav > .mobile-home-link.active{color:var(--bronce) !important;}

  /* Separa visualmente las rutas comerciales de Cultura del café / CAFIVER. */
  .mobile-nav .mobile-secondary-start{
    margin-top:10px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(201,168,76,.26) !important;
  }

  /* Utilidades inferiores: Contacto + Ayuda / ES / tienda. */
  .mobile-nav .mobile-utility-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-top:18px !important;
    padding-top:18px !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }
  .mobile-nav .mobile-utility-row .mobile-buy{grid-column:1/-1 !important;}

  /* En el diseño de referencia los accesos flotantes siguen visibles con el panel abierto. */
  .cart-fab,.wa-fab{z-index:505 !important;}
}

/* ============================================================
   AJUSTE MÓVIL · UTILIDADES CON ANCHO AUTOMÁTICO
   Solo afecta Contacto, Ayuda, ES e Ir a la tienda dentro del
   panel móvil. Los botones dejan de estirarse al 100%.
   ============================================================ */
@media(max-width:980px){
  .mobile-nav .mobile-utility-row{
    display:flex !important;
    flex-wrap:wrap !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }

  .mobile-nav .mobile-utility-row > a,
  .mobile-nav .mobile-utility-row > button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .mobile-nav .mobile-utility-row .mobile-buy{
    grid-column:auto !important;
    width:auto !important;
    flex:0 0 auto !important;
  }
}

/* ============================================================
   HEADER DESKTOP · CORRECCIÓN DE LOGO SIN SOLAPAMIENTO
   Reserva un carril propio para la marca y evita que el primer
   elemento del menú invada visualmente el logotipo.
   ============================================================ */
@media (min-width:981px){
  header.nav.cafiver-split-nav .main-nav-row .brand{
    flex:0 0 260px !important;
    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;
    margin-right:10px !important;
    overflow:visible !important;
  }

  header.nav.cafiver-split-nav .main-nav-row .brand img{
    display:block !important;
    height:48px !important;
    width:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  header.nav.cafiver-split-nav .main-nav-row nav.links{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin-left:0 !important;
  }
}

@media (max-width:1450px) and (min-width:1181px){
  header.nav.cafiver-split-nav .utility-bar .wrap,
  header.nav.cafiver-split-nav .main-nav-row .wrap{
    padding-left:36px !important;
    padding-right:36px !important;
  }
  header.nav.cafiver-split-nav .main-nav-row .wrap{gap:22px !important;}
  header.nav.cafiver-split-nav .main-nav-row .brand{
    flex-basis:220px !important;
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
  }
  header.nav.cafiver-split-nav .main-nav-row .brand img{height:44px !important;}
  header.nav.cafiver-split-nav .main-nav-row nav.links{gap:14px !important;}
  header.nav.cafiver-split-nav .main-nav-row .nav-item > a{
    font-size:13.2px !important;
  }
}

@media (max-width:1180px) and (min-width:981px){
  header.nav.cafiver-split-nav .utility-bar .wrap,
  header.nav.cafiver-split-nav .main-nav-row .wrap{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  header.nav.cafiver-split-nav .main-nav-row .wrap{gap:16px !important;}
  header.nav.cafiver-split-nav .main-nav-row .brand{
    flex-basis:190px !important;
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
  }
  header.nav.cafiver-split-nav .main-nav-row .brand img{height:40px !important;}
  header.nav.cafiver-split-nav .main-nav-row nav.links{gap:9px !important;}
  header.nav.cafiver-split-nav .main-nav-row .nav-item > a{
    font-size:11.8px !important;
    letter-spacing:0 !important;
  }
}


/* ===== Ajustes de accesibilidad y usabilidad (auditoría) ===== */
.skip-link{position:absolute;left:12px;top:-200px;z-index:10000;background:#fff;color:#1b1b1b;padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.2);}
.skip-link:focus{top:12px;outline:none;}
:focus-visible{outline:3px solid #b08d57;outline-offset:3px;border-radius:2px;}
.cfx-prefill{font-size:14px;line-height:1.5;color:#1b1b1b;background:#f6efe6;border-left:3px solid #b08d57;padding:8px 12px;margin:8px 0 0;border-radius:4px;}

/* Footer: logo a todo el ancho y 6 columnas = grupos del menú principal */
#contacto-footer .foot-top{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:40px 28px !important;}
#contacto-footer .foot-logo{grid-column:1 / -1;}
#contacto-footer .foot-col h5 a{color:var(--bronce);opacity:1;display:inline;}
#contacto-footer .foot-col h5 a:hover{text-decoration:underline;}
#contacto-footer .foot-utility{display:flex;flex-wrap:wrap;gap:6px 22px;}
#contacto-footer .foot-utility a{color:rgba(255,255,255,.6);text-decoration:none;}
#contacto-footer .foot-utility a:hover{color:var(--bronce);}
@media (max-width:1100px){ #contacto-footer .foot-top{grid-template-columns:repeat(3,minmax(0,1fr)) !important;} }
@media (max-width:640px){ #contacto-footer .foot-top{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }


/* ===== Ronda 2 ===== */
/* Boletín: bloque oscuro sobrio con filete dorado; campo blanco de alto contraste */
.nl-box{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) !important;gap:40px !important;align-items:center !important;background-color:#3D3D3D !important;background-image:url('images/img-59c73f0132a76797.png') !important;background-repeat:no-repeat !important;background-position:right center !important;background-size:850px !important;border:0 !important;border-radius:8px !important;box-shadow:none !important;padding:52px 56px !important;margin:0 !important;width:auto !important;max-width:none !important;color:#fff !important;}
.nl-box .eyebrow{color:#b08d57 !important;letter-spacing:.22em !important;font-size:12px !important;}
.nl-box h3{color:#fff !important;font-size:clamp(24px,2.6vw,30px) !important;font-weight:600 !important;line-height:1.2 !important;margin:10px 0 0 !important;}
.nl-box p{color:rgba(255,255,255,.74) !important;font-size:15px !important;font-weight:400 !important;line-height:1.6 !important;margin:12px 0 0 !important;max-width:420px;}
.nl-form{display:flex !important;gap:10px !important;margin:0 !important;align-items:stretch !important;}
.nl-form label.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.nl-form input{flex:1 1 auto !important;min-width:0 !important;height:54px !important;padding:0 18px !important;background:#fff !important;color:#1b1b1b !important;border:1px solid #fff !important;border-radius:8px !important;font-family:inherit !important;font-size:16px !important;}
.nl-form input::placeholder{color:#6b6b6b !important;opacity:1 !important;}
.nl-form input:focus-visible{outline:3px solid #b08d57 !important;outline-offset:2px !important;}
.nl-form .btn{flex:0 0 auto !important;height:54px !important;padding:0 28px !important;border-radius:8px !important;margin:0 !important;width:auto !important;white-space:nowrap;}
@media (max-width:900px){
  .nl-box{grid-template-columns:1fr !important;gap:24px !important;padding:40px 24px !important;}
}
@media (max-width:640px){
  .nl-box{margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;width:100vw !important;max-width:100vw !important;padding:40px 20px !important;}
  .nl-form{flex-direction:column !important;gap:12px !important;}
  .nl-form input{width:100% !important;flex:0 0 auto !important;}
  html body main .nl-box .nl-form .btn.btn.btn.btn.btn.btn.btn{width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;}
  .nl-form input:focus{border-color:#b08d57 !important;}
}

/* Footer: logo a la izquierda ocupando dos filas; 6 grupos en 3x2; redes más grandes */
#contacto-footer .foot-top{grid-template-columns:minmax(200px,240px) repeat(3,minmax(0,1fr)) !important;gap:52px 44px !important;}
#contacto-footer .foot-logo{grid-column:auto !important;grid-row:span 2;}
#contacto-footer .foot-logo .foot-tagline{max-width:260px;}
#contacto-footer .foot-social{gap:12px !important;}
#contacto-footer .foot-social a{width:46px;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:1 !important;color:#fff !important;}
#contacto-footer .foot-social a:hover{border-color:#b08d57;color:#b08d57 !important;}
#contacto-footer .foot-social svg{width:22px !important;height:22px !important;}
@media (max-width:1100px){
  #contacto-footer .foot-top{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  #contacto-footer .foot-logo{grid-column:1 / -1 !important;grid-row:auto;}
}
@media (max-width:640px){
  #contacto-footer .foot-top{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:36px 22px !important;}
  #contacto-footer .foot-logo{grid-column:1 / -1 !important;}
}


/* ===== Ronda 3: Montserrat alojada en el sitio (sin saltos de maquetación) ===== */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-latin-wght-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Respaldo con el ancho y la altura de línea de Montserrat, por si la fuente tarda más del tope */
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:107%;ascent-override:90.5%;descent-override:23.5%;line-gap-override:0%;}
/* La página no se pinta hasta que la fuente está lista (tope de 1.5 s, definido en el <head>) */
html.fonts-loading body{opacity:0;}