/* ========================================
   CARPETAS LED - Main Stylesheet
   Modern, minimalist design for LED display frames
   ======================================== */

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */
:root {
  /* Colors */
  --color-primary: #0066FF;
  --color-primary-dark: #0052CC;
  --color-primary-light: #3385FF;
  --color-secondary: #1a1a2e;
  --color-background: #FFFFFF;
  --color-background-alt: #F8F9FA;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-border: #E0E0E0;
  --color-success: #28A745;
  --color-error: #DC3545;
  --color-warning: #FFC107;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-5xl: 3rem;
  /* 48px */

  /* Spacing */
  --spacing-xs: 0.5rem;
  /* 8px */
  --spacing-sm: 1rem;
  /* 16px */
  --spacing-md: 1.5rem;
  /* 24px */
  --spacing-lg: 2rem;
  /* 32px */
  --spacing-xl: 3rem;
  /* 48px */
  --spacing-2xl: 4rem;
  /* 64px */
  --spacing-3xl: 6rem;
  /* 96px */

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* ========================================
   Mobile UX Polish & Resets
   ======================================== */

/* 1. Prevenir scroll horizontal accidental */
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 2. Imágenes responsive (nunca rompen el layout) */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3. Asegurar que los elementos interactivos sean fáciles de tocar */
/* Aumenta el tamaño de los objetivos táctiles para una mejor usabilidad móvil */
button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 44px;
  display: inline-flex;
  /* Asegura centrado vertical */
  align-items: center;
  justify-content: center;
}

/* Ensure text inputs are touch-friendly but respect their own sizing when needed */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
  min-height: 44px;
}

/* 4. Prevenir el zoom automático en campos de entrada en iOS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-size: 16px;
  /* Evita el zoom en iOS */
}

/* 5. Ajustar la altura del hero para que no sea excesivamente alta en móviles */
/* Esto es un ejemplo, ajusta el selector y el valor según tu diseño */
@media (max-width: 768px) {
  .hero-section {
    min-height: 60vh;
    /* O un valor fijo como 400px */
  }
}

/* ========================================
   Reseteo y Estilos Base
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ========================================
   Tipografía
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--color-secondary);
}

h1 {
  font-size: var(--font-size-5xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-4xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--spacing-sm);
}

.text-light {
  color: var(--color-text-light);
}

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

/* ========================================
   Layout Components
   ======================================== */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--spacing-3xl) 0;
}

.section-alt {
  background-color: var(--color-background-alt);
}

/* ========================================
   Header & Navigation
   ======================================== */
.header {
  background-color: var(--color-background);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
}

.nav-logo {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.nav-logo span {
  color: var(--color-primary);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
  align-items: center;
}

.nav-link {
  color: var(--color-text);
  font-weight: 500;
  padding: var(--spacing-xs) 0;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
}

.nav-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-secondary);
  margin: 5px 0;
  transition: all var(--transition-base);
}

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  font-family: var(--font-primary);
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white;
}

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

