@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap');

:root {
  --ic-cyan: #0099cc;
  --ic-magenta: #d81b60;
  --ic-yellow: #f5c400;
  --ic-black: #000000;
  --ic-dark-gray: #1a1a1a;
  --ic-white: #ffffff;
  /* School Theme Colors */
  --school-yellow: #FFD54F;
  --school-blue: #4FC3F7;
  --school-red: #EF5350;
  --school-green: #66BB6A;
  --ic-light-gray: #f8fafc;
  --ic-text-gray: #4b5563;
  --ic-font: 'Plus Jakarta Sans', sans-serif;
  --ic-radius: 16px;
  --ic-radius-organic: 40% 60% 70% 30% / 40% 50% 60% 50%;
  --ic-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

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

body {
  font-family: var(--ic-font);
  color: var(--ic-text-gray);
  line-height: 1.6;
  background-color: var(--ic-white);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul {
  list-style: none;
}

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- UTILITIES --- */
.pill-tag {
  display: inline-block;
  background: #e0f2fe;
  color: #007ba3;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* .text-gradient removed for consistency */

/* --- HEADER --- */
header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

header.scrolled {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.header-top-line {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--ic-cyan) 0%, var(--ic-magenta) 50%, var(--school-yellow) 100%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  /* Comfortable height */
  padding: 0 24px;
}

/* Logo & Trust Text */
.logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 36px;
  width: auto;
}

/* Relocated Trust Text */
.section-trust-text {
  text-align: center;
  font-size: 0.95rem;
  color: var(--ic-cyan);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Navigation Menu */
.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--ic-text-gray);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  transition: color 0.2s ease;
  padding: 0.5rem 0;
}

/* Specific Colors for Nav Items */
/* 1. Inicio (Yellow) */
.nav-links a:nth-child(1):hover,
.nav-links a:nth-child(1).active {
  color: var(--ic-yellow);
}

.nav-links a:nth-child(1)::after {
  background-color: var(--ic-yellow);
}

/* 2. Cómo trabajamos (Cyan) */
.nav-links a:nth-child(2):hover,
.nav-links a:nth-child(2).active {
  color: var(--ic-cyan);
}

.nav-links a:nth-child(2)::after {
  background-color: var(--ic-cyan);
}

/* 3. Productos (Magenta) */
.nav-links a:nth-child(3):hover,
.nav-links a:nth-child(3).active {
  color: var(--ic-magenta);
}

.nav-links a:nth-child(3)::after {
  background-color: var(--ic-magenta);
}

/* Animated Underline Base */
.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  /* Slightly thicker for color pop */
  bottom: 0;
  left: 0;
  transition: width 0.3s ease;
  border-radius: 2px;
}

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

/* Primary Button Updates */
.header-btn {
  background: var(--ic-cyan);
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 6px rgba(0, 153, 204, 0.2);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-btn:hover {
  background: #0088b5;
  /* Slightly darker cyan */
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(0, 153, 204, 0.25);
}

.header-btn i {
  font-size: 1.1em;
}

.header-btn-mobile {
  display: none !important;
}

/* Mobile Menu Toggle */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ic-dark-gray);
  cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 84px;
    /* Header height + top line */
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
  }

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

  .mobile-menu-btn {
    display: block;
  }

  .trust-text {
    display: none;
    /* Hide on mobile for cleanliness */
  }

  /* Hide the main desktop button */
  .nav-container>.header-btn {
    display: none;
  }

  /* Show button in mobile menu */
  .nav-links .header-btn-mobile {
    display: flex !important;
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
  }
}

/* --- HERO SECTION --- */
.hero {
  padding: 3rem 0 6rem 0;
  /* Increased intensity and spread: Vibrant Magenta top-right, Vibrant Cyan bottom-left */
  background: radial-gradient(circle at 90% 10%, rgba(216, 27, 96, 0.18) 0%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(circle at 10% 90%, rgba(0, 153, 204, 0.18) 0%, rgba(255, 255, 255, 0) 65%);
  position: relative;
  overflow: hidden;
}

/* --- HERO SLIDER --- */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Grid stack technique for smooth sliding without layout shift */
  display: grid;
  grid-template-areas: "stack";
}

.hero-slide {
  grid-area: stack;
  width: 100%;
  /* Start off-screen to the right */
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s ease-in-out, visibility 1s;
  pointer-events: none;
  z-index: 1;
}

