/* ==========================================
   Header V1 - Mobile Specific Styles
   ========================================== */
@media (max-width: 1023px) {
  .pd-header-home__actions {
    gap: var(--pd-spacing-2) !important;
  }
  
  .pd-button.stroke {
    height: 32px !important;
    padding: var(--pd-spacing-3) !important;
    width: auto !important;

  }
  
  .pd-button {
    font-size: var(--pd-font-size-sm) !important;
  }
  
  .pd-search-box__overlay {
    margin-top: 134px !important;
    z-index: 10 !important;
  }
  
  .pd-search-box__container {
    margin-top: 0px !important;
  }
  
  .header-v1-banner {
    margin-top: -64px !important;
  }

  /* ==========================================
     SEARCH BOX - Estilos del input wrapper para Mobile
     Protegidos de sobrescrituras por otros CSS
     ========================================== */
  
  /* Search Box - Input wrapper específico del search box (Mobile) */
  .pd-search-box__input-wrapper .pd-input__wrapper--search {
    border: none !important;
    border-bottom: 1px solid var(--pd-container-700) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 0 !important;
  }

  .pd-search-box__input-wrapper .pd-input__wrapper--search:focus-within {
    border: none !important;
    border-bottom: 1px solid var(--pd-secondary-500) !important;
    box-shadow: none !important;
  }

  /* Search Box - Input field font size específico para proteger de sobrescrituras (Mobile) */
  /* En mobile usa var(--pd-font-size-sm) como en el home */
  .pd-search-box__input-wrapper .pd-input__wrapper--search .pd-input__field {
    font-size: var(--pd-font-size-sm) !important;
  }
}

/* ==========================================
   header-v1-header
   ========================================== */
/* Mobile First */
.header-v1-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header-v1-header__top {
  flex-shrink: 0;
}

.header-v1-header__top pd-top-header {
  flex-shrink: 0;
}

.header-v1-header__main {
  flex-shrink: 0;
}

.header-v1-header__main pd-header-home {
  display: block;
  width: 100%;
}

/* Mobile First */
.header-v1-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header-v1-header__top {
  flex-shrink: 0;
}

.header-v1-header__top pd-top-header {
  flex-shrink: 0;
}

.header-v1-header__main {
  flex-shrink: 0;
}

.header-v1-header__main pd-header-home {
  display: block;
  width: 100%;
}



/* Header V1 Header - Logo in bottom row - visible on mobile, hidden on desktop by default */
.header-v1-header .pd-header-home__brand--bottom-row {
  display: flex;
}

/* Botones - Padding Mobile */
.header-v1-header .pd-button--padding-mobile-3 {
  --pd-button-horizontal-padding: var(--pd-spacing-3);
}

/* Botones - Padding Desktop */
@media (min-width: 1024px) {
  .header-v1-header .pd-button--padding-desktop-6 {
    --pd-button-horizontal-padding: var(--pd-spacing-6);
  }
  
  .header-v1-header .pd-button--padding-desktop-10 {
    --pd-button-horizontal-padding: var(--pd-spacing-10);
  }
}

/* Botones - Width Auto */
.header-v1-header .pd-button--width-auto {
  width: auto !important;
}

/* Botón "Cotiza ahora" - Variante según tamaño de pantalla */
/* Mobile: stroke (sobrescribe la clase primary) */
.header-v1-header .pd-button.primary[data-variant-mobile="stroke"][data-variant-desktop="primary"] {
  background-color: transparent !important;
  border: 2px solid var(--pd-neutral-000) !important;
  color: var(--pd-neutral-000) !important;
}

.header-v1-header .pd-button.primary[data-variant-mobile="stroke"][data-variant-desktop="primary"]:hover {
  background-color: var(--pd-neutral-000) !important;
  border-color: var(--pd-neutral-000) !important;
  color: var(--pd-neutral-900) !important;
}