.btn-secondary {
  background-color: white;
  color: var(--color-primary);
  border: none;
  box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-white {
  background-color: white;
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

.btn-white:hover {
  background-color: rgb(237, 236, 236);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

.btn-large {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.btn-block {
  display: block;
  width: 100%;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #2d2d44 100%);
  color: white;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../images/gallery/escaparate-led-alta-luminosidad.webp') center/cover no-repeat;
  opacity: 0.2;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero h1 {
  color: white;
  margin-bottom: var(--spacing-md);
  animation: fadeInUp 0.8s ease-out;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* Desktop only: wider h1 for 2-line display */
@media (min-width: 769px) {
  .hero h1 {
    width: 1100px;
    max-width: 1100px;
    margin-left: calc((700px - 1100px) / 2);
    margin-right: calc((700px - 1100px) / 2);
  }
}

.hero h2 {
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero p {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xl);
  color: rgba(255, 255, 255, 0.9);
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero ul {
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.hero-cta {
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
}

.hero-cta .btn {
  flex: 1;
  max-width: 300px;
}

/* ========================================
   Benefits Grid
   ======================================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.benefit-card {
  text-align: center;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  transition: transform var(--transition-base);
}

.benefit-card:hover {
  transform: translateY(-5px);
}

.benefit-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
}

.benefit-icon .lucide {
  width: 32px;
  height: 32px;
  stroke-width: 2;
  color: white;
}

.benefit-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.benefit-card p {
  color: var(--color-text-light);
  margin-bottom: 0;
}

/* ========================================
   Product Cards
   ======================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.product-card {
  background: white;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  background-color: var(--color-background-alt);
}

/* ========================================
   Gallery Grid - Traditional (nosotros.html)
   ======================================== */
/* Mobile: Horizontal slider with peek effect */
@media (max-width: 767px) {
  .gallery-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    margin-left: calc(var(--container-padding) * -1);
    margin-right: calc(var(--container-padding) * -1);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-bottom: var(--spacing-sm);
  }

  .gallery-grid::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
  }

  .gallery-grid .gallery-item {
    flex: 0 0 85%;
    min-width: 85%;
    scroll-snap-align: center;
  }
}

/* Desktop: Grid layout (default) */
@media (min-width: 768px) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
  }
}

.gallery-item {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base);
  margin: 0;
}

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

.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.gallery-caption {
  padding: var(--spacing-sm);
  background: white;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Hide captions on mobile for cleaner slider experience */
@media (max-width: 767px) {
  .gallery-caption {
    display: none;
  }
}

/* ========================================
   Gallery Slider - Horizontal (index.html)
   ======================================== */
.gallery-grid-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  margin: 0 calc(var(--container-padding) * -1);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.gallery-grid-slider::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.gallery-grid-slider .gallery-item {
  /* Mobile: Show mostly one image with a peek at the next (85%) */
  flex: 0 0 85%;
  scroll-snap-align: center;
}

@media (min-width: 768px) {
  .gallery-grid-slider {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    /* Ocultar scroll en desktop, controlado por JS */
  }

  .gallery-grid-slider .gallery-item {
    /* Desktop: Show exactly 3 items. 
       Formula: (100% width - 2 spaces) / 3 items */
    flex: 0 0 calc((100% - (var(--spacing-md) * 2)) / 3);
    min-width: calc((100% - (var(--spacing-md) * 2)) / 3);
    max-width: calc((100% - (var(--spacing-md) * 2)) / 3);
    scroll-snap-align: start;
  }
}

/* ========================================
   Gallery Navigation Arrows
   ======================================== */
.gallery-arrow {
  display: none;
  /* Hidden on mobile, touch scrolling preferred */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-base);
  z-index: 10;
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  min-height: auto;
  /* Override global button min-height */
  padding: 0;
}

.gallery-container:hover .gallery-arrow {
  opacity: 1;
}

.gallery-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: var(--shadow-lg);
}

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

.gallery-arrow-left {
  left: -24px;
}

.gallery-arrow-right {
  right: -24px;
}

@media (min-width: 768px) {
  .gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ========================================
   Product Gallery (Multi-Image Carousel)
   ======================================== */
.product-gallery {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: var(--color-background-alt);
}

.gallery-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery-image.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* Flechas de navegación */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  min-height: auto;
  /* Reset global button style */
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.product-gallery:hover .gallery-nav {
  opacity: 1;
}

.gallery-prev {
  left: 10px;
}

.gallery-next {
  right: 10px;
}

.gallery-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gallery-nav:active {
  transform: translateY(-50%) scale(1.05);
}

/* Indicadores de puntos */
.gallery-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(255, 255, 255, 0.5);
  min-height: auto;
  /* Reset global button style */
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.indicator.active {
  background: white;
  width: 24px;
  border-radius: 4px;
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

/* Ocultar controles para imagen única */
.product-gallery.single-image .gallery-nav,
.product-gallery.single-image .gallery-indicators {
  display: none;
}

.product-content {
  padding: var(--spacing-lg);
}

.product-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.product-description {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.product-specs {
  list-style: none;
  margin-bottom: var(--spacing-md);
}

.product-specs li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  display: flex;
  justify-content: space-between;
}

.product-specs li:last-child {
  border-bottom: none;
}

.spec-label {
  font-weight: 600;
  color: var(--color-text);
}

.spec-value {
  color: var(--color-text-light);
}

/* ========================================
   Forms
   ======================================== */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--color-text);
}

.form-label.required::after {
  content: ' *';
  color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

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

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.form-checkbox input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

.form-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
}

/* Form row for side-by-side fields */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

@media (max-width: 768px) and (min-width: 481px) {
  .form-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
}

.blog-content th,
.blog-content td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.blog-content th {
  background-color: var(--color-background-alt);
  font-weight: 600;
}

/* ========================================
   Tablas Comparativas (Estilo Corporativo)
   ======================================== */

/* Contenedor con scroll horizontal para móviles */
.table-wrapper {
  overflow-x: auto;
  margin: var(--spacing-xl) 0;
  margin-bottom: var(--spacing-lg);
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Mobile: Indicador visual de scroll horizontal */
@media (max-width: 768px) {
  .table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .table-wrapper.scrolled-to-end::after {
    opacity: 0;
  }

  /* Hint text para scroll */
  .mobile-scroll-hint {
    display: block;
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs);
    background: var(--color-background-alt);
    border-radius: var(--border-radius);
  }

  /* Optimizar tabla para móvil */
  .table-corporate {
    font-size: 0.8rem;
    /* Reducido de 0.85rem para mejor uso del espacio */
  }

  .table-corporate th,
  .table-corporate td {
    padding: 0.4rem 0.6rem;
    /* Reducido para maximizar espacio horizontal */
    white-space: nowrap;
  }

  /* Mejorar legibilidad en tablas pequeñas */
  .table-corporate tbody th {
    font-size: 0.75rem;
  }
}

/* Desktop: ocultar hint */
@media (min-width: 769px) {
  .mobile-scroll-hint {
    display: none;
  }
}

/* Tabla base con estilo corporativo */
.table-corporate {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-width: 600px;
}

/* Cabecera de tabla con azul corporativo */
.table-corporate thead tr {
  background: #E6F2FF;
  border-bottom: 2px solid #99CCFF;
}

.table-corporate th {
  padding: 1rem;
  font-weight: 700;
  color: #0052CC;
  border-right: 1px solid #e5e7eb;
}

.table-corporate th:last-child {
  border-right: none;
}

/* Alineación de cabeceras */
.table-corporate th.text-left {
  text-align: left;
}

.table-corporate th.text-center {
  text-align: center;
}

/* Primera columna (encabezados de fila) */
.table-corporate tbody th {
  padding: 1rem;
  font-weight: 600;
  color: var(--color-text);
  border-right: 1px solid #e5e7eb;
  text-align: left;
  background: white;
}

/* Celdas de datos */
.table-corporate td {
  padding: 1rem;
  text-align: center;
  color: var(--color-text);
  border-right: 1px solid #e5e7eb;
}

.table-corporate td:last-child,
.table-corporate th:last-child {
  border-right: none;
}

/* Filas alternadas para mejor legibilidad */
.table-corporate tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.table-corporate tbody tr:nth-child(even) {
  background: #f9fafb;
}

.table-corporate tbody tr:last-child {
  border-bottom: none;
}

/* Celdas destacadas (valores importantes) */
.table-corporate td.highlight {
  font-weight: 500;
}

/* Responsive: ajustar padding en móviles */
@media (max-width: 768px) {

  .table-corporate th,
  .table-corporate td {
    padding: 0.75rem;
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   Cookie Banner
   ======================================== */
/* ========================================
   Footer
   ======================================== */
/* ========================================
   Footer
   ======================================== */
.footer {
  background-color: var(--color-secondary);
  /* Reverted to dark */
  color: white;
  /* Reverted to white */
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  margin-top: auto;
}

/* Make footer wider on desktop */
.footer .container {
  max-width: 1400px;
  /* Wider than standard container */
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  align-items: start;
}

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

.footer-section h4 {
  color: white;
  /* Reverted */
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-links li {
  margin-bottom: var(--spacing-xs);
  text-align: center;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  /* Reverted */
  text-decoration: none;
  transition: color var(--transition-base);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: white;
  /* Reverted */
}

/* Geo-Navigation Columns */
.geo-columns {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 20px;
  row-gap: 0;
}

.geo-columns a {
  white-space: nowrap;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* Reverted */
  padding-top: var(--spacing-lg);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  /* Reverted */
  font-size: 0.875rem;
}

/* ========================================
   Utilities
   ======================================== */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: var(--spacing-xs);
}

.mt-2 {
  margin-top: var(--spacing-sm);
}

.mt-3 {
  margin-top: var(--spacing-md);
}

.mt-4 {
  margin-top: var(--spacing-lg);
}

.mt-5 {
  margin-top: var(--spacing-xl);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--spacing-xs);
}

.mb-2 {
  margin-bottom: var(--spacing-sm);
}

.mb-3 {
  margin-bottom: var(--spacing-md);
}

.mb-4 {
  margin-bottom: var(--spacing-lg);
}

.mb-5 {
  margin-bottom: var(--spacing-xl);
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.max-w-1200 {
  max-width: 1200px !important;
}

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

.gallery-container {
  position: relative;
  padding: 0 var(--container-padding);
}

@media (min-width: 768px) {
  .gallery-container {
    padding: 0;
    /* Sin padding en desktop para respetar max-width */
  }
}

/* Visualmente oculto pero accesible para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
  :root {
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2rem;
    --spacing-3xl: 4rem;
  }

  .hero {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.35rem;
    /* Mejorado para mejor jerarquía */
    --font-size-xl: 1.2rem;
    /* Mejorado para mejor legibilidad */
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 2.5rem;
    --container-padding: 1rem;
    /* Aumentado de 0.75rem para mejor uso del espacio */
  }

  .nav-menu {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: white;
    flex-direction: column;
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
    transition: left var(--transition-base);
    box-shadow: var(--shadow-lg);
    align-items: flex-start;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-toggle {
    display: block;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

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

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

  .hero {
    min-height: auto;
    padding: var(--spacing-xl) 0;
  }

  /* Mejorar espaciado de botones en hero para móvil */
  .hero-cta {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    /* 24px de separación entre botones */
  }

  /* Botón secundario con fondo sólido en móvil (sin hover) */
  .hero .btn-secondary {
    background-color: white;
    color: var(--color-primary);
    border: none;
  }

  /* Reducir altura de botones en hero para móvil */
  .hero-cta .btn {
    padding: 0.5rem 1rem;
    flex: 1 1 0;
    min-width: 0;
  }

  .benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
  }

  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }

  /* Reducir tamaño de texto del footer en móvil */
  .footer {
    padding: var(--spacing-lg) 0 var(--spacing-md);
  }

  .footer-section h4 {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }

  .footer-links {
    font-size: 0.85rem;
  }

  .footer-links li {
    margin-bottom: 0.25rem;
  }

  .footer-bottom {
    font-size: 0.75rem;
    padding-top: var(--spacing-md);
  }

  /* --- Mobile UX Polish (Extras) --- */

  /* 3. Touch Targets (dedos): Mínimo 44px de altura para ser pulsables */
  .btn,
  .hero-cta .btn,
  input,
  select,
  textarea {
    min-height: 44px;
    display: flex;
    /* Asegura centrado vertical */
    align-items: center;
    justify-content: center;
  }

  /* 4. Prevenir Zoom en iOS (Inputs deben ser 16px min) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 5. Altura dinámica real (evita que la barra del navegador tape contenido) */
  .hero {
    min-height: 100dvh;
    padding: var(--spacing-xl) 0;
    /* Padding seguro */
  }
}



/* ========================================
   Legal Pages Styling
   ======================================== */
.legal-container {
  max-width: 900px;
  margin: 0 auto;
}

.legal-content {
  background: white;
  padding: var(--spacing-2xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  line-height: 1.8;
}

.legal-content h1 {
  font-size: var(--font-size-4xl);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.legal-content .legal-date {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xl);
  display: block;
  font-style: italic;
}

.legal-content h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-secondary);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary);
}

