/* ARCHIVO GENERADO por assets/css/build.js — no editar a mano.
   Edita el parcial correspondiente y vuelve a ejecutar:
       node assets/css/build.js
   Orden: core/variables.css > core/base.css > layout/navbar.css > layout/header.css > layout/layout.css > layout/footer.css > components/buttons.css > components/cards.css > components/forms.css > components/popups.css > pages/home.css > pages/catalogo.css > pages/contacto.css > pages/legal.css > pages/marcas.css > core/legacy.css */


/* ==================== core/variables.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
:root {
  --color-primary: #ffffff;         /* Blanco */
  --color-secondary: #195734;       /* Verde medio */
  --color-accent: #e8f5e9;          /* Verde muy claro para fondos */
  --color-text: #111111;            /* Texto oscuro para legibilidad */
  --color-hover: #0d3d25;           /* Hover para botones */
  --color-border: #ccc;             /* Bordes suaves */
  --max-width: 1200px;
  --radius: 8px;
  /* Lista explícita en vez de `all`: con `all` el navegador vigila TODAS las
     propiedades en cada fotograma, incluidas las que obligan a recalcular el
     layout (width, margin…). Enumerando solo las que de verdad se animan,
     transform y opacity se resuelven en la GPU y el resto es repintado
     barato. Mismo efecto visual, sin el coste. */
  --transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;

  --bg:#ffffff;           /* Fondo blanco */
  
  --brand:#195734;        /* Verde corporativo */
  --brand-deep:#133f27;   /* Tono más oscuro */
  --metal-1:#e8efe9;      /* Borde metálico suave */
  --metal-2:#b9c8bf;
  --paper:#ffffff;
}

/* ==================== core/base.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
h1 {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 700; /* Negrita */
}

h2 {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 700; /* Negrita */
}

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

/* Las imágenes van envueltas en <picture> para servir WebP con respaldo
   JPEG/PNG. `display: contents` borra la caja del wrapper del layout: el
   <img> sigue siendo hijo directo de su flex/grid (.slides, .product…),
   así que los estilos existentes siguen funcionando sin tocarlos. */
picture {
  display: contents;
}

/* Las imágenes llevan width/height en el HTML para que el navegador reserve
   el hueco antes de descargarlas (sin saltos de layout). Estas dos reglas
   evitan que ese tamaño intrínseco desborde su contenedor.

   CUIDADO al tocar esto: dentro de un contenedor que se ajusta a su
   contenido (inline-flex, float, celda…), `max-width: 100%` crea una
   referencia circular — el ancho del contenedor depende de la imagen y el
   de la imagen depende del contenedor — y ambos colapsan a 0 px. Le pasaba
   a los iconos de la copa del Mundial de la barra de navegación. Si algún
   icono desaparece, la solución es `max-width: none` en SU regla, no
   quitar esto de aquí (que sí contiene imágenes en otras páginas). */
img {
  max-width: 100%;
  height: auto;
}

/* ======= ANIMACIONES GLOBALES FLUIDAS ======= */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* OJO: la animación del body NO puede llevar transform. Un transform activo
   en el body convierte al documento entero en el ancla de todos los
   position: fixed de la página (popup del Mundial, banner de cookies…):
   mientras dura la animación aparecen descolocados y al terminar dan un
   salto a su sitio. Por eso el body usa fadeInBody (solo opacidad) y no
   fadeIn (que desplaza 20px). */
@keyframes fadeInBody {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  color: var(--color-text);
  background-color: #f2f2f2;
  background-size: cover;
  scroll-behavior: smooth;
  min-height: 100vh;
  animation: fadeInBody 0.6s ease-in-out;
}

/* Sin transición en el index */
body.no-transition {
  animation: none;
}

body.fondo-catalogo {
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  color: var(--color-text);
  background-color: #f2f2f2;
  background-size: cover;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll; /* <<< Esto es la clave */
}

section {
  scroll-margin-top: 100px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .form-container {
    padding: 1.5rem;
    margin: 1rem;
  }

  .titulo-contacto {
    font-size: 1.5rem;
  }

  .fake-input {
    padding: 0.7rem 0.8rem;
  }

  .form-group label {
    font-size: 1rem;
  }

  .fake-input a {
    font-size: 1rem;
  }

  .form-container img {
    width: 80%;
    max-width: 250px;
  }
}

/* ==================== layout/navbar.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
/* BARRA SUPERIOR AL HEADER */
.top-bar {
  background-color: #f2f2f2;
  padding: 8px 0;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

.top-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  padding: 0 40px; /* Aumenta separación a los bordes */
}

.top-left a,
.top-right a {
  color: #333;
  text-decoration: none;
  margin-right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-right a {
  margin-right: 0;
}

/* BARRA MEDIA (PROFESIONAL) */
/* Cintillo superior neutro */
.mid-bar{
  background-color: #f2f2f2;
  padding:15px 0;
  text-align: center;
}

/* Placa ejecutiva (botón interactivo) */
.signature-tag{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #f7fbf8;
  background: linear-gradient(135deg, #0f462c 0%, #0b3221 45%, #08271a 100%);
  box-shadow:
    0 12px 32px rgba(8, 39, 26, 0.38),
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.16) inset;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  outline: none;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1), filter .2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Evita selección de texto/icono manteniendo interactividad */
.signature-tag * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Tooltip corporativo */
.signature-tag::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  background: #0e2418;
  color: #fff;
  font: 600 12px/1 "Segoe UI", Roboto, Arial, sans-serif;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.signature-tag:hover::after,
.signature-tag:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Icono */
.signature-tag__icon{
  width:20px; height:20px;
  fill:#e8f6ee;
  opacity:.96;
  transition: transform .25s ease, opacity .2s ease, filter .2s ease;
}

/* Texto ultra legible */
.signature-tag__text{
  font: 700 17px/1.1 "Lato", "Segoe UI", Roboto, system-ui, sans-serif;
  letter-spacing:.22px;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index:1;
}

/* Línea de calidad (respira lento) */
.signature-tag__underline{
  position:absolute;
  left:22px; right:22px; bottom:9px;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  opacity:.6;
  transform-origin:center;
  animation: breathe 4s ease-in-out infinite;
  pointer-events:none;
}

/* Interacción visible */
.signature-tag:hover,
.signature-tag:focus-visible{
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 18px 42px rgba(8, 39, 26, 0.46),
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;
}
.signature-tag:active{
  transform: translateY(0);               /* Feedback de clic */
  filter: brightness(0.97);
}
.signature-tag:hover .signature-tag__icon,
.signature-tag:focus-visible .signature-tag__icon{
  transform: translateY(-1px) scale(1.06);
  opacity:1; filter: saturate(1.05);
}

/* Ripple (se añade dinámicamente) */
.signature-tag .ripple{
  position: absolute;
  width: 12px; height: 12px;
  left: var(--rx); top: var(--ry);
  translate: -50% -50%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 70%);
  animation: ripple .6s ease-out forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Animaciones base */
@keyframes border-sweep{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes breathe{
  0%,100% { transform: scaleX(.35); opacity:.45; }
  50%     { transform: scaleX(1);   opacity:.85; }
}
@keyframes ripple{
  from { opacity:.65; transform: scale(.5); }
  to   { opacity:0;   transform: scale(8);  }
}

/* Respeto a reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .signature-tag::before,
  .signature-tag__underline{
    animation: none !important;
  }
  .signature-tag,
  .signature-tag__icon{
    transition: none !important;
  }
}

/* NAVEGACIÓN HEADER */
nav {
  display: flex;
  align-items: center; /* centra verticalmente los enlaces */
  justify-content: center; /* opcional si quieres centrar horizontalmente el menú */
}
nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}
nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  position: relative;
  transition: var(--transition);
}
nav a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-secondary);
  transition: var(--transition);
}
nav a:hover::after {
  width: 100%;
}

/* 🔒 OCULTA LA HAMBURGUESA EN ESCRITORIO */
.menu-toggle {
  display: none;
}

/* ✅ MÓVIL: mostrar hamburguesa y ocultar menú horizontal */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #111;
  }

  #mainMenu {
    display: none;
    width: 100%;
    background-color: #f8f8f8;
    padding: 1rem 0;
  }

  #mainMenu.active {
    display: block;
  }

  #mainMenu ul {
    flex-direction: column;
    align-items: center;
  }

  #mainMenu li {
    margin: 0.8rem 0;
  }
}

