/* ==========================================================================
   CI ANDINA SUSTENTABLE SAS - 10K WEBSITES CINEMATIC DARK SYSTEM
   Aesthetic: Deep Forest Dark (#080E0B), Emerald Green (#10B981), Amber Gold (#F59E0B)
   ========================================================================== */

/* Transición nativa entre páginas (sitio multi-página, sin SPA): en
   navegadores que la soportan (Chrome/Edge/Brave recientes), el navegador
   mismo hace un cross-fade suave entre el documento viejo y el nuevo durante
   la navegación real, evitando el salto/blanco que un fundido hecho a mano
   con JS no puede eliminar (la carga de un documento nuevo siempre pasa,
   esto solo la hace ver continua). En navegadores que no la soportan, este
   bloque simplemente se ignora y la navegación sigue igual que siempre. */
@view-transition {
  navigation: auto;
}

:root {
  --canvas: #060A07;
  --canvas-dark: #030503;
  --canvas-card: #0C1410;
  --canvas-card-alt: #111C16;

  --primary: #10B981;
  --primary-dark: #059669;
  --primary-light: #34D399;
  --primary-subtle: rgba(16, 185, 129, 0.15);
  --primary-glow: rgba(16, 185, 129, 0.35);

  --amber: #F59E0B;
  --amber-dark: #D97706;
  --amber-light: rgba(245, 158, 11, 0.15);
  --amber-glow: rgba(245, 158, 11, 0.35);

  --paper: #F3EEE1;
  --paper-dim: rgba(243, 238, 225, 0.85);
  --ink: #1B2420;

  --slate-950: #030503;
  --slate-900: #F8FAFC;
  --slate-800: #F1F5F9;
  --slate-700: #E2E8F0;
  --slate-600: #94A3B8;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: rgba(74, 222, 128, 0.18);
  --slate-100: #101A15;
  --slate-50: #080D0A;

  --bg-body: #060A07;
  --bg-surface: #0C1410;
  --bg-surface-raised: #121E17;
  --bg-glass: rgba(12, 20, 16, 0.85);
  --border-glass: rgba(74, 222, 128, 0.16);
  --border-glass-hover: rgba(74, 222, 128, 0.4);

  --ripple-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='40' fill='none' stroke='%2334D399' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='90' fill='none' stroke='%2334D399' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%2334D399' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='198' fill='none' stroke='%2334D399' stroke-width='1'/%3E%3C/svg%3E");

  --font-display: 'Fraunces', 'Plus Jakarta Sans', Georgia, serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 14px 36px -4px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 24px 64px -12px rgba(0, 0, 0, 0.85);
  --shadow-pill: 0 10px 30px -5px rgba(0, 0, 0, 0.8);
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 9999px;
  
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background-color: var(--canvas);
}

body {
  font-family: var(--font-body);
  background-color: var(--canvas);
  color: var(--slate-700);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Luces Ambientales */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

#ambient-particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.glow-orb-1 {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(8, 14, 11, 0) 70%);
  filter: blur(90px);
}

.glow-orb-2 {
  position: absolute;
  top: 45%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, rgba(8, 14, 11, 0) 70%);
  filter: blur(100px);
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--slate-900);
  line-height: 1.2;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 480px) {
  .badge-tag {
    white-space: normal;
    text-align: center;
  }
}

.badge-green {
  background: rgba(16, 185, 129, 0.15);
  color: #4ADE80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #F8FAFC;
  border: 1.5px solid rgba(74, 222, 128, 0.25);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: #34D399;
  transform: translateY(-2px);
}

.btn-amber {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 20px var(--amber-glow);
}

.btn-amber:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.55);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.5);
}

.btn-gmail {
  background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(234, 67, 53, 0.3);
}

/* ==========================================================================
   HEADER FLOTANTE Y PESTAÑAS DE NAVEGACIÓN
   ========================================================================== */
.header-wrapper {
  position: sticky;
  top: 14px;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0 16px;
  pointer-events: none;
}

