.elementor-kit-21{--e-global-color-primary:#003676;--e-global-color-secondary:#97EEE8;--e-global-color-text:#4A5565;--e-global-color-accent:#FF6B6B;--e-global-color-5e07ad7:#4299E1;--e-global-color-7d58b14:#002A5C;--e-global-color-5bb7f01:#D1FCF9;--e-global-color-7d28255:#39C6BC;--e-global-color-1808fdb:#FFFFFF;--e-global-color-da5e125:#F7FAFC;--e-global-color-fc3411b:#F9FAFB;--e-global-color-0d83916:#F0ECE9;--e-global-color-63f8d72:#EEE9E5;--e-global-color-f45c706:#4299E126;--e-global-color-e10c044:#E3F0FB;--e-global-typography-primary-font-family:"Work Sans";--e-global-typography-primary-font-size:1rem;--e-global-typography-primary-line-height:160%;--e-global-typography-secondary-font-family:"Courgette";--e-global-typography-text-font-family:"Work Sans";--e-global-typography-text-font-size:1.125rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:140%;--e-global-typography-accent-font-family:"Work Sans";--e-global-typography-accent-font-weight:700;--e-global-typography-9cce2f4-font-family:"Amatic SC";--e-global-typography-9cce2f4-font-weight:700;--e-global-typography-9cce2f4-line-height:1.25px;--e-global-typography-0db2c15-font-size:1.45rem;--e-global-typography-0db2c15-font-weight:400;--e-global-typography-0db2c15-line-height:140%;--e-global-typography-191ae89-font-size:1rem;--e-global-typography-191ae89-line-height:140%;--e-global-typography-2f0c39a-font-size:0.87rem;--e-global-typography-2f0c39a-font-weight:400;--e-global-typography-2f0c39a-line-height:140%;--e-global-typography-0087a93-font-size:2rem;--e-global-typography-0087a93-font-weight:700;--e-global-typography-0087a93-line-height:130%;background-color:#FFFFFF;color:var( --e-global-color-text );font-family:"Work Sans", Sans-serif;font-size:1.125rem;font-weight:400;line-height:140%;}.elementor-kit-21 button,.elementor-kit-21 input[type="button"],.elementor-kit-21 input[type="submit"],.elementor-kit-21 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Work Sans", Sans-serif;font-size:1rem;font-weight:400;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:6px 6px 6px 6px;padding:12px 24px 12px 24px;}.elementor-kit-21 button:hover,.elementor-kit-21 button:focus,.elementor-kit-21 input[type="button"]:hover,.elementor-kit-21 input[type="button"]:focus,.elementor-kit-21 input[type="submit"]:hover,.elementor-kit-21 input[type="submit"]:focus,.elementor-kit-21 .elementor-button:hover,.elementor-kit-21 .elementor-button:focus{background-color:var( --e-global-color-7d58b14 );color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:6px 6px 6px 6px;}.elementor-kit-21 e-page-transition{background-color:#FFBC7D;}.elementor-kit-21 p{margin-bottom:2rem;}.elementor-kit-21 a{color:#003676;}.elementor-kit-21 a:hover{color:var( --e-global-color-5e07ad7 );}.elementor-kit-21 h1{color:var( --e-global-color-primary );font-size:3.5rem;font-weight:700;line-height:120%;}.elementor-kit-21 h2{color:var( --e-global-color-primary );font-size:2.5rem;font-weight:700;line-height:125%;}.elementor-kit-21 h3{color:var( --e-global-color-primary );font-size:2rem;font-weight:700;line-height:130%;}.elementor-kit-21 h4{color:var( --e-global-color-primary );font-size:1.75rem;font-weight:700;line-height:135%;}.elementor-kit-21 h5{font-size:1.44rem;font-weight:700;line-height:140%;}.elementor-kit-21 h6{font-size:1.2rem;font-weight:700;line-height:140%;}.elementor-kit-21 img{border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.elementor-widget:not(:last-child){margin-block-end:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-21{--e-global-typography-text-line-height:140%;--e-global-typography-0db2c15-font-size:1.25rem;--e-global-typography-0db2c15-line-height:140%;--e-global-typography-191ae89-line-height:140%;--e-global-typography-2f0c39a-line-height:140%;--e-global-typography-0087a93-font-size:1.5rem;line-height:140%;}.elementor-kit-21 h1{font-size:3rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-21{--e-global-typography-text-font-size:1.125rem;--e-global-typography-text-line-height:140%;--e-global-typography-0db2c15-font-size:1rem;--e-global-typography-0db2c15-line-height:140%;--e-global-typography-191ae89-font-size:1rem;--e-global-typography-191ae89-line-height:140%;--e-global-typography-2f0c39a-line-height:140%;--e-global-typography-0087a93-line-height:125%;font-size:1.125rem;line-height:140%;}.elementor-kit-21 h1{font-size:1.75rem;line-height:110%;}.elementor-kit-21 h2{font-size:1.75rem;line-height:1.75rem;}.elementor-kit-21 h3{font-size:1.5rem;line-height:125%;}.elementor-kit-21 h4{font-size:1.3rem;line-height:135%;}.elementor-kit-21 h5{font-size:1.12rem;line-height:135%;}.elementor-kit-21 button,.elementor-kit-21 input[type="button"],.elementor-kit-21 input[type="submit"],.elementor-kit-21 .elementor-button{font-size:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ======================
   Espaciado general
====================== */


/* ======================
   Tipografía general
====================== */

body {
  color: var(--e-global-color-text) !important;
  font-size: 1.125rem;
}
h1, .h1,h2, .h2,h3, .h3,h4, .h4,h5, .h5, h6, .h6 {
  color: var( --e-global-color-primary );
}

h1, .h1 {
  font-size: clamp(1.85rem, 5vw, 3.5rem);
  line-height: 1.2;
}

h2, .h2 {
  font-size: clamp(1.65rem, 4.5vw, 2.5rem) ;
  line-height: 1.25;
}

h3, .h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.3;
}

