/* ==========================================================================
   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;
}