/* ==========================================================================
   CAMBIOS DE ESTILO - HD AP LATAM
   Implementación PPTX v2 — Verificado en hdacl.s1.cl
   ========================================================================== */


/* ──────────────────────────────────────────────
   1. TAREA 1: Espacio entre header-banner y contenido en páginas de Productos
   Slide 3 del PPTX: "Dar más espacio entre el header y el texto"
   ────────────────────────────────────────────── */
.single-productos .post-area {
    margin-top: 40px !important;
}

/* FIX: Submenú de productos — top: 103px era para header de 103px (header actual = 86px)
   Elimina el gap gris de 17px entre el header principal y la barra del submenú. */
body.productos-template-default .menu-productos:not(.sticky) {
    top: 86px !important;
}
/* Admin-bar: cuando el admin bar de WP está activo (32px extra) */
body.admin-bar.productos-template-default .menu-productos:not(.sticky) {
    top: 118px !important;  /* 86 + 32 */
}

.wpb_gallery_slidesflickity_static_height_style .nectar-flickity:not(.masonry) .flickity-viewport {

    margin:5px !important;
}
/* NOTA: No se modifica .single-productos .container-wrap padding para no afectar el submenú pegajoso */

/* CORRECCIÓN: El container-wrap dentro de #contacto tiene inline style #3A3A3C
   que crea un bloque oscuro sobre el fondo #6B6256. Forzamos transparente. */
#contacto .container-wrap,
#contacto .container-wrap .vc_column-inner {
    background-color: transparent !important;
}


/* ──────────────────────────────────────────────
   2. TAREA 2: Distribuidores — Colores de fondo
   Slide 5 del PPTX: barra oscura #393836 y fondo bege #F7F2EB
   ────────────────────────────────────────────── */

/* Barra oscura (selector de región — actualmente #303030, debe ser #393836) */
.page-template-template-distribuidores .row-bg.using-bg-color {
    background-color: #393836 !important;
}

/* Fondo gris claro (column-bg-overlay con inline style #efefef → debe ser #F7F2EB) */
.page-template-template-distribuidores .column-bg-overlay {
    background-color: #F7F2EB !important;
}


/* ──────────────────────────────────────────────
   3. TAREA 3: Especificadores — Colores de fondo
   Slide 5 del PPTX: mismos colores que distribuidores
   ────────────────────────────────────────────── */

/* Barra oscura (actualmente #303030, debe ser #393836) */
.page-template-template-especificadores .row-bg.using-bg-color {
    background-color: #393836 !important;
}

/* Fondo gris claro (column-bg-overlay con inline style #efefef → debe ser #F7F2EB) */
.page-template-template-especificadores .column-bg-overlay {
    background-color: #F7F2EB !important;
}


/* ──────────────────────────────────────────────
   4. TAREA 4: Buscador — Tipografía menos pesada
   Slide 6 del PPTX: "Noto Sans Regular" en el buscador
   NOTA: Inspeccionado en vivo — ya está en font-weight: 400.
   Se mantiene como refuerzo para evitar regresiones.
   ────────────────────────────────────────────── */
#search-outer input[type="text"],
#search-outer input[type="search"],
#search-outer .search-text,
#search-outer span,
#search-outer h2,
.search-form input[type="text"] {
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: 400 !important;
    text-transform: none;
}


/* ──────────────────────────────────────────────
   5. TAREA 5 (Opcional): Consistencia distancia H1 ↔ banner
   Slide 2 del PPTX: distancia consistente en todas las secciones
   Valor medido en Folding/Sliding: ~138px
   ────────────────────────────────────────────── */
/* NOTA: No se modifica padding en .project-title para no afectar el submenú pegajoso de productos */


/* ──────────────────────────────────────────────
   6. Breadcrumbs en Productos (ya hecho, se mantiene como refuerzo)
   Slide 3: sin sombra dura en breadcrumbs
   ────────────────────────────────────────────── */
.single-productos .rank-math-breadcrumb,
.single-productos .yoast-breadcrumb,
.single-productos .breadcrumbs,
.single-productos #breadcrumbs {
    text-shadow: none !important;
    box-shadow: none !important;
}


/* ──────────────────────────────────────────────
   7. Tipografía H1 global (ya hecho, refuerzo)
   Slide 2 y 7 del PPTX: H1 = Playfair Display
   ────────────────────────────────────────────── */
h1,
.project-title h1,
#page-header-bg h1,
.page-header-no-bg h1,
.container-wrap h1 {
    font-family: 'Playfair Display', serif !important;
}

/* ──────────────────────────────────────────────
   8. TAREA 8: Ajustes de alineación y espaciado del Footer
   Alineación vertical y separación de las columnas del menú secundario
   ────────────────────────────────────────────── */