h4, .h4 {
  font-size: clamp(1.3125rem, 3.5vw, 1.75rem)
  line-height: 1.35;
}

h5, .h5, p.p-hight {
  font-size: clamp(1.125rem, 3vw, 1.44rem);
  line-height: 1.4;
}

.p-hight p {
  margin-bottom: 0 !important
}

h6, .h6{
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.4;
}

p {
  line-height: 1.6;
}

small {
  font-size: clamp(0.8125rem, 2vw, 0.833rem);
  line-height: 1.6;
}

/* ======================
   Títulos dentro de sections
====================== */

section h2:first-child {
  color: var(--e-global-color-primary);
}

/* Primer párrafo tras h2 */
h2:first-child + p {
  font-size: 1.25rem;
}

/* ======================
   Menú categorías blog / etiquetas
====================== */

.tag,
.elementor-post-info__item--type-terms a,
.category-menu-post ul li {
  color: var(--e-global-color-primary) !important;
  white-space: nowrap !important;
    font-weight: 500 !important;
  font-size: 0.75rem !important;
  line-height: calc(1 / 0.75) !important;
  padding-block: 0.5rem !important;
  padding-inline: 1rem !important;

  background-color: #eff2f7 !important;
  border-color: transparent !important;
  border-radius: 6px !important;
}
.tag{
    font-size: 0.75rem !important;
    padding-block: 0.70rem !important;
    color: #eff2f7 !important;
    background-color:var(--e-global-color-primary) !important
}

.category-menu-post ul li {
  margin: 4px 6px;
    font-weight: 700 !important;
  font-size: 0.85rem !important;
  line-height: calc(1 / 0.75) !important;
  padding-block: 0.85rem !important;
  padding-inline: 1rem !important;
}
.category-menu-post ul li a:hover{
 color: var(--e-global-color-primary) !important;
}

.category-menu-post ul li.current-menu-item {
   background-color: var(--e-global-color-primary) !important;
   a{
       color:#eff2f7 !important;
    }
    &:hover a{
         color:var(--e-global-color-primary) !important;
    }
}
.tag:hover,
.elementor-post-info__item--type-terms:hover a,
.category-menu-post ul li:hover {
  background-color: #e5e9f1 !important;
}
.hero .elementor-post-info__item--type-terms a,
.hero .elementor-post-info__item--type-terms:hover a{
    border:1px solid var(--e-global-color-primary) !important;
}





