/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Titan+One&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #fffdf5;
  --first-color-dark: #fffdf5;
  --first-color-darken: hsl(170, 100%, 23%);
  --second-color: #87aabd;
  --second-color-dark: #fff;
  --white-color: #000;
  --shadow-img: drop-shadow(0 12px 24px hsla(0, 0%, 0%, .4));
  --shadow-circle: 0 12px 24px hsla(0, 0%, 0%, .4);
  --shadow-button: 0 -4px 8px hsla(0, 0%, 0%, .3);
  --shadow-card: 0 -8px 24px hsla(0, 0%, 0%, .3);
  --shadow-text: 0 2px 4px var(--first-color-darken);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --second-font: "Titan One", sans-serif;
  --biggest-font-size: 3.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 5.5rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--first-color);
  color: var(--white-color);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 200%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 5rem 1rem;
}

.section-home {
  padding-block: 3rem 1rem;
}

.section__title {
  font: var(--font-regular) var(--h1-font-size) var(--second-font);
  text-align: center;
  margin-bottom: 1.5rem;
  color: #46607a;
}

.section__title_nosotros {
  font: var(--font-regular) var(--h1-font-size) var(--second-font);
  text-align: center;
  margin-bottom: 4.5rem;
  color: #46607a;
}

.main {
  overflow: hidden;
}

/*=============== HEADER & NAV RE-DISEÑADO ===============*/
.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Barra Superior --- */
.header__top {
    background-color: #46607a;
    color: #fff;
    /* border-bottom: 1px solid #000; */
    padding: 8px 0;
}

.header__top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__top-left, .header__top-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* --- ICONOS MISMO TAMAÑO (Redes y Carrito) --- */
.nav__social-link i, 
.header__cart i {
    font-size: 1.5rem; /* Tamaño exacto para todos */
    color: #fff;
    display: block;
}

.nav__social-top {
    display: flex;
    gap: 1rem;
    padding-right: 1.5rem;
    border-right: 1px solid #eee;
}

/* --- Info Contacto --- */
.top__info-item { display: flex; align-items: center; gap: 8px; }
.t-green { color: #fff; font-size: 1.4rem; }
.info__text { line-height: 1.1; }
.info__title { font-weight: 700; font-size: 14px; color: #fff; display: block; }
.info__subtitle { font-size: 12px; color: #fff; }

/* --- NAV PRINCIPAL CENTRADO --- */
.nav {
    height: 90px;
    display: flex;
    justify-content: center; /* Centrado base */
    align-items: center;
    position: relative;
}

.nav__logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav__logo-center img {
    height: 80px;
    width: auto;
}

/* --- Menu Escritorio --- */
@media screen and (min-width: 1150px) {
    .nav__toggle, .nav__close { 
        display: none; 
    }
    
    .nav__list {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center; /* Cambiamos a center para que el eje sea el logo */
         /* Espacio uniforme entre los links */
    }

    /* Ajuste para los 6 links (3 a la izquierda, 3 a la derecha)
       El margen se aplica al 3er elemento para abrir el hueco del logo
    */
    .nav__list li:nth-child(3) { 
        margin-right: 400px; /* Aumentamos el espacio para que el logo respire */
    }
    
    .nav__link {
        color: #000;
        font-weight: 800;
        font-size: 13px;
        text-transform: uppercase;
        white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
        transition: color .3s;
    }

    .nav__link:hover {
        color: #3ea8ab; /* Color de la marca al pasar el mouse */
    }

    /* Para asegurar que los links de los extremos no se peguen al borde de la pantalla */
    .nav__menu {
        margin-inline: auto;
        max-width: 1200px;
    }
}

/* --- MENU MÓVIL (Arreglado) --- */
@media screen and (max-width: 1150px) {
    .nav { justify-content: space-between; }
    .nav__logo-center { position: static; transform: none; }
    .hide-mobile, .nav__social-top { display: none; }

    .nav__menu {
        position: fixed;
        left: -100%;
        top: 0;
        background-color: #fff;
        width: 100%;
        height: 100%;
        padding: 6rem 2rem;
        transition: left .4s;
        display: flex;
        flex-direction: column;
        z-index: 1000;
    }

    .nav__list {
        display: flex;
        flex-direction: column;
        row-gap: 2.5rem;
        text-align: center;
    }

    .nav__link {
        color: #000;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .show-menu { left: 0; }
    
    .nav__toggle, .nav__close {
        display: flex;
        font-size: 1.5rem;
        cursor: pointer;
        color: #000;
    }
}

/* Carrito Count */
.header__cart { position: relative; }
.cart__count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #fff;
    color: #000;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 50%;
    border: 1px solid #d9f1ff;
}

/*=============== HOME ===============*/
.home__container {
  padding-top: 1.5rem;
  justify-content: center;
  row-gap: 4rem;
}

.home__data {
  position: relative;
  text-align: center;
}

.home__title {
  font: var(--font-regular) var(--biggest-font-size) var(--second-font);
  line-height: 100%;
  margin-bottom: 1rem;
  color: #46607a;
  /* text-shadow: var(--shadow-text); */
}

.home__meat {
  width: 100px;
  position: absolute;
  top: 7rem;
  right: 0;
  opacity: .5;
}

.home__description {
  margin-bottom: 2.5rem;
}

.home__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
}

.home__images {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
}

/* Estilo Global (Mobile y Desktop) */
.home__circle {
  width: 250px;
  height: 250px;
  background-color: #fff;
  z-index: 10;
  border-radius: 50%;
  box-shadow: inset var(--shadow-circle);
  display: grid;
  place-items: center;
  position: relative;
  margin: 0 auto; /* Para que esté centrado en desktop */
}

.home__circle::after {
  content: "";
  position: absolute;
  /* Usamos top y left para asegurar que se centre perfectamente */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  
  /* Un poco más grande para el borde de texto */
  width: 470px; 
  height: 470px;
  /* background-image: url('https://cdn.simbiosefermentados.com/circulo-texto.png');  */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  z-index: 1; /* Prueba con 1 para verlo por encima, si tapa el producto ponle -1 */
  pointer-events: none; /* Para que no interfiera con clicks */
}

.home__subcircle {
  width: 250px;
  height: 250px;
  /* background-color: #e0d6bd; */
  background-color: #87aabd;
  border-radius: 50%;
  box-shadow: inset var(--shadow-circle);
}

.home__images .home__img {
  width: 250px;
  rotate: 10deg;
  filter: var(--shadow-img);
  position: absolute;
}

.home__images img {
  width: 60px;
  filter: var(--shadow-img);
  position: absolute;
}

.home__chips-1 {
  right: -.5rem;
}

.home__chips-2 {
  bottom: -.75rem;
  right: .5rem;
}

.home__chips-3 {
  top: .25rem;
  left: -.5rem;
}

.home__tomato-1 {
  top: -1.5rem;
  right: 2.5rem;
}

.home__tomato-2 {
  left: .5rem;
  bottom: -1.5rem;
}

.home__leaf {
  left: -.75rem;
}

/*=============== BUTTON ===============*/
.button {
  background-color: #46607a;
  color: var(--second-color-dark);
  font-weight: var(--font-semi-bold);
  padding: .75rem 2rem;
  border-radius: 4rem;
  box-shadow: inset var(--shadow-button);
}

.button__ghost {
  background-color: transparent;
  box-shadow: none;
  border: 3px solid var(--second-color);
  color: var(--second-color);
}

/*=============== FAVORITES ===============*/
.favorites__container {
  row-gap: 3rem;
  grid-template-columns: 100%;
  /* padding-bottom: 4rem; */
}

.favorites__data {
  position: relative;
  text-align: center;
}

.favorites__cheese-1, 
.favorites__cheese-2 {
  width: 30px;
  position: absolute;
  opacity: .6;
}

.favorites__cheese-1 {
  top: 2rem;
  right: -1rem;
  rotate: -1deg;
}

.favorites__cheese-2 {
  bottom: -2rem;
  left: -.75rem;
  transform: scaleX(-1) rotate(20px);
}

.favorites__article {
  position: relative;
  width: 200px;
  margin: 0 auto; /* ACTUALIZADO: Centra el producto en móvil */
}

.favorites__img {
  width: 200px;
  scale: .8;
  transition: scale .4s, filter .4s;
}

.favorites__leaf-1 {
  position: absolute;
  /* filter: var(--shadow-img); */
  scale: 0;
  transition: scale .4s .1s;
  z-index: -1;
}
 
.favorites__leaf-2 {
  position: absolute;
  /* filter: var(--shadow-img); */
  scale: 0;
  transition: scale .4s .1s;
}

.favorites__leaf-1 {
  /* top: 5rem; */
  top: 15.3rem;
  /* right: -1rem; */
  /* right: 0rem; */
}

.favorites__leaf-2 {
  bottom: -3.3rem;
  /* left: 0.5rem; */
}

/* Swiper class */
.swiper {
  margin-inline: initial;
  overflow: visible;
  padding-bottom: 60px;
}


/*=============== SOLUCIÓN FLECHAS Y DOTS MÓVIL ===============*/

/* 1. Eliminar flechas duplicadas (iconos default de Swiper) */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none !important; /* Esto quita la flecha pequeña duplicada */
    content: "";
}

/* 2. Estilo de tus flechas en móvil */
.swiper-button-next,
.swiper-button-prev {
    color: #46607a ; /* Tu amarillo */
    font-size: 2.5rem; /* Un poco más pequeñas que en desktop */
    top: 50%;
}

/* 3. Posicionamiento de los dots */
.favorites__container .swiper-pagination {
  bottom: 0rem !important;
}

/* 4. Estilo de los dots (Inactivos) */
.favorites__container .swiper-pagination-bullet {
  width: 7.5px;
  height: 7.5px;
  background-color: var(--white-color);
  opacity: .5;
  transition: all .3s ease;
}

/* 5. Estilo dot SELECCIONADO (Amarillo y Grande) */
.favorites__container .swiper-pagination-bullet-active {
  background-color: var(--second-color) !important; 
  width: 14px; /* Mismo tamaño que en desktop para resaltar */
  height: 14px;
  opacity: 1;
}

/* Animaciones de escala */
:is(.swiper-slide-active, .swiper-slide-duplicate-active) .favorites__img {
  scale: 1;
  filter: var(--shadow-img);
}

:is(.swiper-slide-active, .swiper-slide-duplicate-active) .favorites__leaf-1,
:is(.swiper-slide-active, .swiper-slide-duplicate-active) .favorites__leaf-2 {
  scale: 1;
}



/*=============== CARE ===============*/
.care {
  background-color: var(--first-color-dark);
}

.care__container {
  row-gap: 4rem;
  padding-block: 1rem 2rem;
}

.care__list {
  display: grid;
  row-gap: 1.25rem;
}

.care__item {
  display: flex;
  column-gap: .75rem;
  align-items: center;
}

.care__item i {
  font-size: 1.5rem;
  color: var(--second-color);
}

/*=============== CARE IMAGES (MÓVIL - UNA DEBAJO DE OTRA) ===============*/
.care__images {
  position: relative;
  justify-self: center;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 650px; /* Aumentamos la altura para que quepan una debajo de otra */
  margin-top: 2rem;
}

.care__img {
  width: 220px; /* Un poquito más grandes para que luzcan */
  position: absolute;
  border: 8px solid var(--white-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border-radius: .5rem;
}

/* 1. Foto Superior */
.care__img-1 {
  top: 5%; 
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(0deg); 
  animation: float-top 6s ease-in-out infinite;
}

/* 2. Foto del Medio */
.care__img-2 {
  top: 45%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: float-center 5s ease-in-out infinite;
}

/* 3. Foto Inferior */
.care__img-3 {
  top: 85%; /* La bajamos al final */
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: float-bottom 7s ease-in-out infinite;
}

/*=============== ANIMACIONES CON MOVIMIENTO EQUILIBRADO ===============*/

@keyframes float-top {
  0%, 100% { 
    margin-top: 0;
  }
  50% { 
    /* Movimiento elegante hacia arriba */
    margin-top: -12px; 
  }
}

@keyframes float-center {
  0%, 100% { 
    margin-top: 0;
  }
  50% { 
    /* La central se mueve un poco menos para ser el ancla visual */
    margin-top: -10px;
  }
}

@keyframes float-bottom {
  0%, 100% { 
    margin-top: 0;
  }
  50% { 
    /* La de abajo tiene un poco más de recorrido para dar dinamismo */
    margin-top: -15px;
  }
}

/*=============== VARIABLES DE CONTROL (Cálculo Matemático) ===============*/
:root {
  /* Configuración por defecto (Móvil) */
  --logo-width: 120px;
  --logo-gap: 3rem;
  /* (4 logos * ancho) + (4 espacios) */
  --scroll-width: calc((var(--logo-width) * 4) + (var(--logo-gap) * 4));
}

@media screen and (min-width: 1150px) {
  :root {
    /* Configuración para Laptop */
    --logo-width: 180px;
    --logo-gap: 8rem;
    --scroll-width: calc((var(--logo-width) * 4) + (var(--logo-gap) * 4));
  }
}

/* Asegura que el contenedor del carrusel no corte las bacterias */
.favorites__rel-wrapper {
    padding: 2rem; /* Espacio para las bacterias */
}

/* Estilo base para las bacterias */
.bacteria-corner {
    position: absolute;
    width: 80px; /* Tamaño mobile */
    height: auto;
    z-index: 100;
    pointer-events: none; /* No estorba al hacer swipe */
}

/* Esquina superior izquierda */
.corner-tl {
    top: 80px;
    left: -10px;
}

/* Esquina inferior derecha */
.corner-br {
    bottom: -10px;
    right: -10px;
}

/* Ajustes para los slides */
.favorites__article {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 400px;
}

.favorites__img {
    max-height: 320px; /* Evita que la botella sea gigantesca */
    width: auto;
    object-fit: contain;
}


/* MEDIA QUERY PARA DESKTOP */
@media screen and (min-width: 1024px) {
    .bacteria-corner {
        width: 150px; /* Más grandes en PC */
    }
    .corner-tl {
        top: -40px;
        left: -60px;
    }
    .corner-br {
        bottom: -40px;
        right: -60px;
    }
}

/*=============== SECCIÓN PERSONAJES FULL ===============*/
.section_personajes {
    padding: 4rem 0; /* Espacio arriba y abajo de la sección */
    overflow: hidden;
}

.personajes__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.personajes__content {
    width: 100%;
    max-width: 3000px; /* Aquí controlas qué tan gigante se ve en PC */
    display: flex;
    justify-content: center;
}

.personajes__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Animación suave de escala para que parezca que respiran */
    animation: breath 6s ease-in-out infinite;
    /* Sombra opcional muy suave para dar profundidad */
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}

/*=============== ANIMACIÓN DE RESPIRACIÓN ===============*/
@keyframes breath {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03); /* Crece un poquito */
    }
}

/*=============== RESPONSIVE ===============*/
@media screen and (max-width: 1024px) {
    .personajes__content {
        max-width: 700px;
    }
}

@media screen and (max-width: 576px) {
    .section_personajes {
        padding: 2rem 0;
    }
    .personajes__content {
        max-width: 100%; /* En móvil que tome todo el ancho */
        padding: 0 1rem;
        margin-top: 40px;
    }
}

/*=============== BANNER REPARADO ===============*/
.banner {
  /* background-color: var(--second-color); */
  padding-block: 2rem;
  overflow: hidden;
  width: 100%;
}

.banner_tiendas {
  padding-top: 3rem; /* Espaciado que pediste para móvil */
}

.banner__wrapper {
  display: flex;
  width: max-content;
  /* En móvil 15s es buena velocidad, en laptop puedes subirlo a 25s */
  animation: scroll-fixed 21s linear infinite;
  will-change: transform;
}

.banner__list {
  display: flex;
  align-items: center;
  column-gap: var(--logo-gap);
  padding-right: var(--logo-gap);
  flex-shrink: 0;
}

.banner__img {
  width: var(--logo-width);
  height: 50px; /* Altura constante para que no varíen */
  object-fit: contain;
  filter: brightness(0.3);
  margin-right: 5px;
}

/*=============== MEDIA QUERIES ESPECÍFICOS ===============*/
@media screen and (min-width: 1150px) {
  .banner_tiendas {
    padding-top: 10rem;
  }
  
  .banner__wrapper {
    animation-duration: 25s; /* Más lento en laptop para mayor elegancia */
  }
}

/*=============== LA ANIMACIÓN SIN ERRORES DECIMALES ===============*/
@keyframes scroll-fixed {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Se mueve exactamente la suma de logos + gaps de un bloque */
    transform: translateX(calc(-1 * var(--scroll-width)));
  }
}

/*=============== PRODUCTS ===============*/
.products__container {
  position: relative;
}

.products__content {
  display: grid; /* Aseguramos que sea grid */
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem; /* Reduje el gap de 5rem a 2rem porque ya no hay imagen flotando arriba */
}

.products__card {
  position: relative;
  /* background-color: var(--first-color-dark); */
  background-color: #fffdf5;
  /* Ajustamos el padding: eliminamos los 6.25rem de arriba porque la imagen ya no flota */
  padding: 1rem .75rem; 
  border-radius: 1rem;
  box-shadow: inset var(--shadow-card);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.products__img {
  /* CAMBIO CLAVE: De absolute a relative para que entre en la tarjeta */
  position: relative;
  width: 100%; /* Ocupa el ancho disponible */
  height: 180px; /* Altura fija para que todas las botellas alineen */
  object-fit: contain; /* Para que la botella no se estire */
  margin: 0 auto 1rem; /* Centrada y con espacio abajo */
  /* filter: var(--shadow-img); */
  transition: transform .4s;
}

.products__img_relacion {
    /* CAMBIO CLAVE: De absolute a relative para que entre en la tarjeta */
  position: relative;
  width: 100%; /* Ocupa el ancho disponible */
  height: 180px; /* Altura fija para que todas las botellas alineen */
  object-fit: contain; /* Para que la botella no se estire */
  margin: 0 auto 1rem; /* Centrada y con espacio abajo */
  /* filter: var(--shadow-img); */
  transition: transform .4s;
}

.products__subtitle {
  font-size: var(--small-font-size);
}

.products__title {

  margin-bottom: .5rem;
}

.products_title {
  font: 140 1.2rem var(--second-font);
  margin-bottom: .5rem;
}

.products__price {
  font-family: var(--second-font);
}

.products_price {
  font-family: var(--second-font);
}

.products__button {
  position: absolute;
  right: .75rem;
  bottom: 1.25rem;
  outline: none;
  border: none;
  background-color: #46607a;
  padding: 4px;
  border-radius: .25rem;
  font-size: 1.25rem;
  color: var(--second-color-dark);
  box-shadow: inset var(--shadow-button);
  display: inline-flex;
  cursor: pointer;
}

/* Efecto hover simplificado */
.products__card:hover .products__img {
  transform: scale(1.05);
}

.products__crab, 
.products__hamburger, 
.products__cheese {
  position: absolute;
  width: 40px;
  /* opacity: .5; */
}

.products__crab {
  top: -2.5rem;
  left: 0;
  rotate: 30deg;
}

.products__hamburger {
  top: 17rem;
  right: -1.5rem;
  rotate: -15deg;
}

.products__cheese {
  left: 2rem;
  right: 0;
  margin: 0 auto;
  bottom: 3rem;
  rotate: 15deg;
}


/*=============== CONTACTO FINAL PREMIUM ===============*/
.contact__container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: stretch;
    padding: 1rem; /* Evita que choque con los bordes en móvil */
}

/* --- TARJETA FORMULARIO --- */
.contact__form-card {
    position: relative;
    /* background-color: var(--first-color-dark); */
    background-color: #fffdf5;
    padding: 3.5rem 2.5rem;
    border-radius: 2rem;
    box-shadow: inset var(--shadow-card);
    overflow: hidden;
}

.contact__title-form {
    font-size: var(--h2-font-size);
    color: #46607a;
    margin-bottom: 2rem;
}

/* --- ESTILOS DE INPUTS Y LABELS (Corregidos) --- */
.contact__form {
    display: grid;
    row-gap: 1.5rem;
    position: relative;
    z-index: 10;
}

.contact__group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.contact__box {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}

.contact__label {
    font-weight: 700;
    font-size: var(--small-font-size);
    /* color: var(--first-color-darken); */
}

.contact__input {
    width: 100%;
    background-color: #fff; /* El gris suave de la referencia */
    /* color: var(--first-color-darken); */
    color: #46607a;
    border: 2px solid #ccc;
    padding: 1.25rem;
    border-radius: 1rem;
    /* border: none; */
    outline: none;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

/* Textarea con alto fijo */
.contact__area {
    height: 150px !important;
    max-height: 150px;
    min-height: 150px;
    resize: none;
}

/* --- BOTÓN RECARGADO --- */
.contact__button-send {
    justify-self: flex-start; /* Alineado a la izquierda */
    background-color: var(--first-color-darken);
    color: #fff;
    padding: 1.25rem 3rem;
    border-radius: 4rem;
    font-size: var(--normal-font-size);
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.contact__button-send:hover {
    background-color: var(--second-color);
    color: var(--first-color-darken);
    transform: translateY(-3px);
}

/* --- TARJETA INFO (VERDE) --- */
.contact__info-card {
    position: relative;
    /* background-color: var(--first-color-dark); */
    background-color: #fffdf5;
    padding: 3.5rem 2.5rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
    overflow: hidden;
    box-shadow: inset var(--shadow-card);
}

.contact__sidebar-title {
    color: #000;
    font-size: var(--h3-font-size);
    margin-bottom: 1rem;
}

.contact__sidebar-data p, 
.contact__social-list a i {
    color: #000;
}

.contact__social-list {
    display: flex;
    column-gap: 1.5rem;
    font-size: 2rem;
}

/* --- ADORNOS INTERNOS --- */
.contact__shrimp-in, .contact__crab-in, .contact__meat-in {
    position: absolute;
    width: 100px;
    pointer-events: none;
}

.contact__shrimp-in { top: 1rem; right: 1rem; rotate: 15deg; }
.contact__crab-in { bottom: 1rem; left: 1rem; rotate: -15deg; }
.contact__meat-in { bottom: 1rem; right: 1rem; }

/* --- RESPONSIVE OPTIMIZADO --- */
@media screen and (min-width: 1024px) {
    .contact__container {
        grid-template-columns: 1.7fr 1fr;
        column-gap: 3rem;
    }
}

@media screen and (max-width: 1023px) {
    .contact__group {
        grid-template-columns: 1fr; /* En móvil uno debajo de otro */
    }
    
    .contact__button-send {
        width: 100%; /* Botón grande en móvil para el dedo */
    }
}

/* --- BANNER DINÁMICO COMPACTO --- */
.contact__banner {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Altura reducida: 5rem arriba, 7rem abajo para el solapamiento */
    padding: 5rem 0 7rem; 
    margin-bottom: -4rem; 
    
    /* Centrado total */
    display: flex;
    align-items: center;
    justify-content: flex-start;;
    text-align: left;
}

.contact__banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5));
    z-index: 1;
}

.contact__banner-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 1.5rem; /* Margen de seguridad para mobile */
}

.contact__banner .section__title {
    color: #fff;
    font-size: 2.5rem; /* Un poco más pequeño para ser sutil */
    margin-bottom: .5rem;
    line-height: 1.2;
    text-align: left;   
    margin-left: 0;
}

.contact__banner .contact__subtitle {
    color: #fff;
    opacity: .9;
    font-size: var(--normal-font-size);
    max-width: 500px;
    margin: 0; /* Centra el bloque de texto */
}

/* 1. Definimos la animación: qué va a pasar */
@keyframes flotarBurbujas {
    0% {
        transform: translateY(0px) translateX(0px); /* Posición inicial */
    }
    25% {
        transform: translateY(-15px) translateX(5px); /* Sube y va un poco a la derecha */
    }
    50% {
        transform: translateY(-25px) translateX(-5px); /* Sube más y va un poco a la izquierda */
    }
    75% {
        transform: translateY(-10px) translateX(3px); /* Baja un poco y va a la derecha */
    }
    100% {
        transform: translateY(0px) translateX(0px); /* Vuelve al inicio */
    }
}