.legal-content h3 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.legal-content p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  text-align: justify;
}

.legal-content ul,
.legal-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.legal-content li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.legal-content li strong {
  color: var(--color-secondary);
  font-weight: 600;
}

.legal-content a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.legal-content a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.legal-content strong {
  font-weight: 600;
  color: var(--color-secondary);
}

.legal-highlight {
  background: var(--color-background-alt);
  padding: var(--spacing-md);
  border-left: 4px solid var(--color-primary);
  margin: var(--spacing-lg) 0;
  border-radius: var(--border-radius);
}

/* Responsive adjustments for legal pages */
@media (max-width: 768px) {
  .legal-content {
    padding: var(--spacing-lg);
  }

  .legal-content h1 {
    font-size: var(--font-size-3xl);
  }

  .legal-content h2 {
    font-size: var(--font-size-xl);
  }

  .legal-content h3 {
    font-size: var(--font-size-lg);
  }

  .legal-content p {
    text-align: left;
  }
}

/* ========================================
   Blog Content Typography Styling
   ======================================== */

/* Blog post content container - only typography improvements */
.blog-content h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-secondary);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  padding-bottom: var(--spacing-sm);
  border-bottom: 3px solid var(--color-primary);
}

.blog-content h2:first-child {
  margin-top: 0;
}