/* ==============================================
   MENÚ DE CATEGORÍAS: SCROLL HORIZONTAL SIEMPRE
   ============================================== */
  /* .category-menu-post nav.elementor-nav-menu--layout-horizontal{
       justify-content: center;
   }*/
.category-menu-post nav.elementor-nav-menu--layout-horizontal ul.elementor-nav-menu{
  /* tu base */

  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  flex-direction: row;
  justify-content: initial !important;

  /* scroll siempre activo */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  /* fila única y separación */
  white-space: nowrap;
  gap: 8px;
  padding: 8px 12px;
  margin: 0;

  /* “snap” suave a los items */
  scroll-snap-type: x proximity;

  /* desvanecidos laterales para indicar que hay más 
  position: relative;
  --fade-w: 24px;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade-w),
      #000 calc(100% - var(--fade-w)), transparent 100%);
          mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade-w),
      #000 calc(100% - var(--fade-w)), transparent 100%);*/
}

.category-menu-post ul.elementor-nav-menu > li:first-child{
    border: 2px solid black;
    margin-left: auto !important;
}
.category-menu-post ul.elementor-nav-menu > li:last-child{
    border: 2px solid black;
    margin-right: auto !important;
}
/* cada item se alinea al inicio al hacer scroll */
.category-menu-post ul.elementor-nav-menu > li {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* enlaces: refuerzo de layout/tap */
.category-menu-post ul.elementor-nav-menu > li > a.elementor-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 
}

/* foco accesible visible */
.category-menu-post ul.elementor-nav-menu > li > a.elementor-item:focus-visible {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: 3px;
  border-radius: 8px;
}



/* ==========================
   SCROLLBAR PERSONALIZADA
   ========================== */
/* WebKit */
.category-menu-post nav.elementor-nav-menu--layout-horizontal ul.elementor-nav-menu::-webkit-scrollbar {
  height: 10px;
}
.category-menu-post nav.elementor-nav-menu--layout-horizontal ul.elementor-nav-menu::-webkit-scrollbar-track {
  background: #e5e9f1;
  border-radius: 999px;
}
.category-menu-post nav.elementor-nav-menu--layout-horizontal ul.elementor-nav-menu::-webkit-scrollbar-thumb {
  background: var(--e-global-color-primary);
  border-radius: 999px;
  border: 2px solid #e5e9f1;
}
.category-menu-post nav.elementor-nav-menu--layout-horizontal ul.elementor-nav-menu::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.05);
}

/* Firefox */
.category-menu-post nav.elementor-nav-menu--layout-horizontal ul.elementor-nav-menu {
  scrollbar-width: thin;
  scrollbar-color: var(--e-global-color-primary) #e5e9f1;
}