.header-nav {
  pointer-events: auto;
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(10, 18, 14, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(74, 222, 128, 0.2);
  box-shadow: var(--shadow-pill);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-smooth);
  /* backdrop-filter sobre un elemento sticky a veces hace que Chromium pinte
     un rectángulo negro sólido en vez del desenfoque mientras se hace scroll
     rápido (bug de mosaico del compositor GPU). Forzar su propia capa estable
     evita que el mosaico se invalide y parpadee en negro. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo img {
  height: 38px;
  width: auto;
}

.nav-links-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-sliding-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.nav-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links a:not(.btn) {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: #94A3B8;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.nav-links a:not(.btn):active {
  transform: scale(0.94);
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active {
  color: #34D399;
}

/* Los botones de acción (Portal Clientes / Certificado Oficial) se duplican
   como último <li> dentro de .nav-links para que aparezcan dentro del menú
   desplegable en móvil, donde .nav-actions se oculta por completo. En
   escritorio este <li> se oculta y se usa el .nav-actions de siempre. */
.nav-mobile-actions {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* El header-nav no puede recortar overflow (rompería el menú móvil, que se
   despliega fuera de su caja), así que el brillo normal del botón (20px de
   difuminado) se sale por el borde curvo del pill, que solo tiene 18px de
   espacio antes de su fin. Aquí adentro se usa un brillo más corto que sí cabe. */
.nav-actions .btn-primary {
  box-shadow: 0 3px 10px var(--primary-glow);
}

.nav-actions .btn-primary:hover {
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.45);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #F8FAFC;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background 0.25s ease;
}

.mobile-menu-btn.active .hamburger-bar {
  background: #34D399;
}

.mobile-menu-btn.active .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-btn.active .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* BARRA DE PESTAÑAS DE NAVEGACIÓN Y REDIRECCIÓN */
.subnav-tabs-bar {
  position: sticky;
  top: 80px;
  z-index: 900;
  background: rgba(8, 14, 11, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  padding: 10px 0;
  margin-bottom: 30px;
}

.subnav-tabs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav-tabs-container::-webkit-scrollbar {
  display: none;
}

.subnav-tab-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.subnav-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.subnav-tab-btn:hover {
  color: #34D399;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(74, 222, 128, 0.3);
}

.subnav-tab-btn.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: #34D399;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.subnav-redirect-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ==========================================================================
   10K WEBSITES CINEMATIC SCROLL HERO STYLES
   ========================================================================== */
.hero-pinned {
  position: relative;
  width: 100%;
  height: 400vh;
  background-color: #080E0B;
  /* El header flotante reserva ~56-60px de espacio en el flujo normal (es
     sticky, no fixed), así que el hero empezaba después de ese espacio en
     vez de en el borde real de la página: arriba del todo se veían el fondo
     plano y las partículas en vez del video/imagen. Se sube el hero con un
     margen negativo para que arranque en el borde real; el header lo sigue
     tapando por encima igual que siempre (z-index más alto). */
  margin-top: -60px;
}

.hero-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #080E0B;
  z-index: 10;
}

.hero-poster-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transform: scale(1.02);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stage.video-ready #hero-video {
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(8, 14, 11, 0.4) 0%, rgba(8, 14, 11, 0.9) 100%);
}