@media only screen and (min-width: 691px) {
  /* Asegurar que las cabeceras de columnas se alineen al mismo nivel superior */
  #footer-outer #footer-widgets .col ul#menu-menu-secundario > li {
    padding-top: 4px !important;
  }
  
  #footer-outer #footer-widgets .col ul#menu-menu-secundario > li > a {
    padding-top: 0px !important;
  }

  /* Espaciar las columnas dinámicamente usando flexbox */
  #footer-outer #footer-widgets .col ul#menu-menu-secundario {
    display: flex !important;
    justify-content: space-between !important;
  }
}


/* ──────────────────────────────────────────────
   9. TAREA 9: Tamaños responsive de títulos y breadcrumbs
   en páginas de Líneas y Categorías (header-wrap-cat)
   Se igualan con los tamaños de la ficha de Producto en móvil
   ────────────────────────────────────────────── */

/* Tablet: 691px - 999px */
@media only screen and (max-width: 999px) and (min-width: 691px) {
  .header-wrap-cat #page-header-bg h1 {
    font-size: 28px !important;
    line-height: 32px !important;
  }
  .header-wrap-cat .linea-title,
  .header-wrap-cat .linea-title .rank-math-breadcrumb,
  .header-wrap-cat .linea-title .rank-math-breadcrumb p,
  .header-wrap-cat .linea-title .rank-math-breadcrumb a,
  .header-wrap-cat .linea-title .rank-math-breadcrumb span {
    font-size: 15px !important;
    line-height: 20px !important;
  }
}

/* Móvil: hasta 690px */
@media only screen and (max-width: 690px) {
  .header-wrap-cat #page-header-bg h1 {
    font-size: 26px !important;
    line-height: 30px !important;
  }
  .header-wrap-cat .linea-title,
  .header-wrap-cat .linea-title .rank-math-breadcrumb,
  .header-wrap-cat .linea-title .rank-math-breadcrumb p,
  .header-wrap-cat .linea-title .rank-math-breadcrumb a,
  .header-wrap-cat .linea-title .rank-math-breadcrumb span {
    font-size: 13px !important;
    line-height: 18px !important;
  }
}


/* ──────────────────────────────────────────────
   10. TAREA 10: Header de ficha de Proyecto en móvil
   Evita que el header colapse a 72px (altura del contenido)
   y restaura una altura adecuada para ver la imagen de fondo,
   breadcrumbs, tags y título.
   Se usa vh en vez de % para #page-header-bg porque el theme
   Nectar fuerza height:auto en móvil con alta especificidad,
   y el 100% contra min-height del padre no resuelve correctamente.
   ────────────────────────────────────────────── */
@media only screen and (max-width: 999px) {
  body.single-proyectos #page-header-wrap {
    height: 55vh !important;
    min-height: 380px !important;
  }
  /* Altura explícita en vh para evitar dependencia del padre */
  body.single-proyectos #page-header-bg {
    height: 55vh !important;
    min-height: 380px !important;
  }
  /* Container y row deben llenar el header para que el posicionamiento
     absoluto de .span_61 (bottom: 50px) funcione correctamente */
  body.single-proyectos #page-header-bg .container,
  body.single-proyectos #page-header-bg .row {
    height: 100% !important;
  }
}

/* Menu lateral (desktop y mobile) */ 
#slide-out-widget-area {
  background-color: #BB5726 !important;
}

/*
 * Sombra suave para textos de headers sobre imagen.
 * Para ajustar el efecto global, modificar solo esta variable.
 */
:root {
  --hdap-header-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
} 
 
/* Headers estandar: paginas, lineas, categorias, proyectos y articulos. */
#page-header-bg h1,
#page-header-bg h2,
#page-header-bg h3,
#page-header-bg h4,
#page-header-bg h5,
#page-header-bg h6,
#page-header-bg .subheader,
#page-header-bg .linea-title,
#page-header-bg .linea-title *,
#page-header-bg .section-title,
#page-header-bg .section-title *,
#page-header-bg .author-section,
#page-header-bg .author-section * {
  text-shadow: var(--hdap-header-text-shadow) !important;
}

/* Hero fullscreen de fichas de producto. */
#inicio.nectar_fullscreen_rows .nectar-slider-wrap h1,
#inicio.nectar_fullscreen_rows .nectar-slider-wrap .linea-title,
#inicio.nectar_fullscreen_rows .nectar-slider-wrap .linea-title * {
  text-shadow: var(--hdap-header-text-shadow) !important;
}


/* ──────────────────────────────────────────────
   11. TAREA 11: Menú superior responsivo (5 items o más)
   Ajuste dinámico para cuando el menú tiene 5 o más items
   (Argentina, Chile, México, etc.), disminuyendo espaciado,
   tamaño de fuente y márgenes de botones en resoluciones
   de escritorio para evitar superposición con buscador y botones.
   ────────────────────────────────────────────── */

/* ─── 5 ITEMS O MÁS (Ajustes responsivos para menús de 5+ items) ─── */