.organic-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.active {
  /* Slide in to center */
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* Ensure consistent height for all slides to prevent jumping */
.hero {
  min-height: 600px;
  /* Adjust as needed */
  display: flex;
  align-items: center;
}

/* School Theme Specifics */
.school-theme h1 {
  font-family: 'Chewy', cursive;
  font-size: 4rem;
  letter-spacing: 1px;
  line-height: 1.1;
}

.school-theme .text-gradient {
  background: linear-gradient(45deg, var(--school-red), var(--school-yellow), var(--school-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.school-theme .pill-tag {
  background: #FFF3E0;
  color: #F57C00;
  border: 2px dashed #F57C00;
}

.school-theme .btn-primary {
  background: var(--school-blue);
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.4);
}

.school-theme .btn-primary:hover {
  background: #29B6F6;
  transform: translateY(-2px) rotate(-1deg);
}

/* Slider Navigation */
.slider-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: var(--ic-magenta);
  transform: scale(1.2);
}

.school-theme .dot.active {
  background: var(--school-blue);
}

@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .hero-text {
    margin: 0 auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-features {
    justify-content: center;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}

.hero h1 {
  font-family: var(--ic-font) !important;
  font-style: normal !important;
  font-size: 2.75rem;
  /* Reduced from 3.5rem */
  font-weight: 800;
  color: var(--ic-black);
  line-height: 1.05;
  /* Tighter leading */
  margin-bottom: 1.25rem;
  letter-spacing: -1px;
}

.hero h1 span.magenta {
  color: var(--ic-magenta);
}

.hero p {
  font-size: 1.15rem;
  color: var(--ic-text-gray);
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  /* Reduced margin to pull microcopy closer */
  flex-wrap: wrap;
}

.hero-microcopy {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 2rem;
  font-weight: 500;
  display: block;
}

.btn-primary {
  background-color: var(--ic-cyan);
  color: white;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 153, 204, 0.3);
  transition: transform 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  background-color: #0088b5;
}

.product-list-card {
  padding: 1rem;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  /* Anchor for badge */
}

.product-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* No background color change - keeping it clean */
}

.btn-secondary {
  background-color: transparent;
  color: var(--ic-dark-gray);
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  border-color: var(--ic-dark-gray);
}

.hero-features {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--ic-text-gray);
  font-weight: 600;
}

.hero-features div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-features i {
  color: var(--ic-cyan);
}

/* Organic Image Shape & Animations */
.hero-image-container {
  position: relative;
  z-index: 1;
}

.organic-shape {
  width: 100%;
  height: 500px;
  background-color: #f3f4f6;
  border-radius: 48% 52% 68% 32% / 42% 66% 34% 58%;
  overflow: hidden;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  animation:
    morphBlob 10s ease-in-out infinite,
    breatheBlob 6s ease-in-out infinite;
  transform: translateZ(0);
}

.hero-image-container::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: 100%;
  height: 100%;
  height: 500px;
  border: 2px solid rgba(0, 153, 204, 0.15);
  border-radius: 48% 52% 68% 32% / 42% 66% 34% 58%;
  z-index: 0;
  animation:
    morphBlob 12s ease-in-out infinite reverse,
    breatheBlob 7s ease-in-out infinite 1s;
}

.organic-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

/* Keyframes */
@keyframes morphBlob {
  0% {
    border-radius: 48% 52% 68% 32% / 42% 66% 34% 58%;
  }

  25% {
    border-radius: 58% 42% 52% 48% / 55% 46% 54% 45%;
  }

  50% {
    border-radius: 43% 57% 33% 67% / 64% 36% 64% 36%;
  }

  75% {
    border-radius: 58% 42% 58% 42% / 42% 55% 45% 58%;
  }

  100% {
    border-radius: 48% 52% 68% 32% / 42% 66% 34% 58%;
  }
}

@keyframes breatheBlob {

  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) scale(1.02) rotate(1deg);
  }
}

/* --- MARQUEE --- */
.marquee-container {
  padding: 4rem 0;
  /* More breathing room */
  background: white;
  /* Clean background */
  position: relative;
  overflow: hidden;
  /* Fade effect on edges */
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-label {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 300;
  /* Light font */
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #94a3b8;
  /* Subtle gray */
  margin-bottom: 2rem;
}

.marquee-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  /* Ping-pong effect (alternate) avoids jump completely */
  animation: scroll 120s linear infinite alternate;
  /* Removed padding-left to fix jump */
}

/* Regular seamless scroll */

@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}