.blog-content h3 {
  font-size: var(--font-size-2xl);
  color: var(--color-text);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  position: relative;
  padding-left: var(--spacing-md);
}

.blog-content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--color-primary);
  border-radius: 2px;
}

.blog-content p {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
  line-height: 1.8;
}

.blog-content ul,
.blog-content ol {
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-xl);
}

.blog-content ul li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.blog-content ul li::marker {
  color: var(--color-primary);
  font-weight: 700;
}

.blog-content ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

.blog-content ol li {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-2xl);
  position: relative;
  counter-increment: item;
}

.blog-content ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-primary);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.blog-content strong {
  color: var(--color-secondary);
  font-weight: 600;
}

.blog-content a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.blog-content a:hover {
  border-bottom-color: var(--color-primary);
}

/* Responsive typography adjustments */
@media (max-width: 768px) {
  .blog-content h2 {
    font-size: var(--font-size-2xl);
  }

  .blog-content h3 {
    font-size: var(--font-size-xl);
  }
}

/* ========================================
   Mobile Navigation & Container Spacing
   ======================================== */
@media (max-width: 768px) {

  /* Añadir padding horizontal al nav para evitar que el logo toque el borde */
  .nav {
    padding: var(--spacing-sm) var(--spacing-sm);
  }

  /* Asegurar que el container también tenga padding horizontal */
  .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  /* Logo más pequeño en móvil para mejor ajuste */
  .nav-logo {
    font-size: var(--font-size-xl);
  }
}

/* ========================================
   Galería Semántica de Proyectos Reales
   ======================================== */

/* Grid container para galería */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  /* Reseteo de elemento figure */
}

/* Item individual de galería (figure element) */
.gallery-item {
  margin: 0;
  /* Reseteo predeterminado de figure */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 4/3;
  /* Mantiene proporción consistente */
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Imágenes responsive */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Elimina el espacio fantasma inferior */
}

/* Caption con degradado para mejor legibilidad */
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  /* Degradado para mejor legibilidad */
  color: white;
  padding: 15px 10px 10px;
  /* Mayor padding arriba por el degradado */
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

/* Responsivo: 1 columna grande en Tablets y Móviles (Petición Cliente: "Una encima de otra") */
@media (max-width: 1023px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    /* Una sola columna para máximo tamaño */
    gap: 24px;
    /* Separación clara */
  }

  .gallery-caption {
    font-size: 1rem;
    padding: 16px;
  }
}

/* ========================================
   Blog Grid
   ======================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-xl);
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Utilities & Components (Refactoring)
   ======================================== */

/* Utility Classes */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-white {
  color: white !important;
}

.text-light {
  color: var(--color-text-light) !important;
}

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

.text-sm {
  font-size: var(--font-size-sm);
}

.text-lg {
  font-size: var(--font-size-lg);
}