/* ✅ ESCRITORIO: mostrar menú normal y ocultar hamburguesa */
@media (min-width: 769px) {
  #mainMenu {
    display: block !important;
  }

  #mainMenu ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
  }

  .menu-toggle {
    display: none !important;
  }
}

/* ==================== layout/header.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
/* HEADER */
header {
  background-color: #fff;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 0;
}

.logo-img {
  height: 60px;
  /* `width: auto` es imprescindible aquí. El <img> lleva width="400" en el
     HTML (para que el navegador reserve el hueco y no salte el layout), y
     ese atributo actúa como anchura por defecto: sin este `auto`, el
     max-width lo recorta al ancho del contenedor mientras la altura sigue
     clavada en 60px, y el logo sale estirado a lo ancho en móvil. */
  width: auto;
  max-width: 100%;
}

.logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ======= PEGADO DESDE styles3.css ======= */
header, .site-header {
  position: relative;
  z-index: 997;  /* menor que 998 del backdrop */
}

/* Estilo general */
.site-header {
  position: relative;
  background-color: white;
  z-index: 1000;
}

/* Logo y layout de cabecera */
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  position: relative;
}

/* Botón hamburguesa */
.hamburger-btn {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(25, 87, 52, 0.28);
  background: #fff;
  color: transparent; /* icon drawn with pseudo, keep text hidden */
  font-size: 0;
  font-weight: 700;
  cursor: pointer;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-shadow:
    0 10px 26px rgba(12, 27, 19, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hamburger-btn::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #0e2418;
  box-shadow: 0 6px 0 #0e2418, 0 -6px 0 #0e2418; /* 3 líneas centradas */
  display: block;
}

.hamburger-btn:hover,
.hamburger-btn:focus-visible {
  transform: translateY(-50%) translateY(-1px);
  border-color: rgba(25, 87, 52, 0.45);
  box-shadow:
    0 14px 32px rgba(12, 27, 19, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  outline: none;
}

.hamburger-btn:active {
  transform: translateY(-50%);
}

/* Menú emergente corporativo */
.mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(55, 62, 70, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-content {
  width: min(400px, 86vw);
  background: linear-gradient(135deg, #f7f9fb 0%, #edf1f5 45%, #e4e9ef 100%);
  color: #1f2a33;
  padding: 1.75rem;
  height: 100%;
  overflow-y: auto;
  position: relative;
  box-shadow: -6px 0 26px rgba(0, 0, 0, 0.32);
  transform: translateX(22px);
  transition: transform 0.28s ease;
}

.mobile-menu.is-open .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #1f2a33;
}

.mobile-brand__logo {
  width: 54px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}

.mobile-brand__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mobile-brand__name {
  font: 800 1rem/1 "Lato", "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-brand__tagline {
  font: 500 0.82rem/1.25 "Lato", "Segoe UI", sans-serif;
  color: rgba(31, 42, 51, 0.6);
}

.close-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(31, 42, 51, 0.2);
  background: rgba(255, 255, 255, 0.72);
  color: transparent; /* icon drawn with pseudo */
  font-size: 0;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.close-btn:hover,
.close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(31, 42, 51, 0.35);
  transform: translateY(-1px);
  outline: none;
}

.close-btn::before,
.close-btn::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #1f2a33;
  left: 50%;
  top: 50%;
  transform-origin: center;
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-nav {
  margin-top: 2rem;
}

.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  align-items: stretch;
}

.mobile-nav__item {
  width: 100%;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0.85rem;
  border-radius: 12px;
  color: #1f2a33;
  text-decoration: none;
  font: 700 1rem/1.4 "Lato", "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  width: 100%;
  justify-content: center;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
  outline: none;
}

.mobile-nav__link:active {
  transform: translateX(2px);
}

.mobile-menu__cta {
  margin-top: 2.2rem;
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  font: 800 0.95rem/1 "Lato", "Segoe UI", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  width: 100%;
}

.cta--primary {
  background: linear-gradient(120deg, #35c27f 0%, #1e8c58 45%, #145233 100%);
  color: #0a1a12;
  box-shadow: 0 16px 30px rgba(20, 82, 51, 0.25);
}

.cta--primary:hover,
.cta--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(20, 82, 51, 0.32);
  outline: none;
}

.cta--ghost {
  border: 1px solid #1e8c58;
  color: #0a1a12;
  background: linear-gradient(120deg, #35c27f 0%, #1e8c58 45%, #145233 100%);
  box-shadow: 0 12px 24px rgba(20, 82, 51, 0.2);
}

.cta--ghost:hover,
.cta--ghost:focus-visible {
  border-color: #145233;
  background: linear-gradient(120deg, #3cd68e 0%, #22a168 45%, #145233 100%);
  transform: translateY(-1px);
  outline: none;
}

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  text-align: center;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(236, 240, 245, 0.92));
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  color: #1f2a33;
  font: 700 0.9rem/1.2 "Lato", "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-pill--muted {
  color: rgba(31, 42, 51, 0.7);
  background: rgba(0, 0, 0, 0.02);
}

body.menu-open {
  overflow-y: scroll;
}

/* Solo para móvil */
@media (max-width: 768px) {
  nav#mainMenu {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  header {
    position: relative;
  }
}

/* ==================== layout/layout.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  /* NO display: flex aquí */
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==================== layout/footer.css ==================== */
/* ======= FOOTER PROFESIONAL Y CORPORATIVO ======= */

.footer {
  background: linear-gradient(135deg, #0d3d25 0%, #0a2818 100%);
  color: #f2f2f2;
  font-size: 14px;
  padding-top: 60px;
  padding-bottom: 0;
  margin-top: 80px;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
}

.footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer a:hover {
  color: #87CEEB;
  opacity: 0.9;
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: start;
}

/* Columna 1 - Branding */
.footer-column {
  padding: 0;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 40px;
}

.footer-column h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer-column p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
}

/* Columna 2 - Contacto */
.footer-column1 {
  padding: 0;
  text-align: center;
}

.footer-column1 h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer-column1 p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-column1 a {
  font-weight: 500;
}

/* Columna 3 - Enlaces legales */
.footer-column2 {
  padding: 0;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 40px;
}

.footer-column2 h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: none;
}

.legal-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.legal-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.legal-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: #87CEEB;
  transition: width 0.3s ease;
}

.legal-links a:hover::after {
  width: 100%;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 30px 40px;
  margin-top: 40px;
  margin-bottom: 0;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-column2 {
    grid-column: 1 / -1;
    text-align: center;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0;
    padding-top: 40px;
  }

  .legal-links {
    align-items: center;
  }

  .legal-links a::after {
    left: 50%;
  }

  .legal-links a:hover::after {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .footer {
    padding-top: 40px;
    margin-top: 60px;
    padding-bottom: 0;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
  }

  .footer-column,
  .footer-column1,
  .footer-column2 {
    border: none;
    padding: 0;
    text-align: center;
  }

  .legal-links {
    align-items: center;
  }

  .footer-bottom {
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 0;
  }
}

/* ======= STICKY FOOTER (página de Marcas) ======= */
/* Empuja el footer al fondo cuando el contenido no llena la pantalla */
body.page-marcas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page-marcas .footer {
  margin-top: auto;
}

/* ==================== components/buttons.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
.btn {
  background: var(--color-text);
  color: var(--color-primary);
  padding: 0.70rem 2rem;
  border: none;
  text-decoration: none;
  font-weight: bold;
  border-radius: var(--radius);
  transition: var(--transition);
  display: inline-block;
}
.btn:hover {
  background: var(--color-hover);
}

button {
  background: var(--color-secondary);
  color: var(--color-primary);
  padding: 1rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: bold;
}
button:hover {
  background: var(--color-hover);
}

/* ======= PEGADO DESDE styles2.css ======= */
/* Paginación profesional y moderna */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 50px 0 40px;
  padding: 20px;
  user-select: none;
}

.page-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  background: white;
  color: #495057;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  line-height: 40px;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.page-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(3, 79, 9, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.page-btn:hover::before {
  width: 100%;
  height: 100%;
}

.page-btn:hover {
  background: #f8f9fa;
  border-color: #034f09;
  color: #034f09;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 79, 9, 0.15);
}

.page-btn.active,
.page-btn[aria-current="page"] {
  background: linear-gradient(135deg, #034f09 0%, #0b7013 100%);
  border-color: #034f09;
  color: white;
  box-shadow: 0 4px 16px rgba(3, 79, 9, 0.3);
  transform: scale(1.05);
}

.page-btn.active:hover,
.page-btn[aria-current="page"]:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 79, 9, 0.35);
}