.hero-captions-container {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hero-caption-band {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0 6vw;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-caption-band:first-child {
  opacity: 1;
  pointer-events: auto;
}

.hero-caption-band.active {
  pointer-events: auto;
}

.hero-caption-card {
  max-width: 660px;
  background: rgba(8, 14, 11, 0.78);
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
}

.hero-caption-card .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 9999px;
  color: #4ADE80;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.hero-caption-card h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.16;
  color: #F8FAFC;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95);
  margin-bottom: 14px;
}

.hero-caption-card h2 span {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #4ADE80 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-caption-card p {
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  color: #CBD5E1;
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  margin-bottom: 22px;
}

.hero-caption-card .hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Loading Ring */
.hero-loading-ring-wrap {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(8, 14, 11, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.hero-loading-ring-wrap span {
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-loading-ring {
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
}

.hero-loading-ring circle {
  stroke: #4ADE80;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke-dashoffset 0.15s ease-out;
}

.hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #94A3B8;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  animation: bounceCue 2s infinite ease-in-out;
}

@keyframes bounceCue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* MARQUESINA */
.marquee-container {
  width: 100%;
  overflow: hidden;
  background: #0B140F;
  border-top: 1px solid rgba(74, 222, 128, 0.12);
  border-bottom: 1px solid rgba(74, 222, 128, 0.12);
  color: #FFFFFF;
  padding: 14px 0;
  display: flex;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  animation: marqueeSlide 28s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #CBD5E1;
}

.marquee-item span.highlight {
  color: #4ADE80;
}

.marquee-dot {
  width: 6px;
  height: 6px;
  background: #F59E0B;
  border-radius: 50%;
}

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

/* SECCIONES */
.section {
  padding: 90px 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
  position: relative;
}

.section-header::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translateX(-50%);
  background-image: var(--ripple-motif);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

.section-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #4ADE80;
  letter-spacing: 3px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: #F8FAFC;
  margin-bottom: 16px;
}

.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--primary-light);
}

.section-desc {
  font-size: 1.05rem;
  color: #94A3B8;
  line-height: 1.6;
}

/* MOTIVO DE ONDAS: divisor de firma entre secciones */
.ripple-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0;
  color: rgba(74, 222, 128, 0.4);
}

.ripple-divider::before,
.ripple-divider::after {
  content: '';
  height: 1px;
  width: 100%;
  max-width: 220px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.35));
}

.ripple-divider::after {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.35), transparent);
}

.ripple-divider svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.ripple-divider svg circle {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ripple-divider.in-view svg circle:nth-child(1) { stroke-dashoffset: 0; transition-delay: 0.05s; }
.ripple-divider.in-view svg circle:nth-child(2) { stroke-dashoffset: 0; transition-delay: 0.2s; }
.ripple-divider.in-view svg circle:nth-child(3) { stroke-dashoffset: 0; transition-delay: 0.35s; }

/* SECCIONES A PANTALLA COMPLETA: fotos que ya existían pero no se usaban */
.bleed-section {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.bleed-section-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  z-index: -2;
  animation: bleedDrift 22s ease-in-out infinite alternate;
}

@keyframes bleedDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.1) translate(-1.5%, -1%); }
}

.bleed-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 7, 0.65) 0%, rgba(6, 10, 7, 0.78) 55%, rgba(6, 10, 7, 0.92) 100%);
}

.bleed-section-inner {
  max-width: 760px;
  padding: 90px 24px;
  text-align: center;
}

.bleed-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 18px;
}

.bleed-section-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  color: #F8FAFC;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.9);
}

.bleed-section-inner h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--primary-light);
}

.bleed-section-inner p {
  margin-top: 18px;
  font-size: 1.02rem;
  color: #CBD5E1;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .bleed-section-bg {
    animation: none;
  }
}

@media (max-width: 640px) {
  .bleed-section {
    min-height: 46vh;
  }
  .bleed-section-inner {
    padding: 56px 22px;
  }
  .bleed-section-inner h2 {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }
  .bleed-section-inner p {
    font-size: 0.92rem;
  }
  .bleed-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 2px;
  }
}

/* MARCO DE VERIFICACIÓN: esquinas tipo documento oficial */
.dossier-frame {
  position: relative;
}

.dossier-frame::before,
.dossier-frame::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary-light);
  opacity: 0.55;
  pointer-events: none;
}

.dossier-frame::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 6px;
}

.dossier-frame::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 6px;
}

/* TARJETAS Y PANELES DARK LUXURY */
.tilt-card, .cycle-slide-card, .interactive-card, .consequence-card, .cert-preview-wrapper, .iscc-doc-page, .contact-card, .calculator-box, .faq-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-smooth);
}

