/*
Theme Name: Mi Tema El Rey
Theme URI: https://almaceneselrey.com/
Author: Tu Nombre  
Author URI: https://tuweb.com/
Description: Tema personalizado optimizado basado en la identidad visual de Almacenes el Rey. Versión 2.0 con CSS consolidado, mejor performance y accesibilidad mejorada.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-tema-el-rey
Tags: rojo, amarillo, corporativo, personalizado, optimizado, responsive, accesible
*/

/* =====================================================
   FUENTES WEB - CARGA OPTIMIZADA
   ===================================================== */
@font-face {
  font-family: "Black Han Sans";
  src: url("./assets/fonts/BlackHanSans-Accented1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Mejora performance de carga */
}

/* =====================================================
   VARIABLES CSS - SISTEMA DE DISEÑO
   ===================================================== */
:root {
  /* Colores de marca */
  --rojo-rey: #ff0000;
  --amarillo-la-corona: #ffcd00;
  --amarillo-monarca: #ffef00;
  --vino-realeza: #bc0000;
  --cafe-lealtad: #53310b;
  --beige-calidez: #ffedd5;
  --blanco-nobleza: #ffffff;

  /* Tipografías */
  --font-titulares: "Black Han Sans", sans-serif;
  --font-destacados: "Poppins", sans-serif;
  --font-parrafos: "Poppins", sans-serif;
  --font-alternativa: "Montserrat", sans-serif;

  /* Breakpoints para media queries */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1170px;
  --breakpoint-large: 1400px;

  /* Espaciado y dimensiones */
  --navbar-height: 78px;
  --navbar-height-admin: 110px;
  --border-radius-base: 8px;
  --box-shadow-base: 0 4px 18px -4px rgba(0, 0, 0, 0.18);
}

/* Clases para usar la fuente Black Han Sans */
.black-han-sans {
  font-family: "Black Han Sans", sans-serif !important;
}

.titulo-blackhan {
  font-family: "Black Han Sans", sans-serif !important;
  font-weight: normal;
  color: var(--rojo-rey);
}

.titulo-blackhan-amarillo {
  font-family: "Black Han Sans", sans-serif !important;
  font-weight: normal;
  color: var(--amarillo-la-corona);
}

.titulo-blackhan-blanco {
  font-family: "Black Han Sans", sans-serif !important;
  font-weight: normal;
  color: var(--blanco-nobleza);
}

.texto-blackhan-grande {
  font-family: "Black Han Sans", sans-serif !important;
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.2;
}

.texto-blackhan-mediano {
  font-family: "Black Han Sans", sans-serif !important;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.3;
}

.texto-blackhan-pequeno {
  font-family: "Black Han Sans", sans-serif !important;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.4;
}

html,
body {
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-parrafos);
  background-color: var(--blanco-nobleza);
  color: var(--cafe-lealtad);
}

/* Hero section sin margin-top */
.hero-somos-elrey {
  margin-top: 0;
}

/* Front-page específico: el carousel fluye naturalmente después del header estático */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-titulares);
  color: var(--rojo-rey);
}

strong,
b,
.destacado {
  font-family: var(--font-destacados);
  color: var(--amarillo-la-corona);
}

.alt-web {
  font-family: var(--font-alternativa);
}

/* Ejemplo de uso de colores asociados */
.bg-rojo-rey {
  background-color: var(--rojo-rey);
  color: var(--blanco-nobleza);
}
.bg-amarillo-la-corona {
  background-color: var(--amarillo-la-corona);
  color: var(--cafe-lealtad);
}
.bg-amarillo-monarca {
  background-color: var(--amarillo-monarca);
  color: var(--cafe-lealtad);
}
.bg-vino-realeza {
  background-color: var(--vino-realeza);
  color: var(--blanco-nobleza);
}
.bg-cafe-lealtad {
  background-color: var(--cafe-lealtad);
  color: var(--blanco-nobleza);
}
.bg-beige-calidez {
  background-color: var(--beige-calidez);
  color: var(--cafe-lealtad);
}
.bg-blanco-nobleza {
  background-color: var(--blanco-nobleza);
  color: var(--cafe-lealtad);
}

/* Botones con colores de marca */
.btn-primary {
  background-color: var(--rojo-rey);
  border-color: var(--rojo-rey);
  color: var(--blanco-nobleza);
}

.btn-primary:hover {
  background-color: var(--vino-realeza);
  border-color: var(--vino-realeza);
  color: var(--blanco-nobleza);
}

.btn-secondary {
  background-color: var(--amarillo-la-corona);
  border-color: var(--amarillo-la-corona);
  color: var(--cafe-lealtad);
}

.btn-secondary:hover {
  background-color: var(--amarillo-monarca);
  border-color: var(--amarillo-monarca);
  color: var(--cafe-lealtad);
}

/* ===================================================
   NAVBAR COMPLETO - ALMACENES EL REY
   Todos los estilos del navbar consolidados
   =================================================== */

/* === ESTILOS BASE DEL NAVBAR === */

/* Contenedor principal del navbar */
.navbar-custom {
  display: none !important; /* Ocultar navbar antiguo cuando se usa el header moderno */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--amarillo-la-corona);
  box-shadow: var(--box-shadow-base);
  z-index: 999998;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Contenedor interno del navbar */
.navbar-custom .navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 0.7rem 2rem;
  min-height: 70px;
  box-sizing: border-box;
}

/* === ELEMENTOS DEL NAVBAR === */

/* Logo */
.navbar-custom .navbar-logo {
  flex: 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 70px;
  padding: 0;
}

.navbar-custom .navbar-brand-custom {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s ease;
  color: var(--rojo-rey, #ff0000);
  font-weight: bold;
  font-size: 1.5rem;
}

.navbar-custom .navbar-brand-custom:hover,
.navbar-custom .navbar-brand-custom:focus-visible {
  opacity: 0.8;
  outline: 2px solid var(--cafe-lealtad);
  outline-offset: 2px;
  border-radius: 4px;
  color: var(--rojo-rey, #ff0000);
  text-decoration: none;
}

/* Menú principal */
.navbar-custom .navbar-menu {
  display: flex;
  align-items: center;
  justify-content: center; /* Centrado */
  flex: 0 0 76%; /* Aumentado para dar más espacio al menú */
  height: 70px;
}

.navbar-custom .navbar-nav-custom {
  display: flex;
  flex-direction: row;
  gap: 0; /* Sin espacio entre elementos del menú */
  justify-content: center; /* Centrado */
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-custom .navbar-nav-custom .nav-item {
  position: relative;
}

.navbar-custom .navbar-nav-custom .nav-link {
  display: inline-block;
  padding: 0.8rem 0.2rem; /* Padding mínimo - solo una pequeña división */
  color: var(--cafe-lealtad);
  background: transparent;
  font-family: var(--font-destacados);
  font-size: 0.95rem; /* Ligeramente más pequeño */
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--border-radius-base);
  transition: all 0.3s ease;
  position: relative;
}

/* Estados de hover y focus para enlaces */
.navbar-custom .navbar-nav-custom .nav-link:hover,
.navbar-custom .navbar-nav-custom .nav-link:focus-visible,
.navbar-custom .navbar-nav-custom .nav-link:focus {
  background: transparent;
  color: var(--cafe-lealtad);
  border-bottom: 3px solid var(--cafe-lealtad);
  outline: none;
  text-decoration: none;
  transform: none;
  box-shadow: none;
  padding-bottom: calc(0.8rem - 3px);
}

.navbar-custom .navbar-nav-custom .nav-link:visited,
.navbar-custom .navbar-nav-custom .nav-link:active {
  color: var(--cafe-lealtad);
  background: transparent;
}

.navbar-custom .navbar-nav-custom .nav-item.active .nav-link,
.navbar-custom .navbar-nav-custom .nav-link.active {
  color: var(--rojo-rey);
  background: transparent;
  position: relative;
  border-radius: 4px;
}

/* Indicador visual para elemento activo */
.navbar-custom .navbar-nav-custom .nav-item.active .nav-link::after,
.navbar-custom .navbar-nav-custom .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: var(--rojo-rey);
  border-radius: 2px;
}

/* Botón compra en línea */
.navbar-custom .navbar-btn {
  flex: 0 0 12%; /* Reducido para dar más espacio al menú */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 70px;
}

.navbar-custom .btn-compra-en-linea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.8rem; /* Reducido el padding */
  background: var(--rojo-rey, #ff0000);
  color: var(--amarillo-la-corona);
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: 900;
  font-size: 1.1rem; /* Ligeramente más pequeño */
  text-decoration: none;
  border-radius: 0.8rem;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  border: none;
  box-shadow: 4px 6px 16px 0 rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  outline: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.navbar-custom .btn-compra-en-linea:hover,
.navbar-custom .btn-compra-en-linea:focus-visible,
.navbar-custom .btn-compra-en-linea:focus {
  background: var(--vino-realeza);
  color: var(--amarillo-la-corona);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  outline: none;
  text-decoration: none;
  transform: none;
}

/* === BOTÓN HAMBURGUESA === */
.navbar-custom .navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  position: relative;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus-visible {
  background-color: rgba(83, 49, 11, 0.1);
  outline: none;
}

/* SOLUCIÓN DIRECTA: Cuando el menú está cerrado, NO aplicar fondo */
.navbar-custom .navbar-toggle[aria-expanded="false"] {
  background-color: transparent !important;
}

/* Eliminar fondo cuando no está en hover ni focus */
.navbar-custom .navbar-toggle:not(:hover):not(:focus-visible):not(:focus) {
  background-color: transparent !important;
}

/* Forzar transparencia cuando el menú está cerrado */
.navbar-custom .navbar-toggle[aria-expanded="false"]:not(:hover) {
  background-color: transparent !important;
}

/* Clase para forzar sin foco temporalmente */
.navbar-custom .navbar-toggle.force-no-focus {
  background-color: transparent !important;
}

.navbar-toggle-icon {
  display: block;
  width: 1.5rem;
  height: 0.15rem;
  background: var(--cafe-lealtad);
  position: relative;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 0.15rem;
  background: var(--cafe-lealtad);
  position: absolute;
  left: 0;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.navbar-toggle-icon::before {
  top: -0.5rem;
}

.navbar-toggle-icon::after {
  top: 0.5rem;
}

/* Animación del botón hamburguesa cuando está activo */
.navbar-toggle[aria-expanded="true"] .navbar-toggle-icon {
  background: transparent;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* === ACCESIBILIDAD === */

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999999;
  padding: 8px 16px;
  background: var(--cafe-lealtad);
  color: var(--blanco-nobleza, #ffffff);
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus {
  left: 6px;
  top: 7px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bootstrap dropdown compatibility */
.dropdown-menu {
  background-color: var(--amarillo-la-corona);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
  color: var(--cafe-lealtad);
  font-family: var(--font-destacados);
}

.dropdown-item:hover {
  background-color: var(--rojo-rey);
  color: var(--blanco-nobleza);
}

/* Contenedor principal */
.site-main {
  min-height: 60vh;
  padding: 2rem 0;
}

/* === FOOTER MODERNO COMPACTO === */
.footer-modern {
  background: var(--rojo-rey);
  color: var(--blanco-nobleza);
  padding: 0.75rem 0;
  margin: 0;
}

/* === RESPONSIVE DESIGN NAVBAR === */

/* Desktop grande (1400px+) */
@media (min-width: 1400px) {
  .navbar-custom .navbar-inner {
    padding: 0.7rem 3rem;
  }

  .navbar-custom .navbar-nav-custom {
    gap: 0; /* Sin espacio entre elementos del menú */
  }
}

/* Tablet y móvil */
@media (max-width: 1170px) {
  /* Front-page responsive */
  .page-template-front-page body,
  .home body {
    padding-top: 0 !important;
  }
  
  /* Eliminado: margin-top negativo del carousel ya no es necesario con header static */

  /* Reorganizar layout */
  .navbar-custom .navbar-inner {
    padding: 0.5rem 1rem;
    flex-direction: row;
    justify-content: space-between;
  }

  .navbar-custom .navbar-logo {
    flex: 0 0 30%;
    justify-content: flex-start;
    order: 1;
  }

  .navbar-custom .navbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40%;
    order: 2;
  }

  .navbar-custom .navbar-btn {
    flex: 0 0 30%;
    justify-content: flex-end;
    order: 3;
  }

  /* Ocultar menú por defecto */
  .navbar-custom .navbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--amarillo-la-corona);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(83, 49, 11, 0.2);
    z-index: 999999;
    order: 4;
    width: 100%;
  }

  .navbar-custom .navbar-menu.open {
    display: block;
    animation: slideDown 0.3s ease-out;
    background: var(--amarillo-la-corona);
  }

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

  .navbar-custom .navbar-nav-custom {
    flex-direction: column;
    gap: 0; /* Sin espacio entre elementos del menú móvil */
    padding: 1rem;
    width: 100%;
    background: var(--amarillo-la-corona);
  }

  .navbar-custom .navbar-nav-custom .nav-item {
    width: 100%;
    text-align: center;
    background: transparent;
  }

  .navbar-custom .navbar-nav-custom .nav-link {
    display: block;
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    margin: 0.2rem 0;
    box-sizing: border-box;
    background: transparent;
    color: var(--cafe-lealtad);
    font-family: var(--font-destacados);
  }

  .navbar-custom .navbar-nav-custom .nav-link:hover {
    background-color: rgba(83, 49, 11, 0.1);
    color: var(--cafe-lealtad);
    transform: none;
  }

  /* Elemento activo en móvil */
  .navbar-custom .navbar-nav-custom .nav-item.active .nav-link,
  .navbar-custom .navbar-nav-custom .nav-link.active {
    background-color: var(--rojo-rey) !important;
    color: var(--amarillo-la-corona) !important;
    border: 2px solid var(--amarillo-la-corona);
  }

  .navbar-custom .btn-compra-en-linea {
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .navbar-custom .navbar-inner {
    padding: 0.4rem 0.8rem;
  }

  .navbar-custom .navbar-logo {
    flex: 0 0 35%;
  }

  .navbar-custom .navbar-toggle {
    flex: 0 0 30%;
  }

  .navbar-custom .navbar-btn {
    flex: 0 0 35%;
  }

  .navbar-custom .btn-compra-en-linea {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  .navbar-custom .navbar-inner {
    padding: 0.3rem 0.5rem;
    min-height: 68px;
    /* Reducir padding en pantallas muy pequeñas */
    padding: clamp(0.2rem, 1.5vw, 0.3rem) clamp(0.3rem, 2vw, 0.5rem);
  }

  .navbar-custom .navbar-logo {
    flex: 0 0 40%;
  }

  .navbar-custom .navbar-toggle {
    flex: 0 0 20%;
  }

  .navbar-custom .navbar-btn {
    flex: 0 0 38%;
    /* Asegurar que el contenido no se desborde */
    min-width: 0;
    overflow: hidden;
    /* Eliminar espacio a la izquierda */
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .navbar-custom .btn-compra-en-linea {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    /* Hacer el botón más flexible para pantallas muy pequeñas */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Si el texto es muy largo, usar padding más pequeño automáticamente */
    padding: clamp(0.3rem, 2vw, 0.5rem) clamp(0.3rem, 2.5vw, 1rem);
    font-size: clamp(0.55rem, 2.2vw, 0.8rem);
    /* Eliminar cualquier margen que pueda crear espacio */
    margin: 0;
    margin-left: auto;
    /* Asegurar que nunca se salga del contenedor */
    box-sizing: border-box;
    max-width: calc(100% - 0.2rem);
  }

  .navbar-custom .navbar-nav-custom .nav-link {
    font-size: 0.95rem;
    padding: 0.8rem;
  }
}

/* ===================================================
   ANIMACIONES Y EFECTOS MODERNOS
   ===================================================*/

/* === KEYFRAMES Y ANIMACIONES BASE === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* === CLASES DE ANIMACIÓN === */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
  opacity: 0;
}

.fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
  opacity: 0;
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.slide-up {
  animation: slideUp 1s ease-out forwards;
  opacity: 0;
}

.bounce-in {
  animation: bounceIn 0.8s ease-out forwards;
  opacity: 0;
}

/* Delays para animaciones escalonadas */
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-600 {
  animation-delay: 0.6s;
}

/* ===================================================
   MODERN CAROUSEL STYLES
   ===================================================== */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--negro);
  margin-top: 0;
}

.carousel-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
  flex: 0 0 100%;
  position: relative;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  pointer-events: none;
}

.carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: var(--rojo-rey);
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: all;
  backdrop-filter: blur(4px);
}

.carousel-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

.carousel-indicators {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
}

.indicator {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}

/* === CARRUSEL RESPONSIVE HEIGHTS === */
/* Pantallas grandes - carrusel más prominente */
@media (min-width: 1400px) {
  .hero-carousel {
    height: 80vh;
    min-height: 600px;
  }
}

/* Tablets grandes */
@media (min-width: 1025px) and (max-width: 1399px) {
  .hero-carousel {
    height: 75vh;
    min-height: 500px;
  }
}

/* ===================================================
   MODERN ANIMATION SYSTEM
   ===================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-up"].animate-in {
  animation: fadeInUp 0.8s ease-out forwards;
}

[data-animate="slide-right"].animate-in {
  animation: fadeInLeft 0.8s ease-out forwards;
}

[data-animate="slide-left"].animate-in {
  animation: fadeInRight 0.8s ease-out forwards;
}

/* Stagger animations */
[data-animate="stagger"] .value-card,
[data-animate="stagger"] .brand-card,
[data-animate="stagger"] .news-card,
[data-animate="stagger-left"] .value-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate="stagger"] .value-card.animate-in,
[data-animate="stagger"] .brand-card.animate-in,
[data-animate="stagger"] .news-card.animate-in,
[data-animate="stagger-left"] .value-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   MODERN BUTTON SYSTEM
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: "Black Han Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn--primary {
  background: #ff0000;
  color: white;
}

.btn--primary:hover {
  background: var(--vino-realeza);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
}

.btn--secondary {
  background: var(--amarillo-la-corona);
  color: var(--negro);
}

.btn--secondary:hover {
  background: var(--amarillo-monarca);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
}

.btn--outline {
  background: transparent;
  color: var(--rojo-rey);
  border: 2px solid var(--rojo-rey);
}

.btn--outline:hover {
  background: var(--rojo-rey);
  color: white;
}