.page-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f8f9fa;
  border-color: #dee2e6;
  color: #adb5bd;
  transform: none;
  box-shadow: none;
}

.page-btn[disabled]:hover {
  background: #f8f9fa;
  border-color: #dee2e6;
  transform: none;
  box-shadow: none;
}

.page-ellipsis {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .pagination {
    gap: 6px;
    margin: 40px 0 30px;
    padding: 15px;
  }
  
  .page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 36px;
  }
  
  .page-ellipsis {
    min-width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .pagination {
    gap: 4px;
  }
  
  .page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 32px;
  }
  
  .page-ellipsis {
    min-width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* ==================== components/cards.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.card {
  background: var(--color-accent);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}
.card:hover {
  transform: translateY(-5px);
}

/* ======= PEGADO DESDE styles2.css ======= */
.legal-card {
  background-color: #f2f2f2;
  border-radius: 12px;
  padding: 2rem 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 300px;
}

.legal-card img {
  width: 220px;
  margin-bottom: 1rem;
}

.legal-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #0b3d0b;
}

.legal-card a {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  color: #195734;
  transition: color 0.2s ease;
}

.legal-card a:hover {
  color: #0d3d25;
}

.legal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.product {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #034f09, #0b7013, #034f09);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product:hover::before {
  opacity: 1;
}

.product:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(3, 79, 9, 0.15);
}

.product-image-wrapper {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  height: 300px;
}

.product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform 0.4s ease;
}

.product:hover img {
  transform: scale(1.08);
}

.product-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(3, 79, 9, 0.95);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  background: white;
}

.product-info h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #034f09;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.product-info h3:first-of-type {
  font-size: 19px;
  margin-bottom: 4px;
}

.product-info h4 {
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #0b7013;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-info p {
  margin: auto 0 0 0;
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}

.product-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0b7013;
  background: #e8f5e9;
  padding: 8px 14px;
  border-radius: 8px;
  margin-top: 8px;
}

.product-stock-status::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #0b7013;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

/* Estilos responsivos mejorados */
@media (max-width: 768px) {
  .product-info {
    padding: 18px;
  }
  
  .product-image-wrapper {
    height: 250px;
  }
  
  .product img {
    padding: 15px;
  }
}

/* ==================== components/forms.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
/* FORM */
form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}
input,
textarea {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}

/* FORMULARIO CONTACTO */
.form-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-container h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.form-group {
  width: 100%;
  margin-bottom: 1rem;
}

 .form-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: sans-serif;
    font-size: 14px;
  }

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Lato', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #00970d;
  box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.2);
}

.form-button {
  display: block;
  width: 100%;
  padding: 0.9rem;
  background-color: #04690c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-button:hover {
  background-color: #005fa3;
}

.titulo-contacto {
  font-family: 'Lato', sans-serif;
  font-weight: 900; /* Puedes usar 300 o 400 si prefieres más fino */
}

/* ======= PEGADO DESDE styles2.css ======= */
/* filtro búsqueda */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 40px 30px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.filters button {
  background-color: white;
  border: 2px solid #e9ecef;
  color: #195734;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-family: 'Lato', sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

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

.filters button:hover::before {
  left: 100%;
}

.filters button:hover {
  background-color: #034f09;
  color: white;
  border-color: #034f09;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 79, 9, 0.25);
}

.filters button.active {
  background: linear-gradient(135deg, #034f09 0%, #0b7013 100%);
  color: white;
  border-color: #034f09;
  box-shadow: 0 4px 16px rgba(3, 79, 9, 0.3);
  transform: scale(1.05);
}

.filters button.active::after {
  content: '✓';
  margin-left: 8px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .filters {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 20px;
  }

  .filters button {
    width: 90%;
    max-width: 320px;
    text-align: center;
    font-size: 14px;
    padding: 14px 24px;
  }
}

/* Alineación horizontal de la casilla de política de privacidad */
.form-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

.form-group label input[type="checkbox"] + a,
.form-group label input[type="checkbox"] + span,
.form-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

.form-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.2;
  }

  @media (max-width: 600px) {
  .form-group label {
    flex-direction: column;   /* Apila checkbox y texto */
    align-items: flex-start;  /* Que el texto quede alineado a la izquierda */
    gap: 0.3;              /* Menos espacio entre ellos */
  }
}

  .form-group a {
    text-decoration: underline;
    color: #00490a;
    white-space: nowrap; /* evita salto de línea en el enlace */
    
  }

.privacidad-label {
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.privacidad-label a {
  color: #0077cc;
  text-decoration: underline;
  font-weight: 500;
}

.privacidad-label input[type="checkbox"] {
  margin-right: 0.4rem;
}

/* ==================== components/popups.css ==================== */
/* ======= PEGADO DESDE styles3.css ======= */
/* ====== Base: no romper desktop ====== */
.mf-trigger,
.mf-panel { display: none; }

@media (max-width: 768px) {
    .filters { display: none !important; }

/* Contenedor para margen bajo el header */
.mf-bar {
  padding: 10px 16px 8px;
  background: transparent;
}

/* Botón estático debajo del header */
.mf-trigger {
  display: block;
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  color: #111;
  padding: 12px 14px;
  font: 600 15px/1.2 "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
}

.mf-trigger:hover {
  border-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.mf-trigger:active {
  transform: translateY(1px);
}

.mf-trigger__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.mf-trigger__icon {
  flex: 0 0 auto;
  opacity: .9;
}

.mf-trigger__label {
  flex: 0 1 auto;
  letter-spacing: .2px;
  
}

button {
  background-color: #ffffff;
}

button:active,
button:focus,
button:hover {
  background-color: #afaeae86;
}

  /* Panel */
  .mf-panel {
    display: block; /* el contenedor existe pero está oculto visualmente */
  }

  .mf-panel[aria-hidden="true"] .mf-panel__sheet { transform: translateY(100%); }
  .mf-panel[aria-hidden="true"] .mf-panel__backdrop { opacity: 0; pointer-events: none; }

  .mf-panel__backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.116);
    transition: opacity .25s ease;
    z-index: 998;
  }

  .mf-panel__sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #ffffff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    transition: transform .25s ease;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  .mf-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 6px 16px;
    border-bottom: 1px solid #000000;
  }
  .mf-panel__header h2 {
    margin: 0;
    font: 700 16px/1.2 "Lato", system-ui;
    letter-spacing: .2px;
  }
  .mf-close {
    border: none; background: transparent; font-size: 20px; cursor: pointer;
    line-height: 1; padding: 6px; border-radius: 8px;
  }

  /* Grid de categorías */
  .mf-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px 18px;
  }

  .mf-cat {
    padding: 10px 12px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    background: #003102;
    font: 600 14px/1.15 "Lato", system-ui;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .02s ease;
  }
  .mf-cat:active { transform: translateY(1px); }
  .mf-cat[aria-pressed="true"] {
    background: #111;
    color: #fff;
    border-color: #111;
  }
}