/* gradientes */
.gradient-soft-blue { 
   background-color: transparent;
   background-image: linear-gradient(281deg, #6FADFCAD 0%, #4299E12B 100%);
}

body .elementor .elementor-widget-container .h1,
body .elementor-widget-text-editor .h1,
body .elementor-widget-heading .h1,
body .elementor-widget .h1,
body .h1 {
  color: var(--e-global-color-primary);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.2;
}

body .elementor .elementor-widget-container .h2,
body .elementor-widget-text-editor .h2,
body .elementor-widget-heading .h2,
body .elementor-widget .h2,
body .h2 {
  color: var(--e-global-color-primary);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.25;
}

body .elementor .elementor-widget-container .h3,
body .elementor-widget-text-editor .h3,
body .elementor-widget-heading .h3,
body .elementor-widget .h3,
body .h3 {
  color: var(--e-global-color-primary);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.3;
}

body .elementor .elementor-widget-container .h4,
body .elementor-widget-text-editor .h4,
body .elementor-widget-heading .h4,
body .elementor-widget .h4,
body .h4 {
  color: var(--e-global-color-primary);
  font-size: clamp(1.3125rem, 3.5vw, 1.75rem);
  line-height: 1.35;
}

body .elementor .elementor-widget-container .h5,
body .elementor-widget-text-editor .h5,
body .elementor-widget-heading .h5,
body .elementor-widget .h5,
body .h5 {
  color: var(--e-global-color-primary);
  font-size: clamp(1.125rem, 3vw, 1.44rem);
  line-height: 1.4;
}

body .elementor .elementor-widget-container .h6,
body .elementor-widget-text-editor .h6,
body .elementor-widget-heading .h6,
body .elementor-widget .h6,
body .h6 {
  color: var(--e-global-color-primary);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.4;
}


body .mA-hotspot-component .e-hotspot__tooltip.e-hotspot--tooltip-position.e-hotspot--fade-in-out {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  
  max-width: 360px;
  text-align: left;
  text-wrap: balance;
  margin: 0 auto;
  color: #003676;
 
  
}
.mA-hotspot-component .e-hotspot__tooltip.e-hotspot--tooltip-position.e-hotspot--fade-in-out b::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: #eff2f7;
  margin: 16px auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mA-hotspot-component .e-hotspot__tooltip.e-hotspot--tooltip-position.e-hotspot--fade-in-out img{
    width: 160px;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    object-position: center;
    
    
}



@media (max-width: 767px){
  .mA-hotspot-component .e-hotspot__tooltip.e-hotspot--tooltip-position.e-hotspot--fade-in-out {
    max-width: 320px;
   
  }
}

/* ======================
   labels informativos en single product
====================== */
  @media (max-width: 767.98px) {
    .main-product-info {
        margin: 0 auto !important;
        width: 100%;
    }
    .main-product-info li{
        margin: 0 auto !important;
        text-align:center;
    }
  }
.main-product-info li span {
   line-height: 130%;
}

/* ======================
   Cards
====================== */


.elementor-element.card-calculator {
  position: relative !important;
}


.elementor-element.card-calculator h3 > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0 
  z-index: 0 !important;
  display: block !important;
}


.elementor-element.card-calculator h3 > a {
  position: relative !important;
  z-index: 9 !important;
  text-decoration: none !important;
  color: inherit !important;
}


.elementor-element.card-calculator .elementor-widget-container,
.elementor-element.card-calculator .elementor-button,
.elementor-element.card-calculator img {
  position: relative !important;
  z-index: 2 !important;
}


/* ======================
   Img Cards Family
====================== */
.img-main-family{
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden
}



/* ======================
   Tooltip para iconos Elementor 
====================== */


[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%; /* aparece encima del icono */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none; /* evita que interfiera con el hover */
  z-index: 99;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px); /* pequeña animación */
}

/* Triángulo debajo del tooltip */
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}


/* ======================
  Carrusel con foco al centro (Loop Carousel + Swiper) 
====================== */


/* Centrado */
/* Que no recorte el slide activo cuando escala */
#formatos-carousel .swiper { overflow: visible; }

/* Escala elegante: centro grande, laterales menores */
#formatos-carousel {
  --scale-rest: .6;
  --scale-side: .75;
  --scale-active: 1;
  --opacity-rest: .65;
  --opacity-side: .85;
   /* --shadow-rest: 0 4px 14px rgba(0,0,0,.08);
  --shadow-active: 0 10px 30px rgba(0,0,0,.15);*/
}

#formatos-carousel .swiper-slide {
  transform-origin: center center;
  transition: transform .28s ease, opacity .28s ease, box-shadow .28s ease;
  transform: scale(var(--scale-rest));
  opacity: var(--opacity-rest);
  box-shadow: var(--shadow-rest);
}

#formatos-carousel .swiper-slide-prev,
#formatos-carousel .swiper-slide-next {
  transform: scale(var(--scale-side));
  opacity: var(--opacity-side);
}

#formatos-carousel .swiper-slide-active {
  transform: scale(var(--scale-active));
  opacity: 1;
  z-index: 2;
  box-shadow: var(--shadow-active);
}

@media (max-width: 767px) {
  #formatos-carousel {
    --scale-rest: .9;
    --scale-side: .96;
    --scale-active: 1;
    --opacity-rest: .8;
    --opacity-side: .9;
  }
}


/* Section con carrusel horizontal para evitar desplazamientos*/
.section-carrusel { 
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
}