.brand-pill {
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-pill.cyan {
  background: var(--ic-cyan);
}

.brand-pill.magenta {
  background: var(--ic-magenta);
}

.brand-pill.yellow {
  background: var(--ic-yellow);
  color: var(--ic-black);
}

.brand-pill.black {
  background: var(--ic-black);
}

/* --- HOW WE WORK (New) --- */
.how-section {
  padding: 10rem 0;
  background: white;
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.section-label {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ic-black);
  margin-bottom: 3rem;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

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

.step-number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.step-1 {
  background-color: var(--ic-cyan);
}

.step-2 {
  background-color: var(--ic-magenta);
}

.step-3 {
  background-color: var(--ic-yellow);
  color: black;
}

.step-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step-item:nth-child(1) .step-content h3 {
  color: var(--ic-cyan);
}

.step-item:nth-child(2) .step-content h3 {
  color: var(--ic-magenta);
}

.step-item:nth-child(3) .step-content h3 {
  color: var(--ic-yellow);
}

.step-content p {
  font-size: 0.95rem;
  color: var(--ic-text-gray);
}

/* --- LOGISTIC SCENE (Video Background Style) --- */
.logistic-card-wrapper {
  position: relative;
  width: 100%;
  height: 450px;
  z-index: 1;
}

/* Depth Border (Expanded to float outside) */
.logistic-card-wrapper::before {
  content: '';
  position: absolute;
  /* Negative values push it OUTSIDE the main shape */
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  width: auto;
  height: auto;

  /* Fine floating magenta line */
  border: 2px solid var(--ic-magenta);
  opacity: 0.6;
  /* More visible */
  border-radius: 48% 52% 68% 32% / 42% 66% 34% 58%;
  z-index: -1;
  animation: morphBlob 18s ease-in-out infinite reverse;
}

.logistic-scene {
  width: 100%;
  height: 100%;
  /* Removed white background to ensure video is visible */
  background: transparent;
  position: relative;
  overflow: hidden;

  /* The Organic Shape Mask */
  border-radius: 48% 52% 68% 32% / 42% 66% 34% 58%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

  /* Retain the breathing shape animation */
  animation: morphBlob 15s ease-in-out infinite;
  transform: translateZ(0);

  /* Layout for content overlay */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

/* Video Styling - Full Cover */
.logistic-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures video fills shape without distortion */
  z-index: 0;
  /* Behind text */
}

/* Text Overlay Container */
.scene-content {
  position: relative;
  z-index: 10;
  /* On top of video */
  padding-top: 4rem;
  /* Spacing from top */
  width: 100%;
  height: 100%;
  /* Removed gradient for clearer video */
  background: transparent;
}

.scene-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ic-magenta);
  margin-bottom: 0.5rem;
}

.scene-desc {
  font-size: 1rem;
  color: var(--ic-text-gray);
  max-width: 320px;
  margin: 0 auto;
  font-weight: 600;
}


/* Rest of the old animation classes are GONE. Cleaner file. */


/* --- ACTIONS & LOGO --- */
.logo img {
  height: 40px;
  width: auto;
}