/* ==================== pages/home.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
/* HERO */
.hero {
  background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
  color: var(--color-primary);
  padding: 0.15rem 1rem;
  text-align: center;
  border-radius: var(--radius);
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.55rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* DIAPOSITIVA PRINCIPAL */
/* SLIDER PROFESIONAL Y MODERNO */

.slider-css {
  width: 100vw;
  height: 800px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  will-change: transform;
}

.slides img {
  width: 100vw;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0.7;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* CONTROLES DEL SLIDER */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.9;
}

.arrow:hover {
  background: rgba(25, 87, 52, 0.85);
  border-color: rgba(25, 87, 52, 1);
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
  box-shadow: 0 8px 25px rgba(25, 87, 52, 0.4);
}

.arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.arrow.prev {
  left: 30px;
}

.arrow.next {
  right: 30px;
}

/* INDICADORES DEL SLIDER */
.slider-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 15;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.slider-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.slider-dot.active {
  width: 32px;
  border-radius: 6px;
  background: #198754;
  border-color: rgba(255, 255, 255, 0.3);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .slider-css {
    height: 500px;
  }
  
  .arrow {
    width: 44px;
    height: 44px;
  }
  
  .arrow.prev {
    left: 15px;
  }
  
  .arrow.next {
    right: 15px;
  }
  
  .slider-indicators {
    bottom: 20px;
    padding: 10px 16px;
    gap: 10px;
  }
  
  .slider-dot {
    width: 10px;
    height: 10px;
  }
  
  .slider-dot.active {
    width: 26px;
  }
}

@media (max-width: 480px) {
  .slider-css {
    height: 400px;
  }
  
  .arrow {
    width: 38px;
    height: 38px;
  }
  
  .arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* PROVEEDORES */

#proveedores {
  padding: 4rem 2rem;
  background-color: #f3f3f3;
}

.proveedores-container {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.titulo-proveedores {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.grid-proveedores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 3rem; /* Espacio horizontal mayor */
  row-gap: 2rem;    /* Espacio vertical (igual o ajustable) */
  align-items: center;
  justify-items: center;
}

.proveedor-item img {
  max-width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.proveedor-item img:hover {
  filter: none;
}

html {
  scroll-behavior: smooth;
}

/* Sección base */
.corp-enum{
  background: var(--bg);
  padding: 48px 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* Contenedor centrado */
.corp-enum__container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Cabecera */
.corp-enum__header{
  text-align: center;
  margin-bottom: 32px;
}
.corp-enum__header h2{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: .2px;
}
.corp-enum__subtitle{
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* Lista enumerada profesional */
.corp-enum__list{
  counter-reset: corp;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

/* Ítem */
.corp-enum__item{
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  overflow: hidden;
}

/* Línea guía institucional a la izquierda (sutil) */
.corp-enum__item::before{
   content: ""; /* Tick */
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(25,87,52,.12), rgba(25,87,52,.35));
}

/* Interacción sobria */
.corp-enum__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  border-color: rgba(25,87,52,.25);
}

/* Medallón con tick verde */
.corp-enum__badge{
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(25,87,52,.25);
  display: grid; 
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #198754; /* verde */
  isolation: isolate;
}

.corp-enum__badge::before{
  content: "✔"; /* Tick verde */
  position: relative; 
  z-index: 1;
  font-size: 20px;
}

.corp-enum__badge::after{
  content:"";
  position: absolute; 
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(25,87,52,.12);
}

/* Contenido */
.corp-enum__content h3{
  margin: 2px 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .2px;
}
.corp-enum__content p{
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}

/* Variante en columnas a partir de 992px (mantiene orden y numeración) */
@media (min-width: 992px){
  .corp-enum__list{
    grid-template-columns: repeat(3, 1fr);
  }
  .corp-enum__item{
    grid-template-columns: 56px 1fr;
    height: 100%;
  }
}

/* Respeto por reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .corp-enum__item{
    transition: none !important;
  }
}

/* POPUP HORARIO FALLERO */
body.popup-open {
  overflow: hidden;
}

.fallas-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fallas-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fallas-popup {
  width: min(680px, 100%);
  background: linear-gradient(140deg, #ffffff 0%, #f7fcf8 100%);
  border-radius: 18px;
  border: 1px solid #d7ead9;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  padding: 2rem 2rem 1.75rem;
  position: relative;
  font-family: 'Lato', sans-serif;
}

.fallas-popup-etiqueta {
  display: inline-block;
  background: #e8f5e9;
  color: #034f09;
  border: 1px solid #cde5d0;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  margin-bottom: 0.8rem;
}

.fallas-popup h2 {
  margin: 0 0 0.75rem;
  color: #034f09;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.fallas-popup p {
  margin: 0;
  color: #3d4a40;
  line-height: 1.55;
  font-size: 1.05rem;
}

.fallas-popup p + p {
  margin-top: 0.6rem;
}

.fallas-popup-detalle {
  margin-top: 0.85rem !important;
  color: #5f6e63 !important;
  font-size: 0.97rem !important;
}

.fallas-popup-cierre-tarde {
  margin-top: 0.8rem !important;
  margin-bottom: 1rem !important;
  background: #f8faf8;
  border-left: 4px solid #0b7013;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: #1f5c27;
  font-weight: 700;
}

.fallas-popup-cierre-completo {
  padding-top: 0.75rem;
  border-top: 1px solid #dce8dd;
  color: #2f3a33;
  font-weight: 600;
}

.fallas-popup-cerrado {
  color: #c62828;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.fallas-popup strong {
  color: #034f09;
}

.fallas-popup-cerrar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 36px;
  height: 36px;
  border: 1px solid #d9e4da;
  border-radius: 10px;
  background: #ffffff;
  color: #235a2b;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.fallas-popup-cerrar:hover {
  border-color: #034f09;
  color: #034f09;
  background: #f1faf2;
}

@media (max-width: 768px) {
  .fallas-popup {
    padding: 1.4rem 1.2rem 1.2rem;
    border-radius: 14px;
  }

  .fallas-popup h2 {
    font-size: 1.5rem;
    padding-right: 1.5rem;
  }

  .fallas-popup p {
    font-size: 0.95rem;
  }

  .fallas-popup-cerrar {
    width: 34px;
    height: 34px;
  }
}

/*HORARIO*/ 
.horario-section {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 50%, #dff2e0 100%);
  font-family: 'Lato', sans-serif;
}

.horario-titulo {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #034f09;
  margin-bottom: 2.5rem;
  letter-spacing: -0.5px;
}

.horario-tabla {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  gap: 0.55rem;
  width: 100%;
  border-radius: 14px;
  background: transparent;
  height: 100%;
  min-height: 510px;
}

.horario-fila {
  display: grid;
  grid-template-columns: 175px 1fr;
  border: 1px solid #dce8dd;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.horario-fila div {
  padding: 1.05rem 1.25rem;
  background-color: white;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.horario-fila:hover div {
  background-color: #fcfdfc;
}

.horario-fila:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(3, 79, 9, 0.1);
}

.horario-fila.encabezado div {
  background: linear-gradient(135deg, #03420e 0%, #045212 100%);
  color: #ffffff !important;
  font-weight: 800;
  text-align: left;
  font-size: 0.98rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1.1rem 1.25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.horario-fila.encabezado {
  border: 1px solid #03380c;
  box-shadow: 0 8px 20px rgba(3, 66, 14, 0.24);
}

.horario-fila.cerrado div {
  background-color: #fff8f8;
}

.horario-fila.cerrado div:last-child {
  color: #dc3545;
  font-weight: 700;
}

.horario-fila div:first-child {
  font-weight: 700;
  color: #18311f;
  font-size: 1rem;
  background: linear-gradient(135deg, #f4faf5 0%, #ebf6ed 100%);
  border-right: 1px solid #dce8dd;
}

.horario-fila.encabezado div:first-child {
  background: linear-gradient(135deg, #02390c 0%, #04460f 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff !important;
}

.horario-fila div:last-child {
  color: #3d4d41;
  font-size: 1.08rem;
  font-weight: 500;
}

/* Resaltado del día actual en la tabla semanal */
.horario-fila.hoy {
  border: 1px solid #045212;
  box-shadow: 0 10px 24px rgba(3, 79, 9, 0.18);
}

.horario-fila.hoy div {
  background-color: #f3faf4;
}

.horario-fila.hoy div:first-child {
  background: linear-gradient(135deg, #e6f6ea 0%, #d6eeda 100%);
  color: #034f09;
}

.horario-fila.hoy div:first-child::after {
  content: "Hoy";
  margin-left: 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #03420e, #045212);
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
}

.horario-aviso-corporativo {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 2rem;
  background: linear-gradient(140deg, #ffffff 0%, #f7fcf8 100%);
  border: 1px solid #d7ead9;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(3, 79, 9, 0.08);
  padding: 1.25rem 1.35rem;
  text-align: left;
}

.horario-aviso-corporativo h2 {
  margin: 0 0 0.65rem;
  color: #034f09;
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
}

.horario-aviso-corporativo p {
  margin: 0;
  color: #3d4a40;
  line-height: 1.5;
  font-size: 1.02rem;
}

.horario-aviso-corporativo p + p {
  margin-top: 0.55rem;
}

@media (max-width: 900px) {
  .horario-aviso-corporativo {
    max-width: 100%;
  }
}

/* ===== AVISO HORARIO DE VERANO ===== */
.horario-verano {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 3rem;
  background: linear-gradient(135deg, #0a7e8c 0%, #1a9aa6 35%, #38b6c4 70%, #7fd4d8 100%);
  background-size: 200% 200%;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(10, 94, 110, 0.32);
  overflow: hidden;
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  isolation: isolate;
  animation: veranoEntrada 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
             veranoCielo 14s ease-in-out infinite alternate;
}

@keyframes veranoEntrada {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes veranoCielo {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* Sol con rayos giratorios */
.horario-verano__sun {
  position: absolute;
  top: -34px;
  right: -34px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0%, #ffe066 45%, #ffcf3f 70%, rgba(255, 207, 63, 0) 72%);
  z-index: -1;
  animation: veranoSolLatido 5s ease-in-out infinite;
}

.horario-verano__sun::before {
  content: "";
  position: absolute;
  inset: -42px;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255, 224, 102, 0.55) 0deg 6deg,
      rgba(255, 224, 102, 0) 6deg 24deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 56px, #000 58px);
          mask: radial-gradient(circle, transparent 56px, #000 58px);
  animation: veranoRayos 26s linear infinite;
}

@keyframes veranoRayos {
  to { transform: rotate(360deg); }
}

@keyframes veranoSolLatido {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 14px rgba(255, 207, 63, 0.45)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 26px rgba(255, 207, 63, 0.7)); }
}

/* Olas animadas en la base */
.horario-verano__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  z-index: -1;
  pointer-events: none;
}

.horario-verano__waves::before,
.horario-verano__waves::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 50% 100%;
}

/* Ola trasera, más tenue y lenta */
.horario-verano__waves::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 50 C 150 10 350 90 600 50 C 850 10 1050 90 1200 50 L1200 80 L0 80 Z' fill='%23ffffff' fill-opacity='0.18'/%3E%3C/svg%3E");
  opacity: 0.9;
  animation: veranoOla 11s linear infinite;
}

/* Ola delantera, más marcada y rápida */
.horario-verano__waves::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 58 C 200 28 400 88 600 58 C 800 28 1000 88 1200 58 L1200 80 L0 80 Z' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E");
  animation: veranoOla 7s linear infinite reverse;
}

@keyframes veranoOla {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.horario-verano__head {
  text-align: center;
  padding: 2.6rem 1.5rem 1.6rem;
  position: relative;
}

.horario-verano__badge {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #ffe066 0%, #f4b740 100%);
  color: #5a3d00;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0.42rem 1.2rem 0.42rem 2.2rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Iconito de sol dentro del badge */
.horario-verano__badge::before {
  content: "☀";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

/* Brillo que recorre el badge */
.horario-verano__badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  animation: veranoBrillo 3.8s ease-in-out infinite;
}

@keyframes veranoBrillo {
  0%, 60% { left: -60%; }
  100%    { left: 130%; }
}

.horario-verano__title {
  margin: 0.9rem 0 0.5rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.horario-verano__subtitle {
  margin: 0 auto;
  max-width: 560px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.horario-verano__subtitle strong {
  color: #ffe1a6;
  font-weight: 700;
}

.horario-verano__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: 0 1.8rem 2.2rem;
}

.horario-verano__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1.7rem 1.2rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  animation: veranoFlotar 6s ease-in-out infinite;
}

.horario-verano__item:nth-child(2) {
  animation-delay: -3s;
}

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

.horario-verano__item:hover {
  transform: translateY(-9px);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.horario-verano__dias {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffe1a6;
}

.horario-verano__horas {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.horario-verano__nota {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffd9d4;
  background: rgba(220, 53, 69, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
}

@media (max-width: 768px) {
  .horario-verano {
    margin-bottom: 2.2rem;
  }

  .horario-verano__head {
    padding: 2rem 1.2rem 1.3rem;
  }

  .horario-verano__title {
    font-size: 1.6rem;
  }

  .horario-verano__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1.2rem 1.8rem;
  }

  .horario-verano__horas {
    font-size: 1.6rem;
  }

  .horario-verano__sun {
    width: 120px;
    height: 120px;
    top: -28px;
    right: -28px;
  }
}

/* Respeta a quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .horario-verano,
  .horario-verano__sun,
  .horario-verano__sun::before,
  .horario-verano__waves::before,
  .horario-verano__waves::after,
  .horario-verano__badge::before,
  .horario-verano__badge::after,
  .horario-verano__item {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .horario-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  
  .horario-box, .anotaciones-box {
    max-width: 100%;
  }

  .horario-tabla {
    gap: 0.6rem;
    min-height: auto;
  }

  .horario-fila {
    grid-template-columns: 1fr;
    border-radius: 10px;
  }

  .horario-fila div {
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
  }

  .horario-fila div:first-child {
    font-weight: 700;
    border-right: none;
    border-bottom: 1px solid #e1ece3;
    font-size: 0.95rem;
  }

  .horario-fila.encabezado {
    display: none;
  }
  
  .horario-fila div:last-child {
    font-size: 0.95rem;
    padding-bottom: 1rem;
  }

  .calendario-interactivo {
    padding: 1.5rem 1rem;
    min-height: auto;
  }
  
  .calendario-control {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .calendario-control button {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  
  .dias-semana {
    padding: 0.6rem 0;
  }
  
  .dias-semana div {
    font-size: 0.85rem;
  }
  
  .dia {
    min-height: 48px;
    max-height: 48px;
    padding: 0.5rem 0.2rem;
    font-size: 0.95rem;
  }
  
  .dia .nota {
    font-size: 0.6rem;
    bottom: 3px;
    padding: 1px 2px;
  }
  
  .horario-titulo {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }

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

  .ubicacion-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .horario-section {
    padding: 2rem 1rem;
  }

  .horario-grid {
    gap: 1.5rem;
    padding: 0 0.5rem;
  }

  .calendario-interactivo {
    padding: 1.2rem 0.8rem;
  }

  .horario-fila div {
    padding: 0.9rem 1rem;
    font-size: 0.85rem;
  }

  .dia {
    min-height: 44px;
    max-height: 44px;
    font-size: 0.9rem;
  }

  .dias-semana div {
    font-size: 0.8rem;
  }

  .calendario-control {
    font-size: 1rem;
  }

  .calendario-control button {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

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

.horario-box, .anotaciones-box {
  width: 100%;
  max-width: 650px;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.horario-box > .horario-tabla {
  flex: 1;
}

/* CALENDARIO */
.calendario-interactivo {
  padding: 2rem 1.8rem;
  font-family: 'Lato', sans-serif;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  height: 100%;
  min-height: 510px;
  display: flex;
  flex-direction: column;
}

.calendario-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #034f09;
  margin-bottom: 1.2rem;
  padding: 0 0.5rem;
}

.calendario-control button {
  background: white;
  border: 2px solid #e9ecef;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #034f09;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  font-weight: 700;
}

.calendario-control button:hover {
  background: #034f09;
  color: white;
  border-color: #034f09;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(3, 79, 9, 0.25);
}

.dias-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  text-align: center;
  font-weight: 700;
  padding: 0.7rem 0;
  border-radius: 10px 10px 0 0;
  margin-bottom: 5px;
  color: #212529;
  letter-spacing: 0.5px;
}

.dias-semana div {
  font-size: 0.9rem;
}

.dias-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.dia {
  background: #f8f9fa;
  border: 2px solid transparent;
  text-align: center;
  padding: 0.6rem 0.3rem;
  cursor: pointer;
  position: relative;
  min-height: 52px;
  max-height: 52px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dia:hover {
  background: #e3f2fd;
  border-color: #2196f3;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.25);
  z-index: 10;
}

.dia.abierto {
  background: white;
  border-color: #e9ecef;
}

.dia.abierto:hover {
  background: #e8f5e9;
  border-color: #0b7013;
}

.dia.cerrado {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: #c62828;
  border-color: #ef5350;
  font-weight: 800;
}

.dia.cerrado:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(198, 40, 40, 0.25);
}

.dia.hoy {
  border-color: #034f09;
  border-width: 3px;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #1b5e20;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(3, 79, 9, 0.3);
}

.dia .nota {
  font-size: 0.65rem;
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.5);
  padding: 1px 3px;
  border-radius: 3px;
}

/* UBICACIÓN MODERNA */
.ubicacion-hero {
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 50%, #dff2e0 100%);
  padding: 4rem 2rem 5rem;
  font-family: 'Lato', sans-serif;
}

.ubicacion-header {
  text-align: center;
  margin-bottom: 3rem;
}

.ubicacion-title {
  font-size: 3rem;
  font-weight: 800;
  color: #034f09;
  margin-bottom: 0.5rem;
  letter-spacing: -1px;
}

.ubicacion-subtitle {
  font-size: 1.2rem;
  color: #6c757d;
  font-weight: 400;
}

.ubicacion-card {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 600px;
}

.ubicacion-info {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.info-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.info-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #034f09 0%, #0b7013 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(3, 79, 9, 0.25);
}

.info-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #034f09;
  margin-bottom: 0.5rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.info-content p {
  font-size: 1rem;
  color: #495057;
  line-height: 1.6;
  margin: 0.3rem 0;
}

.info-content p strong {
  color: #212529;
  font-weight: 700;
}

.info-content a {
  color: #034f09;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.info-content a:hover {
  color: #0b7013;
  text-decoration: underline;
}

.ubicacion-map {
  position: relative;
  overflow: hidden;
}

.ubicacion-map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 1024px) {
  .ubicacion-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .ubicacion-map {
    min-height: 450px;
  }
  
  .ubicacion-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .horario-section {
    padding: 3rem 1rem;
  }
  
  .horario-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding: 0 0.5rem;
  }
  
  .ubicacion-hero {
    padding: 2rem 1rem 2.5rem;
  }
  
  .ubicacion-header {
    margin-bottom: 2rem;
  }
  
  .ubicacion-title {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
  }
  
  .ubicacion-subtitle {
    font-size: 0.95rem;
  }
  
  .ubicacion-card {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  
  .ubicacion-info {
    padding: 1.75rem 1.25rem;
    gap: 1.5rem;
  }
  
  .info-item {
    gap: 1rem;
  }
  
  .info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  
  .info-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .info-content h3 {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }
  
  .info-content p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .ubicacion-map {
    min-height: 320px;
  }
  
  .calendario-interactivo {
    padding: 1.5rem 0.8rem;
    max-width: 360px;
    margin: 0 auto;
  }
  
  .calendario-control {
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
    padding: 0;
  }
  
  .calendario-control button {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
  
  .dias-semana {
    padding: 0.65rem 0;
    border-radius: 8px 8px 0 0;
  }
  
  .dias-semana div {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
  }
  
  .dias-mes {
    gap: 4px;
  }
  
  .dia {
    min-height: 52px;
    max-height: 52px;
    padding: 0.5rem 0.25rem;
    font-size: 1rem;
    border-radius: 6px;
  }
  
  .dia .nota {
    font-size: 0.65rem;
    bottom: 3px;
    padding: 2px 3px;
  }
  
  .horario-tabla {
    max-width: 100%;
    min-height: auto !important;
  }
  
  .horario-fila {
    padding: 0;
  }
  
  .horario-fila div {
    font-size: 0.875rem;
    padding: 1rem 0.75rem;
  }
  
  .horario-fila div:first-child {
    font-size: 0.9rem;
    font-weight: 700;
  }
  
  .horario-fila.encabezado div {
    font-size: 0.95rem;
    padding: 1.1rem 0.75rem;
  }
  
  .horario-titulo {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 600px) {
  .horario-section {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding: 2.5rem 0.5rem;
  }
  
  .horario-grid {
    padding: 0;
  }
  
  .horario-tabla,
  .calendario-interactivo {
    min-height: auto !important;
  }
  
  .ubicacion-title {
    font-size: 1.5rem;
  }
  
  .ubicacion-subtitle {
    font-size: 0.875rem;
  }
  
  .ubicacion-info {
    padding: 1.5rem 1rem;
    gap: 1.25rem;
  }
  
  .info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  
  .info-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .info-content h3 {
    font-size: 0.85rem;
  }
  
  .info-content p {
    font-size: 0.85rem;
  }
  
  .ubicacion-map {
    min-height: 280px;
  }
  
  .horario-titulo {
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    text-align: center;
  }
  
  .calendario-interactivo {
    padding: 1.5rem 0.75rem;
    max-width: 340px;
    margin: 0 auto;
  }
  
  .calendario-control {
    font-size: 1.05rem;
  }
  
  .calendario-control button {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .dias-semana div {
    font-size: 0.85rem;
    letter-spacing: 0.2px;
  }
  
  .dias-mes {
    gap: 4px;
  }
  
  .dia {
    min-height: 48px;
    max-height: 48px;
    padding: 0.4rem 0.2rem;
    font-size: 0.95rem;
    border-radius: 6px;
  }
  
  .dia .nota {
    font-size: 0.6rem;
    bottom: 2px;
    padding: 1px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  .horario-fila div {
    font-size: 0.825rem;
    padding: 0.9rem 0.6rem;
    line-height: 1.4;
  }
  
  .horario-fila div:first-child {
    font-size: 0.85rem;
    min-width: 75px;
  }
  
  .horario-fila.encabezado div {
    font-size: 0.9rem;
    padding: 1rem 0.6rem;
    letter-spacing: 0.3px;
  }
}

/* index */

.hero-secundario {
  background: linear-gradient(to right, #ffffff 0%, #ffffff 60%, #e0f1e1 100%);
  padding: 60px 20px;
}

.imagen-empresa {
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.imagen-empresa:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  filter: brightness(1.05) saturate(1.1);
}

.en-construccion {
  background: linear-gradient(to right, #195734 0%, #ffffff 60%, #e8f5e9 100%);
  padding: 80px 20px;
  text-align: center;
  color: #000000;
  font-family: 'Lato', sans-serif;
}

.contenedor-construccion {
  max-width: 800px;
  margin: 0 auto;
}

.en-construccion h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.en-construccion p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.presentacion-mod {
  padding: 80px 20px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 60%, #e0f1e1 100%);
  font-family: 'Lato', sans-serif;
  text-align: center;
}

.presentacion-mod-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

.presentacion-mod-texto {
  max-width: 800px;
}

.presentacion-mod-texto h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #0b3d0b;
}

.presentacion-mod-texto p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #111;
  text-align: justify; 
}

.presentacion-mod-imagen img {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.presentacion-mod-imagen img:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  filter: brightness(1.05) saturate(1.1);
}

/* Escritorio lado a lado */
@media (min-width: 992px) {
  .presentacion-mod-container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: left;
  }

  .presentacion-mod-texto {
    flex: 1;
    padding-right: 40px;
  }

  .presentacion-mod-imagen {
    flex: 1;
    text-align: center;
  }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  font-family: 'Lato', sans-serif;
  display: flex;
  justify-content: center;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.cookie-banner-content {
  max-width: 1000px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
}

.cookie-banner a {
  color: #195734;
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 0.75rem;
}

.cookie-buttons button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cookie-buttons #acceptCookies {
  background-color: #195734;
  color: #fff;
}

.cookie-buttons .secondary {
  background-color: #e5e5e5;
  color: #333;
}

/* ==================== pages/catalogo.css ==================== */
/* ======= PEGADO DESDE styles2.css ======= */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px;
  padding: 60px 80px 100px;
  max-width: 1600px;
  margin: auto;
  animation: fadeIn 0.6s ease-in-out;
}

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

/* Animación de entrada para cada producto */
.product {
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
}

.product:nth-child(1) { animation-delay: 0.05s; }
.product:nth-child(2) { animation-delay: 0.1s; }
.product:nth-child(3) { animation-delay: 0.15s; }
.product:nth-child(4) { animation-delay: 0.2s; }
.product:nth-child(5) { animation-delay: 0.25s; }
.product:nth-child(6) { animation-delay: 0.3s; }
.product:nth-child(n+7) { animation-delay: 0.35s; }

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

/* Sección header del catálogo */
.catalogo-header {
  text-align: center;
  padding: 60px 20px 40px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.catalogo-header h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #034f09;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.catalogo-header p {
  font-size: 1.1rem;
  color: #6c757d;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 4) En pantallas muy pequeñas, forzamos 1 columna y evitamos desplazamiento lateral */
@media (max-width: 768px){
  .products{ 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding: 40px 20px 80px;
    gap: 30px;
  }
  
  .catalogo-header h1 {
    font-size: 2.2rem;
  }
  
  .catalogo-header p {
    font-size: 1rem;
  }
}

@media (max-width: 480px){
  .products{ 
    grid-template-columns: 1fr;
    padding: 30px 15px 60px;
    gap: 25px;
  }
  html, body{ overflow-x: hidden; }
  
  .catalogo-header {
    padding: 40px 15px 30px;
  }
  
  .catalogo-header h1 {
    font-size: 1.8rem;
  }
}

/*PRODUCTOS*/

.product-link {
  text-decoration: none;      /* Quita el subrayado */
  color: inherit;             /* Usa el mismo color del texto original */
  font-weight: normal;        /* Peso normal por defecto */
}

.product-link:hover {
  font-weight: bold;          /* Negrita al pasar el ratón */
}

/* Solo para móvil */
@media (max-width: 768px) {
  nav#mainMenu {
    display: none;
  }

  .hamburger-btn {
    display: flex; /* coincide con header.css para mantener el icono centrado */
  }

  header {
    position: relative;
  }
}

.catalogo-section {
  padding: 80px 40px;
  background: linear-gradient(to bottom, #ffffff, #f4fdf4);
  font-family: 'Lato', sans-serif;
}

.catalogo-titulo {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  color: #0b3d0b;
  margin-bottom: 10px;
}

.catalogo-subtitulo {
  text-align: center;
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 50px;
}

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.producto-card {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

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

.producto-card h3 {
  font-size: 1.4rem;
  color: #04690c;
  margin: 20px 20px 10px;
}

.producto-card p {
  font-size: 1rem;
  color: #444;
  margin: 0 20px 20px;
  line-height: 1.6;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
} 

.video-section {
  background-color: #f5f5f5;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
}

.video-wrapper {
  width: 100%;
  max-width: 960px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

/* Loader para cuando se filtran productos */
.products-loading {
  position: relative;
}

.products-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  z-index: 10;
}

/* Contador de productos */
.product-count {
  text-align: center;
  padding: 20px;
  font-size: 1rem;
  color: #6c757d;
  font-weight: 500;
}

.product-count strong {
  color: #034f09;
  font-weight: 700;
}

/* Mejorar el fondo del catálogo */
.fondo-catalogo {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
  min-height: 100vh;
}

/* Efecto shimmer en las imágenes cuando cargan */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.product-image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  pointer-events: none;
}

.product:hover .product-image-wrapper::after {
  animation: shimmer 1.5s;
}

/* Estilos para el estado "sin resultados" */
.no-products {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: #6c757d;
}

.no-products h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #495057;
}

.no-products p {
  font-size: 1rem;
  color: #6c757d;
}

/* Tooltips para badges */
.product-badge {
  cursor: default;
  user-select: none;
}

/* Mejoras visuales para h3 y h4 dentro de product-info */
.product-info h3 + h3 {
  margin-top: 4px;
  font-size: 16px;
  opacity: 0.95;
}

/* Responsive refinements */
@media (max-width: 1200px) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding: 50px 40px 80px;
  }
}

@media (max-width: 992px) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
  }
}

/* ==================== pages/contacto.css ==================== */
/* ======= CONTACTO PROFESIONAL Y CORPORATIVO ======= */

.contacto-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #e8f5e9 100%);
  padding: 5rem 2rem;
  font-family: 'Lato', sans-serif;
  min-height: calc(100vh - 300px);
  display: flex;
  align-items: center;
  animation: fadeIn 0.6s ease-in-out;
}

.contacto-container {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  padding: 4rem;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

.contacto-header {
  text-align: center;
  margin-bottom: 3rem;
}

.contacto-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #034f09;
  margin-bottom: 0.75rem;
  letter-spacing: -0.5px;
}

.contacto-subtitle {
  font-size: 1.05rem;
  color: #6c757d;
  font-weight: 400;
  line-height: 1.6;
}

/* FORMULARIO */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #212529;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.required {
  color: #dc3545;
  font-weight: 800;
  margin-left: 0.3rem;
  font-size: 1.1rem;
}

.form-field input,
.form-field textarea {
  padding: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Lato', sans-serif;
  color: #212529;
  background-color: #f8f9fa;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #adb5bd;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #034f09;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(3, 79, 9, 0.1);
}

.form-field textarea {
  resize: vertical;
  min-height: 150px;
}

/* CHECKBOX */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-top: 0.5rem;
}

.form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-top: 2px;
  accent-color: #034f09;
  flex-shrink: 0;
}

.form-checkbox label {
  font-size: 0.9rem;
  color: #495057;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.5;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

.form-checkbox label a {
  color: #034f09;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.form-checkbox label a:hover {
  color: #0b7013;
  text-decoration: underline;
}

/* BOTÓN ENVÍO */
.submit-btn {
  padding: 1.1rem 2rem;
  background: linear-gradient(135deg, #034f09 0%, #0b7013 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(3, 79, 9, 0.25);
  margin-top: 1rem;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #0b7013 0%, #034f09 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(3, 79, 9, 0.35);
}

.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(3, 79, 9, 0.25);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contacto-section {
    padding: 3rem 1rem;
    min-height: auto;
  }

  .contacto-container {
    padding: 2rem 1.5rem;
    border-radius: 12px;
  }

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

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

  .form-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .form-field label {
    font-size: 0.9rem;
  }

  .form-field input,
  .form-field textarea {
    padding: 0.9rem;
    font-size: 1rem;
  }

  .form-checkbox {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .submit-btn {
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .contacto-section {
    padding: 2rem 0.75rem;
  }

  .contacto-container {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .contacto-title {
    font-size: 1.75rem;
  }

  .contacto-subtitle {
    font-size: 0.9rem;
  }

  .form-field label {
    font-size: 0.85rem;
  }

  .form-field input,
  .form-field textarea {
    padding: 0.8rem;
  }

  .submit-btn {
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
  }
}
    align-items: center;      /* Centrar en el eje horizontal */
    gap: 10px;                /* Menos separación */
    padding: 10px;            /* Mantener margen interno */
  }
}

.titulo-contacto {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: #0b3d0b;
  border-left: 5px solid #0b3d0b;
  padding-left: 16px;
  line-height: 1.2;
}

.form-group {
  margin-bottom: 20px;
  font-size: 5px;
}

input,
textarea,
.fake-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #fff;
  box-sizing: border-box;
  color: #333;
}

input:focus,
textarea:focus {
  border-color: #0b3d0b;
  outline: none;
}

.fake-input {
  background-color: #f3f3f3;
  line-height: 1.5;
}

.fake-input a {
  color: #04690c;
  text-decoration: none;
  font-weight: 600;
}

.fake-input a:hover {
  text-decoration: underline;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #444;
}

.form-button {
  background-color: #024407;
  color: #fff;
  padding: 14px 28px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-button:hover {
  background-color: #034f09;
}

.logo-contacto {
  margin-top: 10px;
  text-align: center;
  padding: 50px 10px;
}

.logo-contacto img {
  max-width: 500px;
  opacity: 0.9;
  transition: transform 0.3s ease;
}

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

@media (max-width: 768px) {
  .form-container {
    flex: 1 1 100%;
  }
}

/* ==================== pages/legal.css ==================== */
/* ======= PEGADO DESDE styles2.css ======= */
/* INFORME*/
.informe-legal-container {
   background-color: white;
  padding: 20px; /* Opcional: añade espacio alrededor del texto */
  border-radius: 8px; /* Opcional: bordes redondeados para mejor diseño */
  text-align: center;
}

.legal-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  justify-items: center;
}

/* añadir a css2 */
/* Aviso Legal - Estilo Profesional */
.aviso-legal-section {
  background-color: #f4f4f6;
  padding: 2.5rem 8rem;
}

/* Título principal */
.aviso-title {
  font-family: 'Lato', sans-serif;
  font-size: 2.7rem;
  text-align: center;
  color: #111;
  margin-bottom: 2rem;
  position: relative;
}

.aviso-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #333;
  margin: 1rem auto 0;
  border-radius: 2px;
}

/* Subtítulos */
.aviso-legal-wrapper h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  color: #222;
  font-weight: bold;
  border-left: 5px solid #222;
  padding-left: 0.8rem;
}