/* Clase para párrafos introductorios centrados */
.text-intro-centered {
  max-width: 800px;
  margin: 0 auto;
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.bg-white {
  background-color: white !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

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

/* Component: Benefit Card */
.benefit-card-alt {
  background: white;
  padding: 1.5rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.benefit-card-alt-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.22);
}

.benefit-card-alt-icon .lucide {
  width: 26px;
  height: 26px;
  stroke-width: 2;
  color: white;
}

.benefit-card-alt h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.benefit-card-alt p {
  margin-bottom: 0;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* Component: Step Card (How To) */
.step-card {
  background: var(--color-background-alt);
  padding: 1.5rem;
  border-radius: var(--border-radius-lg);
  border-left: 4px solid var(--color-primary);
  height: 100%;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.step-number {
  background: var(--color-primary);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.step-title {
  margin: 0;
  font-size: 1.1rem;
}

.step-description {
  margin-bottom: 0;
  color: var(--color-text-light);
}

/* Component: Configuration Card (Simulador) */
.config-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.config-card-content {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.config-card-body {
  flex: 1;
  min-width: 250px;
}

.config-card h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.config-card-subtitle {
  color: var(--color-text-light);
  margin-bottom: 1rem;
  font-size: var(--font-size-sm);
}

.config-card-list {
  color: var(--color-text);
  margin: 0;
  padding-left: 1.5rem;
}

/* Component: Hero List */
.hero-features {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-xl);
}

.hero-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: var(--spacing-md);
}

.hero-check {
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
}

.hero-check .lucide {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}

.title-icon-inline {
  display: inline-flex;
  vertical-align: text-bottom;
}

.title-icon-inline.lucide,
.title-icon-inline .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
  margin-right: 0.25rem;
}

.hero-feature-text {
  color: rgba(255, 255, 255, 0.9);
}

/* Component: Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
  margin-top: 3rem;
}

.stat-item h3 {
  color: var(--color-primary);
  font-size: var(--font-size-4xl);
  margin-bottom: 0.5rem;
}

.stat-item p {
  color: var(--color-text-light);
}

/* New Grid Utilities */
.grid-responsive-sm {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-responsive-md {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-responsive-lg {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-stack {
  display: grid;
  gap: 2rem;
}

/* ========================================
   Nosotros Page & Shared Components
   ======================================== */

.hero-page {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

.hero-page h1 {
  color: white;
  font-size: 2.5rem;
  margin-bottom: var(--spacing-lg);
}

.hero-page p {
  color: white;
  font-size: var(--font-size-lg);
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.95;
}

.section-padding {
  padding: var(--spacing-3xl) var(--spacing-md);
}

.philosophy-card {
  background: var(--color-background-alt);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-md);
  border-left: 4px solid var(--color-primary);
}

.comparison-card {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-xl);
}

.feature-card {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform 0.3s ease;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card--highlight {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  box-shadow: var(--shadow-lg);
}

.feature-card--highlight .feature-card-subtitle,
.feature-card--highlight .icon-circle {
  color: white;
  /* Ensure text/icon contrast */
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: 2.5rem;
}

.icon-circle .lucide {
  width: 36px;
  height: 36px;
  stroke-width: 2;
}

.icon-circle-primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}

.icon-circle-white {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.icon-circle-primary .lucide,
.icon-circle-white .lucide {
  color: white;
}

.cta-box {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  padding: var(--spacing-2xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
}

.cta-box p {
  opacity: 0.95;
}

/* WhatsApp Widget */
.whatsapp-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.whatsapp-widget a {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #f0fdf4;
  color: #166534;
  padding: 14px 24px;
  border: 1px solid #bbf7d0;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.whatsapp-widget a:hover {
  background-color: #dcfce7;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.whatsapp-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.whatsapp-text {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .whatsapp-widget a {
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .whatsapp-text {
    display: none;
  }

  .whatsapp-icon {
    width: 26px;
    height: 26px;
  }
}

/* ========================================
   Products Page
   ======================================== */

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

.feature-item-card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.feature-item-card h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.feature-item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-item-title .lucide {
  width: 20px;
  height: 20px;
  color: var(--color-secondary);
  stroke-width: 2;
  flex-shrink: 0;
}

.feature-item-card p {
  margin-bottom: 0;
}

.lucide {
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
}

.config-card .title-icon-inline.lucide {
  color: var(--color-secondary);
}

.rotation-prompt-icon .lucide,
.error-icon .lucide,
.success-icon .lucide,
.icon-circle-primary .lucide,
.icon-circle-white .lucide,
.benefit-icon .lucide {
  color: white;
}

/* Mobile Scroll Hint */
.mobile-scroll-hint {
  display: none;
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .mobile-scroll-hint {
    display: block;
  }
}

/* ========================================
   Blog Page
   ======================================== */

.blog-card-thumb {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-3xl);
}

.bg-gradient-cyan {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.bg-gradient-purple {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.bg-gradient-pink {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.bg-gradient-green {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.bg-gradient-sunset {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.blog-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xs);
}

.blog-title-link {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-title-link:hover {
  color: var(--color-primary);
}

.pagination-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-2xl);
}

/* ========================================
   Contact Page
   ======================================== */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.contact-info-card {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
}

.contact-info-card:last-child {
  margin-bottom: 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.icon-circle-sm {
  width: 50px;
  height: 50px;
  font-size: var(--font-size-2xl);
  margin: 0;
  /* Override default margin */
}

.icon-circle-sm .lucide {
  width: 22px;
  height: 22px;
}

.legal-text-box {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--color-background-alt);
  border-radius: var(--border-radius-sm);
}

.map-placeholder-container {
  background: var(--color-background-alt);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
}

.map-placeholder-content {
  background: white;
  height: 400px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
}

.contact-link-lg {
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
}

.contact-link-lg:hover {
  color: var(--color-primary);
}

/* ========================================
   Budget Page (Presupuesto)
   ======================================== */

.container-sm {
  max-width: 800px;
  margin: 0 auto;
}

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

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

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

.trust-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: 0.5rem;
}

.trust-icon .lucide {
  width: 34px;
  height: 34px;
  stroke-width: 2;
  color: var(--color-primary);
}

.form-label-checkbox {
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
}

.technical-details-container {
  display: none;
  transition: all 0.3s ease;
  margin-top: var(--spacing-md);
}

.technical-details-toggle {
  margin-bottom: var(--spacing-md);
}

.help-text {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
  color: var(--color-text-light);
}

/* ========================================
   Blog Post Detail
   ======================================== */

.blog-back-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.blog-meta-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
}

.blog-tags-container {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.blog-tag {
  background: var(--color-primary);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: var(--font-size-sm);
}

.blog-featured-image {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-xl);
}

/* Modifier classes for gradients defined previously can be reused */

.blog-content-box {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.blog-cta-box {
  background: var(--color-background-alt);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-xl);
  text-align: center;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.related-post-card {
  background: white;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.related-post-thumb {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-3xl);
}

/* ========================================
   Blog Specific Components
   ======================================== */

.promo-card {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 82, 204, 0.05));
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
  text-align: center;
}

.promo-card h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-2xl);
}

.promo-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.promo-list li {
  padding: var(--spacing-xs) 0;
}

.faq-card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.faq-card h3 {
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.blog-post-nav {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.blog-post-nav-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.faq-footer-box {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  margin-top: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.highlight-box {
  background: var(--color-background-alt);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  border-left: 4px solid var(--color-primary);
  margin-top: var(--spacing-lg);
}

.highlight-box-warning {
  background: #FFF3CD;
  padding: var(--spacing-md);
  border-left: 4px solid #FFC107;
  margin-top: var(--spacing-md);
  border-radius: var(--border-radius-sm);
}

.highlight-box-success {
  background: #D4EDDA;
  padding: var(--spacing-md);
  border-left: 4px solid #28A745;
  margin-top: var(--spacing-md);
  border-radius: var(--border-radius-sm);
}

.highlight-box-danger {
  background: #fef2f2;
  padding: var(--spacing-md);
  border-left: 4px solid #ef4444;
  margin-top: var(--spacing-lg);
  border-radius: var(--border-radius-sm);
}

/* ========================================
   Collapsible FAQs (Accordion)
   ======================================== */
.faq-accordion {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.faq-item {
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.faq-item summary {
  padding: var(--spacing-md);
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.1rem;
  transition: background-color var(--transition-fast);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item[open] summary {
  background-color: var(--color-background-alt);
  border-bottom: 1px solid var(--color-border);
}

.faq-answer {
  padding: var(--spacing-md);
  color: var(--color-text);
  line-height: 1.6;
}

/* ========================================
   Error, Success & 404 Pages
   ======================================== */

.error-container,
.success-container {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  gap: var(--spacing-lg);
}

.error-card,
.success-card {
  background: white;
  padding: var(--spacing-2xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.error-number {
  font-size: 120px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--spacing-md);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

.error-title,
.success-title {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-2xl);
}

.success-title {
  font-size: var(--font-size-3xl);
}

.error-message,
.success-message {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.search-box {
  background: var(--color-background-alt);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xl);
}

.search-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.popular-links {
  text-align: left;
  margin-bottom: var(--spacing-xl);
}

.popular-links h3 {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
}

.popular-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.popular-links li {
  margin-bottom: var(--spacing-sm);
}

.popular-links a {
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all 0.3s ease;
}

.popular-links a:hover {
  gap: var(--spacing-md);
  color: var(--color-secondary);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.error-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: var(--font-size-4xl);
  animation: shake 0.5s ease-in-out;
}

.error-icon .lucide {
  width: 36px;
  height: 36px;
  stroke-width: 2.25;
  color: white;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-10px);
  }

  75% {
    transform: translateX(10px);
  }
}

.info-box,
.contact-box {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xl);
  text-align: left;
}

.info-box {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
}

.contact-box {
  background: var(--color-background-alt);
  border-left: 4px solid var(--color-primary);
}

/* Specific for gracias.html info-box which is green/blue alt? No, gracias.html uses .info-box but with DIFFERENT color in inline style in some versions? 
Wait, gracias.html .info-box in the file I viewed uses var(--color-background-alt) and var(--color-primary).
The error-formulario.html .info-box uses #fef2f2 (red).
I need to differentiate them or make .info-box generic and .info-box-error specific.
*/

.info-box-error {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xl);
  text-align: left;
}

.info-box-success {
  background: var(--color-background-alt);
  border-left: 4px solid var(--color-primary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xl);
  text-align: left;
}

.info-box h3,
.contact-box h3,
.info-box-error h3,
.info-box-success h3 {
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.info-box ul {
  margin: 0;
  padding-left: var(--spacing-lg);
  color: var(--color-text-light);
}

.info-box li {
  margin-bottom: var(--spacing-xs);
}

.contact-box p,
.info-box-success p {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
}

.contact-box a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.contact-box a:hover {
  color: var(--color-secondary);
}

.success-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: var(--font-size-4xl);
  animation: successPulse 2s ease-in-out infinite;
}

.success-icon .lucide {
  width: 36px;
  height: 36px;
  stroke-width: 2.25;
  color: white;
}

@keyframes successPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px rgba(99, 102, 241, 0);
  }
}

.countdown {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-lg);
}

/* WhatsApp CTA in Gracias Page */
.whatsapp-cta-box {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.whatsapp-cta-title {
  color: #166534;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.whatsapp-cta-text {
  color: #374151;
  margin-bottom: 15px;
}

.whatsapp-cta-btn {
  display: inline-block;
  background-color: #25D366;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.whatsapp-cta-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .error-number {
    font-size: 80px;
  }

  .error-card,
  .success-card {
    padding: var(--spacing-xl);
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .btn {
    width: 100%;
  }
}

/* ========================================
   Cookie Consent Banner (AEPD Compliance)
   ======================================== */
:root {
  /* Overrides for vanilla-cookieconsent */
  --cc-font-family: var(--font-primary);
  --cc-bg: #fff;
  --cc-text: var(--color-text);
  --cc-btn-primary-bg: var(--color-primary);
  --cc-btn-primary-text: #fff;
  --cc-btn-primary-hover-bg: var(--color-primary-dark);
  --cc-btn-secondary-bg: var(--color-background-alt);
  --cc-btn-secondary-text: var(--color-text);
  --cc-btn-secondary-hover-bg: #e2e8f0;
  --cc-toggle-on-bg: var(--color-success);
  --cc-toggle-off-bg: var(--color-text-lighter);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-block-text: var(--color-text);
  --cc-cookie-category-block-bg: var(--color-background-alt);
  --cc-cookie-category-block-bg-hover: #e2e8f0;
  --cc-section-category-title: var(--color-primary);
  --cc-wrapper-max-width: 100% !important;
}

#cc-main .cm {
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}

#cc-main .cm__btn {
  font-weight: 600;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
}

#cc-main .cm__btn:hover {
  transform: translateY(-1px);
}