/* 2. Aplicamos la animación a tu clase */
.contact__shrimp-in, .products__crab {
    /* ...tus estilos actuales de posición (seguro tienes position: absolute)... */
    
    /* Esta es la línea clave: */
    animation: flotarBurbujas 8s ease-in-out infinite;
    
    /* Explicación de los parámetros:
       - flotarBurbujas: El nombre de la animación que creamos arriba.
       - 8s: Duración de un ciclo completo (8 segundos, hazlo lento para que sea sutil).
       - ease-in-out: Suaviza el inicio y el final del movimiento.
       - infinite: No para nunca.
    */
    
    /* Opcional: para que no se corte si sale un poco del contenedor parent */
    will-change: transform; 
}

/* --- RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
    .contact__banner {
        padding: 4rem 0 6rem; /* Aún más bajito en móvil */
        margin-bottom: -3.5rem;
    }

    .contact__banner .section__title {
        font-size: 2rem;
    }

    .contact__banner .contact__subtitle {
        font-size: var(--small-font-size);
        padding: 0 1rem;
    }
    .contact__banner{
      padding-top: 120px;
    }
}

/*=============== FOOTER ===============*/
.footer {
  padding-block: 3rem 2rem;
}

/* .footer__container {
  row-gap: 2rem;
} */

.footer__logo {
  color: var(--white-color);
  font: var(--h1-font-size) var(--second-font);
  justify-self: center;
  text-shadow: var(--shadow-text);
}

.footer__content {
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  row-gap: 3.5rem;
}

.footer__copy {
  grid-column: 1/3;
  text-align: center;
}

.footer__link {
  color: var(--white-color);
  transition: color .4s;
}

.footer__link:hover {
  color: var(--second-color);
}

/*=============== SCROLL BAR ===============*/
/* ::-webkit-scrollbar {
  width: .6rem;
  background-color: hsl(170, 50%, 30%);
}

::-webkit-scrollbar-thumb {
  background-color: hsl(170, 50%, 20%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(170, 50%, 15%);
} */


/*=============== SCROLL UP ===============*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -50%;
  background-color: var(--first-color-dark);
  color: var(--white-color);
  box-shadow: inset var(--shadow-button);
  display: inline-flex;
  padding: 6px;
  font-size: 1.25rem;
  border-radius: .25rem;
  z-index: var(--z-tooltip);
  transition: bottom .4s, transform .4s;
}

.scrollup:hover {
  transform: translateY(-.5rem);
}

/* Show Scroll Up */
.show-scroll {
  bottom: 3rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem;
  }

  .section__title {
    font-size: var(--h2-font-size);
  }

  .home__title {
    font-size: 3rem;
  }
  .home__buttons {
    flex-direction: column;
    row-gap: 1rem;
  }
  .home__circle {
    width: 250px;
    height: 250px;
  }
  .home__subcircle {
    width: 200px;
    height: 200px;
  }
  .home__images .home__img {
    width: 200px;
  }

  .products__content {
    grid-template-columns: 160px;
    justify-content: center;
  }

  .footer__content {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 1.5rem;
  }
  .footer__copy {
    grid-column: 1;
  }
}


/* For medium devices */
@media screen and (min-width: 540px) {
  .home__container,
  .favorites__container,
  .care__container {
    grid-template-columns: 370px;
    justify-content: center;
  }

.favorites__swiper {
    max-width: 600px;
    overflow-x: clip;
    justify-self: center;
    padding-bottom: 4rem; /* Espacio para los dots */
  }

.favorites__container .swiper-pagination {
  bottom: -3rem;
}

/* Posicionamiento de los dots */
.swiper-pagination {
    bottom: 0; /* Los baja al puro borde del contenedor */
}

  /* Estilo general de los dots (inactivos) */
  .swiper-pagination-bullet {
    width: 7.5px;
    height: 7.5px;
    background-color: var(--white-color); /* O un color grisáceo */
    opacity: 0.5;
    transition: all .3s ease; /* Suaviza el cambio de tamaño */
  }

.swiper-pagination-bullet-active {
    background-color: var(--second-color) !important;
    opacity: 1;
    width: 14px; /* Aumentamos el ancho */
    height: 14px; /* Aumentamos el alto */
    transform: translateY(2px); /* Alineación visual opcional */
  }

/* Limpiar flechas extra si Swiper genera las default por error */
.swiper-button-next::after,
.swiper-button-prev::after {
    content: ''; /* Borra la flecha fea que viene por defecto en Swiper */
}

.swiper-button-next{
  padding-left: 20px !important;
}

.swiper-button-prev{
  padding-right: 20px !important;
}

.swiper-button-next, 
.swiper-button-prev {
    /* 1. Creamos el círculo */
    background-color: #46607a;
    width: 50px;  /* Ajusta el tamaño del círculo aquí */
    height: 50px;
    border-radius: 50%;
    color: #fff;
    /* 2. Centramos la flecha */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. Quitamos el posicionamiento por defecto que estorbe */
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-next {
    padding-right: 15px !important;
}

.swiper-button-prev {
    padding-left: 15px !important;
}

/* 4. Cambiamos el color y tamaño de la flecha interna */
.swiper-button-next::after, 
.swiper-button-prev::after {
    color: #fff;
    font-size: 1.2rem; /* Tamaño de la flecha dentro del círculo */
    font-weight: bold;
}


  .products__content {
    grid-template-columns: repeat(2, 160px);
    justify-content: center;
  }

  .contact {
    display: grid;
    grid-template-columns: 450px;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .products__content {
    grid-template-columns: repeat(3, 160px);
  }

  .contact {
    grid-template-columns: 550px;
  }

  .footer__content {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    align-items: center;
  }
  .footer__copy {
    grid-column: initial;
  }
  .footer__link:nth-child(2) {
    order: 1;
  }
}

/* For large devices */
@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }

  .section {
    padding-block: 7rem 2rem;
  }

  .section_favorite {
    padding-block: 2rem 7rem;
  }

  .section_products{
    padding-block: 10rem 2rem;
  }
  .section__title {
    margin-bottom: 2rem;
  }


  .nav {
    height: calc(var(--header-height) + 2rem);
  }
  .nav__toggle, 
  .nav__close {
    display: none;
  }
  .nav__link {
    font-size: var(--normal-font-size);
  }
  .nav__menu {
    display: flex;
    column-gap: 3rem;
    align-items: center;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 1.5rem;
  }

  .home__container {
    grid-template-columns: 420px 585px;
    align-items: center;
    column-gap: 6rem;
    padding-top: 5rem;
  }
  .home__data {
    text-align: initial;
  }
  .home__title {
    margin-bottom: 1.5rem;
  }
  .home__description {
    margin-bottom: 1.5rem;
  }
  .home__buttons {
    justify-content: initial;
    column-gap: 1.5rem;
  }
  .home__meat {
    width: 170px;
    top: 10.5rem;
  }
  .home__circle {
    width: 390px;
    height: 390px;
  }
  .home__subcircle {
    width: 310px;
    height: 310px;
  }
  .home__images .home__img {
    width: 400px;
  }
  .home__images img {
    width: 150px;
  }

  .favorites__container {
    grid-template-columns: 520px;
    row-gap: 1.5rem;
  }
  .favorites__cheese-1, 
  .favorites__cheese-2 {
    width: 200px;
  }
  .favorites__cheese-1 {
    right: -18rem;
  }
  .favorites__cheese-2 {
    left: -18rem;
  }
  .favorites__swiper {
    max-width: 1000px;
  }

  .favorites__article, 
  .favorites__img {
    width: 320px;
  }
  .favorites__leaf-1 {
    width: 80%;
  }

  .favorites__leaf-2 {
    width: 100%;
  }

/* For large devices (Laptops) */
@media screen and (min-width: 1150px) {
  .care__container {
    grid-template-columns: 610px 520px;
    column-gap: 6rem;
    align-items: center;
    /* padding-block: 4rem; */
  }

  /* Ajustamos el contenedor del collage para laptop */
  .care__images {
    width: 500px;
    height: 550px; /* Más altura para que el escalonado sea más elegante */
    order: -1;     /* Mantiene las imágenes a la izquierda */
    justify-self: center;
  }

  /* Redimensionamos las imágenes para que luzcan en pantalla grande */
  .care__img {
    width: 300px; /* Imágenes más grandes en laptop */
    border-width: 10px; /* Borde más grueso para mantener el estilo Polaroid */
  }

  /* Reposicionamos las fotos para que se vean más separadas y claras */
  .care__img-1 {
    top: 25%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(-5deg);
  }

  .care__img-2 {
    top: 70%;
    left: 94%;
    transform: translate(-50%, -50%) rotate(6deg);
    /* No tocamos el translate aquí porque ya viene de la animación central */
  }

  .care__img-3 {
    top: 105%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(-5deg);
  }

  .care__item {
    column-gap: 1rem;
  }
  
  .care__item i {
    font-size: 2rem;
  }
}

  /* .banner {
    padding-top: 10rem;
  }
  .banner__list {
    column-gap: 6.5rem;
  }
  .banner__item {
    column-gap: 1rem;
  }
  .banner__item i {
    font-size: 4.5rem;
  }
  .banner__item span {
    font-size: var(--h1-font-size);
  } */

:root {
  /* Definimos medidas exactas para que no haya errores de redondeo */
  --logo-width: 180px; 
  --logo-gap: 80px;
  /* Calculamos el ancho de una lista: (4 logos * ancho) + (4 espacios) */
  --scroll-width: calc((var(--logo-width) * 4) + (var(--logo-gap) * 4));
}

.banner {
  /* background-color: var(--second-color); */
  padding-block: 2.5rem;
  overflow: hidden;
  width: 100%;
}

.banner_tiendas{
  padding-top: 10rem;
}

.banner__wrapper {
  display: flex;
  width: max-content;
  /* Usamos 25s para que sea elegante */
  animation: scroll-fixed 27s linear infinite;
}

.banner__list {
  display: flex;
  align-items: center;
  column-gap: var(--logo-gap);
  padding-right: var(--logo-gap); /* Sincronizado con el gap */
  flex-shrink: 0;
}

.banner__img {
  width: var(--logo-width);
  height: 40px; /* Altura fija para que todos tengan presencia */
  object-fit: contain;
  margin-right: 20px;
  filter: brightness(1);
}

/* LA ANIMACIÓN CON PÍXELES EXACTOS */
@keyframes scroll-fixed {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Nos movemos exactamente el ancho de una lista en píxeles */
    transform: translateX(calc(-1 * var(--scroll-width)));
  }
}

  .products__container {
    padding-top: 5.5rem;
  }
  .products__content {
    grid-template-columns: repeat(3, 250px);
    gap: 4rem 4rem;
  }
  .products__card {
    padding: .75rem 2rem 2rem;
    border-radius: 1.5rem;
  }
  .products__img {
    /* width: 290px; */
    top: 1rem;
  }
  .products__subtitle {
    font-size: var(--normal-font-size);
  }
  .products__price {
    font-size: var(--h3-font-size);
  }

  .products_price {
    font-size: var(--h3-font-size);
  }
  .products__button {
    right: 1rem;
    bottom: 2rem;
    padding: 6px;
    font-size: 1.5rem;
    border-radius: .5rem;
  }
  .products__crab, 
  .products__hamburger, 
  .products__cheese {
    width: 80px;
  }
  .products__crab {
    top: 35rem;
  }
  .products__hamburger {
    top: 28.4rem;
    right: 3rem;
  }
  .products__cheese {
    left: 33.5rem;
    margin: initial;
  }

  .contact {
    display: block;
  }
  .contact__container {
    padding-top: 80px;
    border-radius: 4rem;
  }
  .contact__content {
    grid-template: 330px/360px 320px;
    justify-content: center;
    align-items: flex-start;
    column-gap: 10rem;
    padding-top: 2rem;
  }
  .contact__data {
    text-align: initial;
    grid-template: max-content/repeat(2, max-content);
    gap: 3rem 2rem;
  }
  .contact__title {
    margin-bottom: .75rem;
  }
  .contact__social {
    justify-content: initial;
  }
  .contact__img {
    width: 320px;
    transform: translateY(-6rem);
  }
  .contact__shrimp, 
  .contact__crab, 
  .contact__meat {
    width: 80px;
  }
  .contact__shrimp {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 20rem;
  }
  .contact__crab {
    top: 5rem;
    left: 4rem;
  }
  .contact__meat {
    right: initial;
    left: 12rem;
    bottom: -1rem;
  }

  .footer {
    margin-top: 100px !important;
    padding-block: 1rem 1rem;
  }
  /* .footer__container {
    row-gap: 3rem;
  } */

  .scrollup {
    right: 1.5rem;
  }
}

/* Layout interno de la vista productos */
.shop__wrapper {
    display: grid;
    grid-template-columns: 260px 1fr; /* Espacio para el filtro a la izquierda */
    gap: 2.5rem;
    align-items: flex-start;
    margin-top: 1.5rem;
}

/* Tarjeta de Filtros */
.filter__card {
    /* background-color: var(--first-color-dark); */
    background-color: #fffdf5;
    box-shadow: inset var(--shadow-card);
    padding: 1.5rem;
    border-radius: 1.5rem;

}

.filter__main-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 2rem;
}

.filter__group {
    margin-bottom: 1.5rem;
}

.filter__subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

/* Estilo de cada item del filtro */
.filter__item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.8rem;
    cursor: pointer;
}

/* Estilos para los cuadraditos (Checkboxes) */
.filter__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #46607a; /* El verde Simbiose cuando lo marcan */
}

/* Estilos para el texto al lado del cuadradito */
.filter__label {
    font-size: 0.95rem;
    color: #4a5568; /* Un gris elegante */
    cursor: pointer;
    transition: .3s;
    font-weight: 500;
}

.filter__label:hover {
    color: #46607a; /* Cambia a verde al pasar el mouse */
}

/* Para que el cuadradito y el texto estén bien alineados */
.filter__item {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre el cuadro y el texto */
    margin-bottom: 0.8rem;
}

/* Títulos de los grupos de filtros */
.filter__subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 1.5rem 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive */
@media screen and (max-width: 968px) {
    .shop__wrapper {
        grid-template-columns: 1fr;
    }
    .shop__sidebar{
      margin-bottom: 50px;
    }
    .filter__card{
      margin-top: 4rem;
    }
}