/* Sub-subtítulos */
.aviso-legal-wrapper h3,
.aviso-legal-wrapper h4 {
  font-size: 1.2rem;
  margin-top: 2rem;
  font-weight: 600;
  color: #333;
}

/* Párrafos */
.aviso-legal-wrapper p {
  margin: 1rem 0;
  font-weight: 400;
}

/* Listas */
.aviso-legal-wrapper ul {
  padding-left: 1.5rem;
  margin: 1rem 0;
  list-style-type: disc;
}

.aviso-legal-wrapper li {
  margin-bottom: 0.5rem;
}

/* Negritas */
.aviso-legal-wrapper strong {
  font-weight: 700;
  color: #000;
}

.aviso-bloque {
  margin-bottom: 3rem; /* separa visualmente cada sección */
  padding-bottom: 2rem;
  border-bottom: 1px solid #ddd; /* línea sutil si quieres aún más separación */
}

/* ==================== pages/marcas.css ==================== */
/* ===================================================================
   PÁGINA DE MARCAS / DISTRIBUIDORES
   Estilos acotados a body.page-marcas para no afectar a otras páginas
   =================================================================== */

/* ---------- HERO CORPORATIVO ---------- */
.page-hero {
  background:
    radial-gradient(circle at 88% -20%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #0d3d25 0%, #16553a 55%, #1c6b48 100%);
  color: #ffffff;
  padding: 4.5rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

/* Corrientes de aire fluidas que recorren toda la banda (motivo de ventilación) */
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat-x;
}

/* Capa cercana: dos corrientes suaves, fluyen hacia la derecha */
.page-hero::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath d='M0 72 C 65 54 65 54 130 72 C 195 90 195 90 260 72' stroke-width='1.6'/%3E%3Cpath d='M0 132 C 65 114 65 114 130 132 C 195 150 195 150 260 132' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='150' cy='124' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 260px 100%;
  background-position: 0 center;
  opacity: 0.05;
  animation: heroAirFlow 26s linear infinite;
}