#cc-main .cm__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-secondary);
}

#cc-main .cm__desc {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

#cc-main .cm__footer {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

#cc-main .cm__footer a {
  color: var(--color-primary);
  text-decoration: none;
}

#cc-main .cm__footer a:hover {
  text-decoration: underline;
}

/* Ensure buttons have equal visual weight for AEPD compliance if desired,
   though currently primary vs secondary is standard.
   AEPD requires 'equal prominence' for options.
   We can make secondary buttons look more like primary outline buttons. */
#cc-main .cm__btn--secondary {
  border: 1px solid var(--color-border);
  background-color: white;
}

/* ========================================
   Humans.html specific styles
   ======================================== */
.humans-main {

  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md);
  background: var(--color-background);
  min-height: 100vh;
}

.humans-header {
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--color-primary);
}

.humans-tagline {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  margin-top: 0.5rem;
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.humans-meta {
  font-size: 0.9rem;
  color: var(--color-text-lighter);
  margin-bottom: var(--spacing-md);
}

.humans-card {
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: var(--color-background-alt);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease;
}

.humans-card:hover {
  box-shadow: var(--shadow-md);
}

.humans-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  background: #f1f5f9;
  padding: 0.2rem 0.4rem;
  border-radius: var(--border-radius-sm);
  color: var(--color-primary-dark);
}