/* --- PRODUCTS (Re-designed Organic Pillars) --- */
.products-section {
  padding: 8rem 0 12rem 0;
  background-color: #ffffff;
  /* Animated Mesh Gradient */
  background-image:
    radial-gradient(at 0% 0%, rgba(216, 27, 96, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(0, 153, 204, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(255, 213, 79, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(0, 153, 204, 0.12) 0px, transparent 50%);
  background-size: 180% 180%;
  animation: gradientFlow 15s ease-in-out infinite alternate;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 100%;
  }
}

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

.product-card {
  background: white;
  border-radius: 48% 52% 49% 51% / 49% 51% 51% 49%;
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  border: none;
  animation: gentleMorph 8s ease-in-out infinite alternate;
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease;

  /* Flexbox for button alignment */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Push button to bottom */
.download-btn-solid {
  margin-top: auto;
  font-weight: 700;
  color: var(--ic-dark-gray);
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s ease;
}

/* Arrow Colors per Card */
.product-card:nth-child(1) .download-btn-solid i {
  color: #0099cc;
  /* Cyan/Blue */
}

.product-card:nth-child(2) .download-btn-solid i {
  color: #f5c400;
  /* Yellow */
}

.product-card:nth-child(3) .download-btn-solid i {
  color: #d81b60;
  /* Magenta */
}

.download-btn-solid:hover {
  color: var(--ic-black);
}

@keyframes gentleMorph {
  0% {
    border-radius: 48% 52% 49% 51% / 49% 51% 51% 49%;
  }

  50% {
    border-radius: 51% 49% 52% 48% / 51% 49% 49% 51%;
  }

  100% {
    border-radius: 49% 51% 48% 52% / 48% 52% 51% 49%;
  }
}

.product-card:nth-child(2) {
  border-radius: 51% 49% 52% 48% / 51% 49% 49% 51%;
  animation-delay: -2s;
}

.product-card:nth-child(3) {
  border-radius: 49% 51% 50% 50% / 50% 50% 51% 49%;
  animation-delay: -5s;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: -1;
  border-radius: inherit;
  border-width: 2px;
  border-style: solid;
  opacity: 0.4;
  animation: breatheBlob 9s ease-in-out infinite reverse;
}

.product-card:nth-child(1)::before {
  border-color: var(--ic-cyan);
}

.product-card:nth-child(2)::before {
  border-color: var(--ic-yellow);
}

.product-card:nth-child(3)::before {
  border-color: var(--ic-magenta);
}

.product-card:hover {
  /* Subtle lift and slight scale, slower due to transition */
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
  /* Softer shadow */
  z-index: 10;
}

.card-header {
  padding: 0;
  margin-bottom: 2rem;
  background: none !important;
  clip-path: none !important;
  border-radius: 0;
}

.card-icon {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  animation: floatIcon 6s ease-in-out infinite;
  margin: 0 auto;
  /* Center it */
}

@keyframes floatIcon {

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

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

.product-card:nth-child(1) .card-icon {
  background: linear-gradient(135deg, #0099cc 0%, #007ba3 100%);
}

.product-card:nth-child(2) .card-icon {
  background: linear-gradient(135deg, #f5c400 0%, #d4a900 100%);
}

.product-card:nth-child(3) .card-icon {
  background: linear-gradient(135deg, #d81b60 0%, #b0164c 100%);
}

.product-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ic-black);
  margin-bottom: 1rem;
}

.product-card p {
  color: var(--ic-text-gray);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.btn-card {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  background-color: var(--ic-light-gray);
  color: var(--ic-dark-gray);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.btn-card:hover {
  background-color: var(--ic-dark-gray);
  color: white;
}

/* --- FOOTER --- */
.footer {
  background-color: #0f172a;
  /* Dark Slate Blue */
  color: #cbd5e1;
  /* Lighter Muted Text for AA compliance */
  padding: 5rem 0 3rem;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  /* Hide potential glow bleed */
}

/* Gradient Top Border */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--ic-cyan), var(--ic-magenta), var(--ic-yellow));
  z-index: 10;
}

/* --- FOOTER GRID (Smart Desktop) --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  /* Optimized column widths */
  gap: 4rem;
  margin-bottom: 4rem;
  align-items: start;
}

/* Column Headings */
.footer-col h4 {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  opacity: 0.9;
}

/* Column Text */
.footer-col p {
  margin-bottom: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

/* Links List */
.footer-links {
  list-style: none;
  padding: 0;
}

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

.footer-links a {
  color: #e2e8f0;
  /* Very light slate for high contrast */
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--ic-cyan);
  transform: translateX(4px);
  /* Subtle shift */
}

/* --- CONTACT SECTION (Desktop Smart) --- */

/* Email Button */
.footer-col a[href^="mailto"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white !important;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.footer-col a[href^="mailto"]:hover {
  background: var(--ic-magenta);
  border-color: var(--ic-magenta);
  box-shadow: 0 4px 15px rgba(216, 27, 96, 0.3);
  transform: translateY(-2px);
}

/* Social Icons */
.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.social-link {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.social-link:hover {
  background: white;
  transform: translateY(-4px) rotate(3deg);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* Brand Colors on Hover */
.social-link:nth-child(1):hover {
  /* Facebook */
  color: #1877F2;
}

.social-link:nth-child(2):hover {
  /* Instagram */
  color: #E1306C;
}

.social-link:nth-child(3):hover {
  /* WhatsApp */
  color: #25D366;
}

/* Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Fainter line */
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: #64748b;
}

.footer-legal-links {
  display: flex;
  gap: 2rem;
}

.footer-legal-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: white;
  text-decoration: underline;
}

/* --- INTERNAL LEGAL PAGES --- */
.legal-page-header {
  background-color: #f8fafc;
  padding: 8rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle background accent for header */
.legal-page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 153, 204, 0.05), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.legal-title {
  position: relative;
  z-index: 1;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ic-black);
  margin-bottom: 1rem;
}

.legal-subtitle {
  position: relative;
  z-index: 1;
  color: var(--ic-text-gray);
  font-size: 1.1rem;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 1.5rem 8rem;
  font-size: 1.05rem;
  color: #334155;
}

.legal-content h2 {
  font-size: 1.5rem;
  color: var(--ic-black);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f1f5f9;
}

.legal-content h3 {
  font-size: 1.2rem;
  color: var(--ic-dark-gray);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

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

/* Navigation adjustment for internal pages */
.internal-nav .nav-links a {
  color: var(--ic-black) !important;
  /* Force black on light bg */
}

/* --- ABOUT PAGE (Nosotros) --- */
.about-hero {
  position: relative;
  background: white;
  padding: 0.5rem 0 0.5rem;
  /* Minimal padding */
  overflow: hidden;
  text-align: center;
}

/* Background decoration similar to Legal but bigger */
.about-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(216, 27, 96, 0.12), transparent 60%);
  /* Stronger Magenta tint */
  z-index: 0;
  pointer-events: none;
}

.about-logo-large {
  max-width: 500px;
  margin: 0 auto 0.5rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

.about-title {
  font-size: 3.5rem;
  /* Significant increase */
  font-weight: 800;
  color: var(--ic-black);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

.about-intro-text {
  font-size: 1.5rem;
  /* Larger, more readable */
  color: var(--ic-text-gray);
  max-width: 800px;
  /* Wider to accommodate larger text */
  margin: 0 auto 2rem;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}



.about-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 4rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-image {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.about-image:hover {
  transform: scale(1.02);
}

/* Story Section - Humanized */
.our-story-section {
  padding: 4rem 0 8rem;
  background: white;
  position: relative;
}

.story-container {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}

.story-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--ic-text-gray);
  text-align: left;
}

.story-text p {
  margin-bottom: 1.5rem;
}

.story-highlight {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ic-black);
  margin: 2rem 0;
  line-height: 1.2;
  position: relative;
  padding-left: 1.5rem;
  border-left: 4px solid var(--ic-magenta);
}

.highlight-cyan {
  color: var(--ic-cyan);
}

.highlight-magenta {
  color: var(--ic-magenta);
}

.family-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff9c4;
  /* Soft yellow bg */
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  color: #f57f17;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

/* Image styling for story */
.story-image {
  width: 100%;
  height: 350px;
  /* fixed height constraint */
  object-fit: cover;
  /* to crop without stretching */
  object-position: center;
  /* to keep focus */
  border-radius: 20px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
  transform: rotate(-1deg);
  /* Slight organic tilt */
  transition: transform 0.3s ease;
}

.story-image:hover {
  transform: rotate(0deg) scale(1.01);
}

/* --- FAQ PAGE --- */
.faq-section {
  padding: 2rem 0 6rem;
}

.faq-item {
  background: white;
  margin-bottom: 1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.faq-question {
  padding: 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ic-black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
}

.faq-question:hover {
  background: #f8fafc;
}

/* Simple visible state using details/summary */
details {
  margin-bottom: 1rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

details summary {
  padding: 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ic-black);
  cursor: pointer;
  list-style: none;
  /* Hide default marker */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--ic-cyan);
  font-weight: 400;
  transition: transform 0.2s ease;
}

details[open] summary::after {
  transform: rotate(45deg);
  /* Turns to X */
  color: var(--ic-magenta);
}

details[open] summary {
  border-bottom: 1px solid #f1f5f9;
}

.faq-answer {
  padding: 1.5rem;
  line-height: 1.6;
  color: var(--ic-text-gray);
  background: #fff;
}

/* --- RESPONSIVE DESIGN (MOBILE FIXES) --- */
@media (max-width: 992px) {

  /* Tablet / Smaller Desktop */
  .hero-grid,
  .how-grid,
  .products-grid,
  .footer-grid,
  .story-container {
    grid-template-columns: 1fr;
    /* Stack columns */
    gap: 2rem;
    text-align: center;
  }

  .hero-text {
    text-align: center;
    margin-bottom: 2rem;
    order: 1;
    /* Text first */
  }

  .hero-image-container {
    order: 2;
    /* Image second */
    margin-bottom: 2rem;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-features {
    justify-content: center;
  }

  .steps-list {
    flex-direction: column;
  }

  .organic-shape {
    height: 350px;
    /* Reduce image height */
    margin: 0 auto;
  }

  .about-title {
    font-size: 2.5rem;
    /* Smaller title */
  }
}

/* --- MOBILE OPTIMIZATIONS (FIXED) --- */
@media (max-width: 768px) {

  /* GLOBAL ALIGNMENT FIXES */
  .container {
    padding: 0 1.5rem;
  }

  .hero-grid,
  .how-grid,
  .footer-grid,
  .story-container {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    /* Center grid items */
  }

  /* --- HERO: UNIFIED HEIGHT & CENTERED --- */
  /* --- HERO: UNIFIED HEIGHT & CENTERED --- */
  .hero {
    position: relative;
    padding: 0 !important;
    /* No internal padding */
    margin-top: 0 !important;
    /* No top gap */
    height: 85vh !important;
    /* Fixed viewport height */
    min-height: 600px !important;
    /* Minimum px height for safety */
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Crop overflow */
  }

  .hero .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Fix the "jumping" height by constraining images */
  .organic-shape,
  .hero-image-container img {
    height: 220px !important;
    /* Increased from 180px */
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  .hero-image-container {
    order: -1;
    /* Image Always Top */
    height: 220px;
    /* Match image height */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    /* Reduced margin */
    width: 100%;
  }

  .hero-slider {
    position: relative !important;
    height: 85vh !important;
    /* Match hero height to prevent collapse */
    overflow: hidden !important;
    width: 100%;
  }

  /* Use Flex Column for Slide Layout */
  .hero-slide {
    position: absolute !important;
    /* Stack slides */
    top: 0;
    left: 0;
    display: none !important;
    /* Hidden by default */
    width: 100%;
    height: 100% !important;
    /* Fill container */

    padding: 0 !important;
    margin: 0 !important;

    flex-direction: column;
    justify-content: center !important;
    align-items: center;
    background: white;
    /* Ensure opaque background for sliding */
    z-index: 1;
  }

  .hero-slide.active {
    display: flex !important;
    z-index: 2;
  }

  /* --- SLIDE ANIMATIONS (FILMSTRIP FEEL) --- */

  /* Next Slide (Swipe Left) */
  @keyframes slideInRight {
    0% {
      transform: translate3d(100%, 0, 0);
    }

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

  @keyframes slideOutLeft {
    0% {
      transform: translate3d(0, 0, 0);
    }

    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }

  /* Prev Slide (Swipe Right) */
  @keyframes slideInLeft {
    0% {
      transform: translate3d(-100%, 0, 0);
    }

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

  @keyframes slideOutRight {
    0% {
      transform: translate3d(0, 0, 0);
    }

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

  /* Animation Classes */
  .hero-slide.slide-next-enter {
    display: flex !important;
    animation: slideInRight 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    z-index: 30;
    will-change: transform;
  }

  .hero-slide.slide-next-leave {
    display: flex !important;
    animation: slideOutLeft 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    z-index: 20;
    will-change: transform;
  }

  .hero-slide.slide-prev-enter {
    display: flex !important;
    animation: slideInLeft 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    z-index: 30;
    will-change: transform;
  }

  .hero-slide.slide-prev-leave {
    display: flex !important;
    animation: slideOutRight 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    z-index: 20;
    will-change: transform;
  }

  .hero-text {
    order: 2;
    /* Text Always Bottom */
    margin-top: 0.5rem;
  }

  /* --- HERO BUTTONS: HORIZONTAL & COMPACT --- */
  .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    justify-content: center;
    width: 100%;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    display: inline-flex !important;
    width: auto !important;
    flex: 1;
    /* Split space evenly */
    padding: 0.75rem 0.5rem !important;
    font-size: 0.9rem !important;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }

  .hero-buttons .btn-secondary {
    background: transparent;
    border: 2px solid var(--ic-magenta);
    color: var(--ic-magenta);
  }

  /* Hide other extra hero elements */
  .hero-microcopy,
  .hero-features {
    display: none !important;
  }

  /* --- CATEGORIES: CLEAN LIST (Small Icons) --- */
  .products-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Tight spacing */
    padding: 0;
  }

  .product-card {
    /* Row layout like a menu item */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Vertically center */
    text-align: left;
    gap: 1rem;

    width: 100%;
    max-width: 100%;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;

    border-radius: 12px !important;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    animation: none !important;
  }

  /* Tiny Icon */
  .product-card i,
  .product-card img,
  .product-card svg,
  .product-card .icon-wrapper {
    font-size: 1.5rem;
    /* Small icon */
    width: 40px;
    height: 40px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .product-card .product-icon-container {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .product-card h3 {
    font-size: 1.1rem;
    margin: 0;
    flex-grow: 1;
    /* Title takes space */
  }

  /* Hide description on mobile for "Clean List" look requested */
  .product-card p {
    display: none;
  }

  .product-card .btn-link {
    display: none;
  }

  .product-card::before {
    display: none !important;
  }

  /* Remove chevron */
  .product-card::after {
    content: none !important;
  }

  /* --- HOW WE WORK: OPTIMIZED MOBILE LAYOUT --- */
  .how-section {
    padding-top: 1rem !important;
    margin-top: 0 !important;
    /* Reset negative margin */
    padding-bottom: 2rem !important;
  }

  .how-section h2 {
    margin-top: 0 !important;
    font-size: 1.8rem !important;
    margin-bottom: 1.5rem !important;
  }

  .step-item {
    background: rgba(255, 255, 255, 0.7) !important;
    /* Semi-transparent white */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* Subtle border */
    box-shadow: none !important;
    /* NO SHADOW = "Not a button" */

    padding: 1rem !important;
    border-radius: 12px;
    margin-bottom: 0.75rem;

    /* Grid Layout: Number | Content */
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    gap: 0.75rem;
    align-items: start;
    text-align: left !important;
  }

  .step-number {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    place-self: start center;
    /* Align top-center in its grid cell */
    margin-top: 0.25rem !important;
    /* Slight push to align with Title text baseline */
  }

  .step-content {
    text-align: left !important;
    padding: 0 !important;
  }

  .step-content h3 {
    font-size: 1.1rem !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2;
    color: var(--ic-dark);
    text-align: left !important;
  }

  .step-content p {
    font-size: 0.9rem !important;
    margin: 0 !important;
    line-height: 1.4;
    text-align: left !important;
  }

  .steps-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0;
  }



  /* --- LOGISTICS: CENTERED & FIX --- */
  /* --- LOGISTICS: SPLIT LAYOUT (Title Top, Video Bottom) --- */
  .logistic-card-wrapper,
  .logistic-scene {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
    /* Let container bg show if needed */
    overflow: hidden;
    margin: 0 auto;
  }

  /* Flex Container Redefinition */
  /* Flex Container Redefinition */
  /* Kill Organic Shapes */
  .logistic-card-wrapper::before,
  .logistic-card-wrapper::after,
  .logistic-scene::before,
  .logistic-scene::after {
    display: none !important;
    content: none !important;
    border: none !important;
    animation: none !important;
    background: none !important;
  }

  /* Flex Container Redefinition */
  .logistic-scene {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 0;
    overflow: visible !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  /* UNWRAP content to re-order children */
  .scene-content {
    display: contents !important;
  }

  .scene-title {
    order: 1;
    color: var(--ic-magenta) !important;
    font-size: 1.8rem !important;
    margin: 1rem 0 0.5rem !important;
    text-align: center;
    width: 100%;
  }

  /* Video in the Middle - SAFE FULL BLEED & TRUCK VISIBLE */
  .logistic-video-bg {
    order: 2;
    position: relative !important;
    display: block !important;

    /* Safe Breakout: Width = parent + extra overlap */
    width: calc(100% + 4rem) !important;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    left: auto !important;
    max-width: none !important;

    /* Height to fit Truck + Buildings */
    height: 180px !important;

    object-fit: cover !important;
    /* Focus closer to bottom to see Truck */
    object-position: center 80% !important;

    z-index: 1;
    border-radius: 0 !important;
    margin-bottom: 2rem;
    margin-top: 1rem;
    background: #e0f7fa;
  }

  .scene-desc {
    order: 3;
    color: var(--ic-dark) !important;
    font-weight: 500;
    text-shadow: none !important;
    font-size: 0.95rem !important;
    text-align: center;
    padding: 0 1.5rem;
    width: 100%;
  }

  /* --- FOOTER: SMART MOBILE LAYOUT (Compact 2-Col) --- */
  .footer {
    padding: 3rem 1.5rem 2rem !important;
    text-align: center;
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Two equal columns */
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    text-align: left;
    /* Align content inside columns */
  }

  /* 1. SECTIONS: Navigation (Left) & Legal (Right) */
  .footer-col:nth-child(2) {
    order: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Fine separator line */
    padding-right: 1rem;
    width: auto !important;
    margin: 0 !important;
  }

  .footer-col:nth-child(3) {
    order: 2;
    padding-left: 1rem;
    width: auto !important;
    margin: 0 !important;
  }

  /* Titles - "Navegación" & "Políticas" */
  .footer-col h4 {
    display: block !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b !important;
    margin-bottom: 1rem !important;
    font-weight: 700;
  }

  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    /* Vertical lists inside cols */
    gap: 0.8rem !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  .footer-links li {
    margin: 0 !important;
  }

  .footer-links a {
    font-size: 0.85rem !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 0;
    white-space: nowrap;
  }

  /* 2. SOCIAL ACTION & CONTACT (Full Width Below) */
  .footer-col:nth-child(4) {
    order: 3;
    grid-column: 1 / -1;
    /* Span both columns */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Separator from links */
    width: 100% !important;
  }

  .footer-col:nth-child(4) h4 {
    display: none !important;
  }

  .footer-col:nth-child(4) p {
    display: none !important;
    /* Hide standard paragraphs (hours) */
  }

  /* REVEAL EMAIL AS BUTTON */
  .footer-col:nth-child(4) p:first-of-type {
    display: block !important;
    order: 2;
    /* Below social icons */
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  .footer-col:nth-child(4) p:first-of-type br {
    display: none;
  }

  .footer-col:nth-child(4) p:first-of-type i {
    display: none;
    /* Hide original icon */
  }

  .footer-col:nth-child(4) p:first-of-type a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
  }

  /* Add Icon via CSS to link */
  .footer-col:nth-child(4) p:first-of-type a::before {
    content: '\f0e0';
    /* FontAwesome Envelope */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--ic-magenta);
  }

  .footer-col:nth-child(4) p:first-of-type a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white !important;
  }

  .footer-social {
    display: flex !important;
    gap: 1.5rem !important;
    margin-top: 0 !important;
    order: 1;
    /* Above email */
  }

  .social-link {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50%;
    font-size: 1.5rem !important;
    color: white !important;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .social-link:hover,
  .social-link:active {
    background: var(--ic-magenta) !important;
    transform: scale(1.1);
    border-color: var(--ic-magenta) !important;
    box-shadow: 0 0 15px rgba(216, 27, 96, 0.4);
  }

  /* 3. LOGO (Bottom) */
  .footer-col:first-child {
    order: 4;
    grid-column: 1 / -1;
    border-bottom: none !important;
    padding-bottom: 0;
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 1 !important;
    /* Full visibility */
    filter: brightness(0) invert(1) !important;
    /* Pure White Logo */
  }

  .footer-col:first-child p {
    display: none !important;
  }

  .logo-wrapper {
    margin-bottom: 0 !important;
  }

  .logo-wrapper img {
    height: 32px !important;
  }

  .footer-bottom {
    order: 5;
    border-top: none !important;
    /* Layout handles spacing */
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
  }

  .scene-desc span {
    color: #777 !important;
    display: block;
    margin-top: 0.5rem;
  }

  /* --- FOOTER & MISC --- */
  .footer-bottom {
    flex-direction: column;
  }

  .footer-legal-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Text Sizes */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.75rem !important;
  }

  /* About Page */
  .about-logo-large {
    max-width: 250px;
  }

  .story-image {
    height: 180px;
  }

  /* --- Stretched Link Utility --- */
  .stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
  }

  .legal-page-header {
    /* Compact padding */
    margin: 0 !important;
    /* Remove auto margins */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
  }


  .products-section {
    padding: 2rem 0 4rem !important;
    /* More bottom breathing room */

    /* Stronger Gradient for Mobile */
    background-image:
      radial-gradient(at 0% 0%, rgba(216, 27, 96, 0.25) 0px, transparent 50%),
      radial-gradient(at 100% 0%, rgba(0, 153, 204, 0.25) 0px, transparent 50%),
      radial-gradient(at 100% 100%, rgba(255, 213, 79, 0.25) 0px, transparent 50%),
      radial-gradient(at 0% 100%, rgba(0, 153, 204, 0.20) 0px, transparent 50%) !important;
  }
}

/* --- PRODUCT LIST CARD (Container) --- */
.product-list-card .prod-image {
  overflow: visible !important;
}

/* --- FINAL BRAND BADGE STYLING (Clean, Static, Flush to Corner) --- */
.brand-badge {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;

  background: #ffffff !important;

  /* Adjusted padding for clean look at corner */
  padding: 4px 12px !important;

  /* Rounded capsule, but maybe less rounded on top-left to hug corner? 
     User said "capsula" so keeping full round for now, but flush positioning. */
  border-radius: 0 0 16px 0 !important;
  /* Try a creative corner ribbon shape? Or stick to capsule?
     User wants "mera esquina". 0,0.
     If I do full radius 50px at 0,0 it looks like a pill stuck to the ceiling.
     Let's do a "Tab" style: Flat top-left, rounded bottom-right. 
     Actually, let's stick to the user's "capsula" request but make it 0,0.
     If they want 0,0, they probably want it to look integrated.
     I will use border-radius: 12px (same as card) for top-left, and 50px for others?
     Actually, simpler: border-radius: 50px; but strictly at 0,0. */
  border-radius: 50px !important;
  border-top-left-radius: 12px !important;
  /* Match card corner */

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.03);

  height: 28px !important;
  width: auto !important;
  min-width: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 50;
  pointer-events: none;
}

/* Remove hover effects */
.product-list-card:hover .brand-badge {
  transform: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.brand-badge img {
  height: 18px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}

/* Active Filters Chips */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #f1f5f9;
  color: var(--ic-dark-gray);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.filter-chip:hover {
  background-color: #e2e8f0;
  border-color: #cbd5e1;
}

.filter-chip i {
  cursor: pointer;
  color: #94a3b8;
  font-size: 1rem;
  transition: color 0.2s;
}

.filter-chip i:hover {
  color: #ef4444;
}

.clear-all-filters {
  background: none;
  border: none;
  color: var(--ic-magenta);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}

.clear-all-filters:hover {
  text-decoration: underline;
}

/* --- ULTIMATE MOBILE FIXES --- */
@media (max-width: 768px) {

  /* [ULTIMATE] Restored clean header and fixed menu visibility */
  header {
    padding-top: 0 !important;
    padding-bottom: 5px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    z-index: 2000 !important;
    box-shadow: none !important;
    background: white !important;
    /* Reverted to white */
    top: 0 !important;
  }

  /* Hide potential overlay sources */
  header::before,
  header::after,
  body::before,
  body::after {
    display: none !important;
    content: none !important;
  }

  /* Fix nav-links to not overlay when hidden */
  .nav-links {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: visibility 0.3s, opacity 0.3s;
  }

  .nav-links.active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }



  .nav-container {
    height: auto;
    min-height: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 0.5rem;
    /* Tighter gap */
  }

  /* Compact Header Buttons for Small Screens */
  .header-btn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    /* Prevent text wrapping */
  }

  .header-btn i {
    margin-right: 4px;
    /* Icon spacing */
  }

  .logo img {
    height: 32px !important;
    /* Slightly smaller logo for fit */
  }

  /* 2. Maximize Product Image Size */
  .prod-image {
    height: auto !important;
    min-height: 200px;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    padding: 0 !important;
    overflow: hidden !important;
    /* Clip zoomed images to stay in box */
  }

  .prod-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    transform: scale(2.5);
    /* Ultra Zoom (250%) */
  }

  /* 3. Larger Brand Badge */
  .brand-badge {
    transform: scale(1.3);
    top: 15px !important;
    left: 15px !important;
  }

  /* Ensure Header Elements don't overlap */
  /* Ensure Header Elements don't overlap and Logo links work */
  .logo-wrapper,
  .logo {
    z-index: 2001;
    position: relative;
    pointer-events: auto !important;
  }

  .header-actions {
    z-index: 2001;
    /* Match logo z-index */
    pointer-events: auto !important;
  }

  /* Fix Hero Section issues on Small Screens */
  .hero {
    padding-top: 110px !important;
    /* Clear header comfortably */
    padding-bottom: 5rem !important;
    /* Space for dots */
    min-height: auto !important;
    height: auto !important;
  }

  .hero h1 {
    font-size: 2.2rem !important;
    /* Smaller to prevent overflow */
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }

  .organic-shape {
    /* Restore Organic Blob look */
    width: 90% !important;
    margin: 0 auto 1.5rem auto !important;
    height: auto !important;
    /* Square ratio for blob */
    aspect-ratio: 1 / 1 !important;
    max-height: 400px;
    /* Force blob shape */
    border-radius: 54% 46% 42% 58% / 60% 41% 59% 40% !important;
    overflow: hidden;
    box-shadow: none !important;
  }

  .organic-shape img {
    width: 100% !important;
    height: 100% !important;
    /* Crop to fill shape */
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem !important;
    padding: 0 2rem;
  }

  .slider-dots {
    bottom: 1.5rem !important;
  }
}