/* Capa lejana: una sola corriente muy tenue, sentido contrario (parallax) */
.page-hero::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 200'%3E%3Cpath d='M0 100 C 90 78 90 78 180 100 C 270 122 270 122 360 100' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 360px 100%;
  background-position: 0 center;
  opacity: 0.035;
  animation: heroAirFlowFar 40s linear infinite;
}

@keyframes heroAirFlow {
  from { background-position: 0 center; }
  to   { background-position: 260px center; }
}

@keyframes heroAirFlowFar {
  from { background-position: 0 center; }
  to   { background-position: -360px center; }
}

.page-hero__inner {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #a7e3c4;
  margin-bottom: 1.1rem;
  padding: 0.4rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.page-hero__title {
  font-family: 'Outfit', 'Lato', sans-serif;
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.page-hero__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 1.2rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a7e3c4, #5cc08c);
}

.page-hero__text {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 auto;
  max-width: 680px;
}

/* ---------- REJILLA DE LOGOS EN TARJETAS ---------- */
body.page-marcas #proveedores {
  background: #f5f7f6;
  padding: 4.5rem 2rem;
}

body.page-marcas .titulo-proveedores {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0d3d25;
  margin-bottom: 0.6rem;
}

body.page-marcas .titulo-proveedores::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #16553a, #1c6b48);
}