/* Contenedor Principal de la Sección */
.product-detail-section {
    padding-block: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* Columna Visual */
.product-visuals {
    flex: 1;
    min-width: 320px;
}

.main-card {
    border-radius: 30px;
    padding: 30px;
    background-color: var(--first-color-dark);
    box-shadow: inset var(--shadow-card);
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-product-img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.thumbnail-list {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.thumb {
    width: 110px;
    height: 120px;
    border-radius: 15px;
    background: transparent;
    padding: 10px;
    cursor: pointer;
    box-shadow: inset var(--shadow-card);
}

/* Columna Info */
.product-content {
    flex: 1;
    min-width: 320px;
}

.badge {
    color: #888;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}

.product-header h1 {
    font-size: 3rem;
    margin: 10px 0;
}

.price-tag {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

/* Botones y Cantidad */
.action-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.qty-control {
    background: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn-qty {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.btn-add-cart {
    width: 37%;
    padding: 12px;
    background: #46607a;
    color: #fff;
    border: none;
    border-radius: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-add-cart i {
    font-size: 1.2rem; /* Tamaño del icono de la bolsa */
}

/* Desplegables */
details {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

/* Estilo para los desplegables con Font Awesome */
summary {
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* Quita la flecha por defecto del navegador */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* Quitamos el marcador en Chrome/Safari */
summary::-webkit-details-marker {
    display: none;
}

.arrow-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    color: #888;
}

/* Efecto para que la flecha gire cuando el detalle esté abierto */
details[open] .arrow-icon {
    transform: rotate(180deg);
}

.details-body {
    padding-top: 10px;
    color: #666;
    line-height: 1.5;
}

/* --- RESPONSIVE PARA MOBILE --- */

@media (max-width: 768px) {
    .product-detail-section {
        padding: 60px 15px; /* Menos espacio en los bordes en móviles */
    }

    .product-container {
        flex-direction: column; /* Apila las columnas verticalmente */
        gap: 20px;
    }

    .product-visuals, 
    .product-content {
        min-width: 100%; /* Ocupa todo el ancho disponible */
    }

    /* Ajuste de la tarjeta de imagen */
    .main-card {
        padding: 20px;
        border-radius: 25px; /* Bordes un poco menos pronunciados para ganar espacio */
    }

    /* Tipografía más pequeña para que no se corte */
    .product-header h1 {
        font-size: 2rem; 
        margin-top: 5px;
    }

    .price-tag {
        font-size: 1.5rem;
    }

    /* Controles de compra en móvil */
    .action-area {
        flex-direction: column; /* El botón de añadir debajo del selector de cantidad */
        align-items: stretch; /* Que los botones ocupen todo el ancho */
        gap: 15px;
    }

    .qty-control {
        justify-content: center; /* Centra el - 1 + */
        padding: 12px;
    }

    .btn-add-cart {
        width: 100%;
        padding: 18px; /* Un botón más grande es más fácil de tocar con el dedo */
        font-size: 1.1rem;
    }

    /* Galería de miniaturas */
    .thumb {
        width: 60px;
        height: 60px;
    }
}

/* --- Estilos para la sección de relacionados --- */
.related-products {
    padding: 60px 0 100px;
    max-width: 1200px; /* Ajusta esto al ancho de tu layout */
    margin: 0 auto;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Configuramos el Grid Flexible */
.related-grid {
    display: grid;
    /* En PC: 4 columnas que se reparten el espacio equitativamente */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem;
    padding: 0 1rem;
}

@media screen and (max-width: 768px) {
    .related-grid {
        /* En Móvil: 2 columnas exactas */
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem 1.5rem;
    }

    .section-title {
        font-size: 1.2rem;
        margin-bottom: 70px;

    }
    .related-products{
      padding-top: 10px;
      padding-bottom: 90px;
    }
    
}

/* Para pantallas muy pequeñitas (opcional) */
@media screen and (max-width: 350px) {
    .related-grid {
        grid-template-columns: 1fr; /* Una sola columna si es muy mini */
    }
}

/* Aseguramos que el contenedor permita elementos posicionados */
.product-detail-section {
    position: relative;
    overflow: hidden; /* Evita que las imágenes creen barras de scroll */
}

/* Estilo base para las decoraciones */
.detail__crab, 
.detail__hamburger, 
.detail__cheese {
    position: absolute;
    width: 80px; /* Ajusta el tamaño según prefieras */
    filter: opacity(0.6); /* Un poco transparentes para que no distraigan */
    z-index: -1; /* Van detrás del texto */
    pointer-events: none; /* Para que no interfieran con los clics */
}

/* Posiciones específicas */
.detail__crab {
    top: 5%;
    left: 2%;
    transform: rotate(-15deg);
}

.detail__hamburger {
    bottom: 15%;
    right: 5%;
    transform: rotate(20deg);
}

.detail__cheese {
    top: 40%;
    right: 2%;
    width: 60px;
    transform: rotate(10deg);
}

/* --- AJUSTE PARA MOBILE --- */
@media (max-width: 768px) {
    .detail__crab, 
    .detail__hamburger, 
    .detail__cheese {
        width: 50px; /* Más pequeñitos en el celular */
        filter: opacity(0.4);
    }
    
    .detail__cheese {
        display: none; /* Quitamos uno para no saturar la pantalla pequeña */
    }
}

/* Estilos del Loader */
.loader__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px); /* Desenfoque de fondo */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 100000020; /* sobre el header y el modal de promos */
    transition: opacity 0.3s ease;
}

.loader__content {
    text-align: center;
}

.loader__spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #635b47; /* El verde de tu marca */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.loader__text {
    font-family: var(--body-font);
    color: #635b47;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ajustes para Mobile */
@media screen and (max-width: 768px) {
    .loader__spinner {
        width: 40px;  /* Un poco más pequeño en celular */
        height: 40px;
        border-width: 2px; /* Línea más fina para que se vea elegante */
    }

    .loader__text {
        font-size: 0.7rem; /* Texto más sutil */
        letter-spacing: 2px;
    }
    
    .loader__modal {
        backdrop-filter: blur(8px); /* Aumentamos un poco el blur en mobile para un look más "App" */
    }
}

/*=============== PAGINACION LIMPIA ===============*/
.pagination__container {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
    width: 100%;
}

/* Forzamos a que la lista sea horizontal y sin puntos */
.pagination__container ul.pagination {
    display: flex !important;
    list-style: none !important;
    gap: 10px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* Estilo de los cuadritos de números */
.pagination__container .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    color: #000;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

/* Número activo (Verde Simbiose) */
.pagination__container .page-item.active .page-link {
    background-color: #46607a; /* El verde de tu botón de carrito */
    color: #fff;
    border-color: #46607a;
}

/* Ocultar las flechas gigantes que salen en tu imagen */
.pagination__container svg {
    display: none !important;
}

/* Ajuste para Mobile */
@media screen and (max-width: 500px) {
    .pagination__container .page-item .page-link {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    
    /* Ocultamos el texto de "Previous" y "Next" si estorba */
    .page-item:first-child, .page-item:last-child {
        display: none;
    }
}



/* ========== COLLAGE SECTION ========== */
.collage-section {
    position: relative;
    overflow: hidden;
    padding-bottom: 1rem;
}

.collage__container {
    position: relative;
    min-height: 600px;
    align-items: start;
}

.collage__container_1 {
    position: relative;
    min-height: 550px;
    align-items: start;
}

.collage__texts {
    grid-column: 1 / 7; /* Regresamos a la posición de la izquierda */
    z-index: 10;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el contenedor a la izquierda */
}

.collage__description {
    /* font-weight: 900; */
    color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 450px;
    text-align: justify; /* <--- Esto es lo que buscabas para el texto */
        /* Opcional: ayuda a que el justificado no deje huecos grandes */
}

.collage__description_talleres {
    /* font-weight: 900; */
    color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 480px;
    text-align: justify; /* <--- Esto es lo que buscabas para el texto */
        /* Opcional: ayuda a que el justificado no deje huecos grandes */
}

/* Grupo de imágenes/cajas */
.collage__images-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.collage__box {
    background-color: #000;
    position: absolute;
    border-radius: 4px; /* Un toque suave en las esquinas */
    transition: transform .3s;
}

/* Posiciones exactas basadas en tu imagen */
.box-top-right {
    top: 3%;
    right: 10%;
    width: 45%;
    height: 290px;
    position: absolute; /* Asegúrate de que tengan el absolute para que el top/right funcione */
    
    /* EL BORDE REPLICADO */
    border: 8px solid #46607a; 
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden; /* Para que la imagen respete el redondeo de 30px */
}

.box-top-right_talleres {
    top: 3%;
    right: 1%;
    width: 50%;
    height: 290px;
    position: absolute; /* Asegúrate de que tengan el absolute para que el top/right funcione */
    
    /* EL BORDE REPLICADO */
    border: 8px solid #46607a; 
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden; /* Para que la imagen respete el redondeo de 30px */
}

.box-middle-right {
    top: 45%;
    right: 0px;
    width: 30%;
    height: 220px;
    background-color: #2b2b2b;
    position: absolute;
    /* transform: rotate(-5deg); */
    
    /* EL BORDE REPLICADO */
    border: 8px solid #46607a; 
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Para que las imágenes dentro llenen el espacio correctamente */
.box-top-right img,
.box-middle-right img,
.box-bottom-center img,
.box-bottom-left img,
.box-bottom-right img,
.box-top-right_talleres img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.box-bottom-left {
    top: 60%;
    bottom: 5%;
    left: 0;
    width: 27%;
    height: 290px;
    /* transform: rotate(-10deg); */

    border: 8px solid #46607a; 
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.box-bottom-center {
    top: 60%;
    bottom: 10%;
    left: 37%;
    width: 27%;
    height: 290px;
    /* transform: rotate(5deg); */

    border: 8px solid #46607a; 
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.box-bottom-right {
    top: 60%;
    bottom: 0;
    right: 0%;
    width: 27%;
    height: 290px;
    /* transform: rotate(-5deg); */

    border: 8px solid #46607a; 
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* La ilustración del laboratorio de fondo */
.collage__bg-illustration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.2; /* Para que no compita con el texto */
    z-index: 1;
    pointer-events: none;
}

/* Ajustes para Celulares */
@media screen and (max-width: 768px) {
    .collage__container {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .collage__container_1 {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    
    .collage__box {
        position: relative; /* En móvil es mejor que fluyan o se oculten algunos */
        width: 100%;
        margin-bottom: 1rem;
        transform: none !important;
        height: 200px;
    }
    
    .collage__images-group {
        position: relative;
        margin-top: 2rem;
    }
}

/* ========== FAQ ========== */
.faq__container {
    max-width: 800px;
    margin-top: 2rem;
}

.faq__item {
    background-color: #87aabd; /* Azul muy clarito */
    border-radius: .5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border-left: 5px solid #46607a; /* La barra oscura de la izquierda */
    transition: all .3s ease;
}

.faq__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
}

.faq__question {
    font-size: 26px;
    color: #fff;
    font-weight: 700;
}

.faq__icon {
    font-size: 1.5rem;
    color: #fff;
    transition: transform .3s;
}

/* Contenido oculto por defecto */
.faq__content {
    height: 0;
    overflow: hidden;
    transition: all .3s ease;
}

.faq__answer {
    padding: 0 1.5rem 1.25rem;
    font-size: var(--small-font-size);
    color: #fff;
}

/* Clases activas */
.faq__item.faq-open .faq__content {
    height: auto;
    padding-bottom: 1rem;
}

.faq__item.faq-open .faq__icon {
    transform: rotate(180deg);
}

/* --- CONTROL DE VISIBILIDAD --- */
.desktop-only {
    display: none !important;
}

.mobile-only {
    display: block !important;
}

.principal-hero-slider {
    padding-top: 130px; /* Espacio para el header en mobile */
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block !important;
    }
    .mobile-only {
        display: none !important;
    }
    .principal-hero-slider {
        padding-top: 130px; /* Espacio para el header en desktop */
    }
}

/* --- ESTILOS DEL BANNER e IMÁGENES --- */
.hero-banner .swiper-slide img {
    width: 100%;           /* Ocupa todo el largo de la pantalla */
    height: auto;          /* Deja que el aspect-ratio mande */
    aspect-ratio: 21 / 9;  /* Proporción panorámica (como una película) */
    display: block;
    object-fit: cover;     /* Mantiene la imagen llenando el ancho */
    object-position: center; /* Se asegura de que el centro de la foto no se pierda */
}

/* Para pantallas más pequeñas (Laptops/Tablets) */
@media screen and (max-width: 1024px) {
    .hero-banner .swiper-slide img {
        aspect-ratio: 16 / 9; /* Un poco más alto para que se vea mejor en laptops */
    }
}

/* --- ESTILOS DE LOS DOTS (TUS CLASES ACTUALIZADAS) --- */
/* Estilo general de los dots (inactivos) */
.swiper-pagination-bullet {
    width: 7.5px;
    height: 7.5px;
    background-color: var(--white-color, #ccc); /* Fallback gris si no carga la variable */
    opacity: 0.5;
    transition: all .3s ease;
    margin: 0 5px !important;
}

/* Dot activo: crece y cambia de color */
.swiper-pagination-bullet-active {
    background-color: var(--second-color) !important;
    opacity: 1;
    width: 14px !important; 
    height: 14px !important;
    transform: translateY(2px);
}

/* Forzar visualización del dot único en mobile */
.pagination-mobile.swiper-pagination-lock {
    display: flex !important;
    justify-content: center;
    opacity: 1 !important;
    bottom: 20px !important;
}


/* MAPA */
/* Contenedor con toque crema sutil */
    .simbiose-container {
        background-color: #F9F7F2; /* Beige muy suave */
        padding: 40px;
        border-radius: 20px;
    }

    /* Botones con estilo "Handmade" */
    .btn-region {
        padding: 15px 45px;
        font-size: 1rem;
        font-weight: 600;
        border: 1.5px solid #4A6741; /* Verde oliva oscuro */
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: transparent;
        color: #4A6741;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .btn-region.active {
        background: #4A6741;
        color: #F9F7F2;
        box-shadow: 0 6px 12px rgba(74, 103, 65, 0.2);
    }

    .btn-region:hover {
        transform: translateY(-2px);
        background: rgba(74, 103, 65, 0.05);
    }

    /* Tabla limpia y minimalista */
    #tabla-tiendas {
        border-radius: 15px;
        overflow: hidden;
        border: none;
    }

    #tabla-tiendas td {
        padding: 16px 12px;
        border-bottom: 1px solid #EAE7E0;
        font-size: 0.9rem;
        color: #444;
        background-color: white;
    }

    #tabla-tiendas tr:last-child td {
        border-bottom: none;
    }

    #tabla-tiendas tr:hover td {
        background-color: #FDFCF9;
        color: #4A6741;
    }

    /* Pin Amarillo estilo "Punto de Interés" Orgánico */
    .punto-amarillo {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #D4AF37; /* Oro viejo / Mostaza rústico */
        border: 2.5px solid #FFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        color: white;
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 5;
    }

    .punto-amarillo:hover {
        transform: scale(1.4) rotate(5deg);
        background: #4A6741; /* Cambia a verde al pasar el mouse */
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* Efecto para el mapa (Opcional) */
    .mapa-wrapper img {
        filter: grayscale(0.2) sepia(0.1); /* Hace que el azul sea menos eléctrico */
        opacity: 0.9;
    }

/* --- SECCIÓN PROCESO KÉFIR --- */
.kefir-process {
    padding-block: 2rem 2rem;
    overflow: hidden;
}

.kefir-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* El Grid obliga a que todas las columnas midan lo mismo de alto */
.kefir-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    align-items: stretch; 
}

/* El contenedor de la imagen se expande */
.kefir-side-img {
    display: flex;
}

/* La imagen ocupa el 100% del alto disponible del texto */
.kefir-side-img img {
    width: 100%;
    height: 100%; 
    object-fit: cover; /* Evita que la foto se deforme al estirarse */
    border-radius: 30px;
    border: 8px solid #46607a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.kefir-side-img img.mirror {
    transform: scaleX(-1);
}

/* Estilos de la lista para mantener coherencia */
.kefir-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye los pasos equitativamente */
}

.kefir-item {
    display: flex;
    gap: 15px;
    margin-bottom: 1.2rem;
    align-items: flex-start;
}

.kefir-number {
    background: #46607a;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: bold;
}

.kefir-result {
    color: #000;
    padding: 1.2rem;
    background: #f0f7f7;
    border-radius: 15px;
    border-left: 5px solid #46607a;
}

/* Responsive: En móviles ocultamos las laterales para no apretar el texto */
@media screen and (max-width: 992px) {
    .kefir-grid {
        grid-template-columns: 1fr;
    }
    .kefir-side-img {
        display: none;
    }
}

/* Banner Principal */
.degustacion-banner {
    background: #fffdf5;
    border-radius: 3rem;
    padding: 4rem;
    color: var(--title-color);;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    box-shadow: inset var(--shadow-card);
    margin-bottom: 5rem;
    overflow: hidden;
    text-align: justify;
}

.degustacion-content {
    flex: 1;
    min-width: 300px;
}

.degustacion-text {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.degustacion-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
}

.degustacion-info i {
    font-size: 2rem;
}

/* Carrusel Animado */
.degustacion-carousel {
    flex: 1;
    min-width: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 2rem;
}

.carousel-track {
    display: flex;
    width: calc(250px * 5); /* Ajustar según número de fotos */
    animation: scroll-carousel 15s linear infinite;
}

.carousel-item {
    width: 250px;
    height: 300px;
    padding: 0 10px;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 8px solid #46607a;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Animación Infinita */
@keyframes scroll-carousel {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 3)); } /* El número de fotos originales */
}

/* Pausar al pasar el mouse (opcional, se ve pro) */
.degustacion-carousel:hover .carousel-track {
    animation-play-state: paused;
}

.degustacion-info i {
    font-size: 2rem;
    color: #46607a; /* Si el fondo es turquesa, el icono blanco resalta bien */
    /* O si quieres un color específico como un amarillo suave para que resalte: */
    /* color: #f1c40f; */
}

/* Responsive */
@media (max-width: 768px) {
    .degustacion-banner {
        padding: 2.5rem;
        text-align: center;
    }
    .degustacion-info {
        justify-content: center;
    }
}

/* Contenedor Principal */
.simbiose-search-wrapper {
    max-width: 1300px;
    margin: auto;
}

/* Botones Lima/Provincias */
.region-buttons-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-region {
    cursor: pointer;
    padding: 12px 35px;
    border-radius: 50px;
    border: 2px solid #46607a;
    background: transparent;
    color: #46607a;
    font-weight: bold;
    transition: 0.3s;
}

.btn-region.active {
    background: #46607a;
    color: white;
}

/* Layout Principal */
.search-main-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.table-column {
    flex: 1.5;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Selector/Filtro */
.selector-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 1.5rem;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.selector-label {
    color: #46607a;
    font-weight: bold;
    font-size: 0.9rem;
}

.selector-input {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #46607a;
    color: #555;
    outline: none;
    background: #fff;
}

/* Contenedor de Resultados */
.results-container {
    background: #fff;
    border-radius: 2rem;
    box-shadow: inset var(--shadow-card);
    border: 1px solid #eee;
    min-height: 450px;
    overflow: hidden;
}

/* Estado Vacío */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    text-align: center;
}

.empty-state-img {
    width: 100px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-state-title {
    color: #46607a;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.empty-state-text {
    color: #888;
    max-width: 300px;
    line-height: 1.5;
}

/* Estilos de Tabla */
.table-header-title {
    background: #3ea8ab;
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

.table-scroll-area {
    max-height: 450px;
    overflow-y: auto;
}

.locations-table {
    width: 100%;
    border-collapse: collapse;
}

.locations-table thead {
    background: #f9fdfd;
    position: sticky;
    top: 0;
    z-index: 5;
}

.locations-table th {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.75rem;
    color: #3ea8ab;
    text-transform: uppercase;
}

.locations-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 0.85rem;
}

.text-center { text-align: center; }

/* Columna Mapa */
.map-column {
    flex: 1;
    min-width: 320px;
    background: #fff;
    border-radius: 2rem;
    box-shadow: inset var(--shadow-card);;
    padding: 30px;
    border: 1px solid #eee;
    text-align: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.map-container {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: auto;
}

.map-base-img {
    width: 100%;
    filter: grayscale(0.5) opacity(0.7);
}

/* Pin del Mapa */
.map-pin {
    width: 100%;
    position: absolute;
    flex-direction: column;
    align-items: center;
    animation: bounce 0.6s infinite alternate;
}

.pin-info-bubble {
    background: white;
    padding: 6px 12px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border: 2px solid #3ea8ab;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.pin-icon {
    width: 25px;
}

#nombre-pin {
    font-size: 11px;
    font-weight: bold;
    color: #3ea8ab;
    white-space: nowrap;
}

.map-pin i {
    color: #e74c3c;
    font-size: 2.2rem;
}

/* Animación Rebotar */
@keyframes bounce {
    from { transform: translate(-50%, -50%); }
    to { transform: translate(-50%, -65%); }
}

/* Título sobre el mapa */
.map-title {
    color: #46607a; /* Tu nuevo color azul acero */
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Texto de actualización debajo del mapa */
.map-update-text {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #888;
}

/* Color para el iconito del camión con tu código */
.map-update-text i {
    color: #46607a; /* Aplicando el mismo color para armonizar */
    font-size: 1.2rem;
}

/* ==========================================================================
   Contenedor de la Sección y Línea de Tiempo
   ========================================================================== */
.timeline-section {
    padding: 60px 20px;
    background-color: #fdfaf5;
}

.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #46607a;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 10px;
}

/* Items y Alternancia */
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
}

.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }

.timeline-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: #3ea8ab;
    border: 4px solid #fff;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 10px rgba(62, 168, 171, 0.5);
}

.timeline-item:nth-child(even) .timeline-dot { left: -10px; }

/* ==========================================================================
   Tarjeta de Contenido (Ajustada para uniformidad)
   ========================================================================== */
.timeline-content {
    padding: 20px;
    background-color: white;
    position: relative;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    
    /* FIX: Forzar mismo tamaño y layout flex */
    /* min-height: 480px;  */
    display: flex;
    flex-direction: column;
}

.timeline-content:hover { transform: translateY(-5px); }

.card-header {
    background-color: #3ea8ab;
    padding: 12px 20px;
    margin: -20px -20px 15px -20px;
    border-radius: 1.5rem 1.5rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 { color: white !important; margin: 0 !important; font-size: 1.1rem; }

.card-body { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    text-align: left !important; /* El texto dentro siempre a la izquierda */
}

/* ==========================================================================
   Collage de Imágenes (FIX: Alineación Perfecta)
   ========================================================================== */
.image-grid {
    display: flex;
    gap: 8px;
    height: 200px; /* Altura controlada */
    margin-bottom: 15px;
}

.img-main {
    width: 65%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.img-side-container {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.img-side-container img {
    width: 100%;
    flex: 1; /* Esto elimina el espacio en blanco, estirando las fotos */
    object-fit: cover;
    border-radius: 8px;
    min-height: 0;
}

/* ==========================================================================
   Modal y Botón
   ========================================================================== */
.btn-more {
    background: white;
    color: #3ea8ab;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

.btn-more:hover { background: #f0f0f0; }

.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 30px;
    width: 90%;
    max-width: 700px;
    border-radius: 20px;
    position: relative;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 10px;
    margin: 20px 0;
}

.modal-grid img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 768px) {
    .timeline-container::after { left: 31px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; left: 0 !important; text-align: left !important; }
    .timeline-dot { left: 21px !important; right: auto; }
    .image-grid { height: 150px; }
    .timeline-content { min-height: auto; }
}

/* Estilo mejorado para la fecha (Año) */
.timeline-date {
    margin-bottom: 15px;
    display: block;
}

.timeline-date span {
    background-color: #46607a; /* Azul acero */
    color: white;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(70, 96, 122, 0.3);
}

.timeline-item:nth-child(odd) .timeline-date { text-align: right; }
.timeline-item:nth-child(even) .timeline-date { text-align: left; }

/* Tarjeta y Collage (FIX de alineación) */
.timeline-content {
    padding: 20px;
    background-color: white;
    position: relative;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    min-height: 480px; 
    display: flex;
    flex-direction: column;
}

.card-header {
    background-color: #3ea8ab;
    padding: 12px 20px;
    margin: -20px -20px 15px -20px;
    border-radius: 1.5rem 1.5rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-grid {
    display: flex;
    gap: 8px;
    height: 200px;
    margin-bottom: 15px;
}

.img-main { width: 65%; height: 100%; object-fit: cover; border-radius: 10px; }

.img-side-container {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.img-side-container img {
    width: 100%;
    flex: 1; /* Esto quita los espacios blancos laterales */
    object-fit: cover;
    border-radius: 8px;
    min-height: 0;
}


/* .timeline-slider-section {
    padding: 60px 20px;
    background-color: #fdfaf5;
} */

.timeline-nav-wrapper {
    max-width: 800px;
    margin: 0 auto 40px auto;
    position: relative;
}

.timeline-nav-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* La línea base gris */
.timeline-nav-line::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #ddd;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.nav-item {
    position: relative;
    z-index: 2;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.year-label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #666;
    font-size: 1.1rem;
}

.diamond {
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid #ddd;
    transform: rotate(45deg);
    margin: 0 auto;
    transition: 0.3s;
}

/* Estado Activo (Cuando la línea "pasa" por ahí) */
.nav-item.active .year-label { color: #3ea8ab; transform: scale(1.2); }
.nav-item.active .diamond {
    background: #3ea8ab;
    border-color: #3ea8ab;
    box-shadow: 0 0 10px rgba(62, 168, 171, 0.5);
}

/* Manejo de Tarjetas */
.timeline-cards-display {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    height: 520px; /* Altura fija para evitar saltos */
}

.timeline-card {
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.timeline-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}




.snake-timeline-section {
    padding: 80px 20px;
    background-color: #fdfaf5;
    overflow: hidden;
}

.snake-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 100px 40px;
    position: relative;
}

/* La línea turquesa de fondo que serpentea */
.snake-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Ancho de la serpiente */
    height: 100%;
    background-color: rgba(62, 168, 171, 0.2); /* Color turquesa suave */
    border-radius: 50px;
    z-index: 0;
}

.snake-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Posicionamiento en zigzag */
.item-1, .item-3, .item-5 { grid-column: 1; } /* Izquierda */
.item-2, .item-4 { grid-column: 2; margin-top: 50px; } /* Derecha con offset */

/* Badge del Año (Estilo SimbiOse) */
.year-badge {
    background-color: #3ea8ab;
    color: white;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: 800;
    margin-bottom: -20px;
    position: relative;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(62, 168, 171, 0.4);
}

/* Ajuste de tus tarjetas */
.snake-item .timeline-content {
    width: 100%;
    max-width: 450px;
    min-height: 450px; /* Mantener uniformidad */
}

/* Flechas/Curvas Visuales entre items (Opcional) */
.snake-item::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 8px solid rgba(62, 168, 171, 0.3);
    border-radius: 50%;
    z-index: 1;
}

.item-1::after { top: 100%; left: 80%; border-left: 0; border-top: 0; }
.item-2::after { top: 100%; right: 80%; border-right: 0; border-top: 0; }

/* Responsive: En celular todo a una columna */
@media (max-width: 768px) {
    .snake-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .snake-container::before { left: 20px; transform: none; width: 40px; }
    .snake-item { grid-column: 1 !important; margin-top: 0 !important; padding-left: 60px; }
    .snake-item::after { display: none; }
}

.serpiente-solida {
    padding: 60px 0;
    background-color: #fdfaf5;
}

.contenedor-culebra {
    position: relative;
    max-width: 750px; /* Tamaño compacto */
    margin: 0 auto;
    padding-top: 30px !important;
}

/* La Culebra: Gruesa y Permanente */
.path-svg-fijo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    overflow: visible;
}

.path-svg-fijo path {
    stroke-width: 10; /* Grosor potente */
    stroke-dasharray: none; 
    stroke-dashoffset: 0;   
    opacity: 0.25; 
    transition: none; /* Quitamos cualquier efecto de desaparición */
}

.hitos-wrapper {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.hito-nodo {
    width: 42%;
    position: relative;
}

.h-izq { align-self: flex-start; }
.h-der { align-self: flex-end; }

/* Estilo de Tarjetas Compactas */
.tarjeta-slim {
    background: white;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.t-header-slim {
    background: #3ea8ab;
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: bold;
}

.t-content-slim {
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.t-content-slim img {
    width: 75px; height: 75px;
    border-radius: 12px;
    object-fit: cover;
}

.t-content-slim p {
    font-size: 0.78rem;
    margin: 0;
    color: #444;
}

/* El círculo del año centrado en la culebra */
.punto-anio {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #3ea8ab;
    color: white;
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    border: 5px solid #fdfaf5;
    box-shadow: 0 4px 10px rgba(62, 168, 171, 0.3);
}

.h-izq .punto-anio { right: -75px; }
.h-der .punto-anio { left: -75px; }

@media (max-width: 768px) {
    .contenedor-culebra {
        max-width: 90%; /* Aprovecha más el ancho en celular */
        padding-top: 20px !important;
        margin-left: 20px; /* Espacio para la línea a la izquierda */
    }

    /* Reposicionamos la culebra a la izquierda */
    .path-svg-fijo {
        left: -30px; /* La movemos hacia la izquierda */
        width: 80px; /* La hacemos más estrecha para que sea una onda suave */
    }

    .path-svg-fijo path {
        stroke-width: 12; /* Un poquito más gruesa para que resalte en pantallas pequeñas */
    }

    .hitos-wrapper {
        gap: 40px; /* Reducimos el espacio entre tarjetas */
    }

    .hito-nodo {
        width: 100%; /* Las tarjetas ocupan todo el ancho disponible */
        align-self: flex-start !important; /* Todas alineadas a la izquierda */
        padding-left: 45px; /* Espacio para que no tapen la línea */
    }

    /* Movemos los círculos de los años a la izquierda, sobre la línea */
    .punto-anio {
        width: 40px;
        height: 40px;
        font-size: 0.75rem;
        left: -50px !important; /* Posición fija sobre la línea lateral */
        right: auto !important;
    }

    /* Ajustes internos de la tarjeta para ahorrar espacio */
    .t-content-slim {
        padding: 10px;
        flex-direction: row; /* Mantenemos imagen y texto de lado */
    }

    .t-content-slim img {
        width: 60px;
        height: 60px;
    }

    .t-content-slim p {
        font-size: 0.72rem;
    }
    
    .t-header-slim {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}


:root {
    --simbi-gold: #ffcc00; /* El amarillo de tu imagen */
    --simbi-gray: #d1d1d1;
    --simbi-dark: #2c435c;
}

.simbi-kinetic-universe {
    position: relative;
    padding: 100px 20px;
    background: #fdfbf7;
    overflow: hidden;
}

/* --- Capa de Bacterias "Raras" --- */
.bact-float-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 1;
}

.bact-asset-alpha, .bact-asset-beta {
    position: absolute;
    width: 300px;
    opacity: 0.12;
    filter: blur(1px);
}

.bact-asset-alpha { top: -50px; right: -50px; animation: orbit 20s linear infinite; }
.bact-asset-beta { bottom: -50px; left: -100px; animation: orbit 25s linear infinite reverse; }

@keyframes orbit {
    from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

/* --- El Sistema de Riel --- */
.timeline-master-container {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto 80px;
    /* Mobile: permite scroll horizontal si la pantalla es muy chica */
    overflow-x: auto;
    padding: 60px 20px;
    scrollbar-width: none;
}

.timeline-rail-system {
    position: relative;
    height: 6px;
    background: var(--simbi-gray);
    border-radius: 10px;
    min-width: 600px; /* Evita que se colapse en mobile */
}

.rail-progress-fill {
    position: absolute;
    height: 100%;
    width: 0%; /* Se controla por JS */
    background: var(--simbi-gold);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
    transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    border-radius: 10px;
}

/* --- La Vaquita Inferior --- */
.cow-traveler-sprite {
    position: absolute;
    width: 65px;
    bottom: -70px; /* Debajo de la línea */
    left: 0;
    transform: translateX(-50%);
    transition: left 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 20;
}

/* --- Nodos (Hitos) --- */
.milestone-node {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    cursor: pointer;
    text-align: center;
}

/* Distribución manual o vía JS, aquí la pongo porcentual */
.milestone-node[data-year="2017"] { left: 0%; }
.milestone-node[data-year="2020"] { left: 25%; }
.milestone-node[data-year="2021"] { left: 50%; }
.milestone-node[data-year="2024"] { left: 75%; }
.milestone-node[data-year="2025"] { left: 100%; }

.node-core {
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid var(--simbi-gray);
    border-radius: 50%;
    transition: 0.3s;
}

.milestone-node.active .node-core {
    background: var(--simbi-gold);
    border-color: var(--simbi-gold);
    transform: scale(1.4);
}

.year-label-top {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 900;
    color: var(--simbi-dark);
    font-family: sans-serif;
}

/* --- Mobile Fix --- */
@media (max-width: 768px) {
    .timeline-master-container {
        padding-bottom: 100px;
    }
    .cow-traveler-sprite {
        width: 50px;
        bottom: -60px;
    }
}


:root {
    --simbi-gold: #ffcc00;
    --simbi-gray: #e0e0e0;
    --simbi-dark: #2c435c;
    --bg-crema: #fdfbf7;
}

.simbi-kinetic-universe { 
    padding: 80px 20px; 
    background: var(--bg-crema); 
    font-family: 'Outfit', sans-serif; /* O la que uses */
}

/* Timeline Layout */
.timeline-master-container { 
    max-width: 1000px; 
    margin: 0 auto 100px; 
    padding: 20px 0; 
}

.timeline-rail-system { 
    position: relative; 
    height: 4px; 
    background: var(--simbi-gray); 
    border-radius: 10px; 
}

.rail-progress-fill { 
    position: absolute; 
    height: 100%; 
    width: 0%; 
    background: var(--simbi-gold); 
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* La Vaca: Solo en Desktop */
.cow-traveler-sprite { 
    position: absolute; 
    width: 65px; 
    bottom: -75px; 
    left: 0;
    transform: translateX(-50%); 
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

/* Nodos */
.milestone-node { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%) translateX(-50%); 
    cursor: pointer; 
    z-index: 5; 
}

/* Posicionamiento de nodos */
.milestone-node[data-index="0"] { left: 0%; }
.milestone-node[data-index="1"] { left: 25%; }
.milestone-node[data-index="2"] { left: 50%; }
.milestone-node[data-index="3"] { left: 75%; }
.milestone-node[data-index="4"] { left: 100%; }

.node-core { 
    width: 14px; 
    height: 14px; 
    background: white; 
    border: 3px solid var(--simbi-gray); 
    border-radius: 50%; 
    transition: all 0.3s ease;
}

.milestone-node.active .node-core { 
    background: var(--simbi-gold); 
    border-color: var(--simbi-gold); 
    transform: scale(1.4); 
}

.year-label-top { 
    position: absolute; 
    top: -40px; 
    left: 50%; 
    transform: translateX(-50%); 
    font-weight: 800; 
    color: var(--simbi-dark);
}

/* Portales de Contenido */
.content-portal-zone { max-width: 1000px; margin: 0 auto; position: relative; }

.history-portal { 
    display: none; 
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.history-portal.active { 
    display: block; 
    opacity: 1;
    transform: translateY(0);
}

.portal-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; 
    align-items: center; 
}

.main-img { 
    width: 100%; 
    border-radius: 30px; 
    box-shadow: 15px 15px 40px rgba(0,0,0,0.08); 
}

.portal-text h2 { 
    color: var(--simbi-dark); 
    font-size: 2.2rem; 
    margin-bottom: 15px; 
}

.portal-text p { 
    font-size: 1.15rem; 
    line-height: 1.7; 
    color: #444; 
}

/* Responsivo Mobile */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .timeline-master-container { width: 90%; margin-bottom: 50px; }
    .portal-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .portal-text h2 { font-size: 1.6rem; }
}




:root {
    --verde-simbiose: #3ea8ab;
    --gris-claro: #ddd;
}

/* 1. Contenedor de la línea */
.timeline-nav-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 4px; /* Grosor de la línea */
    background-color: var(--gris-claro); /* Fondo gris (lo que falta) */
    margin: 80px auto 50px auto;
    max-width: 800px;
    z-index: 1;
}

/* 2. LA LÍNEA VERDE (El progreso) */
#line-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; /* Ocupa el 100% de los 4px de altura */
    background-color: var(--verde-simbiose) !important;
    width: 0%; /* JS controla esto */
    z-index: 2; /* Por encima del gris */
    transition: width 0.6s ease-in-out;
}

/* 3. Los puntos (Nav Items) */
.nav-item {
    position: relative;
    z-index: 3; /* Por encima de la línea verde */
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* 4. Estilo del Círculo (Dot) */
.dot {
    width: 22px;
    height: 22px;
    background: white;
    border: 3px solid var(--gris-claro); /* Inicia gris */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    background-clip: padding-box; /* Evita que el fondo se salga del borde */
}

/* El círculo interno (El centro verde) */
.dot::after {
    content: '';
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    transition: background 0.4s ease;
}

/* --- ESTADOS PINTADOS --- */

/* Cuando la vaca pasa, pintamos el borde del círculo y el año */
.nav-item.completed .dot,
.nav-item.active .dot {
    border-color: var(--verde-simbiose) !important;
}

/* Pintamos el centro del círculo */
.nav-item.completed .dot::after,
.nav-item.active .dot::after {
    background: var(--verde-simbiose) !important;
}

/* Pintamos el texto del año */
.nav-item.completed .year-label,
.nav-item.active .year-label {
    color: var(--verde-simbiose) !important;
}

.year-label {
    position: absolute;
    top: -45px;
    font-weight: 800;
    color: #555;
    transition: color 0.4s ease;
}

/* 5. La Vaquita */
.vaca-runner {
    position: absolute;
    top: 18px; /* Ajusta esto para que la vaca quede justo debajo de la línea */
    left: 0%;
    z-index: 10;
    width: 50px;
    transform: translateX(-50%);
    transition: left 0.6s ease-in-out;
}

/* Variables de color para mantener consistencia */
:root {
    --verde-simbiose: #3ea8ab;
    --gris-claro: #ddd;
    --fuente-years: 800;
}

/* Contenedor principal del display de tarjetas */
.sb-cards-display {
    width: 100%;
    padding: 20px 0;
    min-height: 500px;
}

.sb-card {
    display: none; 
    max-width: 1000px;
    margin: 0 auto;
    /* --- CAMBIOS AQUÍ --- */
    background: transparent; /* Quitamos el fondo blanco */
    padding: 20px 0;         /* Reducimos el espacio interno */
    box-shadow: none;        /* Quitamos la sombra pesada */
}

/* Clase activa con animación de entrada */
.sb-card.active {
    display: block;
    animation: sb-fadeInUp 0.6s ease-out;
}

/* Layout Flexbox: Texto Izquierda | Imagen Derecha */
.sb-container {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: nowrap;
}

/* Lado del Contenido (Izquierdo) */
.sb-info-side {
    flex: 1;
    text-align: left;
}

.sb-header {
    margin-bottom: 20px;
}

.sb-title {
    font-size: 2rem;
    color: #46607a;
    font-weight: var(--fuente-years);
    margin-bottom: 15px;
    line-height: 1.2;
}

.sb-description {
    color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 450px;
    text-align: justify; 
}

/* Botón "Ver más" */
.sb-btn-more {
    background: var(--verde-simbiose);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-btn-more:hover {
    background: #348e91;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(62, 168, 171, 0.3);
}

/* Lado Multimedia (Derecho - Mosaico) */
.sb-media-side {
    flex: 1.2;
}

.sb-mosaic {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Proporción para imagen grande y columna */
    gap: 15px;
    align-items: stretch;
}

.sb-img-lg {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 30px;
    border: 8px solid #46607a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.sb-img-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sb-img-sm {
    width: 100%;
    height: 192px; /* Ajustado para que las 2 pequeñas sumen la altura de la grande */
    object-fit: cover;
    border-radius: 30px;
    border: 8px solid #46607a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Adaptabilidad para Tablets y Celulares */
@media (max-width: 991px) {
    .sb-container {
        flex-direction: column; /* Se apila verticalmente */
        text-align: center;
    }
    
    .sb-info-side {
        order: 1;
    }

    .sb-media-side {
        order: 2;
        width: 100%;
    }

    .sb-header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Animación de suavizado */
@keyframes sb-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.sb-editorial-section {
    padding: 80px 20px;
    background-color: #fff;
}

.sb-editorial-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Imagen con acento decorativo */
.sb-editorial-image {
    flex: 1;
    position: relative;
}

.sb-featured-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
    z-index: 2;
    position: relative;
    box-shadow: 20px 20px 0px var(--verde-simbiose); /* Cuadro de color atrás */
}

/* Contenido de texto */
.sb-editorial-text {
    flex: 1.2;
    padding-left: 20px; /* Lo "botamos" un poco para dar aire */
}

.sb-editorial-main-title {
    font-size: 3rem;
    color: #333;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: lowercase; /* Estilo moderno de revista */
}

.sb-editorial-main-title::first-letter {
    text-transform: uppercase;
}

.sb-editorial-body p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.sb-highlight-text {
    border-left: 4px solid var(--verde-simbiose);
    padding-left: 20px;
    font-style: italic;
    color: #444 !important;
}

/* Botón estilo Noticia */
.sb-news-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: var(--verde-simbiose);
    border: 2px solid var(--verde-simbiose);
    padding: 12px 30px;
    border-radius: 5px; /* Un poco más cuadrado para estilo periodístico */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.sb-news-btn:hover {
    background: var(--verde-simbiose);
    color: white;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 900px) {
    .sb-editorial-container {
        flex-direction: column;
    }
    .sb-editorial-text {
        padding-left: 0;
    }
    .sb-featured-img {
        height: 350px;
        box-shadow: 10px 10px 0px var(--verde-simbiose);
    }
}

.sb-author-signature {
    padding-top: 50px;
    padding-bottom: 180px;
    text-align: center;
    background-color: transparent; /* O el color de fondo de tu sitio */
}

.sb-signature-container {
    max-width: 750px;
    margin: 0 auto;
}

/* El icono de comillas que querías mantener */
.sb-quote-icon {
    font-size: 2.5rem;
    color: #46607a;
    margin-bottom: 25px;
    opacity: 0.8; /* Un poco más fuerte ya que no tiene fondo blanco */
}

/* La frase principal */
.sb-signature-text {
    font-size: 2.2rem; /* Tamaño potente */
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin: 0 0 30px 0;
    font-style: italic;
    font-family: 'Georgia', serif; /* O la tipografía elegante de tu proyecto */
}

/* El bloque de la firma */
.sb-signature-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sb-signature-line {
    width: 40px;
    height: 3px;
    background: #46607a;
    border-radius: 2px;
}

.sb-signature-author span {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #46607a;
    font-size: 0.9rem;
}

/* Ajuste para celulares */
@media (max-width: 600px) {
    .sb-signature-text {
        font-size: 1.6rem;
    }
}

.sb-gallery-section {
    padding: 120px 20px;
    background-color: transparent;
}

.sb-gallery-container {
    max-width: 1100px;
    margin: 0 auto;
}

.sb-gallery-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--verde-simbiose);
    font-weight: 800;
    margin-bottom: 50px;
}

/* El Grid Dinámico */
.sb-gallery-grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    grid-auto-rows: 200px; /* Altura base para las filas */
    grid-auto-flow: dense; /* Rellena huecos */
}

/* Estilo Base para cada ítem */
.sb-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 30px; /* Bordes redondeados orgánicos */
    border: 8px solid #46607a;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.sb-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Definimos los tamaños asimétricos */
.sb-item-lg { grid-row-end: span 2; grid-column-end: span 2; } /* Grande 2x2 */
.sb-item-md { grid-column-end: span 2; } /* Ancha 2x1 */
.sb-item-sm { grid-row-end: span 1; } /* Cuadrada 1x1 */

/* Efecto Hover Pro: Superposición */
.sb-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(74, 109, 124, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sb-gallery-overlay span {
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 2px;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

/* Interacciones Hover */
.sb-gallery-item:hover {
    transform: scale(1.03) translateY(-5px); /* Se eleva un poco */
    box-shadow: 0 15px 35px rgba(62, 168, 171, 0.2);
}

.sb-gallery-item:hover .sb-gallery-overlay {
    opacity: 1;
}

.sb-gallery-item:hover .sb-gallery-overlay span {
    transform: translateY(0);
}

.sb-gallery-item:hover img {
    transform: scale(1.1) rotate(1deg); /* Ligero giro para que se vea "vivo" */
}

/* Responsive */
@media (max-width: 768px) {
    .sb-gallery-grid-masonry {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 150px;
    }
    .sb-gallery-item {
        grid-row-end: span 1 !important;
        grid-column-end: span 1 !important;
    }
    .sb-gallery-title { font-size: 2rem; }
}

.simbiose-essencia {
    position: relative;
    padding: 120px 24px;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* LA MAGIA DEL FONDO */
.simbiose-essencia__bg {
    position: absolute;
    inset: 0;
    /* Cargamos la imagen a la izquierda y la desvanecemos hacia la derecha */
    background: 
        linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(255,255,255,1) 70%),
        url('https://cdn.simbiosefermentados.com/BACTERIAS-07.png');
    background-repeat: no-repeat;
    background-size: contain; /* Para que la burbuja se vea completa a la izquierda */
    background-position: left center;
    z-index: 1;
    opacity: 0.8;
}

.simbiose-essencia__container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: flex-end; /* Empuja el contenido a la derecha */
}

.simbiose-essencia__content {
    width: 100%;
    max-width: 650px; /* Limitamos el ancho para que no tape las burbujas de la izquierda */
    padding: 40px;
    background: rgba(255, 255, 255, 0.5); /* Un toque de transparencia */
    border-radius: 20px;
}

.simbiose-essencia__content .section__title_nosotros {
    text-align: left;
    color: #2d4a22;
}

.simbiose-essencia__text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.simbiose-essencia__highlight {
    font-weight: 700;
    color: #2d4a22 !important;
    font-size: 1.3rem !important;
}

/* --- ADAPTACIÓN MOBILE --- */
@media (max-width: 768px) {
    .simbiose-essencia {
        padding: 80px 20px;
    }

    .simbiose-essencia__bg {
        /* En móvil, que las burbujas se vean de fondo general pero más suaves */
        background-size: cover;
        opacity: 0.3;
        background: 
            linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.9) 100%),
            url('https://cdn.simbiosefermentados.com/BACTERIAS-07.png');
    }

    .simbiose-essencia__content {
        padding: 20px;
        text-align: center;
    }

    .simbiose-essencia__content .section__title_nosotros {
        text-align: center;
    }

    .simbiose-essencia__text p {
        font-size: 1.05rem;
    }
}

.nuestra-esencia-v2 {
    position: relative;
    padding: 100px 5%;
    background-color: transparent; /* Fondo transparente */
    overflow: hidden;
}

/* Posicionamiento de las Burbujas */
.burbujas-decorativas {
    position: absolute;
    right: -5%; /* Sale un poco para dar profundidad */
    top: 50%;
    transform: translateY(-50%);
    width: 350px; /* Tamaño controlado, ni muy grande ni muy pequeño */
    opacity: 0.4; /* Sutil para que no compita con el texto */
    z-index: -1;
    pointer-events: none; /* Para que no interfiera con clicks */
}

.container-esencia {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

/* Imagen con estilo Simbiose */
.esencia-imagen {
    position: relative;
}

.foto-fundadores {
    width: 100%;
    border-radius: 30px;
    box-shadow: 12px 12px 0px #46607a;
    display: block;
}

.badge-experiencia {
    position: absolute;
    top: -20px;
    left: -20px;
    background: #2d4554; /* El azul oscuro de tu marca */
    color: #fdfaf5;
    padding: 25px;
    border-radius: 25px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}

.badge-experiencia .numero {
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
    line-height: 1;
}

/* Textos */
.subtitulo-seccion {
    color: #78a1a0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
}

.titulo-esencia {
    color: #2d4554;
    font-size: 2.8rem;
    margin: 15px 0 25px 0;
    line-height: 1.2;
}

.texto-principal {
    color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 480px;
    text-align: justify;
}

.texto-promociones {
    color: var(--title-color);
    line-height: 1.4;
    margin-top: 1rem;
    max-width: 480px;
    text-align: justify;
}

/* Lista de beneficios limpia */
.beneficios-lista {
    margin-bottom: 10px;
}

/* Contenedor principal de los iconos y números */
.simbiose-stats-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 20px 0;
    flex-wrap: wrap; /* Para que en celular se pongan uno debajo de otro */
}

/* Cada columna individual */
.simbiose-stat-item {
    text-align: center;
    flex: 1;
    min-width: 120px;
}

/* Contenedor del icono (círculo o espacio suave) */
.stat-icon-wrapper {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.stat-icon-wrapper img {
    width: 100px; /* Tamaño del icono */
    height: auto;
    opacity: 0.8;
}

/* El número grande */
.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b; /* Un color oscuro/elegante como el de One Night */
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Arial Black', sans-serif; /* O la que uses para títulos */
}

/* La etiqueta de abajo */
.stat-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0;
}

/* Responsive para celulares */
@media (max-width: 768px) {
    .simbiose-stats-container {
        justify-content: center;
        gap: 40px;
    }
    .stat-number {
        font-size: 2rem;
    }
}

.item-beneficio {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: #2d4554;
}

.check-icon {
    color: #78a1a0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Botón estilizado */
.btn-esencia-link {
    display: inline-block;
    padding: 16px 40px;
    background-color: #2d4554;
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-esencia-link:hover {
    background-color: #78a1a0;
    transform: scale(1.05);
}

/* --- MOBILE --- */
@media (max-width: 900px) {
    .container-esencia {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .burbujas-decorativas {
        width: 200px;
        right: -10%;
        top: 10%;
    }

    .item-beneficio {
        justify-content: center;
    }

    .badge-experiencia {
        top: 10px;
        left: 10px;
        padding: 15px;
    }
}

/* Paleta de Colores Simbiose (Reutilizada) */
:root {
    --azul-oscuro: #2d4554;
    --celeste: #78a1a0;
    --crema: #fdfaf5;
    --blanco: #ffffff;
}

.seccion-bienestar-v3 {
    padding: 120px 5%;
    background-color: transparent; /* Fondo transparente */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* --- IMAGEN DE FONDO (4 BURBUJAS IZQ) --- */
.bacterias-fondo-izq {
    position: absolute;
    left: -10%; /* Sale un poco para dar profundidad visual */
    top: 50%;
    transform: translateY(-50%) rotate(15deg); /* Giro para dinamismo */
    width: 500px; /* Tamaño controlado y potente */
    max-width: 60%; /* No satures el diseño */
    opacity: 0.2; /* SUTILEZA ANTE TODO. No debe competir con el texto */
    z-index: -1; /* Asegura que esté por detrás de todo */
    pointer-events: none; /* Para que no interfiera con clicks */
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.05)); /* Sombra sutil */
}

.container-bienestar-v3 {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Visual a la izquierda, Texto a la derecha */
    gap: 80px;
    align-items: center;
}

/* Lado Visual Vacío (Para que respire el fondo) */
.espacio-vacio-visual {
    height: 400px; /* Altura mínima para asegurar el espacio visual */
}

/* --- LADO DE CONTENIDO (DERECHA) --- */
.tag-seccion {
    color: var(--celeste);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 15px;
}

.titulo-bienestar-v3 {
    color: var(--azul-oscuro);
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 25px;
    font-family: 'Serif', Georgia, serif; /* Usamos tu tipografía elegante */
}

.bienestar-contenido-v3 p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* GRID DE ETIQUETAS (TAGS) */
.malestares-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 45px;
    max-width: 550px;
}

.tag-malestar {
    background: var(--crema);
    color: var(--azul-oscuro);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(120, 161, 160, 0.3); /* Borde sutil celeste */
    transition: all 0.3s ease;
}

.tag-malestar:hover {
    background: var(--azul-oscuro);
    color: var(--blanco);
    border-color: var(--azul-oscuro);
    transform: translateY(-2px);
}

/* BOTÓN DE ACCIÓN */
.btn-transformacion {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--azul-oscuro);
    color: var(--blanco);
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(45, 69, 84, 0.15);
}

.btn-transformacion:hover {
    background: var(--celeste);
    transform: scale(1.05);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 968px) {
    .seccion-bienestar-v3 {
        padding: 80px 5%;
    }

    .container-bienestar-v3 {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .espacio-vacio-visual {
        display: none; /* Ocultamos el espacio vacío en mobile */
    }

    .bacterias-fondo-izq {
        width: 300px;
        left: -10%;
        top: 10%;
        opacity: 0.3; /* Aumentamos sutilmente opacidad en mobile */
    }

    .titulo-bienestar-v3 {
        font-size: 2.2rem;
    }

    .malestares-tags-grid {
        justify-content: center;
        margin: 0 auto 35px auto;
    }

    .btn-transformacion {
        width: 100%;
        justify-content: center;
    }
}


.kefir-premium-showcase {
    /* padding: 100px 20px; */
    background: #fffdf5;
    position: relative;
    overflow: hidden;
}

.main-layout {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja las columnas a los extremos */
    max-width: 1400px;
    margin: 0 auto;
    gap: 5px; /* Espacio de seguridad entre texto y círculos */
}

.cards-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

/* Diseño de la Card */
.benefit-card {
    background-color: #fffdf5;
    padding: 30px;
    border-radius: 20px;
    box-shadow: inset var(--shadow-card);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 320px;
}


/* Estilos de Texto e Iconos */
.label {
    position: absolute;
    top: -15px;
    background: #5b7c99;
    color: white;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}

.card-icon-container {
    margin-bottom: 15px;
}

.card-icon-container img {
    width: 45px;
    height: auto;
}

.card-text h3 {
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 10px;
}

.card-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Alineaciones específicas para dar simetría */
.left-side .benefit-card { text-align: right; margin-left: auto; }
.right-side .benefit-card { text-align: left; }

/* Centro Visual */
.hero-visual {
    flex: 0.2;
    display: flex;
    justify-content: center;
    position: relative;
}

.home__img {
    width: 400px;
    z-index: 10;
    filter: drop-shadow(0 25px 45px rgba(0,0,0,0.12));
    animation: float 6s ease-in-out infinite;
}
/* Centrado del contenedor del icono */
.card-icon-container {
    width: 100%; /* Asegura que ocupe todo el ancho de la card */
    display: flex;
    justify-content: center; /* Centra el icono horizontalmente */
    align-items: center;
    margin-bottom: 20px;
}

.card-icon-container img {
    width: 50px;
    height: auto;
    /* Un pequeño brillo para que no se vea plano */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Ajuste opcional para las cards */
.benefit-card {
    background: #ffffff;
    padding: 20px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    position: relative;
    transition: all 0.3s ease;
    max-width: 320px;
    /* Forzamos que el contenido interno se alinee al centro si así lo prefieres */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; /* Esto unifica el estilo en ambos lados */
}

/* Centramos el bloque de texto y sus elementos internos */
.card-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el título y el párrafo */
    text-align: center;  /* Asegura que el texto fluya desde el centro */
}

.card-text h3 {
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 10px;
    font-weight: 800;
}

.card-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    max-width: 250px; /* Limitamos el ancho para que el párrafo no se estire demasiado */
}

/* Ajuste en la Card para que ignore las alineaciones laterales anteriores */
.benefit-card {
     background-color: #fffdf5;
    padding: 20px 20px;
    border-radius: 20px;
    box-shadow: inset var(--shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center; /* Garantiza que todo (Icono + Texto) esté al eje */
    transition: transform 0.3s ease;
    margin: 0 auto; /* Centra la card en su columna */
}





/* Si quieres mantener la alineación original (Derecha/Izquierda) 
   pero solo centrar el icono, borra las dos líneas de arriba 
   (align-items y text-align) de .benefit-card */

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Responsive */
@media (max-width: 1100px) {
    .main-layout { flex-direction: column; gap: 40px; }
    .hero-visual { order: -1; }
    .benefit-card { margin: 0 auto !important; text-align: center !important; }
}

.simbiose-faq {
    position: relative;
    padding: 100px 20px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Imagen de fondo con overlay azulón */
    background: linear-gradient(rgba(15, 45, 80, 0.85), rgba(10, 30, 60, 0.9)), 
                url('https://cdn.simbiosefermentados.com/contactanos.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax sutil */
}

.faq-container {
    width: 100%;
    max-width: 800px;
}

.faq-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 50px;
    font-family: 'Poppins', sans-serif;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    border: 1.5px solid rgba(255, 255, 255, 0.6); /* Borde blanco semi-transparente */
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05); /* Fondo muy sutil */
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.faq-question {
    width: 100%;
    padding: 25px 30px;
    background: none;
    border: none;
    color: #fff; /* Texto blanco */
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(255, 255, 255, 0.02);
}

.faq-answer p {
    color: #000;
    line-height: 1.4;
}

/* Estado Activo (Para cuando lo abras con JS) */
.faq-item.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

/* Icono de flecha animado */
.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* --- ESTILOS PARA MOBILE --- */
@media (max-width: 768px) {
    .simbiose-faq {
        padding: 60px 15px; /* Menos espacio en los bordes */
        background-attachment: scroll; /* Mejor rendimiento en móviles antiguos */
    }

    .faq-title {
        font-size: 1.8rem; /* Título más pequeño para que no ocupe toda la pantalla */
        margin-bottom: 30px;
        line-height: 1.2;
    }

    .faq-question {
        padding: 18px 20px; /* Reducimos el padding interno */
        font-size: 1rem;    /* Texto más legible en móviles */
    }

    .faq-answer p {
        padding: 0 20px 20px 20px;
        font-size: 0.9rem;
    }

    .faq-accordion {
        gap: 15px; /* Acortamos la distancia entre preguntas */
    }
    
    .faq-item {
        border-radius: 10px; /* Bordes un poco menos redondeados para ganar espacio */
    }
}

/* Contenedor base - SIEMPRE VISIBLE */
.connector-line {
    position: absolute;
    /* Cambiamos a 2px y subimos la opacidad para que resalten */
    border: 4px dashed rgba(91, 124, 153, 0.6); 
    z-index: 0; /* Subimos el nivel para que estén por encima del fondo */
    pointer-events: none;
    display: block !important; /* Forzamos que existan */
}

/* Flecha Izquierda Arriba (01) */
.line-left-top {
    width: 130px; /* Un poco más largas para que lleguen al centro */
    height: 100px;
    border-bottom: none;
    border-left: none;
    z-index: 0;
    border-radius: 0 100px 0 0;
    top: 50%;
    right: -135px; /* Ajustamos la posición de salida */
}

/* Flecha Izquierda Abajo (02) */
.line-left-bottom {
    width: 130px;
    height: 100px;
    border-top: none;
    z-index: 0;
    border-left: none;
    border-radius: 0 0 100px 0;
    bottom: 50%;
    right: -135px;
}

/* Flecha Derecha Arriba (03) */
.line-right-top {
    width: 130px;
    height: 100px;
    border-bottom: none;
    border-right: none;
    border-radius: 100px 0 0 0;
    top: 50%;
    left: -135px;
}

/* Flecha Derecha Abajo (04) */
.line-right-bottom {
    width: 130px;
    height: 100px;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 100px;
    bottom: 50%;
    left: -135px;
}

/* --- REGLA DE ORO PARA QUE SALGAN --- */
.benefit-card {
    position: relative;
    overflow: visible !important; /* SI ESTÁ EN HIDDEN, LA FLECHA NO SALE */
}

.cards-column, .main-layout {
    overflow: visible !important; /* Evita que el contenedor padre las corte */
}

/* Ajuste de visibilidad en mobile */
@media (max-width: 1100px) {
    .connector-line {
        display: none !important; /* Aquí sí las matamos para que no estorben */
    }
}

.home-banner {
    width: 100%;
    overflow: hidden;
    margin-top: 135px; /* Mantenemos tu margen superior */
    position: relative;
}

.banner__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- FLECHAS EN CÍRCULO (Centrado Garantizado) --- */
.banner-swiper .swiper-button-next,
.banner-swiper .swiper-button-prev {
    width: 55px;
    height: 55px;
    background-color: rgba(148, 163, 184, 0.7); 
    border-radius: 50%;
    color: #fff;
    top: 45% !important;
    /* Este es el truco: suben la mitad de su propio tamaño para el centro real */
    transform: translateY(-50%) !important; 
    
    margin-top: 0 !important; /* Limpiamos cualquier margen que Swiper meta por defecto */
    position: absolute;
    /* El combo de oro para centrar */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Limpiamos interferencias */
    padding: 0;
    margin: 0;
    overflow: hidden;
    
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* El icono interno */
.banner-swiper .swiper-button-next i,
.banner-swiper .swiper-button-prev i {
    font-size: 3rem; 
    /* Forzamos que el icono no tenga espacio extra arriba/abajo */
    line-height: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- AJUSTE FINO POR ICONO --- */
/* A veces los iconos de flecha vienen cargados a un lado en la fuente. 
   Si ves que falta un pelín, ajusta el padding-left o right aquí: */
.banner-swiper .swiper-button-next i {
    margin-left: -15px !important; 
}
.banner-swiper .swiper-button-prev i {
    margin-right: -15px !important;
}

/* Eliminamos el estilo por defecto de Swiper */
.banner-swiper .swiper-button-next::after,
.banner-swiper .swiper-button-prev::after {
    display: none;
    content: ""; 
}

.banner-swiper .swiper-button-next:hover,
.banner-swiper .swiper-button-prev:hover {
    background-color: rgba(91, 124, 153, 0.9);
    transform: scale(1.05);
}



/* --- CONTENEDOR DE PAGINACIÓN --- */
.banner-swiper .swiper-pagination {
    display: flex !important;
    align-items: center !important; /* Centrado vertical real */
    justify-content: center !important;
    bottom: 25px !important;
    width: 100%;
     text-align: center;
    height: 30px; /* Espacio suficiente para que el flex trabaje */
    z-index: 20 !important;
}

.swiper-pagination-bullet {
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}
/* --- DOTS BASE (Inactivos) --- */
.banner-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px; /* Altura idéntica al activo */
    background-color: var(--white-color);
    opacity: 0.5;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0 6px !important;
    
}

/* --- DOT ACTIVO (Píldora) --- */
.banner-swiper .swiper-pagination-bullet-active {
    background-color: var(--second-color) !important;
    width: 25px; /* Ancho de la píldora */
    height: 8px; /* ¡TIENE QUE SER IGUAL A LA DE LOS INACTIVOS! */
    border-radius: 12px;
    opacity: 1;
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .banner-swiper .swiper-button-next,
    .banner-swiper .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    .banner-swiper .swiper-button-next i,
    .banner-swiper .swiper-button-prev i {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   SECCIÓN PROMO: DESTACADOS (FINAL CONSOLIDADO)
   ========================================================================== */
.promo-section {
    padding-block: 5rem 8rem; 
    position: relative; 
    margin-bottom: 120px;
    overflow: hidden; /* Evita scroll lateral por las burbujas */
    width: 100%;
}

/* --- BURBUJAS DECORATIVAS IZQUIERDA --- */
.burbujas-promociones-izq {
    position: absolute;
    left: -5%; 
    top: 60%; 
    transform: translateY(-50%) scaleX(-1); 
    width: 350px; 
    opacity: 0.3; 
    z-index: 1;
    pointer-events: none;
}

.promo-title {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 5;
}

/* CONTENEDOR FLEX: 3 ARRIBA, 2 ABAJO CENTRADOS */
.promo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra las tarjetas de la última fila */
    gap: 25px;
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
    z-index: 5;
}

/* --- TARJETA CON EFECTO BRILLO --- */
.promo__card {
    position: relative;
    background-color: transparent; 
    border-radius: 20px;
    box-shadow: inset var(--shadow-card);
    padding: 1.7rem;
    flex: 0 1 380px; /* Tamaño fijo para forzar el salto de línea */
    min-width: 320px;
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.promo__card:hover {
    transform: translateY(-8px);
}

/* EFECTO DE BRILLO BLANCO CENTRAL */
.promo__card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.7); /* Brillo blanco */
    filter: blur(45px); /* Desenfoque para el aura */
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.promo__data-container {
    position: relative;
    z-index: 2; /* Encima del brillo */
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
}

/* --- IMAGENES UNIFORMES --- */
.promo__image-container {
    width: 45%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(4px 8px 12px rgba(0,0,0,0.1));
}

/* --- TEXTOS (PROMO Y PRECIO) --- */
.promo__text-content {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

/* Clase products__title (PROMO) */
.products_title {
    font-size: 35px !important;
    font-weight: 900;
    color: #3ea8ab;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
}

.products__title {
    display: none !important;
}

/* Clase products__price (DESCUENTO/PRECIO) */
.products_price {
    font-size: 45px !important;
    font-weight: 900;
    color: #46607a;
    line-height: 1;
    margin-block: 5px;
    letter-spacing: -2px; /* Letra ancha y compacta */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.05);
}


/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    .promo__card {
        flex: 0 1 45%; /* 2 por fila en tablets */
    }
}

@media (max-width: 768px) {
    .promo__card {
        flex: 0 1 100%; /* 1 por fila en móvil */
    }
    .promo__image-container {
        height: 150px;
    }
    .burbujas-promociones-izq {
        width: 220px;
        left: -10%;
        top: 80%; 
    }
}

.science.section {
    padding-block: 3rem 2rem;
}

.science__header {
    text-align: center;
    margin-bottom: 5rem;
}

.science__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: start;
}

/* Acordeón */
.faq-item {
    margin-bottom: 1.5rem;
}

.faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f0f7f7;
    border: 1px solid #46607a;
    border-radius: 1rem;
    transition: 0.3s;
}

.faq-question h3 {
    font-size: 1.2rem;
    color: #46607a;
    margin: 0;
}

.accordion__icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    color: #46607a;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
}

.faq-content {
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: justify;
    color: #000;
    
}

/* Estado Activo */
.faq-item.active .faq-question {
    background: #e2eeee;
}

.faq-item.active .accordion__icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 1000px; /* Suficiente para el contenido */
    transition: all 0.5s cubic-bezier(1, 0, 1, 0);
}

/* Imagen Lateral */
.science__sticky-img {
    position: sticky;
    top: 100px;
}

#science-img {
    width: 100%;
    border-radius: 30px;
    border: 8px solid #46607a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (max-width: 968px) {
    .science__grid {
        grid-template-columns: 1fr;
    }
    .science__sticky-img {
        display: none; /* Opcional: ocultar imagen en móvil para ahorrar espacio */
    }
}

/* Bloqueo del scroll de la web de fondo */
body.no-scroll {
    overflow: hidden !important;
}

/* El fondo oscuro que cubre todo */
.modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Negro elegante */
    backdrop-filter: blur(5px); /* Desenfoque sutil */
    z-index: 99999;
}

/* Contenedor del frame al centro */
.modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px; /* Tamaño ideal para el frame */
}

/* Para que el video sea responsivo (16:9) */
.video__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Botón de cerrar */
.modal__close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 50px;
    font-weight: 300;
    cursor: pointer;
    z-index: 100000;
}