.btn--text {
  background: transparent;
  color: var(--rojo-rey);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn--text:hover {
  color: var(--vino-realeza);
}

.btn__icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.btn:hover .btn__icon {
  transform: translateX(4px);
}

/* === EFECTOS HOVER MEJORADOS === */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

/* === MEJORAS DE PERFORMANCE === */

/* Hint de transformaciones para GPU */
.navbar-custom .navbar-nav-custom .nav-link,
.navbar-custom .btn-compra-en-linea,
.valor-card,
.marca-logo,
.noticia-card,
.hero-bg-img,
.btn-reclutamiento,
.btn-marca {
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transform: translateZ(0);
}

/* === MODO REDUCIDO DE MOVIMIENTO === */
@media (prefers-reduced-motion: reduce) {
  .navbar-custom .navbar-nav-custom .nav-link,
  .navbar-custom .btn-compra-en-linea,
  .navbar-toggle-icon,
  .navbar-toggle-icon::before,
  .navbar-toggle-icon::after,
  .valor-card,
  .marca-logo,
  .noticia-card,
  .btn-marca,
  .btn-reclutamiento,
  .hero-bg-img,
  .navbar-toggle-icon::before,
  .navbar-toggle-icon::after,
  .marca-logo::before,
  .btn-marca::before,
  .btn-reclutamiento::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .navbar-custom .navbar-menu.open {
    animation: none;
  }

  .fade-in-up,
  .fade-in-left,
  .fade-in-right,
  .fade-in,
  .slide-up,
  .bounce-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* === MODO ALTO CONTRASTE === */
@media (prefers-contrast: high) {
  .navbar-custom {
    border-bottom-width: 3px;
  }

  .navbar-custom .navbar-nav-custom .nav-link:hover,
  .navbar-custom .navbar-nav-custom .nav-link:focus-visible {
    outline: 3px solid var(--vino-realeza);
    outline-offset: 3px;
  }
}

/* ===================================================
   HERO SOMOS EL REY STYLES
   ===================================================== */

.hero-somos-elrey {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.hero-background {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.hero-bg-img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(139, 69, 19, 0.7) 0%,
    rgba(139, 69, 19, 0.5) 25%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* === RESPONSIVE HERO SOMOS EL REY === */
@media (max-width: 1600px) {
  .hero-somos-elrey {
    height: 50vh;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 1200px) {
  .hero-somos-elrey {
    height: 45vh;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
  .hero-somos-elrey {
    height: 40vh;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .hero-somos-elrey {
    height: 35vh;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
}

/* Estilos del botón hamburguesa ya definidos en la sección del navbar */

/* === Sección Nuestros Valores (estilo igual a referencia) === */
.valores-section {
  width: 100vw; /* Tomar todo el ancho del viewport */
  max-width: 100vw; /* Prevenir overflow horizontal */
  margin: 0; /* Sin márgenes */
  background: url("../mi-tema-el-rey/assets/Corona-Patron.svg") no-repeat;
  background-size: 3000px auto;
  background-position: -1000px 10%;
  padding: 0; /* Sin padding */
  display: flex;
  align-items: center;
  min-height: 80vh;
  justify-content: center;
  overflow-x: hidden;
  box-sizing: border-box; /* Incluir padding en el width */
}
.valores-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100%; /* Tomar todo el ancho disponible */
  margin: 0; /* Sin márgenes */
  box-sizing: border-box;
  gap: 0; /* Sin espacio entre columnas */
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  padding: 0; /* Sin padding lateral */
}

.valores-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35vh;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Permitir encogimiento en flexbox */
  box-sizing: border-box;
}

/* Columna de texto - 35% del espacio */
/* Columna de texto - 35% del espacio */
.valores-col-bg {
  flex: 0 0 35%; /* 35% del ancho */
  color: var(--cafe-lealtad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem, 3vw, 3rem); /* Padding interno responsivo */
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}

/* Columna de cards - 65% del espacio */
.valores-col-cards {
  flex: 0 0 65%; /* 65% del ancho */
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Permitir encogimiento */
  box-sizing: border-box;
  overflow: hidden; /* Prevenir desbordamiento */
}

.valores-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  max-width: 100%; /* Sin restricción de ancho máximo */
  width: 100%;
}
.valores-title {
  font-family: var(--font-titulares);
  font-size: 2.4rem;
  color: var(--cafe-lealtad);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.valores-text {
  font-family: var(--font-parrafos);
  font-size: 1.5rem;
  color: var(--cafe-lealtad);
  margin: 0;
  font-weight: 400;
}
.valores-col-cards {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Permitir encogimiento */
  box-sizing: border-box;
  overflow: hidden; /* Prevenir desbordamiento */
}

.valores-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2.5rem); /* Gap más generoso */
  width: 100%;
  max-width: 100%; /* Tomar todo el ancho disponible */
  padding: 0; /* Sin padding */
  box-sizing: border-box; /* Incluir padding en width */
  overflow: hidden; /* Prevenir desbordamiento */
}
.valor-card {
  background: none;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  text-align: center;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%; /* Asegurar que ocupe todo el espacio disponible */
  max-width: 100%; /* No exceder el contenedor */
  min-width: 0; /* Permitir encogimiento */
  box-sizing: border-box; /* Incluir padding/border en el width */
  transform: translateY(0);
}

.valor-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.valor-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  margin: 0;
  display: block;
  filter: brightness(0.85);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%; /* Prevenir desbordamiento */
  box-sizing: border-box; /* Incluir bordes en el cálculo */
}

.valor-card:hover img {
  filter: brightness(1.05) saturate(1.1);
  transform: scale(1.05);
}
.valor-card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-titulares);
  font-size: 2.1rem;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 0 #000;
  width: 90%;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

/* === RESPONSIVE VALORES SECTION === */
@media (max-width: 768px) {
  .valores-section {
    background: none; /* Sin background en móvil */
    padding: 0.5rem 0; /* Padding consistente de 0.5rem */
  }

  .valores-container {
    flex-direction: column;
    gap: 0; /* Sin espacio entre columnas en móvil */
    padding: 0.5rem; /* Padding consistente de 0.5rem */
  }

  .valores-col {
    max-width: 100%;
    width: 100%;
  }

  .valores-col-bg {
    background: url("../mi-tema-el-rey/assets/Corona-Patron.svg") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: local;
  }

  .valores-cards {
    max-width: 100%; /* Tomar todo el ancho en móvil */
    grid-template-columns: 1fr; /* Una sola columna */
    gap: clamp(1rem, 4vw, 2rem); /* Gap más generoso entre cards */
    padding: 0.5rem; /* Padding consistente de 0.5rem */
  }

  .valor-card {
    width: 90vw; /* 90% del viewport width */
    height: 91vw; /* Altura proporcional para 0.99:1 */
    max-width: 90vw;
    max-height: 91vw;
    min-width: auto;
    min-height: auto;
    margin: 0 auto; /* Centrar la tarjeta */
  }

  .valores-content {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .valores-cards {
    max-width: 100%; /* Todo el ancho en móviles pequeños */
    gap: clamp(0.3rem, 2vw, 1rem);
    padding: 0; /* Sin padding */
  }

  .valor-card {
    border-radius: 8px;
  }

  .valor-card img {
    border-radius: 8px;
  }
}

/* === Fin sección Nuestros Valores === */

/* Título de Nuestros Valores en Black Han Sans */
.valores-title {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif !important;
  font-size: 2.1rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--cafe-lealtad);
  margin-bottom: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.valores-title,
.marcas-title {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-size: clamp(1.2rem, 3vw, 2.1rem); /* Responsive fluid typography */
  font-weight: 400;
  color: var(--cafe-lealtad);
  margin-bottom: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.marcas-section .valores-title {
  margin-bottom: 0.8rem;
}
@media (max-width: 1200px) {
  .valores-cards {
    max-width: 98vw;
    gap: 1.5rem;
  }
  .valores-title {
    font-size: 2.1rem;
  }
}
@media (max-width: 900px) {
  .valores-section {
    min-height: 50vh;
    padding: 1.5rem 0;
    background: none; /* Sin background en móvil */
  }
  .valores-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0; /* Sin espacio entre columnas */
  }

  .valores-col-bg {
    background: url("../mi-tema-el-rey/assets/Corona-Patron.svg") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: local;
  }

  .valores-cards {
    max-width: 98vw;
    grid-template-columns: 1fr; /* Una sola columna */
    gap: clamp(1rem, 3vw, 1.8rem); /* Gap generoso */
    padding: 1.5rem 1rem; /* Más padding para respirar */
  }
  .valor-card {
    width: 90vw; /* 90% del viewport width */
    height: 91vw; /* Altura proporcional para 0.99:1 */
    max-width: 90vw;
    max-height: 91vw;
    min-width: auto;
    min-height: auto;
    margin: 0 auto; /* Centrar la tarjeta */
  }
  .valores-content {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 98vw;
  }
  .valores-title {
    font-size: 1.3rem;
    white-space: normal;
  }
  .valores-text {
    font-size: 1rem;
  }
}
@media (min-width: 1920px) {
  .valores-title {
    font-size: 3.1rem;
  }
  .valores-text {
    font-size: 1.7rem;
  }
}
/* === Fin ajustes sección Nuestros Valores === */
@media (max-width: 600px) {
  .valores-section {
    max-width: 100vw;
    padding: 1rem 0;
    min-height: unset;
    margin-left: 0;
    background: none; /* Sin background en móvil */
  }
  .valores-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0; /* Sin espacio entre columnas */
    max-width: 100vw;
    padding: 0 1rem;
  }

  .valores-col-bg {
    background: url("../mi-tema-el-rey/assets/Corona-Patron.svg") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: local;
  }
  .valores-cards {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: clamp(1rem, 4vw, 1.5rem); /* Gap responsivo */
    padding: 1.5rem 0.5rem; /* Padding ajustado */
    max-width: 100%;
  }
  .valor-card {
    width: 90vw; /* 90% del viewport width */
    height: 91vw; /* Altura proporcional para 0.99:1 */
    max-width: 90vw;
    max-height: 91vw;
    min-width: auto;
    min-height: auto;
    margin: 0 auto; /* Centrar la tarjeta */
  }
  .valores-content {
    padding: 1rem;
    text-align: center;
  }
  .valores-title {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }
  .valores-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .valores-section {
    padding: 0.8rem 0;
    background: none; /* Sin background en móvil */
  }
  .valores-container {
    gap: 0; /* Sin espacio entre columnas */
    padding: 0 0.5rem;
  }

  .valores-col-bg {
    background: url("../mi-tema-el-rey/assets/Corona-Patron.svg") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: local;
  }

  .valores-cards {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: clamp(0.8rem, 3vw, 1.2rem); /* Gap más compacto pero elegante */
    padding: 1rem 0.5rem; /* Padding mínimo pero suficiente */
  }
  .valor-card {
    width: 90vw; /* 90% del viewport width */
    height: 91vw; /* Altura proporcional para 0.99:1 */
    max-width: 90vw;
    max-height: 91vw;
    min-width: auto;
    min-height: auto;
    margin: 0 auto; /* Centrar la tarjeta */
  }
  .valores-content {
    padding: 0.8rem;
  }
  .valores-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  .valores-text {
    font-size: 0.85rem;
    line-height: 1.3;
  }
}
/* === Fin sección Nuestros Valores === */

/* === Sección Marcas === */
.marcas-section {
  width: 100%;
  background: var(--amarillo-la-corona);
  padding: 5rem 0 5rem 0;
  display: flex;
  justify-content: center;
  min-height: 50vh;
}

/* NUEVA SECCIÓN PERSONALIZADA DE MARCAS */
.marcas-custom-section {
  width: 100%;
  background: #fff;
  padding: 5rem 0 5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}
.marcas-custom-container {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 2rem;
}
.marcas-custom-text {
  flex: 0 0 auto;
  max-width: 40%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  padding-right: 1rem;
}
.marcas-custom-title-red {
  font-family: "Black Han Sans", sans-serif;
  color: #ff0000;
  font-size: 4rem;
  margin-bottom: 0;
  line-height: 1;
  text-align: left;
  width: 100%;
}
.marcas-custom-title-brown {
  font-family: "Black Han Sans", sans-serif;
  color: var(--cafe-lealtad);
  font-size: 4rem;
  margin-top: 0;
  margin-bottom: 2rem;
  line-height: 1;
  text-align: left;
  width: 100%;
}
.marcas-custom-desc {
  font-size: 2rem;
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
  line-height: 1.4;
  margin-bottom: 0;
  width: 100%;
  text-align: left;
}
.marcas-custom-img-col {
  flex: 1 1 0;
  max-width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marcas-custom-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 400px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  object-fit: contain;
}
@media (max-width: 1100px) {
  .marcas-custom-container {
    flex-direction: column;
    padding: 0 1rem;
  }
  .marcas-custom-text,
  .marcas-custom-img-col {
    max-width: 100%;
    width: 100%;
  }
  .marcas-custom-text {
    max-width: 100%;
    width: 100%;
    padding-right: 0;
    margin-bottom: 1rem;
    align-items: center;
  }
  .marcas-custom-title-red,
  .marcas-custom-title-brown,
  .marcas-custom-desc {
    text-align: center;
  }
  .marcas-custom-img {
    width: auto;
    max-width: 90vw;
    max-height: 300px;
    object-fit: contain;
  }
  .marcas-custom-title-red,
  .marcas-custom-title-brown {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
  }
  .marcas-custom-desc {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    line-height: 1.5;
  }
}

/* Mejoras adicionales para tablets */
@media (max-width: 768px) and (min-width: 481px) {
  .marcas-custom-text {
    max-width: 80%;
    width: 80%;
    padding: 1rem;
  }
  .marcas-custom-title-red,
  .marcas-custom-title-brown {
    font-size: clamp(1.6rem, 5vw, 2rem);
  }
  .marcas-custom-desc {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
  }
}

.marcas-container {
  width: 90%;
  max-width: 1900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 0 5%;
}

.marcas-title,
.marcas-desc,
.marcas-row {
  align-self: flex-start;
  text-align: left;
}

.marcas-logos {
  justify-content: flex-start;
}

.marcas-desc {
  font-family: var(--font-parrafos);
  font-size: 1.5rem;
  color: var(--cafe-lealtad);
  margin: 0;
  font-weight: 400;
}

.marcas-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  margin-bottom: 2.5rem;
}

.marcas-logos {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  flex: 1;
}

.marca-logo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
}

.marca-logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.marca-logo:hover::before {
  opacity: 1;
}