body.page-marcas .grid-proveedores {
  grid-template-columns: repeat(7, 1fr); /* 14 logos => 2 líneas exactas */
  column-gap: 1.4rem;
  row-gap: 1.4rem;
  margin-top: 3rem;
}

body.page-marcas .proveedor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  padding: 1.8rem 1.5rem;
  background: #ffffff;
  border: 1px solid #e6ebe8;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(13, 61, 37, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.page-marcas .proveedor-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(13, 61, 37, 0.12);
  border-color: rgba(28, 107, 72, 0.35);
}

body.page-marcas .proveedor-item img {
  max-height: 72px;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

body.page-marcas .proveedor-item:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- CABECERA DE LA SECCIÓN DE VALORES ---------- */
body.page-marcas .corp-enum {
  padding: 4.5rem 0;
}

body.page-marcas .corp-enum__header h2 {
  font-family: 'Lato', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  color: #0d3d25;
}

body.page-marcas .corp-enum__subtitle {
  font-family: 'Lato', sans-serif;
  font-size: 1.02rem;
  color: #5a6b60;
}

/* ---------- BANDA CTA DE CIERRE ---------- */
.marcas-cta {
  background: #ffffff;
  padding: 4.5rem 2rem;
  text-align: center;
  border-top: 1px solid #eceeed;
  font-family: 'Lato', sans-serif;
}

.marcas-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}