.tilt-card:hover, .cycle-slide-card:hover, .interactive-card:hover, .consequence-card:hover {
  border-color: var(--border-glass-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -8px rgba(16, 185, 129, 0.25);
}

/* STATS: fila tipo ficha verificada */
.stat-ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(74, 222, 128, 0.18);
  border-bottom: 1px solid rgba(74, 222, 128, 0.18);
  margin-bottom: 70px;
}

.stat-pill {
  padding: 26px 20px;
  text-align: left;
  position: relative;
}

.stat-pill:not(:last-child) {
  border-right: 1px solid rgba(74, 222, 128, 0.14);
}

.stat-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(74, 222, 128, 0.55);
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: block;
}

.stat-number {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  color: #34D399;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.stat-label {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 8px;
  font-weight: 500;
}

@media (max-width: 860px) {
  .stat-ledger {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-pill {
    min-width: 0;
  }
  .stat-pill:nth-child(2) {
    border-right: none;
  }
  .stat-pill:nth-child(1),
  .stat-pill:nth-child(2) {
    border-bottom: 1px solid rgba(74, 222, 128, 0.14);
  }
}

@media (max-width: 420px) {
  .stat-number {
    font-size: 1.3rem;
  }
}

/* GRID DEL CICLO */
.cycle-slider-viewport {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 12px 4px 20px;
}

.cycle-slider-track {
  display: flex;
  gap: 20px;
  width: max-content;
}

.cycle-slide-card {
  width: 290px;
  padding: 26px 20px;
  flex-shrink: 0;
}

.slide-step-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2);
  color: #4ADE80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 14px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.cycle-slide-card h4 {
  font-size: 1.1rem;
  color: #F8FAFC;
  margin-bottom: 8px;
}

.cycle-slide-card p {
  font-size: 0.88rem;
  color: #94A3B8;
  line-height: 1.5;
}

/* CERTIFICADO DOCUMENTO PREVIEW */
.cert-preview-wrapper {
  padding: 32px;
  background: #0E1612;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius-lg);
  color: #F8FAFC;
}

.cert-header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(74, 222, 128, 0.25);
  padding-bottom: 18px;
  margin-bottom: 20px;
}

.cert-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
}

.cert-official-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cert-official-table th {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
}

.cert-official-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
}

/* ISCC EU DOC VIEWER */
.iscc-doc-page {
  padding: 36px;
  background: #0E1712;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.iscc-selector-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  justify-content: center;
}

.iscc-tab-btn {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: #CBD5E1;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.iscc-tab-btn.active {
  background: #10B981;
  color: #FFFFFF;
  border-color: #34D399;
}

/* FIRMA CANVAS */
.signature-pad-box {
  background: #080E0B;
  border: 2px dashed rgba(74, 222, 128, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 16px;
}

#signature_canvas {
  width: 100%;
  height: 160px;
  background: #050B08;
  border-radius: var(--radius-sm);
  cursor: crosshair;
  touch-action: none;
}