/*
section{
    position: relative;
    border: 2px solid red;
    overflow-x: hidden 
    overflow-y: visible;
}*/
/** Prueba elementos flotantes decorativos *****
.section-decorativa { 
    position: relative;
}
.section-decorativa .badge-top-right,
.section-decorativa .badge-bottom-left { position: absolute; pointer-events: none; }

.section-decorativa .badge-top-right { top: 0; right: 0; transform: translate(22%, -22%); }
.section-decorativa .badge-bottom-left { bottom: 0; left: 0; transform: translate(-22%, 22%); }

@media (max-width: 1024px) {
  .section-decorativa .badge-top-right { transform: translate(14%, -14%); }
  .section-decorativa .badge-bottom-left { transform: translate(-14%, 14%); }
}
@media (max-width: 768px) {
  .section-decorativa .badge-top-right { transform: translate(8%, -8%); }
  .section-decorativa .badge-bottom-left { transform: translate(-8%, 8%); }
}
*/


/* ======================
   Utils - recortar texto 
====================== */
/* Recorta un bloque de texto a 3 líneas con puntos suspensivos */
.text-limited {
  display: -webkit-box;
  -webkit-line-clamp: 3;    /* nº de líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ======================
   Landing Promociones
====================== */
/* Promoción finalizada*/
.promo-finalizada {
  position: relative;
  overflow: hidden; /* asegura que la cinta no sobresalga del contenedor */
}

/* Cinta diagonal */
.promo-finalizada::before {
  content: "Promoción finalizada";
  position: absolute;
  top: 35px;
  left: -71px;
  width: 300px;
  background: #4A90E2; /* azul similar al ejemplo */
  color: white;
  text-transform: lowercase;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  padding: 5px 0;
  transform: rotate(-35deg); /* inclinación de la cinta */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
}

/* Adaptación responsive */
@media (max-width: 768px) {
  .promo-finalizada::before {
    font-size: 12px;
    width: 160px;
    left: -35px;
    top: 10px;
  }
}


/* ======================
   Breadcrumb móvil
====================== */
@media (max-width: 768px) {
.breadcrumb_last{ display:none}
}

/* ======================
   Capa flotantes CTA en plantillas > Capa flotant
====================== */

.single-productos .e-floating-bars{
    z-index: 0
}


/* ======================
   CBtn Volver en landing gama y product single
====================== */

.btn-volver-taxonomia .elementor-icon-box-title{
    display: flex;
    align-items: center !important;
}
.btn-volver-taxonomia{
    margin:0 0 5px 0 !important;
}
.btn-volver-taxonomia span{
    font-size: 16px !important;
    font-weight: 700 !important
}
.btn-volver-taxonomia a{
   text-decoration: underline
}
.btn-volver-taxonomia a:hover{
   text-decoration: none
}



/* ======================
   Paginación fracción en carruseles
====================== */
.swiper-pagination.swiper-pagination-fraction {
    border: 1px solid var( --e-global-color-primary );
    padding: 12px 32px;
    border-radius: 50px;
    background-color: #0036768c;
    bottom: -30px !important;
}




/* ======================
   Navegación secundaria - etapas vitales - menú html
====================== */

:root{
  --brand-dark: #003676;
  --brand: #eee9e5;
  --bg: #ffffff;
  --hover: #eee9e5;
  --border: #eee9e5;
  --bar-h: 72px; /* alto de la barra */
}


/* NAV fijo inferior (secundario) */
.subnav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  min-height: var(--bar-h) !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  text-align: center !important
}


/* Lista con scroll horizontal + snap + nudge */
.subnav__list{
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 0;
  margin: 0 auto !important;
  list-style: none;
}
@media (min-width: 992px){
    .subnav__list{
        display: flex;
        justify-content:center !important;
    }
}
.subnav__list{
  /* Nudge inicial: pequeño desplazamiento y vuelta */
  animation: nudge 1400ms ease-in-out 1200ms 2 both;
}

/* Re-lanza el nudge si el usuario navega con teclado */
.subnav:focus-within .subnav__list{
  animation: nudge 1000ms ease-in-out 0s 1 both;
}