.humans-footer {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-lighter);
  text-align: center;
}

/* ========================================
   Blog Post Specific Helpers
   ======================================== */
.blog-lead {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.privacy-note {
  background-color: var(--color-background-alt);
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.9em;
  margin-top: 1rem;
  border-left: 3px solid var(--color-secondary);
}

/* Ensure CTA title fits well */
.cta-box h2 {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .cta-box h2 {
    white-space: nowrap;
    font-size: 2.2rem;
  }
}

/* ========================================
   MOBILE FULL-WIDTH & UX OPTIMIZATIONS (2025)
/* ========================================
   RESPONSIVE REFINEMENTS (2025)
   Golden Rule: Fluidity > Rigid Breakpoints
   ======================================== */

/* TABLET & MOBILE SHARED STYLES (< 1024px) */
/* El menú de escritorio NO cabe en 768px, así que mantenemos hamburguesa hasta 1024px */
@media (max-width: 1023px) {
  .nav-menu {
    position: fixed;
    top: 70px;
    /* Altura aprox del header */
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    /* Oculto por defecto */
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    gap: 16px;
  }

  .nav-menu.active {
    transform: translateY(0);
  }

  .nav-toggle {
    display: flex;
    /* Mostrar hamburguesa en Tablet */
  }

  .container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Footer Tablet Defensivo */
  .footer .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* MOBILE SPECIFIC OPTIMIZATIONS (< 768px) */
@media (max-width: 767px) {

  /* 1. ESTRATEGIA FULL-WIDTH */
  .container,
  .wrapper {
    padding-left: 16px;
    /* Restaurado a 16px (estándar seguro) */
    padding-right: 16px;
    width: 100%;
  }

  /* 2. RITMO VERTICAL (Compacto pero funcional) */
  /* 24px era demasiado agresivo y causaba overlaps. Usamos 36px. */
  .section {
    padding: 36px 0;
  }

  /* Márgenes más respirables pero controlados */
  .mb-5,
  .my-5 {
    margin-bottom: 32px !important;
    margin-top: 32px !important;
  }

  .mb-4,
  .my-4 {
    margin-bottom: 24px !important;
    margin-top: 24px !important;
  }

  .mb-3,
  .my-3 {
    margin-bottom: 16px !important;
    margin-top: 16px !important;
  }

  /* 3. GALERÍA & IMÁGENES (Usa estilos de escritorio por defecto) */
  /* El usuario prefiere la estética original de altura fija 250px */


  /* Imágenes genéricas (blog, etc) */
  .blog-post-thumb,
  .hero-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
  }

  /* 4. NAVEGACIÓN (Fix: "Boton que despliega el menu") */
  /* Asegurar que el toggle sea visible y tenga tamaño correcto */
  .nav-toggle {
    display: flex;
    /* Asegurar visibilidad flex */
    padding: 8px;
    /* Padding interno para hit area */
    border: 1px solid var(--color-border);
    /* Borde sutil para identificarlo */
    border-radius: 4px;
    position: relative;
    z-index: 1001;
    /* Encima de todo */
    background-color: white;
    /* Evitar transparencia confusa */
    min-height: 44px;
    /* Apple standard */
    min-width: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }

  /* Reset de span dentro del toggle */
  .nav-toggle span {
    margin: 0;
    /* Quitar margen anterior que rompía el centrado */
    width: 24px;
    height: 2px;
    background-color: var(--color-secondary);
  }

  /* 5. FOOTER COMPACTADO (Safe Mode) */
  .footer {
    padding: 24px 0 16px;
    /* Aún más compacto verticalmente */
    text-align: center;
  }

  /* Padding seguro y ancho completo */
  .footer .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- REFINAMIENTO ESTÉTICO (Simetría & Orden) --- */

  /* 1. Logo Section -> Full Width & Centered */
  .footer-section:nth-child(1) {
    grid-column: 1 / -1;
    text-align: center;
    order: 1;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px !important;
  }

  .footer-section:nth-child(1) h4 {
    margin-top: 0 !important;
  }

  /* 2. Enlaces -> Columna Izquierda */
  .footer-section:nth-child(2) {
    order: 2;
    text-align: center;
  }

  .footer-section:nth-child(2) .footer-links {
    grid-template-columns: 1fr !important;
    text-align: center;
    margin-bottom: 0;
  }

  /* 3. Legal -> Columna Derecha (Movido de pos 4) */
  .footer-section:nth-child(4) {
    order: 3;
    text-align: center;
  }

  .footer-section:nth-child(4) .footer-links {
    grid-template-columns: 1fr !important;
    text-align: center;
    margin-bottom: 0;
  }

  /* 4. Envíos -> Full Width (Movido de pos 3) */
  .footer-section:nth-child(3) {
    order: 4;
    grid-column: 1 / -1;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
    margin-top: 12px;
  }

  /* Grid de ciudades compacto (3 columnas) */
  .footer-section:nth-child(3) .footer-links.geo-columns {
    grid-template-columns: repeat(3, 1fr) !important;
    font-size: 0.75rem !important;
    text-align: center;
    gap: 8px 4px;
  }

  /* 5. Contacto -> Full Width Bottom */
  .footer-section:nth-child(5) {
    order: 5;
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 8px;
  }

  .footer-section:nth-child(5) .footer-links {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Refinamiento general de Textos */
  .footer-section h4 {
    font-size: 0.95rem !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .footer-links a,
  .footer p,
  .footer li {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Copyright minimalista */
  .footer-bottom {
    font-size: 0.75rem !important;
    /* 12px */
    padding-top: 16px !important;
    margin-top: 16px !important;
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  /* 6. TIPOGRAFÍA REAJUSTADA */
  h1 {
    font-size: 2.1rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    text-align: center;
    margin-bottom: 16px;
  }

  p {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Asegurar legibilidad base */

  /* GRID SAFE FALLBACK */
  .products-grid,
  .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 col simple */
    gap: 24px;
  }

  /* TOUCH TARGETS (Sin romper botones específicos) */
  .btn,
  button,
  input[type="submit"] {
    min-height: 48px;
    width: 100%;
    margin-bottom: 12px;
  }

  /* EXCEPCIÓN CLAVE: Controles de UI (Flechas y Puntos) */
  /* Deben ignorar las reglas de "Botón gigante" y mantener sus formas geométricas exactas */

  .nav-toggle {
    width: auto !important;
    margin-bottom: 0 !important;
  }

  .gallery-nav {
    width: 40px !important;
    /* Círculo perfecto */
    height: 40px !important;
    min-height: 40px !important;
    /* Sobrescribir min-height del btn global */
    border-radius: 50% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    /* Para centrar la flecha */
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  .indicator {
    width: 8px !important;
    /* Círculo fijo inactivo */
    height: 8px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    background: rgba(255, 255, 255, 0.5) !important;
    display: inline-block !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }

  .indicator.active {
    width: 24px !important;
    /* Pill ancha activo */
    background: white !important;
    border-radius: 4px !important;
  }

  /* ========================================
     Fix Cookie Banner Mobile
     ======================================== */
  #cc--main .cm {
    width: 90% !important;
    /* Evitar que toque los bordes */
    max-width: 400px !important;
    left: 5% !important;
    /* Centrado: 5% + 90% + 5% */
    right: 5% !important;
    bottom: 20px !important;
    /* Separado del bottom */
    border-radius: 12px !important;
    padding: 20px !important;
    flex-direction: column;
  }

  #cc--main .cm__title {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }

  #cc--main .cm__desc {
    font-size: 0.9rem !important;
    margin-bottom: 16px !important;
  }

  #cc--main .cm__btns {
    flex-direction: column;
    /* Botones uno debajo de otro */
    gap: 10px;
    width: 100%;
  }

  #cc--main .cm__btn {
    width: 100%;
    margin: 0 !important;
    min-height: 44px;
    /* Touch friendly */
    font-size: 0.95rem !important;
  }
}

/* ========================================
   Mobile Gallery Carousel
   Swipeable horizontal scroll for gallery items on mobile devices
   ======================================== */
@media (max-width: 768px) {
  .gallery-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    /* Space for scrollbar if visible */
    padding-left: 20px;
    /* Visual padding start */
    padding-right: 20px;
    /* Visual padding end */
  }

  /* Ocultar barra de scroll en navegadores donde sea posible para limpieza visual */
  .gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .gallery-grid {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .gallery-item {
    flex: 0 0 85vw;
    /* Show 85% of each item to encourage scroll */
    min-width: 300px;
    scroll-snap-align: center;
    margin-right: 0;
    /* Reset any grid margins */
  }

  /* Asegurar que las imágenes llenen el contenedor del item */
  .gallery-item img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
  }
}

/* ========================================
   Mobile Optimizations - Nosotros Page
   ======================================== */
@media (max-width: 768px) {

  /* Reduce padding in content cards for better space usage */
  .philosophy-card,
  .comparison-card,
  .feature-card {
    padding: var(--spacing-md) !important;
    /* Reduced from --spacing-lg to avoid double padding */
  }

  /* Improve text readability */
  .philosophy-card p,
  .comparison-card p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  /* Better section spacing */
  .mb-5 {
    margin-bottom: var(--spacing-xl) !important;
  }
}

/* ========================================
   Mobile: Remove Double Padding in Content Boxes
   ======================================== */
@media (max-width: 768px) {

  /* Blog content boxes - remove internal padding on mobile */
  .blog-content-box {
    padding: var(--spacing-md) !important;
    /* Reduced from --spacing-xl to avoid double padding */
  }

  /* Blog CTA boxes */
  .blog-cta-box {
    padding: var(--spacing-md) !important;
  }

  /* Container-sm should not add extra constraints on mobile */
  .container-blog,
  .container-sm {
    max-width: 100% !important;
    padding: 0 var(--container-padding) !important;
  }

  /* Other content boxes that might have double padding */
  .content-box,
  .card-content {
    padding: var(--spacing-md) !important;
  }

  /* Contact page cards - reduce padding on mobile */
  .contact-info-card {
    padding: var(--spacing-md) !important;
    /* Reduced from --spacing-lg to avoid double padding */
  }
}

/* ========================================
   City Links (Local Interlinking)
   ======================================== */
.city-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.city-links a {
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.city-links a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-background-alt);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

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