/* Pantallas entre 1280px y 1399px (ej. 1366px, 1280px) */
@media only screen and (min-width: 1280px) and (max-width: 1399px) {
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) > li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(5)) > li > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+5) > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+5) ~ li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+5) > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+5) ~ li > a {
    margin-left: 10px !important;
    margin-right: 10px !important;
    font-size: 13.5px !important;
    letter-spacing: 0.5px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons,
  #header-outer[data-format] #top nav:has(> ul.sf-menu > li:nth-child(5)) ul.buttons {
    margin-left: 16px !important;
  }
}

/* Pantallas entre 1120px y 1279px (ej. 1200px, 1152px) */
@media only screen and (min-width: 1120px) and (max-width: 1279px) {
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) > li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(5)) > li > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+5) > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+5) ~ li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+5) > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+5) ~ li > a {
    margin-left: 6px !important;
    margin-right: 6px !important;
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
    line-height: 16px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons,
  #header-outer[data-format] #top nav:has(> ul.sf-menu > li:nth-child(5)) ul.buttons {
    margin-left: 12px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons #login-libtn .nectar-button.small,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(5)) #login-libtn .nectar-button.small {
    padding: 5px 12px 5px 26px !important;
    font-size: 11px !important;
  }
}

/* Pantallas entre 1000px y 1119px (ej. 1024px, 1000px) */
@media only screen and (min-width: 1000px) and (max-width: 1119px) {
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) > li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(5)) > li > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+5) > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+5) ~ li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+5) > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+5) ~ li > a {
    margin-left: 3px !important;
    margin-right: 3px !important;
    font-size: 11px !important;
    letter-spacing: 0px !important;
    line-height: 14px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons,
  #header-outer[data-format] #top nav:has(> ul.sf-menu > li:nth-child(5)) ul.buttons {
    margin-left: 8px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons #login-libtn .nectar-button.small,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(5)) #login-libtn .nectar-button.small {
    padding: 4px 8px 4px 22px !important;
    font-size: 10px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons #search-btn,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(5)) #search-btn {
    margin-right: 6px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(5)) ~ ul.buttons #login-libtn,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(5)) #login-libtn {
    margin-left: 6px !important;
  }
}

/* ─── 6 ITEMS O MÁS (Ajustes más compactos cuando son 6+ items) ─── */

/* Regla base (> 1400px): cuando el menú tiene 6 o más items */
#header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
#header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
#header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
#header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a,
#header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
#header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a {
  margin-left: 10px !important;
  margin-right: 10px !important;
  font-size: 13.5px !important;
  letter-spacing: 0.5px !important;
}

/* Pantallas entre 1280px y 1400px para 6+ items */
@media only screen and (min-width: 1280px) and (max-width: 1400px) {
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a {
    margin-left: 6px !important;
    margin-right: 6px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.3px !important;
    line-height: 17px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons,
  #header-outer[data-format] #top nav:has(> ul.sf-menu > li:nth-child(6)) ul.buttons {
    margin-left: 16px !important;
  }
}

/* Pantallas entre 1120px y 1279px para 6+ items */
@media only screen and (min-width: 1120px) and (max-width: 1279px) {
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a {
    margin-left: 4px !important;
    margin-right: 4px !important;
    font-size: 11.5px !important;
    letter-spacing: 0px !important;
    line-height: 15px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons,
  #header-outer[data-format] #top nav:has(> ul.sf-menu > li:nth-child(6)) ul.buttons {
    margin-left: 10px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons #login-libtn .nectar-button.small,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(6)) #login-libtn .nectar-button.small {
    padding: 5px 12px 5px 26px !important;
    font-size: 11px !important;
  }
}

/* Pantallas entre 1000px y 1119px para 6+ items */
@media only screen and (min-width: 1000px) and (max-width: 1119px) {
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu:has(> li:nth-child(6)) > li > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
  #header-outer #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) > a,
  #header-outer[data-lhe="animated_underline"] #top nav > ul.sf-menu > li:nth-last-child(n+6) ~ li > a {
    margin-left: 2px !important;
    margin-right: 2px !important;
    font-size: 10.5px !important;
    letter-spacing: 0px !important;
    line-height: 14px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons,
  #header-outer[data-format] #top nav:has(> ul.sf-menu > li:nth-child(6)) ul.buttons {
    margin-left: 6px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons #login-libtn .nectar-button.small,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(6)) #login-libtn .nectar-button.small {
    padding: 4px 8px 4px 22px !important;
    font-size: 10px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons #search-btn,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(6)) #search-btn {
    margin-right: 6px !important;
  }
  #header-outer #top nav > ul.sf-menu:has(> li:nth-child(6)) ~ ul.buttons #login-libtn,
  #header-outer #top nav:has(> ul.sf-menu > li:nth-child(6)) #login-libtn {
    margin-left: 6px !important;
  }
}