@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

/* Animaciones para fade in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animaciones que se activan al hacer scroll */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fade-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Clase para animación inmediata */
.fade-immediate {
  animation: fadeInUp 1s ease-out both;
}

:root {
  --color-white: #fff;
  --color-beige: #d2cbbc;
  --color-dulce: #946b3e;
  --color-primary: #5564b4;
  --color-black: #1e1e1e;
  --color-pink: #c94b85;
  --color-golden: #f6ba22;
  --color-orange: #ED6C41;
  --color-verde: #CAE976;
  --color-lila: #4A1C50;
  --color-rojo: #B0002D;
  --color-marron-claro: #AC6D31;
  --color-marron: #623A25;

  --color-text-dark: #121212;
  --color-text-light: #d2cbbc;

  /* Fuentes y tamaños de fuente */
  --font-family-base: "Quicksand", sans-serif;
  --font-size-base: 1em;
}

/* Resto de tu CSS */

body {
  margin: 0;
  font-family: var(--font-family-base) !important;
  color: var(--color-text-dark);
  line-height: 1.6;
}

/* Chat Widget Styles extraidos del footer */
.n8n-chat-widget-button {
  background-color: #946b3e !important;
}

.n8n-chat-widget-header,
.chat-layout .chat-header {
  background-image: url('https://elrosquinense.com/uploads/secciones/1/seccion_logos_image_es/0001_rosquinense-logo.svg');
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #946b3e !important;
}

.n8n-chat-widget-header h3 {
  display: none;
}

.chat-window-wrapper {
  bottom: 90px !important;
  /* Elevar widget de chat para liberar el lugar de recaptcha */
}

.chat-window-wrapper .chat-window-toggle {
  background-color: #946b3e !important;
}

/* MENSAJE DEL USUARIO */
.chat-message-from-user,
.chat-message-user,
.chat-message--outgoing,
.chat-body .message-user {
  background-color: #3b71ca !important;
  color: #ffffff !important;
}

.chat-message-from-user *,
.chat-message-user *,
.chat-message--outgoing *,
.chat-body .message-user * {
  color: #ffffff !important;
}

/* Animaciones generales para títulos */
h1:not(.hero-section h1):not(.animated) {
  animation: fadeInUp 1s ease-out 0.2s both;
}

h2:not(.animated) {
  animation: fadeInUp 0.8s ease-out 0.15s both;
}

h3:not(.animated) {
  animation: fadeInLeft 0.8s ease-out 0.1s both;
}

/* Clase para elementos que ya tienen animación específica */
.animated {
  /* Evita que se aplique la animación general */
}

.container-w {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
  width: 100%;
}

/* Header Section */
.main-header {
  position: absolute;
  padding: 1rem 0;
  background-color: rgba(255, 255, 255, 0);
  z-index: 50;
  width: 100%;
  background: linear-gradient(180deg,
      #1e1e1e 0%,
      rgba(30, 30, 30, 0.4) 51.92%,
      rgba(30, 30, 30, 0.05) 90.38%,
      rgba(30, 30, 30, 0) 100%);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-shadow: unset !important;
}

.navbar .logo img {
  height: 5rem;
  margin-right: 20px;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  position: relative;
}

.nav-links li {
  margin: 0px 15px;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.3s ease;
  text-transform: uppercase;
  position: relative;
}

.nav-links a:hover {
  color: var(--color-white);
}

.nav-item.has-submenu {
  position: relative;
}

.nav-item.has-submenu>a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-item.has-submenu:hover>a::after {
  opacity: 0.2;
}

/* Submenú oculto por defecto */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  /* padding: 1rem; */
  backdrop-filter: blur(5px);
  border-radius: 2px;
  list-style: none;
  z-index: 10;
}

.submenu li {
  margin-bottom: 0.2rem;
  padding: 1rem;
}

.submenu li:last-child {
  margin-bottom: 0;
}

.submenu a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
}

ul .submenu {
  padding-left: 0;
}

.nav-links .nav-item li {
  margin: 0px;
  min-width: 159.5px;
}

/* Mostrar submenú al hacer hover */
.nav-item.has-submenu:hover .submenu {
  display: block;
}

.nav-item.has-submenu {
  position: relative;
}

.nav-item.has-submenu>a {
  display: inline-block;
}

.nav-item.has-submenu:hover .submenu {
  display: block;
}

/* Estilos para submenú de segundo nivel */
.submenu-category {
  position: relative;
}

.submenu-category>a {
  font-weight: 500;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
  /* padding-bottom: 0.2rem; */
  padding: 0rem 1rem;
  display: block;
}

.submenu li:hover {
  background: #b65000;
}

.submenu-level-2 {
  display: none;
  position: absolute;
  top: 0px;
  left: 95%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  border-radius: 2px;
  list-style: none;
  min-width: 200px;
  z-index: 11;
  margin-left: 0.5rem;
}

ul .submenu-level-2 {
  padding-left: 0rem;
}

.submenu-level-2 li {
  margin-bottom: 0.3rem;
}

.submenu-level-2 li:last-child {
  margin-bottom: 0;
}

.submenu-level-2 a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: block;
  transition: color 0.3s ease;
}

.submenu-level-2 a:hover {
  color: var(--color-white);
}

/* Mostrar submenú de segundo nivel al hacer hover */
.submenu-category:hover .submenu-level-2 {
  display: block;
}

/* Evita que se corte el hover al bajar */
.nav-item.has-submenu {
  padding-bottom: 20px;
}

.nav-item.has-submenu {
  border-bottom: 20px solid transparent;
}

.main-header,
.navbar {
  overflow: visible;
  z-index: 999;
}

/* Menu toggle - Hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: relative;
  z-index: 1001;
  background: none;
  border: none;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-white);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

/* Animación del menú hamburguesa */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

button,
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 1.7rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  transition: background-color 0.3s ease;
}

button,
.btn-primary a {
  text-decoration: none;
}

.navbar .btn-primary {
  color: var(--color-white) !important;
}

.navbar .btn-primary:hover {
  color: var(--color-primary) !important;
}