.marcas-cta h2 {
  font-size: 1.95rem;
  font-weight: 800;
  color: #0d3d25;
  margin: 0 0 0.7rem;
  letter-spacing: -0.3px;
}

.marcas-cta p {
  font-size: 1.08rem;
  color: #5a6b60;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.marcas-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.marcas-cta__btn {
  display: inline-block;
  padding: 0.95rem 2.1rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, #16553a, #1c6b48);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(13, 61, 37, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.marcas-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(13, 61, 37, 0.28);
}

.marcas-cta__btn--ghost {
  background: transparent;
  color: #16553a;
  border: 2px solid #16553a;
  box-shadow: none;
}

.marcas-cta__btn--ghost:hover {
  background: rgba(22, 85, 58, 0.07);
  box-shadow: none;
}

/* ---------- RESPONSIVE ---------- */

/* Pantallas grandes-medias: mantenemos 7 por fila pero más juntos */
@media (max-width: 1200px) {
  body.page-marcas .grid-proveedores {
    column-gap: 1rem;
    row-gap: 1rem;
  }

  body.page-marcas .proveedor-item {
    min-height: 130px;
    padding: 1.4rem 1rem;
  }

  body.page-marcas .proveedor-item img {
    max-height: 60px;
  }
}

/* Tablet: 4 columnas */
@media (max-width: 992px) {
  .page-hero {
    padding: 4rem 1.5rem 3.5rem;
  }

  .page-hero__title {
    font-size: 2.1rem;
  }

  body.page-marcas #proveedores {
    padding: 3.5rem 1.5rem;
  }

  body.page-marcas .grid-proveedores {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Móvil grande: 3 columnas */
@media (max-width: 768px) {
  .page-hero {
    padding: 3.5rem 1.25rem 3rem;
  }

  .page-hero__title {
    font-size: 1.8rem;
  }

  .page-hero__text {
    font-size: 1rem;
  }

  .page-hero__eyebrow {
    font-size: 0.72rem;
  }

  .page-hero::before {
    opacity: 0.04;
  }

  .page-hero::after {
    opacity: 0.03;
  }

  body.page-marcas #proveedores {
    padding: 3rem 1.25rem;
  }

  body.page-marcas .titulo-proveedores {
    font-size: 1.35rem;
  }

  body.page-marcas .grid-proveedores {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.8rem;
    row-gap: 0.8rem;
    margin-top: 2rem;
  }

  body.page-marcas .proveedor-item {
    min-height: 110px;
    padding: 1.1rem 0.9rem;
    border-radius: 14px;
  }

  body.page-marcas .proveedor-item img {
    max-height: 52px;
    /* En táctil no hay hover: mostramos los logos ya a color y nítidos */
    filter: none;
    opacity: 1;
  }

  body.page-marcas .corp-enum {
    padding: 3rem 0;
  }

  body.page-marcas .corp-enum__header h2 {
    font-size: 1.55rem;
  }

  .marcas-cta {
    padding: 3.5rem 1.25rem;
  }

  .marcas-cta h2 {
    font-size: 1.5rem;
  }

  .marcas-cta p {
    font-size: 1rem;
  }

  .marcas-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .marcas-cta__btn {
    width: 100%;
  }
}

/* Móvil pequeño: 2 columnas */
@media (max-width: 480px) {
  .page-hero__title {
    font-size: 1.55rem;
  }

  body.page-marcas .grid-proveedores {
    grid-template-columns: repeat(2, 1fr);
  }

  body.page-marcas .proveedor-item {
    min-height: 100px;
  }

  body.page-marcas .proveedor-item img {
    max-height: 56px;
  }
}

/* ---------- REDUCCIÓN DE MOVIMIENTO ---------- */
@media (prefers-reduced-motion: reduce) {
  body.page-marcas .proveedor-item,
  .marcas-cta__btn {
    transition: none !important;
  }

  .page-hero::before,
  .page-hero::after {
    animation: none !important;
  }
}

/* ==================== core/legacy.css ==================== */
/* ======= PEGADO DESDE styles1.css ======= */
/* ======= PEGADO DESDE styles2.css ======= */
/* ======= PEGADO DESDE styles3.css ======= */

.marco {
  border: 2px solid #ffffff;      /* Borde negro de 2px */
  padding: 10px;               /* Espacio interno */
  display: inline-block;       /* Ajusta el tamaño al contenido */
  border-radius: 5px;          /* Bordes redondeados (opcional) */
  background-color: #ffffff;   /* Fondo claro (opcional) */
}