/* --- CONTENEDOR DE FILA ÚNICA --- */
.recipes__cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* --- TARJETA --- */
.recipe__card {
    background-color: transparent;
    border-radius: 35px !important;
    overflow: hidden;
    background-color: #fffdf5;
    box-shadow: inset var(--shadow-card);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}


/* --- IMAGEN CON BORDE 8PX --- */
.recipe__img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
}

.recipe__img-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 8px solid #46607a; /* Tu borde azul */
}

/* --- BADGE SOBRE FOTO --- */
.recipe__badge {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: #46607a;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- CONTENIDO CENTRADO --- */
.recipe__content--center {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    flex-grow: 1;
}

.recipe__name-md {
    font-size: 1.5rem;
    color: #46607a;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.recipe__text-md {
    font-size: 0.9rem;
    color: #000;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Mantiene los botones alineados */
}

/* --- DISEÑO DE CHIPS (4h / Frío) --- */
.recipe__stats-group {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.recipe__stat-chip {
    background-color: #f4f7f6; 
    color: #46607a;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #e2e8e7;
}

/* --- BOTÓN CENTRADO --- */
.recipe__button-premium {
    background-color: #46607a;
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 180px; /* Botón pequeño pero con presencia */
}

.recipe__button-premium:hover {
    background-color: #384d61;
    transform: scale(1.05);
}

/* --- RESPONSIVO --- */
@media screen and (max-width: 992px) {
    .recipes__cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .recipes__cards-container {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
}

.trust {
    margin-top: -120px;
}

.trust__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en Desktop */
    gap: 2rem;
    margin-top: 8rem;
    margin-bottom: 7rem; /* Espacio extra para que los círculos no choquen con el título */
}

.trust__card {
    position: relative;
    padding: 3.5rem 1.5rem 2rem; /* Más padding arriba para el círculo */
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: inset var(--shadow-card);
    background-color: #fffdf5;
}

.trust__card:hover {
    transform: translateY(-10px);
}

/* --- ESTILOS DE LOS CÍRCULOS (IMÁGENES) --- */
.trust__img-circle {
    position: absolute;
    top: -45px; /* Hace que flote hacia arriba */
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #fff;
    padding: 5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 8px solid #46607a; /* El detalle punteado de tu imagen de referencia */
}

.trust__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --- COLORES DE FONDO (Basados en tu referencia) --- */
/* .trust__card-yellow { background-color: #f0f7f7; }
.trust__card-green  { background-color: #f0f7f7; }
.trust__card-blue   { background-color: #f0f7f7; }
.trust__card-pink   { background-color: #f0f7f7; } */

/* --- TEXTOS --- */
.trust__name {
    font-size: 1.1rem;
    color: #46607a;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.trust__description {
        color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 450px;
}

/* --- RESPONSIVO --- */
@media screen and (max-width: 1024px) {
    .trust__container {
        grid-template-columns: repeat(2, 1fr); /* 2x2 en tablets */
        row-gap: 5rem;
    }
}

@media screen and (max-width: 576px) {
    .trust__container {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        row-gap: 5rem;
    }
}

/* --- CONTENEDOR PADRE --- */
.smb-contenedor-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    min-width: 0; /* EVITA QUE EL GRID SE ESTIRE POR EL SWIPER */
}

/* --- TEXTOS --- */
.smb-titulo-ritual { font-size: 2.5rem; color: #46607a; margin-bottom: 1rem; }
.smb-descripcion-ritual { color: #666; margin-bottom: 2rem; line-height: 1.6; }
.smb-lista-items { display: grid; gap: 0.7rem; list-style: none; }
.smb-item-ritual { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #46607a; }

/* --- CARRUSEL (Aquí estaba el fallo) --- */
.smb-area-carrusel {
    position: relative;
    width: 100%;
    min-width: 0; 
    overflow: hidden; /* Corta cualquier desborde */
}

.smb-swiper-ajustado {
    width: 100%;
    border-radius: 35px;
    border: 6px solid #46607a;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.smb-imagen-slider {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

/* --- FLECHAS ESTILO CRECER+ --- */
.smb-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: #46607a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.smb-flecha-prev { left: 15px; }
.smb-flecha-next { right: 15px; }

/* --- RESPONSIVE --- */
@media screen and (max-width: 992px) {
    .smb-contenedor-grid { grid-template-columns: 1fr; text-align: center; }
    .smb-lista-items { justify-content: center; }
}

/* Estilos Únicos para Simbiose */
.smb-vortex-wrapper {
    padding: 80px 0;
    background-color: #fffdf5;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smb-vortex-container {
    max-width: 800px;
    width: 90%;
    margin: 90px auto 0;
    text-align: center;
    background: transparent;
    padding: 40px;
    border-radius: 30px;
    box-shadow: inset var(--shadow-card);
}

/* Centrado del Icono */
.smb-vortex-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    width: 100%;
}

.smb-vortex-check-img {
    width: 120px;
    height: auto;
    display: block;
}

.smb-vortex-title {
    color: #46607a;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.smb-vortex-text {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.smb-vortex-highlight {
    font-weight: 700;
    color: #46607a;
}

.smb-vortex-subtext {
    font-weight: 600;
    color: #333;
}

.smb-vortex-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

.smb-vortex-summary {
    text-align: left;
}

.smb-vortex-summary-title {
    color: #46607a;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.smb-vortex-card {
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 20px;
}

.smb-vortex-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

.smb-vortex-accent {
    color: #46607a;
}

.smb-vortex-item-price {
    font-weight: 600;
}

.smb-vortex-total-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #46607a;
}

.smb-vortex-actions {
    margin-top: 40px;
}

.smb-vortex-btn {
    display: inline-block;
    background-color: #46607a;
    color: #ffffff;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s, background 0.3s;
}

.smb-vortex-btn:hover {
    background-color: #354a5e;
    transform: translateY(-2px);
    color: #fff;
}

.section_degusta {
    text-align: center; 
    margin-top: 7rem; 
    margin-bottom: 4rem;
}

.kefir-process {
    margin-top: 120px;
}

/* --- ESTILOS MOBILE PARA SIMBIOSE --- */

@media (max-width: 768px) {
    .smb-vortex-wrapper {
        padding: 40px 15px; /* Menos padding lateral en móvil */
    }

    .smb-vortex-container {
        margin-top: 60px; /* Ajuste por el header en móvil */
        padding: 25px 20px;
        width: 100%;
    }

    .smb-vortex-check-img {
        width: 90px; /* Un poco más pequeño para que no robe tanto espacio */
    }

    .smb-vortex-title {
        font-size: 1.8rem; /* Fuente más cómoda para leer en vertical */
    }

    .smb-vortex-text {
        font-size: 1rem;
    }

    .smb-vortex-card {
        padding: 15px;
    }

    .smb-vortex-item {
        flex-direction: column; /* Apila el nombre del producto y el precio */
        align-items: flex-start;
        gap: 5px;
    }

    .smb-vortex-item-price {
        align-self: flex-end; /* El precio se va a la derecha abajo del nombre */
        font-size: 1.1rem;
    }

    .smb-vortex-total-row {
        font-size: 1.1rem;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .smb-vortex-btn {
        width: 100%; /* Botón ancho total para que sea fácil de tocar con el pulgar */
        padding: 18px 20px;
        box-sizing: border-box;
    }
}

/* Para celulares muy pequeños (iPhone SE, etc.) */
@media (max-width: 380px) {
    .smb-vortex-title {
        font-size: 1.5rem;
    }
}

/* --- ESTILOS EXCLUSIVOS PARA MOBILE --- */
@media screen and (max-width: 768px) {
    /* 1. Forzar que el section no deje salir nada por los lados */
    #contact {
        overflow-x: hidden !important;
        width: 100vw;
        position: relative;
    }

    /* 2. Ajustar el contenedor para que no sume ancho extra */
    .contact__container.container {
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin: 0 auto !important;
        /* Si el margin-top negativo de -90px empuja elementos, aquí lo suavizamos */
        margin-top: -20px !important; 
    }

    /* 3. Evitar que las imágenes decorativas (bacterias/vaca) estiren el layout */
    .contact__form-card, 
    .contact__info-card {
        max-width: 100% !important;
        overflow: hidden !important; /* Corta cualquier pedazo de imagen que sobresalga */
    }

    /* 4. Asegurar que el grid no cree columnas invisibles */
    .contact__container.grid {
        grid-template-columns: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* 5. Ajustar el banner para que no se desfase */
    .contact__banner {
        background-position: center !important;
        width: 100% !important;
    }
}

/* --- FIX MAESTRO PARA TODO EL SITIO (MOBILE) --- */
@media screen and (max-width: 768px) {
    
    /* 1. Reset total para evitar el scroll horizontal */
    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden !important; /* Corta cualquier desborde global */
        position: relative;
    }

    /* 2. El principal sospechoso: los .container o .grid de la librería que uses */
    .container, .grid {
        max-width: 100vw !important; /* Asegura que no midan más que la ventana */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important; /* Incluye padding en el ancho total */
    }

    /* 3. Limpiar secciones */
    section {
        overflow: hidden !important;
    }

    /* 4. Imágenes que a veces estiran el layout */
    img {
        max-width: 110% !important;
        height: auto !important;
    }
}

/*
==============HEADER Y FOOTER MOBILE Y TABLET ==============
*/

/* --- MOBILE (Hasta 768px) --- */
@media screen and (max-width: 768px) {
    /* Header Top: Ajuste de espacios */
    .header__top-container {
        padding: 10px 15px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .top__info-item i {
        font-size: 1.5rem !important;
    }

    /* Reducimos textos del top para que no choquen */
    .info__title { font-size: 0.8rem !important; }
    .info__subtitle { font-size: 0.65rem !important; }

    /* Logo Principal: Clave para que no ocupe toda la pantalla */
    .nav__logo-center img {
        width: 250px !important; /* Ajuste según tu captura */
        height: auto !important;
    }

    /* Ajuste de iconos de carrito y menú */
    .nav__toggle, .header__cart i {
        font-size: 1.3rem !important;
    }

    /* Footer: Todo en columna y centrado */
    .footer {
        padding: 40px 20px !important;
    }

    .footer__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 25px !important;
    }

    .footer__logo img {
        width: 220px !important; /* Logo de abajo más pequeño */
    }

    .footer__content {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .footer__link, .footer__copy {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }
}

/* --- TABLET (769px hasta 1024px) --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .nav__logo-center img {
        width: 220px !important;
    }

    .header__top-container {
        padding: 10px 30px !important;
    }

    .footer__container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .footer__content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .footer__copy {
        grid-column: span 2 !important;
    }
}

/* --- AJUSTE DE ICONO MENU (MOBILE & TABLET) --- */
@media screen and (max-width: 1024px) {
    .nav__toggle {
        display: inline-flex !important;
        padding-right: 1.25rem !important; /* El empujón a la izquierda que necesita */
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    /* Opcional: Si el carrito también se ve pegado, ajustamos su contenedor */
    .header__cart {
        margin-right: 10px;
    }

    /* Para que el logo no empuje el icono hacia afuera */
    .nav {
        column-gap: 1rem !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Centrar Título y Justificar Subtítulo en el Banner */
    .contact__banner-container {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 20px !important;
    }

    .contact__banner-container .section__title {
        text-align: center !important;
        width: 100%;
    }

    .contact__subtitle {
        text-align: justify !important;
        text-align-last: center; /* Esto hace que la última línea también se vea centrada */
        max-width: 90%;
        margin: 0 auto;
    }

    /* 2. Opacidad para las burbujas */
    .contact__shrimp-in {
        opacity: 0.4 !important;
    }

    /* 3. Posicionar la Vaca a la altura de "Escríbenos" */
    .contact__info-card {
        position: relative; /* Aseguramos el contenedor */
    }

    .contact__meat-in {
        position: absolute !important;
        top: 20px !important;  /* Ajusta este valor para subirla más o menos */
        right: 10px !important;
        width: 80px !important; /* Ajustamos tamaño para que no tape los iconos */
        z-index: 10;
    }

    /* Ajuste extra para que el texto de la info no choque con la vaca */
    .contact__sidebar-item {
        position: relative;
        z-index: 11;
    }
}

@media screen and (max-width: 768px) {
    /* El botón ahora ocupará el 100% del ancho del card, igual que los inputs */
    .contact__form button {
        width: 100% !important;
        margin-top: 10px;
    }
}

/* ==============TALLERES======== */
/* --- VISTA TALLERES: MOBILE & TABLET --- */
@media screen and (max-width: 1024px) {

    /* 1. Respiro Global de 1rem (Igual a Contactos) */
    .collage-section, 
    .kefir-process, 
    .recipes.section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .collage__container{
        margin-top: -50px !important;
    }

    .collage__images-group {
        margin-top: -1rem !important;
    }

    .box-top-right_talleres {
        display: none !important;
    }

    .box-bottom-center {
        display: none !important;
    }

    .kefir-process {
        margin-top: 10px !important;
    }

    .recipes {
        margin-top: -70px;
    }

    .kefir-side-img img {
        display: none;
    }

    .kefir-header {
        margin-bottom: -10px !important;
    }

    .kefir-item p {
        text-align: justify !important;
        line-height: 1.6 !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }


    /* 2. Textos: Centrados y Justificados (Orden Simbiose) */
    .collage__description_talleres,
    .kefir-result p,
    .recipe__text-md,
    .contact__subtitle {
        text-align: center !important;
        text-align-last: center !important; /* El toque maestro */
        line-height: 1.6 !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    /* 3. Collage de Imágenes: Una debajo de otra */
    .collage__container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .collage__images-group {
        display: flex !important;
        flex-direction: column !important; /* Apilamos las fotos */
        align-items: center !important;
        gap: 1.5rem !important;
    }

    .collage__box {
        position: relative !important; /* Quitamos posicionamientos absolutos de desktop */
        transform: none !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
    }

    .collage__img {
        width: 100% !important;
        border-radius: 1.5rem !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* 4. Proceso del Kéfir (Lista del 1 al 6) */
    .kefir-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .kefir-side-img {
        display: flex !important;
        justify-content: center !important;
    }

    .kefir-side-img img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 2rem !important;
    }

    /* 5. TARJETAS DE RECETAS (Una abajo de otra y completas) */
    .recipes__cards-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important; /* Espacio entre tarjetas */
        align-items: center !important;
    }


    .recipe__img-card {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important; /* Recorte perfecto de la receta */
    }

    .recipe__content--center {
        padding: 2rem 1.5rem;
        text-align: center !important;
    }

    .recipe__name-md {
        margin-top: 20px;
    }

    .recipe__text-md {
        margin-bottom: 1rem;
    }


    .home__buttons {
        display: flex !important;
        justify-content: center !important;
        margin-top: 1rem;
    }

    /* Botón de receta ancho completo */
    .recipe__card .button {
        width: 80% !important;
        padding: 12px !important;
    }

    .boton_talleres {
        width: 100% !important;
    }

    .recipes__cards-container {
        margin-top: -2rem !important;
    }
}

.boton_talleres {
    width: 50%; padding: 10px; background: #46607a; color: #fff; border: none; border-radius: 1rem; font-size: 1.1rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
}

.boton_conocenos{
    width: 30%; padding: 10px; background: #46607a; color: #fff; border: none; border-radius: 1rem; font-size: 1.1rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
}



/* ==============UBICANOS======== */

/* --- RESET Y REFUERZO: VISTA UBÍCANOS --- */
@media screen and (max-width: 1024px) {

    /* 1. Contenedor principal: Mismo 'respiro' que el formulario */
    .find-us.section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Cuadros (Banner de degustación y buscador): Mismo tamaño que el form */
    .degustacion-banner, 
    .selector-card, 
    .results-container, 
    .map-column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 25px !important; /* Espacio interno para que el contenido no pegue */
        border-radius: 2rem !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 3. Texto: Centrado y Justificado (Simbiose Style) */
    .degustacion-text, 
    .empty-state-text, 
    .contact__subtitle {
        /* text-align: center !important; */
        text-align-last: center !important; /* Centra la última línea del bloque */
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    /* 4. Carrusel: Imágenes IDÉNTICAS para evitar el desorden */
    .carousel-track {
        display: flex !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .carousel-item {
        width: 160px !important;  /* Ancho fijo */
        height: 220px !important; /* Alto fijo */
        flex-shrink: 0 !important;
    }

    .carousel-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Esto evita que se deformen y las hace uniformes */
        border-radius: 15px !important;
        border: 4px solid #46607a; /* Mantenemos el borde estético */
    }

    /* 5. Icono de calendario centrado */
    .degustacion-info {
        padding: 0.5rem 2.5rem;
        display: flex !important;
        margin-bottom: 30px;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
}

/* --- VISTA UBÍCANOS: ADAPTACIÓN MOBILE --- */
@media screen and (max-width: 768px) {

    /* 1. Ajuste del Contenedor Principal (El respiro de 1rem) */
    .contact.section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Banner de Degustación: Lo volvemos una sola columna */
    .degustacion-banner {
        flex-direction: column !important;
        padding: 1.5rem !important;
        border-radius: 2rem !important;
        margin: 0 !important; /* Evita que se desfase */
        margin-bottom: 5rem !important;
    }

    .degustacion-text {
        padding: 0.5rem 2.5rem;
        text-align-last: center !important; /* Centrado estético */
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }

    .section_degusta {
        margin-top: -1rem;
        margin-bottom: 0.5rem;
    }

    /* 3. El Carrusel de Fotos: Que no rompa el ancho */
    .degustacion-carousel {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .carousel-item img {
        width: 140px !important; /* Un poco más chicos para que luzcan en mobile */
        height: 180px !important;
        border-radius: 1rem !important;
    }

    /* 4. Buscador y Mapa: Los cuadros blancos */
    .search-main-content {
        display: flex !important;
        flex-direction: column !important; /* Uno abajo del otro */
        gap: 2rem !important;
    }

    .results-container, 
    .map-column, 
    .selector-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        border-radius: 2rem !important;
        box-sizing: border-box !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    }

    /* 5. Mapa: Ajuste para que no se desborde */
    .map-container {
        height: 350px !important; /* Altura fija para que no sea infinito */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .map-base-img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 6. Aliados: Las tarjetas de Organa, BioTiendas, etc. */
    .aliados__grid {
        gap: 2rem !important;
        padding: 0 !important;
    }

    .aliado__card {
        max-width: 100% !important; /* Que ocupen el ancho del padding */
    }

    /* Títulos y Subtítulos: Centrados total */
    .section__title, .contact__subtitle {
        text-align: center !important;
        padding: 0 0.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    /* Ajuste para que el contenedor de la tabla y el mapa tengan aire a los lados */
    .results-container, 
    .map-column, 
    .selector-card {
        width: calc(100% - 2rem) !important; /* Le quitamos 2rem al ancho total */
        padding-left: 1rem !important;
        padding-right: 1rem !important; /* Espacio interno para que el contenido no toque sus propios bordes */
        box-sizing: border-box !important;
    }

    /* Ajuste extra para la tabla interna y que no genere scroll horizontal infinito */
    .table-wrapper {
        width: 100% !important;
        overflow-x: auto;
    }

    .locations-table {
        min-width: 100%; /* Obliga a la tabla a adaptarse al ancho del card */
    }

    /* Para que el mapa no se vea gigante y mantenga el margen */
    .map-container {
        width: 100% !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 768px) {
    /* 3. Los botones de región ocupando buen espacio para el dedo */
    .region-buttons-container {
        display: flex !important;
        flex-direction: column !important; /* Uno sobre otro en mobile */
        gap: 10px !important;
        padding: 0 1rem !important;
        margin-bottom: 2rem !important;
    }

    .btn-region {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Esto debe ir FUERA de la media query para que aplique siempre al cargar */
#wrapper-selector {
    display: none !important; /* El JS se encargará de quitarlo */
}

@media screen and (max-width: 768px) {
    #wrapper-selector {
        position: relative !important;
        /* Evita que el navegador intente "adivinar" el tamaño */
        contain: layout; 
        width: 92% !important;
        margin: 15px auto !important;
        /* Esto ayuda a que el menú desplegable se ancle al input */
        overflow: visible !important; 
    }

    .selector-input {
        /* Algunos navegadores bugean el dropdown si el font-size es menor a 16px */
        font-size: 16px !important; 
        width: 100% !important;
        -webkit-appearance: listbox !important; /* Forza comportamiento estándar en iOS */
    }
}

/* ================================================= */
/* CONFIGURACIÓN BASE (APLICA A TODOS)              */
/* ================================================= */
.choices {
    margin-bottom: 0;
    font-family: inherit;
    width: 70% !important;
}

/* El contenedor principal del input */
.choices__inner {
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 5px 15px !important;
    display: flex;
    align-items: center;
    transition: border-color 0.3s ease;
}

.choices.is-focused .choices__inner {
    border-color: #46607a !important; /* Azul de tu marca */
}

/* El dropdown (la lista que se despliega) */
.choices__list--dropdown {
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
    border: none !important;
    margin-top: 8px !important;
    padding: 8px !important;
    z-index: 1000 !important;
}

/* Los items de la lista */
.choices__item--selectable {
    padding: 12px 15px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease;
}

/* Color al pasar el mouse o seleccionar con teclado */
.choices__item--choice.is-highlighted {
    background-color: #46607a !important; 
    color: #ffffff !important;
}

/* ================================================= */
/* ADAPTACIÓN PARA DESKTOP (Laptops y Monitores)    */
/* ================================================= */
@media screen and (min-width: 1024px) {
    #wrapper-selector {
        max-width: 450px;
    }
    
    .choices__inner {
        min-height: 50px;
        font-size: 15px;
    }
}

/* ================================================= */
/* ADAPTACIÓN PARA TABLET (iPad, Android Tabs)      */
/* ================================================= */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    #wrapper-selector {
        max-width: 80%;
        margin: 0 auto 2rem;
    }

    .choices__inner {
        min-height: 55px;
        font-size: 16px;
    }
    
}

/* ================================================= */
/* ADAPTACIÓN PARA MOBILE (Smartphones)             */
/* ================================================= */
@media screen and (max-width: 768px) {
    #wrapper-selector {
        width: 95% !important;
        margin: 1.5rem auto !important;
        padding: 1rem !important;
        /* Forzamos que sea bloque para que ocupe su propia fila */
        display: block !important; 
    }

    /* En mobile, los textos deben ser legibles para dedos grandes */
    .choices__inner {
        min-height: 60px !important; 
        font-size: 16px !important; /* Evita zoom automático en iOS */
    }

    .choices__item--selectable {
        padding: 15px !important; /* Área de toque más amplia */
        font-size: 16px !important;
    }
    
    /* Ajuste de la etiqueta "Seleccionar zona" */
    .selector-label {
        font-size: 14px;
        text-align: center;
        width: 100%;
    }
    .choices {
        width: 100% !important;

    }
}

/* Estado inicial: Oculto en todos los dispositivos */
#wrapper-selector {
    display: none !important; /* El JS quitará esto luego */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Ajustes específicos por dispositivo cuando se activa */
@media screen and (min-width: 1024px) {
    #wrapper-selector.is-active {
        display: flex !important;
        opacity: 1;
        max-width: 100%;
    }
}

@media screen and (max-width: 1023px) {
    #wrapper-selector.is-active {
        display: block !important;
        opacity: 1;
        width: 90% !important;
        /* margin-left: 1rem !important; */
        margin-right: 2rem !important;
    }
}

/* ================================================= */
/* CONOCENOS             */
/* ================================================= */
@media screen and (max-width: 1023px) {
    
    /* 1. Contenedor: El padding que es ley */
    .collage__container_1 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 1rem !important; 
        gap: 1.5rem !important;
    }

    .collage__texts_conocenos {
        margin-top: -50px !important;
    }

    .boton_conocenos {
        width: 100% !important;
    }

    /* 2. Reordenamiento total */
    
    /* La primera imagen (box-top-right) va al inicio */
    .box-top-right {
        order: 1 !important;
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
    }

    /* Los textos y el botón van al medio */
    .collage__texts {
        margin-top: 50px !important;
        order: 2 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* La segunda imagen (box-middle-right) va al final */
    .box-middle-right {
        order: 3 !important;
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        margin-top: 1rem;
    }

    /* 3. Ajustes de las cajas de imágenes */
    .collage__images-group {
        display: contents !important; /* Permite que los hijos se muevan libremente en el flex del padre */
    }

    .collage__box {
        display: block !important;
        max-width: 450px; /* Para que no sea gigante en tablets */
        margin-left: auto;
        margin-right: auto;
    }

    .collage__img {
        width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
    }

    /* Centramos el botón de la pionera */
    .home__buttons {
        display: flex !important;
        justify-content: center !important;
        margin-top: 1.5rem !important;
    }

    .box-middle-right {
        display: none !important;
    }

    .trust {
        margin-top: -15px !important;
        margin-bottom: -50px !important;
    }
}

/* ================================================= */
/* AJUSTE SECCIÓN TRUST (MOBILE & TABLET)           */
/* ================================================= */

@media screen and (max-width: 1023px) {
    /* 1. Contenedor General: El padding sagrado */
    .trust.section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .trust__container {
        margin-top: 5rem !important;
    }

    /* 2. Título: Solo ajustamos el tamaño para que no rompa */
    .trust .section__title {
        font-size: 1.5rem !important;
        text-align: center !important;
        line-height: 1.2 !important;
        margin-bottom: 2.5rem !important;
    }

    /* 3. Grid: Una sola columna en mobile, dos en tablet */
    .trust__container {
        display: grid !important;
        grid-template-columns: 1fr !important; 
        gap: 2rem !important;
        width: 100% !important;
    }

    @media screen and (min-width: 768px) {
        .trust__container {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    /* 4. Cards: Mantenemos tu diseño, solo las centramos */
    .trust__card {
        display: flex !important;
        flex-direction: column !important; /* Icono arriba del texto */
        align-items: center !important;
        text-align: center !important;
        padding: 1.5rem !important;
        width: 100% !important;
        background: transparent !important; /* Respetamos tu fondo actual */
    }

    /* 5. Círculo e Imagen: Sin cambios de tamaño, solo centrados */
    .trust__img-circle {
        margin: 0 auto 1rem auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 6. Textos: Alineación */
    .trust__content {
        width: 100% !important;
    }

    .trust__name {
        margin-top: 30px;
        margin-bottom: 0.5rem !important;
    }

    .trust__description {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .products__card {
        height: 260px !important;
    }

    .products__img{
        height: 40% !important;
    }

    .products__img_relacion {
        height: 100% !important;
    }
    
    .shop__sidebar {
        margin-bottom: -10px !important;
    }
}


/* ================================================= */
/* TIMELINE SECTION (MOBILE & TABLET)               */
/* ================================================= */

@media screen and (max-width: 1023px) {
    
    /* 1. Contenedor y Título */
    .timeline-slider-section {
        padding: 0 1rem 4rem 1rem !important; /* Padding lateral sagrado */
    }

    .section__title_nosotros {
        font-size: 1.5rem !important;
        text-align: center !important;
        padding-bottom: 1rem !important;
    }

    /* 2. Navegación (La línea y la vaca) */
    .timeline-nav-wrapper {
        width: 100% !important;
        overflow: visible !important; /* Para que la vaca no se corte */
        margin-bottom: 5rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .timeline-nav-line {
        width: 100% !important; /* Forzamos a que entre en el ancho de pantalla */
        margin: 0 auto !important;
    }

    .nav-item .year-label {
        font-size: 0.75rem !important;
    }

    .vaca-runner {
        width: 40px !important; /* Vaca un poco más pequeña para mobile */
    }

    /* 3. Cards de Historia (SB-CARD) */
    .sb-container {
        display: flex !important;
        flex-direction: column !important; /* Texto arriba, Imagen abajo */
        align-items: center !important;
        text-align: center !important;
        gap: 2rem !important;
    }

    .sb-info-side {
        width: 100% !important;
    }

    .sb-title {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.3;
    }

    .sb-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* 4. Imágenes: Solo la primera y todas del mismo tamaño */
    .sb-media-side {
        width: 100% !important;
    }

    .sb-mosaic {
        display: block !important; /* Rompemos el grid de desktop */
    }

    /* Mostramos solo la imagen grande */
    .sb-img-lg {
        width: 100% !important;
        height: 350px !important; /* Altura fija para consistencia */
        object-fit: cover !important;
        border-radius: 20px !important;
        display: block !important;
    }

    .momentos_simbiose{
        margin-top: -50px !important;
    }

    .momentos_simbiose{
        margin-top: -40px !important;
    }

     .instagram-wrapper {
        padding-top: -500px !important;
     }

    /* Ocultamos las imágenes pequeñas del costado */
    .sb-img-column {
        display: none !important;
    }
}

/* Ajuste para Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .sb-img-lg {
        height: 350px !important; /* Un poco más alta en tablet */
    }
    
    .sb-title {
        font-size: 1.5rem !important;
    }
}


@media screen and (max-width: 1023px) {
    /* 1. Eliminamos el padding superior del contenedor de la sección */
    .momentos_simbiose.py-10 {
        padding-top: 1rem !important; 
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* 2. Matamos cualquier espacio del título */
    .momentos_simbiose .text-center {
        margin-bottom: 0 !important;
        padding-bottom: 30px !important;
    }

    .momentos_simbiose .section__title_nosotros {
        margin-bottom: 0 !important;
        padding-bottom: 5px !important;
    }

    /* 3. Subimos el widget con margen negativo */
    .momentos_simbiose_conocenos {
        margin-top: 30px !important; 
    }

    /* 4. Forzamos al iframe a no tener espacios internos */
    .lightwidget-widget {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/*
=====================PRODUCTOS=================
*/

/* ============================================================
   SOLO MOBILE (Hasta 767px)
   ============================================================ */
@media (max-width: 767px) {
    .product-detail-section {
        margin-top: 90px !important;
        padding: 0 20px !important;
    }

    .product-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Usamos display contents para que los hijos directos del Blade se puedan ordenar */
    .product-content {
        display: contents !important;
    }

    /* 1. TITULO, PRECIO Y DESCRIPCION (AL TOPE) */
    .product-header {
        order: 1 !important;
        margin-bottom: 10px;
        margin-top: 90px !important;
    }

    .product-description {
        order: 2 !important;
        margin-bottom: 25px;
    }

    .product-header h1 {
        font-size: 2rem;
        font-weight: 800;
        margin: 5px 0;
        color: #000;
        
    }

    .price-tag {
        font-size: 1.6rem;
        font-weight: 700;
        color: #4a6274;
    }

    /* 2. VISUALES (IMAGEN) */
    .product-visuals {
        order: 3 !important;
        margin-bottom: -10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-product-img {
        width: 75% !important; /* Forzamos el 58% del inline a algo más visible */
        height: auto;
    }

    .thumbnail-list {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .thumb {
        width: 55px;
        height: 55px;
        border-radius: 8px;
        object-fit: cover;
    }

    /* 3. AREA DE ACCION (BOTON Y QTY) */
    .action-area {
        order: 4 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 50px;
    }

    .qty-control {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 50px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .btn-add-cart {
        width: 100%;
        padding: 12px;
        background: #46607a;
        color: #fff;
        border: none;
        border-radius: 1rem;
        font-size: 1.1rem;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    /* 4. ACORDEONES (SIN DOBLE RAYA) */
    .tabs-info {
        order: 5 !important;
        border-top: 1px solid #eee; /* Línea de inicio */
    }

    details {
        border-bottom: 1px solid #eee; /* Línea separadora */
    }

    /* Quitamos el borde del summary si lo tuviera */
    summary {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
        font-weight: 800;
        cursor: pointer;
    }

    summary::-webkit-details-marker { display: none; }

    .details-body {
        padding-bottom: 15px;
        color: #555;
        line-height: 1.5;
    }

    .arrow-icon {
        transition: transform 0.3s;
    }

    details[open] .arrow-icon {
        transform: rotate(180deg);
    }

    .products__hamburger { display: none !important; }
}

/* ============================================================
   SOLO TABLET (768px a 1024px) 
   Casi igual a Desktop pero optimizado
   ============================================================ */
@media (min-width: 768px) and (max-width: 1100px) {
    .product-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
        padding: 0 40px !important;
    }

    .main-product-img {
        width: 90% !important; /* Ajustamos para que llene su columna */
    }

    .product-content h1 {
        font-size: 2.5rem;
    }
}

.altura_card {
    height: 50% !important;
}

@media (max-width: 767px) {
    /* Reordenamiento del contenedor principal */
    .collage__mobile-order {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 0 20px !important;
    }

    /* 1. El texto va primero */
    .collage__item--text {
        order: 1 !important;
    }

    .collage__description_talleres {
        font-size: 1rem;
        line-height: 1.6;
        text-align: left;
        color: black;
    }

    /* 2. El grupo de imágenes va segundo */
    .collage__item--images {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Dos columnas para las 2 fotos */
        gap: 15px !important;
    }

    /* Ocultamos las imágenes que no pediste */
    .collage__item--hide {
        display: none !important;
    }

    /* Ajuste para las imágenes visibles */
    .collage__item--show {
        display: block !important;
        width: 100% !important;
    }

    .collage__img {
        width: 100% !important;
        height: 200px !important; /* Altura fija para que se vean parejas */
        object-fit: cover !important;
        border-radius: 15px !important;
    }

    /* Quitamos posicionamientos absolutos que puedan venir del desktop */
    .collage__box {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    .collage__texts_conocenos {
        margin-top: -50px !important;
    }
}

/*
=================== CARRITO ================
*/

/* --- ESTILOS BASE (DESKTOP) --- */
.seccion-carrito {
    margin-top: 190px;
    margin-bottom: 100px;
    padding: 0 20px;
}

.contenedor-carrito {
    max-width: 1200px;
    margin: 0 auto;
}

.envoltorio-carrito {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.columna-izquierda { flex: 2; }
.columna-derecha { flex: 1; position: sticky; top: 120px; }

/* Tarjetas */
.tarjeta-resumen, .tarjeta-totales {
    background: transparent;
    padding: 25px;
    border-radius: 30px;
    box-shadow: inset var(--shadow-card); /* Asegúrate que esta variable exista en tu CSS global */
}

/* Tabla */
.tabla-productos { width: 100%; border-collapse: collapse; }
.tabla-productos thead tr { border-bottom: 1px solid #eee; text-align: left; color: #666; font-size: 0.9rem; }
.tabla-productos th { padding-bottom: 15px; }

.fila-producto { border-bottom: 1px solid #f9f9f9; }
.celda-info { padding: 20px 0; }
.info-producto { display: flex; align-items: center; gap: 15px; }
.img-producto { width: 80px; border-radius: 10px; }
.textos-producto h4 { margin: 0; font-size: 1rem; color: #46607a; }

/* Controles */
.control-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}
.btn-qty-cart { padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 1.1rem; }
.qty-number { padding: 0 10px; font-weight: bold; min-width: 30px; display: inline-block; }

.precio-eliminar { display: flex; align-items: center; justify-content: flex-end; gap: 15px; font-weight: bold; color: #46607a; }
.btn-remove { color: #999; cursor: pointer; font-size: 1.3rem; }

/* Columna Derecha / Totales */
.fila-total { display: flex; justify-content: space-between; margin-bottom: 15px; color: #666; }
.total-final { font-size: 1.3rem; font-weight: bold; color: #46607a; margin-top: 20px; }
.separador { border: none; border-top: 1px solid #eee; margin-bottom: 20px; }
.btn-proceder {
    display: block;
    text-align: center;
    width: 100%;
    padding: 18px;
    background: #46607a;
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    transition: 0.3s;
}

/* --- TABLET (768px a 1024px) --- */
@media (max-width: 1024px) {
    .seccion-carrito { margin-top: 100px; }
    .envoltorio-carrito { gap: 20px; }
    .img-producto { width: 60px; }
}

/* --- MOBILE (Menos de 768px) --- */
@media (max-width: 767px) {
    .seccion-carrito { margin-top: 80px; margin-bottom: 50px; }
    
    .envoltorio-carrito { flex-direction: column; }
    .columna-izquierda, .columna-derecha { width: 100%; flex: none; position: static; }

    /* Convertimos la tabla en bloques visuales */
    .tabla-productos thead { display: none; } /* Escondemos cabecera */
    
    .fila-producto {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        gap: 15px;
        position: relative;
    }


    .tarjeta-resumen {
        margin-top: 90px;
    }

    .celda-info, .celda-cantidad, .celda-precio { 
        padding: 0; 
        text-align: left !important; 
    }

    .precio-eliminar { justify-content: space-between; width: 100%; margin-top: 10px; }
    
    .btn-remove {
        position: absolute;
        top: 20px;
        right: 0;
    }

    .tarjeta-resumen, .tarjeta-totales { padding: 20px; border-radius: 20px; }
}

/* Clases auxiliares */
.txt-centro { text-align: center; }
.txt-derecha { text-align: right; }
.txt-gris { color: #888; }

.etiqueta-categoria {
    display: block;
    color: #888; /* Gris suave para el texto "Categoría:" */
    font-size: 0.8rem;
    margin-top: 4px;
}

.etiqueta-categoria span {
    color: #888;
    font-weight: 700;
    text-transform: lowercase; /* Primero todo a minúscula */
    display: inline-block; /* Necesario para que el pseudo-elemento funcione bien */
}

.etiqueta-categoria span::first-letter {
    text-transform: uppercase; /* Solo la primera letra de la primera palabra a mayúscula */
}


/* 
==================CHECKOUT ============
*/

/* --- RESPONSIVE CONFIG --- */

/* TABLETS Y PANTALLAS PEQUEÑAS */
@media (max-width: 992px) {
    .res-container {
        margin-top: 100px !important;
        margin-bottom: 100px !important;
    }

    .res-page-wrapper {
        flex-direction: column !important; /* Resumen pasa abajo */
        gap: 20px !important;
    }

    .res-left-col, .res-right-col {
        width: 100% !important;
        flex: none !important;
    }

    .res-right-col {
        position: static !important; /* Deja de ser sticky */
    }
}

/* MÓVILES (UNO POR UNO) */
@media (max-width: 768px) {

    .nuestra-esencia-v2 {
        margin-top: 30px;
    }

    .boton_historia{
        width: 100% !important;
    }

    .promo-section {
        margin-top: -80px;
    }
    .res-container {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Contenedor de las tarjetas */
.promo-container {
    display: grid;
    /* Ajusta las columnas según necesites (aquí ejemplo para que entren varias) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 1.5rem; /* Espacio entre las cajitas */
    
    /* Lo que me pediste: separación a los extremos */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    
    width: 100%;
    margin: 0 auto;
}

/* Opcional: Centrar el título con el mismo alineamiento */
.promo-title {
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.seccion_razones {
    margin-top: -100px !important;
}

    /* Forzamos que la grilla del formulario sea de 1 sola columna */
    .res-form-grid {
        grid-template-columns: 1fr !important;
    }

    .res-field, .res-field-full {
        grid-column: span 1 !important; /* Los campos ocupan todo el ancho */
    }

    #container-step-1 {
        margin-top: 140px;
    }
    
    /* Ajuste de padding para tarjetas en móvil */
    #container-step-1, #container-step-2, .res-right-col > div {
        padding: 20px !important;
    }
}


/*
===========PAGO==========
*/

/* --- ESTILOS BASE (DESKTOP) --- */
.smb-vortex-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px;
    background-color: transparent; /* O el color de fondo de tu sitio */
}

.smb-vortex-container {
    max-width: 800px;
    width: 100%;
    background: transparent;
    padding: 50px;
    border-radius: 40px;
    text-align: center;
    box-shadow: inset var(--shadow-card);
    border: 1px solid rgba(255,255,255,0.6);
    margin-top: 50px;
}

.smb-vortex-check-img {
    width: 80px;
    height: auto;
    margin-bottom: 25px;
}

.smb-vortex-title {
    color: #46607a;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.smb-vortex-text {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.smb-vortex-subtext {
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: #46607a;
}

.smb-vortex-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 30px 0;
}

/* RESUMEN DE PEDIDO */
.smb-vortex-summary-title {
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 15px;
    color: #333;
}

.smb-vortex-card {
    background: #fbfbfc;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

.smb-vortex-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.smb-vortex-accent { color: #46607a; }

.smb-vortex-total-row {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #fff;
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 1.1rem;
    color: #46607a;
}

.smb-vortex-btn {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 40px;
    background: #46607a;
    color: #fff !important;
    text-decoration: none;
    border-radius: 15px;
    font-weight: 700;
    transition: transform 0.2s;
}

.smb-vortex-btn:hover { transform: scale(1.03); }

/* --- TABLET (992px) --- */
@media (max-width: 992px) {
    .smb-vortex-wrapper { padding: 100px 30px; }
    .smb-vortex-container { padding: 40px; }
}

/* --- MOBILE (768px) --- */
@media (max-width: 768px) {
    .smb-vortex-wrapper { 
        padding: 60px 15px; 
        align-items: flex-start; /* Empieza más arriba en móviles largos */
    }

    .smb-vortex-container { 
        padding: 30px 20px; 
        border-radius: 30px; 
        margin-top: 120px !important;
    }

    .smb-vortex-title { 
        font-size: 1.6rem; 
    }

    .smb-vortex-text { 
        font-size: 1rem; 
    }

    .smb-vortex-check-img { 
        width: 65px; 
    }

    .smb-vortex-summary-title { 
        text-align: center; 
    }

    .smb-vortex-item { 
        flex-direction: column; 
        align-items: center; 
        gap: 5px;
        text-align: center;
        margin-bottom: 15px;
    }

    .smb-vortex-total-row { 
        justify-content: space-between; 
        font-size: 1rem;
    }

    .smb-vortex-btn { 
        width: 100%; 
        box-sizing: border-box; 
    }
}

/* Ajuste de altura en móvil */
.smb-img-mob {
    height: 70vh !important;
    object-fit: cover !important;
}

/* Personalización de Dots de Splide */
.splide__pagination__page {
    background: rgba(70, 96, 122, 0.3) !important; /* Azul Simbiose bajito */
    border-radius: 50% !important;
    height: 10px !important;
    width: 10px !important;
    transition: all 0.3s ease !important;
}

.splide__pagination__page.is-active {
    background: #46607a !important; /* Azul Simbiose fuerte */
    transform: scale(1) !important;
    width: 25px !important;
    border-radius: 10px !important;
}

/* Evitar que se vea uno abajo de otro antes de cargar */
.splide:not(.is-initialized) .splide__list {
    display: flex;
    overflow: hidden;
}

/* --- VISIBILIDAD RADICAL --- */
@media (min-width: 768px) {
    #hero-mob { display: none !important; }
    #hero-pc { display: block !important; }
}

@media (max-width: 767px) {
    #hero-pc { display: none !important; }
    #hero-mob { display: block !important; }
}

/* --- ANCHO TOTAL (FULL WIDTH) --- */
.smb-main-hero-wrapper {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.splide__slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-top: 5px;
}

.splide__track {
    margin-top: 130px;
    margin-bottom: 50px;
}

/* Ajuste específico para móvil */
@media (max-width: 767px) {
    .smb-img-mob {
        height: 80vh !important; /* Más alto para que luzca en móvil */
        object-fit: cover !important;
    }

    .favorites__swiper {
        margin-top: -120px;
    }
}


/*
================INICIO=================
*/

.kefir-premium-showcase {
        padding: 100px 20px !important;
    }

@media screen and (max-width: 767px) {
    /* 1. Contenedor principal: Ordenamos los 3 bloques */
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important; /* Espacio moderado entre los 3 grupos grandes */
        padding: 0 1rem !important;
    }

    /* Forzamos el orden que pediste */
    .left-side   { order: 1 !important; }
    .hero-visual { order: 2 !important; }
    .right-side  { order: 3 !important; }

    /* 2. Columnas: Quitamos cualquier alto fijo o margen que separe las cards */
    .cards-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important; /* Espacio pequeño entre la card 01 y 02 */
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .griego_1 {
        bottom: -3rem !important;
        width: 150% !important;
    }

    /* 3. Las Cards: Quitamos márgenes extra y centramos el contenido */
    .benefit-card {
        margin: 0 !important;
        padding: 1rem !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important; /* Icono arriba del texto */
        align-items: center !important;
        text-align: center !important;
    }

    /* 4. Imagen Central: Reducimos el espacio que ocupa la botella */
    .hero-visual {
        margin: 0 !important;
        padding: 1rem 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Ocultamos las líneas conectoras (importante para que no dejen espacios en blanco) */
    .connector-line {
        display: none !important;
    }

    /* Ajuste de la botella para que no empuje las cards hacia afuera */
    .home__img {
        width: 180px !important; /* Tamaño más cómodo para mobile */
        height: auto !important;
    }

    .kefir-premium-showcase {
        padding-top: 20px !important;
    }
}



/* ==================== MOBILE (Hasta 767px) ==================== */
@media screen and (max-width: 767px) {

    .science {
        margin-top: -100px;
    }

    .science__grid {
        display: flex !important;
        flex-direction: column !important; /* Apilamos verticalmente */
        gap: 2rem !important;
        padding: 0 1rem !important;
    }

    /* Ocultamos la imagen sticky en móvil para priorizar la lectura del FAQ */
    /* O si prefieres que salga arriba, cambia a order: -1 */
    .science__sticky-img {
        display: none !important; 
    }

    .science__accordion {
        width: 100% !important;
    }

    .faq-item {
        margin-bottom: 1rem !important;
        border-bottom: 1px solid rgba(70, 96, 122, 0.1); /* Línea sutil Simbiose */
    }

    .faq-question {
        padding: 1.25rem 10px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .faq-question h3 {
        font-size: 1.1rem !important; /* Tamaño cómodo para pulgar */
        line-height: 1.4;
        padding-right: 1rem;
    }

    .faq-answer {
        padding-bottom: 1rem !important;
    }

    .faq-content p {
        font-size: 0.95rem !important;
        line-height: 1.6;
        color: #555;
    }
    .science__header {
        margin-top: 30px !important;
    }

    .science__grid {
        margin-top: -50px !important;
    }

    .sb-gallery-section {
        margin-top: -90px;
    }

    .sb-gallery-grid-masonry {
        margin-top: -40px;
    }

    .sb-author-signature {
        margin-top: -100px;
        margin-bottom: -100px;
    }
 
}

/* ==================== TABLET (768px a 1024px) ==================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .science__grid {
        grid-template-columns: 1fr !important; /* Una sola columna en tablet también */
        gap: 3rem;
        padding: 0 2rem;
    }

    .science__sticky-img {
        display: flex;
        justify-content: center;
        order: -1; /* En tablet la imagen sale arriba del acordeón */
    }

    .science__sticky-img img {
        max-width: 300px !important; /* Imagen controlada */
        height: auto;
    }

    .science__accordion {
        max-width: 800px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1024px) {
    /* Contenedor: 4 columnas alineadas */
    .related-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
        padding: 3rem 0 !important;
        align-items: stretch;
    }

    /* La Tarjeta: Fondo blanco, bordes y sombra sutil */
    .products__card {
        background-color: transparent !important;
        border-radius: 20px !important; /* Bordes bien curvos como la imagen */
        padding: 1rem 1rem 1.5rem !important;
        text-align: center !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-shadow: inset var(--shadow-card);
        transition: transform 0.3s ease;
    }

    .products__card:hover {
        transform: translateY(-5px);
    }

    /* Contenedor de Imagen: Altura fija para que no se vea desordenado */
    .altura_card {
        height: 200px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: .5rem !important;
        width: 100%;
    }

    .products__img_relacion {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain !important; /* Evita que la botella se estire */
    }

    /* Textos: Nombre y Subtítulo */
    .products__card h2 {
        font-weight: 400 !important;
        font-size: 0.95rem !important;
        color: #000 !important;
        margin-bottom: 0.25rem !important;
        min-height: 2.5rem; /* Asegura que el precio siempre esté en la misma línea */
    }

    .products__title {
        display: block !important;
        font-size: 0.8rem !important;
        color: #666 !important;
        margin-bottom: 0.75rem !important;
        text-transform: uppercase;
    }

    /* Precio: En negrita */
    .products__price {
        font-weight: 800 !important;
        font-size: 1.2rem !important;
        color: #000 !important;
    }

    /* Botón de la Bolsa: Anclado abajo a la derecha */
    .products__button {
        position: absolute !important;
        bottom: 1.25rem !important;
        right: 1.25rem !important;
        background-color: #46607a !important; /* Azul Simbiose */
        color: #fff !important;
        border: none !important;
        border-radius: 0.5rem !important;
        width: 38px;
        height: 38px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.2rem !important;
        transition: background 0.3s ease;
    }

    .products__button:hover {
        background-color: #33475b !important;
    }
}

@media screen and (min-width: 1024px) {
    /* Aseguramos que la card sea el punto de referencia */
    .products__card {
        position: relative !important;
        overflow: hidden; /* Para que la etiqueta no se salga de los bordes redondeados */
    }

    /* Estilo de la etiqueta tipo Tag */
    .products__title {
        position: absolute !important;
        top: 1.5rem !important; /* Ajusta la altura a tu gusto */
        left: 0 !important;
        background-color: #46607a !important; /* Azul Simbiose */
        color: #fff !important;
        padding: 0.25rem 0.75rem !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-radius: 0 0.5rem 0.5rem 0 !important; /* Redondeado solo a la derecha */
        z-index: 10;
        letter-spacing: 1px;
    }

    /* Ajuste para que el nombre del producto no choque con la etiqueta */
    .altura_card {
        padding-top: 1rem; 
    }
}

/* ==================== TABLET (De 768px a 1023px) ==================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .related-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en tablet */
        gap: 1.5rem !important;
        padding: 2rem 1rem !important;
    }

    .products__card {
        background-color: #fff !important; /* Aseguramos el fondo blanco */
        border-radius: 30px !important;
        padding: 1.5rem 1rem !important;
        position: relative !important;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    }

    .altura_card {
        height: 180px !important;
    }

    .products__title {
        position: absolute !important;
        top: 1rem !important;
        left: 0 !important;
        background-color: #46607a !important;
        padding: 0.2rem 0.6rem !important;
        font-size: 0.65rem !important;
        border-radius: 0 0.5rem 0.5rem 0 !important;
    }
}

.products__card h2 {
        font-size: 0.85rem !important;
        min-height: 2rem !important;
        margin-bottom: -.75rem !important;
    }

.products__card_2 h2 {
    margin-bottom: .75rem !important;
}

/* ==================== MOBILE (Hasta 767px) ==================== */
@media screen and (max-width: 767px) {
    .related-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas para que rinda el espacio */
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .products__title_2 {
        padding-bottom: 20px !important;
    }

    .products__card {
        background-color: transparent !important;
        border-radius: 20px !important; /* Un poco menos de curva para mobile */
        padding: 1.25rem 0.75rem !important;
        position: relative !important;
        overflow: hidden;
        box-shadow: inset var(--shadow-card);
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .altura_card {
        height: 140px !important; /* Más bajito en celular */
        margin-bottom: 0.5rem !important;
    }

    /* Nombre del producto en celular */
    .products__card h2 {
        font-size: 0.85rem !important;
        min-height: 2rem !important;
        margin-bottom: -.75rem !important;
    }

    /* La etiqueta (Tag) en celular */
    .products__title {
        position: absolute !important;
        top: 0.75rem !important;
        left: 0 !important;
        font-size: 0.6rem !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 0 0.4rem 0.4rem 0 !important;
    }

    /* Precio en celular */
    .products__price {
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    /* Botón de la bolsa en celular (un poco más pequeño para no tapar el precio) */
    .products__button {
        position: absolute !important;
        bottom: 0.75rem !important;
        right: 0.75rem !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        border-radius: 0.4rem !important;
    }
}


@media screen and (max-width: 767px) {
    /* 1. Solo el precio a la izquierda */
    .products__price_2 {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* 2. El botón: Centramos el icono del bolso adentro */
    .products__button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Aseguramos que el icono no tenga márgenes que lo saquen de centro */
        padding: 0 !important;
    }

    /* 3. El icono: Forzamos el centrado perfecto */
    .products__button i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Estilos para las redes en el footer */
.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center; /* Lo centra bajo el logo */
    gap: 1.5rem;
}

.footer__social {
    display: flex;
    column-gap: 1.5rem; /* Espacio entre iconos */
}

.footer__social-link {
    color: #fff;
    font-size: 1.5rem; /* Tamaño de los iconos */
    transition: transform 0.3s;
}

.footer__social-link:hover {
    transform: translateY(-3px); /* Efecto sutil al pasar el mouse */
    opacity: 0.8;
}

/* Ajuste para mobile si el logo es muy ancho */
@media screen and (max-width: 767px) {
    .footer__logo img {
        width: 250px !important; /* Más pequeño en celular para que no sature */
    }
    
    .footer__social {
        justify-content: center;
    }
}

/* --- RESET Y BASE --- */
.seccion-talleres-simbiose { 
    margin-top: -30px;
    margin-bottom: -30px;
 }
.talleres-wrapper { display: flex; flex-direction: column; gap: 1.5rem; }
.talleres-wrapper img { width: 100%; border-radius: 2rem; object-fit: cover; display: block; }

/* --- MOBILE (Solo imágenes 6 y 7 visibles y más pequeñas) --- */
@media screen and (max-width: 1023px) {
    .hide-mobile {
        display: none !important; /* Desaparecen las que no pediste */
    }

    .talleres-fila-bottom {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Las dos imágenes lado a lado */
        gap: 1rem !important;
    }

    .talleres-img-item img {
        height: 150px !important; /* Tamaño reducido para que no se vean grandotas */
        border: 8px solid #46607a;
        border-radius: 30px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .talleres-parrafo {
        font-size: 0.9rem;
        text-align: center;
    }
    .seccion-talleres-simbiose {
        margin-bottom: 50px;
        margin-top: -20px;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}

/* --- DESKTOP (Se ven las 4 imágenes ordenadas) --- */
@media screen and (min-width: 1024px) {
    .hide-mobile {
        display: flex !important; /* Reaparecen en PC */
    }

    .talleres-fila-top {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4rem !important;
        align-items: center !important;
    }

    .talleres-fila-bottom {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    .talleres-col-img-principal img { 
        height: 350px !important; 
        border: 8px solid #46607a;
        border-radius: 30px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    .talleres-img-item img { 
        height: 280px !important;
        border: 8px solid #46607a;
        border-radius: 30px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .talleres-parrafo {
        color: var(--title-color);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 480px;
    text-align: justify;
    }
}

/*logo de whatsapp */
.circlephone {
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 2px solid #45ac4b;
  width: 150px;
  height: 150px;
  bottom: -25px;
  right: 30px;
  position: absolute;
  border-radius: 100%;
  opacity: 0.5;
  animation: circle-anim 2.4s infinite ease-in-out !important;
  transition: all 0.5s;
  transform-origin: center;
}
.img-circle {
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  background-color: #45ac4b;
  width: 72px;
  height: 70px;
  bottom: 14px;
  right: 70px;
  position: absolute;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0.9;
  transform-origin: center;
}
@-webkit-keyframes tossing {
  0% {
      -webkit-transform: rotate(-8deg);
  }
  50% {
      -webkit-transform: rotate(8deg);
  }
  100% {
      -webkit-transform: rotate(-8deg);
  }
}
@-moz-keyframes circle-anim {
  0% {
      -moz-transform: rotate(0deg) scale(0.5) skew(1deg);
      opacity: 0.1;
      -moz-opacity: 0.1;
      -webkit-opacity: 0.1;
      -o-opacity: 0.1;
  }
  30% {
      -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.5;
      -moz-opacity: 0.5;
      -webkit-opacity: 0.5;
      -o-opacity: 0.5;
  }
  100% {
      -moz-transform: rotate(0deg) scale(1) skew(1deg);
      opacity: 0.6;
      -moz-opacity: 0.6;
      -webkit-opacity: 0.6;
      -o-opacity: 0.1;
  }
}
@-webkit-keyframes circle-anim {
  0% {
      -webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
      -webkit-opacity: 0.1;
  }
  30% {
      -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
      -webkit-opacity: 0.5;
  }
  100% {
      -webkit-transform: rotate(0deg) scale(1) skew(1deg);
      -webkit-opacity: 0.1;
  }
}
@-o-keyframes circle-anim {
  0% {
      -o-transform: rotate(0deg) kscale(0.5) skew(1deg);
      -o-opacity: 0.1;
  }
  30% {
      -o-transform: rotate(0deg) scale(0.7) skew(1deg);
      -o-opacity: 0.5;
  }
  100% {
      -o-transform: rotate(0deg) scale(1) skew(1deg);
      -o-opacity: 0.1;
  }
}
@keyframes circle-anim {
  0% {
      transform: rotate(0deg) scale(0.5) skew(1deg);
      opacity: 0.1;
  }
  30% {
      transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.5;
  }
  100% {
      transform: rotate(0deg) scale(1) skew(1deg);
      opacity: 0.1;
  }
}
@-moz-keyframes circle-fill-anim {
  0% {
      -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
  50% {
      -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
      opacity: 0.2;
  }
  100% {
      -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
}
@-webkit-keyframes circle-fill-anim {
  0% {
      -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
  50% {
      -webkit-transform: rotate(0deg) scale(1) skew(1deg);
      opacity: 0.2;
  }
  100% {
      -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
}
@-o-keyframes circle-fill-anim {
  0% {
      -o-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
  50% {
      -o-transform: rotate(0deg) scale(1) skew(1deg);
      opacity: 0.2;
  }
  100% {
      -o-transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
}
@keyframes circle-fill-anim {
  0% {
      transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
  50% {
      transform: rotate(0deg) scale(1) skew(1deg);
      opacity: 0.2;
  }
  100% {
      transform: rotate(0deg) scale(0.7) skew(1deg);
      opacity: 0.2;
  }
}
@keyframes pulse {
  0% {
      transform: scale(0.9);
      opacity: 1;
  }
  50% {
      transform: scale(1);
      opacity: 1;
  }
  100% {
      transform: scale(0.9);
      opacity: 1;
  }
}
@-webkit-keyframes pulse {
  0% {
      -webkit-transform: scale(0.95);
      opacity: 1;
  }
  50% {
      -webkit-transform: scale(1);
      opacity: 1;
  }
  100% {
      -webkit-transform: scale(0.95);
      opacity: 1;
  }
}
@keyframes tossing {
  0% {
      transform: rotate(-8deg);
  }
  50% {
      transform: rotate(8deg);
  }
  100% {
      transform: rotate(-8deg);
  }
}
.img-circleblock {
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  color: inherit;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: content-box;
  width: 68px;
  height: 65px;
  background-image: url(https://rab-import-assets.s3.amazonaws.com/whatsapp-icon.png);
  fill: #fff;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  -webkit-animation-name: tossing;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  transform-origin: center;
  border-radius: 100%;
}
.circle-fill {
  cursor: pointer;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  background-color: #45ac4b;
  width: 100px;
  height: 100px;
  bottom: 0px;
  right: 55px;
  position: absolute;
  border-radius: 100%;
  border: 2px solid transparent;
  animation: circle-fill-anim 2.3s infinite ease-in-out;
  transition: all 0.5s;
  transform-origin: center;
}
#wa_button {
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  bottom: 25px;
  right: 0px;
  position: fixed;
  z-index: 999;
}

/* Por defecto (Móvil), ocultamos el de escritorio y mostramos el de móvil */
    .conocenos-desktop { display: none !important; }
    .conocenos-mobile { display: block !important; }

    /* En pantallas grandes (Desktop), invertimos la visibilidad */
    @media (min-width: 768px) {
        .conocenos-desktop { display: block !important; }
        .conocenos-mobile { display: none !important; }
    }

/* CSS */

/* Estilos para Desktop (fuera de media queries) */

img.favorites__leaf-2.especial-movil-solo {
    /* Forzamos el ancho */
    width: 150% !important;
    min-width: 150% !important; /* Para asegurar que no se encoja */
    max-width: none !important;  /* Para que pueda desbordar al padre si es necesario */
    
    /* Posicionamiento */
    bottom: -5.8rem !important;
    margin-right: -20px !important;
    
    /* Requisitos para que 'bottom' funcione */
    position: absolute !important; 
    display: block !important;
}

@media screen and (max-width: 767px) {
  img.favorites__leaf-2.especial-movil-solo {
    width: 195% !important;
    min-width: 195% !important; /* Forzamos el mínimo */
    max-width: none !important;  /* Quitamos el máximo */
    bottom: -4.5rem !important;
    margin-right: -32px !important;
  }
}

/* --- ESTILO PARA DESKTOP (General) --- */
img.favorites__leaf-2.especial-hoja-chorro-4 {
    /* Los estilos que tenías en el HTML */
    width: 150% !important;
    min-width: 150% !important;
    max-width: none !important;
    bottom: -4.5rem !important;
    
    /* Importante para que el bottom funcione */
    position: absolute !important;
    display: block !important;
}

/* --- ESTILO PARA MOBILE (Al final de la hoja) --- */
@media screen and (max-width: 767px) {
    img.favorites__leaf-2.especial-hoja-chorro-4 {
        /* Ajustes para que en celular no tape el producto o se vea mejor */
        width: 180% !important;      /* Un poco más grande en mobile */
        min-width: 180% !important;
        bottom: -4rem !important;    /* Bajamos un poco más la posición */
        margin-right: -15px !important;
    }
}

/* --- ESTILOS BASE (Móvil primero) --- */
.terminos_select_container {
    padding: 20px 15px; /* Menos espacio en móvil */
    background-color: transparent;
    margin-top: 150px;
    display: flex;
    justify-content: center;
}

.terminos_select_card {
    width: 100%;
    max-width: 900px;
    background: transparent;
    padding: 25px; /* Padding más pequeño para móvil */
    border-radius: 30px;
    box-shadow: inset var(--shadow-card);
    border: 1px solid #eee;
}

.terminos_select_title {
    font-size: 22px; /* Título más pequeño en móvil */
    color: #2d5a27;
    border-bottom: 2px solid transparent;
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-align: center;
}

.terminos_select_subtitle {
    font-size: 17px;
    color: #111;
    margin-bottom: 10px;
    font-weight: 700;
}

.terminos_select_section {
    margin-bottom: 25px;
    line-height: 1.5;
    color: #444;
    font-size: 15px;
}

.terminos_select_list {
    padding-left: 18px;
    margin-top: 8px;
}

.terminos_select_list li {
    margin-bottom: 10px;
}

.terminos_select_footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid transparent;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

/* --- TABLET (desde 768px) --- */
@media (min-width: 768px) {
    .terminos_select_container {
        padding: 40px 30px;
        margin-top: 130px;
    }
    
    .terminos_select_card {
        padding: 45px;
    }

    .terminos_select_title {
        font-size: 26px;
        text-align: left;
    }
}

/* --- DESKTOP (desde 1024px) --- */
@media (min-width: 1024px) {
    .terminos_select_container {
        padding: 60px 20px;
        margin-top: 130px;
    }

    .terminos_select_section {
        font-size: 16px;
        line-height: 1.7;
    }

    .terminos_select_title {
        font-size: 32px;
    }
}


/* Overlay: el fondo oscuro */
.modal-overlay-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px); /* Desenfoque elegante */
    z-index: 9999;
    display: none; /* Se activa con JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* El contenedor del modal */
.modal-content-custom {
    position: relative;
    max-width: 500px;
    width: 100%;
    animation: fadeInModal 0.4s ease-out;
}

/* Imagen fluida */
.modal-image-container img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 100px;
    border-radius: 24px 24px 0 0;
    border: 5px solid white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Botón de cerrar */
.modal-close-custom {
    position: absolute;
    margin-top: 100px;
    top: -45px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
}

.modal-close-custom:hover {
    transform: scale(1.1);
}

/* Animación de entrada */
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .modal-content-custom {
        max-width: 90%;
    }
}

    .gracias-wrapper {
        min-height: 70vh;
        margin-top: 150px;
        margin-bottom: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 15px;
        background: transparent;
    }
    
    .gracias-container {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    .gracias-icon-box {
        margin-bottom: 25px;
        animation: fadeInUp 0.6s ease-out;
    }
    
    .gracias-check-img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        filter: drop-shadow(0 4px 10px rgba(70, 96, 122, 0.2));
    }
    
    .gracias-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 15px;
        line-height: 1.3;
        animation: fadeInUp 0.6s ease-out 0.1s both;
    }
    
    .gracias-text {
        font-size: clamp(0.95rem, 4vw, 1.1rem);
        color: #555;
        margin-bottom: 20px;
        line-height: 1.6;
        animation: fadeInUp 0.6s ease-out 0.2s both;
    }
    
    .gracias-highlight {
        background: #46607a;
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 600;
        display: inline-block;
        margin: 0 3px;
    }
    
    .gracias-subtext {
        display: block;
        margin-top: 10px;
        font-size: clamp(0.85rem, 3.5vw, 0.95rem);
        color: #777;
    }
    
    .gracias-divider {
        border: none;
        border-top: 1px solid rgba(70, 96, 122, 0.15);
        margin: 25px 0;
        width: 60px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Tarjetas de información */
    .gracias-card {
        background: #fff;
        border-radius: 20px;
        padding: 20px 18px;
        margin-bottom: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
        text-align: left;
        border: 1px solid rgba(70, 96, 122, 0.08);
        animation: fadeInUp 0.6s ease-out 0.3s both;
    }
    
    .gracias-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid rgba(70, 96, 122, 0.1);
    }
    
    .gracias-card-header i {
        font-size: 1.5rem;
        color: #46607a;
        background: rgba(70, 96, 122, 0.08);
        padding: 8px;
        border-radius: 12px;
    }
    
    .gracias-card-header h4 {
        margin: 0;
        font-weight: 700;
        color: #2c3e50;
        font-size: clamp(1rem, 4.5vw, 1.2rem);
    }
    
    /* Grid para datos de contacto */
    .gracias-contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    @media (min-width: 480px) {
        .gracias-contact-grid {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
    }
    
    .gracias-info-item {
        display: flex;
        flex-direction: column;
    }
    
    .gracias-info-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #888;
        margin-bottom: 4px;
    }
    
    .gracias-info-value {
        font-weight: 600;
        color: #2c3e50;
        font-size: clamp(0.9rem, 3.8vw, 1rem);
        word-break: break-word;
    }
    
    /* Lista de dirección */
    .gracias-address-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .gracias-address-item {
        display: flex;
        flex-direction: column;
    }
    
    .gracias-address-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #888;
        margin-bottom: 4px;
    }
    
    .gracias-address-value {
        font-weight: 500;
        color: #2c3e50;
        font-size: clamp(0.9rem, 3.8vw, 1rem);
        word-break: break-word;
    }
    
    .gracias-adicional {
        background: #f8f9fa;
        padding: 12px 14px;
        border-radius: 12px;
        margin-top: 5px;
        font-style: italic;
        color: #555;
        border-left: 3px solid #46607a;
    }
    
    /* Badge de método de pago */
    .gracias-payment-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #46607a;
        color: #fff;
        padding: 10px 22px;
        border-radius: 40px;
        font-size: clamp(0.85rem, 3.5vw, 0.95rem);
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(70, 96, 122, 0.25);
        animation: fadeInUp 0.6s ease-out 0.4s both;
    }
    
    .gracias-payment-badge i {
        font-size: 1.1rem;
    }
    
    /* Resumen de productos */
    .gracias-summary {
        animation: fadeInUp 0.6s ease-out 0.5s both;
    }
    
    .gracias-summary-title {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 18px;
        text-align: left;
    }
    
    .gracias-product-card {
        background: #fff;
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(70, 96, 122, 0.08);
    }
    
    .gracias-product-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    
    .gracias-product-item:last-of-type {
        border-bottom: none;
    }
    
    .gracias-product-info {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        font-size: clamp(0.9rem, 3.8vw, 1rem);
        color: #444;
    }
    
    .gracias-product-qty {
        background: #46607a;
        color: #fff;
        padding: 2px 8px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-right: 5px;
    }
    
    .gracias-product-price {
        font-weight: 600;
        color: #2c3e50;
        font-size: clamp(0.9rem, 3.8vw, 1rem);
    }
    
    .gracias-total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        margin-top: 10px;
        border-top: 2px solid rgba(70, 96, 122, 0.2);
        font-weight: 700;
        font-size: clamp(1rem, 4.5vw, 1.2rem);
        color: #2c3e50;
    }
    
    .gracias-total-row span:last-child {
        color: #46607a;
        font-size: clamp(1.2rem, 5vw, 1.4rem);
    }
    
    /* Botón volver */
    .gracias-actions {
        margin-top: 30px;
        animation: fadeInUp 0.6s ease-out 0.6s both;
    }
    
    .gracias-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #46607a;
        color: #fff;
        padding: 16px 32px;
        border-radius: 50px;
        font-weight: 600;
        font-size: clamp(1rem, 4vw, 1.1rem);
        text-decoration: none;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(70, 96, 122, 0.25);
        width: 100%;
        max-width: 280px;
    }
    
    .gracias-btn:hover {
        background: #3a5068;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(70, 96, 122, 0.3);
    }
    
    .gracias-btn i {
        font-size: 1.2rem;
    }
    
    /* Animaciones */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Ajustes para pantallas muy pequeñas */
    @media (max-width: 360px) {
        .gracias-wrapper {
            padding: 15px 12px;
        }
        
        .gracias-card {
            padding: 16px 14px;
        }
        
        .gracias-check-img {
            width: 65px;
            height: 65px;
        }
        
        .gracias-btn {
            padding: 14px 24px;
        }
    }

    /* Slim Select - Estilo limpio, compacto y ordenado */
.ss-main {
    width: 100% !important;
}

.ss-main .ss-single-selected {
    background: #fff !important;
    color: #47607a !important;
    padding: 0.9rem 1.25rem !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    min-height: auto !important;
    font-size: 15px !important;
    height: auto !important;
    transition: border-color 0.2s ease !important;
}

.ss-main .ss-single-selected:hover {
    border-color: #47607a !important;
}

.ss-main .ss-single-selected .ss-arrow {
    margin-top: -2px !important;
}

.ss-main .ss-single-selected .ss-arrow span {
    border-color: #47607a !important;
}

.ss-content {
    border-radius: 12px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    z-index: 9999 !important;
    position: absolute !important;
    margin-top: 4px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}

.ss-content .ss-list .ss-option {
    padding: 10px 1.25rem !important;
    color: #47607a !important;
    font-size: 14px !important;
    transition: background 0.15s ease !important;
}

.ss-content .ss-list .ss-option:hover {
    background: rgba(71, 96, 122, 0.06) !important;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).selected,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
    background: #47607a !important;
    color: #fff !important;
}

.ss-content .ss-list .ss-option.ss-disabled {
    display: none !important;
}

.ss-content .ss-search {
    display: none !important;
}

/* Estado disabled */
.ss-main.ss-disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
}

.ss-main.ss-disabled .ss-single-selected {
    background: #f8f8f8 !important;
    border-color: #ddd !important;
}

/* Scrollbar personalizado */
.ss-content::-webkit-scrollbar {
    width: 5px !important;
}

.ss-content::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.ss-content::-webkit-scrollbar-thumb {
    background: #47607a !important;
    border-radius: 10px !important;
    opacity: 0.7 !important;
}

/* Grid responsivo */
@media (max-width: 768px) {
    .res-form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .ss-content {
        max-height: 200px !important;
    }
}

 #envio-direccion:focus,
    #envio-info-adicional:focus {
        outline: none;
        border-color: #47607a !important;
    }
    
    #btn-continue-step-2:hover {
        background: #3a5068 !important;
    }
    
    /* Mobile: Departamento y Provincia uno debajo del otro */
    @media (max-width: 768px) {
        #container-step-2 {
            padding: 20px 15px !important;
        }
        
        .depto-prov-row {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
        }
    }

#shipping-progress-bar {
        transition: width 0.5s ease, background 0.3s ease;
    }
    
    #free-shipping-reached span {
        animation: softPulse 1.5s infinite;
    }
    
    @keyframes softPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.85; transform: scale(1.02); }
    }
    
    #resumen-envio {
        transition: color 0.3s ease;
    }

    .top__info-item:has(.ri-truck-line) {
    animation: heartbeat 4s ease-in-out infinite;
    transform-origin: left center;
}

.top__info-item:has(.ri-truck-line) .ri-truck-line {
    color: #fff;
}

@keyframes heartbeat {
    0%, 40%, 100% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.06);
    }
    20% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.04);
    }
    30% {
        transform: scale(1);
    }
}

/* ========== FOOTER - LÍNEA ÚNICA (DESKTOP/TABLET) ========== */

.footer__legal-line {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 15px 0;
}

.footer__legal-line .footer__link {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.footer__legal-line .footer__link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Libro de reclamaciones en línea */
.footer__legal-line .footer__libro {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
}

.footer__libro-link {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer__libro-link:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.footer__libro-img {
    width: 100%;
    max-width: 130px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.footer__libro-link:hover .footer__libro-img {
    filter: brightness(0) invert(0.9);
}

/* Copyright */
.footer__copy-wrapper {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__copy {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-align: center;
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 1024px) {
    .footer__legal-line {
        max-width: 600px;
        padding: 12px 0;
    }
    
    .footer__legal-line .footer__link {
        font-size: 0.85rem;
    }
    
    .footer__libro-img {
        width: 50%;
        max-width: 110px;
    }
}

/* ========== MOBILE - UNO DEBAJO DEL OTRO (Términos → Políticas → Libro) ========== */
@media (max-width: 767px) {
    .footer__legal-line {
        flex-direction: column;
        gap: 15px;
        padding: 15px 10px;
    }
    
    .footer__legal-line .footer__link {
        font-size: 0.85rem;
        white-space: normal;
        text-align: center;
    }
    
    /* Orden: Términos primero, Políticas segundo, Libro tercero */
    .footer__legal-line .footer__link[href*="terminos"] {
        order: 1;
    }
    
    .footer__legal-line .footer__link[href*="politica"] {
        order: 2;
    }
    
    .footer__legal-line .footer__libro {
        order: 3;
        margin: 5px 0;
    }
    
    .footer__libro-img {
        width: 30%;
        max-width: 100px;
    }
    
    .footer__copy {
        font-size: 0.75rem;
    }
}

/* ========== MOBILE PEQUEÑO ========== */
@media (max-width: 480px) {
    .footer__legal-line {
        padding: 12px 5px;
    }
    
    .footer__legal-line .footer__link {
        font-size: 0.8rem;
    }
    
    .footer__legal-line .footer__link[href*="terminos"] {
        order: 1;
    }
    
    .footer__legal-line .footer__link[href*="politica"] {
        order: 2;
    }
    
    .footer__legal-line .footer__libro {
        order: 3;
    }
    
    .footer__libro-img {
        width: 30%;
        max-width: 150px;
    }
}

/* ========== AJUSTES GENERALES ========== */
@media (max-width: 767px) {
    .footer__container {
        text-align: center;
    }
    
    .footer__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer__logo img {
        width: 280px !important;
    }
    
    .footer__social {
        justify-content: center;
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .footer__logo img {
        width: 220px !important;
    }
}

    .libro-wrapper {
        margin-top: 100px;
        min-height: 70vh;
        padding: 60px 20px;
        background: transparent;
    }
    
    .libro-container {
        max-width: 900px;
        margin: 0 auto;
        background: #fff;
        border-radius: 30px;
        padding: 40px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    }
    
    .libro-title {
        font-size: 2rem;
        font-weight: 700;
        color: #47607a;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .libro-info {
        background: rgba(71, 96, 122, 0.05);
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 30px;
        font-size: 0.95rem;
        color: #555;
        border-left: 4px solid #47607a;
    }
    
    .libro-info p {
        margin-bottom: 10px;
    }
    
    .libro-info p:last-child {
        margin-bottom: 0;
    }
    
    .libro-info strong {
        color: #47607a;
    }
    
    .libro-section {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
    
    .libro-section-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #47607a;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .libro-section-title i {
        font-size: 1.3rem;
    }
    
    .libro-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .libro-form-field {
        display: flex;
        flex-direction: column;
    }
    
    .libro-form-field.full-width {
        grid-column: span 2;
    }
    
    .libro-form-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #47607a;
        margin-bottom: 6px;
    }
    
    .libro-form-label .required {
        color: #dc3545;
        margin-left: 3px;
    }
    
    .libro-form-input,
    .libro-form-select,
    .libro-form-textarea {
        padding: 12px 16px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        font-size: 15px;
        color: #333;
        transition: border-color 0.3s ease;
        background: #fff;
    }
    
    .libro-form-input:focus,
    .libro-form-select:focus,
    .libro-form-textarea:focus {
        outline: none;
        border-color: #47607a;
    }
    
    .libro-form-textarea {
        resize: vertical;
        min-height: 100px;
    }
    
    .libro-phone-group {
        display: flex;
        gap: 10px;
    }
    
    .libro-phone-group select {
        width: 120px;
    }
    
    .libro-phone-group input {
        flex: 1;
    }
    
    .libro-note {
        background: #fff3cd;
        padding: 15px 20px;
        border-radius: 12px;
        margin: 20px 0;
        font-size: 0.9rem;
        color: #856404;
        border-left: 4px solid #ffc107;
    }
    
    .libro-note i {
        margin-right: 8px;
    }
    
    .libro-submit {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
    
    .libro-btn {
        background: #47607a;
        color: #fff;
        padding: 16px 40px;
        border: none;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    
    .libro-btn:hover {
        background: #3a5068;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(71, 96, 122, 0.3);
    }
    
    .libro-btn i {
        font-size: 1.2rem;
    }
    
    .libro-footer-note {
        text-align: center;
        margin-top: 20px;
        font-size: 0.85rem;
        color: #999;
    }
    
    /* Mobile */
    @media (max-width: 768px) {
        .libro-container {
            padding: 25px 20px;
        }
        
        .libro-title {
            font-size: 1.6rem;
        }
        
        .libro-form-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .libro-form-field.full-width {
            grid-column: span 1;
        }
        
        .libro-phone-group {
            flex-direction: column;
        }
        
        .libro-phone-group select {
            width: 100%;
        }
        
        .libro-btn {
            width: 100%;
            justify-content: center;
            padding: 14px 20px;
        }
        
        .libro-wrapper {
            margin-top: 150px;
        }
    }
    
    @media (max-width: 480px) {
        .libro-wrapper {
            padding: 30px 15px;
        }
        
        .libro-title {
            font-size: 1.4rem;
        }
        
        .libro-info {
            font-size: 0.85rem;
        }
    }

    /* ========== SLIM SELECT - MISMO ESTILO QUE LOS INPUTS ========== */

/* Selects normales */
.libro-select-slim,
.libro-select-slim-phone {
    width: 100%;
}

/* Contenedor principal */
.libro-select-slim + .ss-main,
.libro-select-slim-phone + .ss-main {
    width: 100% !important;
}

/* El select visible - exactamente igual que .libro-form-input */
.libro-select-slim + .ss-main .ss-single-selected,
.libro-select-slim-phone + .ss-main .ss-single-selected {
    background: #fff !important;
    color: #333 !important;
    padding: 12px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    min-height: auto !important;
    font-size: 15px !important;
    height: auto !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Hover */
.libro-select-slim + .ss-main .ss-single-selected:hover,
.libro-select-slim-phone + .ss-main .ss-single-selected:hover {
    border-color: #47607a !important;
}

/* Focus/Abierto */
.libro-select-slim + .ss-main.ss-open-below .ss-single-selected,
.libro-select-slim + .ss-main.ss-open-above .ss-single-selected,
.libro-select-slim-phone + .ss-main.ss-open-below .ss-single-selected,
.libro-select-slim-phone + .ss-main.ss-open-above .ss-single-selected {
    border-color: #47607a !important;
    outline: none !important;
}

/* Flecha */
.libro-select-slim + .ss-main .ss-single-selected .ss-arrow span,
.libro-select-slim-phone + .ss-main .ss-single-selected .ss-arrow span {
    border-color: #47607a !important;
}

/* Dropdown */
.ss-content {
    border-radius: 12px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    margin-top: 4px !important;
}

/* Opciones */
.ss-content .ss-list .ss-option {
    padding: 12px 16px !important;
    color: #333 !important;
    font-size: 15px !important;
}

/* Hover en opciones */
.ss-content .ss-list .ss-option:hover {
    background: rgba(71, 96, 122, 0.06) !important;
}

/* Opción seleccionada */
.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).selected {
    background: #47607a !important;
    color: #fff !important;
}

/* Ocultar buscador */
.ss-content .ss-search {
    display: none !important;
}

/* Estilo de la franja */
.modal-footer-custom {
    background-color: #46607a;
    color: white;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    display: block;
    font-weight: bold;
    font-size: 14px;
    border-bottom-left-radius: 24px; /* Ajusta según el radio de tu modal */
    border-bottom-right-radius: 24px;
    transition: background-color 0.3s ease;
}

.modal-footer-custom:hover {
    background-color: #354a5e; /* Un tono un poco más oscuro al pasar el mouse */
}

/* Asegúrate de que el contenido del modal permita el footer */
.modal-content-custom {
    padding: 0; /* Si tu modal tenía padding, es mejor removerlo aquí */
    overflow: hidden; /* Esto ayuda a que el footer no se salga de las esquinas redondeadas */
    border-radius: 15px;
}

/* Contenedor Principal */
.simbiose-delivery-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Tipografía limpia */
    color: #333;
}

/* Título de la Sección */
.section-title {
    text-align: center;
    color: #46607a;
    font-weight: 300; /* Minimalismo: fuente delgada */
    font-size: 2.5rem;
    margin-bottom: 40px;
}

/* Bloque de Región (Tarjeta) */
.delivery-region {
    background: #fff;
    border-radius: 12px; /* Esquinas redondeadas y modernas */
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra muy sutil */
    overflow: hidden; /* Necesario para la animación */
    transition: all 0.3s ease;
}

/* Header de la Tarjeta (El Botón) */
.region-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: #46607a;
    font-weight: 500;
}

.region-header:focus { outline: none; } /* Quitamos el borde por defecto */

.region-info { display: flex; align-items: center; gap: 15px; }

/* Iconos */
.simbiose-delivery-section .icon { width: 28px; height: 28px; color: #46607a; opacity: 0.8; }
.simbiose-delivery-section .chevron { width: 24px; height: 24px; transition: transform 0.3s ease; }

/* Efecto de Rotación del Chevron al abrir */
.delivery-region.active .chevron { transform: rotate(180deg); }

/* Lista de Distritos (Contenido Oculto) */
.district-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Animación suave */
    padding: 0 30px;
}

/* Mostrar la lista cuando está activo */
.delivery-region.active .district-list {
    max-height: 2000px; /* Un valor alto para asegurar que todo el contenido se muestre */
    padding-bottom: 30px;
}

/* Item de Distrito Individual */
.district-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0; /* Línea separadora muy fina */
    font-size: 1rem;
}

.district-item:last-child { border-bottom: none; } /* Sin línea en el último item */

/* Estilo del Costo */
.district-item .cost {
    font-weight: bold;
    color: #46607a;
}

/* Media Queries para Tablet/Mobile */
@media (max-width: 768px) {
    .section-title { font-size: 2rem; margin-bottom: 30px; }
    .region-header { padding: 15px 20px; font-size: 1.1rem; }
    .district-list { padding: 0 20px; }
    .district-item { font-size: 0.95rem; }
}
/* =========================================================
   PACKS: el cliente elige sus sabores
   ========================================================= */
.pack-selector {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pack-grupo__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.pack-grupo__titulo {
    font-weight: bold;
    color: #333;
}

.pack-grupo__contador {
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    transition: color 0.2s ease;
}

.pack-grupo.is-completo .pack-grupo__contador {
    color: #46607a;
}

.pack-opciones {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pack-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.pack-opcion__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
}

.pack-opcion__nombre {
    flex: 1;
    font-size: 0.95rem;
    color: #666;
    transition: color 0.2s ease;
}

.pack-opcion.is-elegida .pack-opcion__nombre {
    color: #333;
    font-weight: 600;
}

.pack-opcion__qty {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 4px 12px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.pack-opcion__btn {
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    width: 22px;
    height: 22px;
    cursor: pointer;
    color: #333;
}

.pack-opcion__btn:disabled {
    color: #ccc;
    cursor: default;
}

.pack-opcion__num {
    min-width: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-add-cart:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pack-hint {
    margin: -18px 0 20px;
    font-size: 0.8rem;
    color: #888;
}

.pack-hint.is-oculto {
    display: none;
}

/* Editar / elegir sabores desde carrito y checkout */
.pack-editar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #46607a;
    cursor: pointer;
}

.pack-editar:hover {
    text-decoration: underline;
}

.pack-editar--pendiente {
    color: #c0392b;
}

.btn-proceder--bloqueado {
    opacity: 0.45;
    cursor: not-allowed;
}

.pack-aviso {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #888;
    text-align: center;
}

/* Sabores elegidos en carrito y checkout */
.pack-resumen {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #666;
    line-height: 1.4;
}

@media (max-width: 768px) {
    /* En móvil el detalle reordena bloques con `order`; el selector va junto al botón */
    .product-detail-section .pack-selector,
    .product-detail-section .pack-hint {
        order: 4 !important;
    }

    .product-detail-section .pack-selector {
        margin-top: 8px;
    }

    .pack-hint {
        margin-top: -8px;
        text-align: center;
    }
}

/* Modal de promos */
.pack-modal {
    position: fixed;
    inset: 0;
    z-index: 100000010; /* sobre el header */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pack-modal.is-abierto {
    visibility: visible;
    opacity: 1;
}

.pack-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
}

.pack-modal__card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--first-color);
    border-radius: 30px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.pack-modal.is-abierto .pack-modal__card {
    transform: translateY(0);
}

.pack-modal__cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    font-size: 1.1rem;
    color: #333;
    cursor: pointer;
}

.pack-modal__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 36px;
}

.pack-modal__img-box {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--first-color);
    box-shadow: inset var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.pack-modal__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pack-modal__titulo {
    margin: 4px 0 2px;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #333;
}

.pack-modal__precio {
    font-weight: bold;
    color: #46607a;
}

.pack-modal__cuerpo {
    margin-top: 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.pack-modal__pie {
    padding-top: 18px;
}

.pack-modal__error {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #c0392b;
    text-align: center;
}

.pack-modal__error:empty {
    display: none;
}

.pack-modal__confirmar {
    width: 100%;
}

@media (max-width: 767px) {
    /* En móvil el modal sube desde abajo */
    .pack-modal {
        align-items: flex-end;
        padding: 0;
    }

    .pack-modal__card {
        max-width: none;
        max-height: 85vh;
        border-radius: 24px 24px 0 0;
        padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
        transform: translateY(100%);
    }

    .pack-modal__confirmar {
        padding: 16px;
    }
}