button:hover,
.btn-primary:hover {
  background-color: var(--color-white);
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

.btn-primary:hover a {
  color: var(--color-primary) !important;
}

button,
.btn-secondary {
  background-color: var(--color-beige);
  color: var(--color-dulce) !important;
  padding: 0.5rem 1.7rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  transition: background-color 0.3s ease;
}

button,
.btn-secondary a {
  text-decoration: none;
  color: var(--color-dulce) !important;
}

button:hover,
.btn-secondary:hover {
  color: var(--color-beige) !important;
  background-color: var(--color-dulce);
}

button:hover a,
.btn-secondary:hover a {
  color: var(--color-beige) !important;
}

/* Hero Section */
.hero-section {
  background-color: var(--color-dulce);
  color: white;
  text-align: left;
  padding: 0;
  /* Sin padding para ocupar toda la pantalla */
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  /* Sin márgenes */
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Asegurar que el container-w ocupe todo el espacio disponible */
.hero-section .container-w {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 20px;
  /* Padding solo para el contenido */
  z-index: 2;
  flex-direction: column;
  justify-content: center;
}

.hero-content {
  max-width: 60%;
  z-index: 3;
  /* Por encima de la imagen de fondo */
  position: relative;
  color: var(--color-text-light);
}

.hero-section h1 {
  font-size: 3.8rem;
  font-weight: bold;
  line-height: 4rem;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-section p {
  font-size: 24px;
  line-height: normal;
  margin: 3rem 0;
  font-weight: 500;
  animation: fadeInUp 1s ease-out 0.6s both;
}

a:hover {
  color: var(--color-white) !important;
}

/* Abstract shape in hero section (example using pseudo-element) */
.hero-section::after {
  background-color: var(--color-dulce);
}

.hero-section::after {
  background-color: var(--color-dulce);
}

.parallax-item {
  will-change: transform;
  position: absolute;
  /* o fixed, depende del caso */
}

.hero-content {
  max-width: 60%;
  z-index: 3;
  /* Por encima de la imagen de fondo */
  position: relative;
  color: var(--color-text-light);
}

/* HISTORIA section  */

.dulce-de-leche-difference {
  padding: 50px 20px;
  background-color: var(--color-black);
}

.dulce-de-leche-difference .container-w {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.dulce-de-leche-difference .text-content {
  color: var(--color-text-light);
  margin-top: 1rem;
  text-align: center;
}

.dulce-de-leche-difference .text-content h5 {
  font-size: 3.2rem;
  font-weight: 400;
  margin-bottom: -0.6rem;
  animation: fadeIn 1s ease-out 0.1s both;
}

.dulce-de-leche-difference .text-content h2 {
  font-size: 3.2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out 0.2s both;
}

.dulce-de-leche-difference .text-content p {
  font-size: 1.4rem;
  font-weight: 400;
  margin: -0.5rem;
  animation: fadeInUp 1s ease-out 0.4s both;
}

.historia-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.historia-card {
  width: 70em;
  height: 40em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  z-index: 0;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.historia-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  z-index: 1;
}

.historia-card img {
  width: 100%;
  height: auto;
}

.historia-card .card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  text-align: center;
}

.historia-card:hover::before {
  background: rgba(30, 30, 30, 0.4);
}

.historia-card:hover .card-content {
  opacity: 1;
}

.title-card {
  font-size: 3.2rem;
  font-weight: bold;
  color: var(--color-beige);
  margin: 2rem;
  text-align: center;
  animation: fadeInUp 1s ease-out 0.2s both;
}

.historia-vector {
  position: absolute;
  left: 0;
  z-index: 2;
}

.historia-vector img {
  max-width: 70%;
  height: auto;
  display: block;
}

/* PRODUCTOS section  */

.great-creations {
  padding: 50px 20px;
}

.great-creations .container-w {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.great-creations .container-w .text-content {
  color: var(--color-white);
  margin-top: 1rem;
  text-align: center;
}

.great-creations h2 {
  font-size: 3.2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out 0.2s both;
}

.great-creations .container-w .text-content p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: normal;
}

.productos-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  color: var(--color-white);
}

.producto-card {
  max-width: 18%;
}

.producto-card img {
  border-radius: 1rem;
  margin-bottom: 1rem;
  max-width: 13.5rem;
}

.producto-card h4 {
  text-transform: uppercase;
}

.producto-bajada {
  min-height: 130px;
  margin-bottom: 0.5rem;
}

.producto-card p {
  font-size: 13px;
  margin-bottom: 0rem;
}

.btn-width {
  width: 140px;
}

.btn-ribbon {
  width: 151px;
  height: 50px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  border: none;
  text-transform: uppercase;
  padding: 0 15px;
}

.btn-ribbon--rosa {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='60' viewBox='0 0 176.196 59.506'%3E%3Cpath fill='%23C94B85' d='M169.815,30.488l6.26,18.78a2.325,2.325,0,0,1-2.012,3.052L88.292,59.5a2.249,2.249,0,0,1-.388,0L2.133,52.32A2.324,2.324,0,0,1,.121,49.268l6.26-18.78a2.322,2.322,0,0,0,0-1.47L.121,10.238A2.325,2.325,0,0,1,2.133,7.185L87.9.008a2.248,2.248,0,0,1,.388,0l85.772,7.177a2.326,2.326,0,0,1,2.012,3.053l-6.26,18.78a2.322,2.322,0,0,0,0,1.47'/%3E%3C/svg%3E");
}

.btn-ribbon--rojo {
  background-image: url("data:image/svg+xml,%3Csvg width='176' height='60' viewBox='0 0 158 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151.733 27.2425L157.327 44.0225C157.426 44.321 157.457 44.6383 157.416 44.9503C157.375 45.2624 157.263 45.561 157.09 45.8236C156.916 46.0863 156.686 46.3061 156.415 46.4665C156.144 46.6269 155.84 46.7236 155.527 46.7495L78.8916 53.1625C78.7765 53.1724 78.6608 53.1724 78.5456 53.1625L1.90665 46.7495C1.59299 46.7236 1.2893 46.6269 1.01852 46.4665C0.747735 46.3061 0.516941 46.0863 0.343569 45.8236C0.170197 45.561 0.0587815 45.2624 0.0177383 44.9503C-0.0233049 44.6383 0.00709757 44.321 0.106649 44.0225L5.70165 27.2425C5.84399 26.816 5.84399 26.3549 5.70165 25.9285L0.109649 9.14846C0.00991395 8.84985 -0.0206308 8.53246 0.0203239 8.22031C0.0612786 7.90815 0.172661 7.60939 0.346051 7.3466C0.519442 7.08382 0.750303 6.86389 1.02118 6.70345C1.29206 6.543 1.59587 6.44624 1.90965 6.42046L78.5446 0.00746259C78.6598 -0.00248753 78.7755 -0.00248753 78.8906 0.00746259L155.529 6.42046C155.842 6.44642 156.146 6.54331 156.417 6.7038C156.688 6.8643 156.918 7.08422 157.092 7.34695C157.265 7.60968 157.376 7.90835 157.418 8.22044C157.459 8.53252 157.428 8.84984 157.329 9.14846L151.735 25.9285C151.592 26.3549 151.592 26.816 151.735 27.2425' fill='%23B0002D'/%3E%3C/svg%3E");
}

.btn-ribbon--lila {
  background-image: url("data:image/svg+xml,%3Csvg width='176' height='60'  viewBox='0 0 158 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151.733 27.2425L157.327 44.0225C157.426 44.321 157.457 44.6383 157.416 44.9503C157.375 45.2624 157.263 45.561 157.09 45.8236C156.916 46.0863 156.686 46.3061 156.415 46.4665C156.144 46.6269 155.84 46.7236 155.527 46.7495L78.8916 53.1625C78.7765 53.1724 78.6608 53.1724 78.5456 53.1625L1.90665 46.7495C1.59299 46.7236 1.2893 46.6269 1.01852 46.4665C0.747735 46.3061 0.516941 46.0863 0.343569 45.8236C0.170197 45.561 0.0587815 45.2624 0.0177383 44.9503C-0.0233049 44.6383 0.00709757 44.321 0.106649 44.0225L5.70165 27.2425C5.84399 26.816 5.84399 26.3549 5.70165 25.9285L0.109649 9.14846C0.00991395 8.84985 -0.0206308 8.53246 0.0203239 8.22031C0.0612786 7.90815 0.172661 7.60939 0.346051 7.3466C0.519442 7.08382 0.750303 6.86389 1.02118 6.70345C1.29206 6.543 1.59587 6.44624 1.90965 6.42046L78.5446 0.00746259C78.6598 -0.00248753 78.7755 -0.00248753 78.8906 0.00746259L155.529 6.42046C155.842 6.44642 156.146 6.54331 156.417 6.7038C156.688 6.8643 156.918 7.08422 157.092 7.34695C157.265 7.60968 157.376 7.90835 157.418 8.22044C157.459 8.53252 157.428 8.84984 157.329 9.14846L151.735 25.9285C151.592 26.3549 151.592 26.816 151.735 27.2425' fill='%234A1C50'/%3E%3C/svg%3E");
}

.btn-ribbon--marron {
  background-image: url("data:image/svg+xml,%3Csvg width='176' height='60'  viewBox='0 0 158 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151.733 27.2425L157.327 44.0225C157.426 44.321 157.457 44.6383 157.416 44.9503C157.375 45.2624 157.263 45.561 157.09 45.8236C156.916 46.0863 156.686 46.3061 156.415 46.4665C156.144 46.6269 155.84 46.7236 155.527 46.7495L78.8916 53.1625C78.7765 53.1724 78.6608 53.1724 78.5456 53.1625L1.90665 46.7495C1.59299 46.7236 1.2893 46.6269 1.01852 46.4665C0.747735 46.3061 0.516941 46.0863 0.343569 45.8236C0.170197 45.561 0.0587815 45.2624 0.0177383 44.9503C-0.0233049 44.6383 0.00709757 44.321 0.106649 44.0225L5.70165 27.2425C5.84399 26.816 5.84399 26.3549 5.70165 25.9285L0.109649 9.14846C0.00991395 8.84985 -0.0206308 8.53246 0.0203239 8.22031C0.0612786 7.90815 0.172661 7.60939 0.346051 7.3466C0.519442 7.08382 0.750303 6.86389 1.02118 6.70345C1.29206 6.543 1.59587 6.44624 1.90965 6.42046L78.5446 0.00746259C78.6598 -0.00248753 78.7755 -0.00248753 78.8906 0.00746259L155.529 6.42046C155.842 6.44642 156.146 6.54331 156.417 6.7038C156.688 6.8643 156.918 7.08422 157.092 7.34695C157.265 7.60968 157.376 7.90835 157.418 8.22044C157.459 8.53252 157.428 8.84984 157.329 9.14846L151.735 25.9285C151.592 26.3549 151.592 26.816 151.735 27.2425' fill='%23623A25'/%3E%3C/svg%3E");
}

.btn-ribbon--verde {
  background-image: url("data:image/svg+xml,%3Csvg width='220' height='60'  viewBox='0 0 158 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151.733 27.2425L157.327 44.0225C157.426 44.321 157.457 44.6383 157.416 44.9503C157.375 45.2624 157.263 45.561 157.09 45.8236C156.916 46.0863 156.686 46.3061 156.415 46.4665C156.144 46.6269 155.84 46.7236 155.527 46.7495L78.8916 53.1625C78.7765 53.1724 78.6608 53.1724 78.5456 53.1625L1.90665 46.7495C1.59299 46.7236 1.2893 46.6269 1.01852 46.4665C0.747735 46.3061 0.516941 46.0863 0.343569 45.8236C0.170197 45.561 0.0587815 45.2624 0.0177383 44.9503C-0.0233049 44.6383 0.00709757 44.321 0.106649 44.0225L5.70165 27.2425C5.84399 26.816 5.84399 26.3549 5.70165 25.9285L0.109649 9.14846C0.00991395 8.84985 -0.0206308 8.53246 0.0203239 8.22031C0.0612786 7.90815 0.172661 7.60939 0.346051 7.3466C0.519442 7.08382 0.750303 6.86389 1.02118 6.70345C1.29206 6.543 1.59587 6.44624 1.90965 6.42046L78.5446 0.00746259C78.6598 -0.00248753 78.7755 -0.00248753 78.8906 0.00746259L155.529 6.42046C155.842 6.44642 156.146 6.54331 156.417 6.7038C156.688 6.8643 156.918 7.08422 157.092 7.34695C157.265 7.60968 157.376 7.90835 157.418 8.22044C157.459 8.53252 157.428 8.84984 157.329 9.14846L151.735 25.9285C151.592 26.3549 151.592 26.816 151.735 27.2425' fill='%23CAE976'/%3E%3C/svg%3E");
  color: #000000;
}

.btn-ribbon--marron-claro {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='60' viewBox='0 0 176.196 59.506'%3E%3Cpath fill='%23AC6D31' d='M169.815,30.488l6.26,18.78a2.325,2.325,0,0,1-2.012,3.052L88.292,59.5a2.249,2.249,0,0,1-.388,0L2.133,52.32A2.324,2.324,0,0,1,.121,49.268l6.26-18.78a2.322,2.322,0,0,0,0-1.47L.121,10.238A2.325,2.325,0,0,1,2.133,7.185L87.9.008a2.248,2.248,0,0,1,.388,0l85.772,7.177a2.326,2.326,0,0,1,2.012,3.053l-6.26,18.78a2.322,2.322,0,0,0,0,1.47'/%3E%3C/svg%3E");
}

.btn-ribbon--amarillo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='60' viewBox='0 0 176.196 59.506'%3E%3Cpath fill='%23F6BA22' d='M169.815,30.488l6.26,18.78a2.325,2.325,0,0,1-2.012,3.052L88.292,59.5a2.249,2.249,0,0,1-.388,0L2.133,52.32A2.324,2.324,0,0,1,.121,49.268l6.26-18.78a2.322,2.322,0,0,0,0-1.47L.121,10.238A2.325,2.325,0,0,1,2.133,7.185L87.9.008a2.248,2.248,0,0,1,.388,0l85.772,7.177a2.326,2.326,0,0,1,2.012,3.053l-6.26,18.78a2.322,2.322,0,0,0,0,1.47'/%3E%3C/svg%3E");
  color: #525252;
}

.btn-ribbon--naranja {
  background-image: url("data:image/svg+xml,%3Csvg width='176' height='60'  viewBox='0 0 158 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151.733 27.2425L157.327 44.0225C157.426 44.321 157.457 44.6383 157.416 44.9503C157.375 45.2624 157.263 45.561 157.09 45.8236C156.916 46.0863 156.686 46.3061 156.415 46.4665C156.144 46.6269 155.84 46.7236 155.527 46.7495L78.8916 53.1625C78.7765 53.1724 78.6608 53.1724 78.5456 53.1625L1.90665 46.7495C1.59299 46.7236 1.2893 46.6269 1.01852 46.4665C0.747735 46.3061 0.516941 46.0863 0.343569 45.8236C0.170197 45.561 0.0587815 45.2624 0.0177383 44.9503C-0.0233049 44.6383 0.00709757 44.321 0.106649 44.0225L5.70165 27.2425C5.84399 26.816 5.84399 26.3549 5.70165 25.9285L0.109649 9.14846C0.00991395 8.84985 -0.0206308 8.53246 0.0203239 8.22031C0.0612786 7.90815 0.172661 7.60939 0.346051 7.3466C0.519442 7.08382 0.750303 6.86389 1.02118 6.70345C1.29206 6.543 1.59587 6.44624 1.90965 6.42046L78.5446 0.00746259C78.6598 -0.00248753 78.7755 -0.00248753 78.8906 0.00746259L155.529 6.42046C155.842 6.44642 156.146 6.54331 156.417 6.7038C156.688 6.8643 156.918 7.08422 157.092 7.34695C157.265 7.60968 157.376 7.90835 157.418 8.22044C157.459 8.53252 157.428 8.84984 157.329 9.14846L151.735 25.9285C151.592 26.3549 151.592 26.816 151.735 27.2425' fill='%23ED6C41'/%3E%3C/svg%3E");
}

/* Botones redondeados solo en la sección great-creations */
.great-creations .btn-ribbon {
  border-radius: 40px;
  height: 40px !important;
}

.great-creations .btn-ribbon--rosa {
  background-color: var(--color-pink);
  background-image: none;
}

.great-creations .btn-ribbon--rojo {
  background-color: var(--color-rojo);
  background-image: none;
}

.great-creations .btn-ribbon--lila {
  background-color: var(--color-lila);
  background-image: none;
}

.great-creations .btn-ribbon--marron {
  background-color: var(--color-marron);
  background-image: none;
}

.great-creations .btn-ribbon--verde {
  background-color: var(--color-verde);
  background-image: none;
}

.great-creations .btn-ribbon--marron-claro {
  background-color: var(--color-marron-claro);
  background-image: none;
}

.great-creations .btn-ribbon--amarillo {
  background-color: var(--color-golden);
  background-image: none;
}

.great-creations .btn-ribbon--naranja {
  background-color: var(--color-orange);
  background-image: none;
}

.great-creations .btn-ribbon:hover {
  color: var(--color-white) !important;
}

.great-creations .btn-ribbon--verde:hover {
  color: #000000 !important;
}

.great-creations .btn-ribbon--amarillo:hover {
  color: #525252 !important;
}

/* Botones redondeados en la sección segmento */
.segmento .btn-ribbon {
  border-radius: 40px;
  height: 40px !important;
  margin-top: 4rem;
}

.segmento .btn-ribbon--rosa {
  background-color: var(--color-pink);
  background-image: none;

}

.segmento .btn-ribbon--rojo {
  background-color: var(--color-rojo);
  background-image: none;
}

.segmento .btn-ribbon--lila {
  background-color: var(--color-lila);
  background-image: none;
}

.segmento .btn-ribbon--marron {
  background-color: var(--color-marron);
  background-image: none;
}

.segmento .btn-ribbon--verde {
  background-color: var(--color-verde);
  background-image: none;
}

.segmento .btn-ribbon--marron-claro {
  background-color: var(--color-marron-claro);
  background-image: none;
}

.segmento .btn-ribbon--amarillo {
  background-color: var(--color-golden);
  background-image: none;
}

.segmento .btn-ribbon--naranja {
  background-color: var(--color-orange);
  background-image: none;
}

.segmento .btn-ribbon:hover {
  color: var(--color-white) !important;
}

.segmento .btn-ribbon--verde:hover {
  color: #000000 !important;
}

.segmento .btn-ribbon--amarillo:hover {
  color: #525252 !important;
}

.btn-reset {
  all: unset;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  width: auto;
  height: auto;
  display: inline;
}

.btn-reset {
  transition: all 0.3s ease;
}

.btn-reset:hover,
.btn-reset:focus,
.btn-reset:active {
  background: none;
  box-shadow: none;
  outline: none;
  border: none;
  transform: scale(1.02);
}

/* TESTIMONIOS section  */
.testimonial-card {
  display: flex;
  align-items: center;
  background-color: #f4f4f4;
  padding: 30px;
  border-radius: 10px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 30px;
}

.testimonial-content h4 {
  margin-top: 0;
  color: var(--color-primary);
}

/* NOSOTROS section  */
.nosotros {
  padding: 20px;
  background-color: var(--color-black);
  min-height: 30rem;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  position: relative;
}

.nosotros .text-content img {
  margin: 4rem;
}

.nosotros .container-w {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.nosotros .text-content {
  color: var(--color-text-light);
  margin-top: 1rem;
  text-align: center;
}

.nosotros .text-content h2 {
  font-size: 3.2rem;
  font-weight: bold;
}

.nosotros .text-content h5 {
  font-size: 2rem;
  font-weight: 600;
}

.nosotros .text-content p {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: -0.1rem;
}

.nosotros-vector {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  right: 0;
  /* o left: 0; según lo que necesites */
  z-index: 10;
  pointer-events: none;
}

.nosotros-vector img {
  max-width: 20rem;
  height: auto;
  display: block;
}

.p-description {
  display: flex;
  margin: 2rem 11rem;
  flex-direction: column;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.p-description .btn-secondary {
  margin-top: 4rem;
}

/* Quality Tradition Innovation Section */
.quality-section {
  background-color: var(--color-primary);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.quality-section .quality-content h2 {
  font-size: 3em;
  margin-bottom: 10px;
}

.quality-section .quality-content h3 {
  font-size: 1.8em;
  margin-bottom: 15px;
}

.quality-section .quality-content p {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.partner-logos {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.partner-logos img {
  height: 60px;
  /* Adjust logo height */
  filter: brightness(0) invert(1);
  /* Makes logos white for dark background */
}

/* Choose Your Dulce de Leche Section */
.choose-dulce-de-leche {
  padding: 80px 20px;
  background-color: #f8f8f8;
  text-align: center;
}

.choose-dulce-de-leche h2 {
  font-size: 2.8em;
  color: #333;
  margin-bottom: 50px;
}

.segment-options {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.segment-option {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 250px;
  text-align: center;
  transition: transform 0.3s ease;
}

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

.segment-option img {
  width: 100%;
  height: 150px;
  /* Fixed height for consistency */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.segment-option h3 {
  color: var(--color-primary);
  margin-bottom: 15px;
}

/* About Us / Our Factory Section */
.about-us-factory {
  padding: 80px 20px;
  background-color: #fff;
}

.about-us-factory .container {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: flex-start;
}

.factory-image {
  flex: 1;
  min-width: 300px;
}

.factory-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.about-content {
  flex: 2;
  min-width: 400px;
}

.about-content h2 {
  font-size: 2.5em;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.about-content h3 {
  font-size: 1.8em;
  color: #555;
  margin-bottom: 15px;
}

.about-content p {
  margin-bottom: 15px;
}

.product-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.feature-item {
  background-color: #f4f4f4;
  padding: 20px;
  border-left: 5px solid #6a5acd;
  border-radius: 5px;
}

/* Footer Section */
.main-footer {
  background-color: #333;
  color: white;
  padding: 50px 20px;
  text-align: center;
}

.main-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 30px;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
}

.footer-logo img {
  height: 8rem;
}

.footer-links .nav-links {
  flex-direction: column;
  align-items: flex-start;
}

.footer-links .nav-links li {
  margin: 10px 0;
}

.footer-links .nav-links a {
  color: white;
}

.contact-info p {
  margin: 5px 0;
  font-size: 0.9em;
}

.contact-info a {
  color: white;
  text-decoration: none;
}

.social-media {
  margin-top: 20px;
}

.social-icon img {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  filter: brightness(0) invert(1);
  /* Makes icons white */
}

/* FOOTER section  */
.footer {
  color: var(--color-white);
  padding: 4rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.footer-col-1 {
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 8rem;
}

.footer-insta a {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
}

.footer-insta p {
  margin-bottom: 0px;
  margin-left: 0.5rem;
  color: var(--color-white);
}

.footer-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

/* Cada columna */
.footer-col {
  flex: 1 1 250px;
  min-width: 220px;
}

/* Columna combinada (logo + menú) */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
}

.footer-insta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Menú */
.footer-menu {
  list-style: none;
  padding: 0;
  color: var(--color-white);
  margin-bottom: 3rem;
}

.footer-menu li {
  margin-bottom: 8px;
}

.footer-menu a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
}

/* Botones */
.footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-end;
}

/* Información */
.footer-info ul {
  list-style: none;
  padding: 0;
  color: var(--color-text-light);
}

.footer-info li {
  margin-bottom: 8px;
  font-size: 12px;
}

.ellecktra {
  background-color: var(--color-black);
  display: flex;
  color: var(--color-white);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ellecktra p {
  font-size: 11px;
}

.ellecktra-logo {
  height: 36px;
  width: 110px;
  margin: 0 0.8rem;
}

/*
*
*
ROSQUINENSE PAGINA
*
*
 */
.fabrica {
  color: var(--color-dulce);
  position: relative;
  overflow: hidden;
}

.flex-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.fabrica .text-content {
  padding: 6rem;
  padding-left: 0rem;
}

.fabrica .container-w h5 {
  margin-top: 11rem;
}

.fabrica .text-content h2 {
  font-weight: bold;
  font-size: 3rem;
}

.fabrica-relative {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  max-width: 600px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.image-content {
  position: relative;
  padding: 2rem;
}

.image-content img {
  max-width: 600px;
  padding-left: 1rem;
}

.vector-fabrica {
  position: absolute;
  bottom: 82px;
  right: 0px;
  width: 70%;
}

.vector-fabrica img {
  width: 100%;
  height: auto;
  display: block;
}

.esencia .text-content {
  text-align: center;
  padding: 2rem 11rem;
}

.esencia .text-content h2 {
  font-weight: 700;
  font-size: 2.2rem;
  padding: 2rem;
}

.esencia .text-content p {
  margin-bottom: 0;
  font-size: 1.2rem;
}

.tabs-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  margin: 2rem 0;
  position: relative;
  z-index: 1;
}

.tabs-card {
  display: flex;
  flex-direction: column;
  max-width: 20%;
  /* position: relative;
    top: 16rem; */
}

.tabs-card img {
  padding-bottom: 1rem;
}

.bg-white {
  background-color: var(--color-white);
  height: 12rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

/*
*
*
PRODUCTO SECCION
*
*
*/

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

.producto-caracteristicas {
  padding: 0 3rem;
}

.producto-detalles {
  margin-top: 3rem;
  margin-bottom: 3rem;
  color: var(--color-text-light);
  align-items: flex-start;
}

.detalle-item {
  padding: 2rem 4rem !important;
  border-right: 1px solid var(--color-beige);
}

.detalle-item:last-child {
  border-right: none;
}

.detalle-item h5 {
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-text-light);
}

.detalle-item p {
  margin-bottom: 0.8rem;
  color: var(--color-text-light);
}

@media (max-width: 768px) {
  .producto-detalles {
    padding: 0rem;
    margin-top: 50rem;
  }

  .detalle-item {
    padding: 0rem !important;
    border-right: 0px;
    margin-bottom: 3rem;
  }
}

.detalle-pdf {
  padding: 2rem;
}

.detalle-pdf .pdf-icon {
  margin-bottom: 1rem;
}

.descargar-ficha {
  font-weight: 500;
  font-size: 1.1rem;
  margin-right: 8rem;
}

.icono-svg {
  width: 80px;
  height: auto;
}

.producto-descripcion {
  padding: 6rem;
  padding-bottom: 2rem;
}

.galeria-producto {
  padding-bottom: 6rem;
}

.producto-descripcion .text-content h3 {
  font-size: 3rem;
  font-weight: bold;
}

.producto-descripcion .text-content h2 {
  font-size: 3rem;
  font-weight: bolder;
  margin-bottom: 1rem;
}

.producto-descripcion .text-content p {
  margin-bottom: 0rem;
  padding: 0 20rem !important;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .producto-descripcion .text-content p {
    padding: 0 0.5rem !important;
  }

  .producto-descripcion .text-content h3 {
    font-size: 1.7rem;
    font-weight: bold;
  }

  .producto-descripcion .text-content h2 {
    font-size: 1.7rem;
    font-weight: bold;
  }
}

.galeria-producto-container {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  flex-wrap: nowrap;
  padding: 2rem 0;
}

.card-producto {
  flex: 1;
  overflow: hidden;
  border-radius: 2rem;
  transition: all 0.4s ease;
  height: 300px;
  position: relative;
  cursor: pointer;
}

.card-producto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  border-radius: 2rem;
}

/* Cuando una card se expande */
.card-producto.expandida {
  flex: 1 1 100%;
  z-index: 2;
}

.card-producto.expandida img {
  transform: scale(1.02);
}

/* Ocultar las demás */
.card-producto.oculta {
  flex: 0 0 0 !important;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.segmento {
  position: relative;
}

.segmento .text-content p {
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  margin-bottom: 0rem;
}

.segmento .text-content {
  margin: 5rem 0rem;
}

.productos-relacionados .text-content {
  margin: 0 !important;
  margin-bottom: 2rem !important;
}

.segmento .producto-card-galeria .overlay {
  justify-content: flex-start !important;
  padding-top: 5rem !important;
}

.video-banner {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.video-banner video {
  width: -webkit-fill-available;
  display: block;
  margin: 0;
  padding: 0;
}

.productos-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

.producto-card-galeria {
  position: relative;
  width: 100%;
  max-width: 275px;
  aspect-ratio: 1/1.5;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.producto-card-galeria .overlay {
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  align-items: center;
  transition: background-color 0.3s ease;
}

.producto-card-galeria:hover .overlay {
  background-color: rgba(0, 0, 0, 0.25);
}

.producto-card-galeria h4 {
  font-size: 1.6rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.segmento .productos-card-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
}

.segmento .producto-card-galeria {
  width: 230px;
  border-radius: 1rem;
}

.segmento .productos-absolute {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.header-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

.header-producto {
  position: relative;
  overflow: hidden;
}

.header-producto h2 {
  font-size: 3.9rem;
  font-weight: 700;
}

.header-producto p {
  font-size: 2rem;
  font-weight: 500;
  line-height: normal;
}

.header-producto .btn-ribbon {
  font-size: 14px !important;
}

.header-producto .content {
  position: relative;
  z-index: 2;
  color: white;
}

.header-producto .vector-producto img {
  height: auto;
}

.header-producto .vector-producto {
  position: absolute;
  top: auto;
  bottom: 0rem;
  right: 8rem;
  z-index: 5;
  max-width: 40%;
  pointer-events: none;
}

/* Estilos especiales para productos alfajoreros */
.header-producto.alfajorero .content {
  color: var(--color-marron) !important;
}

.header-producto.alfajorero h2,
.header-producto.alfajorero p,
.header-producto.alfajorero .btn-producto-categoria {
  color: var(--color-marron) !important;
}

.header-producto.alfajorero .btn-producto-categoria {
  background-color: rgba(98, 58, 37, 0.2);
  border-color: rgba(98, 58, 37, 0.3);
}

.header-producto.alfajorero .btn-producto-categoria:hover {
  background-color: rgba(98, 58, 37, 0.3);
  color: var(--color-marron) !important;
}

.header-producto.alfajorero .btn-producto-categoria.activo {
  background-color: var(--color-marron);
  color: white !important;
  border-color: var(--color-marron);
}

/* Navbar con estilos alfajorero */
body.alfajorero-page .main-header {
  background: linear-gradient(180deg,
      rgba(255, 206, 84, 0.8) 0%,
      rgba(255, 206, 84, 0.4) 51.92%,
      rgba(255, 206, 84, 0.05) 90.38%,
      rgba(255, 206, 84, 0) 100%);
}

body.alfajorero-page .nav-links a {
  color: var(--color-marron) !important;
}

body.alfajorero-page .nav-links a:hover {
  color: var(--color-marron) !important;
}

body.alfajorero-page .nav-item.has-submenu>a::after {
  background: var(--color-marron);
}

body.alfajorero-page .navbar .btn-primary {
  background-color: var(--color-marron);
  color: var(--color-white) !important;
  border-color: var(--color-marron);
}

body.alfajorero-page .navbar .btn-primary:hover {
  background-color: var(--color-white);
  color: var(--color-marron) !important;
}

.productos-categoria-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.btn-producto-categoria {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 25px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-block;
}

.btn-producto-categoria:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--color-black) !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-producto-categoria.activo {
  background-color: white;
  color: var(--color-black);
  border-color: white;
}

.product-image-container {
  position: relative;
  aspect-ratio: 16 / 9;
  /* o el valor que mejor se vea con tu forma */
  width: 100%;
}

.imagen-mascara {
  width: 1100px;
  height: auto;
  overflow: hidden;
  position: absolute;
  left: -8rem;
  transition: transform 0.8s ease;
}

@media (max-width: 768px) {
  .imagen-mascara {
    width: 100% !important;
    /* Aplicar efecto hover por defecto en móvil */
    transform: rotate(-26deg) scale(1.3) translateX(100px);
  }

  .imagen-mascara img {
    /* Aplicar transformación de imagen por defecto en móvil */
    transform: scale(1.1);
  }

  /* Desactivar hover en móvil para evitar conflictos */
  .product-image-container:hover .imagen-mascara {
    transform: rotate(-26deg) scale(1.3) translateX(100px);
    /* Mantener el estado activo */
  }

  .product-image-container:hover .imagen-mascara img {
    transform: scale(1.1);
    /* Mantener el estado activo */
  }
}

.imagen-mascara img {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-5deg) scale(1.1);
  transition: transform 0.8s ease;
}

/* Hover effect */
.product-image-container:hover .imagen-mascara {
  transform: rotate(-26deg) scale(1.3) translateX(100px);
}

.product-image-container:hover .imagen-mascara img {
  transform: scale(1.1);
}

/* estilos caracteristicas sensoriales */
.container-carac {
  position: absolute;
  top: 40%;
  left: 63%;
  width: auto;
  transition: all 0.4s ease;
  z-index: 2;
  box-shadow: none;
  text-align: left;
  color: var(--color-black);
  background-color: #fffbf2;
  opacity: 1;
  border-radius: 1rem;
  padding: 1rem;
  height: fit-content;
}

.container-carac .btn-ribbon {
  padding: 0.5 0rem;
}

.container-carac h5 {
  font-weight: bold;
}

.container-carac p {
  margin-bottom: 0.5rem;
}

.caract-sensoriales {
  padding-top: 1rem;
}

.container-carac .info-extra {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 1rem;
}

@media (max-width: 768px) {
  .container-carac {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 90%;
    max-width: 360px;
  }

  /* Reducir el espacio para eliminar el gap en blanco */
  .producto-descripcion {
    padding-bottom: 4rem;
    /* Reducido de 12rem a 4rem */
    min-height: auto;
    /* Cambiar de 100vh a auto */
    position: relative;
  }

  #producto-descripcion {
    overflow-x: hidden;
  }

  .parallax-item .hero-vector {
    display: none;
  }

  .producto-descripcion .text-content {
    padding-bottom: 2rem;
  }

  /* Ajustar el contenedor de imagen */
  .product-image-container {
    min-height: 60vh;
    /* Reducido de 80vh a 60vh */
    position: relative;
  }
}

.detalle-pdf {
  margin-bottom: 0rem;
}

.vector-caract {
  position: absolute;
  bottom: 10rem;
  left: -6rem;
  z-index: 2;
}

.vector-caract img {
  height: 50rem;
}

.vector-caract svg {
  height: 50rem;
  width: auto;
}

/* Colores del SVG según el producto */
.vector-color-btn-ribbon--amarillo svg path {
  fill: var(--color-golden);
}

.vector-color-btn-ribbon--rosa svg path {
  fill: var(--color-pink);
}

.vector-color-btn-ribbon--naranja svg path {
  fill: var(--color-orange);
}

.vector-color-btn-ribbon--marron svg path {
  fill: var(--color-marron);
}

.vector-color-btn-ribbon--marron-claro svg path {
  fill: var(--color-marron-claro);
}

.vector-color-btn-ribbon--verde svg path {
  fill: var(--color-verde);
}

.vector-color-btn-ribbon--rojo svg path {
  fill: var(--color-rojo);
}

.vector-color-btn-ribbon--lila svg path {
  fill: var(--color-lila);
}


@media (max-width: 768px) {
  .vector-caract {
    display: none;
  }
}

/* === TABLET STYLES (769px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar {
    padding: 0 15px;
  }

  .navbar .logo img {
    height: 4.5rem;
  }

  .nav-links {
    gap: 1.5rem;
  }

  .nav-links a {
    font-size: 15px;
  }

  .submenu {
    min-width: 180px;
  }

  .submenu-level-2 {
    min-width: 160px;
  }
}

/* === MOBILE STYLES (Max-width 768px) === */
@media (max-width: 768px) {

  /* General */
  body {
    padding: 0;
    font-size: 14px !important;
  }

  .producto-descripcion .container-w {
    padding: 0px;
    padding-bottom: 2rem;
  }

  .header-producto .vector-producto img {
    width: 300px;
  }

  .header-producto .header-bg {
    padding-top: 8rem;
    padding-bottom: 19rem;
  }

  .header-producto .vector-producto {
    right: 13rem;
  }

  .header-producto h2 {
    font-size: 3.5rem;
  }

  /* Navbar */
  .navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  .navbar .logo {
    margin-left: 20px;
  }

  .navbar .logo img {
    height: 4rem;
  }

  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: relative;
    z-index: 1001;
    order: 2;
    margin-right: 20px;
    background: none;
    border: none;
    padding: 0;
  }

  .menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-white);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
  }

  /* Animación del menú hamburguesa activo */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }

  .navbar .btn-primary {
    display: none;
  }

  .btn-primary {
    font-size: 15px;
  }

  /* Estilos del menú abierto mejorados */
  .nav-links {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    /* Asegurar altura mínima completa */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* Asegurar que llegue hasta abajo */
    right: 0;
    /* Asegurar que cubra todo el ancho */
    background-color: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(15px);
    justify-content: flex-start;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 50px;
    /* Padding bottom para dispositivos con notch */
    gap: 1.5rem;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    /* Incluir padding en el tamaño total */
  }

  .nav-links.active {
    transform: translateX(0);
  }

  .nav-links li {
    margin: 8px 0;
    width: 90%;
    max-width: 300px;
    text-align: center;
  }

  .nav-links>li>a {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 12px 20px;
    display: block;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .nav-links>li>a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* Submenús móviles mejorados */
  .nav-item.has-submenu {
    width: 100%;
  }

  .nav-item.has-submenu>a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-item.has-submenu>a::after {
    content: '▼';
    position: absolute;
    right: 20px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    display: none;
    /* Ocultar flecha por defecto */
  }

  .nav-item.has-submenu.submenu-open>a::after {
    transform: rotate(180deg);
  }

  .nav-links .nav-item li {
    min-width: -webkit-fill-available;
  }

  .nav-item.has-submenu .submenu {
    display: block !important;
    /* Mostrar siempre los submenús */
    position: static;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    margin-top: 10px;
    padding: 10px 0;
    width: 100%;
    max-height: none;
    /* Sin límite de altura */
    overflow-y: visible;
    /* Sin scroll necesario */
  }

  .nav-item.has-submenu.submenu-open .submenu {
    display: block;
  }

  .submenu li {
    margin: 2px 0 !important;
    padding: 0 !important;
    text-align: center;
    /* Centrar elementos del submenú */
  }

  .submenu a {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    padding: 8px 20px !important;
    display: block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    text-align: center;
    /* Centrar texto de los enlaces */
  }

  .submenu a:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }

  /* Submenús de segundo nivel en móvil */
  .submenu-category {
    position: relative;
    text-align: center;
    /* Centrar categorías */
  }

  .submenu-level-2 {
    display: none;
    position: static;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 0;
    margin-left: 0;
  }

  .submenu-category.submenu-open .submenu-level-2 {
    display: block;
  }

  .submenu-level-2 a {
    font-size: 1rem !important;
    padding: 6px 25px !important;
    text-align: center;
    /* Centrar elementos de segundo nivel */
  }

  /* Hero Section - Móvil */
  .hero-section {
    text-align: center;
    min-height: 100vh;
    /* Altura completa de viewport */
    height: auto;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 120px 20px 60px 20px;
    /* Restaurar el padding original */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Restaurar space-between */
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Container-w en hero section móvil */
  .hero-section .container-w {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Restaurar space-between */
    align-items: center;
    padding: 0;
    /* Sin padding adicional */
    margin: 0;
    width: 100%;
    max-width: none;
    z-index: 2;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    order: 1;
    margin-bottom: 3rem;
    /* Restaurar el margin original */
    z-index: 3;
    flex-shrink: 0;
  }

  .hero-section h1 {
    font-size: 2.2rem;
    /* Tamaño más controlado */
    line-height: 1.2;
    /* Mejor espaciado de línea */
    margin-bottom: 1.5rem;
    font-weight: bold;
    word-wrap: break-word;
    /* Romper palabras largas si es necesario */
  }

  .hero-section p {
    font-size: 17px;
    margin: 1rem 0 2.5rem 0;
    line-height: 1.4;
    max-width: 90%;
    /* Limitar ancho para mejor lectura */
    margin-left: auto;
    margin-right: auto;
  }

  /* Botones en hero section móvil */
  .hero-section .btn-primary {
    font-size: 16px;
    padding: 12px 24px;
    margin: 1rem 0;
    display: inline-block;
    min-width: 120px;
  }

  .fabrica {
    padding: 1rem;
  }

  .esencia .text-content p {
    font-size: 14px;
  }

  /* Reducir espacios entre secciones en móvil */
  section {
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
    /* Padding uniforme más pequeño */
  }


  section .producto-caracteristicas {
    margin-bottom: 0 !important;
    padding-bottom: 0rem !important;
    /* Padding uniforme más pequeño */
  }

  /* Ajustar container-w para móvil */
  .container-w {
    padding: 1rem 0 !important;
    /* Reducir padding vertical */
  }

  #productos-relacionados {
    padding-top: 0px !important;
  }

  /* Cards Hogar responsive */
  .cards-hogar-section {
    padding: 40px 16px;
  }

  .cards-hogar-section .text-content h2 {
    font-size: 1.8rem;
  }

  .cards-hogar-section .text-content p {
    font-size: 16px;
  }

  .cards-hogar-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .card-hogar {
    min-height: 300px;
    border-radius: 12px;
  }

  .card-content {
    padding: 1.5rem;
  }


  .card-title {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .card-description {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
  }

  .btn-card {
    padding: 10px 20px;
    font-size: 12px;
  }

  /* Dulce de Leche Difference */
  .dulce-de-leche-difference .text-content {
    margin-top: 1rem;
    text-align: center;
  }

  .dulce-de-leche-difference .text-content h5 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
  }

  .dulce-de-leche-difference .text-content h2 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 2rem;
  }

  .dulce-de-leche-difference .text-content p {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
  }

  .historia-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    width: 100%;
  }

  .historia-card {
    width: 100%;
    height: 400px;
    margin: 1rem 0;
    position: relative;
    display: flex;
    overflow: hidden;
  }

  .historia-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  .historia-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .historia-card .card-content {
    opacity: 1;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: transparent;
    z-index: 2;
    text-align: center;
  }

  .historia-card:hover .card-content {
    opacity: 1;
  }

  .title-card {
    font-size: 1.8rem;
    margin: 1rem;
  }

  .historia-vector {
    display: none;
  }

  /* Great Creations (Productos) */
  .great-creations h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .great-creations .container-w .text-content p {
    font-size: 1rem;
  }

  .productos-container {
    flex-direction: column;
    align-items: center;
  }

  .producto-card {
    max-width: 80%;
    margin-bottom: 2rem;
    text-align: center;
  }

  .producto-card img {
    max-width: 100%;
  }

  .producto-bajada {
    min-height: auto;
  }

  /* Nosotros */
  .nosotros {
    min-height: auto;
    height: auto;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .nosotros .text-content h2 {
    font-size: 2.2rem;
  }

  .nosotros .text-content h5 {
    font-size: 1.5rem;
  }

  .nosotros .text-content p {
    font-size: 1rem;
  }

  .nosotros .text-content img {
    margin: 2rem;
    max-width: 200px;
  }

  .p-description {
    margin: 1rem;
  }

  .nosotros-vector {
    display: none;
  }

  /* Footer */
  .footer {
    padding: 2rem 0;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .footer-col {
    min-width: 100%;
    margin-bottom: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .footer-left {
    align-items: center;
    gap: 1rem;
  }

  .footer-logo {
    gap: 1rem;
    align-items: center;
  }

  .footer-menu {
    margin-bottom: 1rem;
  }

  .footer-info ul {
    text-align: center;
  }

  .footer-buttons {
    justify-content: center;
    gap: 10px;
  }

  .footer-buttons .btn-ribbon {
    width: calc(50% - 10px);
    flex-basis: auto;
  }

  .ellecktra {
    flex-direction: column;
    text-align: center;
    padding: 0.5rem;
  }

  /* Segmentos */
  .segmento .container-w {
    padding: 4rem 20px;
    height: auto !important;
    /* Anulamos el valor fijo */
  }

  .segmento .productos-absolute {
    position: static;
    /* Cambiamos a posicionamiento estático */
    transform: none;
    /* Eliminamos la transformación */
    padding: 0;
    width: 100%;
    /* Aseguramos que ocupe todo el ancho */
  }

  .segmento .productos-card-container {
    flex-direction: column;
    /* Apilamos las tarjetas verticalmente */
    gap: 1.5rem;
    align-items: center;
  }

  .segmento .productos-absolute .productos-card-container {
    flex-direction: column;
    /* Apilamos las tarjetas verticalmente */
    gap: 1.5rem;
    align-items: center;
  }

  .segmento .producto-card-galeria {
    width: 100%;
    /* Hacemos que la tarjeta ocupe el ancho completo */
    height: 300px;
    /* Le damos una altura fija para consistencia */
  }

  .segmento .producto-card-galeria .overlay {
    justify-content: center !important;
    /* Centramos el contenido verticalmente */
    padding-top: 0 !important;
  }

  .segmento .text-content {
    margin: 2rem 0rem;
  }

  .segmento .text-content p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

  /*
    * Solución para la sección "Fábrica"
    */
  .fabrica .flex-col {
    flex-direction: column;
    align-items: center;
  }

  .fabrica .text-content {
    padding: 2rem 0;
    /* Reduce el padding en móviles */
    text-align: center;
  }

  .fabrica .text-content h2 {
    font-size: 2rem;
    /* Tamaño de fuente más pequeño */
  }

  .fabrica .container-w h5 {
    margin-top: 2rem;
    /* Reduce el margen superior */
    text-align: center;
  }

  .fabrica .p-fabrica {
    padding: 0;
  }

  .fabrica .image-content {
    padding: 1rem 0;
  }

  .fabrica .image-content img {
    width: 100%;
    height: auto;
    padding: 0;
  }

  .fabrica-relative .vector-fabrica {
    display: none;
    /* Oculta el vector decorativo para ahorrar espacio */
  }

  /*
    * Solución para la sección "Esencia"
    */
  .esencia .text-content {
    padding: 2rem 1rem;
  }

  .producto-descripcion {
    padding: 3rem 1rem;
  }

  .esencia .text-content h2 {
    font-size: 1.8rem;
    padding: 0;
  }

  .tabs-container {
    flex-direction: column;
    /* Apila las tarjetas una encima de la otra */
    align-items: center;
  }

  .tabs-card {
    max-width: 80%;
    /* Ancho ajustado para móviles */
  }
}

/* === EXTRA SMALL MOBILE STYLES (Max-width 480px) === */
@media (max-width: 480px) {
  .navbar {
    padding: 8px 15px;
  }

  .navbar .logo {
    margin-left: 15px;
  }

  .navbar .logo img {
    height: 3.5rem;
  }

  .menu-toggle {
    margin-right: 15px;
    width: 28px;
    height: 22px;
  }

  .menu-toggle span {
    height: 2.5px;
  }

  .nav-links {
    padding-top: 80px;
  }

  .nav-links>li>a {
    font-size: 1.2rem;
    padding: 10px 15px;
  }

  .submenu a {
    font-size: 1rem !important;
    padding: 6px 15px !important;
  }

  .submenu-level-2 a {
    font-size: 0.9rem !important;
    padding: 5px 20px !important;
  }

  /* Hero Section - Pantallas extra pequeñas */
  .hero-section {
    padding: 100px 16px 40px 16px;
    /* Padding más ajustado */
    min-height: 90vh;
    /* Altura un poco menor */
  }

  .hero-section h1 {
    font-size: 1.8rem;
    /* Texto más pequeño para pantallas chicas */
    line-height: 1.1;
    margin-bottom: 1.2rem;
  }

  .hero-section p {
    font-size: 15px;
    margin: 0.8rem 0 2rem 0;
    line-height: 1.3;
    max-width: 95%;
  }

  /* Botones en pantallas extra pequeñas */
  .hero-section .btn-primary {
    font-size: 14px;
    padding: 10px 20px;
    margin: 0.8rem 0;
  }

  .hero-content {
    margin-bottom: 2rem;
    /* Menos espacio */
  }

  .hero-vector {
    display: none;
    /* Mantener oculta la imagen principal */
  }

  .hero-vector img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Segunda imagen en pantallas extra pequeñas */
  .hero-vector-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
@media (prefers-reduced-motion: reduce) {

  .menu-toggle span,
  .nav-links,
  .submenu,
  .submenu-level-2 {
    transition: none !important;
  }
}

/* Focus states for better accessibility */
.menu-toggle:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.nav-links a:focus,
.submenu a:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.2);
}

.form-group {
  margin-bottom: 1.5rem !important;
}

.form-control {
  padding: 0.8rem !important;
  border-radius: 1rem !important;
  height: fit-content !important;
}

#formulario_1 {
  padding: 3rem 0 !important;
}

/* Cards Hogar Section */
.cards-hogar-section {
  padding: 60px 20px;
  background-color: var(--color-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.cards-hogar-section .text-content {
  text-align: center;
  margin: 3rem 0rem;
  color: var(--color-dulce);
}

.cards-hogar-section .text-content h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.cards-hogar-section .text-content p {
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-dulce);
}

.cards-hogar-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 4rem auto 0;
}

.card-hogar {
  position: relative;
  min-height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hogar:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.8) 100%);
}