/* Desktop: primary */
@media (min-width: 1024px) {
  .header-v1-header .pd-button.primary[data-variant-mobile="stroke"][data-variant-desktop="primary"] {
    background: var(--pd-primary-500) !important;
    border: none !important;
    color: var(--pd-neutral-000) !important;
  }
  
  .header-v1-header .pd-button.primary[data-variant-mobile="stroke"][data-variant-desktop="primary"]:hover {
    background: var(--pd-primary-800) !important;
    color: var(--pd-neutral-000) !important;
  }
}

@media (min-width: 1024px) {
  .header-v1-header .pd-header-home__brand--bottom-row {
    display: none;
  }
  
  /* Header V1 Header - Padding and max-width for top row (desktop only) */
  .header-v1-header .pd-header-home__top-row {
    padding: var(--pd-spacing-8) var(--pd-spacing-5) !important;
    max-width: 1320px !important;
  }
  
  /* Header V1 Header - Padding and max-width for bottom row (desktop only) */
  .header-v1-header .pd-header-home__bottom-row {
    padding: var(--pd-spacing-4) var(--pd-spacing-5) !important;
    max-width: 1320px !important;
  }
}

/* Search box icon - 24px on mobile */
.pd-search-box__search-button .pd-search-box__search-icon,
.pd-search-box__search-button img.pd-search-box__search-icon {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

/* Search box icon - 36px on desktop */
@media (min-width: 1024px) {
  .pd-search-box__search-button .pd-search-box__search-icon,
  .pd-search-box__search-button img.pd-search-box__search-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
}

/* ==========================================
   Header Search Button - Hover Effect
   ========================================== */
/* Cambiar icono de búsqueda en hover (white -> blue) */
.pd-header__icon-button--search,
.pd-header-home__icon-button--search {
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.pd-header__icon-button--search img,
.pd-header-home__icon-button--search img {
  transition: opacity 0.3s ease;
}

/* Hover: cambiar a icono azul */
.pd-header__icon-button--search:hover img,
.pd-header-home__icon-button--search:hover img {
  content: url('../icons/icon-search-blue.svg');
}

/* ==========================================
   header-v1-banner
   ========================================== */
/* Mobile First */
.header-v1-banner {
  width: 100%;
  margin-top: -72px;
}

.header-v1-banner__container {
  width: 100%;
}

/* Tablet (≥ 768px y ≤ 1023px) */ 
@media (min-width: 768px) and (max-width: 1023px) {
  .header-v1-banner {
    margin-top: -80px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .header-v1-banner {
    margin-top: -193px;
  }
}

/* Mobile First */
.pd-banner-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.pd-banner-carousel__container {
  display: flex;
  transition: transform 0.4s ease-in-out;
  width: 100%;
  position: relative;
  min-height: 460px;
}

.pd-banner-carousel__container--fade {
  transition: opacity 0.4s ease-in-out;
}

.pd-banner-carousel__slide {
  flex-shrink: 0;
  opacity: 1;
  position: relative;
  transition: opacity 0.4s ease-in-out;
  width: 100%;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-banner-carousel__container--fade .pd-banner-carousel__slide {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 460px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-banner-carousel__container--fade {
  min-height: 460px;
}

.pd-banner-carousel__container--fade .pd-banner-carousel__slide--active {
  opacity: 1;
  position: relative;
}

.pd-banner-carousel__background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.pd-banner-carousel__background::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.pd-banner-carousel__content {
  align-items: flex-start;
  color: var(--pd-neutral-000);
  display: flex;
  flex-direction: column;
  gap: var(--pd-spacing-4);
  height: calc(100% - 92px);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 var(--pd-spacing-4);
  position: relative;
  width: 100%;
  z-index: 1;
}

.pd-banner-carousel__content-container {
  display: flex;
  flex-direction: column;
  gap: var(--pd-spacing-3);
  margin-top: 50px;
}

.pd-banner-carousel__container--fade .pd-banner-carousel__slide .pd-banner-carousel__content {
  justify-content: space-between;
  height: calc(100% - 92px);
  min-height: calc(460px - 92px);
}

.pd-banner-carousel__title {
  color: var(--pd-neutral-000);
  font-family: var(--pd-font-primary);
  font-size: var(--pd-font-size-2xl);
  font-weight: var(--pd-font-weight-regular);
  line-height: 38px;
  margin: 0;
  width: 100%;
}

.pd-banner-carousel__description {
  color: var(--pd-neutral-000);
  font-family: var(--pd-font-secondary);
  font-size: var(--pd-font-size-md);
  font-weight: var(--pd-font-weight-normal);
  line-height: 26px;
  margin: 0;
}

.pd-banner-carousel__button {
  display: flex;
  justify-content: center;
  margin-top: var(--pd-spacing-4);
  width: 100%;
}

.pd-banner-carousel__navigation {
  align-items: center;
  bottom: var(--pd-spacing-6);
  display: flex;
  gap: var(--pd-spacing-2);
  justify-content: center;
  left: 0;
  padding: 0 var(--pd-spacing-4);
  position: absolute;
  right: 0;
  z-index: 2;
}

.pd-banner-carousel__bullet {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 1000px;
  cursor: pointer;
  height: 8px;
  padding: 0;
  transition: all 0.3s ease;
  width: 12px;
}

.pd-banner-carousel__bullet--active {
  background-color: var(--pd-secondary-500);
  border-radius: 4px;
  width: 36px;
}

.pd-banner-carousel__bullet:hover {
  background-color: var(--pd-secondary-500);
}

/* Tablet (≥ 768px y ≤ 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pd-banner-carousel__slide {
    min-height: 500px;
  }

  .pd-banner-carousel__container {
    min-height: 500px;
  }

  .pd-banner-carousel__container--fade {
    min-height: 500px;
  }

  .pd-banner-carousel__container--fade .pd-banner-carousel__slide {
    min-height: 500px;
  }

  .pd-banner-carousel__container--fade .pd-banner-carousel__slide .pd-banner-carousel__content {
    min-height: auto;
    height: auto;
    justify-content: center;
  }

  .pd-banner-carousel__content {
    height: auto;
    padding: var(--pd-spacing-12) var(--pd-spacing-6);
  }

  .pd-banner-carousel__title {
    font-size: var(--pd-font-size-6xl);
    line-height: 48px;
  }

  .pd-banner-carousel__description {
    font-size: var(--pd-font-size-xl);
    line-height: 40px;
  }

  .pd-banner-carousel__button {
    width: auto;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .pd-banner-carousel__slide {
    min-height: 620px;
  }

  .pd-banner-carousel__container {
    min-height: 620px;
  }

  .pd-banner-carousel__container--fade {
    min-height: 620px;
  }

  .pd-banner-carousel__container--fade .pd-banner-carousel__slide {
    min-height: 620px;
  }

  .pd-banner-carousel__container--fade .pd-banner-carousel__slide .pd-banner-carousel__content {
    min-height: auto;
    height: auto;
    justify-content: center;
  }

  .pd-banner-carousel__content {
    height: auto;
    justify-content: center;
    margin-top: 150px;
    padding: var(--pd-spacing-16) 0;
  }

  .pd-banner-carousel__content-container {
    gap: var(--pd-spacing-4);
    margin-top: 0;
  }

  .pd-banner-carousel__title {
    font-size: var(--pd-font-size-8xl);
    line-height: 54px;
    width: 750px;
  }

  .pd-banner-carousel__description {
    font-size: var(--pd-font-size-5xl);
    line-height: 48px;
  }

  .pd-banner-carousel__button {
    width: auto;
  }
}

/* Header V1 Banner - Background images for each slide */
.pd-banner-carousel__slide--home-banner-01 .pd-banner-carousel__background {
  background-image: url(../../../shared/assets/img/home/home-banner-01.png);
}

.pd-banner-carousel__slide--home-banner-02 .pd-banner-carousel__background {
  background-image: url(../../../shared/assets/img/home/home-banner-02.png);
}

.pd-banner-carousel__slide--home-banner-03 .pd-banner-carousel__background {
  background-image: url(../../../shared/assets/img/home/home-banner-03.png);
}

/* Center button label in banner */
.header-v1-banner .pd-banner-carousel__button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-v1-banner .pd-banner-carousel__button .pd-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-v1-banner .pd-banner-carousel__button .pd-button__label {
  text-align: center;
}

/* Header V1 Banner - Full width button on mobile */
@media (max-width: 767px) {
  .header-v1-banner .pd-banner-carousel__button .pd-button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Header V1 Banner - Content padding (tablet and desktop only) */
@media (min-width: 768px) {
  .header-v1-banner .pd-banner-carousel__content {
    padding: var(--pd-spacing-16) 0 !important;
  }
}

/* Header V1 Banner - Slide padding for fade container (desktop only) */
@media (min-width: 1024px) {
  .header-v1-banner .pd-banner-carousel__container--fade .pd-banner-carousel__slide {
    padding: 0 var(--pd-spacing-5) !important;
  }
}

/* ==========================================
   Megamenu y Search Box - Ajuste de posición según estado de scroll
   ========================================== */
/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  /* ==========================================
     MEGAMENU - Posición base y con scroll
     ========================================== */
  
  /* Posición base del megamenu (sin scroll) - Header completo con top bar */
  .pd-megamenu__content {
    top: var(--pd-megamenu-top-offset, 82px) !important;
  }

  /* Ajuste del megamenu cuando el header está en scroll (sin top bar) */
  .pd-header--scrolled ~ * .pd-megamenu__content,
  .pd-header-home--scrolled ~ * .pd-megamenu__content,
  body.header-scrolled .pd-megamenu__content {
    top: 82px !important;
  }

  /* ==========================================
     SEARCH BOX - Posición base y con scroll
     ========================================== */
  
  /* Posición base del search box (sin scroll) - Header completo con top bar */
  .pd-search-box__content {
    top: var(--pd-search-box-top-offset, 82px) !important;
  }

  /* Ajuste del search box cuando el header está en scroll (sin top bar) */
  body.header-scrolled .pd-search-box__content {
    top: 82px !important;
  }
  
  /* Variable CSS del search box */
  .pd-search-box__overlay[data-search-box-overlay]:not([style*="display: flex"]) {
    --pd-search-box-top-offset: 153px !important;
  }

  /* ==========================================
     AJUSTES ESPECÍFICOS PARA HOME (layout-home desde PHP)
     ========================================== */
  
  /* Megamenu en home sin scroll - Header completo (top bar + top row + divider + bottom row) */
  body.layout-home .pd-megamenu__content {
    top: 166px !important;
  }

  /* Megamenu en home con scroll - Solo bottom row visible */
  body.layout-home.header-scrolled .pd-megamenu__content {
    top: 82px !important;
  }

  /* Search box en home sin scroll - Header completo */
  body.layout-home .pd-search-box__content {
    top: 166px !important;
  }

  /* Search box en home con scroll - Solo bottom row visible */
  body.layout-home.header-scrolled .pd-search-box__content {
    top: 82px !important;
  }

  /* ==========================================
     SEARCH BOX - Estilos del input wrapper
     Protegidos de sobrescrituras por otros CSS
     ========================================== */
  
  /* Search Box - Input wrapper específico del search box */
  .pd-search-box__input-wrapper .pd-input__wrapper--search {
    border: none !important;
    border-bottom: 1px solid var(--pd-container-700) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 0 !important;
  }

  .pd-search-box__input-wrapper .pd-input__wrapper--search:focus-within {
    border: none !important;
    border-bottom: 1px solid var(--pd-secondary-500) !important;
    box-shadow: none !important;
  }

  /* Search Box - Input font size */
  .pd-search-box__input-wrapper .pd-input__wrapper--search {
    --pd-input-font-size: 28px;
  }

  /* Search Box - Input field font size específico para proteger de sobrescrituras */
  .pd-search-box__input-wrapper .pd-input__wrapper--search .pd-input__field {
    font-size: var(--pd-input-font-size, 28px) !important;
  }
}