/* CALCULADORA */
.calculator-box {
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

.calc-slider-wrap input[type=range] {
  width: 100%;
  accent-color: #10B981;
  height: 8px;
  border-radius: 4px;
  background: #18261E;
}

/* FORMULARIOS */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #E2E8F0;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  background: #080E0B;
  border: 1.5px solid rgba(74, 222, 128, 0.2);
  border-radius: var(--radius-md);
  color: #F8FAFC;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: #34D399;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* FOOTER */
.footer-dark {
  background: #040806;
  border-top: 1px solid rgba(74, 222, 128, 0.15);
  padding: 60px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-col h3 {
  font-size: 1rem;
  color: #F8FAFC;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: #94A3B8;
  text-decoration: none;
  font-size: 0.88rem;
  transition: var(--transition-smooth);
}

.footer-col ul li a:hover {
  color: #34D399;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #94A3B8;
}

/* MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 6, 0.85);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: #0E1712;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #94A3B8;
  cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero-grid, .about-grid, .calculator-box, .cert-grid, .contact-grid, .two-col-grid, .three-col-grid {
    grid-template-columns: 1fr !important;
  }
  .two-col-grid > *, .three-col-grid > * {
    min-width: 0;
  }
  .consequences-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* El menu de escritorio (logo + pestañas + 2 botones) se activa como
   hamburguesa por debajo de este ancho, con margen de sobra para que el
   ultimo boton nunca se salga del borde redondeado del pill. El resto de
   la cuadricula de la pagina sigue usando el quiebre de 992px de arriba
   porque a ella si le sobra espacio en ese rango. */
@media (max-width: 1360px) {
  .nav-links-wrapper {
    display: contents;
  }
  .nav-sliding-pill {
    display: none;
  }
  .nav-links {
    position: fixed;
    top: 84px;
    left: 16px;
    right: 16px;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #0A120E;
    border: 1px solid rgba(74, 222, 128, 0.22);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  }
  .nav-links a {
    padding: 12px 14px;
    text-align: left;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-links.mobile-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Despliegue en cascada: cada <li> anima por separado con un pequeño
     retraso, para que el menú se sienta como un abanico y no como un
     bloque que aparece de golpe. */
  .nav-links li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.24s ease, transform 0.24s ease;
  }
  .nav-links.mobile-open li {
    opacity: 1;
    transform: translateY(0);
  }
  .nav-links.mobile-open li:nth-child(1) { transition-delay: 0.03s; }
  .nav-links.mobile-open li:nth-child(2) { transition-delay: 0.06s; }
  .nav-links.mobile-open li:nth-child(3) { transition-delay: 0.09s; }
  .nav-links.mobile-open li:nth-child(4) { transition-delay: 0.12s; }
  .nav-links.mobile-open li:nth-child(5) { transition-delay: 0.15s; }
  .nav-links.mobile-open li:nth-child(6) { transition-delay: 0.18s; }
  .nav-actions {
    display: none;
  }
  /* Dentro del menú móvil, los botones de acción viven como último <li>
     de la lista (ver .nav-mobile-actions arriba), ya que .nav-actions
     desaparece por completo en este breakpoint. */
  .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(74, 222, 128, 0.15);
  }
  .nav-mobile-actions .btn {
    width: 100%;
  }
  .mobile-menu-btn {
    display: flex;
    position: relative;
    z-index: 1002;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 2.1rem;
  }
  .consequences-grid, .footer-grid {
    grid-template-columns: 1fr;
  }
  .iscc-doc-page, .cert-preview-wrapper, .calculator-box {
    padding: 20px 16px;
  }
}

/* Fallback Estático para Móviles y Movimiento Reducido:
   sin video, las 4 tarjetas se apilan y van apareciendo con el scroll normal
   (el mismo mecanismo de "reveal-on-scroll" que usa el resto del sitio).
   Tiene que calzar EXACTO con las 5 condiciones de isStaticMode() en
   js/scrub.js -- antes solo tenía 3 de las 5, así que una tablet en
   vertical entre 769-1024px (no matchea max-width:768px, pero sí matchea
   la condición de portrait+1024px del JS) quedaba con el JS pensando que
   estaba en modo estático (reproduce el video una sola vez, no hace scroll-
   scrub) mientras el CSS la seguía dejando con `.hero-pinned` en 400vh de
   alto -- la sección se veía completamente congelada durante 4 pantallas
   de scroll. Bug real reportado 2026-08-27 ("no funciona el scroll"). */
@media (max-width: 768px), (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), (orientation: portrait) and (max-width: 1024px) {
  .hero-pinned {
    height: auto !important;
  }
  .hero-stage {
    position: relative !important;
    height: auto !important;
    min-height: 90vh;
    padding: 120px 20px 70px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 46px;
  }
  .hero-poster-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
    opacity: 1 !important;
  }
  .hero-scrim {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
  }
  #hero-video {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
  }
  .hero-loading-ring-wrap, .hero-scroll-cue {
    display: none !important;
  }
  .hero-captions-container {
    position: relative !important;
    display: contents;
  }
  .hero-caption-band {
    position: relative !important;
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 4;
  }
  .hero-caption-card {
    padding: 24px 22px;
  }
  .hero-caption-card h2 {
    font-size: clamp(1.7rem, 7vw, 2.15rem);
    margin-bottom: 10px;
  }
  .hero-caption-card p {
    font-size: 0.92rem;
    margin-bottom: 16px;
  }
}