.card-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  color: white;
  width: 100%;
}

.card-content a:hover {
  color: var(--color-primary) !important;
}

.card-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: white;
  padding-bottom: 1rem;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.card-description {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  opacity: 0.9;
}

.btn-card {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-card:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Cards Negocio Section */
.cards-negocio {
  padding: 60px 20px;
  background-color: var(--color-white);
}

.cards-negocio .text-content {
  text-align: center;
  margin: 3rem 0rem;
  color: var(--color-dulce);
}

.cards-negocio .text-content h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.cards-negocio .text-content p {
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-dulce);
}

.cards-negocio-grid {
  display: flex;
  max-width: 1000px;
  gap: 3rem 2rem;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.card-negocio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-negocio-link {
  text-decoration: none;
  display: block;
  width: 100%;
}

.card-negocio-image {
  transition: transform 0.6s ease;
}

.card-negocio:hover .card-negocio-image {
  transform: translateY(-8px);
}

.card-negocio-image img {
  max-width: 200px;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.card-negocio:hover .card-negocio-image img {
  opacity: 0.7;
}

.card-negocio-overlay {
  position: absolute;
  top: 12rem;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.card-negocio:hover .card-negocio-overlay {
  opacity: 1;
  pointer-events: auto;
}

.btn-ver-mas {
  background-color: var(--color-dulce);
  color: var(--color-white) !important;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(148, 107, 62, 0.3);
}

#productos-relacionados .segmento .text-content {
  margin: 0 !important;
}

.productos-relacionados .btn-ribbon {
  height: 40px !important;
  margin-top: 6rem;
}

.productos-relacionados .p-description {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 3rem;
}

/* Responsive para cards negocio */
@media (max-width: 992px) {
  .cards-negocio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .cards-negocio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .card-negocio-label {
    padding: 0.8rem 1rem;
    min-height: 100px;
    font-size: 0.8rem;
  }

  .card-negocio-label .badge {
    width: 35px;
    height: 35px;
    font-size: 0.75rem;
  }

  .card-negocio-image {
    min-height: 160px;
    padding: 1.5rem 0.5rem 1rem;
  }

  .card-negocio-image img {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .cards-negocio-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .btn-ver-mas {
    font-size: 0.8rem;
  }

  .cards-negocio .text-content h2 {
    font-size: 2rem;
  }
}