/* Botón */
.subnav__btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  height: 56px;
  border-radius: 8px;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--brand-dark) !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: start;
}
.subnav__btn .subnav__text{
    font-weight:700 !important;
    font-size: 0.85rem
}

/* Icono dentro del botón */
.subnav__icon{ display: inline-flex; line-height: 0; }
.subnav__btn:hover,
.subnav__btn:active,
.subnav__btn[aria-pressed="true"]{
  background: var(--hover) !important;
  color: var(--brand-dark) !important;
  border-color: var(--border) !important;
}

.subnav__btn:focus-visible{
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px;
  /* opcional: mantiene el fondo consistente */
  background: var(--hover) !important;
}

/* Scrollbar sutil (opcional) */
.subnav__list{ scrollbar-width: thin; }
.subnav__list::-webkit-scrollbar{ height: 6px; }
.subnav__list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25);
  border-radius: 4px;
}

@media (max-width: 991.98px){
   .subnav{
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) 12px; 
    }

    /* Flecha parpadeante a la izquierda */
    .subnav::before{
      content:"";
      position: absolute;
      left: 12px;
      top: 50%;
      translate: 0 -50%;
      width: 22px; height: 22px;
      background:
        url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23003676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E")
        center/contain no-repeat;
      opacity: .9;
      animation: blink 1.2s ease-in-out infinite;
      pointer-events: none;
      z-index: 9 !important
    }
}
/* Animaciones */
    @keyframes nudge{
      0%   { transform: translateX(0); }
      30%  { transform: translateX(40px); }
      60%  { transform: translateX(0); }
      100% { transform: translateX(0); }
    }
    
    @keyframes blink{
      0%,100% { opacity: .15; transform: translateX(0); }
      50%     { opacity: .85; transform: translateX(-2px); }
    }
    
/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce){
  .subnav__list{ animation: none; scroll-behavior: auto; }
  .subnav::before{ animation: none; }
}

/* Estado inicial: oculta fuera de la pantalla inferior sin cambiar layout */
.subnav {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms ease, opacity 240ms ease;
  will-change: transform, opacity;
}

/* Cuando supera el umbral */
.subnav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce){
  .subnav { transition: none; }
}





/* ======================
   Tabs Etapas Vitales + carrusel con producto destacado
====================== */

/* Posición tabs en desktop */
.section-carrusel-target .e-n-tabs-heading{
    /*margin-top: -65px*/
    margin-top: -90px;
    z-index: 5;
    height: 100px !important;
   background-color: #fff;
   padding: .5rem 0;
}

.section-carrusel-target .e-n-tabs-heading button.e-n-tab-title:first-child{
    display: none !important;
}


/* MOVIL: pestañas fijas bottom + scroll + flechas visibles */
@media (max-width: 767.98px){
  .section-carrusel-target .e-n-tabs{
    display:grid;
    grid-template-rows: 1fr auto;
    min-height: 50vh;
  }
  .section-carrusel-target .e-n-tabs-content{
      grid-row:1/2;
  }
  .section-carrusel-target .e-n-tabs-heading{
    grid-row:2/3;
    position: sticky;
    bottom: 0;
    z-index: 5;
    display:flex;
    gap:.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    padding: .5rem .75rem 0 !important;
    margin-top: -60px;
    z-index: 9;
    height: 75px !important;
    /* Nudge inicial: pequeño desplazamiento y vuelta */
    animation: nudge 1400ms ease-in-out 1200ms 2 both;
    }
}