/* ==========================================================================
   OFFICIAL LEGAL DOCUMENT STYLES (ISCC EU & CERTIFICADO 02596)
   ========================================================================== */
.hero-caption-card {
  background: rgba(8, 14, 11, 0.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  max-width: 660px;
  margin: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(16, 185, 129, 0.15);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.official-paper-doc {
  background: #0B130F;
  border: 2px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(16, 185, 129, 0.03);
  position: relative;
  overflow: hidden;
  color: #E2E8F0;
  font-family: var(--font-body);
}

.doc-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 5.5rem;
  font-weight: 900;
  color: rgba(74, 222, 128, 0.03);
  letter-spacing: 6px;
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
  z-index: 0;
}

.doc-inner-content {
  position: relative;
  z-index: 1;
}

.doc-header-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(74, 222, 128, 0.35);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.doc-header-ribbon .doc-brand img {
  height: 48px;
}

.doc-header-ribbon .doc-system-badge {
  text-align: right;
}

.doc-main-heading {
  text-align: center;
  margin-bottom: 24px;
}

.doc-main-heading h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.doc-main-heading .doc-subheading {
  font-size: 0.82rem;
  color: #34D399;
  font-weight: 700;
  text-transform: uppercase;
}

.doc-clause-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-left: 4px solid #10B981;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: #F1F5F9;
  text-align: justify;
}

.doc-clause-box strong {
  color: #34D399;
}

.doc-declarations-list {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-declarations-list li {
  display: flex;
  gap: 12px;
  font-size: 0.84rem;
  color: #CBD5E1;
  line-height: 1.55;
  text-align: justify;
}

.doc-declarations-list li .item-bullet {
  color: #34D399;
  font-weight: 800;
  flex-shrink: 0;
}

.doc-technical-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.doc-technical-table th, .doc-technical-table td {
  padding: 12px 16px;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.doc-technical-table th {
  background: rgba(16, 185, 129, 0.15);
  color: #4ADE80;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}

.doc-technical-table td {
  background: rgba(0, 0, 0, 0.3);
  color: #F8FAFC;
}

.doc-signatures-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(74, 222, 128, 0.2);
  align-items: end;
}

.doc-sig-box {
  display: flex;
  flex-direction: column;
}

.doc-sig-canvas-box {
  height: 120px;
  border: 1px dashed rgba(74, 222, 128, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-sig-line {
  border-top: 1px solid #94A3B8;
  margin-top: 8px;
  padding-top: 6px;
  font-size: 0.8rem;
  color: #CBD5E1;
}


/* ==========================================================================
   LEGAL NOTICE & MAP STYLES
   ========================================================================== */
.legal-notice-card {
  background: rgba(14, 23, 18, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 5px solid #F59E0B;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 40px;
}

.legal-notice-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #FBBF24;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.legal-notice-body {
  font-size: 0.9rem;
  color: #CBD5E1;
  line-height: 1.7;
  text-align: justify;
}

.map-container-card {
  background: #0B130F;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.map-iframe {
  width: 100%;
  height: 380px;
  border: none;
  filter: grayscale(80%) invert(90%) contrast(120%);
  display: block;
}

/* Password visibility toggle component */
.password-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-group .form-control,
.password-input-group input[type="password"],
.password-input-group input[type="text"] {
  width: 100%;
  padding-right: 44px !important;
}

.btn-toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
  z-index: 2;
}

.btn-toggle-password:hover {
  color: #34D399;
  background: rgba(255, 255, 255, 0.05);
}

.btn-toggle-password:focus {
  outline: none;
  color: #34D399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3);
}

.btn-toggle-password svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}