.marca-logo:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.marca-logo img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.btn-marca {
  background: #ff0000;
  color: #fff;
  font-family: "Montserrat", var(--font-destacados), sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 0.7rem;
  padding: 1.1rem 2.5rem;
  text-decoration: none;
  box-shadow: 4px 6px 16px 0 rgba(0, 0, 0, 0.18);
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-marca::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn-marca:hover::before {
  left: 100%;
}

.btn-marca:hover {
  background: var(--vino-realeza);
  color: var(--amarillo-la-corona);
  transform: translateY(-3px);
  box-shadow: 6px 12px 24px 0 rgba(0, 0, 0, 0.3);
}
.btn-marca .arrow {
  font-size: 1.5rem;
  margin-left: 0.7rem;
  vertical-align: middle;
  color: var(--amarillo-la-corona);
}

/* Responsive */
@media (max-width: 1100px) {
  .marcas-row {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
  }
  .marcas-logos {
    gap: 1.5rem;
    justify-content: flex-start;
    flex: 1;
  }
  .marca-logo {
    width: 160px;
    height: 160px;
  }
  .btn-marca {
    font-size: 1.1rem;
    padding: 0.9rem 2rem;
  }
}
@media (max-width: 700px) {
  .marcas-title {
    font-size: 1.3rem;
  }
  .marcas-desc {
    font-size: 1rem;
  }
  .marcas-row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .marcas-logos {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    justify-content: flex-start;
    flex: 1;
  }
  .marca-logo {
    width: 120px;
    height: 120px;
  }
  .btn-marca {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }
}
/* === Responsive Design para Marcas === */

/* Móviles muy pequeños */
@media (max-width: 360px) {
  .marcas-container {
    padding: 0 2%;
    width: 96%;
  }
  .valores-title {
    font-size: 1.4rem !important;
    text-align: center;
  }
  .marcas-desc {
    font-size: 1rem;
    text-align: center;
    line-height: 1.3;
  }
  .marca-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  .marcas-logos {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1.2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .marcas-logos::-webkit-scrollbar {
    display: none;
  }
  .marcas-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    align-items: center;
  }
  .btn-marca {
    font-size: 0.8rem;
    padding: 0.6rem 1.2rem;
    width: auto;
    text-align: center;
    white-space: nowrap;
  }
}

/* Móviles estándar */
@media (min-width: 361px) and (max-width: 480px) {
  .marcas-container {
    padding: 0 3%;
    width: 94%;
  }
  .marcas-desc {
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.4;
  }
  .marca-logo {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
  }
  .marcas-logos {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .marcas-logos::-webkit-scrollbar {
    display: none;
  }
  .marcas-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    align-items: center;
  }
  .btn-marca {
    font-size: 0.9rem;
    padding: 0.7rem 1.4rem;
    width: auto;
    text-align: center;
    white-space: nowrap;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .marcas-container {
    padding: 0 4%;
    width: 92%;
  }
  .marcas-desc {
    font-size: 1.3rem;
    text-align: center;
  }
  .marca-logo {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
  }
  .marcas-logos {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1.8rem;
  }
  .marcas-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    align-items: center;
  }
  .btn-marca {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
    width: auto;
    text-align: center;
    white-space: nowrap;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .marcas-container {
    padding: 0 5%;
    width: 90%;
  }
  .marca-logo {
    width: 200px;
    height: 200px;
  }
  .marcas-logos {
    gap: 2.5rem;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .marcas-container {
    padding: 0 5%;
    width: 90%;
  }
  .marca-logo {
    width: 240px;
    height: 240px;
  }
  .marcas-logos {
    gap: 3rem;
  }
}

@media (min-width: 1900px) {
  .marcas-container {
    padding-left: 14rem;
  }
  .marca-logo {
    width: 220px;
    height: 220px;
  }
  .marcas-logos {
    gap: 3rem;
  }
}
@media (min-width: 1921px) {
  .marcas-container {
    padding-left: 2rem;
  }
}
/* === Fin Sección Marcas === */

/* === Sección Reclutamiento === */
.reclutamiento-section {
  width: 100%;
  background: #fff;
  padding: 4rem 0;
  display: flex;
  justify-content: center;
}

.reclutamiento-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
  height: 100%;
}

.reclutamiento-info {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4rem 3rem 4rem 6rem;
  margin: 0;
  box-sizing: border-box;
}

.reclutamiento-title {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--cafe-lealtad);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reclutamiento-desc {
  font-family: var(--font-parrafos);
  font-size: 1.5rem;
  color: var(--cafe-lealtad);
  margin-bottom: 2.2rem;
  font-weight: 400;
}

.btn-reclutamiento {
  background: #ff0000;
  color: #fff;
  font-family: "Montserrat", var(--font-destacados), sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 0.7rem;
  padding: 1.1rem 2.5rem;
  text-decoration: none;
  box-shadow: 4px 6px 16px 0 rgba(0, 0, 0, 0.18);
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-reclutamiento::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn-reclutamiento:hover::before {
  left: 100%;
}

.btn-reclutamiento:hover {
  background: var(--vino-realeza);
  color: var(--amarillo-la-corona);
  transform: translateY(-3px);
  box-shadow: 6px 12px 24px 0 rgba(0, 0, 0, 0.3);
}
.btn-reclutamiento .arrow {
  font-size: 1.5rem;
  margin-left: 0.7rem;
  vertical-align: middle;
  color: var(--amarillo-la-corona);
}

.reclutamiento-img {
  flex: 0 0 65%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  width: 100%;
  height: 700px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.reclutamiento-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* === Responsive Design para Reclutamiento === */
@media (max-width: 480px) {
  .reclutamiento-container {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
    text-align: center;
  }
  .reclutamiento-info {
    max-width: 100%;
    padding: 1rem;
    order: 1;
    align-items: center;
  }
  .reclutamiento-img {
    max-width: 100%;
    height: auto;
    order: 2;
  }
  .reclutamiento-title {
    font-size: 1.6rem;
  }
  .reclutamiento-desc {
    font-size: 1rem;
  }
  .reclutamiento-img img {
    max-width: 100%;
    height: auto;
    min-height: 250px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .reclutamiento-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
    text-align: center;
  }
  .reclutamiento-info {
    max-width: 100%;
    padding: 1.5rem;
    order: 1;
    align-items: center;
  }
  .reclutamiento-img {
    max-width: 100%;
    height: auto;
    order: 2;
  }
  .reclutamiento-title {
    font-size: 1.8rem;
  }
  .reclutamiento-desc {
    font-size: 1.1rem;
  }
  .reclutamiento-img img {
    max-width: 100%;
    height: auto;
    min-height: 350px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .reclutamiento-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding: 0 3rem;
  }
  .reclutamiento-info {
    max-width: 100%;
    padding: 2rem 0;
  }
  .reclutamiento-img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .reclutamiento-img img {
    max-width: 100%;
    height: auto;
    min-height: 400px;
  }
}

/* Media query adicional para pantallas medianas */
@media (min-width: 1101px) and (max-width: 1300px) {
  .reclutamiento-container {
    padding: 0;
    gap: 0;
  }
  .reclutamiento-info {
    padding: 3rem 2rem 3rem 4rem;
  }
  .reclutamiento-img {
    height: 600px;
  }
}
/* === Fin Sección Reclutamiento === */

@media (max-width: 1920px) {
  .carrusel-container {
    height: 70vh;
  }
}

@media (max-width: 2450px) {
  .carrusel-container {
    height: 70vh;
  }
}

/* === Sección Noticias === */
.noticias-section {
  background: #f7f7f7;
  padding: 2.5rem 0 2.5rem 0;
  width: 100%;
}

.noticias-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto 2.5rem auto;
  padding: 0 1rem;
}

.noticias-title {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  color: var(--cafe-lealtad);
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
}

.noticias-ver-mas {
  color: #ff0000;
  font-family: "Montserrat", var(--font-destacados), sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.noticias-ver-mas::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--vino-realeza);
  transition: width 0.3s ease;
}

.noticias-ver-mas:hover::after {
  width: 100%;
}

.noticias-ver-mas .arrow {
  margin-left: 0.5rem;
  font-size: 1.3rem;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.noticias-ver-mas:hover {
  color: var(--vino-realeza);
}

.noticias-ver-mas:hover .arrow {
  transform: translateX(5px);
}

.noticias-grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.noticia-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 420px;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  min-height: 40vh;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

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

.noticia-img-link {
  display: block;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.noticia-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.noticia-card:hover .noticia-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.noticia-content {
  padding: 1.5rem 1.2rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.noticia-title {
  font-family: "Montserrat", var(--font-destacados), sans-serif;
  font-size: 1.25rem;
  color: var(--cafe-lealtad);
  font-weight: bold;
  margin-bottom: 1.2rem;
  margin-top: 0;
}

.noticia-excerpt {
  font-family: var(--font-parrafos);
  font-size: 1.1rem;
  color: var(--cafe-lealtad);
  margin-bottom: 1.5rem;
}

.noticia-link {
  color: #ff0000;
  font-family: "Montserrat", var(--font-destacados), sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative;
}

.noticia-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--vino-realeza);
  transition: width 0.3s ease;
}

.noticia-link:hover::after {
  width: 100%;
}

.noticia-link .arrow {
  margin-left: 0.5rem;
  font-size: 1.1rem;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.noticia-link:hover {
  color: var(--vino-realeza);
}

.noticia-link:hover .arrow {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1200px) {
  .noticias-grid {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .noticia-card {
    width: 98vw;
    max-width: 420px;
  }
  .noticias-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
/* === Fin Sección Noticias === */

/* === FOOTER CONTAINER COMPACTO === */
.footer-container {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
  grid-template-areas: "brand separator legal contact";
  align-items: center;
  justify-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  min-height: auto;
}

/* === BRAND SECTION === */
.footer-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

.footer-logo {
  height: clamp(60px, 8vh, 80px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
  padding: 0;
  margin: 0;
  display: block;
}

.footer-logo:hover {
  transform: scale(1.02);
}

/* === NAVIGATION === */
.footer-nav {
  grid-area: legal;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  color: var(--blanco-nobleza);
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--amarillo-la-corona);
  outline: 2px solid var(--amarillo-la-corona);
  outline-offset: 2px;
}

/* === CONTACT SECTION === */
.footer-contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

.footer-contact h3 {
  color: var(--blanco-nobleza);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.contact-info {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
  padding: 0;
  align-items: center;
  text-align: center;
}

.contact-info a {
  color: var(--blanco-nobleza);
  text-decoration: underline;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 0.9rem);
  line-height: 1;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.contact-info a:hover,
.contact-info a:focus-visible {
  color: var(--amarillo-la-corona);
  outline: 2px solid var(--amarillo-la-corona);
  outline-offset: 2px;
}

/* === SOCIAL MEDIA === */
.footer-social {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.1rem;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.footer-social a {
  color: var(--blanco-nobleza);
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--amarillo-la-corona);
  transform: translateY(-2px);
  outline: 2px solid var(--amarillo-la-corona);
  outline-offset: 2px;
}

/* === SEPARATOR === */
.footer-container::before {
  content: "";
  grid-area: separator;
  width: 2px;
  height: clamp(40px, 6vh, 60px);
  background: var(--blanco-nobleza);
  justify-self: center;
  align-self: center;
}
/* === RESPONSIVE FOOTER === */

/* Tablet Layout - Solo para pantallas muy grandes que necesiten ajuste */
@media (max-width: 1200px) and (min-width: 901px) {
  .footer-container {
    gap: clamp(0.5rem, 1.5vw, 1.5rem);
    padding: 0 2rem;
  }
}

/* Mobile Layout - Imagen izquierda, contenido derecha en 2 filas */
@media (max-width: 900px) {
  .footer-modern {
    padding: 0.5rem 0;
  }

  .footer-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "brand legal"
      "brand contact";
    gap: 0.75rem 1rem;
    padding: 0 1rem;
    max-width: none;
    align-items: start;
  }

  /* Logo ocupa ambas filas a la izquierda */
  .footer-brand {
    grid-area: brand;
    align-self: center;
  }

  .footer-logo {
    height: clamp(50px, 8vh, 70px);
  }

  /* Ocultar el separador en móvil */
  .footer-container::before {
    display: none;
  }

  /* Navegación legal en la fila superior derecha */
  .footer-nav {
    grid-area: legal;
    text-align: left;
  }

  .footer-nav a {
    font-size: clamp(0.7rem, 2.2vw, 0.9rem);
    line-height: 1.2;
  }

  /* Contactos en la fila inferior derecha */
  .footer-contact {
    grid-area: contact;
    text-align: left;
    position: relative;
    padding-top: 0.6rem;
  }

  /* Línea divisoria encima de contactos en móvil */
  .footer-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--amarillo-la-corona);
    opacity: 0.6;
  }

  .footer-contact h3 {
    font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  }

  .contact-info {
    text-align: left;
  }

  .contact-info a {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    line-height: 1.2;
    justify-self: start;
  }

  .footer-social a {
    font-size: clamp(0.9rem, 2.8vw, 1.1rem);
    min-width: clamp(24px, 7vw, 30px);
    min-height: clamp(24px, 7vw, 30px);
  }
}

/* Mobile muy pequeño - ajustes adicionales */
@media (max-width: 480px) {
  .footer-container {
    gap: clamp(0.2rem, 0.8vw, 0.6rem);
    padding: 0 0.3rem;
  }
  
  .footer-nav a,
  .footer-contact h3,
  .contact-info a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* === Mejoras Generales de Responsividad === */
@media (max-width: 480px) {
  /* Espaciado general para móviles */
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Títulos responsivos */
  h1,
  .h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  h2,
  .h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  h3,
  .h3 {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  /* Botones más grandes para touch */
  .btn {
    padding: 0.75rem 1.5rem;
    min-height: 44px;
  }

  /* Espaciado de secciones - padding eliminado para mejor flujo con header static */
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Espaciado para tablets */
  .container,
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Títulos para tablets */
  h1,
  .h1 {
    font-size: 2rem;
    line-height: 1.3;
  }

  h2,
  .h2 {
    font-size: 1.7rem;
    line-height: 1.3;
  }

  /* Botones optimizados */
  .btn {
    padding: 0.75rem 1.5rem;
    min-height: 44px;
  }

  /* Espaciado de secciones */
  section {
    padding: 3rem 0;
  }
}

/* === Fin Mejoras Generales de Responsividad === */

/* === HERO OVERLAY STYLES === */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
  pointer-events: none;
  padding: 1rem;
  box-sizing: border-box;
}

.hero-overlay-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  z-index: 3;
  pointer-events: auto;
  gap: 0.8rem !important;
  max-width: 50% !important;
  max-height: 50vh !important;
  width: 50% !important;
  height: auto !important;
}

.hero-overlay-text {
  color: #fff !important;
  font-size: clamp(0.7rem, 1.8vw, 0.9rem) !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 100% !important;
}
.hero-logo-elrey {
  height: clamp(50px, 8vw, 90px) !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

/* === RESPONSIVE HERO OVERLAY === */
@media (min-width: 1200px) {
  .hero-overlay-content {
    max-width: 50% !important;
    width: 50% !important;
    max-height: 45vh !important;
  }
}

@media (min-width: 1600px) {
  .hero-overlay-content {
    max-width: 50% !important;
    width: 50% !important;
    max-height: 40vh !important;
  }
}

@media (max-width: 768px) {
  .hero-overlay {
    padding: 0.6rem !important;
  }

  .hero-overlay-content {
    gap: 0.6rem !important;
    max-width: 80% !important;
    width: 80% !important;
    max-height: 60vh !important;
    margin-left: clamp(1rem, 4vw, 3rem);
  }
}

@media (max-width: 480px) {
  .hero-overlay {
    padding: 0.4rem !important;
  }

  .hero-overlay-content {
    gap: 0.5rem !important;
    max-width: 85% !important;
    width: 85% !important;
    max-height: 65vh !important;
    margin-left: clamp(1rem, 3vw, 2rem);
  }
}

.historia-section {
  width: 100%;
  background: #fff;
  padding: 0.5rem 0;
  margin: 0;
  display: flex;
  justify-content: center;
  height: auto;
  min-height: 90vh;
  overflow: hidden;
  box-sizing: border-box;
}
.historia-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 89vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.historia-texto {
  flex: 1 1 50%;
  max-width: 50vw;
  height: 100%;
  color: var(--cafe-lealtad);
  font-family: "Montserrat", var(--font-parrafos), sans-serif;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 3vw 3rem 7vw;
  box-sizing: border-box;
  overflow: hidden;
}

/* Controlar espaciado específico para desktop en historia */
@media (min-width: 1025px) {
  .historia-section .historia-titulo {
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    margin-bottom: 1.8rem !important;
    line-height: 1.1 !important;
  }

  .historia-section .historia-texto p {
    font-size: 1.4rem !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.4 !important;
  }

  .historia-section .historia-texto p:last-child {
    margin-bottom: 0 !important;
  }
}
.historia-imagen {
  flex: 1 1 50%;
  max-width: 50vw;
  width: 50vw;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
}
.historia-imagen img {
  width: 100%;
  height: 100%;
  min-height: 89vh;
  object-fit: cover;
  object-position: 25% center;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
@media (max-width: 1024px) {
  .historia-section {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .historia-container {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .historia-texto {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 0.5rem 5% !important;
    order: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .historia-imagen {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 35vh !important;
    min-height: 280px !important;
    max-height: 35vh !important;
    order: 2 !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .historia-section .historia-titulo {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    text-align: center !important;
    margin: 0 auto 1.5rem auto !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  .historia-texto p {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }

  .historia-imagen img {
    width: 100% !important;
    height: 35vh !important;
    max-height: 35vh !important;
    min-height: 280px !important;
    object-fit: cover !important;
    object-position: 25% center !important;
    display: block !important;
  }
}
.historia-titulo-marron {
  color: var(--cafe-lealtad) !important;
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
}
.historia-titulo-rojo {
  color: #ff0000 !important;
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
}
.historia-titulo {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-size: clamp(2rem, 5vw, 4rem); /* Responsive fluid typography */
  font-weight: bold;
  margin-bottom: 2.2rem;
  line-height: 1.1;
  text-align: left;
}
.historia-texto p {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  color: var(--cafe-lealtad);
  font-family: "Montserrat", var(--font-parrafos), sans-serif;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .historia-titulo {
    font-size: 2.2rem;
  }
  .historia-texto p {
    font-size: 1.3rem;
  }
}

/* Reglas de hero-overlay-text ya definidas en la sección principal */
@media (min-width: 2400px) {
  .hero-overlay-text {
    font-size: 2.5rem !important;
  }
}
/* --- FIN: Tamaño grande para .hero-overlay-text --- */

/* === Sección Nuestra Promesa (Custom Layout) === */
.custom-promesa-layout {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background: #fafafa;
  width: 100%;
  min-height: 50vh;
  box-sizing: border-box;
  margin: 0;
  padding: 2rem 0;
}

.custom-promesa-layout .promesa-img {
  flex: 0 0 60%;
  width: 60%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  order: 1; /* Imagen a la izquierda en desktop */
}

.custom-promesa-layout .promesa-texto {
  flex: 0 0 40%;
  width: 40%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  color: var(--cafe-lealtad);
  font-family: "Montserrat", var(--font-parrafos), sans-serif;
  gap: 0.1rem;
  overflow-wrap: break-word;
  padding-left: 3vw;
  order: 2; /* Texto a la derecha en desktop */
}

.custom-promesa-layout .promesa-img img {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.promesa-titulo-custom {
  color: var(--rojo-rey);
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: bold;
  margin-bottom: clamp(0.5rem, 2vh, 1.2rem);
  text-transform: uppercase;
  line-height: 1.1;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promesa-desc-custom {
  font-family: "Montserrat", var(--font-parrafos), sans-serif;
  font-size: clamp(0.8rem, 3vw, 1.5rem);
  color: var(--cafe-lealtad);
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.4;
  width: 100%;
}

.promesa-fuerte-custom {
  font-family: "Montserrat", var(--font-destacados), sans-serif;
  font-size: clamp(0.9rem, 3.5vw, 1.6rem);
  color: var(--cafe-lealtad);
  font-weight: 700;
  margin: 0;
  letter-spacing: clamp(0.05px, 0.12vw, 0.25px);
  text-transform: uppercase;
  line-height: clamp(1.1, 1.3, 1.4);
  width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
  .custom-promesa-layout {
    flex-direction: column; /* Texto primero, imagen después */
    min-height: auto;
  }
  .custom-promesa-layout .promesa-img {
    flex: none;
    width: 100%;
    height: 45vh;
    order: 2; /* Asegurar que la imagen vaya después */
  }
  .custom-promesa-layout .promesa-img img {
    min-height: 45vh;
  }
  .custom-promesa-layout .promesa-texto {
    max-width: 100%;
    flex: none;
    width: 100%;
    padding: 4vh 5%;
    gap: 1rem;
    order: 1; /* Asegurar que el texto vaya primero */
    text-align: center; /* Centrar texto en móvil para mejor presentación */
  }

  /* Tamaños de fuente más grandes en móvil que en desktop */
  .promesa-titulo-custom {
    font-size: 2.2rem; /* Más grande que desktop (1.5rem max) */
    margin-bottom: 1.5rem;
    line-height: 1.1;
  }
  .promesa-desc-custom {
    font-size: 1.8rem; /* Más grande que desktop (1.5rem max) */
    margin-bottom: 1rem;
    line-height: 1.3;
  }
  .promesa-fuerte-custom {
    font-size: 2rem; /* Más grande que desktop (1.6rem max) */
    letter-spacing: 0.5px;
    line-height: 1.2;
  }
}

/* Móviles pequeños - ajustes adicionales */
@media (max-width: 768px) {
  .custom-promesa-layout .promesa-texto {
    padding: 0.5rem 4%;
  }
  .promesa-titulo-custom {
    font-size: 2rem;
  }
  .promesa-desc-custom {
    font-size: 1.6rem;
  }
  .promesa-fuerte-custom {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .custom-promesa-layout .promesa-img {
    height: 40vh;
  }
  .custom-promesa-layout .promesa-img img {
    min-height: 40vh;
  }
  .custom-promesa-layout .promesa-texto {
    padding: 0.5rem 3%;
    gap: 0.8rem;
  }
  .promesa-titulo-custom {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
  }
  .promesa-desc-custom {
    font-size: 1.4rem;
  }
  .promesa-fuerte-custom {
    font-size: 1.6rem;
  }
}

/* === Fin Sección Nuestra Promesa === */

/* === Sección Confitería Grande === */
.confiteria-grande-section {
  position: relative;
  width: 100%;
  background: #fff;
  margin: 0;
  padding: 0.5rem 0;
  z-index: 1;
}

.confiteria-grande-hero {
  position: relative !important;
  width: 100%;
  height: 700px;
  min-height: 400px;
  margin-top: 20px; /* Espacio adicional después del header fijo */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.confiteria-grande-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.confiteria-grande-gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0) 70%
  );
}

.confiteria-grande-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7vw;
  padding-left: 5vw;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
}

.confiteria-grande-overlay h2 {
  color: #fff !important;
  font-size: 4.5rem;
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
  margin: 0;
  text-align: right;
}

.confiteria-grande-destacado {
  display: inline-block;
  color: #fff;
  background: none;
  font-size: 6rem; /* Más grande que el resto */
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  margin-top: 0.2em;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Mantener los banners en fila en escritorio */
.confiteria-grande-banners {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 0; /* Sin gap para mejor control responsive */
  background: #fff;
}

.confiteria-banner {
  flex: 1 1 0;
  min-width: 0;
  width: 33.3333vw;
  min-height: 420px;
  font-size: 3.2rem;
  box-sizing: border-box;
  padding: 5rem 0.5rem;
  margin: 0;
  border: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.confiteria-banner span,
.confiteria-banner strong {
  width: 100%;
  text-align: center;
  display: block;
}

.confiteria-banner-amarillo .confiteria-logo {
  display: block;
  margin: 0 auto;
  max-width: 340px;
  width: 100%;
  height: auto;
}

/* Solo en móvil, apilar en columna */
@media (max-width: 900px) {
  .confiteria-grande-banners {
    flex-direction: column;
    width: 100vw;
    gap: 10px;
  }
  .confiteria-banner {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    min-height: 180px;
    font-size: 2rem;
    padding: 2.5rem 0.5rem;
  }
  .confiteria-banner-amarillo .confiteria-logo {
    max-width: 180px;
  }
}

.confiteria-banner-rosa {
  background: #ff0066;
  color: #fff;
}

.confiteria-banner-amarillo {
  background: var(--amarillo-la-corona);
}

.confiteria-banner-celeste {
  background: #00bfc6;
  color: #fff;
}

.confiteria-banner strong {
  font-size: 3.7rem;
}

.confiteria-banner-rosa strong,
.confites-destacado {
  color: #fff;
  font-size: 3.2rem;
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
  display: block;
  margin-top: 0.5rem;
  line-height: 1.05;
}

.confiteria-banner-celeste span,
.confiteria-banner-celeste strong {
  color: #fff;
  line-height: 1.05;
}

/* Tablets y dispositivos medianos */
@media (max-width: 1200px) and (min-width: 901px) {
  .confiteria-grande-hero {
    height: 500px;
  }
  .confiteria-grande-overlay h2 {
    font-size: 3.5rem;
  }
  .confiteria-grande-destacado {
    font-size: 4.5rem;
  }
  .confiteria-banner {
    font-size: 2.8rem;
    padding: 4rem 0.5rem;
  }
  .confiteria-banner strong {
    font-size: 3.2rem;
  }
  .confiteria-banner-rosa strong,
  .confites-destacado {
    font-size: 2.8rem;
  }
}

/* Móviles y tablets pequeñas */
@media (max-width: 900px) {
  .confiteria-grande-section {
    margin-top: 0;
  }
  .confiteria-grande-hero {
    height: 350px;
    margin-top: 10px;
  }
  .confiteria-grande-overlay {
    padding-right: 4vw;
    padding-left: 4vw;
  }
  .confiteria-grande-overlay h2 {
    font-size: 2.2rem;
    text-align: center;
  }
  .confiteria-grande-destacado {
    font-size: 2.2rem;
  }
  .confiteria-grande-banners {
    gap: 0; /* Sin gap en móvil para mejor flujo */
  }
  .confiteria-banner {
    padding: 3rem 1rem;
  }
  .confiteria-banner-rosa strong,
  .confites-destacado {
    font-size: 2rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .confiteria-grande-hero {
    height: 300px;
    margin-top: 5px;
  }
  .confiteria-grande-overlay {
    padding-right: 3vw;
    padding-left: 3vw;
  }
  .confiteria-grande-overlay h2 {
    font-size: 1.8rem;
  }
  .confiteria-grande-destacado {
    font-size: 1.8rem;
  }
  .confiteria-banner {
    min-height: 150px;
    font-size: 1.6rem;
    padding: 2rem 0.8rem;
  }
  .confiteria-banner strong {
    font-size: 2rem;
  }
  .confiteria-banner-rosa strong,
  .confites-destacado {
    font-size: 1.8rem;
  }
  .confiteria-banner-amarillo .confiteria-logo {
    max-width: 150px;
  }
}

/* Pantallas muy grandes */
@media (min-width: 1920px) {
  .confiteria-grande-hero {
    height: 800px;
  }
  .confiteria-grande-overlay h2 {
    font-size: 5.5rem;
  }
  .confiteria-grande-destacado {
    font-size: 7rem;
  }
  .confiteria-banner {
    min-height: 500px;
    font-size: 3.8rem;
    padding: 6rem 1rem;
  }
  .confiteria-banner strong {
    font-size: 4.2rem;
  }
  .confiteria-banner-rosa strong,
  .confites-destacado {
    font-size: 3.8rem;
  }
  .confiteria-banner-amarillo .confiteria-logo {
    max-width: 400px;
  }
}
/* === Fin Sección Confitería Grande === */

/* Sección Categorías - Layout 100% limpio */
/* === SECCIÓN CATEGORÍAS - CSS LIMPIO Y OPTIMIZADO === */
.seccion-categorias {
  width: 100%;
  background: #fff;
  height: 50vh;
  min-height: 50vh;
  max-height: 50vh;
  padding: 0.5rem 0;
  overflow: hidden;
}

.categorias-contenido {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.categorias-texto {
  flex: 0 0 50%;
  width: 50%;
  color: var(--cafe-lealtad);
  font-family: "Montserrat", var(--font-parrafos), sans-serif;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 2rem;
  order: 1;
}
.categorias-texto h2 {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-size: 1.6rem; /* Tamaño optimizado para 25vh */
  color: var(--cafe-lealtad);
  font-weight: 700;
  margin-bottom: 0.3rem;
  line-height: 1;
  text-align: left;
}
.categorias-destacado {
  color: var(--rojo-rey);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
  display: inline-block;
}

.btn-categorias {
  background: var(--amarillo-la-corona);
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 0.8rem;
  border-radius: 0.3rem;
  padding: 0.4rem 1rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin-top: 0.2rem;
  transition: background 0.2s, color 0.2s;
  align-self: flex-start;
}

.btn-categorias:hover {
  background: var(--amarillo-monarca);
  color: var(--vino-realeza);
}

/* Estilos específicos para Principios ASG */
.principios-asg-destacado {
  color: var(--rojo-rey);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
}

.principios-asg-sub {
  font-size: 0.9rem;
  color: var(--cafe-lealtad);
  font-weight: normal;
}
.categorias-img {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 2;
}

.categorias-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* === RESPONSIVE CATEGORÍAS === */
/* Reglas eliminadas - usando CSS optimizado al final del archivo */

/* SECCIÓN COLABORADORES - NUEVA IMPLEMENTACIÓN */
.seccion-colaboradores {
  background: linear-gradient(
    135deg,
    var(--rojo-rey) 0%,
    var(--rojo-rey) 100%
  );
  width: 100%;
  min-height: 60vh;
  display: flex;
}

.colaboradores-contenido {
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: stretch;
}

.colaboradores-img {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
}

.colaboradores-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-height: 60vh;
}

.colaboradores-texto {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 3rem;
  box-sizing: border-box;
}
.colaboradores-texto h2 {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif !important;
  font-size: 2.7rem;
  color: #fff !important;
  font-weight: 700;
  margin: 0 0 1.2rem 0 !important;
  padding: 0 !important;
  line-height: 1.1;
  text-align: left !important;
  display: block !important;
  width: 100%;
}

.colaboradores-desc {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  margin: 0 0 2rem 0;
  padding: 0;
  text-align: left;
}

.colaboradores-texto p {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  text-align: left !important;
  display: block !important;
  width: 100%;
}

/* Reset específico para evitar herencias problemáticas */
.colaboradores-texto * {
  box-sizing: border-box;
}

.colaboradores-texto h2 * {
  display: inherit !important;
  text-align: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}
.btn-colaboradores {
  background: var(--amarillo-la-corona);
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 0.5rem;
  padding: 1rem 2.2rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin-top: 0.5rem;
  transition: background 0.2s, color 0.2s;
  align-self: flex-start !important;
}
.btn-colaboradores:hover {
  background: var(--amarillo-monarca);
  color: var(--vino-realeza);
}

.btn-colaboradores .arrow {
  font-size: 1.3rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* RESPONSIVE COLABORADORES - ALTURA AUTOMÁTICA */
@media (max-width: 1024px) {
  .seccion-colaboradores {
    min-height: auto;
    margin: 0;
    padding: 0;
  }

  .colaboradores-contenido {
    flex-direction: column;
    min-height: auto;
    margin: 0;
    padding: 0;
  }

  /* TEXTO PRIMERO */
  .colaboradores-texto {
    order: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0.5rem 1.5rem;
    width: 100%;
    margin: 0;
  }

  .colaboradores-texto h2 {
    text-align: left !important;
    align-self: flex-start !important;
  }

  .colaboradores-texto p {
    text-align: left !important;
  }

  .colaboradores-texto .btn-colaboradores {
    align-self: flex-start !important;
    margin-top: 2rem;
  }

  /* IMAGEN SEGUNDA - ALTURA FIJA COMO OTRAS SECCIONES */
  .colaboradores-img {
    order: 2;
    flex: none;
    width: 100%;
    height: 45vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
  }

  .colaboradores-img img {
    width: 100%;
    height: 45vh;
    min-height: 45vh;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
  }
}

/* === TABLET PORTRAIT ESPECÍFICO (1024x1366 y similares) === */
@media (max-width: 1024px) and (min-height: 1200px) {
  .historia-imagen {
    height: 28vh !important;
    min-height: 300px !important;
    max-height: 28vh !important;
  }

  .historia-imagen img {
    height: 28vh !important;
    max-height: 28vh !important;
    min-height: 300px !important;
  }
}

/* === DIMENSIÓN EXACTA 1024x1366 === */
@media (max-width: 1024px) and (min-height: 1300px) and (max-height: 1400px) {
  .historia-section {
    padding: 0.5rem 0 !important;
  }

  .historia-imagen {
    height: 25vh !important;
    min-height: 25vh !important;
    max-height: 25vh !important;
    overflow: hidden !important;
  }

  .historia-imagen img {
    width: 100% !important;
    height: 25vh !important;
    max-height: 25vh !important;
    min-height: 25vh !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .historia-texto {
    padding: 0.5rem 5% !important;
  }
}

/* === RESPONSIVE MÓVILES PEQUEÑOS === */
@media (max-width: 768px) {
  /* Historia - ajustes móviles pequeños */
  .historia-texto {
    padding: 0.5rem 1.5rem !important;
  }

  .historia-imagen {
    height: 32vh !important;
    min-height: 250px !important;
    max-height: 32vh !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  .historia-imagen img {
    width: 100% !important;
    height: 32vh !important;
    max-height: 32vh !important;
    min-height: 250px !important;
    object-fit: cover !important;
    object-position: 25% center !important;
    display: block !important;
  }

  .historia-section .historia-titulo {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
  }

  .historia-texto p {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
  }
}

/* Móviles extra pequeños - Historia */
@media (max-width: 480px) {
  .historia-imagen {
    height: 28vh !important;
    min-height: 200px !important;
    max-height: 28vh !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
  }

  .historia-texto {
    padding: 0.5rem 1rem !important;
  }

  .historia-section .historia-titulo {
    font-size: clamp(1.2rem, 6vw, 1.6rem) !important;
    margin-bottom: 1rem !important;
  }

  .historia-imagen img {
    width: 100% !important;
    height: 28vh !important;
    max-height: 28vh !important;
    min-height: 200px !important;
    object-fit: cover !important;
    object-position: 25% center !important;
    display: block !important;
  }
}

/* === REGLA GLOBAL PARA TODAS LAS SECCIONES EN MÓVILES === */
@media (max-width: 1024px) {
  /* Padding consistente de 0.5rem para todas las secciones principales */
  .historia-section,
  .valores-section,
  .marcas-section,
  .reclutamiento-section,
  .noticias-section,
  .confiteria-grande-section,
  .seccion-categorias,
  .seccion-colaboradores,
  .seccion-principios-asg {
    padding: 0.5rem 0 !important;
  }

  /* Alineación izquierda para contenedores de texto en móvil */
  .colaboradores-texto,
  .categorias-texto {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .colaboradores-texto h2,
  .categorias-texto h2 {
    text-align: left !important;
    align-self: flex-start !important;
  }

  /* Botones alineados a la izquierda en móvil */
  .colaboradores-texto .btn-colaboradores,
  .categorias-texto .btn-categorias {
    align-self: flex-start !important;
  }
}

/* Continúa con reglas móviles para otras secciones */
@media (max-width: 768px) {
  /* Categorías - reglas móviles eliminadas para evitar conflictos */

  /* Colaboradores - ajustes móviles */
  .colaboradores-texto {
    padding: 2rem 1.5rem;
  }

  .colaboradores-img {
    height: 35vh;
  }

  .colaboradores-img img {
    height: 35vh;
    min-height: 35vh;
  }
}

/* Reglas móvil duplicadas eliminadas - usando CSS optimizado definido arriba */

/* --- REGLAS DUPLICADAS COMENTADAS PARA EVITAR CONFLICTOS --- */

/* === Sección Principios ASG === */
.seccion-principios-asg {
  background: #fff;
  padding: 4rem 0 2rem 0;
  width: 100%;
  /* max-width: 100vw; */
  /* margin: 0; */
  /* padding: 0; */
  /* box-sizing: border-box; */
  display: flex;
  justify-content: center;
}
.principios-asg-contenido {
  display: flex;
  max-width: 1400px;
  width: 100%;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
}
.principios-asg-texto {
  flex: 1 1 0;
  text-align: left;
  padding-left: 3vw;
}
.principios-asg-texto h2 {
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-size: 2.7rem;
  color: var(--cafe-lealtad);
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.1;
}
.principios-asg-destacado {
  color: #ff0000;
  font-size: 2.7rem;
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: bold;
  display: inline-block;
}
.principios-asg-sub {
  color: var(--cafe-lealtad);
  font-size: 1.3rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.principios-asg-img {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.principios-asg-img img {
  width: 100%;
  max-width: 420px;
  border-radius: 0.5rem;
  object-fit: cover;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
  .principios-asg-contenido {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1vw;
  }
  .principios-asg-img img {
    max-width: 98vw;
  }
  .principios-asg-texto {
    padding-left: 0;
    text-align: center;
  }
}

/* === ELIMINADO: Todas las min-height - ahora usa solo altura natural === */
/* Las secciones ahora usan solo height: auto y padding para el espaciado */
/* === Fin igualar altura === */

/* === ELIMINADO: Definiciones duplicadas que causaban conflictos === */

/* === Contenedores con altura natural === */
.colaboradores-contenido,
.principios-asg-contenido {
  min-height: auto; /* Altura natural */
  height: auto;
}
/* .categorias-contenido excluido - usa height específico */
@media (max-width: 900px) {
  .categorias-contenido,
  .colaboradores-contenido,
  .principios-asg-contenido {
    min-height: auto; /* Altura automática en móvil */
    height: auto;
  }
}
/* Contenedores con altura natural */
.colaboradores-contenido {
  height: auto; /* Sin forzar altura */
}

/* En pantallas muy grandes, limita el ancho máximo y centra */
@media (min-width: 1424px) {
  .seccion-categorias .categorias-img {
    max-width: 1424px;
  }
}

/* Eliminado media query conflictivo - nuestras reglas tablet/desktop son más específicas */

/* Regla específica removida - ahora usa el sistema general */

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-contenido {
    display: flex;
    flex-direction: row;
    width: 100vw;
    margin: 0;
    max-width: none;
  }
  .seccion-principios-asg .principios-asg-texto {
    width: 40%;
    min-width: 0;
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 4vw;
    padding-right: 2vw;
  }
  .seccion-principios-asg .principios-asg-img {
    width: 60%;
    min-width: 0;
    flex: 0 0 60%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .seccion-principios-asg .principios-asg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
    max-height: none;
    object-position: top !important;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-contenido {
    height: 600px;
    min-height: 400px;
    max-height: 700px;
  }
  .seccion-principios-asg .principios-asg-img img {
    object-position: 50% 30% !important;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
    max-height: none;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-texto {
    width: 50%;
    min-width: 0;
    flex: 0 0 50%;
  }
  .seccion-principios-asg .principios-asg-img {
    width: 50%;
    min-width: 0;
    flex: 0 0 50%;
    overflow: hidden;
  }
  .seccion-principios-asg .principios-asg-img img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-contenido {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
  }
  .seccion-principios-asg .principios-asg-img {
    width: 50%;
    min-width: 0;
    flex: 0 0 50%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }
  .seccion-principios-asg .principios-asg-img img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-img img {
    max-height: 350px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-img img {
    max-height: 250px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-img img {
    max-height: 670px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-contenido {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    max-width: none;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-img {
    width: 50%;
    min-width: 0;
    flex: 0 0 50%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }
  .seccion-principios-asg .principios-asg-img img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

@media (min-width: 900px) {
  .seccion-principios-asg .principios-asg-contenido {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* Regla específica removida - usa el sistema general limpio */

/* Regla móvil específica removida - usa el sistema general */

/* Altura forzada removida - usa el sistema general */

@media (max-width: 900px) {
  .seccion-colaboradores .colaboradores-img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    min-width: auto !important;
  }
}

/* Fix removido - usa el sistema general */

/* Todas las reglas específicas con !important removidas - sistema limpio */

/* *** ELIMINADO: Reglas con !important que conflictuaban con responsive *** */

/* Reglas específicas para colaboradores eliminadas - usar estilos principales */

/* === SISTEMA RESPONSIVO MEJORADO CON CLAMP() === */
/* Aplicar tamaño responsivo usando clamp() que se adapta automáticamente */
@media (max-width: 768px) {
  .colaboradores-texto h2 {
    /* clamp(min, preferred, max) - se adapta automáticamente al viewport */
    font-size: clamp(1.8rem, 6vw, 2.7rem) !important;
    line-height: 1.1 !important;
    /* Asegurar que el texto no se desborde */
    word-break: break-word;
    hyphens: auto;
  }
}

/* === MEDIA QUERY ESPECÍFICA PARA PANTALLAS MUY PEQUEÑAS === */
@media (max-width: 400px) {
  .seccion-colaboradores .colaboradores-contenido {
    flex-direction: column;
  }
  .seccion-colaboradores .colaboradores-texto {
    order: 1;
  }
  .seccion-colaboradores .colaboradores-imagen {
    order: 2;
  }

  /* Para pantallas muy pequeñas como 344px, usar viewport width */
  .colaboradores-texto h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important;
    line-height: 1.05 !important;
    word-break: break-word;
    hyphens: auto;
  }
}

/* === SISTEMA LIMPIO SIN !IMPORTANT === */
/* Reglas específicas eliminadas - usar estilos principales de colaboradores */

/* === SECCIÓN LIMPIA: Colaboradores ahora funciona correctamente con responsive === */

/* Enfocar imagen de Principios ASG más arriba */
.seccion-principios-asg .principios-asg-img img {
  object-position: top !important;
}

/* Enfocar imagen de Principios ASG completamente arriba */
.seccion-principios-asg .principios-asg-img img {
  object-position: 0 0 !important;
}

/* Solo enfoca la imagen de la sección Principios ASG en la parte de arriba */
.seccion-principios-asg .categorias-img img {
  object-position: top !important;
}

/* CSS específico eliminado para usar patrón general */

.marcas-matriz-section {
  width: 100%;
  background: #f7f7f7;
  padding: 4rem 0;
  display: flex;
  justify-content: center;
}

.marcas-matriz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 3.5rem;
  width: 100%;
  max-width: 1400px;
}

.marca-matriz-item {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1/1;
  min-height: 420px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.marca-matriz-item img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}
.marca-matriz-item:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.marca-matriz-vacio {
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* Eliminar el estilo especial del primer cuadro */
.marca-matriz-item:first-child {
  grid-column: auto;
  grid-row: auto;
  min-height: 340px;
  aspect-ratio: 1/1;
}
.marca-matriz-item:first-child img {
  width: 80%;
  height: 80%;
}

@media (max-width: 900px) {
  .marcas-matriz-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(9, 1fr);
    gap: 2rem;
  }
  .marca-matriz-item {
    min-height: 240px;
  }
}
@media (max-width: 600px) {
  .marcas-matriz-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(18, 1fr);
    gap: 1rem;
  }
  .marca-matriz-item {
    min-height: 200px; /* Mejorado para móviles - era 120px */
  }
}

/* Mejoras de accesibilidad para navegación por teclado */
.marca-matriz-item:focus {
  outline: 3px solid #ff0000;
  outline-offset: 2px;
  transform: scale(1.02);
}

.marca-matriz-item:focus-visible {
  outline: 3px solid #ff0000;
  outline-offset: 2px;
}

/* Mejora para el título principal */
.marcas-custom-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.1;
}

.marcas-custom-title .marcas-custom-title-red,
.marcas-custom-title .marcas-custom-title-brown {
  margin: 0;
}

/* Clase para screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.marca-matriz-rojo {
  background: #ff0000 !important;
}
.marca-matriz-rojo img {
  filter: none;
}

.marca-matriz-full-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  padding: 10px;
  display: block;
  box-sizing: border-box;
}

/* Mejora adicional para móviles - evitar que las imágenes se vean muy pequeñas */
@media (max-width: 600px) {
  .marca-matriz-full-img img {
    padding: 5px;
    min-height: 150px;
  }
}

/* ===================================================
   HERO SECTION CARRUSEL - PÁGINA ALMACENES
   ===================================================== */
.carrusel-container {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Versión con background dinámico via CSS custom property */
.carrusel-container.carrusel-almacenes {
  background-image: var(--hero-bg-image);
}

.carrusel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carrusel-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.carrusel-dark-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
}

/* En móvil, ajustar altura del gradiente para que coincida exactamente con la imagen */
@media (max-width: 768px) {
  .carrusel-dark-gradient {
    height: 50vh;
    min-height: 350px; /* Mismo height que el carrusel-container en móvil */
  }
}

@media (max-width: 480px) {
  .carrusel-dark-gradient {
    height: 45vh;
    min-height: 300px; /* Mismo height que el carrusel-container en móvil pequeño */
  }
}

/* Hero overlay definition moved to main section */

/* Hero overlay content definition moved to main section */

.hero-overlay-content h1 {
  color: #fff;
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: bold;
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  margin: 0;
}

.hero-overlay-text {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: clamp(1rem, 3vw, 1.5rem);
}

/* === RESPONSIVE HERO CARRUSEL === */
@media (max-width: 768px) {
  .carrusel-container {
    height: 50vh;
    min-height: 350px;
  }

  .hero-overlay {
    align-items: center;
    justify-content: center;
    padding-top: 0;
  }

  .hero-overlay-content {
    margin-left: 0;
    max-width: 90%;
    text-align: center;
    align-items: center;
    padding: 0 1rem;
  }

  .hero-overlay-content h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    text-align: center;
  }

  .hero-overlay-text {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .carrusel-container {
    height: 45vh;
    min-height: 300px;
  }

  .hero-overlay-content {
    max-width: 95%;
    gap: 0.8rem;
  }

  .hero-overlay-content h1 {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
    line-height: 1.2;
  }

  .hero-overlay-text {
    font-size: clamp(0.8rem, 4.5vw, 1rem);
    line-height: 1.3;
  }
}

/* Compatibilidad con estilos legacy */
.almacenes-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.almacenes-hero__overlay {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 60px 40px;
  max-width: 700px;
  margin-left: 5vw;
  border-radius: 10px;
}

.almacenes-hero h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.1;
}

.almacenes-hero p {
  font-size: 1.5rem;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .almacenes-hero__overlay {
    padding: 30px 10px;
    max-width: 100%;
    margin-left: 0;
  }
  .almacenes-hero h1 {
    font-size: 2rem;
  }
  .almacenes-hero p {
    font-size: 1rem;
  }
}

/* ===================================================
   SECCIÓN LISTA DE ALMACENES
   ===================================================== */
.almacenes-lista {
  padding: 40px 0 60px 0;
  background: #fff;
}

.almacenes-titulo {
  color: #ff0000;
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  text-align: left;
  margin-bottom: 3.5rem;
  letter-spacing: 1px;
  margin-left: 0;
  padding-left: 3rem;
}

.almacenes-grid {
  display: grid;
  grid-template-columns: repeat(2, 600px);
  column-gap: 7rem;
  row-gap: 10rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 1rem;
}

.almacen-card {
  background: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 600px;
  aspect-ratio: 4/5;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: all 0.3s ease;
}

.almacen-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.almacen-card h3 {
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  margin: 1rem 0 0.5rem 0;
  padding: 0 1.2rem;
  text-align: center;
}

.almacen-card img {
  width: 100%;
  height: 40%;
  object-fit: cover;
  border-radius: 0;
  min-height: 220px;
  max-height: 320px;
}

.almacen-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.2rem 1.2rem 1.2rem;
  background: #f7f7f7;
  border-radius: 0;
}

/* === RESPONSIVE ALMACENES GRID === */
@media (max-width: 1400px) {
  .almacenes-grid {
    grid-template-columns: repeat(2, minmax(400px, 550px));
    column-gap: 4rem;
    row-gap: 6rem;
  }
  .almacen-card {
    width: 100%;
    max-width: 550px;
  }
}

@media (max-width: 1200px) {
  .almacenes-grid {
    grid-template-columns: repeat(2, minmax(350px, 500px));
    column-gap: 3rem;
    row-gap: 4rem;
  }
  .almacen-card {
    max-width: 500px;
  }
}

@media (max-width: 1000px) and (min-width: 901px) {
  .almacenes-titulo {
    text-align: center;
    padding: 0 1rem;
    margin-bottom: 2.5rem;
  }

  .almacenes-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 3.5rem;
    max-width: 90vw;
    padding: 0 5vw;
  }

  .almacen-card {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 0.7/1;
    margin: 0 auto;
    min-height: 580px;
  }

  .almacen-card img {
    height: 32%;
    min-height: 200px;
    max-height: 240px;
  }

  .almacen-info {
    padding: 1.8rem 1.5rem;
    min-height: 320px;
  }
}

@media (max-width: 900px) {
  .almacenes-titulo {
    text-align: center;
    padding: 0 1rem;
    margin-bottom: 2.5rem;
  }

  .almacenes-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 3rem;
    max-width: 95vw;
    padding: 0 2.5vw;
  }

  .almacen-card {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 0.75/1;
    margin: 0 auto;
    min-height: 520px;
  }

  .almacen-card img {
    height: 35%;
    min-height: 180px;
    max-height: 220px;
  }

  .almacen-info {
    padding: 1.5rem 1.2rem;
    min-height: 280px;
  }
}

/* ===================================================
   CATEGORÍAS - ESTILOS ESPECÍFICOS
   ===================================================== */

.categorias-lista {
  padding: 40px 0 60px 0;
  background: #fff;
}

.categorias-titulo {
  color: var(--rojo-rey);
  font-family: var(--font-titulares);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  text-align: left;
  margin-bottom: 3.5rem;
  letter-spacing: 1px;
  margin-left: 0;
  padding-left: 3rem;
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 2rem;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.categoria-card {
  background: var(--amarillo-la-corona);
  border-radius: 15px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  min-height: 120px;
  width: 100%;
}

.categoria-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.categoria-card h3 {
  color: var(--cafe-lealtad);
  font-family: var(--font-titulares);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin: 0;
  padding: 0;
  text-align: left;
  flex: 1;
}

.categoria-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 0;
  flex-shrink: 0;
}

/* === RESPONSIVE CATEGORÍAS === */
@media (max-width: 1400px) {
  .categorias-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 2rem;
  }
}

@media (max-width: 1200px) {
  .categorias-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 2rem;
    padding: 0 1.5rem;
  }
}

@media (max-width: 1000px) and (min-width: 769px) {
  .categorias-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
    row-gap: 2rem;
  }
}

@media (max-width: 768px) {
  .categorias-titulo {
    text-align: center;
    padding: 0 1rem;
    margin-bottom: 2rem;
    color: var(--cafe-lealtad);
  }

  .categorias-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.5rem;
    max-width: 95vw;
    padding: 0 2.5vw;
  }

  .categoria-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    min-height: 100px;
    padding: 1rem;
    gap: 1rem;
  }

  .categoria-card img {
    width: 80px;
    height: 80px;
  }

  .categoria-card h3 {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
  }
}

@media (max-width: 600px) {
  .categorias-lista {
    padding: 20px 0 40px 0;
  }

  .categorias-titulo {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    margin-bottom: 2rem;
    padding: 0 1rem;
    color: var(--cafe-lealtad);
  }

  .categorias-grid {
    row-gap: 1.25rem;
    max-width: 92vw;
    padding: 0 4vw;
  }

  .categoria-card {
    min-height: 90px;
    padding: 0.8rem;
  }

  .categoria-card img {
    width: 70px;
    height: 70px;
  }

  .categoria-card h3 {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }
}

@media (max-width: 400px) {
  .almacenes-grid {
    row-gap: 2rem;
    max-width: 95vw;
    padding: 0 2.5vw;
  }

  .almacen-card {
    aspect-ratio: 0.65/1;
    min-height: 450px;
  }

  .almacen-card img {
    height: 30%;
    min-height: 130px;
    max-height: 160px;
  }

  .almacen-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 280px;
  }

  .almacen-iconos {
    margin-top: auto;
    padding-top: 1rem;
  }
}

.almacen-info p {
  margin: 0.5rem 0;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  line-height: 1.4;
  color: var(--cafe-lealtad);
}

.almacen-info strong {
  color: var(--cafe-lealtad);
  font-weight: bold;
  font-family: "Montserrat", var(--font-parrafos), sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
}

.almacen-iconos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  justify-content: flex-start;
}

.almacen-iconos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.almacen-iconos a:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  border-color: var(--rojo-rey);
}

.almacen-iconos a img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  margin: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.almacen-iconos a img[alt="Google Maps"] {
  width: 24px;
  height: 24px;
}

/* === RESPONSIVE ICONOS === */
@media (max-width: 600px) {
  .almacen-iconos {
    gap: 1.2rem;
    justify-content: center;
    margin-top: 1.2rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(83, 49, 11, 0.1);
  }

  .almacen-iconos a {
    width: 48px;
    height: 48px;
  }

  .almacen-iconos a img {
    width: 28px;
    height: 28px;
  }

  .almacen-iconos a img[alt="Google Maps"] {
    width: 24px;
    height: 24px;
  }

  /* Asegurar que los iconos siempre tengan espacio suficiente */
  .almacen-info {
    min-height: 240px;
  }
}

@media (max-width: 400px) {
  .almacen-iconos {
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .almacen-iconos a {
    width: 44px;
    height: 44px;
  }

  .almacen-iconos a img {
    width: 26px;
    height: 26px;
  }

  .almacen-iconos a img[alt="Google Maps"] {
    width: 22px;
    height: 22px;
  }

  /* Asegurar distribución óptima del contenido */
  .almacen-info {
    min-height: 260px;
  }

  .almacen-info p {
    margin: 0.3rem 0;
    line-height: 1.3;
  }
}

/* === SEPARADOR HORIZONTAL ENTRE SECCIONES === */
.almacenes-separator {
  margin: 2.5rem auto;
  border: none;
  border-top: 4px solid #ccc;
  width: 96%;
  max-width: 1400px;
}

/* === Sección Aliado Comercial === */
.aliado-comercial-section {
  width: 100%;
  background: #fff;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.aliado-comercial-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  gap: 3rem;
  width: 100%;
  padding: 0 2vw;
  min-height: 450px;
}

.aliado-comercial-texto {
  flex: 1 1 0;
  max-width: 50%;
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
}

/* Nuevas clases semánticas */
.aliado-header {
  margin-bottom: 2rem;
}

.aliado-descripcion {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--cafe-lealtad);
}

.aliado-beneficios {
  margin: 2rem 0 1rem 0;
}

.aliado-titulo-amarillo {
  color: var(--amarillo-la-corona);
  font-family: "Black Han Sans", sans-serif;
  font-size: 3rem;
  font-weight: 400;
}

.aliado-titulo-rojo {
  color: #ff0000;
  font-family: "Black Han Sans", sans-serif;
  font-size: 3rem;
  font-weight: bold;
}

.aliado-comercial-texto h3,
.aliado-beneficios h3 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: bold;
  color: var(--cafe-lealtad);
  margin: 0 0 1.5rem 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Lista de beneficios con viñetas personalizadas */
.aliado-comercial-section .aliado-beneficios ul {
  font-size: clamp(1rem, 2.2vw, 1.3rem) !important;
  line-height: 1.7 !important;
  margin-bottom: 2rem !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.aliado-comercial-section .aliado-beneficios ul li {
  position: relative !important;
  padding-left: 2rem !important;
  margin-bottom: 1rem !important;
  color: var(--cafe-lealtad) !important;
}

.aliado-comercial-section .aliado-beneficios ul li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #e60000 !important;
  font-weight: bold !important;
  font-size: 1.2rem !important;
  width: 1.5rem !important;
  text-align: center !important;
}

.btn-aliado-comercial {
  background: var(--amarillo-la-corona);
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: bold;
  border-radius: 0.8rem;
  padding: 1.2rem 3rem;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(255, 205, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  margin-left: 0;
  width: fit-content;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.btn-aliado-comercial::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn-aliado-comercial:hover {
  background: var(--amarillo-monarca);
  color: var(--cafe-lealtad);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 239, 0, 0.4);
}

.btn-aliado-comercial:hover::before {
  left: 100%;
}

.btn-aliado-comercial:active {
  transform: translateY(-1px);
  transition: transform 0.1s;
}
.btn-aliado-comercial .arrow {
  font-size: 1.5rem;
  margin-left: 0.7rem;
  vertical-align: middle;
  color: var(--cafe-lealtad);
}

.aliado-comercial-imagen {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* Reset margin por defecto de figure */
}

.aliado-comercial-imagen img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  object-fit: cover;
}

.aliado-comercial-imagen img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1100px) {
  .aliado-comercial-container {
    flex-direction: column;
    gap: 3rem;
    padding: 0 1.5rem;
  }

  .aliado-comercial-texto,
  .aliado-comercial-imagen {
    max-width: 100%;
    width: 100%;
  }

  .aliado-titulo-amarillo,
  .aliado-titulo-rojo {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    text-align: center;
  }

  .aliado-header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .aliado-descripcion {
    text-align: center;
    max-width: 90%;
    margin: 0 auto 2rem;
  }

  .aliado-beneficios {
    text-align: left;
    max-width: 100%;
  }

  .btn-aliado-comercial {
    margin: 2rem 0 0 0;
    display: flex;
    width: fit-content;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .aliado-comercial-section {
    padding: 3rem 0 !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .aliado-comercial-container {
    height: auto !important;
  }

  .aliado-comercial-container {
    gap: 2.5rem;
    padding: 0 1rem;
  }

  .aliado-beneficios ul li {
    margin-bottom: 0.8rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .aliado-comercial-section {
    padding: 2.5rem 0 !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .aliado-comercial-container {
    height: auto !important;
  }

  .aliado-comercial-container {
    gap: 2rem;
    padding: 0 0.8rem;
  }

  .btn-aliado-comercial {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: fit-content;
    white-space: nowrap;
  }
}
/* === Fin Sección Aliado Comercial === */

/* === TIPOGRAFÍA ALIADO COMERCIAL OPTIMIZADA === */
/* Los estilos responsivos ya están definidos en la sección principal de aliado comercial */

/* ===================================================
   MEJORAS ADICIONALES PARA DISPOSITIVOS MÓVILES
   ===================================================== */

/* Mejor área de toque para enlaces */
.almacen-iconos a {
  min-height: 44px;
  min-width: 44px;
}

/* Espaciado mejorado entre secciones en móvil */
@media (max-width: 768px) {
  .almacenes-lista {
    margin-bottom: 1rem;
  }

  .aliado-comercial-section {
    margin-top: 1rem;
  }

  /* Separador horizontal más visible en móvil */
  hr {
    margin: 1.5rem auto !important;
    border-top: 3px solid #ccc !important;
    width: 90% !important;
  }
}

/* Mejoras de contraste para dispositivos móviles */
@media (max-width: 480px) {
  .almacen-card h3 {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.8rem 1rem;
    margin: 0;
    border-radius: 0 0 8px 8px;
  }

  .almacen-info {
    background: rgba(247, 247, 247, 0.98);
  }

  /* Texto más legible en el hero */
  .hero-overlay-content h1,
  .hero-overlay-text {
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.8);
  }
}

/* Optimizaciones para pantallas muy pequeñas */
@media (max-width: 320px) {
  .almacenes-titulo {
    padding: 0 0.5rem;
    font-size: 1.3rem;
  }

  .almacen-card {
    margin: 0 0.5rem;
  }

  .almacen-info {
    padding: 0.6rem;
  }

  .btn-aliado-comercial {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Mejoras de rendimiento para móviles */
@media (max-width: 768px) {
  .almacen-card,
  .aliado-comercial-imagen img {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Reducir animaciones en dispositivos con recursos limitados */
  @media (prefers-reduced-motion: reduce) {
    .almacen-card:hover {
      transform: none;
    }

    .btn-aliado-comercial:hover {
      transform: none;
    }

    .almacen-iconos a:hover {
      transform: none;
    }
  }
}

/* Color café para Ventas Corporativas en Aliado Comercial */
.aliado-cafe {
  color: var(--cafe-lealtad);
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
}

/* Imagen de Aliado Comercial pegada al borde derecho */
@media (min-width: 1100px) {
  .aliado-comercial-container {
    padding-right: 0;
  }
  .aliado-comercial-imagen {
    justify-content: flex-end;
    margin-right: 0;
    padding-right: 0;
  }
  .aliado-comercial-imagen img {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    display: block;
  }
}

/* === TIPOGRAFÍA OPTIMIZADA ALMACENES === */
/* Los estilos de .almacen-info ya están definidos en la sección anterior */

@media (min-width: 1100px) {
  .aliado-comercial-section,
  .aliado-comercial-container {
    position: relative;
    overflow: visible;
  }
  .aliado-comercial-imagen {
    position: absolute;
    top: 0;
    right: 0;
    width: 60vw;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    margin: 0;
    padding: 0;
    z-index: 1;
  }
  .aliado-comercial-imagen img {
    height: 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    display: block;
    border-radius: 0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    object-position: right;
  }
  .aliado-comercial-texto {
    position: relative;
    z-index: 2;
    background: #fff;
  }
}

.aliado-comercial-imagen img {
  border-radius: 0 !important;
}

@media (min-width: 1100px) {
  .aliado-comercial-container {
    align-items: stretch;
  }
  .aliado-comercial-imagen {
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    height: 100%;
    display: flex;
    margin-right: 0;
    padding-right: 0;
  }
  .aliado-comercial-imagen img {
    border-radius: 0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    margin-right: 0;
    object-fit: cover;
    object-position: right;
  }
}

/* ===================================================
   SECCIÓN ALIADO COMERCIAL - RESPONSIVE MEJORADA
   ===================================================== */
.aliado-comercial-section {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  background: #fff;
  overflow-x: hidden;
  padding: 0 !important;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
}

.aliado-comercial-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.aliado-comercial-texto {
  flex: 0 0 40vw;
  max-width: 40vw;
  min-width: 320px;
  padding: 3rem 3vw 3rem 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  background: #fff;
}

.aliado-titulo-amarillo {
  color: var(--amarillo-la-corona);
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}

.aliado-titulo-rojo {
  color: #ff0000;
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: bold;
  margin: 0 0 1.5rem 0;
  line-height: 1.1;
}

.aliado-comercial-texto h3 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: bold;
  color: var(--cafe-lealtad);
  margin-top: 2rem;
}

.aliado-comercial-texto p {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  line-height: 1.4;
}

.aliado-comercial-texto ul {
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.btn-aliado-comercial {
  background: var(--amarillo-la-corona);
  color: var(--cafe-lealtad);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: bold;
  border-radius: 0.7rem;
  padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.5rem, 3vw, 2.5rem);
  text-decoration: none;
  box-shadow: 4px 6px 16px 0 rgba(255, 205, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1.5rem;
  transition: all 0.3s ease;
}

.btn-aliado-comercial:hover {
  background: var(--amarillo-monarca);
  color: var(--cafe-lealtad);
  transform: translateY(-2px);
  box-shadow: 6px 8px 20px 0 rgba(255, 239, 0, 0.25);
}

.btn-aliado-comercial .arrow {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-left: 0.7rem;
  vertical-align: middle;
  color: var(--cafe-lealtad);
}

.aliado-comercial-imagen {
  flex: 1 1 60vw;
  max-width: 60vw;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}

.aliado-comercial-imagen img {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  margin: 0;
}

/* === RESPONSIVE ALIADO COMERCIAL === */

/* Desktop: Asegurar 100vh solo en pantallas grandes */
@media (min-width: 1101px) {
  .aliado-comercial-section {
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .aliado-comercial-container {
    height: 100% !important;
  }

  /* Ajustes refinados para el texto en desktop */
  .aliado-comercial-texto {
    padding: 1.5rem 2.5vw 1.5rem 6vw !important;
  }

  .aliado-titulo-amarillo {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }

  .aliado-titulo-rojo {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
    margin: 0 0 0.8rem 0 !important;
    line-height: 1.1 !important;
  }

  .aliado-descripcion {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 1.2rem !important;
  }

  .aliado-comercial-texto h3 {
    font-size: clamp(1rem, 2vw, 1.3rem) !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.8rem !important;
  }

  .aliado-comercial-texto ul {
    font-size: clamp(0.85rem, 1.6vw, 1.1rem) !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.4 !important;
  }

  .btn-aliado-comercial {
    font-size: clamp(0.9rem, 1.6vw, 1.05rem) !important;
    padding: clamp(0.6rem, 1.5vw, 0.8rem) clamp(1.2rem, 2.2vw, 1.8rem) !important;
    margin-top: 0.8rem !important;
  }

  .btn-aliado-comercial .arrow {
    font-size: clamp(0.95rem, 1.8vw, 1.2rem) !important;
    margin-left: 0.5rem !important;
  }
}

@media (max-width: 1200px) {
  .aliado-comercial-texto {
    padding: 3rem 2vw 3rem 5vw;
  }
}

@media (max-width: 1100px) {
  .aliado-comercial-section {
    height: auto !important;
    align-items: stretch !important;
    padding: 3rem 0 !important;
  }

  .aliado-comercial-container {
    flex-direction: column;
    min-height: unset;
    height: auto !important;
    width: 100vw;
    max-width: 100vw;
  }

  .aliado-comercial-texto {
    flex: none;
    max-width: 100vw;
    width: 100vw;
    padding: 3rem 2rem;
    text-align: center;
  }

  .aliado-comercial-imagen {
    flex: none;
    max-width: 100vw;
    width: 100vw;
    height: 350px;
    min-height: 250px;
    max-height: 450px;
    justify-content: center;
    padding: 0 1rem 2rem 1rem;
  }

  .aliado-comercial-imagen img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  .aliado-comercial-texto {
    padding: 2rem 1.5rem;
  }

  .aliado-titulo-amarillo,
  .aliado-titulo-rojo {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .aliado-comercial-texto h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    margin-top: 1.5rem;
  }

  .aliado-comercial-texto p {
    font-size: clamp(0.9rem, 3.5vw, 1.2rem);
  }

  .aliado-comercial-texto ul {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  }

  .aliado-comercial-imagen {
    height: 300px;
    min-height: 200px;
    max-height: 350px;
    padding: 0 1rem 1.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .aliado-comercial-texto {
    padding: 1.5rem 1rem;
  }

  .aliado-titulo-amarillo,
  .aliado-titulo-rojo {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .aliado-comercial-texto h3 {
    font-size: clamp(1rem, 5vw, 1.2rem);
    margin-top: 1rem;
  }

  .aliado-comercial-texto p {
    font-size: clamp(0.85rem, 4vw, 1rem);
  }

  .aliado-comercial-texto ul {
    font-size: clamp(0.85rem, 4vw, 0.95rem);
    margin-bottom: 1.5rem;
  }

  .btn-aliado-comercial {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    padding: clamp(0.7rem, 3vw, 0.9rem) clamp(1.2rem, 4vw, 1.8rem);
    margin-top: 1rem;
  }

  .aliado-comercial-imagen {
    height: 250px;
    min-height: 180px;
    max-height: 300px;
    padding: 0 0.5rem 1rem 0.5rem;
  }
}
/* === Fin ajuste Aliado Comercial === */

body.admin-bar body:not(.admin-bar) .navbar-nav-custom .nav-link {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.navbar-nav-custom li {
  margin-right: 1.8rem;
}
.navbar-nav-custom li:last-child {
  margin-right: 0;
}

/* ===================================================
   PÁGINA DE LOGIN - ESTILOS COMPLETOS Y OPTIMIZADOS
   =================================================== */

/* === WRAPPER PRINCIPAL === */
.login-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.login-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* === SECCIÓN PRINCIPAL === */
.login-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.login-container {
  display: flex;
  background: #ffffff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* === COLUMNA DEL FORMULARIO === */
.login-form-col {
  flex: 1;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  min-height: 600px;
}

.login-form-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.login-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--rojo-rey);
  font-family: "Black Han Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.login-subtitle {
  color: var(--cafe-lealtad);
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.8;
  font-weight: 400;
}

/* === FORMULARIO === */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-weight: 600;
  color: var(--cafe-lealtad);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.required {
  color: var(--rojo-rey);
  font-weight: bold;
}

.form-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid #e1e5e9;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s ease;
  background: #fafbfc;
}

.form-input:focus {
  outline: none;
  border-color: var(--rojo-rey);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.form-input:hover:not(:focus) {
  border-color: #c1c7cd;
  background: #ffffff;
}

.form-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.form-help {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* === BOTÓN PRINCIPAL === */
.btn-login {
  position: relative;
  width: 100%;
  padding: 1.25rem 2rem;
  background: linear-gradient(135deg, var(--rojo-rey) 0%, #c41e3a 100%);
  color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  margin-top: 0.5rem;
}

.btn-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-login:hover::before {
  left: 100%;
}

.btn-login:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.25);
}

.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2);
}

.btn-loading {
  display: none;
}

.btn-login.loading .btn-text {
  display: none;
}

.btn-login.loading .btn-loading {
  display: inline;
}

/* === INFORMACIÓN Y SEPARADOR === */
.login-info {
  text-align: center;
  margin: 1.5rem 0;
}

.login-info small {
  color: #6b7280;
  font-size: 0.875rem;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  text-align: center;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.login-divider span {
  padding: 0 1rem;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* === BOTÓN MICROSOFT === */
.btn-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 2rem;
  background: #ffffff;
  color: #374151;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.btn-microsoft:hover {
  background: #f8fafc;
  border-color: #d1d5db;
  color: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-microsoft:active {
  transform: translateY(0);
}

.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* === MENSAJES DE ERROR Y ÉXITO === */
.login-error,
.login-success {
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  font-weight: 500;
  text-align: left;
  border-left: 4px solid;
  position: relative;
  animation: slideInDown 0.3s ease-out;
}

.login-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border-left-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}

.login-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #16a34a;
  border-left-color: #16a34a;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
}

.login-error strong,
.login-success strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* === COLUMNA DE INFORMACIÓN COMERCIAL === */
.login-image-col {
  flex: 1;
  background: linear-gradient(
    135deg,
    var(--amarillo-la-corona) 0%,
    #f59e0b 100%
  );
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-image-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.comercial-content {
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin: 0 auto;
}

.comercial-title {
  font-family: "Black Han Sans", sans-serif;
  color: var(--cafe-lealtad);
  font-size: 2.25rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  text-align: left;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.text-rojo {
  color: var(--rojo-rey);
  text-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
}

.comercial-description {
  margin-bottom: 2rem;
}

.comercial-description p {
  color: var(--cafe-lealtad);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
}

.comercial-description strong {
  color: var(--rojo-rey);
  font-weight: 600;
}

.beneficios-section {
  margin-bottom: 2rem;
}

.beneficios-title {
  color: var(--cafe-lealtad);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

.beneficios-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.beneficios-list li {
  color: var(--cafe-lealtad);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
}

.beneficios-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rojo-rey);
  font-weight: bold;
  font-size: 1.1rem;
}

.comercial-image {
  margin: 2rem 0 0 0;
  text-align: center;
}

.comercial-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comercial-image img:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ===================================================
   RESPONSIVE DESIGN - PÁGINA DE LOGIN
   =================================================== */

/* === TABLETS Y DISPOSITIVOS MEDIANOS === */
@media (max-width: 1024px) {
  .login-container {
    max-width: 900px;
    border-radius: 1.25rem;
  }

  .login-form-col {
    padding: 3rem 2.5rem;
  }

  .login-image-col {
    padding: 3rem 2.5rem;
  }

  .login-title {
    font-size: 2.25rem;
  }

  .comercial-title {
    font-size: 2rem;
  }
}

/* === TABLETS PORTRAIT === */
@media (max-width: 768px) {
  .login-main {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-container {
    flex-direction: column;
    max-width: 100%;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  .login-form-col {
    padding: 2.5rem 2rem;
    min-height: auto;
    order: 1;
  }

  .login-image-col {
    padding: 2.5rem 2rem;
    order: 2;
    min-height: auto;
  }

  .login-form-header {
    margin-bottom: 2rem;
  }

  .login-title {
    font-size: 2rem;
    text-align: center;
  }

  .login-subtitle {
    text-align: center;
    font-size: 1rem;
  }

  .comercial-content {
    max-width: 100%;
    text-align: center;
  }

  .comercial-title {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .comercial-description p {
    font-size: 1rem;
    text-align: center;
  }

  .beneficios-title {
    text-align: center;
    font-size: 1.15rem;
  }

  .beneficios-list {
    max-width: 400px;
    margin: 0 auto;
  }

  .beneficios-list li {
    text-align: left;
    font-size: 0.95rem;
  }

  .comercial-image img {
    max-width: 100%;
  }
}

/* === MÓVILES Y DISPOSITIVOS PEQUEÑOS === */
@media (max-width: 480px) {
  .login-page-wrapper {
    background: #ffffff;
  }

  .login-main {
    padding: 0.5rem;
    padding-top: 1rem;
  }

  .login-container {
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }

  .login-form-col {
    padding: 2rem 1.5rem;
  }

  .login-image-col {
    padding: 2rem 1.5rem;
  }

  .login-title {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .login-subtitle {
    font-size: 0.95rem;
  }

  .login-form {
    gap: 1.25rem;
  }

  .form-input {
    padding: 1rem;
    font-size: 16px; /* Evita zoom en iOS */
    border-radius: 0.625rem;
  }

  .btn-login {
    padding: 1.125rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.625rem;
    min-height: 48px; /* Toque táctil óptimo */
  }

  .btn-microsoft {
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 0.625rem;
    min-height: 48px; /* Toque táctil óptimo */
    gap: 0.5rem;
  }

  .comercial-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .comercial-description p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .beneficios-title {
    font-size: 1.05rem;
  }

  .beneficios-list li {
    font-size: 0.9rem;
    padding-left: 1.25rem;
  }

  .comercial-image {
    margin-top: 1.5rem;
  }

  .comercial-image img {
    max-width: 100%;
    border-radius: 1rem;
  }

  .login-error,
  .login-success {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 0.625rem;
  }
}

/* === MÓVILES MUY PEQUEÑOS === */
@media (max-width: 360px) {
  .login-form-col,
  .login-image-col {
    padding: 1.5rem 1rem;
  }

  .login-title {
    font-size: 1.5rem;
  }

  .comercial-title {
    font-size: 1.35rem;
  }

  .form-input {
    padding: 0.875rem;
  }

  .btn-login,
  .btn-microsoft {
    padding: 1rem;
    font-size: 0.95rem;
  }

  .comercial-image img {
    max-width: 100%;
  }
}

/* === LANDSCAPE MÓVILES === */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .login-main {
    padding: 1rem 0.5rem;
    align-items: center;
  }

  .login-container {
    flex-direction: row;
    max-height: 90vh;
    overflow-y: auto;
  }

  .login-form-col {
    padding: 1.5rem;
    flex: 1;
  }

  .login-image-col {
    padding: 1.5rem;
    flex: 1;
  }

  .login-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .comercial-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .comercial-image {
    margin-top: 1rem;
  }

  .comercial-image img {
    max-width: 100%;
  }
}

/* === ANIMACIONES RESPONSIVAS === */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === MEJORAS DE ACCESIBILIDAD === */
@media (prefers-reduced-motion: reduce) {
  .login-container,
  .login-container:hover,
  .form-input,
  .btn-login,
  .btn-microsoft,
  .comercial-image img {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* === ESTADOS ADICIONALES Y MEJORAS UX === */
.form-input.error {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}

.field-error {
  display: block;
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  font-weight: 500;
}

.btn-login.loading {
  background: #9ca3af !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-login.loading:hover {
  background: #9ca3af !important;
  transform: none !important;
}

.temp-message {
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* === UTILIDADES ADICIONALES === */
.text-rojo {
  color: var(--rojo-rey) !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === INTEGRACIÓN CON VARIABLES DEL TEMA === */
.login-page-wrapper {
  /* Usar variables CSS del tema para consistencia */
  font-family: "Montserrat", sans-serif;
}

.login-title,
.comercial-title {
  /* Aprovechar las clases existentes del tema */
  font-family: var(--font-titulares, "Black Han Sans");
}

/* Asegurar que los colores sean consistentes */
.form-input:focus {
  border-color: var(--rojo-rey, #dc2626);
  box-shadow: 0 0 0 4px rgba(var(--rojo-rey-rgb, 220, 38, 38), 0.1);
}

.btn-login {
  background: linear-gradient(
    135deg,
    var(--rojo-rey, #dc2626) 0%,
    #c41e3a 100%
  );
}

.btn-login:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

.comercial-title .text-rojo {
  color: var(--rojo-rey, #dc2626);
}

.comercial-description strong {
  color: var(--rojo-rey, #dc2626);
}

.login-image-col {
  background: linear-gradient(
    135deg,
    var(--amarillo-la-corona, #fbbf24) 0%,
    #f59e0b 100%
  );
}

/* Asegurar colores de texto consistentes */
.login-subtitle,
.form-label,
.form-help,
.comercial-description p,
.beneficios-list li,
.beneficios-title {
  color: var(--cafe-lealtad, #8b4513);
}

.comercial-title {
  color: var(--cafe-lealtad, #8b4513);
}

/* === MEJORAS FINALES DE ACCESIBILIDAD === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Contraste mejorado para accesibilidad */
@media (prefers-contrast: high) {
  .form-input {
    border-width: 2px;
  }

  .btn-login,
  .btn-microsoft {
    border: 2px solid currentColor;
  }

  .login-error,
  .login-success {
    border-width: 2px;
  }
}

/* === FIN: PÁGINA DE LOGIN === */

/* === ESTILOS PARA PÁGINA NUESTROS COLABORADORES === */

.colaboradores-hero {
  padding: 80px 0;
  margin-top: 20px; /* Espacio adicional después del header fijo */
  background: linear-gradient(
    135deg,
    var(--rojo-principal) 0%,
    var(--cafe-lealtad) 100%
  );
}

.colaboradores-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.colaboradores-hero-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.colaboradores-hero-title {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3.5rem;
  line-height: 0.9;
  margin-bottom: 2rem;
}

.colaboradores-titulo-rojo {
  color: var(--rojo-principal);
}

.colaboradores-titulo-marron {
  color: var(--cafe-lealtad);
}

.colaboradores-hero-desc {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
}

.colaboradores-hero-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.colaboradores-hero-img img:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.nuestro-equipo-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.nuestro-equipo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.seccion-titulo-centrado {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.titulo-marron {
  color: var(--cafe-lealtad);
}

.titulo-rojo {
  color: var(--rojo-principal);
}

.seccion-descripcion {
  font-size: 1.2rem;
  color: #666;
  max-width: 800px;
  margin: 0 auto 4rem;
  line-height: 1.6;
}

.equipo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

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

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

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

.stat-numero {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 4rem;
  color: var(--rojo-principal);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
  color: var(--cafe-lealtad);
  font-weight: 600;
}

.valores-equipo-section {
  padding: 80px 0;
  background: #fff;
}

.valores-equipo-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.valor-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.valor-item:hover {
  transform: translateY(-5px);
}

.valor-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.valor-content {
  padding: 2rem;
}

.valor-content h3 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 1.5rem;
  color: var(--rojo-principal);
  margin-bottom: 1rem;
}

.valor-content p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.carreras-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.carreras-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.carreras-titulo-rojo {
  color: var(--rojo-principal);
}

.carreras-titulo-marron {
  color: var(--cafe-lealtad);
}

.carreras-texto h2 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3rem;
  line-height: 0.9;
  margin-bottom: 2rem;
}

.carreras-beneficios {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.carreras-beneficios li {
  padding: 0.5rem 0;
  color: #666;
  font-size: 1.1rem;
}

.btn-carreras {
  display: inline-block;
  background: var(--rojo-principal);
  color: #fff;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-carreras:hover {
  background: var(--cafe-lealtad);
  color: #fff;
  text-decoration: none;
}

.carreras-imagen img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
}

.reconocimientos-section {
  padding: 80px 0;
  background: #fff;
}

.reconocimientos-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.reconocimientos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.reconocimiento-item {
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

.reconocimiento-icono {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.reconocimiento-item h4 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  color: var(--rojo-principal);
  margin-bottom: 1rem;
}

/* === ESTILOS PARA PÁGINA MISIÓN Y VISIÓN === */

.mision-vision-hero {
  position: relative;
  height: 60vh;
  margin-top: 20px; /* Espacio adicional después del header fijo */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mision-vision-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mision-vision-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mision-vision-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 0.8) 0%,
    rgba(139, 69, 19, 0.8) 100%
  );
  z-index: 2;
}

.mision-vision-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 0 2rem;
}

.mision-vision-hero-title {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 4rem;
  margin-bottom: 2rem;
}

.mision-vision-hero-desc {
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

.mision-section {
  padding: 80px 0;
  background: #fff;
}

.mision-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.mision-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.mision-titulo {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3.5rem;
  line-height: 0.9;
  margin-bottom: 2rem;
}

.mision-principal {
  font-size: 1.3rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 3rem;
  font-weight: 500;
}

.mision-puntos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mision-punto {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.punto-icono {
  font-size: 2rem;
  margin-top: 0.5rem;
}

.punto-texto h4 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  color: var(--rojo-principal);
  margin-bottom: 0.5rem;
}

.punto-texto p {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.mision-imagen img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 12px;
}

.vision-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.vision-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.vision-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.vision-titulo {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3.5rem;
  line-height: 0.9;
  margin-bottom: 2rem;
}

.vision-principal {
  font-size: 1.3rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 3rem;
  font-weight: 500;
}

.vision-objetivos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.vision-objetivo {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.objetivo-numero {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 2.5rem;
  color: var(--rojo-principal);
  min-width: 100px;
}

.vision-objetivo p {
  margin: 0;
  color: #666;
  font-weight: 500;
}

.vision-imagen img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 12px;
}

.valores-corporativos-section {
  padding: 80px 0;
  background: #fff;
}

.valores-corporativos-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.valores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.valor-card {
  padding: 3rem 2rem;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease;
}

.valor-card:hover {
  transform: translateY(-5px);
}

.valor-valentia-card {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
}

.valor-equipo-card {
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
}

.valor-pasion-card {
  background: linear-gradient(135deg, #fffaf0 0%, #fdd835 100%);
}

.valor-confianza-card {
  background: linear-gradient(135deg, #f0f8f8 0%, #b2dfdb 100%);
}

.valor-icono {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.valor-card h3 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  color: var(--rojo-principal);
  margin-bottom: 1rem;
}

.valor-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.principios-asg-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.principios-asg-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.asg-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.asg-texto h2 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3.5rem;
  line-height: 0.9;
  margin-bottom: 1rem;
}

.asg-subtitle {
  color: #666;
  font-style: italic;
  margin-bottom: 2rem;
}

.asg-descripcion {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 3rem;
}

.asg-pillars {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.asg-pillar h4 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  color: var(--rojo-principal);
  margin-bottom: 0.5rem;
}

.asg-pillar p {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.asg-imagen img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
}

.compromiso-section {
  padding: 0;
}

.compromiso-hero {
  position: relative;
  height: 50vh;
  margin-top: 20px; /* Espacio adicional después del header fijo */
  overflow: hidden;
}

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

.compromiso-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 0.9) 0%,
    rgba(139, 69, 19, 0.9) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.compromiso-content {
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 0 2rem;
}

.compromiso-content h2 {
  font-family: "Black Han Sans", var(--font-alternativa), sans-serif;
  font-size: 3rem;
  margin-bottom: 2rem;
}

.compromiso-content p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive para páginas nuevas */
@media (max-width: 1200px) {
  .colaboradores-hero-content,
  .mision-content,
  .vision-content,
  .asg-content,
  .carreras-container {
    max-width: 100%;
    padding: 0 1.5rem;
    gap: 3rem;
  }
}

@media (max-width: 992px) {
  .colaboradores-hero-content,
  .mision-content,
  .vision-content,
  .asg-content,
  .carreras-container {
    gap: 2.5rem;
  }

  .colaboradores-hero-title,
  .mision-titulo,
  .vision-titulo {
    font-size: 3rem;
  }

  .mision-vision-hero-title {
    font-size: 3.2rem;
  }

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

  .reconocimientos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .colaboradores-hero {
    padding: 60px 0;
  }

  .colaboradores-hero-content,
  .mision-content,
  .vision-content,
  .asg-content,
  .carreras-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
  }

  .colaboradores-hero-title,
  .mision-titulo,
  .vision-titulo,
  .asg-texto h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .mision-vision-hero {
    height: 50vh;
    min-height: 400px;
  }

  .mision-vision-hero-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }

  .mision-vision-hero-desc {
    font-size: 1.1rem;
  }

  .seccion-titulo-centrado {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .stat-numero {
    font-size: 3rem;
  }

  .valores-equipo-grid,
  .valores-grid,
  .reconocimientos-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .colaboradores-hero-img img {
    height: 300px;
  }

  .mision-principal,
  .vision-principal {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .nuestro-equipo-section,
  .mision-section,
  .vision-section,
  .asg-section {
    padding: 60px 0;
  }
}

@media (max-width: 576px) {
  .colaboradores-hero {
    padding: 40px 0;
  }

  .colaboradores-hero-content,
  .mision-content,
  .vision-content,
  .asg-content,
  .carreras-container {
    padding: 0 0.75rem;
    gap: 1.5rem;
  }

  .colaboradores-hero-title,
  .mision-titulo,
  .vision-titulo {
    font-size: 2rem;
    line-height: 1.1;
  }

  .mision-vision-hero {
    height: 40vh;
    min-height: 350px;
  }

  .mision-vision-hero-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .mision-vision-hero-desc {
    font-size: 1rem;
  }

  .colaboradores-hero-desc {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .seccion-titulo-centrado {
    font-size: 1.8rem;
  }

  .stat-numero {
    font-size: 2.5rem;
  }

  .stat-label {
    font-size: 0.9rem;
  }

  .colaboradores-hero-img img {
    height: 250px;
    border-radius: 8px;
  }

  .nuestro-equipo-section,
  .mision-section,
  .vision-section,
  .asg-section {
    padding: 40px 0;
  }

  .mision-principal,
  .vision-principal {
    font-size: 1rem;
    text-align: justify;
    line-height: 1.8;
  }

  .valor-card,
  .reconocimiento-card {
    padding: 1.5rem 1rem;
  }

  .seccion-descripcion {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .colaboradores-hero-title,
  .mision-titulo,
  .vision-titulo {
    font-size: 1.8rem;
  }

  .mision-vision-hero-title {
    font-size: 1.8rem;
  }

  .seccion-titulo-centrado {
    font-size: 1.6rem;
  }

  .colaboradores-hero-content,
  .mision-content,
  .vision-content {
    padding: 0 0.5rem;
  }

  .mision-vision-hero-content {
    padding: 0 1rem;
  }
}

/* ==========================================
   PÁGINA MISIÓN Y VISIÓN - IMAGEN COMPLETA
   ========================================== */

.mision-vision-imagen-completa {
  width: 100%;
  min-height: auto; /* Eliminar min-height fijo para adaptarse a la imagen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  background-color: var(--blanco-nobleza);
  margin-top: 0;
}

.imagen-completa-container {
  width: 100%;
  max-width: 95vw;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
  /* Contenedor con proporción optimizada para la imagen 2.14:1 */
  aspect-ratio: 2.14;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-mision-vision-completa {
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  object-fit: cover; /* Cambiar a cover para llenar el contenedor manteniendo proporción */
  display: block;
  filter: brightness(0.98);
}

.imagen-mision-vision-completa:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Responsive para tablets */
@media (max-width: 1024px) {
  .mision-vision-imagen-completa {
    padding: 1.5rem 0;
  }

  .imagen-completa-container {
    padding: 0 1rem;
    max-width: 95vw;
    /* Mantener proporción en tablets */
    aspect-ratio: 2.14;
  }

  .imagen-mision-vision-completa {
    border-radius: 6px;
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .mision-vision-imagen-completa {
    padding: 1.5rem 0;
    align-items: center;
  }

  .imagen-completa-container {
    padding: 0 0.5rem;
    max-width: 96vw;
    /* En móviles, ajustar ligeramente la proporción para mejor legibilidad */
    aspect-ratio: 2;
  }

  .imagen-mision-vision-completa {
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .imagen-mision-vision-completa:hover {
    transform: none; /* Deshabilitar hover en móvil */
  }
}

/* Para móviles muy pequeños */
@media (max-width: 480px) {
  .mision-vision-imagen-completa {
    padding: 1rem 0;
  }

  .imagen-completa-container {
    padding: 0 0.25rem;
    max-width: 97vw;
    /* En pantallas muy pequeñas, proporción ligeramente más compacta */
    aspect-ratio: 1.8;
  }

  .imagen-mision-vision-completa {
    border-radius: 2px;
  }
}

/* Para pantallas muy grandes */
@media (min-width: 1400px) {
  .imagen-completa-container {
    max-width: 90vw;
  }

  .imagen-mision-vision-completa {
    max-width: 100%;
  }
}

/* ===================================================
   PÁGINA EJE SOSTENIBLE OPTIMIZADA
   =================================================== */

/* Layout principal */
.eje-sostenible-page {
  min-height: 100vh;
}

/* === HERO SECTION === */
.eje-hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6rem 2rem 4rem;
  background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.25) 100%
    ),
    var(--bg-image) center/cover no-repeat;
  background-attachment: fixed;
}

.eje-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
}

.eje-hero__content {
  max-width: 65ch;
  width: 100%;
  color: white;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eje-hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-family: var(--font-black-han-sans), sans-serif;
  text-align: left;
  color: #ffffff !important;
  opacity: 1;
}

.eje-hero__description {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.5;
  margin: 0;
  opacity: 0.95;
  text-align: left;
}

/* === SECCIÓN DE FILTROS === */
.eje-filters {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 4rem 2rem;
  text-align: center;
}

.eje-filters__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--rojo-rey);
  margin-bottom: 2.5rem;
  font-family: var(--font-black-han-sans), sans-serif;
}

.eje-filters__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.eje-filters__btn {
  position: relative;
  background: white;
  border: 2px solid var(--rojo-rey);
  color: var(--rojo-rey);
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
}

.eje-filters__btn span {
  position: relative;
  z-index: 2;
}

.eje-filters__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--rojo-rey);
  transition: left 0.3s ease;
  z-index: 1;
}

.eje-filters__btn:hover::before,
.eje-filters__btn--active::before {
  left: 0;
}

.eje-filters__btn:hover,
.eje-filters__btn--active {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3);
}

/* === CONTENEDOR DE TARJETAS === */
.eje-container {
  max-width: min(90rem, 95vw);
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* === TARJETAS === */
.eje-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  margin-bottom: 3rem;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.eje-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 20px 40px rgba(0, 0, 0, 0.15);
}

.eje-card--hidden {
  display: none;
}

/* === IMAGEN DE TARJETA === */
.eje-card__image {
  position: relative;
  background: var(--bg-image, #f8f9fa) center/cover no-repeat;
  margin: 0;
  aspect-ratio: 4/3; /* Proporción 4:3 como recomienda Tailwind */
  min-height: 250px;
}

/* Fallback para navegadores que no soportan aspect-ratio */
@supports not (aspect-ratio: 4/3) {
  .eje-card__image {
    padding-bottom: 75%; /* 3/4 = 0.75 = 75% para proporción 4:3 */
    height: 0;
    min-height: 0;
  }
}

/* Las imágenes de fondo se aplicarán via JavaScript */

.eje-card__image--merco {
  background-color: var(--amarillo-la-corona);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* === CONTENIDO DE TARJETA === */
.eje-card__content {
  background: var(--amarillo-la-corona);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cafe-lealtad);
}

.eje-card__category {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cafe-lealtad);
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.eje-card__title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--cafe-lealtad);
}

.eje-card__text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 50ch;
}

.eje-card__text strong {
  font-weight: 700;
  color: #2a1a0d;
}

.eje-card__date {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cafe-lealtad);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid var(--cafe-lealtad);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-start;
  width: auto;
}

.eje-card__date:hover {
  background: var(--cafe-lealtad);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.eje-card__date strong {
  font-weight: 700;
}

/* === RESPONSIVE DESIGN === */
@media (min-width: 1400px) {
  .eje-hero__content {
    max-width: 70ch;
  }
}

@media (max-width: 1200px) {
  .eje-hero__content {
    max-width: 60ch;
  }
}

@media (max-width: 1000px) {
  .eje-card {
    min-height: 60vh;
  }

  .eje-card__content {
    padding: 2.5rem;
  }

  .eje-hero {
    min-height: 60vh;
    padding: 8rem 1.5rem 3rem;
    background-attachment: scroll;
  }

  .eje-hero__content {
    max-width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .eje-filters {
    padding: 3rem 1rem;
  }

  .eje-filters__nav {
    gap: 0.5rem;
  }

  .eje-filters__btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }

  .eje-container {
    padding: 2rem 0.5rem;
  }

  .eje-card {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 2rem;
  }

  .eje-card__image {
    aspect-ratio: 4/3;
    min-height: 200px;
  }

  .eje-card__content {
    padding: 2rem 1.5rem;
  }

  .eje-card__title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .eje-filters {
    padding: 2.5rem 1rem;
  }

  .eje-filters__btn {
    padding: 0.75rem 1.3rem;
    font-size: 0.85rem;
  }

  .eje-hero {
    padding: 10rem 1rem 2rem;
  }

  .eje-hero__content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .eje-hero__title,
  .eje-hero__description {
    text-align: left;
  }

  .eje-hero__title {
    color: #ffffff !important;
  }

  .eje-filters {
    padding: 2rem 0.5rem;
  }

  .eje-filters__btn {
    padding: 0.65rem 1rem;
    font-size: 0.75rem;
  }

  .eje-card {
    border-radius: 1rem;
  }

  .eje-card__image {
    aspect-ratio: 4/3;
    min-height: 180px;
  }

  .eje-card__content {
    padding: 1.5rem 1rem;
  }
}

/* === PREFERENCIAS DE USUARIO === */
@media (prefers-reduced-motion: reduce) {
  .eje-card,
  .eje-filters__btn {
    transition: none;
  }

  .eje-hero {
    background-attachment: scroll;
  }
}

@media (prefers-color-scheme: dark) {
  .eje-filters {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  }
}

/* ===================================================
   FIN PÁGINA EJE SOSTENIBLE
   =================================================== */

/* =====================================================
   ESTILOS DE IMPRESIÓN
   ===================================================== */
@media print {
  /* Ocultar navegación y elementos interactivos */
  .navbar-custom,
  .carrusel-prev,
  .carrusel-next,
  .btn-compra-en-linea,
  .filter-buttons,
  .skip-link {
    display: none;
  }

  /* Resetear padding del body para impresión */
  body {
    padding-top: 0;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  /* Optimizar títulos para impresión */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    color: #000;
  }

  /* Evitar saltos de página en elementos importantes */
  .valor-card,
  .noticia-card,
  .marca-logo {
    page-break-inside: avoid;
  }

  /* Mostrar URLs de enlaces importantes */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

  /* No mostrar URLs para enlaces internos */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
}

/* =====================================================
   MEJORAS DE PERFORMANCE Y ACCESIBILIDAD
   ===================================================== */

/* Suavizar scroll para navegación */
html {
  scroll-behavior: smooth;
}

/* Focus trap para mejor navegación con teclado */
.navbar-custom a:focus,
.btn:focus,
.filter-btn:focus {
  outline: 3px solid var(--amarillo-la-corona);
  outline-offset: 2px;
}

/* Reducir animaciones para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mejoras de contraste para mejor accesibilidad */
@media (prefers-contrast: high) {
  :root {
    --rojo-rey: #cc0000;
    --cafe-lealtad: #2a1a06;
  }

  .navbar-custom,
  .btn-compra-en-linea {
    border: 2px solid currentColor;
  }
}

/* =====================================================
   UTILIDADES Y HELPERS
   ===================================================== */

/* Clases de utilidad para spacing responsive */
.mb-responsive {
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.pt-responsive {
  padding-top: clamp(2rem, 5vw, 4rem);
}

/* Clase para ocultar elementos visualmente pero mantenerlos accesibles */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Clase para contenido que solo se muestra en pantalla */
.screen-reader-only {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* =====================================================
   MEJORAS RESPONSIVE PARA SOMOS EL REY - 2025
   ===================================================== */

/* === MEJORAS HERO OVERLAY === */
.hero-overlay {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-overlay-content {
  margin-left: clamp(2rem, 5vw, 4rem);
  max-width: clamp(300px, 80vw, 900px);
  gap: clamp(0.8rem, 2vw, 1.5rem);
}

.hero-logo-elrey {
  max-width: clamp(200px, 40vw, 400px) !important;
  height: auto;
}

.hero-overlay-text {
  font-size: clamp(1.1rem, 3vw, 2rem) !important;
  line-height: 1.3;
  max-width: 80vw;
}

/* Responsive específico para hero */
@media (max-width: 480px) {
  .hero-overlay {
    padding: 0 1rem;
  }

  .hero-overlay-content {
    margin-left: clamp(1rem, 3vw, 2rem);
    margin-right: 1rem;
  }

  .hero-overlay-text {
    font-size: 1rem !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hero-overlay-text {
    font-size: 1.3rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-overlay-text {
    font-size: 1.6rem !important;
  }
}

/* === MEJORAS SECCIÓN HISTORIA === */
.historia-section {
  min-height: unset;
}

.historia-container {
  min-height: clamp(500px, 70vh, 800px);
  gap: clamp(1rem, 3vw, 3rem);
}

/* Optimización específica para mostrar más de la imagen de sucursal */
.historia-imagen {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.historia-imagen img {
  transition: transform 0.3s ease;
}

.historia-imagen:hover img {
  transform: scale(1.02);
}

/* Mejorar aspect ratio para mostrar más contenido horizontal */
@media (min-width: 1025px) {
  .historia-container {
    min-height: 500px;
  }

  .historia-imagen {
    aspect-ratio: 4/3;
  }

  .historia-imagen img {
    object-fit: cover;
    object-position: 25% center;
    height: 100%;
    width: 100%;
  }
}

.historia-texto {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 7vw);
}

.historia-titulo {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  margin-bottom: clamp(1rem, 3vw, 2.2rem);
}

.historia-texto p {
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  margin-bottom: clamp(0.8rem, 2vw, 1.5rem);
}

/* Tablets específico */
@media (min-width: 769px) and (max-width: 1024px) {
  .historia-container {
    flex-direction: row;
    min-height: 550px;
  }

  .historia-texto {
    flex: 1.2;
    padding: 3rem 2rem 3rem 4rem;
  }

  .historia-imagen {
    flex: 0.8;
    aspect-ratio: 3/2;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .historia-imagen img {
    object-fit: cover;
    object-position: 25% center;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .historia-container {
    flex-direction: column;
    padding: 1rem;
  }

  .historia-texto,
  .historia-imagen {
    max-width: 100%;
    width: 100%;
  }

  .historia-imagen {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
  }

  .historia-imagen img {
    height: clamp(300px, 60vw, 450px);
    object-fit: cover;
    object-position: 25% center;
    max-height: none;
    width: 100%;
    background: #fff;
  }
}

/* Para móviles muy pequeños, mantener el enfoque en 3/4 de la imagen */
@media (max-width: 480px) {
  .historia-imagen {
    background: #fff;
    padding: 0.5rem;
  }

  .historia-imagen img {
    height: 280px;
    object-fit: cover;
    object-position: 25% center;
    background: transparent;
  }
}

/* 
CONFIGURACIÓN DE VISUALIZACIÓN DE IMAGEN:
object-position: 25% center significa:
- Se posiciona en el primer cuarto de la imagen (25% desde la izquierda)
- Esto muestra la MÁXIMA cantidad de contenido de la imagen
- Prácticamente toda la fachada de la sucursal será visible
- Solo se oculta una pequeña parte del extremo izquierdo
*/

/* Para pantallas muy anchas, mantener la misma posición */
@media (min-width: 1400px) {
  .historia-imagen img {
    object-position: 25% center;
  }
}

/* === MEJORAS CONFITERÍA GRANDE === */
.confiteria-grande-hero {
  height: clamp(300px, 50vh, 700px);
  margin-top: 0;
}

.confiteria-grande-overlay {
  padding-right: clamp(1rem, 7vw, 7vw);
  padding-left: clamp(1rem, 7vw, 7vw);
  justify-content: center;
  text-align: center;
}

.confiteria-grande-overlay h2 {
  font-size: clamp(1.5rem, 5vw, 4rem) !important;
  text-align: center;
}

.confiteria-grande-destacado {
  font-size: clamp(2rem, 7vw, 6rem) !important;
}

.confiteria-banner {
  padding: clamp(2rem, 6vw, 5rem) clamp(0.5rem, 2vw, 0.5rem);
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  min-height: clamp(200px, 40vw, 420px);
}

.confiteria-banner strong {
  font-size: clamp(1.8rem, 4.5vw, 3.7rem);
}

.confiteria-banner-amarillo .confiteria-logo {
  max-width: clamp(150px, 40vw, 340px);
}

/* Tablets específico */
@media (min-width: 769px) and (max-width: 1024px) {
  .confiteria-grande-banners {
    flex-direction: row;
  }

  .confiteria-banner {
    min-height: 300px;
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .confiteria-grande-hero {
    height: 250px;
  }

  .confiteria-grande-banners {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .confiteria-banner {
    width: 100% !important;
    min-height: 150px;
    font-size: 1.4rem;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .confiteria-banner strong {
    font-size: 1.6rem;
  }
}

/* CSS problemático con !important eliminado para permitir layout correcto */

/* === MEJORAS PRINCIPIOS ASG === */
.principios-asg-sub {
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

/* === BOTONES RESPONSIVE === */
.btn-categorias,
.btn-colaboradores {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  padding: clamp(0.8rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.2rem);
  border-radius: clamp(0.3rem, 1vw, 0.5rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
}

/* === MEJORAS GENERALES DE TIPOGRAFÍA === */
.principios-asg-destacado {
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
}

/* === OPTIMIZACIONES PARA PANTALLAS PEQUEÑAS === */
@media (max-width: 480px) {
  .historia-texto,
  .promesa-texto,
  .categorias-texto,
  .colaboradores-texto,
  .principios-asg-texto {
    text-align: center;
    padding: 1rem;
  }

  .confiteria-grande-overlay {
    padding: 1rem;
  }
}

/* === SOBRESCRIBIR ESTILOS EXISTENTES PROBLEMÁTICOS === */

/* CSS problemático eliminado para permitir imagen completa */

/* Mejorar gradiente de confitería para mayor contraste */
.confiteria-grande-gradient {
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.1) 70%
  );
}

@media (max-width: 768px) {
  .confiteria-grande-gradient {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
}

/* El gradiente ya está integrado en .hero-gradient */

/* === MEJORAS DE ACCESIBILIDAD === */

/* Focus visible para elementos interactivos */
.btn-categorias:focus-visible,
.btn-colaboradores:focus-visible {
  outline: 2px solid var(--amarillo-la-corona);
  outline-offset: 2px;
}

/* Mejor contraste para texto sobre imágenes */
@media (prefers-contrast: high) {
  .hero-overlay-text {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    border-radius: 0.25rem;
  }

  .confiteria-grande-overlay h2 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

/* === FIN MEJORAS RESPONSIVE SOMOS EL REY === */

/* === RESPONSIVE MÓVIL/TABLET PORTRAIT PARA SECCION-CATEGORIAS === */
@media (max-width: 1024px) {
  /* Layout en columna para móvil y tablets portrait (incluyendo 912px) */
  .seccion-categorias {
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 0;
  }

  .categorias-contenido {
    flex-direction: column;
    height: auto;
    min-height: auto;
    max-height: none;
  }

  /* TEXTO PRIMERO - Copiando estructura exacta de colaboradores-texto */
  .categorias-texto {
    order: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 2rem 1.5rem;
    width: 100%;
    margin: 0;
  }

  /* H2 alineado a la izquierda */
  .categorias-texto h2 {
    text-align: left !important;
    align-self: flex-start !important;
    margin: 0 0 1.5rem 0 !important;
  }

  /* Botón alineado a la izquierda como el H2 */
  .categorias-texto .btn-categorias {
    align-self: flex-start !important;
    display: inline-block !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
  }

  /* IMAGEN SEGUNDA - ALTURA FIJA COMO OTRAS SECCIONES */
  .categorias-img {
    order: 2;
    flex: none;
    width: 100%;
    height: 40vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
  }

  .categorias-img img {
    width: 100%;
    height: 40vh;
    object-fit: cover;
  }
}

/* ===================================================
   MEJORAS ADICIONALES PARA DISPOSITIVOS MÓVILES
   ===================================================== */

/* Mejor área de toque para enlaces */
.almacen-iconos a {
  min-height: 44px;
  min-width: 44px;
}

/* Espaciado mejorado entre secciones en móvil */
@media (max-width: 768px) {
  .almacenes-lista {
    margin-bottom: 1rem;
  }

  .aliado-comercial-section {
    margin-top: 1rem;
  }

  /* Separador horizontal más visible en móvil */
  hr {
    margin: 1.5rem auto !important;
    border-top: 3px solid #ccc !important;
    width: 90% !important;
  }
}

/* Mejoras de contraste para dispositivos móviles */
@media (max-width: 480px) {
  .almacen-card h3 {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.8rem 1rem;
    margin: 0;
    border-radius: 0 0 8px 8px;
  }

  .almacen-info {
    background: rgba(247, 247, 247, 0.98);
  }

  /* Texto más legible en el hero */
  .hero-overlay-content h1,
  .hero-overlay-text {
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.8);
  }
}

/* Optimizaciones para pantallas muy pequeñas */
@media (max-width: 320px) {
  .almacenes-titulo {
    padding: 0 0.5rem;
    font-size: 1.3rem;
  }

  .almacen-card {
    margin: 0 0.5rem;
  }

  .almacen-info {
    padding: 0.6rem;
  }

  .btn-aliado-comercial {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Mejoras de rendimiento para móviles */
@media (max-width: 768px) {
  .almacen-card,
  .aliado-comercial-imagen img {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Reducir animaciones en dispositivos con recursos limitados */
  @media (prefers-reduced-motion: reduce) {
    .almacen-card:hover {
      transform: none;
    }

    .btn-aliado-comercial:hover {
      transform: none;
    }

    .almacen-iconos a:hover {
      transform: none;
    }
  }
}

/* === DISPOSITIVOS EN ORIENTACIÓN HORIZONTAL === */
@media (max-height: 500px) and (orientation: landscape) {
  .carrusel-container {
    height: 80vh;
    min-height: 250px;
  }

  .hero-overlay {
    padding-top: 5vh;
  }

  .hero-overlay-content h1 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
  }

  .hero-overlay-text {
    font-size: clamp(0.8rem, 3vw, 1rem);
  }
}

/* === OPTIMIZACIÓN PARA RESOLUCIÓN 912x1368 (TABLETS VERTICALES) === */
@media (min-width: 850px) and (max-width: 1000px) and (min-height: 1300px) {
  .almacen-card {
    aspect-ratio: auto;
    min-height: auto;
    max-width: 600px;
    height: auto;
  }

  .almacen-card img {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
  }

  .almacen-info {
    padding: 1.5rem;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
  }

  .almacen-info p {
    margin: 0.4rem 0;
  }

  /* Texto "Abrir con:" pegado a los iconos */
  .almacen-info p:last-of-type {
    margin-bottom: 0.3rem;
    margin-top: 1rem;
  }

  .almacen-iconos {
    margin-top: 0.5rem;
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid rgba(83, 49, 11, 0.15);
    gap: 1.8rem;
    justify-content: center;
  }

  .almacen-iconos a {
    width: 52px;
    height: 52px;
  }

  .almacen-iconos a img {
    width: 30px;
    height: 30px;
  }

  .almacen-iconos a img[alt="Google Maps"] {
    width: 26px;
    height: 26px;
  }
}

/* === MEJORA FINAL: MEJOR VISUALIZACIÓN ICONOS EN TARJETAS === */
@media (max-width: 600px) {
  /* Asegurar que el contenido de información siempre tenga distribución óptima */
  .almacen-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
  }

  .almacen-iconos {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(83, 49, 11, 0.15);
    flex-shrink: 0;
  }

  /* Texto "Abrir con:" más visible */
  .almacen-info p:last-of-type {
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.8rem;
    color: var(--cafe-lealtad);
  }
}

@media (max-width: 400px) {
  .almacen-info {
    min-height: 270px;
  }
}

/* ===================================================
   MODERN SECTIONS STYLES
   ===================================================== */

/* === MISSION VISION === */
.mission-vision {
  padding: 3rem 0;
  background: #f8f9fa;
}

.mission-vision__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.mission-vision__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* === VALUES SECTION === */
.values {
  padding: 4rem 0;
  background: white;
}

.values__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: center;
}

.values__header {
  padding-right: 2rem;
}

.values__title {
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--rojo-rey);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.values__description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--negro);
}

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

.value-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.value-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.value-card:hover .value-card__image {
  transform: scale(1.05);
}

/* === BRANDS SECTION === */
.brands {
  padding: 4rem 0;
  background: var(--amarillo-la-corona);
}

.brands__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.brands__header {
  text-align: left;
  margin-bottom: 3rem;
  max-width: calc((100% - 1.5rem) / 5 * 4 + 1.5rem * 3);
}

.brands__title {
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--rojo-rey);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.brands__description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--negro);
  max-width: 600px;
  margin: 0;
}

.brands__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1.5rem;
  margin-bottom: 3rem;
  justify-items: center;
  align-items: center;
}

.brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 180px;
  height: 180px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.brand-card--jeppy {
  background: #ff0000;
}

.brand-card--premium {
  background: #ffffff;
  border: 2px solid #e0e0e0;
}

.brand-card--baby {
  background: #ffffff;
  border: 2px solid #e0e0e0;
  color: #333;
}

.brand-card--royal {
  background: #1a4ca3;
}

.brand-card--viva {
  background: #ff293d;
}

.brand-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.brand-card__logo {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

.brands__action {
  text-align: center;
  justify-self: center;
  align-self: center;
}

/* === RECRUITMENT SECTION === */
.recruitment {
  padding: 4rem 0;
  background: white;
}

.recruitment__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.recruitment__title {
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--rojo-rey);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.recruitment__description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--negro);
  margin-bottom: 2rem;
}

.recruitment__image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.recruitment__image:hover {
  transform: scale(1.02);
}

/* === NEWS SECTION === */
.news {
  padding: 4rem 0;
  background: #f8f9fa;
}

.news__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.news__title {
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--rojo-rey);
  text-transform: uppercase;
}

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

.news-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

.news-card__media {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.news-card__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

.news-card:hover .news-card__image {
  transform: scale(1.05);
}

.news-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-card__title-link {
  color: var(--negro);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
  display: block;
}

.news-card__title-link:hover {
  color: var(--rojo-rey);
}

.news-card__excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.news-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

.news-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.news-card__read-more:hover {
  gap: 0.75rem;
}

/* === CORPORATE NEWS SECTION === */
.corporate-news {
  overflow: hidden; /* Previene overflow horizontal */
}

.corporate-news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.corporate-news__title {
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: var(--rojo-rey, #e30613);
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
}

/* === PLUGIN NOTICIAS CORPORATIVAS STYLES === */
.ultimas-noticias-shortcode {
  width: 100%;
  box-sizing: border-box;
}

.noticias-grid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

.noticia-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

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

.noticia-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.noticia-titulo {
  margin: 1rem 0 0.5rem 0;
  line-height: 1.4;
}

.noticia-titulo a {
  color: var(--negro);
  text-decoration: none;
  font-weight: 600;
}

.noticia-titulo a:hover {
  color: var(--rojo-rey);
}

.noticia-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.noticia-meta {
  margin-bottom: 0.5rem;
}

.noticia-fecha {
  color: #888;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 500;
}

.badge-destacada {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--rojo-rey);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1200px) {
  .brands__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .brand-card {
    width: 140px;
    height: 140px;
  }

  .brands__action {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1rem;
  }

  .brands__header {
    max-width: calc((100% - 1.5rem) / 2 * 2 + 1.5rem * 1);
  }
}

@media (max-width: 1024px) {
  .brands__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .brand-card {
    border-radius: 1rem;
    width: 150px;
    height: 120px;
    aspect-ratio: auto;
  }

  .brands__action {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1rem;
  }

  .brands__header {
    max-width: 100%;
  }

  /* News grid - 2 columnas en tablets */
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Plugin noticias - 2 columnas en tablets */
  .noticias-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  .news__container {
    padding: 0 1.5rem;
  }
}

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

  .values__header {
    padding-right: 0;
    text-align: center;
  }

  .values__grid {
    grid-template-columns: 1fr 1fr;
  }

  .brands__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-card {
    border-radius: 1rem;
    width: 100%;
    height: 120px;
    aspect-ratio: auto;
  }

  .brands__action {
    text-align: center;
  }

  .news__header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .corporate-news__header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .corporate-news__title {
    font-size: 1.75rem;
  }
  
  /* Plugin noticias - 2 columnas en móvil */
  .noticias-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .news__container {
    padding: 0 1rem;
  }
  
  .noticia-content {
    padding: 1rem;
  }

  .hero-carousel {
    height: 55vh;
    min-height: 350px;
  }

  .carousel-controls {
    padding: 0 1rem;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  /* Enfocar primera imagen del carrusel en móvil - 75% desde la izquierda */
  .carousel-slide[data-slide="0"] img {
    object-position: 75% center;
  }
}

@media (max-width: 480px) {
  .values__grid {
    grid-template-columns: 1fr 1fr;
  }

  .brands__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .news__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Plugin noticias - 1 columna en móviles pequeños */
  .noticias-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .news__container {
    padding: 0 1rem;
  }

  .brand-card {
    border-radius: 1rem;
    width: 100%;
    height: 100px;
    aspect-ratio: auto;
  }

  .brands__action {
    grid-column: 1;
    justify-self: center;
    margin-top: 1rem;
  }

  .brands__header {
    text-align: center;
    max-width: 100%;
  }

  /* Enfocar primera imagen del carrusel en móviles pequeños - 75% desde la izquierda */
  .carousel-slide[data-slide="0"] img {
    object-position: 75% center;
  }
}

/* === EXTRA SMALL DEVICES === */
@media (max-width: 320px) {
  .news__container {
    padding: 0 0.75rem;
  }
  
  .noticias-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 100% !important;
  }
  
  .noticia-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .noticia-content {
    padding: 0.75rem;
  }
  
  .ultimas-noticias-shortcode {
    margin: 1rem 0;
    max-width: 100%;
    overflow: hidden;
  }
}

/* === ACCESSIBILITY ENHANCEMENTS === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.keyboard-navigation *:focus {
  outline: 3px solid var(--color-amarillo-la-corona);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================
   PÁGINA COLABORADORES MODERNIZADA - BEM METHODOLOGY
   ===================================================== */

/* === VARIABLES CSS MODERNAS === */
:root {
  --colaboradores-max-width: 1400px;
  --colaboradores-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --colaboradores-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --colaboradores-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
  --colaboradores-border-radius: 1.5rem;
  --colaboradores-spacing-xs: 1rem;
  --colaboradores-spacing-sm: 1.5rem;
  --colaboradores-spacing-md: 2rem;
  --colaboradores-spacing-lg: 3rem;
  --colaboradores-spacing-xl: 4rem;
}

/* === MAIN CONTAINER === */
.colaboradores {
  position: relative;
  overflow-x: hidden;
}

/* === HERO SECTION === */
.colaboradores__hero {
  position: relative;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  margin-bottom: var(--colaboradores-spacing-xl);
  padding: 6rem 0 4rem; /* Sin padding horizontal - lo maneja el content */
}

.colaboradores__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 1;
}

.colaboradores__hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--colaboradores-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--colaboradores-spacing-md);
  text-align: left;
}

.colaboradores__hero-header {
  width: 100%;
}

.colaboradores__hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: white;
  margin-bottom: var(--colaboradores-spacing-md);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  max-width: 700px;
}

.colaboradores__hero-description {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* === NAVIGATION SECTION === */
.colaboradores__navigation {
  text-align: center;
  padding: var(--colaboradores-spacing-xl) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.colaboradores__navigation-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--colaboradores-spacing-md);
}

.colaboradores__navigation-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--rojo-rey);
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* === CONTAINER === */
.colaboradores__container {
  max-width: var(--colaboradores-max-width);
  margin: 0 auto;
  padding: 0 var(--colaboradores-spacing-md);
}

/* === INITIATIVE CARDS === */
.colaboradores__initiative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: white;
  border-radius: var(--colaboradores-border-radius);
  margin-bottom: var(--colaboradores-spacing-lg);
  box-shadow: var(--colaboradores-shadow);
  overflow: hidden;
  transition: var(--colaboradores-transition);
  position: relative;
  min-height: 400px;
}

.colaboradores__initiative:hover {
  box-shadow: var(--colaboradores-shadow-hover);
  transform: translateY(-4px);
}

/* Layout consistente: imagen siempre a la izquierda, texto a la derecha */
.colaboradores__initiative-media {
  grid-column: 1;
  order: 1;
}

.colaboradores__initiative-content {
  grid-column: 2;
  order: 2;
}

.colaboradores__initiative--special {
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  border: 2px solid var(--amarillo-la-corona);
}

/* === INITIATIVE MEDIA === */
.colaboradores__initiative-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3; /* Proporción 4:3 como recomienda Tailwind */
  min-height: 250px;
}

/* Fallback para navegadores que no soportan aspect-ratio */
@supports not (aspect-ratio: 4/3) {
  .colaboradores__initiative-media {
    padding-bottom: 75%; /* 3/4 = 0.75 = 75% para proporción 4:3 */
    height: 0;
    min-height: 0;
  }
  
  .colaboradores__initiative-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.colaboradores__initiative-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: var(--colaboradores-transition);
}

.colaboradores__initiative:hover .colaboradores__initiative-image {
  transform: scale(1.05);
}

/* === INITIATIVE CONTENT === */
.colaboradores__initiative-content {
  padding: var(--colaboradores-spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--amarillo-la-corona);
  height: 100%;
  min-height: 400px;
}

.colaboradores__initiative-header {
  margin-bottom: var(--colaboradores-spacing-md);
}

.colaboradores__initiative-category {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cafe-lealtad);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.colaboradores__initiative-title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--cafe-lealtad);
  line-height: 1.2;
  margin: 0;
}

.colaboradores__initiative-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.colaboradores__initiative-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--cafe-lealtad);
  margin: 0 0 var(--colaboradores-spacing-md) 0;
}

.colaboradores__initiative-description strong {
  font-weight: 700;
  color: var(--vino-realeza);
}

.colaboradores__initiative-footer {
  margin-top: auto;
}

.colaboradores__initiative-frequency,
.colaboradores__initiative-date {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cafe-lealtad);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid var(--cafe-lealtad);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: var(--colaboradores-transition);
}

.colaboradores__initiative-frequency:hover,
.colaboradores__initiative-date:hover {
  background: var(--cafe-lealtad);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* === ANIMATION SYSTEM === */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--colaboradores-transition);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="slide-up"] {
  transform: translateY(40px);
}

[data-animate="slide-in-left"] {
  transform: translateX(-60px);
}

[data-animate="slide-in-right"] {
  transform: translateX(60px);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* === RESPONSIVE DESIGN === */

/* Tablets y móviles - Cambio a columna única alrededor de 1000px */
@media (max-width: 1000px) {
  .colaboradores__hero {
    min-height: 60vh;
  }

  .colaboradores__initiative {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .colaboradores__initiative-media {
    grid-column: 1;
    order: 1;
    aspect-ratio: 4/3; /* Mantener proporción 4:3 en móvil */
    min-height: 200px;
  }

  .colaboradores__initiative-content {
    grid-column: 1;
    order: 2;
    min-height: auto;
    padding: var(--colaboradores-spacing-md);
  }
}

/* Mobile - Ajustes adicionales para pantallas pequeñas */
@media (max-width: 768px) {
  .colaboradores__hero {
    min-height: 50vh;
    margin-bottom: var(--colaboradores-spacing-md);
  }

  .colaboradores__hero-content {
    padding: 0 var(--colaboradores-spacing-xs); /* Alineado con container en móvil */
  }

  .colaboradores__navigation {
    padding: var(--colaboradores-spacing-md) 0;
  }

  .colaboradores__container {
    padding: 0 var(--colaboradores-spacing-xs);
  }

  .colaboradores__initiative {
    margin-bottom: var(--colaboradores-spacing-md);
    border-radius: 1rem;
  }

  .colaboradores__initiative-content {
    padding: var(--colaboradores-spacing-sm);
  }

  .colaboradores__initiative-media {
    aspect-ratio: 4/3; /* Mantener proporción 4:3 */
    min-height: 180px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .colaboradores__hero {
    min-height: 40vh;
  }

  .colaboradores__initiative-content {
    padding: var(--colaboradores-spacing-xs);
  }

  .colaboradores__initiative-media {
    aspect-ratio: 4/3; /* Mantener proporción 4:3 */
    min-height: 150px;
  }
}

/* === ACCESSIBILITY === */
.keyboard-navigation .colaboradores__initiative:focus {
  outline: 3px solid var(--amarillo-la-corona);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .colaboradores__initiative,
  .colaboradores__initiative-image,
  [data-animate] {
    transition: none;
  }

  .colaboradores__initiative:hover {
    transform: none;
  }

  .colaboradores__initiative:hover .colaboradores__initiative-image {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .colaboradores__hero-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .colaboradores__initiative {
    border: 2px solid var(--negro);
  }
}

/* =====================================================
   CLASES BEM MAPEADAS - SOMOS EL REY
   Compatibilidad: Desktop idéntico + Mobile mejorado
   ===================================================== */

/* === HERO ABOUT - Mapeo exacto === */
.about-hero {
  /* Hereda de .hero-somos-elrey - no duplicar CSS */
}

.about-hero__background {
  /* Hereda de .hero-background - no duplicar CSS */
}

.about-hero__gradient {
  /* Hereda de .hero-gradient - no duplicar CSS */
}

.about-hero__image {
  /* Hereda de .hero-bg-img - no duplicar CSS */
}

.about-hero__overlay {
  /* Hereda de .hero-overlay - no duplicar CSS */
}

.about-hero__content {
  /* Hereda de .hero-overlay-content - no duplicar CSS */
}

.about-hero__logo {
  /* Hereda de .hero-logo-elrey - no duplicar CSS */
}

.about-hero__description {
  /* Hereda de .hero-overlay-text - no duplicar CSS */
}

/* === COMPANY STORY - Mapeo exacto === */
.company-story {
  /* Hereda de .historia-section - no duplicar CSS */
}

.company-story__container {
  /* Hereda de .historia-container - no duplicar CSS */
}

.company-story__content {
  /* Hereda de .historia-texto - no duplicar CSS */
}

.company-story__title {
  /* Hereda de .historia-titulo - no duplicar CSS */
}

.company-story__title-primary {
  /* Hereda de .historia-titulo-marron - no duplicar CSS */
}

.company-story__title-secondary {
  /* Hereda de .historia-titulo-rojo - no duplicar CSS */
}

.company-story__text {
  /* Los párrafos heredan del CSS original */
}

.company-story__media {
  /* Hereda de .historia-imagen - no duplicar CSS */
}

.company-story__image {
  /* Hereda del CSS original - no duplicar CSS */
}

/* === COMPANY PROMISE - Mapeo exacto === */
.company-promise {
  /* Hereda de .promesa-section - no duplicar CSS */
}

.company-promise__content {
  /* Layout correcto desktop - imagen izquierda, texto derecha */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.company-promise__text {
  order: 2; /* Texto a la derecha */
  flex: 1;
}

.company-promise__media {
  order: 1; /* Imagen a la izquierda */
  flex: 1;
}

.company-promise__text {
  /* Hereda de .promesa-texto - no duplicar CSS */
}

.company-promise__title {
  /* Hereda de .promesa-titulo-custom - no duplicar CSS */
}

.company-promise__description {
  /* Hereda de .promesa-desc-custom - no duplicar CSS */
}

.company-promise__highlight {
  /* Hereda de .promesa-fuerte-custom - no duplicar CSS */
}

.company-promise__media {
  /* Hereda de .promesa-img - no duplicar CSS */
}

.company-promise__image {
  /* Hereda del CSS original - no duplicar CSS */
}

/* === CANDY STORE - Mapeo exacto === */
.candy-store-highlight {
  /* Hereda de .confiteria-grande-section - no duplicar CSS */
}

.candy-store-highlight__hero {
  /* Hereda de .confiteria-grande-hero - no duplicar CSS */
}

.candy-store-highlight__background {
  /* Hereda de .confiteria-grande-bg - no duplicar CSS */
}

.candy-store-highlight__overlay {
  /* Hereda de .confiteria-grande-gradient - no duplicar CSS */
}

.candy-store-highlight__content {
  /* Hereda de .confiteria-grande-overlay - no duplicar CSS */
}

.candy-store-highlight__title {
  /* Hereda del CSS original - no duplicar CSS */
}

.candy-store-highlight__title-emphasis {
  /* Hereda de .confiteria-grande-destacado - no duplicar CSS */
}

.candy-store-highlight__features {
  /* Hereda de .confiteria-grande-banners - no duplicar CSS */
}

.feature-card {
  /* Hereda de .confiteria-banner - no duplicar CSS */
}

.feature-card--variety {
  /* Hereda de .confiteria-banner-rosa - no duplicar CSS */
}

.feature-card--brand {
  /* Hereda de .confiteria-banner-amarillo - no duplicar CSS */
}

.feature-card--parties {
  /* Hereda de .confiteria-banner-celeste - no duplicar CSS */
}

.feature-card__text {
  /* Hereda del CSS original - no duplicar CSS */
}

.feature-card__emphasis {
  /* Hereda de .confites-destacado - no duplicar CSS */
}

.feature-card__logo {
  /* Hereda de .confiteria-logo - no duplicar CSS */
}

/* === PRODUCT CATEGORIES - Mapeo exacto === */
.product-categories {
  /* Hereda de .seccion-categorias - no duplicar CSS */
}

.product-categories__container {
  /* Hereda de .categorias-contenido - no duplicar CSS */
}

.product-categories__content {
  /* Hereda de .categorias-texto - no duplicar CSS */
}

.product-categories__title {
  /* Hereda del CSS original - no duplicar CSS */
}

.product-categories__highlight {
  /* Hereda de .categorias-destacado - no duplicar CSS */
}

.product-categories__cta {
  /* Hereda de .btn-categorias - no duplicar CSS */
}

.product-categories__media {
  /* Hereda de .categorias-img - no duplicar CSS */
}

.product-categories__image {
  /* Hereda del CSS original - no duplicar CSS */
}

/* === TEAM CULTURE - Mapeo exacto === */
.team-culture {
  /* Hereda de .seccion-colaboradores - no duplicar CSS */
}

.team-culture__container {
  /* Hereda de .colaboradores-contenido - no duplicar CSS */
}

.team-culture__media {
  /* Hereda de .colaboradores-img - no duplicar CSS */
}

.team-culture__image {
  /* Hereda del CSS original - no duplicar CSS */
}

.team-culture__content {
  /* Hereda de .colaboradores-texto - no duplicar CSS */
}

.team-culture__title {
  /* Hereda del CSS original - no duplicar CSS */
}

.team-culture__description {
  /* Hereda de .colaboradores-desc - no duplicar CSS */
}

.team-culture__cta {
  /* Hereda de .btn-colaboradores - no duplicar CSS */
}

.team-culture__arrow {
  /* Hereda de .arrow - no duplicar CSS */
}

/* === SUSTAINABILITY - Mapeo exacto === */
.sustainability-commitment {
  /* Hereda de .seccion-categorias - no duplicar CSS */
}

.sustainability-commitment__container {
  /* Hereda de .categorias-contenido - no duplicar CSS */
}

.sustainability-commitment__content {
  /* Hereda de .categorias-texto - no duplicar CSS */
}

.sustainability-commitment__title {
  /* Hereda del CSS original - no duplicar CSS */
}

.sustainability-commitment__highlight {
  /* Hereda de .principios-asg-destacado - no duplicar CSS */
}

.sustainability-commitment__subtitle {
  /* Hereda de .principios-asg-sub - no duplicar CSS */
}

.sustainability-commitment__cta {
  /* Hereda de .btn-categorias - no duplicar CSS */
}

.sustainability-commitment__media {
  /* Hereda de .categorias-img - no duplicar CSS */
}

.sustainability-commitment__image {
  /* Hereda del CSS original - no duplicar CSS */
}

/* =====================================================
   MEJORAS RESPONSIVE MOBILE - SOLO MOBILE
   Sin afectar desktop existente
   ===================================================== */

/* === MEJORAS MOBILE ESPECÍFICAS - Sin tocar desktop === */
@media (max-width: 768px) {
  /* Hero mejorado en mobile */
  .about-hero__content {
    padding: 1.5rem !important;
    max-width: 90% !important;
  }

  .about-hero__description {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
    line-height: 1.5 !important;
    margin-top: 1rem !important;
  }

  .about-hero__logo {
    max-width: 140px !important;
    height: auto !important;
  }

  /* Historia mejorada en mobile */
  .company-story__container {
    gap: 1.5rem !important;
    padding: 1rem !important;
  }

  .company-story__content {
    padding: 1.5rem !important;
    text-align: center !important;
  }

  .company-story__title {
    margin-bottom: 1.5rem !important;
  }

  .company-story__text p {
    font-size: clamp(1rem, 4vw, 1.2rem) !important;
    margin-bottom: 1rem !important;
  }

  /* Promesa mejorada en mobile */
  .company-promise__content {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem !important;
  }

  .company-promise__text {
    order: 1 !important; /* En mobile texto primero */
  }

  .company-promise__media {
    order: 2 !important; /* En mobile imagen después */
  }

  .company-promise__description {
    font-size: clamp(1rem, 4vw, 1.2rem) !important;
    line-height: 1.5 !important;
  }

  /* Confitería mejorada en mobile - FIX OVERFLOW */
  .candy-store-highlight__features {
    gap: 0.5rem !important;
    padding: 0 1rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .feature-card {
    min-height: 120px !important;
    padding: 0.8rem 0.4rem !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
    min-width: 140px !important;
    max-width: 160px !important;
  }

  .feature-card__text {
    font-size: clamp(0.8rem, 3vw, 1rem) !important;
    line-height: 1.2 !important;
  }

  /* Categorías y colaboradores mejorados */
  .product-categories__container,
  .team-culture__container,
  .sustainability-commitment__container {
    padding: 1rem !important;
    gap: 1.5rem !important;
  }

  .product-categories__title,
  .team-culture__title,
  .sustainability-commitment__title {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .team-culture__description {
    font-size: clamp(1rem, 4vw, 1.2rem) !important;
    line-height: 1.5 !important;
  }

  /* Todos los botones iguales - COLORES AMARILLO/CAFÉ ORIGINALES */
  .product-categories__cta,
  .team-culture__cta,
  .sustainability-commitment__cta {
    /* Colores originales amarillo/café */
    background: var(--amarillo-la-corona) !important;
    color: var(--cafe-lealtad) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 25px !important;
    padding: 0.8rem 1.5rem !important;
    margin-top: 1rem !important;

    /* Layout y alineamiento */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 140px !important;
    text-decoration: none !important;

    /* Efectos */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    align-self: flex-start !important;
  }

  /* Hover unificado - amarillo más brillante */
  .product-categories__cta:hover,
  .team-culture__cta:hover,
  .sustainability-commitment__cta:hover {
    background: var(--amarillo-monarca) !important;
    color: var(--vino-realeza) !important;
    transform: translateY(-2px) !important;
  }
}

@media (max-width: 480px) {
  /* Mejoras para móviles muy pequeños */
  .about-hero__content {
    padding: 1rem !important;
  }

  .about-hero__logo {
    max-width: 120px !important;
  }

  .about-hero__description {
    font-size: clamp(0.85rem, 4vw, 1rem) !important;
  }

  /* Títulos más pequeños en mobile muy pequeño */
  .company-story__title,
  .team-culture__title,
  .sustainability-commitment__title {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
  }

  /* Confitería en columna para móviles pequeños */
  .candy-store-highlight__features {
    flex-direction: column !important;
    gap: 0.8rem !important;
    overflow-x: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .feature-card {
    min-height: 100px !important;
    padding: 0.8rem !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .feature-card__text {
    font-size: clamp(0.8rem, 4vw, 1rem) !important;
  }

  /* Botones más pequeños - colores amarillo/café */
  .product-categories__cta,
  .team-culture__cta,
  .sustainability-commitment__cta {
    padding: 0.7rem 1.2rem !important;
    font-size: 0.9rem !important;
    min-width: 120px !important;
    background: var(--amarillo-la-corona) !important;
    color: var(--cafe-lealtad) !important;
  }

  .product-categories__cta:hover,
  .team-culture__cta:hover,
  .sustainability-commitment__cta:hover {
    background: var(--amarillo-monarca) !important;
    color: var(--vino-realeza) !important;
  }
}

/* === Mejoras de accesibilidad mobile === */
@media (max-width: 768px) {
  /* Focus mejorado en mobile */
  .about-hero__logo:focus,
  .product-categories__cta:focus,
  .team-culture__cta:focus,
  .sustainability-commitment__cta:focus {
    outline: 3px solid var(--amarillo-la-corona) !important;
    outline-offset: 2px !important;
  }

  /* Áreas de toque más grandes */
  .product-categories__cta,
  .team-culture__cta,
  .sustainability-commitment__cta {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===================================================
   PERSONALIZACIÓN SIMPLE PARA NOTICIAS CORPORATIVAS
   Solo cambio de colores de títulos
   ===================================================== */

/* Título de noticia - color café por defecto */
.noticia-titulo,
.noticia-titulo a {
  color: var(--cafe-lealtad, #53310b) !important;
}

/* Título de noticia - color rojo al hacer hover/selección */
.noticia-titulo:hover,
.noticia-titulo a:hover,
.noticia-titulo a:focus,
.noticia-card:hover .noticia-titulo a {
  color: var(--rojo-rey, #ff0000) !important;
}

/* =====================================================
   MODERN HEADER - NUEVO CSS MODERNO
   Header con CSS Grid y mejores estándares modernos
   ===================================================== */

/* === RESET Y VARIABLES === */
.modern-header * {
  box-sizing: border-box;
}

/* === SKIP LINK === */
.modern-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--rojo-rey);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10001;
  border-radius: 4px;
  font-weight: 500;
  transition: top 0.3s ease;
}

.modern-skip-link:focus {
  top: 6px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* === MAIN HEADER === */
.modern-header {
  position: relative;
  width: 100vw; /* Usar viewport width para ocupar todo el ancho */
  left: 50%;
  right: 50%;
  margin-left: -50vw; /* Técnica para expandir a todo el viewport */
  margin-right: -50vw;
  background: var(--amarillo-la-corona);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  z-index: 1000; /* Asegurar que esté por encima del contenido */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  box-sizing: border-box;
}



/* === CONTAINER === */
.modern-header__container {
  display: grid;
  grid-template-columns: 20% 60% 20%; /* Desktop: 20-60-20 */
  align-items: center;
  height: 80px;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
}

/* === BRAND SECTION === */
.modern-header__brand {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modern-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
  outline-offset: 4px;
}

.modern-header__logo-link:hover {
  transform: scale(1.05);
}

.modern-header__logo-link:focus {
  outline: 2px solid var(--rojo-rey);
  border-radius: 4px;
}

.modern-header__logo-link img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.modern-header__logo-text {
  font-family: var(--font-titulares);
  font-size: 1.8rem;
  color: var(--rojo-rey);
  font-weight: 700;
}

/* === NAVIGATION SECTION === */
.modern-header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Botones de navegación del carrusel */
.modern-header__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: var(--rojo-rey);
  border: 1px solid var(--amarillo-la-corona);
  border-radius: 6px;
  color: var(--amarillo-la-corona);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(227, 6, 19, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  user-select: none;
  backdrop-filter: blur(8px);
}

.modern-header__nav-btn:hover {
  background: var(--vino-realeza);
  border-color: var(--amarillo-monarca);
  transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 4px 16px rgba(227, 6, 19, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modern-header__nav-btn--right:hover {
  transform: translateY(-50%) translateX(2px);
}

.modern-header__nav-btn:focus {
  outline: 2px solid var(--amarillo-la-corona);
  outline-offset: 3px;
}

.modern-header__nav-btn:active {
  transform: translateY(-50%) scale(0.9);
}

.modern-header__nav-btn--left {
  left: 10px;
}

.modern-header__nav-btn--right {
  right: 10px;
}

/* Mostrar botones cuando hay scroll disponible */
.modern-header__nav.has-scroll .modern-header__nav-btn {
  opacity: 1;
  visibility: visible;
}

/* Deshabilitar botón cuando está en el límite */
.modern-header__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: var(--cafe-lealtad);
  color: var(--beige-calidez);
}

.modern-header__nav-btn:disabled:hover {
  transform: translateY(-50%);
  background: var(--cafe-lealtad);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Gradientes suaves en los bordes del menú */
.modern-header__nav::before,
.modern-header__nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-header__nav::before {
  left: 0;
  background: linear-gradient(to right, var(--amarillo-la-corona), transparent);
}

.modern-header__nav::after {
  right: 0;
  background: linear-gradient(to left, var(--amarillo-la-corona), transparent);
}

/* Mostrar gradientes cuando hay scroll disponible */
.modern-header__nav.has-scroll::before,
.modern-header__nav.has-scroll::after {
  opacity: 1;
}

/* Desktop Menu */
.modern-header__menu-desktop {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 50px; /* Espacio para los botones */
  /* Ocultar scrollbar pero mantener funcionalidad */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.modern-header__menu-desktop::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.modern-nav-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content; /* Permite que el contenido determine el ancho */
  white-space: nowrap;
}

.modern-nav-item {
  position: relative;
  flex-shrink: 0; /* Prevenir que los items se compriman */
}

.modern-nav-link,
.nav-link {
  display: flex;
  align-items: center;
  padding: 0.8rem 0.2rem;
  color: var(--cafe-lealtad);
  text-decoration: none;
  font-family: var(--font-destacados);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
  outline-offset: 2px;
  background: transparent;
}

.modern-nav-link:hover,
.modern-nav-link:focus,
.nav-link:hover,
.nav-link:focus {
  color: var(--rojo-rey);
  background-color: rgba(227, 6, 19, 0.08);
  transform: translateY(-1px);
}

.modern-nav-link:focus,
.nav-link:focus {
  outline: 2px solid var(--rojo-rey);
}

/* Estados activos - Estilo igual al navbar-custom del headerBK.php */
.nav-item.active .nav-link,
.nav-link.active,
.modern-nav-item--active .modern-nav-link,
.current-menu-item .nav-link,
.current_page_item .nav-link,
.modern-nav-item.active .modern-nav-link {
  color: var(--rojo-rey) !important;
  background: transparent !important;
  font-weight: 500 !important;
  position: relative !important;
  border-radius: 4px !important;
}

/* Indicador visual para elemento activo - línea roja debajo igual al headerBK.php */
.nav-item.active .nav-link::after,
.nav-link.active::after,
.modern-nav-item--active .modern-nav-link::after,
.current-menu-item .nav-link::after,
.current_page_item .nav-link::after,
.modern-nav-item.active .modern-nav-link::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: var(--rojo-rey);
  border-radius: 2px;
}

.nav-item.active .nav-link:hover,
.nav-link.active:hover,
.modern-nav-item--active .modern-nav-link:hover,
.current-menu-item .nav-link:hover,
.current_page_item .nav-link:hover,
.modern-nav-item.active .modern-nav-link:hover {
  color: var(--vino-realeza) !important;
  background: transparent !important;
}

/* Mobile Toggle Button */
.modern-header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  outline-offset: 2px;
}

.modern-header__toggle:hover,
.modern-header__toggle:focus {
  background-color: rgba(0, 0, 0, 0.05);
  outline: 2px solid var(--rojo-rey);
}

.modern-header__hamburger {
  display: flex;
  flex-direction: column;
  width: 24px;
  height: 18px;
  justify-content: space-between;
}

.modern-header__hamburger-line {
  width: 100%;
  height: 3px;
  background: var(--cafe-lealtad);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.modern-header__toggle[aria-expanded="true"] .modern-header__hamburger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.modern-header__toggle[aria-expanded="true"] .modern-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.modern-header__toggle[aria-expanded="true"] .modern-header__hamburger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile Menu Dropdown */
.modern-header__menu-mobile {
  position: fixed;
  left: 0;
  right: 0;
  transform: translateY(-15px);
  width: 100vw;
  margin: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}

.modern-header__menu-mobile--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  max-height: 400px;
}

.modern-header__menu-content {
  background: linear-gradient(180deg, var(--amarillo-la-corona) 0%, rgba(255, 205, 0, 0.95) 100%);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-top: 4px solid var(--rojo-rey);
  border-bottom: 2px solid rgba(227, 6, 19, 0.3);
  backdrop-filter: blur(15px) saturate(1.2);
  -webkit-backdrop-filter: blur(15px) saturate(1.2);
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
  box-sizing: border-box;
  position: relative;
}

.modern-header__menu-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
}

.modern-header__menu-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

/* Animaciones de entrada elegantes para los elementos del menú */
.modern-nav-list--mobile .modern-nav-item {
  opacity: 0;
  transform: translateY(-15px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modern-header__menu-mobile--open .modern-nav-item {
  animation: slideInFade 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.modern-header__menu-mobile--open .modern-nav-item:nth-child(1) { animation-delay: 0.08s; }
.modern-header__menu-mobile--open .modern-nav-item:nth-child(2) { animation-delay: 0.12s; }
.modern-header__menu-mobile--open .modern-nav-item:nth-child(3) { animation-delay: 0.16s; }
.modern-header__menu-mobile--open .modern-nav-item:nth-child(4) { animation-delay: 0.2s; }
.modern-header__menu-mobile--open .modern-nav-item:nth-child(5) { animation-delay: 0.24s; }
.modern-header__menu-mobile--open .modern-nav-item:nth-child(6) { animation-delay: 0.28s; }

@keyframes slideInFade {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  60% {
    opacity: 0.8;
    transform: translateY(2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Efecto de brillo sutil en elementos del menú */
.modern-nav-list--mobile .modern-nav-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  transition: left 0.6s ease;
}

.modern-nav-list--mobile .modern-nav-link:hover::after {
  left: 100%;
}

/* Estilos del header mobile eliminados - ya no son necesarios */

.modern-nav-list--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0;
  text-align: center;
  width: 100%;
}

.modern-nav-list--mobile .modern-nav-item {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modern-nav-list--mobile .modern-nav-item:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.modern-nav-list--mobile .modern-nav-item:last-child {
  margin-bottom: 0;
}

.modern-nav-list--mobile .modern-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2rem;
  color: var(--cafe-lealtad);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  font-family: var(--font-destacados);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0;
  position: relative;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.modern-nav-list--mobile .modern-nav-link:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
  color: var(--vino-realeza);
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-weight: 700;
}

/* Estado activo para móvil - máxima especificidad */
.modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link,
.modern-nav-list--mobile .modern-nav-item--active .modern-nav-link {
  background: var(--rojo-rey) !important;
  color: var(--amarillo-la-corona) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(227, 6, 19, 0.6) !important;
  transform: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  border-left: 5px solid var(--amarillo-la-corona) !important;
  border-right: 5px solid var(--amarillo-la-corona) !important;
  position: relative !important;
  z-index: 10 !important;
}

.modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::before {
  content: "◆" !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: var(--amarillo-la-corona) !important;
  font-size: 14px !important;
  animation: none !important;
}

/* Animación eliminada para evitar conflictos */

.modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::after,
.modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::after {
  content: "◆" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--amarillo-la-corona) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  pointer-events: none !important;
  z-index: 11 !important;
  /* Anular cualquier efecto de brillo que pueda interferir */
  background: none !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
}

.modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link:hover,
.modern-nav-list--mobile .modern-nav-item--active .modern-nav-link:hover {
  background: var(--vino-realeza) !important;
  color: var(--amarillo-la-corona) !important;
  transform: none !important;
  box-shadow: 0 4px 15px rgba(188, 0, 0, 0.6) !important;
}

/* Efecto de foco para accesibilidad */
.modern-nav-list--mobile .modern-nav-link:focus {
  outline: 2px solid var(--cafe-lealtad);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Smooth scroll cuando se cierra el menú */
.modern-header__menu-mobile {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), max-height 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mejora para pantallas pequeñas */
@media (max-width: 360px) {
  .modern-header__menu-content {
    border-radius: 0 0 8px 8px;
  }
  
  .modern-nav-list--mobile .modern-nav-link {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }
}

/* === CTA SECTION === */
.modern-header__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modern-header__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: var(--rojo-rey);
  color: var(--amarillo-la-corona);
  text-decoration: none;
  border-radius: 8px;
  font-family: "Black Han Sans", var(--font-titulares), sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(227, 6, 19, 0.3);
  outline-offset: 2px;
}

.modern-header__cta-btn:hover {
  background: var(--cafe-lealtad);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.4);
  color: var(--amarillo-la-corona);
  text-decoration: none;
}

.modern-header__cta-btn:focus {
  outline: 2px solid white;
  background: var(--cafe-lealtad);
  color: white;
}

.modern-header__cta-text {
  white-space: nowrap;
}

/* === WHATSAPP BUTTON === */
.modern-whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
  animation: whatsapp-pulse 3s infinite;
}

.modern-whatsapp-float:hover {
  background: #20ba5a;
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
  color: white;
  text-decoration: none;
}

.modern-whatsapp-float:focus {
  outline: 3px solid #007cba;
  outline-offset: 3px;
  color: white;
}

@keyframes whatsapp-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* === UTILITY CLASSES === */
.modern-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modern-menu-open {
  overflow: hidden;
}

/* === RESPONSIVE DESIGN === */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .modern-header__container {
    padding: 0;
  }
  
  .modern-nav-link {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
}

/* Tablet and Small Desktop (769px - 1199px) */
@media (max-width: 1199px) {
  .modern-nav-list {
    gap: 0.2rem;
  }
  
  .modern-nav-link {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .modern-header__container {
    grid-template-columns: 45% 10% 45%; /* Mobile: 45-10-45 */
    padding: 0;
    height: 70px;
  }
  
  /* Hide desktop menu, show mobile toggle */
  .modern-header__menu-desktop {
    display: none;
  }
  
  .modern-header__toggle {
    display: flex;
    justify-content: center;
  }
  
  .modern-header__cta {
    justify-content: center; /* Centrar en móvil */
    padding: 0 0.5rem; /* Añadir padding interno */
    box-sizing: border-box;
  }
  
  .modern-header__cta-btn {
    padding: 0.6rem 0.8rem; /* Reducir padding */
    font-size: 0.75rem; /* Hacer fuente más pequeña */
    gap: 0.2rem;
    min-width: 0; /* Permitir que se contraiga */
    flex-shrink: 1; /* Permitir contracción */
    max-width: 100%; /* No exceder el contenedor */
    white-space: nowrap; /* Evitar salto de línea */
    overflow: hidden; /* Ocultar desbordamiento */
    text-overflow: ellipsis; /* Mostrar ... si es muy largo */
  }
  
  /* En móvil mostrar texto corto */
  .modern-header__cta-text--full {
    display: none;
  }
  
  .modern-header__cta-text--short {
    display: inline;
  }
  
  .modern-whatsapp-float {
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

/* Desktop y tablets - texto completo */
@media (min-width: 769px) {
  .modern-header__cta-text--full {
    display: inline;
  }
  
  .modern-header__cta-text--short {
    display: none;
  }
}

/* Responsive para menú móvil */
@media (max-width: 768px) {
  .modern-header__toggle {
    display: flex;
  }
  
  .modern-header__nav .modern-header__menu-desktop {
    display: none;
  }
  
  /* Ajustar posición del dropdown según altura del header */
  .modern-header__menu-mobile {
    top: 80px;
  }
  
  .modern-nav-list--mobile .modern-nav-link {
    font-size: 0.95rem;
    padding: 0.9rem 1.25rem;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .modern-header__container {
    padding: 0;
    height: 65px;
  }
  
  .modern-header__cta-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.7rem;
    gap: 0.3rem;
  }
  
  /* Ajustar posición del menú para header más pequeño */
  .modern-header__menu-mobile {
    top: 65px;
  }
  
  .modern-nav-list--mobile .modern-nav-link {
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
  }
}

/* Extra Small Mobile (360px and below) - Solo ícono */
@media (max-width: 360px) {
  .modern-header__cta-text--full,
  .modern-header__cta-text--short {
    display: none;
  }
  
  .modern-header__cta-btn {
    padding: 0.6rem;
    min-width: 40px;
    gap: 0;
  }
  
  .modern-header__menu-content {
    width: 280px;
  }
}

/* Admin Bar - No adjustment needed for static header */

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .modern-header {
    background: white;
    border-bottom: 2px solid #000;
  }
  
  .modern-nav-link {
    border: 1px solid transparent;
  }
  
  .modern-nav-link:hover,
  .modern-nav-link:focus {
    border-color: currentColor;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .modern-header,
  .modern-header *,
  .modern-whatsapp-float {
    transition: none !important;
    animation: none !important;
  }
  
  .modern-header__logo-link:hover {
    transform: none;
  }
}

/* Print Styles */
@media print {
  .modern-header,
  .modern-whatsapp-float {
    display: none !important;
  }
}

/* ==============================================
   REGLAS DE MÁXIMA PRIORIDAD PARA ESTADO ACTIVO MÓVIL
   Estas reglas deben estar al final para sobrescribir
   cualquier otro estilo que pueda interferir
   ============================================== */

/* Estado activo para móvil - MÁXIMA VISIBILIDAD CON SOMBRAS */
@media (max-width: 991px) {
  /* Elemento activo con máxima especificidad y sombras extremas */
  html body .modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link,
  html body .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link,
  .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link {
    background: #ff0000 !important; /* Rojo puro */
    color: #ffcd00 !important; /* Amarillo puro */
    font-weight: 900 !important;
    transform: none !important;
    position: relative !important;
    z-index: 15 !important;
    
    /* SOMBRAS EXTREMAS PARA MÁXIMA VISIBILIDAD */
    box-shadow: 
      0 0 0 3px #ffcd00,
      0 0 0 6px #ff0000,
      0 8px 25px rgba(255, 0, 0, 0.8),
      inset 0 0 20px rgba(255, 205, 0, 0.3) !important;
    
    /* Bordes gruesos */
    border: 3px solid #ffcd00 !important;
    border-radius: 8px !important;
    
    /* Texto con sombra muy visible */
    text-shadow: 
      0 0 5px rgba(0, 0, 0, 0.8),
      0 0 10px rgba(255, 205, 0, 0.6),
      1px 1px 3px rgba(0, 0, 0, 1) !important;
    
    /* Fondo con múltiples capas */
    background-image: 
      radial-gradient(circle at 30% 40%, rgba(255, 205, 0, 0.2) 0%, transparent 50%),
      linear-gradient(135deg, #ff0000 0%, #cc0000 50%, #ff0000 100%) !important;
  }
  
  /* Indicadores diamante izquierdo - SÚPER VISIBLES */
  html body .modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::before,
  html body .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::before,
  .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::before {
    content: "●" !important; /* Círculo sólido más visible */
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    background: #ffcd00 !important;
    color: #ff0000 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    animation: none !important;
    z-index: 20 !important;
    border-radius: 50% !important;
    
    /* Sombras extremas para el indicador */
    box-shadow: 
      0 0 5px #ffcd00,
      0 0 10px #ff0000,
      0 0 15px rgba(255, 205, 0, 0.8) !important;
    
    text-shadow: 
      0 0 3px #000000,
      0 0 6px #ff0000 !important;
  }
  
  /* Indicador diamante derecho - SÚPER VISIBLE */
  html body .modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::after,
  html body .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::after,
  .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link::after {
    content: "●" !important; /* Círculo sólido más visible */
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #ffcd00 !important;
    color: #ff0000 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    pointer-events: none !important;
    z-index: 20 !important;
    border-radius: 50% !important;
    
    /* Sombras extremas para el indicador derecho */
    box-shadow: 
      0 0 5px #ffcd00,
      0 0 10px #ff0000,
      0 0 15px rgba(255, 205, 0, 0.8) !important;
    
    text-shadow: 
      0 0 3px #000000,
      0 0 6px #ff0000 !important;
    
    /* Anular completamente cualquier efecto que interfiera */
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    transition: none !important;
  }
  
  /* Hover del estado activo - SOMBRAS EXTREMAS */
  html body .modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link:hover,
  html body .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link:hover,
  .modern-nav-list--mobile .modern-nav-item--active .modern-nav-link:hover {
    background: #cc0000 !important;
    background-image: linear-gradient(135deg, #cc0000 0%, #990000 50%, #ff0000 100%) !important;
    color: #ffcd00 !important;
    transform: scale(1.02) !important;
    
    /* Sombras aún más extremas en hover */
    box-shadow: 
      0 0 0 4px #ffcd00,
      0 0 0 8px #cc0000,
      0 12px 35px rgba(204, 0, 0, 0.9),
      inset 0 0 25px rgba(255, 205, 0, 0.4) !important;
  }
  
  /* Forzar visibilidad del contenedor móvil */
  .modern-header__menu-mobile .modern-nav-list--mobile .modern-nav-item--active,
  .modern-nav-list--mobile .modern-nav-item--active {
    background: rgba(255, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    margin: 2px 0 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3) !important;
  }
}



/* Estilos elegantes para elementos activos de WordPress */
@media (max-width: 991px) {
  /* Contenedor activo - sutil y elegante */
  .modern-nav-list--mobile .nav-item.active,
  .modern-header__menu-mobile .nav-item.active {
    background: linear-gradient(135deg, rgba(255, 205, 0, 0.08), rgba(255, 205, 0, 0.04)) !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
  }
  
  /* Enlace activo - solo el texto con fondo elegante */
  .modern-nav-list--mobile .nav-item.active .nav-link.active,
  .modern-nav-list--mobile .nav-link.active,
  .modern-header__menu-mobile .nav-link.active {
    color: var(--azul-marino-la-corona) !important;
    font-weight: 600 !important;
    position: relative !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    
    /* Fondo dorado solo para el contenido del texto */
    background: linear-gradient(135deg, var(--amarillo-la-corona), #f4d03f) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    display: inline-block !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(255, 205, 0, 0.2) !important;
  }
  
  /* Línea roja debajo del texto activo */
  .modern-nav-list--mobile .nav-item.active .nav-link.active::after,
  .modern-nav-list--mobile .nav-link.active::after,
  .modern-header__menu-mobile .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--rojo-rey);
    border-radius: 1px;
  }
  
  /* Hover elegante del estado activo */
  .modern-nav-list--mobile .nav-item.active .nav-link.active:hover,
  .modern-nav-list--mobile .nav-link.active:hover,
  .modern-header__menu-mobile .nav-link.active:hover {
    background: linear-gradient(135deg, #f7dc6f, var(--amarillo-la-corona)) !important;
    transform: translateX(4px) scale(1.02) !important;
    box-shadow: 0 3px 18px rgba(255, 205, 0, 0.4) !important;
  }
}

/* =====================================================
   FIN DEL ARCHIVO CSS - ALMACENES EL REY
   Archivo modernizado: Noviembre 2025 - Versión Híbrida Compatible
   ===================================================== */