/* Botones cómodos + snap */

    .section-carrusel-target .e-n-tab-title{
       padding:4px 12px !important;
       height:60px !important;
       border-radius: 8px !important;
       min-width: 120px  !important;
       /*new*/
       display: inline-flex !important;
      align-items: center !important;
      gap: .5rem !important;
      padding: .5rem .75rem !important;
      height: 56px !important;
   }
   
  .section-carrusel-target .e-n-tabs-heading{ scroll-snap-type: x proximity; }

  /*Flechas + degradado laterales (solo visibles si hay overflow)
  */
  .section-carrusel-target .e-n-tabs-heading.hint-right:after,
  .section-carrusel-target .e-n-tabs-heading.hint-left:before{
    content:'' !important;
    position: absolute !important;
    top: 0 !important;
    width: 44px !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    /* animación suave desplazamiento visual */
    animation: mev-wiggle 1s ease-in-out infinite !important;
  }

  /* Derecha: chevron → */
  .section-carrusel-target .e-n-tabs-heading.hint-right:after{
    right: 0 !important;
    top: 5px !important;
    background:
      url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23003676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E")
        center/contain no-repeat;
  }

  
  /* Izquierda: chevron ← */
   .section-carrusel-target .e-n-tabs-heading.hint-right:after{
    left: 0 !important;
    top: 5px !important;
    background:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E")
      center right 10px / 20px 20px no-repeat !important;
  }
  
 
  /* Scrollbar visible */
  .section-carrusel-target .e-n-tabs-heading{ scrollbar-width: thin !important; }
  .section-carrusel-target .e-n-tabs-heading::-webkit-scrollbar{ height:6px !important; }
  .section-carrusel-target .e-n-tabs-heading::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.25); border-radius:4px !important;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .section-carrusel-target .e-n-tabs-heading{ scroll-behavior:auto; }
    .section-carrusel-target .e-n-tabs-heading::before,
    .section-carrusel-target .e-n-tabs-heading::after{ animation:none; }
  }
  
  

/* Animaciones */
    @keyframes nudge{
      0%   { transform: translateX(0); }
      30%  { transform: translateX(40px); }
      60%  { transform: translateX(0); }
      100% { transform: translateX(0); }
    }
  
   @keyframes mev-wiggle{
      0%,100% { opacity: .15; transform: translateX(0); }
      50%     { opacity: .85; transform: translateX(-2px); }
    }
}

/* Foco accesible */
.section-carrusel-target .e-n-tab-title:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}





/* ======================
   Tag destacado primer card en carruselde productos
====================== */
.tag-destacado{
    display: none;
}
.tag-destacado .elementor-icon-box-wrapper{
     align-items: center !important
}
#formatos-carousel .swiper-wrapper > .swiper-slide:first-of-type .card-product .tag-destacado{
    display: inline-block
}





/* ======================
  Carrusel vertical
====================== */
/* Viewport: contenedor exterior */
.lp-vertical-carousel{
  position: relative;
  overflow: hidden;
  /*height: clamp(260px, 50vw, 762px);*/
  height: clamp(760px, 50vw, 762px);
}

/* Track animado */
.lp-vertical-carousel__track,
.lp-vertical-carousel__track-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  animation: lp-vertical-carousel-scroll 9s linear infinite;
  will-change: transform;
}
.lp-vertical-carousel__track-bottom {
  animation: lp-vertical-carousel-scroll-bottom 9s linear infinite;
}

/* Cada slide */
.lp-vertical-carousel__item{
  flex: 0 0 auto;
  width: 100%;
}

/* Imágenes fluidas */
.lp-vertical-carousel__item img{
  width: 100%;
  height: auto;
  display: block;
}

/* Pausar al hacer hover */
.lp-vertical-carousel:hover .lp-vertical-carousel__track{
  animation-play-state: paused;
}

/* Animación infinita */
/*- hacia arriba*/
@keyframes lp-vertical-carousel-scroll{
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
/*  - hacia abajo*/
@keyframes lp-vertical-carousel-scroll-bottom{
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50%);
  }
}


/* --- MÓVIL: carrusel HORIZONTAL --- */
@media (max-width: 768px) {
  .lp-vertical-carousel {
    height: auto;          /* opcional, para que se adapte mejor en móvil */
  }

  .lp-vertical-carousel__track {
    flex-direction: row;   /* ahora en fila */
    align-items: center;
    animation: lp-vertical-carousel-scroll-x 18s linear infinite;
  }

  .lp-vertical-carousel__item {
    flex: 0 0 100%;        /* cada slide ocupa todo el ancho */
  }
}

/* Animación HORIZONTAL (para móvil) */
@keyframes lp-vertical-carousel-scroll-x {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* hacia la izquierda; pon 50% para derecha */
  }
}

/* Respeto a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lp-vertical-carousel__track,
  .lp-vertical-carousel-bottom__track{
    animation: none;
  }
}/* End custom CSS */