/* 
    ELECTRONIKA | Premium B2B Technology Integrator
    Main Stylesheet - Phase 1: Foundation
*/

:root {
  /* Colors - Premium B2B Palette (Curation: Deep Professional) */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f4f5f7;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-accent: #1e40af;
  --color-accent-hover: #1e3a8a;
  --color-white: #ffffff;
  --color-border: #e2e8f0;

  /* Typography - REFERENCE-BASED SCALE */
  --font-primary: "Montserrat", sans-serif;
  --font-size-base: 16px;
  --h1-size: clamp(3.2rem, 6vw, 5rem);
  --h2-size: clamp(2.25rem, 4.2vw, 3.35rem);
  --h3-size: 1.25rem;
  --body-size: 0.96rem;
  --sm-size: 0.8125rem;

  /* Spacing - STABILIZED RHYTHM */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout Tokens - MASTER ALIGNMENT (Turno Digital Reference) */
  --header-height: 96px;
  --max-container: 1440px;
  --content-container: 1180px;
  /* Stabilized readability */
  --hero-min-height: 960px;
  --section-min-height: 760px;
  --section-padding: 96px;

  /* Footer Tokens */
  --footer-top-min: 400px;
  --footer-bottom-min: 80px;

  /* UI Details */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  /* Compact Card Style */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-premium: 0 20px 50px rgba(16, 24, 40, 0.06);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Exact Neumorphism System (User Reference) */
  --neumo-base: #e0e0e0;
  --neumo-switch-base: #d6d6d6;
  --neumo-light: #ffffff;
  --neumo-dark: #a1a1a1;
  --neumo-switch-dark: #b0b0b0;
  --neumo-shadow-raised:
    9px 9px 15px var(--neumo-dark), -9px -9px 15px var(--neumo-light);
  --neumo-shadow-raised-sm:
    6px 6px 12px rgba(161, 161, 161, 0.55),
    -6px -6px 12px rgba(255, 255, 255, 0.95);
  --neumo-shadow-inset:
    inset 8px 8px 16px var(--neumo-switch-dark),
    inset -8px -8px 16px var(--neumo-light);
  --neumo-shadow-knob:
    -4px -4px 8px var(--neumo-light), 4px 4px 8px var(--neumo-switch-dark);
  --neumo-radius: 68px;
  --neumo-radius-pill: 999px;
}

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

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Layout System */
.container {
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 0 var(--space-md);
  width: 100%;
}

.content-frame {
  max-width: var(--content-container);
  margin: 0 auto;
  width: 100%;
}

.section {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  /* Allow inner to fill height */
  justify-content: center;
  scroll-margin-top: var(--header-height);
  overflow: hidden;
  box-sizing: border-box;
}

/* Strict Full-Screen for standard sections */
.section:not(.section--hero):not(.footer) {
  min-height: calc(100vh - var(--header-height)) !important;
}

.section--hero {
  min-height: var(--hero-min-height);
  border: none;
  outline: none;
}

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

.section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.section:not(.section--hero):not(.footer) .section__inner {
  min-height: calc(100vh - var(--header-height)) !important;
  padding-block: var(--section-padding);
}

.section--hero .section__inner {
  min-height: var(--hero-min-height);
}

.qa-placeholder {
  width: 100%;
  flex: 1;
  /* Expand to fill the min-height of section__inner */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Extra visual confirmation */
  border: 1px dashed rgba(0, 0, 0, 0.1);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

/* Intro Screen */
.intro-active {
  overflow: hidden;
}

.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  z-index: 2000;
  display: flex;
  align-items: center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100vw);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1000;
  overflow-y: hidden;
  /* Controlled by JS/State */
  background-color: var(--color-bg-primary);
}

/* State: Main Site Visible */
.intro-dismissed .intro-screen {
  transform: translateX(-100vw);
}

.intro-dismissed .site-content {
  transform: translateX(0);
  overflow-y: auto;
  overscroll-behavior-y: none;
  /* Enable vertical scroll only when site is active */
}

.intro-dismissed .header {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1000 !important;
}

@media (max-width: 768px) {
  .site-content {
    transform: none;
    position: static;
    height: auto;
    overflow-y: visible;
  }

  .intro-dismissed .site-content {
    overflow-y: visible;
  }

  .intro-screen {
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
  }

  .intro-dismissed .intro-screen {
    transform: translateY(-100vh);
  }
}

.intro-screen__container {
  height: 100%;
  display: flex;
  align-items: center;
}

.intro-screen__content {
  max-width: 800px;
  padding: var(--space-md);
}

.intro-screen__title {
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.intro-screen__subtitle {
  font-size: var(--body-size);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 600px;
}

.intro-screen__footer {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.intro-screen__cue {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: fit-content;
}

.intro-screen__cue-text {
  font-size: var(--sm-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffd43b;
}

.intro-screen__cue-line {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--neumo-radius-pill);
  position: relative;
  overflow: hidden;
  margin: var(--space-xs) 0;
}

.intro-screen__cue-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #ffd43b;
  box-shadow:
    0 0 10px #ffd43b,
    0 0 20px rgba(255, 212, 59, 0.6);
  opacity: 1;
  animation: cue-slide 2.5s infinite cubic-bezier(0.85, 0, 0.15, 1);
}

@keyframes cue-slide {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.intro-screen__microcopy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0.6;
}

/* Header Navigation */
.header {
  height: var(--header-height);
  background-color: var(--neumo-base);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 5000;
  /* Higher than sections */
  display: flex;
  align-items: center;
  transition: var(--transition-base);
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.header,
.header__container,
.header__logo,
.nav,
.nav__list,
.nav__list > li,
.nav__item-dropdown {
  overflow: visible !important;
}

.intro-dismissed .header {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .intro-screen,
  .header,
  .intro-screen__cue-line::after {
    transition: none !important;
    animation: none !important;
  }
}

.header--scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: 80px;
  /* Slightly more compact on scroll */
  box-shadow: var(--shadow-sm);
}

.header__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 48px;
  align-items: center;
  height: 100%;
  position: relative;
}

.header__logo {
  grid-column: 1;
  display: flex;
  align-items: center;
}

.nav {
  grid-column: 2;
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 30;
}

.header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 20;
}

.header__actions::before {
  content: "";
  width: 1px;
  height: 26px;
  background: rgba(0, 0, 0, 0.25);
  margin-right: 4px;
  display: block;
  pointer-events: none;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: var(--transition-fast);
}

.logo__img {
  max-height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .logo__img {
    max-height: 32px;
  }
}

.nav__list {
  display: flex;
  list-style: none;
  gap: 16px;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  z-index: 30;
}

.nav__list > li {
  position: relative;
  z-index: 31;
  overflow: visible;
}

.nav__link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: var(--transition-fast);
  padding: 6px 10px;
  border-radius: var(--neumo-radius-pill);
  overflow: visible;
  position: relative;
  z-index: 32;
  pointer-events: auto;
}

.nav__link:hover,
.nav__link--active,
.nav__item-dropdown:hover > .nav__link {
  background-color: var(--neumo-base);
  color: var(--color-accent);
  box-shadow:
    9px 9px 15px var(--neumo-dark),
    -9px -9px 15px var(--neumo-light);
  border-radius: 68px;
}

/* Header Buttons Group */
.header__btns {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Compact gap for two buttons */
}

.header__btn-contacto {
  background-color: var(--neumo-base) !important;
  box-shadow: var(--neumo-shadow-raised) !important;
  border: none !important;
  color: var(--color-text-primary) !important;
  min-width: 105px;
}

.header__btn-contacto:hover {
  box-shadow: var(--neumo-shadow-raised-sm) !important;
  color: var(--color-accent) !important;
}

.header__btn-whatsapp {
  background-color: #25d366 !important;
  /* WhatsApp Green */
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    5px 5px 12px rgba(18, 140, 126, 0.25),
    -3px -3px 8px rgba(255, 255, 255, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.header__btn-whatsapp:hover {
  background-color: #22c35e !important;
  box-shadow:
    4px 4px 8px rgba(18, 140, 126, 0.3),
    -2px -2px 6px rgba(255, 255, 255, 0.3) !important;
}

/* Language Switch - Reduced Size & Animation */
.lang-switch {
  position: relative;
  width: 62px;
  height: 28px;
  background: var(--neumo-switch-base);
  border-radius: var(--neumo-radius-pill);
  box-shadow: var(--neumo-shadow-inset);
  cursor: pointer;
  transition: var(--transition-base);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}

.lang-switch__knob {
  position: absolute;
  width: 30px;
  height: 20px;
  background: linear-gradient(145deg, #e6e6e6, #d1d1d1);
  border-radius: var(--neumo-radius-pill);
  top: 4px;
  left: 4px;
  box-shadow: var(--neumo-shadow-knob);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.lang-switch--en .lang-switch__knob {
  transform: translateX(24px);
}

.lang-switch__item {
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--color-text-secondary);
  z-index: 2;
  transition: all 0.3s ease;
  width: 50%;
  text-align: center;
  pointer-events: none;
}

.lang-switch__item--active {
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(0, 102, 255, 0.6);
}

.nav__mobile-actions {
  display: none;
}

/* Dropdown Menus */
.nav__item-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
}

.dropdown {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--neumo-base);
  min-width: 220px;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  box-shadow:
    9px 9px 9.75px var(--neumo-dark),
    -9px -9px 9.75px var(--neumo-light);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  list-style: none;
  z-index: 6000;
  pointer-events: auto;
}

.nav__item-dropdown:hover .dropdown,
.nav__item-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(12px);
  pointer-events: auto;
}

.dropdown__link {
  display: block;
  padding: 10px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dropdown__link:hover {
  background-color: var(--neumo-base);
  color: var(--color-accent);
  box-shadow:
    6px 6px 7.8px rgba(161, 161, 161, 0.55),
    -6px -6px 7.8px rgba(255, 255, 255, 0.95);
}

/* Software Grid Dropdown */
.dropdown--software {
  display: flex;
  gap: var(--space-md);
  min-width: 480px;
  padding: var(--space-md);
}

.dropdown__group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dropdown__title {
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2xs);
  opacity: 0.8;
  padding: 0 16px;
}

.btn--compact {
  padding: 10px 20px;
  font-size: 0.75rem;
  min-height: 40px;
}

/* Hero Content Styles */
.hero__content {
  max-width: 850px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (max-width: 1199px) {
  .intro-cinematic-slide .container {
    padding: 0 var(--space-md);
  }

  .header__container {
    display: flex;
    justify-content: flex-start;
    padding: 0 var(--space-sm);
  }

  .header__logo {
    transform: none !important;
    max-width: 165px;
    flex: 0 1 auto;
    margin-right: auto;
    /* Push everything else to the right */
  }

  .header__actions {
    transform: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: 12px;
    flex: 0 0 auto;
  }

  .header__actions .btn {
    display: none !important;
  }

  .lang-switch {
    transform: scale(0.9);
    margin: 0;
  }

  .hero-title {
    font-size: clamp(1.85rem, 6vw, 2.75rem) !important;
  }

  .hero-video-placeholder {
    display: flex !important;
    width: 180px;
    right: 20px;
    bottom: 40px;
    z-index: 5;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 0 var(--space-xs);
  }

  .hero__content {
    transform: translateY(-40px);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .btn--hero {
    width: 100%;
    max-width: 280px;
  }

  .hero-video-placeholder {
    display: flex !important;
    width: 140px;
    right: 10px;
    bottom: 20px;
    opacity: 0.6;
    /* More subtle on small screens */
  }
}

.lang-switch {
  transform: scale(0.85);
  transform-origin: right center;
}

/* overflow-x is controlled by body overflow-x: hidden */

/* Typography Components */
.eyebrow {
  font-size: var(--sm-size);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
  display: block;
}

.title {
  font-size: var(--h2-size);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.hero-title {
  font-size: var(--h1-size);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
}

.text {
  font-size: var(--body-size);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: var(--neumo-radius);
  font-size: var(--sm-size);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-base);
  border: none;
  cursor: pointer;
  background-color: var(--neumo-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn--primary {
  background-color: var(--neumo-base);
  color: var(--color-accent);
  box-shadow: var(--neumo-shadow-raised);
}

.btn--primary:hover {
  box-shadow: var(--neumo-shadow-raised-sm);
  transform: translateY(-2px);
}

.btn--primary:active {
  box-shadow: var(--neumo-shadow-inset);
  transform: translateY(0);
}

.btn--secondary {
  background-color: var(--neumo-base);
  color: var(--color-text-secondary);
  box-shadow: var(--neumo-shadow-inset);
}

.btn--secondary:hover {
  box-shadow: var(--neumo-shadow-raised-sm);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.btn--compact {
  padding: 6px 14px;
  font-size: 0.6rem;
  min-height: 32px;
  border-radius: var(--neumo-radius-pill);
}

/* Base Grids & Cards */
.grid {
  display: grid;
  gap: var(--space-md);
}

.card {
  background: var(--color-white);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
}

/* Mobile Menu Toggle - Structure */
.menu-toggle {
  display: none;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: var(--transition-fast);
  transform-origin: center;
}

.menu-toggle--active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

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

.menu-toggle--active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1199px) {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--neumo-base);
    padding-top: var(--header-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Start from top to allow scrolling */
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    transform: translateY(-20px);
    padding-bottom: 60px;
    /* Space for CTAs at bottom */
  }

  .nav--active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    width: 100%;
    margin-top: 40px;
  }

  .nav__link {
    font-size: 0.88rem;
    padding: 10px 20px;
    width: 100%;
    display: block;
    color: var(--color-text-primary);
    line-height: 1.2;
  }

  .nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    width: 100%;
    max-width: 300px;
    padding: 0 20px;
  }

  .nav__link--mobile-cta {
    background: var(--neumo-base);
    box-shadow: var(--neumo-shadow-raised-sm);
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    text-align: center;
    padding: 16px 20px;
    color: var(--color-text-primary) !important;
  }

  .nav__link--whatsapp {
    color: #25d366 !important;
    margin-bottom: 20px;
  }
}

.footer__cta-content {
  background: #0f172a;
  border-radius: 32px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.footer__cta-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}

.footer__cta-text {
  font-size: 1.1rem;
  color: #94a3b8;
  margin-bottom: 32px;
}

.footer__cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__main {
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer__logo {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 14px;
  text-decoration: none;
}

.footer__text {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #94a3b8;
  margin-bottom: 18px;
  max-width: 320px;
}

.footer__socials a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.45),
    -6px -6px 14px rgba(255, 255, 255, 0.035);
}

.footer__social a:hover {
  background: var(--color-accent);
  transform: translateY(-3px);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 30px;
  padding-bottom: 34px;
}

.footer__grid .footer__col:nth-child(4),
.footer__grid .footer__col:nth-child(5) {
  grid-row: 2;
}

.footer__title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 12px;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer__links a {
  font-size: 0.72rem;
  line-height: 1.25;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__links a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: #64748b;
}

@media (max-width: 1199px) {
  .footer__main {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .footer__cta-content {
    padding: 40px 20px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Specific Hover Fix for Proyectos and Empresa (Definitive Alignment) */
.nav__link[href="#proyectos"]:hover,
.nav__link[href="#electronika"]:hover,
.nav__link[href="#proyectos"].is-active,
.nav__link[href="#electronika"].is-active,
.main-nav a[href="#proyectos"]:hover,
.main-nav a[href="#electronika"]:hover,
.main-nav a[href="#proyectos"].is-active,
.main-nav a[href="#electronika"].is-active {
  background: #e0e0e0;
  box-shadow:
    9px 9px 15px #a1a1a1,
    -9px -9px 15px #ffffff;
  border-radius: 68px;
}

.nav,
.main-nav,
.nav__list,
.nav__item,
.header__nav {
  overflow: visible;
}

/* HERO SECTION HEIGHT TEST — manual adjustment */
:root {
  --hero-trim-test: 80px;
}

#hero.section,
#hero.section--hero {
  min-height: calc(var(--hero-min-height) - var(--hero-trim-test));
}

#hero .section__inner {
  min-height: calc(var(--hero-min-height) - var(--hero-trim-test));
}

@media (max-width: 1199px) {
  #hero.section,
  #hero.section--hero,
  #hero .section__inner {
    min-height: auto !important;
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 60px;
  }
}

/* GLOBAL SECTION HEIGHT LOCK — ELECTRONIKA */
:root {
  --standard-section-height-lock: calc(100dvh - var(--header-height));
  --standard-section-frame-lock: calc((100dvh - var(--header-height)) - 145px);
}

#problema.section,
#metodo.section,
#electronika.section,
#contacto.section {
  height: var(--standard-section-height-lock) !important;
  min-height: var(--standard-section-height-lock) !important;
  max-height: var(--standard-section-height-lock) !important;
}

/* Relaxed lock for interactive sections with dynamic content */
#soluciones.section,
#software.section {
  height: auto !important;
  min-height: var(--standard-section-height-lock) !important;
  max-height: none !important;
}

#problema > .section__inner,
#metodo > .section__inner,
#electronika > .section__inner,
#contacto > .section__inner {
  height: var(--standard-section-height-lock) !important;
  min-height: var(--standard-section-height-lock) !important;
  max-height: var(--standard-section-height-lock) !important;
  padding-block: var(--section-padding) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#soluciones > .section__inner,
#software > .section__inner {
  height: auto !important;
  min-height: var(--standard-section-height-lock) !important;
  max-height: none !important;
  padding-block: var(--section-padding) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#problema .qa-placeholder,
#metodo .qa-placeholder,
#soluciones .qa-placeholder,
#proyectos .qa-placeholder,
#electronika .qa-placeholder,
#contacto .qa-placeholder,
#problema .section-frame,
#metodo .section-frame,
#soluciones .section-frame,
#proyectos .section-frame,
#electronika .section-frame,
#contacto .section-frame,
#problema .content-frame,
#metodo .content-frame,
#soluciones .content-frame,
#proyectos .content-frame,
#electronika .content-frame,
#contacto .content-frame {
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* PROBLEMA SECTION CONTENT */
#problema .problem-frame {
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  width: 100%;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1fr auto;
  gap: 24px;
  align-items: center;
}

#problema .section-copy {
  max-width: 460px;
}

#problema .section-copy .title {
  font-size: clamp(1.7rem, 2.7vw, 2.65rem);
  line-height: 1.05;
  margin-bottom: 14px;
}

#problema .section-copy .text {
  font-size: 0.84rem;
  line-height: 1.55;
  max-width: 430px;
  margin-bottom: 0;
}

#problema .problem-bridge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100px;
  width: 50%;
  max-width: 760px;
  min-width: 420px;
  border-radius: 53px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    5px 5px 12px #929292,
    -5px -5px 12px #ffffff;
  padding: 12px 24px;
  text-align: center;
  z-index: 10;
}

#problema .problem-bridge p {
  margin: 0;
  font-size: 0.858rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  #problema .problem-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
  }

  #problema .section-copy {
    max-width: 100%;
    text-align: center;
  }

  #problema .section-copy .title {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }
}

/* SECTION DEBUG LABELS — temporary development helper */
/* TURNODIGITAL FEATURED LINK */
.dropdown__link--featured {
  font-weight: 800;
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.35);
}

/* SOLUCIONES SECTION CONTENT */
#soluciones .solutions-frame {
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  width: 100%;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  grid-template-rows: 1fr auto;
  gap: 22px;
  align-items: center;
}

#soluciones .section-copy {
  max-width: 400px;
}

#soluciones .section-copy .title {
  font-size: clamp(1.55rem, 2.4vw, 2.3rem);
  line-height: 1.05;
  margin-bottom: 12px;
}

#soluciones .section-copy .text {
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 390px;
  margin-bottom: 0;
}

#soluciones .solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#soluciones .solution-item {
  background: var(--neumo-base);
  border-radius: 22px;
  padding: 15px 14px;
  box-shadow: var(--neumo-shadow-raised-sm);
  overflow: hidden;
}

#soluciones .solution-item h3 {
  font-size: 0.78rem;
  line-height: 1.12;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}

#soluciones .solution-item p {
  font-size: 0.64rem;
  line-height: 1.3;
  color: var(--color-text-secondary);
  margin: 0;
}

#soluciones .solutions-bridge {
  grid-column: 1 / -1;
  background: var(--neumo-base);
  border-radius: 68px;
  padding: 13px 22px;
  box-shadow: var(--neumo-shadow-inset);
  text-align: center;
}

#soluciones .solutions-bridge p {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 1050px) {
  #soluciones .solutions-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
  }

  #soluciones .section-copy {
    max-width: 100%;
    text-align: center;
  }

  #soluciones .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SOFTWARE SECTION CONTENT */
#software .software-frame {
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  width: 100%;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-rows: 1fr auto;
  gap: 22px;
  align-items: center;
}

#software .section-copy {
  max-width: 440px;
}

#software .section-copy .title {
  font-size: clamp(1.55rem, 2.45vw, 2.35rem);
  line-height: 1.05;
  margin-bottom: 12px;
}

#software .section-copy .text {
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 410px;
  margin-bottom: 0;
}

#software .software-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#software .software-group {
  background: var(--neumo-base);
  border-radius: 24px;
  padding: 18px 16px;
  box-shadow: var(--neumo-shadow-raised-sm);
  overflow: hidden;
}

#software .software-group span {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

#software .software-group h3 {
  font-size: 0.82rem;
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--color-text-primary);
}

#software .software-group p {
  font-size: 0.66rem;
  line-height: 1.32;
  color: var(--color-text-secondary);
  margin: 0;
}

#software .software-bridge {
  grid-column: 1 / -1;
  background: var(--neumo-base);
  border-radius: 68px;
  padding: 13px 22px;
  box-shadow: var(--neumo-shadow-inset);
  text-align: center;
}

#software .software-bridge p {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 1000px) {
  #software .software-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
  }

  #software .section-copy {
    max-width: 100%;
    text-align: center;
  }

  #software .software-groups {
    grid-template-columns: 1fr;
  }

  #software .software-group {
    padding: 14px;
  }
}

/* RESPALDO SECTION CONTENT */
#respaldo .support-frame {
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  width: 100%;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
  align-items: center;
}

#respaldo .section-copy {
  max-width: 460px;
}

#respaldo .section-copy .title {
  font-size: clamp(1.55rem, 2.45vw, 2.35rem);
  line-height: 1.05;
  margin-bottom: 12px;
}

#respaldo .section-copy .text {
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 420px;
  margin-bottom: 0;
}

#respaldo .support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#respaldo .support-item {
  background: var(--neumo-base);
  border-radius: 24px;
  padding: 18px 16px;
  box-shadow: var(--neumo-shadow-raised-sm);
  overflow: hidden;
}

#respaldo .support-item strong {
  display: block;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 8px;
}

#respaldo .support-item span {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

#respaldo .support-item p {
  font-size: 0.66rem;
  line-height: 1.32;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 950px) {
  #respaldo .support-frame {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #respaldo .section-copy {
    max-width: 100%;
    text-align: center;
  }

  #respaldo .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* REMAINING SECTIONS BASE CONTENT */
#respaldo .support-frame,
#sectores .sectors-frame,
#proyectos .projects-frame,
#electronika .company-frame,
#contacto .contact-frame {
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  width: 100%;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 22px;
  align-items: center;
}

#respaldo .section-copy,
#sectores .section-copy,
#proyectos .section-copy,
#electronika .section-copy,
#contacto .section-copy {
  max-width: 440px;
}

#respaldo .section-copy .title,
#sectores .section-copy .title,
#proyectos .section-copy .title,
#electronika .section-copy .title,
#contacto .section-copy .title {
  font-size: clamp(1.5rem, 2.35vw, 2.25rem);
  line-height: 1.05;
  margin-bottom: 12px;
}

#respaldo .section-copy .text,
#sectores .section-copy .text,
#proyectos .section-copy .text,
#electronika .section-copy .text,
#contacto .section-copy .text {
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 410px;
  margin-bottom: 0;
}

#respaldo .support-grid,
#sectores .sectors-grid,
#proyectos .projects-grid,
#electronika .company-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#proyectos .projects-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#respaldo .support-item,
#sectores .sectors-grid article,
#proyectos .projects-grid article,
#electronika .company-list div {
  background: var(--neumo-base);
  border-radius: 22px;
  padding: 16px 14px;
  box-shadow: var(--neumo-shadow-raised-sm);
  overflow: hidden;
}

#respaldo .support-item strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 7px;
}

#respaldo .support-item span,
#proyectos .projects-grid span {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}

#sectores h3,
#proyectos h3,
#electronika strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.12;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}

#respaldo p,
#sectores article p,
#proyectos article p,
#electronika .company-list p {
  font-size: 0.66rem;
  line-height: 1.32;
  color: var(--color-text-secondary);
  margin: 0;
}

#contacto .contact-form {
  background: var(--neumo-base);
  border-radius: 28px;
  padding: 22px;
  box-shadow: var(--neumo-shadow-raised-sm);
  display: grid;
  gap: 12px;
  overflow: hidden;
}

#contacto .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#contacto input,
#contacto textarea {
  width: 100%;
  border: none;
  outline: none;
  background: var(--neumo-base);
  border-radius: 18px;
  box-shadow: var(--neumo-shadow-inset);
  padding: 12px 14px;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  color: var(--color-text-primary);
}

#contacto textarea {
  min-height: 82px;
  resize: none;
}

#contacto .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  color: var(--color-text-secondary);
}

#contacto .form-check input {
  width: auto;
  box-shadow: none;
}

@media (max-width: 1000px) {
  #respaldo .support-frame,
  #sectores .sectors-frame,
  #proyectos .projects-frame,
  #electronika .company-frame,
  #contacto .contact-frame {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #respaldo .section-copy,
  #sectores .section-copy,
  #proyectos .section-copy,
  #electronika .section-copy,
  #contacto .section-copy {
    max-width: 100%;
    text-align: center;
  }

  #proyectos .projects-grid {
    grid-template-columns: 1fr;
  }

  #contacto .form-row {
    grid-template-columns: 1fr;
  }
}

.footer__title {
  white-space: nowrap;
}

.footer__links a {
  white-space: normal;
}

@media (max-width: 1200px) {
  .footer__grid {
    grid-template-columns: 1.15fr repeat(5, minmax(95px, 1fr)) !important;
    gap: 18px !important;
  }

  .footer__links a {
    font-size: 0.68rem !important;
  }

  .footer__title {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 820px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
  }
}

/* FOOTER FORCE SINGLE ROW — FINAL OVERRIDE */
@media (min-width: 901px) {
  .footer__grid {
    display: grid !important;
    grid-template-columns: 1.35fr 0.9fr 0.9fr 0.9fr 1.05fr 1.05fr !important;
    gap: 26px !important;
    align-items: start !important;
  }

  .footer__brand {
    grid-column: auto !important;
  }

  .footer__col {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .footer__title {
    white-space: nowrap !important;
  }

  .footer__links {
    gap: 7px !important;
  }

  .footer__links a {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
  }
}

/* FOOTER MAIN SINGLE ROW FIX */
@media (min-width: 901px) {
  .footer__main,
  .footer__grid {
    display: grid !important;
    grid-template-columns: 1.35fr repeat(5, minmax(120px, 1fr)) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  .footer__main > *,
  .footer__grid > * {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .footer__brand,
  .footer__col {
    grid-column: auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 900px) {
  .footer__main,
  .footer__grid {
    grid-template-columns: 1fr !important;
  }
}

/* FOOTER REMOVE INNER WRAPPER — FINAL LAYOUT */
@media (min-width: 901px) {
  .footer__main {
    display: grid !important;
    grid-template-columns: 1.35fr 0.85fr 0.85fr 0.85fr 1.15fr 1.05fr !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .footer__main > * {
    grid-column: auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .footer__brand {
    grid-column: auto !important;
  }

  .footer__col {
    grid-column: auto !important;
  }
}

.footer__nav {
  display: contents !important;
}

@media (max-width: 900px) {
  .footer__main {
    grid-template-columns: 1fr !important;
  }
}

/* FOOTER ECOSYSTEM NEUMORPHISM GRID */
.footer__ecosystem {
  padding: 60px 0;
  background: transparent;
  border: none;
}

.footer__ecosystem-container {
  background: #212121;
  padding: 50px 40px;
  border-radius: 30px;
  box-shadow:
    15px 15px 30px rgba(0, 0, 0, 0.4),
    -10px -10px 30px rgba(255, 255, 255, 0.02);
}

.footer__ecosystem-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
  margin-bottom: 40px;
  text-align: center;
  opacity: 0.6;
}

.footer__ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.footer__ecosystem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(145deg, #262626, #1e1e1e);
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    6px 6px 12px rgba(0, 0, 0, 0.4),
    -4px -4px 12px rgba(255, 255, 255, 0.01);
}

.footer__ecosystem-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #2a2a2a, #212121);
  box-shadow:
    10px 10px 20px rgba(0, 0, 0, 0.5),
    -6px -6px 20px rgba(255, 255, 255, 0.02);
}

.footer__ecosystem-item:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.4),
    inset -4px -4px 8px rgba(255, 255, 255, 0.01);
}

.footer__ecosystem-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 900;
  color: var(--color-accent);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -2px -2px 5px rgba(255, 255, 255, 0.01);
}

.footer__ecosystem-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #a0a0a0;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.footer__ecosystem-item:hover .footer__ecosystem-label {
  color: #fff;
}

@media (max-width: 1200px) {
  .footer__ecosystem-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .footer__ecosystem-container {
    padding: 35px 20px;
    border-radius: 20px;
  }

  .footer__ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* FINAL NEUMORPHIC FOOTER */
.ek-footer {
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 138px 40px;
  background: #111111;
  color: #ffffff;
  overflow: visible !important;
}

.ek-footer,
.ek-footer * {
  box-sizing: border-box;
}

.ek-footer__inner {
  width: min(1260px, 92vw);
  margin: 0 auto;
  border-radius: 30px;
  background: #212121;
  box-shadow:
    18px 18px 36px rgb(18, 18, 18),
    -18px -18px 36px rgb(58, 58, 58);
  padding: 48px 54px 24px;
  overflow: hidden;
  transform: translateY(28px);
}

.ek-footer__main {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 36px;
}

.ek-footer__brand h2 {
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: 0.16em;
  margin: 0 0 16px;
  color: #ffffff;
}

.ek-footer__brand p {
  max-width: 285px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}

.ek-footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.ek-footer__social-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  border: 2px solid #101010;
  background-color: transparent;
  background-image: linear-gradient(145deg, #171717, #2b2b2b);
  box-shadow:
    inset 1px 1px 0 rgba(103, 103, 103, 0.45),
    inset -1px -1px 0 rgba(21, 21, 21, 0.95),
    4px 4px 10px rgba(20, 20, 20, 0.55),
    -4px -4px 10px rgba(63, 63, 63, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #a5a5a5;
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
  z-index: 1;
}

.ek-footer__social-btn::before {
  position: absolute;
  content: "";
  inset: -3px;
  border-radius: 15px;
  background-image: linear-gradient(145deg, #232323, #3f3f3f);
  z-index: -1;
  box-shadow:
    4px 4px 10px rgba(20, 20, 20, 0.38),
    -4px -4px 10px rgba(71, 71, 71, 0.18);
  opacity: 0.42;
}

.ek-footer__social-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
  transition:
    transform 0.28s ease,
    color 0.22s ease,
    filter 0.22s ease;
}

.ek-footer__social-btn:hover {
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(77, 124, 255, 0.18);
  box-shadow:
    inset 1px 1px 0 rgba(119, 119, 119, 0.35),
    inset -1px -1px 0 rgba(16, 16, 16, 0.95),
    5px 5px 12px rgba(16, 16, 16, 0.62),
    -5px -5px 12px rgba(70, 70, 70, 0.2);
}

.ek-footer__social-btn:hover svg {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 4px rgba(77, 124, 255, 0.14));
}

.ek-footer__social-btn:active {
  transform: translateY(1px);
  border-color: rgba(77, 124, 255, 0.14);
  box-shadow:
    inset -1px -1px 0 rgba(74, 74, 74, 0.75),
    inset 1px 1px 0 rgba(17, 17, 17, 1),
    2px 2px 5px rgba(20, 20, 20, 0.45),
    -2px -2px 5px rgba(60, 60, 60, 0.14);
}

.ek-footer__col h3 {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 15px;
  color: #ffffff;
}

.ek-footer__col a {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.7rem;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.ek-footer__col a:hover {
  color: #ffffff;
}

.ek-footer__ecosystem {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 28px;
  margin-bottom: 22px;
}

.ek-footer__ecosystem-title {
  text-align: center;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.56);
  margin: 0 0 20px;
}

.ek-footer__ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.ek-footer__eco-btn {
  position: relative;
  min-height: 31px;
  padding: 0.42rem 0.9rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(to bottom, #171717, #242424);
  border-radius: 9999px;
  border: 1px solid #292929;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 1),
    0 8px 14px rgba(0, 0, 0, 0.38);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1;
}

.ek-footer__eco-btn::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background: linear-gradient(to bottom, #292929, #000000);
  z-index: -1;
  border-radius: 9999px;
  opacity: 1;
}

.ek-footer__eco-btn span {
  white-space: nowrap;
  opacity: 0.86;
}

.ek-footer__eco-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 1),
    0 10px 18px rgba(0, 0, 0, 0.42);
}

.ek-footer__eco-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 5px 10px rgba(0, 0, 0, 0.4);
}

.ek-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.66rem;
}

.ek-footer__bottom p {
  margin: 0;
}

@media (max-width: 1100px) {
  .ek-footer {
    padding: 108px 24px;
  }

  .ek-footer__inner {
    transform: translateY(22px);
  }

  .ek-footer__main {
    grid-template-columns: repeat(3, 1fr);
  }

  .ek-footer__brand {
    grid-column: 1 / -1;
  }

  .ek-footer__ecosystem-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ek-footer {
    padding: 84px 16px;
  }

  .ek-footer__inner {
    width: 100%;
    padding: 34px 22px 20px;
    transform: translateY(17px);
  }

  .ek-footer__main {
    grid-template-columns: 1fr;
  }

  .ek-footer__ecosystem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ek-footer__bottom {
    flex-direction: column;
  }
}

/* FOOTER SOCIAL NEON BLUE INTERACTION */
.ek-footer__social-btn {
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
}

.ek-footer__social-btn:hover {
  transform: translateY(-1px) !important;
  color: #dbeafe !important;
  border-color: rgba(0, 174, 255, 0.72) !important;
  box-shadow:
    inset 1px 1px 0 rgba(140, 210, 255, 0.28),
    inset -1px -1px 0 rgba(5, 12, 24, 0.95),
    0 0 8px rgba(0, 174, 255, 0.38),
    0 0 16px rgba(0, 174, 255, 0.18),
    5px 5px 12px rgba(10, 10, 10, 0.62),
    -5px -5px 12px rgba(70, 70, 70, 0.16) !important;
}

.ek-footer__social-btn:hover::before {
  opacity: 0.55 !important;
  background-image: linear-gradient(145deg, #172033, #2b4a63) !important;
  box-shadow:
    0 0 10px rgba(0, 174, 255, 0.28),
    4px 4px 10px rgba(20, 20, 20, 0.32),
    -4px -4px 10px rgba(71, 71, 71, 0.14) !important;
}

.ek-footer__social-btn:hover svg {
  color: #7dd3fc !important;
  fill: currentColor !important;
  transform: scale(1.05) !important;
  filter: drop-shadow(0 0 4px rgba(0, 174, 255, 0.75))
    drop-shadow(0 0 10px rgba(0, 174, 255, 0.35))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.72)) !important;
}

.ek-footer__social-btn:active {
  transform: translateY(1px) !important;
  border-color: rgba(0, 174, 255, 0.52) !important;
  box-shadow:
    inset 2px 2px 5px rgba(4, 8, 14, 0.95),
    inset -1px -1px 3px rgba(80, 150, 210, 0.25),
    0 0 6px rgba(0, 174, 255, 0.32),
    2px 2px 5px rgba(20, 20, 20, 0.45),
    -2px -2px 5px rgba(60, 60, 60, 0.12) !important;
}

/* FOOTER SOCIAL NEON BLUE — REDUCED 40% */
.ek-footer__social-btn:hover {
  transform: translateY(-1px) !important;
  color: #dbeafe !important;
  border-color: rgba(0, 174, 255, 0.52) !important;
  box-shadow:
    inset 1px 1px 0 rgba(140, 210, 255, 0.18),
    inset -1px -1px 0 rgba(5, 12, 24, 0.95),
    0 0 5px rgba(0, 174, 255, 0.23),
    0 0 10px rgba(0, 174, 255, 0.11),
    5px 5px 12px rgba(10, 10, 10, 0.62),
    -5px -5px 12px rgba(70, 70, 70, 0.12) !important;
}

.ek-footer__social-btn:hover::before {
  opacity: 0.36 !important;
  background-image: linear-gradient(145deg, #172033, #26394a) !important;
  box-shadow:
    0 0 6px rgba(0, 174, 255, 0.17),
    4px 4px 10px rgba(20, 20, 20, 0.32),
    -4px -4px 10px rgba(71, 71, 71, 0.1) !important;
}

.ek-footer__social-btn:hover svg {
  color: #7dd3fc !important;
  fill: currentColor !important;
  transform: scale(1.04) !important;
  filter: drop-shadow(0 0 2px rgba(0, 174, 255, 0.45))
    drop-shadow(0 0 6px rgba(0, 174, 255, 0.21))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.62)) !important;
}

.ek-footer__social-btn:active {
  transform: translateY(1px) !important;
  border-color: rgba(0, 174, 255, 0.34) !important;
  box-shadow:
    inset 2px 2px 5px rgba(4, 8, 14, 0.95),
    inset -1px -1px 3px rgba(80, 150, 210, 0.16),
    0 0 4px rgba(0, 174, 255, 0.19),
    2px 2px 5px rgba(20, 20, 20, 0.45),
    -2px -2px 5px rgba(60, 60, 60, 0.1) !important;
}

/* FOOTER ECOSYSTEM BUTTONS — SOCIAL STYLE YELLOW NEON */
.ek-footer__eco-btn {
  position: relative !important;
  min-height: 31px !important;
  padding: 0.42rem 0.9rem !important;
  border-radius: 13px !important;
  border: 2px solid #101010 !important;
  background-color: transparent !important;
  background-image: linear-gradient(145deg, #171717, #2b2b2b) !important;
  box-shadow:
    inset 1px 1px 0 rgba(103, 103, 103, 0.45),
    inset -1px -1px 0 rgba(21, 21, 21, 0.95),
    4px 4px 10px rgba(20, 20, 20, 0.55),
    -4px -4px 10px rgba(63, 63, 63, 0.22) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
  overflow: visible !important;
}

.ek-footer__eco-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 16px !important;
  background-image: linear-gradient(145deg, #232323, #3f3f3f) !important;
  z-index: -1 !important;
  box-shadow:
    4px 4px 10px rgba(20, 20, 20, 0.38),
    -4px -4px 10px rgba(71, 71, 71, 0.18) !important;
  opacity: 0.42 !important;
}

.ek-footer__eco-btn span {
  white-space: nowrap !important;
  opacity: 0.88 !important;
  position: relative !important;
  z-index: 1 !important;
}

.ek-footer__eco-btn:hover {
  transform: translateY(-1px) !important;
  color: #fff7cc !important;
  border-color: rgba(255, 214, 10, 0.52) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 236, 140, 0.18),
    inset -1px -1px 0 rgba(24, 18, 5, 0.95),
    0 0 5px rgba(255, 214, 10, 0.23),
    0 0 10px rgba(255, 214, 10, 0.11),
    5px 5px 12px rgba(10, 10, 10, 0.62),
    -5px -5px 12px rgba(70, 70, 70, 0.12) !important;
}

.ek-footer__eco-btn:hover::before {
  opacity: 0.36 !important;
  background-image: linear-gradient(145deg, #2f2a17, #4a3f18) !important;
  box-shadow:
    0 0 6px rgba(255, 214, 10, 0.17),
    4px 4px 10px rgba(20, 20, 20, 0.32),
    -4px -4px 10px rgba(71, 71, 71, 0.1) !important;
}

.ek-footer__eco-btn:hover span {
  opacity: 1 !important;
  text-shadow:
    0 0 3px rgba(255, 214, 10, 0.45),
    0 0 7px rgba(255, 214, 10, 0.18) !important;
}

.ek-footer__eco-btn:active {
  transform: translateY(1px) !important;
  border-color: rgba(255, 214, 10, 0.34) !important;
  box-shadow:
    inset 2px 2px 5px rgba(14, 10, 4, 0.95),
    inset -1px -1px 3px rgba(210, 170, 80, 0.16),
    0 0 4px rgba(255, 214, 10, 0.19),
    2px 2px 5px rgba(20, 20, 20, 0.45),
    -2px -2px 5px rgba(60, 60, 60, 0.1) !important;
}

/* FOOTER BRAND LOGO IMAGE */
.ek-footer__brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  max-width: 220px;
  margin: 0 0 16px;
  text-decoration: none;
}

.ek-footer__brand-logo img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 700px) {
  .ek-footer__brand-logo img {
    height: 30px;
    max-width: 190px;
  }
}

/* Electronika Intro Random Image Cinematic */

.intro-screen {
  position: fixed;
  overflow: hidden;
  background-color: #000;
}

.intro-screen__container {
  position: relative;
  z-index: 10;
}

.intro-cinematic-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #000;
}

.intro-cinematic-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

.intro-cinematic-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.intro-cinematic-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* Favor right-heavy composition */
  transform: scale(1);
  transition: transform 16s ease-out;
}

.intro-cinematic-slide.is-active .intro-cinematic-media {
  animation: ken-burns-subtle 20s ease-out forwards;
}

@keyframes ken-burns-subtle {
  0% {
    transform: scale(1) translateX(0);
  }

  100% {
    transform: scale(1.04) translateX(-10px);
  }
}

.intro-cinematic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.intro-cinematic-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro-cinematic-media,
  .intro-cinematic-slide.is-active .intro-cinematic-media {
    animation: none !important;
    transition: opacity 0.5s linear !important;
    transform: none !important;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .intro-cinematic-media {
    object-position: 70% center;
    /* Adjust focus for narrower screens */
  }

  .intro-cinematic-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }
}

/* Intro Section Refinements */
.intro-screen__btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  transition: all 0.3s ease !important;
}

.intro-screen__btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffd43b !important;
  color: #ffd43b !important;
  box-shadow: 0 0 15px rgba(255, 212, 59, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Electronika Hero Background */
#hero {
  position: relative;
  overflow: hidden;
  background-color: #050505;
  /* Deep professional base */
}

#hero::before {
  content: "";
  position: absolute;
  top: -20px;
  /* Overscan to hide blurred edges */
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-image: url("../webp/tecnologia_visual_1.webp");
  background-size: cover;
  background-position: center;
  filter: blur(6px);
  opacity: 0.75;
  z-index: 1;
  pointer-events: none;
}

#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 2;
  pointer-events: none;
}

#hero .section__inner {
  position: relative;
  z-index: 10;
}

/* Ensure hero text remains white/bright if needed */
#hero .hero-title,
#hero .text {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

#hero .eyebrow {
  color: #ffd43b;
  /* Amber accent */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Electronika Hero Three Neumorphic Buttons */
.hero__actions {
  display: flex;
  gap: 12px;
  max-width: 480px;
  /* Preserve previous 2-button width */
  flex-wrap: wrap;
}

.btn--hero {
  flex: 1;
  min-width: 130px;
  padding: 11px 16px !important;
  /* 30% height reduction from 16px */
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  text-align: center;
  border-radius: 999px;
  background-color: var(--neumo-base) !important;
  color: var(--color-text-primary) !important;
  box-shadow:
    2.5px 2.5px 5px rgba(161, 161, 161, 0.38),
    -2.5px -2.5px 5px rgba(255, 255, 255, 0.76) !important;
  /* Reduced current blur/offset by an additional 15% */
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.btn--hero:hover {
  box-shadow: var(--neumo-shadow-inset) !important;
  transform: translateY(1px);
  color: var(--color-accent) !important;
}

/* Specific button accents if needed, keeping them unified */
.hero-btn-hardware,
.hero-btn-software,
.hero-btn-contacto {
  background: linear-gradient(145deg, #f0f0f0, #e6e6e6) !important;
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .btn--hero {
    width: 100%;
  }
}

/* Electronika Hero Title and Video Placeholder */

/* Reduce hero title size by 35% (65% of original) */
#hero .hero-title {
  font-size: clamp(2.08rem, 3.9vw, 3.25rem) !important;
  max-width: 700px;
}

#hero .content-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(24px, 3vw, 56px);
  padding-right: 400px;
}

.hero-video-placeholder {
  position: absolute;
  right: 60px;
  bottom: -60px;
  width: 351px;
  aspect-ratio: 9 / 16;
  z-index: 5;
  pointer-events: none;
}

.hero-video-inner {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

/* Subtle indicator of video area */
.hero-video-inner::before {
  content: "Video 9:16";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Sequential Mobile Hero Layout - Final Override */
/* Force override of any conflicting hero media queries */
@media (max-width: 1199px) {
  #hero.section,
  #hero.section--hero,
  #hero .section__inner {
    min-height: auto !important;
    height: auto !important;
    padding-top: calc(var(--header-height) + 45px) !important;
    /* Adjusted to 45px gap as requested */
    padding-bottom: 80px !important;
  }

  #hero .content-frame {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero__content {
    max-width: 100% !important;
    transform: none !important;
    margin-bottom: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero__actions {
    justify-content: center !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .hero-video-placeholder {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 60px !important;
    width: 300px !important;
    /* Enlarged for tablet */
    display: flex !important;
    align-self: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10 !important;
  }
}

@media (max-width: 768px) {
  #hero.section,
  #hero.section--hero,
  #hero .section__inner {
    padding-top: calc(var(--header-height) + 40px) !important;
    /* Adjusted to 40px gap as requested */
  }

  .hero__actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .btn--hero {
    width: 100% !important;
    max-width: 280px !important;
    flex: 0 0 auto !important;
  }

  .hero-video-placeholder {
    width: clamp(220px, 65vw, 300px) !important;
    /* Enlarged for mobile */
    margin-top: 50px !important;
  }
}

/* 2. Tablet & Mobile Mode (1199px and below) */
@media (max-width: 1199px) {
  .menu-toggle {
    display: flex;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Desktop Nav is hidden, Mobile Nav is controlled by .nav--active */
  .nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-height));
    background-color: var(--neumo-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 32px 24px 60px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-16px);
    transition:
      opacity 0.28s ease,
      visibility 0.28s ease,
      transform 0.28s ease;
    z-index: 1000;
  }

  .nav.nav--active,
  .nav--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .header__actions .btn {
    display: none !important;
  }

  /* Ensure site content takes over cleanly */
  body.intro-scroll-locked .site-content {
    transform: translateX(0) !important;
    position: relative !important;
    height: auto !important;
    overflow-y: visible !important;
  }

  /* Lock body to prevent bounce into empty space */
  body.intro-scroll-locked {
    overflow-x: hidden;
    height: auto !important;
  }
}

/* HERO TITLE TYPE ANIMATION — H1 ONLY */
.hero-title-animated {
  min-height: 3.18em !important;
  height: 3.18em !important;
  max-height: 3.18em !important;
  display: block;
  overflow: hidden;
}

.hero-title-animated__text {
  display: block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  max-width: 100%;
  min-height: 3.18em;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  transition: opacity 0.38s ease;
}

.hero-title-word {
  display: inline-block;
  white-space: nowrap;
}

.hero-title-space {
  display: inline;
  white-space: normal;
}

.hero-title-char {
  display: inline-block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  transform-origin: center bottom;
  animation: heroTitleCharSettle 0.32s ease-out both;
}

.hero-title-cursor {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 4px;
  background: currentColor;
  opacity: 0.55;
  transform: translateY(0.08em);
  animation: heroTitleCursorBlink 0.9s steps(2, start) infinite;
}

@keyframes heroTitleCharSettle {
  0% {
    opacity: 0;
    transform: translateY(-0.1em) scale(1.18);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroTitleCursorBlink {
  0%,
  45% {
    opacity: 0.55;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .hero-title-animated {
    min-height: 4.35em !important;
    height: 4.35em !important;
    max-height: 4.35em !important;
  }

  .hero-title-animated__text {
    min-height: 4.35em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-char,
  .hero-title-cursor {
    animation: none !important;
  }
}
/* PROBLEMA EDITORIAL CARDS — APPROVED PREVIEW */
#problema .problem-showcase {
  height: 360px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  position: relative;
  width: 100%;
  max-width: 730px;
  margin-left: auto;
}

#problema .problem-card {
  position: relative;
  min-width: 0;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(145deg, #ececec, #d8d8d8);
  box-shadow:
    10px 10px 22px rgba(161, 161, 161, 0.42),
    -10px -10px 22px rgba(255, 255, 255, 0.9);
  isolation: isolate;
  transform: translateY(0);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: problemCardRise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#problema .problem-card:nth-child(1) {
  animation-delay: 40ms;
}

#problema .problem-card:nth-child(2) {
  animation-delay: 100ms;
}

#problema .problem-card:nth-child(3) {
  animation-delay: 160ms;
}

#problema .problem-card:nth-child(4) {
  animation-delay: 220ms;
}

#problema .problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62),
      rgba(255, 255, 255, 0.08) 42%,
      rgba(0, 0, 0, 0.05)
    ),
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.75),
      transparent 26%
    );
  z-index: -1;
  opacity: 0.9;
}

#problema .problem-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 16px 16px;
  height: 42%;
  border-radius: 22px;
  background: repeating-linear-gradient(
    90deg,
    rgba(30, 64, 175, 0.07) 0,
    rgba(30, 64, 175, 0.07) 1px,
    transparent 1px,
    transparent 8px
  );
  opacity: 0.34;
  filter: blur(0.2px);
  pointer-events: none;
}

#problema .problem-card:hover {
  transform: translateY(-10px);
  box-shadow:
    14px 14px 26px rgba(161, 161, 161, 0.48),
    -12px -12px 24px rgba(255, 255, 255, 0.94);
}

#problema .problem-card__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 20px 22px;
  position: relative;
  z-index: 2;
}

#problema .problem-card__number {
  display: block;
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.09em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 12px 24px rgba(15, 23, 42, 0.08);
  margin-bottom: 12px;
}

#problema .problem-card__content {
  margin-top: auto;
}

#problema .problem-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30, 64, 175, 0.78);
  margin-bottom: 10px;
}

#problema .problem-card__kicker::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.45);
}

#problema .problem-card h3 {
  font-size: 0.92rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

#problema .problem-card p {
  font-size: 0.68rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-text-secondary);
  max-width: 160px;
  margin: 0;
}

#problema .problem-card--warm {
  background: linear-gradient(145deg, #ead8ac, #d8c28c);
}

#problema .problem-card--blue {
  background: linear-gradient(145deg, #dce4f0, #c8d2e0);
}

#problema .problem-card--neutral {
  background: linear-gradient(145deg, #eeeeee, #d7d7d7);
}

#problema .problem-card--dark {
  background: linear-gradient(145deg, #d5d9dc, #bfc5c9);
}

@keyframes problemCardRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@media (max-width: 1100px) {
  #problema .problem-showcase {
    height: 300px;
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  #problema .problem-showcase {
    height: auto;
    grid-template-columns: 1fr 1fr;
  }

  #problema .problem-card {
    min-height: 230px;
  }
}

@media (max-width: 760px) {
  #problema .problem-bridge {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    margin-top: 26px;
    bottom: auto;
  }
}

/* METHOD ELECTRONIKA 360 FINAL ACCORDION — APPROVED */
#metodo {
  --cream: #f6ebcf;
  --orange: #f27a1a;
  --navy: #111521;
  --cyan: #56bed0;
}

#metodo .method-frame {
  width: min(1180px, 92vw);
  height: var(--standard-section-frame-lock) !important;
  min-height: var(--standard-section-frame-lock) !important;
  max-height: var(--standard-section-frame-lock) !important;
  display: grid;
  grid-template-columns: minmax(620px, 1.28fr) minmax(360px, 0.72fr);
  gap: 58px;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

#metodo .method-visual {
  position: relative;
  height: 608px;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 74% 18%,
      rgba(86, 190, 208, 0.18),
      transparent 26%
    ),
    linear-gradient(145deg, #0d5568, #082a36 72%);
  box-shadow:
    18px 18px 38px rgba(125, 132, 145, 0.26),
    -18px -18px 38px rgba(255, 255, 255, 0.75);
  isolation: isolate;
}

#metodo .method-visual::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 150px;
  transform: translateY(-50%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      transparent 22%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    linear-gradient(90deg, #0d5d73, #0a4659 45%, #0d5d73);
  box-shadow:
    inset 0 16px 30px rgba(255, 255, 255, 0.12),
    inset 0 -18px 36px rgba(0, 0, 0, 0.28),
    0 16px 26px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#metodo .method-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 88px
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 88px
    );
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

#metodo .method-ribbons {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

#metodo .method-ribbon {
  --num-x: -0.13em;
  --num-x-active: -0.03em;
  --icon-x: 0em;
  --title-x: 0em;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  font: inherit;
  transition:
    flex 560ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms ease;
  isolation: isolate;
}

#metodo .method-ribbon.is-active {
  flex: 1.7 1 0;
  filter: saturate(1.08);
}

#metodo .method-ribbon:nth-child(1) {
  --num-x: -0.08em;
  --num-x-active: -0.015em;
  --icon-x: -0.14em;
  --title-x: -0.11em;
}

#metodo .method-ribbon:nth-child(2) {
  --num-x: -0.13em;
  --num-x-active: -0.03em;
  --icon-x: 0em;
  --title-x: 0em;
}

#metodo .method-ribbon:nth-child(3) {
  --num-x: -0.095em;
  --num-x-active: -0.02em;
  --icon-x: -0.145em;
  --title-x: -0.115em;
}

#metodo .method-ribbon:nth-child(4) {
  --num-x: -0.13em;
  --num-x-active: -0.03em;
  --icon-x: -0.12em;
  --title-x: -0.1em;
}

#metodo .method-ribbon:nth-child(5) {
  --num-x: -0.1em;
  --num-x-active: -0.015em;
  --icon-x: 0em;
  --title-x: 0em;
}

#metodo .method-ribbon__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--ribbon-color);
  opacity: 0.96;
  box-shadow:
    inset 16px 0 24px rgba(255, 255, 255, 0.08),
    inset -16px 0 24px rgba(0, 0, 0, 0.12);
  transform-origin: center;
  z-index: 1;
}

#metodo .method-ribbon__face {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 230px;
  transform: translateY(-50%);
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 34px 22px;
  color: var(--ribbon-text);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2),
      transparent 22%,
      rgba(0, 0, 0, 0.1)
    ),
    var(--ribbon-color);
  border-radius: 62px;
  box-shadow:
    16px 18px 30px rgba(0, 0, 0, 0.26),
    inset 10px 0 18px rgba(255, 255, 255, 0.12),
    inset -10px 0 18px rgba(0, 0, 0, 0.16);
  z-index: 3;
  overflow: hidden;
  transition:
    height 560ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 520ms ease,
    padding 520ms ease;
}

#metodo .method-ribbon.is-active .method-ribbon__face {
  left: 16px;
  right: 16px;
  height: 304px;
  border-radius: 72px;
  padding: 40px 30px;
}

#metodo .method-ribbon__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.95;
  transform: translateX(var(--icon-x));
}

#metodo .method-ribbon__number {
  display: block;
  width: auto;
  min-width: 0;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 13px;
  font-size: clamp(2.55rem, 4.25vw, 3.7rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  transform: translateX(var(--num-x));
}

#metodo .method-ribbon__title {
  display: block;
  width: auto;
  justify-self: center;
  max-width: 100%;
  font-size: clamp(0.56rem, 0.72vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.075em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.05;
  opacity: 0.96;
  white-space: nowrap;
  overflow: visible;
  transform: translateX(var(--title-x));
}

#metodo .method-ribbon__desc {
  display: block;
  justify-self: center;
  max-width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.32;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  transition:
    max-height 520ms ease,
    opacity 420ms ease,
    margin 420ms ease;
}

#metodo .method-ribbon.is-active .method-ribbon__number {
  transform: translateX(var(--num-x-active));
}

#metodo .method-ribbon.is-active .method-ribbon__title {
  font-size: clamp(0.62rem, 0.82vw, 0.74rem);
  letter-spacing: 0.08em;
}

#metodo .method-ribbon.is-active .method-ribbon__desc {
  max-height: 92px;
  opacity: 0.86;
  margin-top: 12px;
}

#metodo .method-copy {
  max-width: 455px;
  justify-self: end;
  text-align: left;
  padding-right: 4px;
}

#metodo .method-copy .title,
#metodo .method-copy h2 {
  font-size: clamp(1.7rem, 2.65vw, 2.55rem);
  line-height: 1.06;
}

@media (max-width: 1180px) {
  #metodo .method-frame {
    grid-template-columns: 1fr;
    gap: 28px;
    align-content: center;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #metodo .method-copy {
    order: 1;
    max-width: 760px;
    text-align: center;
    justify-self: center;
  }

  #metodo .method-visual {
    order: 2;
    width: min(820px, 100%);
    height: 491px;
    justify-self: center;
  }

  #metodo .method-ribbon__face {
    left: 9px;
    right: 9px;
    height: 202px;
    border-radius: 56px;
    padding-inline: 20px;
  }

  #metodo .method-ribbon.is-active .method-ribbon__face {
    left: 12px;
    right: 12px;
    height: 263px;
    border-radius: 66px;
    padding-inline: 26px;
  }

  #metodo .method-ribbon__number {
    font-size: clamp(2.1rem, 5vw, 3.15rem);
  }
}

@media (max-width: 760px) {
  #metodo.section {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    padding: 76px 18px;
    align-items: flex-start;
  }

  #metodo .method-frame {
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible;
  }

  #metodo .method-copy {
    text-align: center;
  }

  #metodo .method-visual {
    height: auto !important;
    min-height: 610px;
    border-radius: 28px;
    padding: 22px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #metodo .method-visual::before,
  #metodo .method-visual::after {
    display: none;
  }

  #metodo .method-ribbons {
    position: relative;
    inset: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #metodo .method-ribbon,
  #metodo .method-ribbon.is-active {
    width: 100%;
    height: 112px;
    min-width: 0;
    border-radius: 24px;
    overflow: hidden;
  }

  #metodo .method-ribbon__track {
    display: none;
  }

  #metodo .method-ribbon__face,
  #metodo .method-ribbon.is-active .method-ribbon__face {
    position: relative;
    inset: auto;
    height: 100%;
    transform: none;
    border-radius: 24px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  #metodo .method-ribbon__icon {
    display: none;
  }

  #metodo .method-ribbon__number {
    grid-row: 1 / span 2;
    width: 2.08ch;
    margin: 0;
    font-size: 1.9rem;
    text-align: center;
    transform: translateX(0);
  }

  #metodo .method-ribbon__title {
    white-space: normal;
    font-size: 0.78rem;
    transform: translateX(0);
    justify-self: start;
  }

  #metodo .method-ribbon__desc,
  #metodo .method-ribbon.is-active .method-ribbon__desc {
    max-height: none;
    opacity: 0.82;
    margin: 6px 0 0;
    font-size: 0.62rem;
    text-align: left;
    justify-self: start;
  }
}

/* =========================================================
   FAST FIX — Método Electronika 360 en escala de grises
   Fecha: 2026-05-16
   Objetivo: neutralizar paleta vistosa sin alterar layout
   ========================================================= */

#metodo .method-ribbon:nth-child(1) {
  --ribbon-color: #e8e6dc !important;
  --ribbon-text: #111827 !important;
}

#metodo .method-ribbon:nth-child(2) {
  --ribbon-color: #d3d4d6 !important;
  --ribbon-text: #111827 !important;
}

#metodo .method-ribbon:nth-child(3) {
  --ribbon-color: #161b24 !important;
  --ribbon-text: #f7f7ef !important;
}

#metodo .method-ribbon:nth-child(4) {
  --ribbon-color: #aeb5bb !important;
  --ribbon-text: #111827 !important;
}

#metodo .method-ribbon:nth-child(5) {
  --ribbon-color: #3a4248 !important;
  --ribbon-text: #f7f7ef !important;
}

#metodo .method-ribbon__track {
  background: var(--ribbon-color) !important;
}

#metodo .method-ribbon__face {
  color: var(--ribbon-text) !important;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.16),
    rgba(0, 0, 0, 0.1)
  ) !important;
  box-shadow:
    14px 18px 28px rgba(0, 0, 0, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

#metodo .method-ribbon:hover .method-ribbon__face,
#metodo .method-ribbon.is-active .method-ribbon__face {
  box-shadow:
    18px 22px 34px rgba(0, 0, 0, 0.22),
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
}

#metodo .method-ribbon__number,
#metodo .method-ribbon__title,
#metodo .method-ribbon__desc,
#metodo .method-ribbon__icon {
  color: var(--ribbon-text) !important;
}

/* PROBLEMA NUMBERS SEQUENCE ANIMATION — APPROVED */
#problema .problem-card__number {
  display: inline-block;
  transform-origin: center center;
  will-change: transform, filter;
  -webkit-text-stroke: 0.65px rgba(90, 96, 110, 0.24);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 1px rgba(70, 76, 88, 0.34),
    0 10px 24px rgba(70, 76, 88, 0.18);
  animation: problemNumberPulse 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

#problema .problem-card:nth-child(1) .problem-card__number {
  animation-delay: 0s;
}

#problema .problem-card:nth-child(2) .problem-card__number {
  animation-delay: 1.25s;
}

#problema .problem-card:nth-child(3) .problem-card__number {
  animation-delay: 2.5s;
}

#problema .problem-card:nth-child(4) .problem-card__number {
  animation-delay: 3.75s;
}

@keyframes problemNumberPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  7% {
    transform: scale(1.16);
    filter: brightness(1.08);
  }

  14% {
    transform: scale(1);
    filter: brightness(1);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #problema .problem-card__number {
    animation: none;
  }
}

/* SECTION 05 HARDWARE DARK BACKGROUND — APPROVED */
#soluciones {
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.045),
      transparent 30%
    ),
    linear-gradient(180deg, #101010 0%, #0b0b0b 100%) !important;
}

#soluciones .ek-hardware-section {
  background: linear-gradient(145deg, #1d1d1d, #141414) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    18px 18px 42px rgba(0, 0, 0, 0.72),
    -10px -10px 28px rgba(255, 255, 255, 0.035),
    inset 1px 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#soluciones .ek-switch {
  background: linear-gradient(145deg, #242424, #171717) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.55),
    -4px -4px 10px rgba(255, 255, 255, 0.035) !important;
}

#soluciones h2,
#soluciones h3,
#soluciones p,
#soluciones span {
  color-scheme: dark;
}

/* SECTION 05 HARDWARE NEUMORPHISM EMPHASIS — APPROVED */
#soluciones {
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.035),
      transparent 32%
    ),
    linear-gradient(180deg, #0b0b0b 0%, #050505 100%) !important;
}

#soluciones .ek-hardware-section {
  background: linear-gradient(145deg, #202020, #141414) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    16px 16px 34px rgba(0, 0, 0, 0.88),
    -8px -8px 24px rgba(255, 255, 255, 0.045),
    inset 1px 1px 0 rgba(255, 255, 255, 0.055),
    inset -1px -1px 0 rgba(0, 0, 0, 0.65) !important;
}

#soluciones .ek-visual-card {
  background: linear-gradient(145deg, #1d1d1d, #101010) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    10px 10px 24px rgba(0, 0, 0, 0.82),
    -6px -6px 18px rgba(255, 255, 255, 0.035),
    inset 1px 1px 0 rgba(255, 255, 255, 0.045),
    inset -1px -1px 0 rgba(0, 0, 0, 0.62) !important;
}

#soluciones .ek-switch {
  background: linear-gradient(145deg, #242424, #171717) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    7px 7px 16px rgba(0, 0, 0, 0.78),
    -4px -4px 12px rgba(255, 255, 255, 0.04),
    inset 1px 1px 0 rgba(255, 255, 255, 0.045),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
}

#soluciones .ek-switch.is-active {
  box-shadow:
    0 0 0 1px rgba(226, 205, 65, 0.46),
    8px 8px 18px rgba(0, 0, 0, 0.82),
    -4px -4px 14px rgba(255, 255, 255, 0.045),
    0 0 24px rgba(226, 205, 65, 0.16) !important;
}

#soluciones .ek-interactive-label {
  background: linear-gradient(145deg, #232323, #151515) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.78),
    -3px -3px 10px rgba(255, 255, 255, 0.035),
    inset 1px 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* SECTION 05 HARDWARE NEUMORPHISM WHITE LIGHT — FINAL */
#soluciones .ek-hardware-section {
  background: linear-gradient(
    145deg,
    #242424 0%,
    #161616 58%,
    #111111 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    24px 24px 46px rgba(0, 0, 0, 0.92),
    -18px -18px 38px rgba(255, 255, 255, 0.13),
    0 0 42px rgba(255, 255, 255, 0.055),
    inset 2px 2px 4px rgba(255, 255, 255, 0.105),
    inset -2px -2px 5px rgba(0, 0, 0, 0.72) !important;
}

#soluciones .ek-visual-card {
  background: linear-gradient(145deg, #232323 0%, #141414 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    15px 15px 30px rgba(0, 0, 0, 0.86),
    -12px -12px 24px rgba(255, 255, 255, 0.11),
    inset 2px 2px 4px rgba(255, 255, 255, 0.095),
    inset -2px -2px 5px rgba(0, 0, 0, 0.68) !important;
}

#soluciones .ek-switch {
  background: linear-gradient(145deg, #292929 0%, #171717 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    9px 9px 18px rgba(0, 0, 0, 0.82),
    -7px -7px 15px rgba(255, 255, 255, 0.12),
    inset 1px 1px 2px rgba(255, 255, 255, 0.105),
    inset -1px -1px 3px rgba(0, 0, 0, 0.68) !important;
}

#soluciones .ek-switch.is-active {
  background: linear-gradient(145deg, #2d2b22 0%, #181713 100%) !important;
  border: 1px solid rgba(226, 205, 65, 0.74) !important;
  box-shadow:
    0 0 0 1px rgba(226, 205, 65, 0.42),
    10px 10px 20px rgba(0, 0, 0, 0.84),
    -7px -7px 16px rgba(255, 255, 255, 0.13),
    0 0 30px rgba(226, 205, 65, 0.25),
    inset 1px 1px 2px rgba(255, 255, 255, 0.12),
    inset -1px -1px 3px rgba(0, 0, 0, 0.68) !important;
}

#soluciones .ek-interactive-label {
  background: linear-gradient(145deg, #282828 0%, #161616 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    7px 7px 15px rgba(0, 0, 0, 0.82),
    -6px -6px 13px rgba(255, 255, 255, 0.115),
    inset 1px 1px 2px rgba(255, 255, 255, 0.105),
    inset -1px -1px 3px rgba(0, 0, 0, 0.66) !important;
}

/* SECTION 05 MORE INFO BUTTON — APPROVED */
#soluciones .ek-more-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 38px;
  margin-top: 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(145deg, #242424, #151515);
  border: 1px solid rgba(255, 255, 255, 0.105);
  box-shadow:
    7px 7px 16px rgba(0, 0, 0, 0.82),
    -5px -5px 13px rgba(255, 255, 255, 0.105),
    inset 1px 1px 2px rgba(255, 255, 255, 0.08),
    inset -1px -1px 3px rgba(0, 0, 0, 0.68);
  opacity: 0;
  transform: translateY(8px);
  animation: ekMoreInfoIn 420ms ease forwards;
  transition:
    color 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

#soluciones .ek-more-info:hover,
#soluciones .ek-more-info:focus-visible {
  color: #ffffff;
  border-color: rgba(226, 205, 65, 0.68);
  transform: translateY(5px);
  box-shadow:
    0 0 0 1px rgba(226, 205, 65, 0.36),
    8px 8px 18px rgba(0, 0, 0, 0.86),
    -5px -5px 14px rgba(255, 255, 255, 0.12),
    0 0 28px rgba(226, 205, 65, 0.26),
    inset 1px 1px 2px rgba(255, 255, 255, 0.1),
    inset -1px -1px 3px rgba(0, 0, 0, 0.68);
}

@keyframes ekMoreInfoIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@media (max-width: 760px) {
  #soluciones .ek-more-info {
    width: 126px;
    height: 36px;
    margin-top: 22px;
    font-size: 0.68rem;
  }
}

/* SECTION 05 MORE INFO BUTTON VISIBILITY — APPROVED */
#soluciones .ek-more-info.is-hidden {
  display: none !important;
}

/* SECTION 06 SOFTWARE MORE INFO BUTTON — APPROVED */
#software .ek-more-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 38px;
  margin-top: 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.78);
  background: linear-gradient(145deg, #f8f8f9, #dddddf);
  border: 1px solid rgba(180, 180, 190, 0.55);
  box-shadow:
    7px 7px 16px rgba(190, 190, 200, 0.48),
    -7px -7px 16px rgba(255, 255, 255, 0.96),
    inset 1px 1px 2px rgba(255, 255, 255, 0.92),
    inset -1px -1px 3px rgba(185, 185, 195, 0.48);
  opacity: 0;
  transform: translateY(8px);
  animation: ekSoftwareMoreInfoIn 420ms ease forwards;
  transition:
    color 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

#software .ek-more-info:hover,
#software .ek-more-info:focus-visible {
  color: #0b3d91;
  border-color: rgba(47, 140, 255, 0.62);
  transform: translateY(5px);
  box-shadow:
    0 0 0 1px rgba(47, 140, 255, 0.26),
    8px 8px 18px rgba(190, 190, 200, 0.54),
    -7px -7px 18px rgba(255, 255, 255, 0.98),
    0 0 24px rgba(47, 140, 255, 0.22),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -1px -1px 3px rgba(47, 140, 255, 0.14);
}

#software .ek-more-info.is-hidden {
  display: none !important;
}

@keyframes ekSoftwareMoreInfoIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@media (max-width: 760px) {
  #software .ek-more-info {
    width: 126px;
    height: 36px;
    margin-top: 22px;
    font-size: 0.68rem;
  }
}

/* SECTION 06 SOFTWARE BACKGROUND TEST — #468faf */
#software {
  background: #468faf !important;
}

/* SECTION 06 SOFTWARE — NEUMORPHISM REFINED FOR #468faf */
#software {
  background: #468faf !important;
}

#software .ek-software-section {
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  background: linear-gradient(145deg, #edf3f7 0%, #f8fbfd 100%) !important;
  box-shadow:
    20px 20px 27px #3c7a95,
    -20px -20px 27px #51a4c9,
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(0, 0, 0, 0.05) !important;
}

#software .ek-interactive-label {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: linear-gradient(145deg, #eef4f8 0%, #e0e8ee 100%) !important;
  box-shadow:
    6px 6px 12px rgba(60, 122, 149, 0.18),
    -6px -6px 12px rgba(255, 255, 255, 0.78),
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04) !important;
}

#software .ek-visual-card {
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  background: linear-gradient(145deg, #e7edf2 0%, #f7fbfd 100%) !important;
  box-shadow:
    10px 10px 18px rgba(60, 122, 149, 0.18),
    -10px -10px 18px rgba(255, 255, 255, 0.84),
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04) !important;
}

#software .ek-switch {
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  background: linear-gradient(145deg, #edf3f7 0%, #dde6ec 100%) !important;
  box-shadow:
    7px 7px 14px rgba(60, 122, 149, 0.18),
    -7px -7px 14px rgba(255, 255, 255, 0.9),
    inset 1px 1px 0 rgba(255, 255, 255, 0.78),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04) !important;
}

#software .ek-switch.is-active {
  border: 1px solid rgba(71, 145, 255, 0.7) !important;
  background: linear-gradient(145deg, #eef5fa 0%, #dfe9f1 100%) !important;
  box-shadow:
    7px 7px 14px rgba(60, 122, 149, 0.18),
    -7px -7px 14px rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(71, 145, 255, 0.2),
    0 0 14px rgba(71, 145, 255, 0.16),
    inset 1px 1px 0 rgba(255, 255, 255, 0.8),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04) !important;
}

#software .ek-more-info {
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  background: linear-gradient(145deg, #edf3f7 0%, #dde6ec 100%) !important;
  box-shadow:
    7px 7px 14px rgba(60, 122, 149, 0.18),
    -7px -7px 14px rgba(255, 255, 255, 0.9),
    inset 1px 1px 0 rgba(255, 255, 255, 0.78),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04) !important;
}

#software .ek-more-info:hover,
#software .ek-more-info:focus-visible {
  border-color: rgba(71, 145, 255, 0.7) !important;
  box-shadow:
    7px 7px 14px rgba(60, 122, 149, 0.18),
    -7px -7px 14px rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(71, 145, 255, 0.2),
    0 0 14px rgba(71, 145, 255, 0.16),
    inset 1px 1px 0 rgba(255, 255, 255, 0.8),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04) !important;
}

/* SECTION 06 SOFTWARE — STRONG NEUMORPHISM TEST #468faf */
#software {
  background: #468faf !important;
}

#software .ek-software-section {
  background: #468faf !important;
  border: 1px solid rgba(0, 0, 0, 0.26) !important;
  box-shadow:
    20px 20px 18px #32677e,
    -20px -20px 18px #5ab7e0,
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.16) !important;
}

#software .ek-interactive-label {
  background: linear-gradient(145deg, #4c98b8, #3f819e) !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  box-shadow:
    6px 6px 10px #356f88,
    -6px -6px 10px #5dc0ea,
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

#software .ek-visual-card {
  background: linear-gradient(145deg, #4c98b8, #3f819e) !important;
  border: 1px solid rgba(0, 0, 0, 0.24) !important;
  box-shadow:
    12px 12px 16px #356f88,
    -12px -12px 16px #5dc0ea,
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

#software .ek-switch {
  background: linear-gradient(145deg, #4c98b8, #3f819e) !important;
  border: 1px solid rgba(0, 0, 0, 0.24) !important;
  box-shadow:
    7px 7px 10px #356f88,
    -7px -7px 10px #5dc0ea,
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

#software .ek-switch.is-active {
  background: linear-gradient(145deg, #51a1c2, #3d7c98) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    7px 7px 10px #32677e,
    -7px -7px 10px #62c9f5,
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 255, 255, 0.24),
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

#software .ek-more-info {
  background: linear-gradient(145deg, #4c98b8, #3f819e) !important;
  border: 1px solid rgba(0, 0, 0, 0.24) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    7px 7px 10px #356f88,
    -7px -7px 10px #5dc0ea,
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

#software .ek-more-info:hover,
#software .ek-more-info:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
  box-shadow:
    7px 7px 10px #32677e,
    -7px -7px 10px #62c9f5,
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 255, 255, 0.24),
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset -1px -1px 0 rgba(0, 0, 0, 0.14) !important;
}

/* RESPALDO PAPER IMAGE SECTION — APPROVED */
#respaldo {
  background: #ffffff !important;
}

#respaldo .section__inner {
  min-height: inherit;
}

#respaldo .respaldo-paper-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#respaldo .respaldo-paper-stage {
  position: relative;
  width: min(1500px, 100%);
  aspect-ratio: 16 / 9;
  min-height: 520px;
  max-height: 760px;
  overflow: visible;
  isolation: isolate;
}

#respaldo .respaldo-paper-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

#respaldo .respaldo-paper-copy {
  position: absolute;
  left: 16.7%;
  top: 31.2%;
  width: 25.8%;
  z-index: 2;
  color: #111827;
  transform: translateY(-56px);
}

#respaldo .respaldo-paper-eyebrow {
  display: block;
  margin-bottom: 2.2%;
  font-size: clamp(0.58rem, 0.72vw, 0.78rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #164ab8;
  position: relative;
  left: 235px;
}

#respaldo .respaldo-paper-eyebrow::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 15px;
  border-radius: 999px;
  background: #111827;
  margin-left: 0;
}

#respaldo .respaldo-paper-title {
  margin: 0;
  max-width: 420px;
  font-size: clamp(1.55rem, 2.25vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 900;
  color: #111827;
}

#respaldo .respaldo-paper-text {
  margin: 8.8% 0 0;
  max-width: 360px;
  font-size: clamp(0.58rem, 0.72vw, 0.82rem);
  line-height: 1.58;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.78);
}

#respaldo .respaldo-paper-metric {
  position: absolute;
  z-index: 2;
  color: #111827;
  pointer-events: none;
}

#respaldo .respaldo-paper-metric-label {
  display: inline-block;
  white-space: normal;
  line-height: 1.05;
  text-align: left;
  font-size: clamp(0.42rem, 0.52vw, 0.58rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.92);
}

#respaldo .respaldo-paper-metric--20 {
  left: 51.8%;
  top: 76.8%;
}

#respaldo .respaldo-paper-metric--20 .respaldo-paper-metric-label {
  position: relative;
  left: 38px;
  top: -7px;
}

#respaldo .respaldo-paper-metric--b2b {
  left: 63.1%;
  top: 61.9%;
}

#respaldo .respaldo-paper-metric--b2b .respaldo-paper-metric-label {
  position: relative;
  left: -8px;
  top: -8px;
}

#respaldo .respaldo-paper-metric--360 {
  left: 74.8%;
  top: 46.9%;
}

#respaldo .respaldo-paper-metric--360 .respaldo-paper-metric-label {
  position: relative;
  left: -28px;
  top: -9px;
}

#respaldo .respaldo-paper-metric--hwsw {
  left: 84.3%;
  top: 32.1%;
}

#respaldo .respaldo-paper-metric--hwsw .respaldo-paper-metric-label {
  position: relative;
  left: -34px;
  top: -4px;
}

@media (max-width: 1024px) {
  #respaldo .respaldo-paper-stage {
    width: min(980px, 100%);
    min-height: 560px;
    aspect-ratio: 16 / 10;
  }

  #respaldo .respaldo-paper-image {
    object-fit: contain;
    object-position: center;
  }

  #respaldo .respaldo-paper-copy {
    left: 12%;
    top: 25%;
    width: 34%;
  }

  #respaldo .respaldo-paper-title {
    font-size: clamp(1.65rem, 3.8vw, 2.65rem);
  }

  #respaldo .respaldo-paper-text {
    font-size: 0.78rem;
  }

  #respaldo .respaldo-paper-metric .respaldo-paper-metric-label {
    font-size: 0.58rem;
  }
}

@media (max-width: 760px) {
  #respaldo {
    background: #ffffff !important;
  }

  #respaldo .respaldo-paper-stage {
    width: 100%;
    min-height: auto;
    aspect-ratio: auto;
    padding: 46px 26px;
    border-radius: 34px;
    background:
      radial-gradient(
        circle at 18% 12%,
        rgba(255, 255, 255, 0.34),
        transparent 30%
      ),
      linear-gradient(145deg, #ffea00 0%, #ecd500 100%);
    box-shadow:
      16px 18px 26px rgba(17, 24, 39, 0.18),
      -10px -10px 22px rgba(255, 255, 255, 0.9);
  }

  #respaldo .respaldo-paper-image {
    display: none;
  }

  #respaldo .respaldo-paper-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    text-align: left;
  }

  #respaldo .respaldo-paper-title {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 3rem);
  }

  #respaldo .respaldo-paper-text {
    max-width: 100%;
    margin-top: 26px;
    font-size: 0.9rem;
  }

  #respaldo .respaldo-paper-metric {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    background: linear-gradient(145deg, #ffef22, #dec900);
    border: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow:
      8px 8px 14px rgba(118, 105, 0, 0.22),
      -8px -8px 14px rgba(255, 255, 255, 0.48),
      inset 1px 1px 0 rgba(255, 255, 255, 0.38),
      inset -1px -1px 0 rgba(80, 70, 0, 0.12);
  }

  #respaldo .respaldo-paper-metric--20::before {
    content: "20+";
    display: block;
    margin-bottom: 5px;
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
  }

  #respaldo .respaldo-paper-metric--b2b::before {
    content: "B2B";
    display: block;
    margin-bottom: 5px;
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
  }

  #respaldo .respaldo-paper-metric--360::before {
    content: "360°";
    display: block;
    margin-bottom: 5px;
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
  }

  #respaldo .respaldo-paper-metric--hwsw::before {
    content: "HW+SW";
    display: block;
    margin-bottom: 5px;
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
  }

  #respaldo .respaldo-paper-metric .respaldo-paper-metric-label {
    font-size: 0.68rem;
  }
}

/* RESPALDO ANIMATIONS — APPROVED */
#respaldo .respaldo-paper-metric {
  transition: transform 0.4s ease;
}

#respaldo.is-visible .respaldo-paper-metric--20 {
  animation: ekRespaldoPulse 4s ease-in-out infinite;
  animation-delay: 0s;
}
#respaldo.is-visible .respaldo-paper-metric--b2b {
  animation: ekRespaldoPulse 4s ease-in-out infinite;
  animation-delay: 1s;
}
#respaldo.is-visible .respaldo-paper-metric--360 {
  animation: ekRespaldoPulse 4s ease-in-out infinite;
  animation-delay: 2s;
}
#respaldo.is-visible .respaldo-paper-metric--hwsw {
  animation: ekRespaldoPulse 4s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes ekRespaldoPulse {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.085);
  }
  30% {
    transform: scale(1);
  }
}

#respaldo .respaldo-paper-title.is-typing {
  visibility: hidden;
}

#respaldo .respaldo-paper-title.typewriter-ready {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  #respaldo .respaldo-paper-metric,
  #respaldo .respaldo-paper-title {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* QUE ES ELECTRONIKA — MICRO-CALIBRATED BG — APPROVED */
.que-es-electronika {
  position: relative;
  overflow: hidden;
}

.que-es-electronika::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../webp/civok-en-sala.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: blur(8px);
  transform: scale(1.06);
  pointer-events: none;
  z-index: 0;
}

.que-es-electronika::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.58);
  pointer-events: none;
  z-index: 1;
}

.que-es-electronika > * {
  position: relative;
  z-index: 2;
}

.que-es-electronika .electronika-process-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1vw, 0.9rem);
  width: min(100%, 560px);
  margin-inline: auto;
}

.que-es-electronika .electronika-process-card {
  min-height: clamp(82px, 9vh, 108px);
  padding: clamp(0.85rem, 1.2vw, 1.1rem) clamp(1.2rem, 2vw, 1.6rem);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: clamp(0.9rem, 1.4vw, 1.2rem);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(255, 255, 255, 0.82),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(167, 235, 242, 0.82), rgba(84, 172, 191, 0.42));
  box-shadow:
    18px 18px 34px rgba(2, 56, 89, 0.14),
    -12px -12px 28px rgba(255, 255, 255, 0.86),
    inset 1px 1px 2px rgba(255, 255, 255, 0.72),
    inset -1px -1px 2px rgba(2, 56, 89, 0.05);
  transition:
    transform 520ms ease,
    box-shadow 520ms ease,
    filter 520ms ease;
  animation: electronika-soft-float 6.4s ease-in-out infinite;
}

.que-es-electronika .electronika-process-card:nth-child(2) {
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(255, 255, 255, 0.78),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(167, 235, 242, 0.72), rgba(84, 172, 191, 0.62));
  animation-delay: 0.35s;
}

.que-es-electronika .electronika-process-card:nth-child(3) {
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(255, 255, 255, 0.62),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(84, 172, 191, 0.62), rgba(38, 101, 140, 0.72));
  animation-delay: 0.7s;
}

.que-es-electronika .electronika-process-card:nth-child(4) {
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(255, 255, 255, 0.5),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(38, 101, 140, 0.76), rgba(2, 56, 89, 0.82));
  animation-delay: 1.05s;
}

.que-es-electronika .electronika-process-card:nth-child(4) h3,
.que-es-electronika .electronika-process-card:nth-child(4) p {
  color: rgba(255, 255, 255, 0.94);
}

.que-es-electronika .electronika-process-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    8px 8px 18px rgba(2, 56, 89, 0.12),
    -6px -6px 14px rgba(255, 255, 255, 0.88),
    inset 1px 1px 2px rgba(255, 255, 255, 0.8);
  color: #26658c;
}

.que-es-electronika .electronika-process-card h3 {
  margin: 0 0 0.28rem 0;
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #023859;
}

.que-es-electronika .electronika-process-card p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.74rem, 0.78vw, 0.86rem);
  line-height: 1.45;
  font-weight: 500;
  color: rgba(20, 30, 48, 0.72);
}

@keyframes electronika-soft-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }

  50% {
    transform: translateY(-4px) scale(1.012);
    filter: saturate(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .que-es-electronika .electronika-process-card {
    animation: none;
    transition: none;
  }
}

/* QUE ES ELECTRONIKA — CLEANUP & REFINEMENT — APPROVED */
.que-es-electronika .qa-placeholder {
  border: none !important;
}

.que-es-electronika .electronika-process-card__icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50px;
  display: grid;
  place-items: center;
  background: #ffffff;
  box-shadow:
    inset 11px 11px 34px #b8b8b8,
    inset -11px -11px 34px #ffffff;
  color: #0f8fb3;
  overflow: hidden;
}

.que-es-electronika .electronika-process-card__icon svg {
  width: 28px;
  height: 28px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

/* =========================================================
   FAST CHANGE — Método Electronika 360 con cartas premium
   Fecha: 2026-05-16
   Objetivo: reemplazar ribbons animados por 5 cartas sobrias
   ========================================================= */

#metodo .method-visual--cards {
  width: 100%;
  min-width: 0;
}

#metodo .method-cards {
  width: min(100%, 680px);
  min-height: 430px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, minmax(150px, 1fr));
  gap: 18px;
  align-items: stretch;
}

#metodo .method-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 22px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(232, 234, 237, 0.88)
  );
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    16px 18px 34px rgba(17, 24, 39, 0.1),
    -10px -10px 24px rgba(255, 255, 255, 0.82),
    inset 1px 1px 0 rgba(255, 255, 255, 0.92);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

#metodo .method-card:nth-child(1) {
  grid-column: span 3;
}

#metodo .method-card:nth-child(2) {
  grid-column: span 3;
}

#metodo .method-card:nth-child(3) {
  grid-column: span 2;
}

#metodo .method-card:nth-child(4) {
  grid-column: span 2;
}

#metodo .method-card:nth-child(5) {
  grid-column: span 2;
}

#metodo .method-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(255, 255, 255, 0.72),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 46%);
  pointer-events: none;
}

#metodo .method-card::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  right: -28px;
  bottom: -30px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.045);
  box-shadow:
    inset 8px 8px 18px rgba(17, 24, 39, 0.08),
    inset -8px -8px 18px rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

#metodo .method-card--primary {
  background: linear-gradient(145deg, #f6f6f1, #dedfdc);
}

#metodo .method-card--dark {
  background: linear-gradient(145deg, #252b32, #121820);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    18px 22px 36px rgba(17, 24, 39, 0.2),
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28);
}

#metodo .method-card__number {
  position: relative;
  z-index: 1;
  font-size: clamp(2.1rem, 3.2vw, 3.7rem);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: rgba(17, 24, 39, 0.18);
}

#metodo .method-card__body {
  position: relative;
  z-index: 1;
}

#metodo .method-card__label {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.58);
}

#metodo .method-card h3 {
  margin: 0 0 7px;
  font-size: clamp(0.98rem, 1.2vw, 1.16rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 900;
  color: #111827;
}

#metodo .method-card p {
  margin: 0;
  max-width: 95%;
  font-size: 0.76rem;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.6);
}

#metodo .method-card--dark .method-card__number {
  color: rgba(255, 255, 255, 0.2);
}

#metodo .method-card--dark .method-card__label {
  color: rgba(255, 255, 255, 0.58);
}

#metodo .method-card--dark h3 {
  color: rgba(255, 255, 255, 0.94);
}

#metodo .method-card--dark p {
  color: rgba(255, 255, 255, 0.62);
}

#metodo .method-card:hover {
  transform: translateY(-3px);
  box-shadow:
    20px 24px 38px rgba(17, 24, 39, 0.14),
    -10px -10px 24px rgba(255, 255, 255, 0.88),
    inset 1px 1px 0 rgba(255, 255, 255, 0.95);
}

#metodo .method-card--dark:hover {
  box-shadow:
    22px 26px 42px rgba(17, 24, 39, 0.24),
    inset 1px 1px 0 rgba(255, 255, 255, 0.12),
    inset -1px -1px 0 rgba(0, 0, 0, 0.3);
}

@media (max-width: 1100px) {
  #metodo .method-cards {
    width: min(100%, 620px);
    gap: 14px;
  }

  #metodo .method-card {
    padding: 18px;
    border-radius: 24px;
  }

  #metodo .method-card p {
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) {
  #metodo .method-cards {
    width: 100%;
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  #metodo .method-card,
  #metodo .method-card:nth-child(1),
  #metodo .method-card:nth-child(2),
  #metodo .method-card:nth-child(3),
  #metodo .method-card:nth-child(4),
  #metodo .method-card:nth-child(5) {
    grid-column: auto;
    min-height: 136px;
  }
}

@media (max-width: 640px) {
  #metodo .method-card {
    min-height: 126px;
    padding: 18px;
  }

  #metodo .method-card__number {
    font-size: 2.35rem;
  }

  #metodo .method-card h3 {
    font-size: 1rem;
  }

  #metodo .method-card p {
    font-size: 0.72rem;
    line-height: 1.42;
  }
}

/* =========================================================
   REPAIR — Método Electronika 360 con 5 cartas planas
   Fecha: 2026-05-16
   Objetivo: eliminar ribbons, animaciones y movimientos
   ========================================================= */

#metodo .method-visual--plain-cards {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#metodo .method-plain-cards {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#metodo .method-plain-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 22px;
  background: #f1f2f3;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    8px 10px 22px rgba(17, 24, 39, 0.08),
    -6px -6px 16px rgba(255, 255, 255, 0.82),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82);
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#metodo .method-plain-card:nth-child(2) {
  background: #e8eaec;
}

#metodo .method-plain-card:nth-child(3) {
  background: #dde0e3;
}

#metodo .method-plain-card:nth-child(4) {
  background: #d2d6da;
}

#metodo .method-plain-card:nth-child(5) {
  background: #20252b;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    10px 12px 24px rgba(17, 24, 39, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.1);
}

#metodo .method-plain-card:hover {
  transform: none !important;
  animation: none !important;
}

#metodo .method-plain-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(17, 24, 39, 0.74);
  background: rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 2px 2px 5px rgba(17, 24, 39, 0.08),
    inset -2px -2px 5px rgba(255, 255, 255, 0.72);
}

#metodo .method-plain-card__content {
  min-width: 0;
}

#metodo .method-plain-card h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #111827;
}

#metodo .method-plain-card p {
  margin: 0;
  max-width: 94%;
  font-size: 0.76rem;
  line-height: 1.42;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.62);
}

#metodo .method-plain-card:nth-child(5) .method-plain-card__number {
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.28),
    inset -2px -2px 5px rgba(255, 255, 255, 0.08);
}

#metodo .method-plain-card:nth-child(5) h3 {
  color: rgba(255, 255, 255, 0.94);
}

#metodo .method-plain-card:nth-child(5) p {
  color: rgba(255, 255, 255, 0.64);
}

#metodo .method-ribbons,
#metodo .method-cards,
#metodo .method-card {
  display: none !important;
}

#metodo .method-ribbon,
#metodo .method-ribbon__track,
#metodo .method-ribbon__face {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 1100px) {
  #metodo .method-plain-cards {
    width: min(100%, 600px);
    gap: 10px;
  }

  #metodo .method-plain-card {
    min-height: 72px;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 20px;
  }

  #metodo .method-plain-card__number {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 1.05rem;
  }

  #metodo .method-plain-card p {
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) {
  #metodo .method-visual--plain-cards {
    align-items: stretch;
  }

  #metodo .method-plain-cards {
    width: 100%;
  }

  #metodo .method-plain-card {
    min-height: 74px;
  }
}

@media (max-width: 640px) {
  #metodo .method-plain-card {
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  #metodo .method-plain-card__number {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 0.98rem;
  }

  #metodo .method-plain-card h3 {
    font-size: 0.94rem;
  }

  #metodo .method-plain-card p {
    max-width: 100%;
    font-size: 0.7rem;
    line-height: 1.36;
  }
}

/* =========================================================
   FINAL FIX — Método Electronika 360 cartas planas reducidas
   Fecha: 2026-05-16
   Objetivo:
   - Reducir 20% bloque izquierdo
   - Eliminar franja horizontal
   - Mantener 5 cartas planas sin animación
   ========================================================= */

#metodo .method-visual--plain-cards {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 540px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#metodo .method-plain-cards {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#metodo .method-plain-card {
  width: 100% !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 54px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 17px !important;
  background: #f1f2f3 !important;
  border: 1px solid rgba(17, 24, 39, 0.07) !important;
  box-shadow:
    5px 6px 14px rgba(17, 24, 39, 0.07),
    -4px -4px 10px rgba(255, 255, 255, 0.7),
    inset 1px 1px 0 rgba(255, 255, 255, 0.72) !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  overflow: hidden !important;
  position: relative !important;
}

#metodo .method-plain-card:nth-child(2) {
  background: #e9eaec !important;
}

#metodo .method-plain-card:nth-child(3) {
  background: #e1e3e5 !important;
}

#metodo .method-plain-card:nth-child(4) {
  background: #d8dadd !important;
}

#metodo .method-plain-card:nth-child(5) {
  background: #20252b !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    6px 7px 16px rgba(17, 24, 39, 0.15),
    inset 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#metodo .method-plain-card:hover {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#metodo .method-plain-card::before,
#metodo .method-plain-card::after,
#metodo .method-plain-cards::before,
#metodo .method-plain-cards::after,
#metodo .method-visual--plain-cards::before,
#metodo .method-visual--plain-cards::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#metodo .method-plain-card__number {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  font-size: 0.88rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  color: rgba(17, 24, 39, 0.72) !important;
  background: rgba(255, 255, 255, 0.44) !important;
  box-shadow:
    inset 1px 1px 4px rgba(17, 24, 39, 0.07),
    inset -1px -1px 4px rgba(255, 255, 255, 0.7) !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

#metodo .method-plain-card__content {
  min-width: 0 !important;
}

#metodo .method-plain-card h3 {
  margin: 0 0 2px !important;
  font-size: 0.82rem !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.028em !important;
  color: #111827 !important;
}

#metodo .method-plain-card p {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: 0.64rem !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  color: rgba(17, 24, 39, 0.58) !important;
}

#metodo .method-plain-card:nth-child(5) .method-plain-card__number {
  color: rgba(255, 255, 255, 0.86) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 1px 1px 4px rgba(0, 0, 0, 0.24),
    inset -1px -1px 4px rgba(255, 255, 255, 0.07) !important;
}

#metodo .method-plain-card:nth-child(5) h3 {
  color: rgba(255, 255, 255, 0.94) !important;
}

#metodo .method-plain-card:nth-child(5) p {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Neutralización fuerte de conceptos anteriores en la zona izquierda */
#metodo .method-ribbons,
#metodo .method-cards,
#metodo .method-card {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#metodo .method-ribbon,
#metodo .method-ribbon__track,
#metodo .method-ribbon__face,
#metodo .method-card,
#metodo .method-card::before,
#metodo .method-card::after {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Eliminar cualquier franja visual accidental generada por pseudo-elementos o capas previas */
#metodo .method-visual::before,
#metodo .method-visual::after,
#metodo .method-frame::before,
#metodo .method-frame::after {
  content: none !important;
  display: none !important;
}

/* Mantener la parte derecha intacta */
#metodo .method-copy {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1100px) {
  #metodo .method-visual--plain-cards {
    max-width: 500px !important;
  }

  #metodo .method-plain-cards {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    gap: 8px !important;
  }

  #metodo .method-plain-card {
    min-height: 56px !important;
    grid-template-columns: 50px 1fr !important;
    gap: 10px !important;
    padding: 9px 13px !important;
    border-radius: 16px !important;
  }

  #metodo .method-plain-card__number {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
  }

  #metodo .method-plain-card h3 {
    font-size: 0.8rem !important;
  }

  #metodo .method-plain-card p {
    font-size: 0.62rem !important;
    line-height: 1.24 !important;
  }
}

@media (max-width: 900px) {
  #metodo .method-visual--plain-cards {
    max-width: 100% !important;
    align-items: stretch !important;
  }

  #metodo .method-plain-cards {
    width: 100% !important;
    max-width: 100% !important;
  }

  #metodo .method-plain-card {
    min-height: 58px !important;
  }
}

@media (max-width: 640px) {
  #metodo .method-plain-card {
    min-height: 56px !important;
    grid-template-columns: 44px 1fr !important;
    gap: 9px !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
  }

  #metodo .method-plain-card__number {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    font-size: 0.78rem !important;
  }

  #metodo .method-plain-card h3 {
    font-size: 0.78rem !important;
  }

  #metodo .method-plain-card p {
    font-size: 0.6rem !important;
    line-height: 1.22 !important;
  }
}

/* =========================================================
   REBUILD — Respaldo moderno minimalista
   Fecha: 2026-05-16
   Objetivo: reemplazar concepto amarillo tipo papel por sección sobria
   ========================================================= */

#respaldo .respaldo-modern {
  width: min(100%, 1180px);
  margin: 0 auto;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  padding: clamp(34px, 5vw, 58px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 212, 59, 0.1), transparent 28%),
    linear-gradient(145deg, #f6f6f3 0%, #ebecee 100%);
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow:
    18px 24px 46px rgba(17, 24, 39, 0.08),
    -12px -12px 28px rgba(255, 255, 255, 0.82),
    inset 1px 1px 0 rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

#respaldo .respaldo-modern__copy {
  position: relative;
  max-width: 520px;
}

#respaldo .respaldo-modern__copy::before {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd43b, rgba(255, 212, 59, 0.12));
}

#respaldo .respaldo-modern__eyebrow {
  color: #1f3f8f;
}

#respaldo .respaldo-modern__title {
  margin-bottom: 22px;
  max-width: 520px;
}

#respaldo .respaldo-modern__text {
  max-width: 470px;
  color: rgba(17, 24, 39, 0.62);
}

#respaldo .respaldo-modern__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

#respaldo .respaldo-modern-card {
  min-height: 165px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(232, 234, 237, 0.88)
  );
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow:
    12px 16px 30px rgba(17, 24, 39, 0.08),
    -8px -8px 20px rgba(255, 255, 255, 0.76),
    inset 1px 1px 0 rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

#respaldo .respaldo-modern-card__value {
  display: block;
  font-size: clamp(2.1rem, 4vw, 3.9rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: #111827;
}

#respaldo .respaldo-modern-card__label {
  display: block;
  max-width: 180px;
  font-size: 0.74rem;
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.58);
}

#respaldo .respaldo-modern-card:nth-child(1) {
  background: linear-gradient(145deg, #ffffff, #eceeef);
}

#respaldo .respaldo-modern-card:nth-child(2) {
  background: linear-gradient(145deg, #f2f3f4, #dfe2e5);
}

#respaldo .respaldo-modern-card:nth-child(3) {
  background: linear-gradient(145deg, #e8eaec, #d5d9dd);
}

#respaldo .respaldo-modern-card--dark {
  background: linear-gradient(145deg, #252b32, #121820);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    14px 18px 34px rgba(17, 24, 39, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.26);
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
  color: rgba(255, 255, 255, 0.94);
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__label {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1100px) {
  #respaldo .respaldo-modern {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    padding: 36px;
  }

  #respaldo .respaldo-modern-card {
    min-height: 145px;
    padding: 20px;
    border-radius: 24px;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 24px;
  }

  #respaldo .respaldo-modern__copy {
    max-width: 100%;
    text-align: left;
  }

  #respaldo .respaldo-modern__title,
  #respaldo .respaldo-modern__text {
    max-width: 100%;
  }

  #respaldo .respaldo-modern__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern {
    padding: 26px 18px;
    border-radius: 26px;
  }

  #respaldo .respaldo-modern__metrics {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #respaldo .respaldo-modern-card {
    min-height: 118px;
    padding: 18px;
    border-radius: 22px;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: 2.25rem;
  }

  #respaldo .respaldo-modern-card__label {
    max-width: 100%;
    font-size: 0.68rem;
  }
}

/* =========================================================
   FINAL FIX — Respaldo proporción, cartas y fondo gris
   Fecha: 2026-05-16
   Objetivo:
   - Reducir título principal
   - Aumentar levemente párrafo
   - Corregir tamaño y alineación de métricas
   - Cambiar fondo interno a gris premium
   ========================================================= */

#respaldo .respaldo-modern {
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(255, 255, 255, 0.42),
      transparent 28%
    ),
    linear-gradient(145deg, #eceef1 0%, #dde1e5 100%) !important;
  border-color: rgba(17, 24, 39, 0.075) !important;
  box-shadow:
    18px 24px 46px rgba(17, 24, 39, 0.075),
    -12px -12px 28px rgba(255, 255, 255, 0.72),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Mantener contenedor y layout intactos: solo tipografía interna */
#respaldo .respaldo-modern__title {
  max-width: 500px !important;
  font-size: clamp(2.75rem, 4.8vw, 4.85rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.072em !important;
  margin-bottom: 24px !important;
}

#respaldo .respaldo-modern__text {
  max-width: 500px !important;
  font-size: clamp(0.86rem, 1.02vw, 1rem) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  color: rgba(17, 24, 39, 0.66) !important;
}

/* Cartas métricas: mantener tamaño de carta, corregir contenido */
#respaldo .respaldo-modern-card {
  justify-content: center !important;
  gap: 18px !important;
  overflow: hidden !important;
}

#respaldo .respaldo-modern-card__value {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(2.05rem, 3.25vw, 3.25rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.075em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#respaldo .respaldo-modern-card__label {
  display: block !important;
  width: 100% !important;
  max-width: 210px !important;
  font-size: 0.72rem !important;
  line-height: 1.24 !important;
  letter-spacing: 0.105em !important;
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
  font-size: clamp(1.85rem, 3vw, 2.95rem) !important;
  letter-spacing: -0.085em !important;
}

/* Mejorar respiración visual de cartas sin modificar el grid */
#respaldo .respaldo-modern-card:nth-child(1),
#respaldo .respaldo-modern-card:nth-child(2),
#respaldo .respaldo-modern-card:nth-child(3),
#respaldo .respaldo-modern-card:nth-child(4) {
  align-items: flex-start !important;
}

/* El acento amarillo debe quedar mínimo y sobrio */
#respaldo .respaldo-modern__copy::before {
  width: 56px !important;
  height: 3px !important;
  margin-bottom: 24px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 212, 59, 0.92),
    rgba(255, 212, 59, 0.1)
  ) !important;
}

@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(2.45rem, 4.4vw, 4rem) !important;
    line-height: 0.98 !important;
  }

  #respaldo .respaldo-modern__text {
    font-size: 0.88rem !important;
    line-height: 1.54 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(1.9rem, 3vw, 2.75rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.7rem, 2.7vw, 2.45rem) !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(2.25rem, 8vw, 3.7rem) !important;
    max-width: 100% !important;
  }

  #respaldo .respaldo-modern__text {
    max-width: 100% !important;
    font-size: 0.88rem !important;
  }

  #respaldo .respaldo-modern-card {
    justify-content: center !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.8rem, 6.5vw, 2.7rem) !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(2rem, 10vw, 3.05rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
  }

  #respaldo .respaldo-modern__text {
    font-size: 0.84rem !important;
    line-height: 1.52 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: 2.35rem !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: 2.08rem !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.66rem !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   STRICT FIX — Respaldo sin tocar contenedor
   Fecha: 2026-05-16
   Objetivo:
   - No tocar dimensiones ni layout de .respaldo-modern
   - Reducir título principal de verdad
   - Mantener párrafo un poco más legible
   - Conservar cartas sin desbordes
   - Revertir fondo alterado del contenedor a claro sobrio
   ========================================================= */

/* Revertir SOLO apariencia de fondo, sin tocar medidas ni estructura */
#respaldo .respaldo-modern {
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(255, 212, 59, 0.055),
      transparent 26%
    ),
    linear-gradient(145deg, #f6f6f3 0%, #ebecee 100%) !important;
  border-color: rgba(17, 24, 39, 0.06) !important;
  box-shadow:
    18px 24px 46px rgba(17, 24, 39, 0.08),
    -12px -12px 28px rgba(255, 255, 255, 0.82),
    inset 1px 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Reducir título: este era el problema principal */
#respaldo .respaldo-modern__title {
  font-size: clamp(2.15rem, 3.55vw, 3.55rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.058em !important;
  max-width: 470px !important;
  margin-bottom: 22px !important;
}

/* Párrafo un poco más grande, pero controlado */
#respaldo .respaldo-modern__text {
  font-size: clamp(0.86rem, 0.96vw, 0.96rem) !important;
  line-height: 1.58 !important;
  max-width: 470px !important;
  font-weight: 500 !important;
  color: rgba(17, 24, 39, 0.66) !important;
}

/* Mantener eyebrow sobrio */
#respaldo .respaldo-modern__eyebrow {
  color: #1f3f8f !important;
}

/* Acento mínimo, sin protagonismo */
#respaldo .respaldo-modern__copy::before {
  width: 56px !important;
  height: 3px !important;
  margin-bottom: 24px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 212, 59, 0.72),
    rgba(255, 212, 59, 0.08)
  ) !important;
}

/* Cartas: NO tocar grid, solo contenido interno y proporción */
#respaldo .respaldo-modern-card {
  justify-content: center !important;
  gap: 16px !important;
  overflow: hidden !important;
}

#respaldo .respaldo-modern-card__value {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(1.95rem, 2.75vw, 2.85rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
  font-size: clamp(1.7rem, 2.42vw, 2.48rem) !important;
  letter-spacing: -0.07em !important;
}

#respaldo .respaldo-modern-card__label {
  display: block !important;
  width: 100% !important;
  max-width: 210px !important;
  font-size: 0.68rem !important;
  line-height: 1.24 !important;
  letter-spacing: 0.105em !important;
}

/* Responsive: solo tipografía, no layout */
@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(2rem, 3.35vw, 3.1rem) !important;
    line-height: 1.04 !important;
    max-width: 450px !important;
  }

  #respaldo .respaldo-modern__text {
    font-size: 0.86rem !important;
    line-height: 1.54 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(1.75rem, 2.6vw, 2.45rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.55rem, 2.3vw, 2.15rem) !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.64rem !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(2rem, 7vw, 3.05rem) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
  }

  #respaldo .respaldo-modern__text {
    max-width: 100% !important;
    font-size: 0.86rem !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(1.9rem, 6vw, 2.55rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.62rem, 5.4vw, 2.24rem) !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.85rem, 8.6vw, 2.65rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.052em !important;
  }

  #respaldo .respaldo-modern__text {
    font-size: 0.82rem !important;
    line-height: 1.52 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: 2.05rem !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: 1.82rem !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.62rem !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   STRICT FINAL — Respaldo título -15%, fondo gris de sección
   Fecha: 2026-05-16
   Objetivo:
   - Reducir título sin mover contenedor
   - Aplicar gris al fondo de #respaldo, no a .respaldo-modern
   - Mejorar base neumorphism de cartas sin cambiar layout
   ========================================================= */

/* Fondo real de la sección: NO tocar el contenedor interno */
#respaldo {
  background: linear-gradient(145deg, #e4e6e9 0%, #d8dce1 100%) !important;
}

/* Prohibido cambiar medidas/layout de .respaldo-modern.
   Solo se restaura su apariencia clara para que el gris viva detrás. */
#respaldo .respaldo-modern {
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(255, 212, 59, 0.045),
      transparent 26%
    ),
    linear-gradient(145deg, #f7f7f4 0%, #eceeef 100%) !important;
  border-color: rgba(17, 24, 39, 0.055) !important;
  box-shadow:
    16px 20px 42px rgba(17, 24, 39, 0.075),
    -10px -10px 24px rgba(255, 255, 255, 0.72),
    inset 1px 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Reducir título al menos 15% respecto al estado actual */
#respaldo .respaldo-modern__title {
  font-size: clamp(1.82rem, 3.02vw, 3.02rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.05em !important;
  max-width: 455px !important;
  margin-bottom: 20px !important;
}

/* Párrafo levemente más grande y más legible */
#respaldo .respaldo-modern__text {
  font-size: clamp(0.88rem, 0.98vw, 0.98rem) !important;
  line-height: 1.62 !important;
  max-width: 485px !important;
  font-weight: 500 !important;
  color: rgba(17, 24, 39, 0.67) !important;
}

/* Neumorphism más sutil en cartas, sin cambiar tamaño ni grid */
#respaldo .respaldo-modern-card {
  justify-content: center !important;
  overflow: hidden !important;
  border-color: rgba(17, 24, 39, 0.06) !important;
  box-shadow:
    10px 14px 26px rgba(17, 24, 39, 0.075),
    -8px -8px 18px rgba(255, 255, 255, 0.72),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(17, 24, 39, 0.035) !important;
}

/* Mantener métricas controladas para no desbordar */
#respaldo .respaldo-modern-card__value {
  font-size: clamp(1.9rem, 2.58vw, 2.68rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
  font-size: clamp(1.62rem, 2.24vw, 2.28rem) !important;
  letter-spacing: -0.065em !important;
}

#respaldo .respaldo-modern-card__label {
  font-size: 0.66rem !important;
  line-height: 1.26 !important;
  letter-spacing: 0.105em !important;
}

/* Carta oscura con relieve sutil, no agresivo */
#respaldo .respaldo-modern-card--dark {
  background: linear-gradient(145deg, #222831, #141920) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    12px 16px 30px rgba(17, 24, 39, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28) !important;
}

/* Responsive: solo tipografía, no layout */
@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.78rem, 3vw, 2.75rem) !important;
    line-height: 1.06 !important;
    max-width: 430px !important;
  }

  #respaldo .respaldo-modern__text {
    font-size: 0.88rem !important;
    line-height: 1.56 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(1.72rem, 2.42vw, 2.32rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.48rem, 2.08vw, 2.02rem) !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.85rem, 6.4vw, 2.82rem) !important;
    line-height: 1.06 !important;
    max-width: 100% !important;
  }

  #respaldo .respaldo-modern__text {
    max-width: 100% !important;
    font-size: 0.86rem !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.72rem, 7.8vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  #respaldo .respaldo-modern__text {
    font-size: 0.82rem !important;
    line-height: 1.54 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: 1.95rem !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: 1.72rem !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.61rem !important;
  }
}

/* =========================================================
   NEUMORPHISM APPLY — Respaldo contenedor y cartas
   Fecha: 2026-05-16
   Objetivo:
   - Aplicar neumorphism solicitado por el usuario
   - No tocar layout, estructura ni tamaños
   - Mantener contraste de carta oscura HW+SW
   ========================================================= */

/* Fondo de sección para que el neumorphism tenga contraste */
#respaldo {
  background: #dde1e5 !important;
}

/* Contenedor visual principal: aplicar código base solicitado */
#respaldo .respaldo-modern {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #cacaca, #f0f0f0) !important;
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Cartas métricas: aplicar neumorphism base solicitado sin cambiar tamaño */
#respaldo .respaldo-modern-card {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #cacaca, #f0f0f0) !important;
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* Variación muy sutil para que las cartas no se vean idénticas, sin romper neumorphism */
#respaldo .respaldo-modern-card:nth-child(1) {
  background: linear-gradient(145deg, #d1d1d1, #f6f6f6) !important;
}

#respaldo .respaldo-modern-card:nth-child(2) {
  background: linear-gradient(145deg, #cfcfcf, #f2f2f2) !important;
}

#respaldo .respaldo-modern-card:nth-child(3) {
  background: linear-gradient(145deg, #c8c8c8, #eeeeee) !important;
}

/* Carta oscura HW+SW: neumorphism oscuro para conservar contraste */
#respaldo .respaldo-modern-card--dark {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #121820, #242b34) !important;
  box-shadow:
    10px 10px 20px rgba(8, 11, 15, 0.58),
    -10px -10px 20px rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mantener valores controlados para evitar desborde */
#respaldo .respaldo-modern-card__value {
  font-size: clamp(1.9rem, 2.58vw, 2.68rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
  font-size: clamp(1.62rem, 2.24vw, 2.28rem) !important;
  letter-spacing: -0.065em !important;
}

/* Mantener título reducido sin volver a agrandarlo */
#respaldo .respaldo-modern__title {
  font-size: clamp(1.82rem, 3.02vw, 3.02rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.05em !important;
  max-width: 455px !important;
}

/* Párrafo ligeramente más legible */
#respaldo .respaldo-modern__text {
  font-size: clamp(0.88rem, 0.98vw, 0.98rem) !important;
  line-height: 1.62 !important;
  max-width: 485px !important;
  color: rgba(17, 24, 39, 0.67) !important;
}

/* Etiquetas métricas controladas */
#respaldo .respaldo-modern-card__label {
  font-size: 0.66rem !important;
  line-height: 1.26 !important;
  letter-spacing: 0.105em !important;
}

/* Responsive: solo tipografía, no layout */
@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.78rem, 3vw, 2.75rem) !important;
    line-height: 1.06 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(1.72rem, 2.42vw, 2.32rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.48rem, 2.08vw, 2.02rem) !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.85rem, 6.4vw, 2.82rem) !important;
    line-height: 1.06 !important;
    max-width: 100% !important;
  }

  #respaldo .respaldo-modern__text {
    max-width: 100% !important;
    font-size: 0.86rem !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.72rem, 7.8vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: 1.95rem !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: 1.72rem !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.61rem !important;
  }
}

/* =========================================================
   NEUMORPHISM APPLY — Respaldo contenedor y cartas
   Fecha: 2026-05-16
   Objetivo:
   - Aplicar neumorphism solicitado por el usuario
   - No tocar layout, estructura ni tamaños
   - Mantener contraste de carta oscura HW+SW
   ========================================================= */

/* Fondo de sección para que el neumorphism tenga contraste */
#respaldo {
  background: #dde1e5 !important;
}

/* Contenedor visual principal: aplicar código base solicitado */
#respaldo .respaldo-modern {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #cacaca, #f0f0f0) !important;
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Cartas métricas: aplicar neumorphism base solicitado sin cambiar tamaño */
#respaldo .respaldo-modern-card {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #cacaca, #f0f0f0) !important;
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* Variación muy sutil para que las cartas no se vean idénticas, sin romper neumorphism */
#respaldo .respaldo-modern-card:nth-child(1) {
  background: linear-gradient(145deg, #d1d1d1, #f6f6f6) !important;
}

#respaldo .respaldo-modern-card:nth-child(2) {
  background: linear-gradient(145deg, #cfcfcf, #f2f2f2) !important;
}

#respaldo .respaldo-modern-card:nth-child(3) {
  background: linear-gradient(145deg, #c8c8c8, #eeeeee) !important;
}

/* Carta oscura HW+SW: neumorphism oscuro para conservar contraste */
#respaldo .respaldo-modern-card--dark {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #121820, #242b34) !important;
  box-shadow:
    10px 10px 20px rgba(8, 11, 15, 0.58),
    -10px -10px 20px rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mantener valores controlados para evitar desborde */
#respaldo .respaldo-modern-card__value {
  font-size: clamp(1.9rem, 2.58vw, 2.68rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
  font-size: clamp(1.62rem, 2.24vw, 2.28rem) !important;
  letter-spacing: -0.065em !important;
}

/* Mantener título reducido sin volver a agrandarlo */
#respaldo .respaldo-modern__title {
  font-size: clamp(1.82rem, 3.02vw, 3.02rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.05em !important;
  max-width: 455px !important;
}

/* Párrafo ligeramente más legible */
#respaldo .respaldo-modern__text {
  font-size: clamp(0.88rem, 0.98vw, 0.98rem) !important;
  line-height: 1.62 !important;
  max-width: 485px !important;
  color: rgba(17, 24, 39, 0.67) !important;
}

/* Etiquetas métricas controladas */
#respaldo .respaldo-modern-card__label {
  font-size: 0.66rem !important;
  line-height: 1.26 !important;
  letter-spacing: 0.105em !important;
}

/* Responsive: solo tipografía, no layout */
@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.78rem, 3vw, 2.75rem) !important;
    line-height: 1.06 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: clamp(1.72rem, 2.42vw, 2.32rem) !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: clamp(1.48rem, 2.08vw, 2.02rem) !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.85rem, 6.4vw, 2.82rem) !important;
    line-height: 1.06 !important;
    max-width: 100% !important;
  }

  #respaldo .respaldo-modern__text {
    max-width: 100% !important;
    font-size: 0.86rem !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.72rem, 7.8vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  #respaldo .respaldo-modern-card__value {
    font-size: 1.95rem !important;
  }

  #respaldo .respaldo-modern-card--dark .respaldo-modern-card__value {
    font-size: 1.72rem !important;
  }

  #respaldo .respaldo-modern-card__label {
    font-size: 0.61rem !important;
  }
}

/* =========================================================
   STRICT TITLE MATCH — Respaldo igual a título de sectores
   Fecha: 2026-05-16
   Objetivo:
   - Igualar tamaño visual del título de #respaldo al título base de secciones
   - No tocar contenedor, layout, altura, cartas ni fondo
   ========================================================= */

#respaldo .respaldo-modern__title {
  font-size: clamp(2rem, 3vw, 3.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
}

@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.9rem, 3vw, 2.75rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.052em !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.85rem, 6vw, 2.65rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.05em !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.65rem, 7vw, 2.2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
    font-weight: 900 !important;
  }
}

/* =========================================================
   STRICT STRONG REDUCE — Respaldo título visible menor
   Fecha: 2026-05-16
   Objetivo:
   - Reducir de forma evidente el título de #respaldo
   - No tocar contenedor, layout, fondo, cartas ni párrafo
   ========================================================= */

#respaldo .respaldo-modern__title {
  font-size: clamp(1.55rem, 2.28vw, 2.42rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.038em !important;
  font-weight: 900 !important;
}

@media (max-width: 1100px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.48rem, 2.22vw, 2.15rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 900px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.55rem, 5vw, 2.25rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 640px) {
  #respaldo .respaldo-modern__title {
    font-size: clamp(1.42rem, 6.2vw, 1.95rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.032em !important;
    font-weight: 900 !important;
  }
}

/* =========================================================
   REBUILD — Sectores premium minimalista
   Fecha: 2026-05-16
   Objetivo:
   - Eliminar línea punteada
   - Evitar recorte de cartas
   - Crear sección premium sobria con cartas sectoriales
   ========================================================= */

#sectores .qa-placeholder,
#sectores .sectors-frame,
#sectores .sectors-grid {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#sectores .sectors-premium {
  width: min(100%, 1180px);
  margin: 0 auto;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
  padding: clamp(34px, 5vw, 56px);
  border-radius: 30px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff;
  overflow: hidden;
}

#sectores .sectors-premium__copy {
  max-width: 500px;
}

#sectores .sectors-premium__eyebrow {
  color: #1f3f8f;
}

#sectores .sectors-premium__title {
  max-width: 500px;
  margin-bottom: 20px;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

#sectores .sectors-premium__text {
  max-width: 470px;
  color: rgba(17, 24, 39, 0.64);
}

#sectores .sectors-premium__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

#sectores .sectors-premium__signals span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.66);
  background: linear-gradient(145deg, #d4d4d4, #f5f5f5);
  box-shadow:
    5px 5px 10px rgba(143, 143, 143, 0.42),
    -5px -5px 10px rgba(255, 255, 255, 0.9);
}

#sectores .sectors-premium__grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#sectores .sectors-premium-card {
  min-width: 0;
  min-height: 132px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    8px 8px 16px rgba(143, 143, 143, 0.74),
    -8px -8px 16px rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

#sectores .sectors-premium-card--featured {
  background: linear-gradient(145deg, #d2d2d2, #f7f7f7);
}

#sectores .sectors-premium-card--dark {
  background: linear-gradient(145deg, #121820, #242b34);
  box-shadow:
    8px 8px 16px rgba(8, 11, 15, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 0.06);
}

#sectores .sectors-premium-card__number {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(17, 24, 39, 0.7);
  background: rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 2px 2px 5px rgba(17, 24, 39, 0.08),
    inset -2px -2px 5px rgba(255, 255, 255, 0.72);
}

#sectores .sectors-premium-card__body {
  min-width: 0;
}

#sectores .sectors-premium-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #111827;
}

#sectores .sectors-premium-card p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.38;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.6);
}

#sectores .sectors-premium-card--dark .sectors-premium-card__number {
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.26),
    inset -2px -2px 5px rgba(255, 255, 255, 0.08);
}

#sectores .sectors-premium-card--dark h3 {
  color: rgba(255, 255, 255, 0.94);
}

#sectores .sectors-premium-card--dark p {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1100px) {
  #sectores .sectors-premium {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 36px;
  }

  #sectores .sectors-premium__title {
    font-size: clamp(1.9rem, 3vw, 2.75rem);
  }

  #sectores .sectors-premium-card {
    min-height: 124px;
    grid-template-columns: 48px 1fr;
    gap: 13px;
    padding: 17px;
  }

  #sectores .sectors-premium-card h3 {
    font-size: 0.94rem;
  }

  #sectores .sectors-premium-card p {
    font-size: 0.7rem;
  }
}

@media (max-width: 900px) {
  #sectores .sectors-premium {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 24px;
  }

  #sectores .sectors-premium__copy,
  #sectores .sectors-premium__title,
  #sectores .sectors-premium__text {
    max-width: 100%;
  }

  #sectores .sectors-premium__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #sectores .sectors-premium {
    padding: 26px 18px;
    border-radius: 24px;
  }

  #sectores .sectors-premium__title {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    line-height: 1.08;
  }

  #sectores .sectors-premium__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #sectores .sectors-premium-card {
    min-height: 108px;
    padding: 16px;
    border-radius: 20px;
  }
}

/* =========================================================
   BG IMAGE — Sectores con Ciudad Electronika difuminada
   Fecha: 2026-05-16
   Objetivo:
   - Agregar Ciudad_electronika.webp como fondo visual
   - Mantener estructura, altura, contenido y layout intactos
   ========================================================= */

#sectores {
  position: relative !important;
  overflow: hidden !important;
  background: #dde1e5 !important;
}

#sectores::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(221, 225, 229, 0.16),
      rgba(221, 225, 229, 0.22)
    ),
    url("webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0.9 !important;
  filter: blur(10px) saturate(0.85) contrast(0.95) !important;
  transform: scale(1.04) !important;
}

#sectores::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    145deg,
    rgba(221, 225, 229, 0.24),
    rgba(221, 225, 229, 0.34)
  ) !important;
}

#sectores > .container {
  position: relative !important;
  z-index: 2 !important;
}

#sectores .sectors-premium {
  position: relative !important;
  z-index: 3 !important;
}

/* =========================================================
   FIX — Sectores fondo Ciudad Electronika visible 90%
   Fecha: 2026-05-16
   Objetivo:
   - Corregir ruta de imagen desde assets/css/styles.css
   - Hacer visible la imagen al 90%
   - Reducir overlay que estaba tapando el fondo
   - No tocar estructura, layout, altura ni contenido
   ========================================================= */

#sectores {
  position: relative !important;
  overflow: hidden !important;
  background: #d8dce1 !important;
}

#sectores::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: url("../webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0.9 !important;
  filter: blur(4px) saturate(0.95) contrast(1.02) !important;
  transform: scale(1.025) !important;
}

/* Overlay mínimo: solo protege lectura, no tapa la imagen */
#sectores::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    145deg,
    rgba(216, 220, 225, 0.08),
    rgba(216, 220, 225, 0.14)
  ) !important;
}

/* Mantener el contenido por encima del fondo */
#sectores > .container {
  position: relative !important;
  z-index: 2 !important;
}

#sectores .sectors-premium {
  position: relative !important;
  z-index: 3 !important;
}

/* Hacer el bloque principal ligeramente translúcido para que el fondo se perciba */
#sectores .sectors-premium {
  background: linear-gradient(
    145deg,
    rgba(202, 202, 202, 0.82),
    rgba(240, 240, 240, 0.82)
  ) !important;
}

/* Mantener cartas legibles pero no totalmente opacas */
#sectores .sectors-premium-card {
  background: linear-gradient(
    145deg,
    rgba(202, 202, 202, 0.86),
    rgba(240, 240, 240, 0.86)
  ) !important;
}

#sectores .sectors-premium-card--featured {
  background: linear-gradient(
    145deg,
    rgba(210, 210, 210, 0.86),
    rgba(247, 247, 247, 0.86)
  ) !important;
}

#sectores .sectors-premium-card--dark {
  background: linear-gradient(
    145deg,
    rgba(18, 24, 32, 0.9),
    rgba(36, 43, 52, 0.9)
  ) !important;
}

/* =========================================================
   STRICT LAYOUT — Sectores título arriba y cartas abajo
   Fecha: 2026-05-16
   Objetivo:
   - Eliminar microbotones
   - Poner contenido textual arriba
   - Poner 6 cartas abajo en una fila
   - No tocar altura ni tamaño general de sección
   ========================================================= */

/* Mantener contenedor existente, solo reorganizar su interior */
#sectores .sectors-premium {
  grid-template-columns: 1fr !important;
  align-content: center !important;
  align-items: stretch !important;
}

/* Texto superior más limpio y centrado en el área */
#sectores .sectors-premium__copy {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#sectores .sectors-premium__eyebrow {
  justify-content: center !important;
  text-align: center !important;
}

#sectores .sectors-premium__title {
  max-width: 760px !important;
  margin: 0 auto 16px !important;
  font-size: clamp(1.55rem, 2.35vw, 2.42rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
}

#sectores .sectors-premium__text {
  max-width: 640px !important;
  margin: 0 auto !important;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem) !important;
  line-height: 1.52 !important;
  text-align: center !important;
}

/* Eliminar visualmente los botones si quedó algo por CSS o HTML */
#sectores .sectors-premium__signals {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Cartas abajo en una sola fila */
#sectores .sectors-premium__grid {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: clamp(28px, 4vw, 42px) !important;
}

/* Cartas más compactas para que quepan sin recorte */
#sectores .sectors-premium-card {
  min-width: 0 !important;
  min-height: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* Número pequeño arriba, sin ocupar demasiada columna */
#sectores .sectors-premium-card__number {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 12px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

/* Contenido compacto */
#sectores .sectors-premium-card__body {
  min-width: 0 !important;
  width: 100% !important;
}

#sectores .sectors-premium-card h3 {
  margin: 0 0 6px !important;
  font-size: 0.9rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

#sectores .sectors-premium-card p {
  margin: 0 !important;
  font-size: 0.66rem !important;
  line-height: 1.34 !important;
}

/* Tablet: 3 columnas para evitar recortes */
@media (max-width: 1100px) {
  #sectores .sectors-premium__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 30px !important;
  }

  #sectores .sectors-premium-card {
    min-height: 112px !important;
    padding: 15px !important;
  }

  #sectores .sectors-premium__title {
    font-size: clamp(1.5rem, 2.4vw, 2.2rem) !important;
  }
}

/* Mobile: 2 columnas */
@media (max-width: 760px) {
  #sectores .sectors-premium__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #sectores .sectors-premium-card {
    min-height: 112px !important;
    padding: 14px !important;
  }

  #sectores .sectors-premium__copy {
    text-align: left !important;
  }

  #sectores .sectors-premium__title,
  #sectores .sectors-premium__text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Mobile pequeño: 1 columna si no cabe */
@media (max-width: 480px) {
  #sectores .sectors-premium__grid {
    grid-template-columns: 1fr !important;
  }

  #sectores .sectors-premium-card {
    min-height: 96px !important;
  }
}

/* =========================================================
   STRICT BALANCE — Sectores contenido más centrado
   Fecha: 2026-05-16
   Objetivo:
   - Bajar ligeramente título/texto
   - Subir cartas proporcionalmente
   - Reducir vacío central
   - No tocar altura, fondo, contenedor ni estructura
   ========================================================= */

/* Reorganiza solo la distribución interna, sin cambiar tamaño del contenedor */
#sectores .sectors-premium {
  align-content: center !important;
}

/* Bloque superior: baja ligeramente y mantiene centralidad */
#sectores .sectors-premium__copy {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* Título y párrafo: conservar tamaño actual, solo controlar respiración */
#sectores .sectors-premium__title {
  margin-bottom: 12px !important;
}

#sectores .sectors-premium__text {
  margin-bottom: 0 !important;
}

/* Cartas: subirlas reduciendo el espacio entre texto y grid */
#sectores .sectors-premium__grid {
  margin-top: 22px !important;
}

/* Desktop amplio: un poco más compacto para que todo quede al centro */
@media (min-width: 1101px) {
  #sectores .sectors-premium__copy {
    margin-top: 28px !important;
  }

  #sectores .sectors-premium__grid {
    margin-top: 26px !important;
  }
}

/* Tablet: mantener distribución equilibrada */
@media (max-width: 1100px) {
  #sectores .sectors-premium__copy {
    margin-top: 10px !important;
  }

  #sectores .sectors-premium__grid {
    margin-top: 20px !important;
  }
}

/* Mobile: no forzar demasiado porque el contenido se apila */
@media (max-width: 760px) {
  #sectores .sectors-premium__copy {
    margin-top: 0 !important;
  }

  #sectores .sectors-premium__grid {
    margin-top: 22px !important;
  }
}

/* =========================================================
   STRICT STRONG BALANCE — Sectores distribución vertical real
   Fecha: 2026-05-16
   Objetivo:
   - Bajar título/texto de forma visible
   - Subir cartas de forma visible
   - Reducir vacío central
   - No tocar altura, fondo, contenedor, HTML ni estructura
   ========================================================= */

/* Mantener layout existente, pero compactar la relación interna */
#sectores .sectors-premium {
  align-content: center !important;
}

/* Bloque superior: bajarlo visualmente sin cambiar altura real */
#sectores .sectors-premium__copy {
  transform: translateY(38px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Título y texto: mantener tamaños actuales, solo respiración */
#sectores .sectors-premium__title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

#sectores .sectors-premium__text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Cartas: subirlas visualmente para cerrar el vacío central */
#sectores .sectors-premium__grid {
  transform: translateY(-42px) !important;
  margin-top: 0 !important;
}

/* Desktop amplio: corrección más marcada */
@media (min-width: 1101px) {
  #sectores .sectors-premium__copy {
    transform: translateY(42px) !important;
  }

  #sectores .sectors-premium__grid {
    transform: translateY(-48px) !important;
  }
}

/* Tablet: corrección moderada */
@media (max-width: 1100px) {
  #sectores .sectors-premium__copy {
    transform: translateY(24px) !important;
  }

  #sectores .sectors-premium__grid {
    transform: translateY(-28px) !important;
  }
}

/* Mobile: no forzar desplazamientos grandes porque el contenido se apila */
@media (max-width: 760px) {
  #sectores .sectors-premium__copy {
    transform: translateY(0) !important;
  }

  #sectores .sectors-premium__grid {
    transform: translateY(0) !important;
    margin-top: 22px !important;
  }
}

/* =========================================================
   FIX — Sectores evitar montaje sobre subtítulo
   Fecha: 2026-05-16
   Objetivo:
   - Desactivar desplazamiento fuerte anterior
   - Evitar que las cartas se monten sobre el subtítulo
   - Mantener ajuste vertical sutil y limpio
   - No tocar altura, fondo, contenedor, HTML ni estructura
   ========================================================= */

/* Mantener distribución interna estable */
#sectores .sectors-premium {
  align-content: center !important;
}

/* Bloque superior: movimiento muy sutil, no agresivo */
#sectores .sectors-premium__copy {
  transform: translateY(10px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Título y subtítulo con lectura limpia */
#sectores .sectors-premium__title {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

#sectores .sectors-premium__text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Cartas: subir poco, sin invadir el subtítulo */
#sectores .sectors-premium__grid {
  transform: translateY(-10px) !important;
  margin-top: 42px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Desktop amplio: ajuste levemente mayor, pero seguro */
@media (min-width: 1101px) {
  #sectores .sectors-premium__copy {
    transform: translateY(12px) !important;
  }

  #sectores .sectors-premium__grid {
    transform: translateY(-12px) !important;
    margin-top: 44px !important;
  }
}

/* Tablet: ajuste mínimo */
@media (max-width: 1100px) {
  #sectores .sectors-premium__copy {
    transform: translateY(6px) !important;
  }

  #sectores .sectors-premium__grid {
    transform: translateY(-6px) !important;
    margin-top: 34px !important;
  }
}

/* Mobile: sin desplazamientos, solo separación normal */
@media (max-width: 760px) {
  #sectores .sectors-premium__copy {
    transform: none !important;
  }

  #sectores .sectors-premium__grid {
    transform: none !important;
    margin-top: 24px !important;
  }
}

/* =========================================================
   EXACT BALANCE — Sectores texto +15px, cartas -15px
   Fecha: 2026-05-16
   Objetivo:
   - Bajar título/subtítulo exactamente 15px
   - Subir cartas exactamente 15px
   - No tocar layout, fondo, contenedor, HTML ni estructura
   ========================================================= */

#sectores .sectors-premium__copy {
  transform: translateY(15px) !important;
}

#sectores .sectors-premium__grid {
  transform: translateY(-15px) !important;
}

/* En mobile no forzar desplazamientos para evitar cruces */
@media (max-width: 760px) {
  #sectores .sectors-premium__copy {
    transform: none !important;
  }

  #sectores .sectors-premium__grid {
    transform: none !important;
  }
}

/* =========================================================
   EXACT BALANCE 30PX — Sectores texto +30px, cartas -30px
   Fecha: 2026-05-16
   Objetivo:
   - Bajar título/subtítulo exactamente 30px
   - Subir cartas exactamente 30px
   - No tocar layout, fondo, contenedor, HTML ni estructura
   ========================================================= */

#sectores .sectors-premium__copy {
  transform: translateY(30px) !important;
}

#sectores .sectors-premium__grid {
  transform: translateY(-30px) !important;
}

/* En mobile no forzar desplazamientos para evitar cruces */
@media (max-width: 760px) {
  #sectores .sectors-premium__copy {
    transform: none !important;
  }

  #sectores .sectors-premium__grid {
    transform: none !important;
  }
}

/* =========================================================
   MICRO ANIMATION — Sectores cartas secuenciales premium
   Fecha: 2026-05-16
   Objetivo:
   - Animar sutilmente las cartas de sectores por turnos
   - No tocar layout, tamaños, fondo, HTML ni estructura
   ========================================================= */

#sectores .sectors-premium-card {
  will-change: transform, box-shadow, filter;
  animation-name: sectorsCardBreath;
  animation-duration: 7.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

#sectores .sectors-premium-card:nth-child(1) {
  animation-delay: 0s;
}

#sectores .sectors-premium-card:nth-child(2) {
  animation-delay: 0.35s;
}

#sectores .sectors-premium-card:nth-child(3) {
  animation-delay: 0.7s;
}

#sectores .sectors-premium-card:nth-child(4) {
  animation-delay: 1.05s;
}

#sectores .sectors-premium-card:nth-child(5) {
  animation-delay: 1.4s;
}

#sectores .sectors-premium-card:nth-child(6) {
  animation-delay: 1.75s;
}

@keyframes sectorsCardBreath {
  0%,
  68%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }

  10% {
    transform: translateY(-6px);
    filter: brightness(1.035);
  }

  18% {
    transform: translateY(0);
    filter: brightness(1);
  }
}

/* Sombra sutil sincronizada para cartas claras */
#sectores .sectors-premium-card:not(.sectors-premium-card--dark) {
  animation-name: sectorsCardBreathLight;
}

@keyframes sectorsCardBreathLight {
  0%,
  68%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
    box-shadow:
      8px 8px 16px rgba(143, 143, 143, 0.74),
      -8px -8px 16px rgba(255, 255, 255, 0.92);
  }

  10% {
    transform: translateY(-6px);
    filter: brightness(1.035);
    box-shadow:
      11px 13px 22px rgba(95, 95, 95, 0.42),
      -9px -9px 18px rgba(255, 255, 255, 0.96);
  }

  18% {
    transform: translateY(0);
    filter: brightness(1);
    box-shadow:
      8px 8px 16px rgba(143, 143, 143, 0.74),
      -8px -8px 16px rgba(255, 255, 255, 0.92);
  }
}

/* Sombra sutil sincronizada para carta oscura */
#sectores .sectors-premium-card--dark {
  animation-name: sectorsCardBreathDark;
}

@keyframes sectorsCardBreathDark {
  0%,
  68%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
    box-shadow:
      8px 8px 16px rgba(8, 11, 15, 0.5),
      -8px -8px 16px rgba(255, 255, 255, 0.06);
  }

  10% {
    transform: translateY(-6px);
    filter: brightness(1.08);
    box-shadow:
      12px 14px 24px rgba(8, 11, 15, 0.56),
      -8px -8px 18px rgba(255, 255, 255, 0.08);
  }

  18% {
    transform: translateY(0);
    filter: brightness(1);
    box-shadow:
      8px 8px 16px rgba(8, 11, 15, 0.5),
      -8px -8px 16px rgba(255, 255, 255, 0.06);
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  #sectores .sectors-premium-card {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* En mobile la animación se apaga para evitar ruido visual */
@media (max-width: 760px) {
  #sectores .sectors-premium-card {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   REBUILD — Proyectos premium con header y cartas inferiores
   Fecha: 2026-05-16
   Objetivo:
   - Eliminar línea punteada
   - Crear sección minimalista tipo ejemplo
   - Mantener textos, altura general y proporciones
   ========================================================= */

#proyectos .qa-placeholder,
#proyectos .projects-frame,
#proyectos .projects-grid {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#proyectos .projects-premium {
  width: min(100%, 1180px);
  margin: 0 auto;
  min-height: 500px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(30px, 5vw, 54px);
  padding: clamp(34px, 5vw, 56px);
  border-radius: 30px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff;
  overflow: hidden;
}

#proyectos .projects-premium__header {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

#proyectos .projects-premium__eyebrow {
  color: #1f3f8f;
}

#proyectos .projects-premium__title {
  max-width: 760px;
  margin: 0 auto 16px;
  font-size: clamp(1.75rem, 2.75vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
  text-align: center;
}

#proyectos .projects-premium__text {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(0.82rem, 0.96vw, 0.96rem);
  line-height: 1.55;
  color: rgba(17, 24, 39, 0.64);
  text-align: center;
}

#proyectos .projects-premium__cards {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

#proyectos .projects-premium-card {
  min-width: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    8px 8px 16px rgba(143, 143, 143, 0.72),
    -8px -8px 16px rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

#proyectos .projects-premium-card__kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #1f3f8f;
}

#proyectos .projects-premium-card h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #111827;
}

#proyectos .projects-premium-card p {
  margin: 0;
  max-width: 95%;
  font-size: 0.78rem;
  line-height: 1.42;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.62);
}

#proyectos .projects-premium-card--dark {
  background: linear-gradient(145deg, #121820, #242b34);
  box-shadow:
    8px 8px 16px rgba(8, 11, 15, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 0.06);
}

#proyectos .projects-premium-card--dark .projects-premium-card__kicker {
  color: rgba(255, 255, 255, 0.62);
}

#proyectos .projects-premium-card--dark h3 {
  color: rgba(255, 255, 255, 0.94);
}

#proyectos .projects-premium-card--dark p {
  color: rgba(255, 255, 255, 0.64);
}

@media (max-width: 1100px) {
  #proyectos .projects-premium {
    gap: 34px;
    padding: 36px;
  }

  #proyectos .projects-premium-card {
    min-height: 138px;
    padding: 20px;
  }

  #proyectos .projects-premium-card p {
    font-size: 0.74rem;
  }
}

@media (max-width: 900px) {
  #proyectos .projects-premium {
    min-height: auto;
    padding: 32px 24px;
  }

  #proyectos .projects-premium__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #proyectos .projects-premium-card {
    min-height: 118px;
  }
}

@media (max-width: 640px) {
  #proyectos .projects-premium {
    padding: 26px 18px;
    border-radius: 24px;
  }

  #proyectos .projects-premium__title {
    font-size: clamp(1.55rem, 7vw, 2.2rem);
  }

  #proyectos .projects-premium-card {
    padding: 18px;
    border-radius: 22px;
  }
}

/* =========================================================
   WIREFRAME APPLY — Proyectos bloque superior y cartas
   Fecha: 2026-05-16
   Objetivo:
   - Aplicar wireframe: bloque superior + cartas inferiores
   - Eliminar línea punteada
   - Mantener textos, proporción y altura general
   ========================================================= */

#proyectos .qa-placeholder,
#proyectos .projects-frame,
#proyectos .projects-grid {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#proyectos .projects-wireframe {
  width: min(100%, 1180px);
  margin: 0 auto;
  min-height: 500px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(24px, 4vw, 42px);
  padding: clamp(32px, 5vw, 54px);
  border-radius: 30px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff;
  overflow: hidden;
}

#proyectos .projects-wireframe__hero {
  width: min(100%, 760px);
  min-height: 170px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(26px, 4vw, 38px) clamp(24px, 5vw, 56px);
  border-radius: 26px;
  text-align: center;
  background: linear-gradient(
    145deg,
    rgba(219, 232, 244, 0.92),
    rgba(236, 242, 248, 0.92)
  );
  box-shadow:
    8px 8px 16px rgba(143, 143, 143, 0.34),
    -8px -8px 16px rgba(255, 255, 255, 0.92),
    inset 1px 1px 0 rgba(255, 255, 255, 0.72);
}

#proyectos .projects-wireframe__eyebrow {
  margin-bottom: 12px;
  color: #1f3f8f;
}

#proyectos .projects-wireframe__title {
  max-width: 620px;
  margin: 0 auto 12px;
  font-size: clamp(1.45rem, 2.25vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.052em;
  font-weight: 900;
  color: #111827;
  text-align: center;
}

#proyectos .projects-wireframe__text {
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  line-height: 1.52;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.62);
  text-align: center;
}

#proyectos .projects-wireframe__cards {
  width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

#proyectos .projects-wireframe-card {
  min-width: 0;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    8px 8px 16px rgba(143, 143, 143, 0.72),
    -8px -8px 16px rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

#proyectos .projects-wireframe-card__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 2px 2px 5px rgba(17, 24, 39, 0.08),
    inset -2px -2px 5px rgba(255, 255, 255, 0.72);
}

#proyectos .projects-wireframe-card__icon span {
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.7);
}

#proyectos .projects-wireframe-card__kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #1f3f8f;
}

#proyectos .projects-wireframe-card h3 {
  margin: 0 0 8px;
  font-size: clamp(0.98rem, 1.18vw, 1.12rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #111827;
}

#proyectos .projects-wireframe-card p {
  margin: 0;
  max-width: 95%;
  font-size: 0.76rem;
  line-height: 1.42;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.62);
}

#proyectos .projects-wireframe-card--dark {
  background: linear-gradient(145deg, #121820, #242b34);
  box-shadow:
    8px 8px 16px rgba(8, 11, 15, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 0.06);
}

#proyectos .projects-wireframe-card--dark .projects-wireframe-card__icon {
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.26),
    inset -2px -2px 5px rgba(255, 255, 255, 0.08);
}

#proyectos .projects-wireframe-card--dark .projects-wireframe-card__icon span,
#proyectos .projects-wireframe-card--dark .projects-wireframe-card__kicker {
  color: rgba(255, 255, 255, 0.68);
}

#proyectos .projects-wireframe-card--dark h3 {
  color: rgba(255, 255, 255, 0.94);
}

#proyectos .projects-wireframe-card--dark p {
  color: rgba(255, 255, 255, 0.64);
}

@media (max-width: 1100px) {
  #proyectos .projects-wireframe {
    gap: 30px;
    padding: 36px;
  }

  #proyectos .projects-wireframe__hero {
    min-height: 150px;
  }

  #proyectos .projects-wireframe-card {
    min-height: 162px;
    padding: 20px;
  }

  #proyectos .projects-wireframe-card p {
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) {
  #proyectos .projects-wireframe {
    min-height: auto;
    padding: 32px 24px;
  }

  #proyectos .projects-wireframe__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #proyectos .projects-wireframe-card {
    min-height: 128px;
  }
}

@media (max-width: 640px) {
  #proyectos .projects-wireframe {
    padding: 26px 18px;
    border-radius: 24px;
  }

  #proyectos .projects-wireframe__hero {
    min-height: 140px;
    padding: 24px 18px;
    border-radius: 22px;
  }

  #proyectos .projects-wireframe__title {
    font-size: clamp(1.35rem, 6.2vw, 2rem);
  }

  #proyectos .projects-wireframe-card {
    padding: 18px;
    border-radius: 22px;
  }
}

/* =========================================================
   APPLY — Proyectos imagen superior y cartas sin contenedor pesado
   Fecha: 2026-05-16
   Objetivo:
   - Aplicar diseño aprobado en preview local
   - Banda superior con imagen
   - Cartas inferiores con neumorphism
   - Sin marco pesado general
   - Sin línea punteada
   ========================================================= */

#proyectos .qa-placeholder,
#proyectos .projects-frame,
#proyectos .projects-grid,
#proyectos .projects-premium,
#proyectos .projects-wireframe {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#proyectos .projects-resource {
  width: min(100%, 980px);
  margin: 0 auto;
  min-height: 500px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 26px;
  background: transparent;
  box-shadow: none;
  border: 0;
  overflow: visible;
}

#proyectos .projects-resource__header {
  position: relative;
  min-height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 4vw, 42px) clamp(24px, 5vw, 48px);
  text-align: center;
  overflow: hidden;
  border-radius: 26px;
  background: #dfeaf4;
  box-shadow: none;
}

#proyectos .projects-resource__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.46),
      rgba(246, 248, 250, 0.72)
    ),
    url("../webp/Ciudad_electronika.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px) saturate(0.9) contrast(0.96);
  transform: scale(1.03);
  opacity: 0.92;
}

#proyectos .projects-resource__header-content {
  position: relative;
  z-index: 1;
  width: min(100%, 700px);
}

#proyectos .projects-resource__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #1f3f8f;
}

#proyectos .projects-resource__title {
  margin: 0 auto 12px;
  max-width: 680px;
  font-size: clamp(1.65rem, 2.55vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 900;
  color: #111827;
  text-align: center;
}

#proyectos .projects-resource__text {
  margin: 0 auto;
  max-width: 610px;
  font-size: clamp(0.82rem, 0.96vw, 0.94rem);
  line-height: 1.56;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.66);
  text-align: center;
}

#proyectos .projects-resource__cards {
  width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

#proyectos .project-resource-card {
  min-width: 0;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff;
}

#proyectos .project-resource-card__image {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(
      145deg,
      rgba(220, 232, 243, 0.42),
      rgba(240, 244, 248, 0.68)
    ),
    url("../webp/Ciudad_electronika.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#proyectos .project-resource-card__badge {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 0.74rem;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.74);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 2px 2px 5px rgba(17, 24, 39, 0.08),
    inset -2px -2px 5px rgba(255, 255, 255, 0.72);
}

#proyectos .project-resource-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

#proyectos .project-resource-card__kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #1f3f8f;
}

#proyectos .project-resource-card h3 {
  margin: 0 0 8px;
  font-size: 1.04rem;
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: #111827;
}

#proyectos .project-resource-card p {
  margin: 0;
  flex: 1;
  font-size: 0.74rem;
  line-height: 1.42;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.62);
}

#proyectos .project-resource-card__footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.42);
}

#proyectos .project-resource-card__footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#proyectos .project-resource-card__footer span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

#proyectos .project-resource-card--dark {
  background: linear-gradient(145deg, #121820, #242b34);
  box-shadow:
    10px 10px 20px rgba(8, 11, 15, 0.56),
    -10px -10px 20px rgba(255, 255, 255, 0.06);
}

#proyectos .project-resource-card--dark .project-resource-card__image {
  background-image:
    linear-gradient(145deg, rgba(18, 24, 32, 0.32), rgba(36, 43, 52, 0.5)),
    url("../webp/Ciudad_electronika.webp");
}

#proyectos .project-resource-card--dark .project-resource-card__badge {
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.12);
}

#proyectos .project-resource-card--dark .project-resource-card__kicker,
#proyectos .project-resource-card--dark .project-resource-card__footer {
  color: rgba(255, 255, 255, 0.58);
}

#proyectos .project-resource-card--dark h3 {
  color: rgba(255, 255, 255, 0.94);
}

#proyectos .project-resource-card--dark p {
  color: rgba(255, 255, 255, 0.64);
}

@media (max-width: 1100px) {
  #proyectos .projects-resource {
    width: min(100%, 920px);
    gap: 24px;
  }

  #proyectos .project-resource-card {
    min-height: 224px;
  }

  #proyectos .project-resource-card__content {
    padding: 18px;
  }

  #proyectos .project-resource-card p {
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) {
  #proyectos .projects-resource {
    min-height: auto;
  }

  #proyectos .projects-resource__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #proyectos .project-resource-card {
    min-height: 210px;
  }
}

@media (max-width: 640px) {
  #proyectos .projects-resource__header {
    min-height: 160px;
    padding: 28px 18px;
    border-radius: 22px;
  }

  #proyectos .projects-resource__title {
    font-size: clamp(1.38rem, 6.4vw, 2rem);
  }

  #proyectos .projects-resource__text {
    font-size: 0.82rem;
  }

  #proyectos .project-resource-card {
    border-radius: 20px;
  }
}

/* =========================================================
   FINAL SHAPE — Proyectos banda superior infinita
   Fecha: 2026-05-16
   Objetivo:
   - La banda superior deja de verse como contenedor
   - Se extiende visualmente hacia izquierda y derecha
   - Se pega arriba contra la sección anterior
   - Mantiene intactas las cartas y el límite inferior
   ========================================================= */

/* Reducir la separación superior de la sección sin tocar contenido inferior */
#proyectos .section__inner {
  justify-content: flex-start !important;
}

/* Wrapper general: sin marco visual pesado */
#proyectos .projects-resource {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

/* Banda superior: se extiende fuera del ancho del contenedor hacia ambos lados */
#proyectos .projects-resource__header {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  border-radius: 0 0 30px 30px !important;
  min-height: 185px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* La imagen se mantiene como fondo de la banda completa */
#proyectos .projects-resource__header::before {
  inset: 0 !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.42),
      rgba(246, 248, 250, 0.68)
    ),
    url("../webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(3px) saturate(0.9) contrast(0.96) !important;
  transform: scale(1.03) !important;
  opacity: 0.92 !important;
}

/* Mantener el texto centrado y con ancho controlado aunque la banda sea infinita */
#proyectos .projects-resource__header-content {
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Mantener las cartas como estaban, sin convertirlas ni moverlas radicalmente */
#proyectos .projects-resource__cards {
  width: min(100%, 900px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Evitar cualquier línea punteada o placeholder heredado */
#proyectos .qa-placeholder,
#proyectos .projects-frame,
#proyectos .projects-grid,
#proyectos .projects-premium,
#proyectos .projects-wireframe {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Responsive: mantener la banda infinita también en mobile */
@media (max-width: 900px) {
  #proyectos .projects-resource__header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 0 24px 24px !important;
  }
}

/* =========================================================
   IMAGE EXTEND UP — Proyectos imagen pegada a sección anterior
   Fecha: 2026-05-16
   Objetivo:
   - Cubrir la franja blanca superior con la misma imagen
   - No mover banda, cartas, texto, altura ni HTML
   - Hacer que #proyectos toque visualmente a #sectores
   ========================================================= */

/* Permitir que la banda proyecte imagen hacia arriba sin mover su posición real */
#proyectos .projects-resource__header {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Mantener la imagen principal de la banda dentro de la banda */
#proyectos .projects-resource__header::before {
  z-index: 1 !important;
}

/* Extensión superior de la misma imagen para cubrir la franja blanca */
#proyectos .projects-resource__header::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 100% !important;
  width: 100vw !important;
  height: 120px !important;
  margin-left: -50vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.42),
      rgba(246, 248, 250, 0.68)
    ),
    url("../webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  filter: blur(3px) saturate(0.9) contrast(0.96) !important;
  transform: scale(1.03) !important;
  transform-origin: center bottom !important;
  opacity: 0.92 !important;
}

/* Asegurar que el texto de la banda quede encima de ambas capas de imagen */
#proyectos .projects-resource__header-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Evitar que el wrapper corte la extensión superior */
#proyectos .projects-resource,
#proyectos .section__inner,
#proyectos .container {
  overflow: visible !important;
}

/* No tocar cartas: solo asegurar que sigan por encima si hiciera falta */
#proyectos .projects-resource__cards {
  position: relative !important;
  z-index: 3 !important;
}

/* =========================================================
   SINGLE IMAGE FIX — Proyectos banda superior continua
   Fecha: 2026-05-16
   Objetivo:
   - Usar una sola imagen continua en la banda superior
   - Eliminar el trozo visual agregado por una segunda capa
   - Mantener cartas, textos y layout inferior intactos
   ========================================================= */

/* La banda sigue siendo el contenedor visual de la imagen */
#proyectos .projects-resource__header {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  border-radius: 0 0 30px 30px !important;
}

/* UNA SOLA capa de imagen:
   se extiende hacia arriba dentro del mismo pseudo-elemento para evitar cortes */
#proyectos .projects-resource__header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -120px !important;
  bottom: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.42),
      rgba(246, 248, 250, 0.68)
    ),
    url("../webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(3px) saturate(0.9) contrast(0.96) !important;
  transform: scale(1.03) !important;
  transform-origin: center center !important;
  opacity: 0.92 !important;
}

/* Desactivar la segunda capa de imagen que creaba el corte */
#proyectos .projects-resource__header::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* El texto queda sobre la única imagen */
#proyectos .projects-resource__header-content {
  position: relative !important;
  z-index: 1 !important;
}

/* Mantener la parte inferior intacta */
#proyectos .projects-resource__cards {
  position: relative !important;
  z-index: 2 !important;
}

/* Mantener visible la banda completa sin cortar laterales */
#proyectos .projects-resource,
#proyectos .section__inner,
#proyectos .container {
  overflow: visible !important;
}

@media (max-width: 900px) {
  #proyectos .projects-resource__header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 0 24px 24px !important;
  }

  #proyectos .projects-resource__header::before {
    top: -90px !important;
  }
}

/* =========================================================
   CLEAN TOP FIX — Proyectos sin falta superior y sin imagen duplicada
   Fecha: 2026-05-16
   Objetivo:
   - Eliminar vacío superior contra la sección anterior
   - Usar una sola capa de fondo
   - No duplicar imagen con ::after
   - Mantener cartas, textos y layout inferior intactos
   ========================================================= */

/* Eliminar cualquier segunda capa heredada */
#proyectos .projects-resource__header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* La banda principal se pega visualmente hacia arriba sin duplicar imagen */
#proyectos .projects-resource__header {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: -72px !important;
  padding-top: calc(clamp(30px, 4vw, 42px) + 72px) !important;
  border-radius: 0 0 30px 30px !important;
}

/* Una sola capa de fondo. Si no hay imagen, queda un degradado limpio continuo. */
#proyectos .projects-resource__header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.42),
      rgba(246, 248, 250, 0.68)
    ),
    url("../webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(3px) saturate(0.9) contrast(0.96) !important;
  transform: scale(1.03) !important;
  opacity: 0.92 !important;
}

/* El texto queda sobre la única capa */
#proyectos .projects-resource__header-content {
  position: relative !important;
  z-index: 1 !important;
}

/* Mantener la zona inferior como estaba */
#proyectos .projects-resource__cards {
  position: relative !important;
  z-index: 2 !important;
}

/* Mantener visibles los laterales sin cortar */
#proyectos .projects-resource,
#proyectos .section__inner,
#proyectos .container {
  overflow: visible !important;
}

@media (max-width: 900px) {
  #proyectos .projects-resource__header {
    margin-top: -56px !important;
    padding-top: calc(28px + 56px) !important;
    border-radius: 0 0 24px 24px !important;
  }
}

/* =========================================================
   FINAL EDGE TUNE — Proyectos banda +20px y borde inferior liso
   Fecha: 2026-05-16
   Objetivo:
   - Subir la banda superior 20px adicionales
   - Mantener una sola imagen continua
   - Eliminar curvas inferiores de la banda
   - No tocar cartas, textos, layout inferior ni HTML
   ========================================================= */

/* Mantener neutralizada cualquier segunda capa */
#proyectos .projects-resource__header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Subir la banda 20px más y dejar su parte inferior lisa */
#proyectos .projects-resource__header {
  margin-top: -92px !important;
  padding-top: calc(clamp(30px, 4vw, 42px) + 92px) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Mantener una sola capa de imagen continua */
#proyectos .projects-resource__header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.42),
      rgba(246, 248, 250, 0.68)
    ),
    url("../webp/Ciudad_electronika.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(3px) saturate(0.9) contrast(0.96) !important;
  transform: scale(1.03) !important;
  opacity: 0.92 !important;
}

/* Texto intacto sobre la imagen */
#proyectos .projects-resource__header-content {
  position: relative !important;
  z-index: 1 !important;
}

/* Cartas intactas */
#proyectos .projects-resource__cards {
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile: mismo criterio, pero proporcional */
@media (max-width: 900px) {
  #proyectos .projects-resource__header {
    margin-top: -76px !important;
    padding-top: calc(28px + 76px) !important;
    border-radius: 0 !important;
  }
}

/* =========================================================
   FINAL IMAGES — Proyectos imágenes finales WebP
   Fecha: 2026-05-16
   Objetivo:
   - Insertar imágenes finales en #proyectos
   - No tocar layout, tamaños, textos, cartas ni HTML
   ========================================================= */

/* Imagen principal de la banda superior */
#proyectos .projects-resource__header::before {
  background-image:
    linear-gradient(
      145deg,
      rgba(218, 232, 244, 0.42),
      rgba(246, 248, 250, 0.68)
    ),
    url("../webp/proyectos-main.webp") !important;
}

/* Carta 01 — Pantallas LED y videowalls */
#proyectos .project-resource-card:nth-child(1) .project-resource-card__image {
  background-image:
    linear-gradient(
      145deg,
      rgba(220, 232, 243, 0.28),
      rgba(240, 244, 248, 0.46)
    ),
    url("../webp/proyecto-pantallas-led.webp") !important;
}

/* Carta 02 — Kioscos y tótems */
#proyectos .project-resource-card:nth-child(2) .project-resource-card__image {
  background-image:
    linear-gradient(
      145deg,
      rgba(220, 232, 243, 0.28),
      rgba(240, 244, 248, 0.46)
    ),
    url("../webp/proyecto-kioscos-totems.webp") !important;
}

/* Carta 03 — Software y datos */
#proyectos .project-resource-card:nth-child(3) .project-resource-card__image,
#proyectos .project-resource-card--dark .project-resource-card__image {
  background-image:
    linear-gradient(145deg, rgba(18, 24, 32, 0.24), rgba(36, 43, 52, 0.42)),
    url("../webp/proyecto-software-datos.webp") !important;
}

/* =========================================================
   FINAL TUNE — Proyectos badges a la izquierda y copy software
   Fecha: 2026-05-16
   Objetivo:
   - Mover números 01/02/03 hacia la izquierda dentro de las imágenes
   - No tocar tamaño, layout, imágenes ni cartas
   ========================================================= */

/* El área de imagen conserva su tamaño, solo cambia alineación interna */
#proyectos .project-resource-card__image {
  justify-content: flex-start !important;
  align-items: center !important;
  padding-left: 28px !important;
}

/* El badge mantiene tamaño y estilo actual */
#proyectos .project-resource-card__badge {
  flex: 0 0 auto !important;
}

/* Ajuste proporcional en pantallas medianas */
@media (max-width: 900px) {
  #proyectos .project-resource-card__image {
    padding-left: 24px !important;
  }
}

/* Ajuste proporcional en mobile */
@media (max-width: 640px) {
  #proyectos .project-resource-card__image {
    padding-left: 20px !important;
  }
}

/* =========================================================
   FINAL CLEAN — Proyectos sin números y nuevo copy software
   Fecha: 2026-05-16
   Objetivo:
   - Eliminar visualmente badges 01/02/03
   - Mantener imágenes limpias
   - No tocar layout, tamaños ni rutas de imagen
   ========================================================= */

#proyectos .project-resource-card__badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#proyectos .project-resource-card__image {
  justify-content: center !important;
  padding-left: 0 !important;
}

/* =========================================================
   FINAL STYLE — Método cartas neumorphism premium
   Fecha: 2026-05-16
   Objetivo:
   - Mejorar visualmente las 5 cartas del método
   - Aplicar neumorphism sobrio
   - No tocar estructura, altura, textos ni lado derecho
   ========================================================= */

/* Wrapper izquierdo: asegurar que no recorte sombras */
#metodo .method-visual,
#metodo .method-visual--plain-cards,
#metodo .method-plain-cards {
  overflow: visible !important;
}

/* Cartas del método: neumorphism base */
#metodo .method-plain-card {
  border-radius: 30px !important;
  background: linear-gradient(145deg, #cacaca, #f0f0f0) !important;
  box-shadow:
    10px 10px 20px #8f8f8f,
    -10px -10px 20px #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  overflow: hidden !important;
}

/* Número interno: relieve inset suave */
#metodo .method-plain-card__number {
  border-radius: 16px !important;
  background: linear-gradient(145deg, #f0f0f0, #cacaca) !important;
  box-shadow:
    inset 3px 3px 6px rgba(143, 143, 143, 0.35),
    inset -3px -3px 6px rgba(255, 255, 255, 0.82) !important;
  color: rgba(17, 24, 39, 0.76) !important;
}

/* Tipografía interna */
#metodo .method-plain-card h3 {
  color: #111827 !important;
  font-weight: 900 !important;
}

#metodo .method-plain-card p {
  color: rgba(17, 24, 39, 0.62) !important;
}

/* Última carta oscura: variante dark */
#metodo .method-plain-card:last-child {
  background: linear-gradient(145deg, #121820, #242b34) !important;
  box-shadow:
    10px 10px 20px rgba(8, 11, 15, 0.56),
    -10px -10px 20px rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#metodo .method-plain-card:last-child .method-plain-card__number {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.26),
    inset -2px -2px 5px rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

#metodo .method-plain-card:last-child h3 {
  color: rgba(255, 255, 255, 0.94) !important;
}

#metodo .method-plain-card:last-child p {
  color: rgba(255, 255, 255, 0.64) !important;
}

/* Responsive */
@media (max-width: 900px) {
  #metodo .method-plain-card {
    border-radius: 24px !important;
  }
}

/* =========================================================
   HERO VIDEO INSERT — video 9:16 sin mover contenedor
   Fecha: 2026-05-16
   Objetivo:
   - Reemplazar placeholder por video real
   - Mantener tamaño, posición y layout existentes
   - No mover el contenedor hero-video-placeholder
   ========================================================= */

#hero .hero-video-inner {
  position: relative !important;
  overflow: hidden !important;
}

/* Video real dentro del contenedor existente */
#hero .hero-video-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Eliminar el texto anterior "Video 9:16" sin tocar el contenedor */
#hero .hero-video-inner::before {
  content: none !important;
  display: none !important;
}

/* Mantener el video quieto, sin animaciones añadidas */
#hero .hero-video-media {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* =========================================================
   FINAL TUNE — Software fondo blanco y neumorphism limpio
   Fecha: 2026-05-16
   Objetivo:
   - Fondo blanco solo en la sección #software
   - Mantener contenedor, layout, altura y contenido intactos
   - Ajustar neumorphism para fondo claro premium
   ========================================================= */

/* Fondo real de la sección: blanco limpio */
#software {
  background: #ffffff !important;
}

/* Contenedor interno: mismo tamaño y posición, solo apariencia neumorphism */
#software .ek-software-section {
  background: linear-gradient(145deg, #f4f5f6 0%, #e7eaed 100%) !important;
  border: 1px solid rgba(17, 24, 39, 0.075) !important;
  box-shadow:
    18px 18px 36px rgba(148, 163, 184, 0.36),
    -18px -18px 36px rgba(255, 255, 255, 0.95),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(17, 24, 39, 0.045) !important;
}

/* Label superior: relieve claro, sobrio */
#software .ek-interactive-label {
  background: linear-gradient(145deg, #f9fafb 0%, #e3e6ea 100%) !important;
  color: rgba(17, 24, 39, 0.72) !important;
  border: 1px solid rgba(17, 24, 39, 0.07) !important;
  box-shadow:
    6px 6px 12px rgba(148, 163, 184, 0.28),
    -6px -6px 12px rgba(255, 255, 255, 0.96),
    inset 1px 1px 0 rgba(255, 255, 255, 0.86),
    inset -1px -1px 0 rgba(17, 24, 39, 0.035) !important;
}

/* Tarjeta visual central: neumorphism claro con contraste suficiente */
#software .ek-visual-card {
  background: linear-gradient(145deg, #eef1f4 0%, #dfe4e8 100%) !important;
  border: 1px solid rgba(17, 24, 39, 0.075) !important;
  box-shadow:
    14px 14px 28px rgba(148, 163, 184, 0.34),
    -14px -14px 28px rgba(255, 255, 255, 0.95),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(17, 24, 39, 0.045) !important;
}

/* Botones del selector: relieve claro premium */
#software .ek-switch {
  background: linear-gradient(145deg, #f4f6f8 0%, #dde3e8 100%) !important;
  color: rgba(17, 24, 39, 0.82) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow:
    8px 8px 16px rgba(148, 163, 184, 0.32),
    -8px -8px 16px rgba(255, 255, 255, 0.96),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(17, 24, 39, 0.04) !important;
}

/* Estado activo: visible, pero no chillón */
#software .ek-switch.is-active {
  color: #0f172a !important;
  border: 1px solid rgba(30, 64, 175, 0.34) !important;
  background: linear-gradient(145deg, #f7f9fb 0%, #dfe8f3 100%) !important;
  box-shadow:
    8px 8px 16px rgba(148, 163, 184, 0.34),
    -8px -8px 16px rgba(255, 255, 255, 0.98),
    0 0 0 1px rgba(30, 64, 175, 0.12),
    0 0 18px rgba(30, 64, 175, 0.1),
    inset 1px 1px 0 rgba(255, 255, 255, 0.86),
    inset -1px -1px 0 rgba(30, 64, 175, 0.08) !important;
}

/* Hover: mantener sensación premium sin mover layout agresivamente */
#software .ek-switch:hover {
  color: #1e40af !important;
  border-color: rgba(30, 64, 175, 0.28) !important;
  box-shadow:
    9px 9px 18px rgba(148, 163, 184, 0.36),
    -9px -9px 18px rgba(255, 255, 255, 1),
    0 0 14px rgba(30, 64, 175, 0.08),
    inset 1px 1px 0 rgba(255, 255, 255, 0.86),
    inset -1px -1px 0 rgba(30, 64, 175, 0.06) !important;
}

/* Botón Más info */
#software .ek-more-info {
  background: linear-gradient(145deg, #f4f6f8 0%, #dde3e8 100%) !important;
  color: rgba(17, 24, 39, 0.82) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow:
    8px 8px 16px rgba(148, 163, 184, 0.32),
    -8px -8px 16px rgba(255, 255, 255, 0.96),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(17, 24, 39, 0.04) !important;
}

#software .ek-more-info:hover,
#software .ek-more-info:focus-visible {
  color: #1e40af !important;
  border-color: rgba(30, 64, 175, 0.32) !important;
  box-shadow:
    9px 9px 18px rgba(148, 163, 184, 0.36),
    -9px -9px 18px rgba(255, 255, 255, 1),
    0 0 16px rgba(30, 64, 175, 0.1),
    inset 1px 1px 0 rgba(255, 255, 255, 0.86),
    inset -1px -1px 0 rgba(30, 64, 175, 0.06) !important;
}

/* Texto interno: contraste sobre fondo claro */
#software .ek-interactive-copy .eyebrow {
  color: #111827 !important;
}

#software .ek-interactive-copy h2 {
  color: #0f172a !important;
}

#software .ek-interactive-copy p {
  color: rgba(15, 23, 42, 0.64) !important;
}

/* Imagen/video central: sombra limpia */
#software .ek-visual-img {
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.18)) !important;
}

/* =========================================================
   FINAL EMPHASIS — Software contenedor más marcado
   Fecha: 2026-05-16
   Objetivo:
   - Marcar más SOLO el contenedor principal
   - No tocar contenido interno, layout, textos ni elementos hijos
   ========================================================= */

/* Fondo de sección se mantiene blanco */
#software {
  background: #ffffff !important;
}

/* Reforzar únicamente el contenedor visual principal */
#software .ek-software-section {
  background: linear-gradient(145deg, #eef1f4 0%, #d9dee3 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow:
    24px 24px 44px rgba(100, 116, 139, 0.46),
    -22px -22px 42px rgba(255, 255, 255, 1),
    inset 2px 2px 4px rgba(255, 255, 255, 0.82),
    inset -2px -2px 4px rgba(15, 23, 42, 0.075) !important;
}

/* Borde interno sutil para dar más definición sin tocar hijos */
#software .ek-software-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    inset 0 0 32px rgba(15, 23, 42, 0.035) !important;
  z-index: 0 !important;
}

/* Asegurar que el contenido interno quede visualmente encima sin modificarlo */
#software .ek-software-section > * {
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   FINAL CLEAN — Ocultar labels superiores Hardware y Software
   Fecha: 2026-05-16
   Objetivo:
   - Eliminar visualmente las píldoras 05 y 06
   - No tocar layout, contenedores, contenido ni alturas
   ========================================================= */

#soluciones .ek-interactive-label,
#software .ek-interactive-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   CLIENTES CAROUSEL — Proyectos convertido a clientes
   Fecha: 2026-05-17
   Objetivo:
   - Reemplazar cartas por carrusel infinito de clientes
   - Usar logos demo temporales
   - Mantener banda superior, altura y estructura general
   ========================================================= */

#proyectos .clients-carousel {
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

#proyectos .clients-carousel__viewport {
  width: 100% !important;
  overflow: hidden !important;
  padding: 30px 0 !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, #e6e8eb, #f6f7f8) !important;
  box-shadow:
    inset 6px 6px 14px rgba(143, 143, 143, 0.18),
    inset -6px -6px 14px rgba(255, 255, 255, 0.84) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  ) !important;
}

#proyectos .clients-carousel__track {
  display: flex !important;
  width: max-content !important;
  gap: 22px !important;
  align-items: center !important;
  animation: ekClientsMarquee 42s linear infinite !important;
  will-change: transform !important;
}

#proyectos .clients-carousel:hover .clients-carousel__track {
  animation-play-state: paused !important;
}

#proyectos .clients-carousel__item {
  flex: 0 0 auto !important;
  width: 170px !important;
  height: 82px !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 24px !important;
  background: linear-gradient(145deg, #cacaca, #f0f0f0) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    8px 8px 16px rgba(143, 143, 143, 0.54),
    -8px -8px 16px rgba(255, 255, 255, 0.92) !important;
  overflow: hidden !important;
}

#proyectos .clients-carousel__item img {
  display: block !important;
  max-width: 118px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.78 !important;
  filter: grayscale(1) contrast(0.92) brightness(0.92) !important;
}

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

@media (max-width: 900px) {
  #proyectos .clients-carousel {
    width: min(100%, 860px) !important;
  }

  #proyectos .clients-carousel__viewport {
    padding: 24px 0 !important;
    border-radius: 24px !important;
  }

  #proyectos .clients-carousel__track {
    gap: 16px !important;
    animation-duration: 46s !important;
  }

  #proyectos .clients-carousel__item {
    width: 145px !important;
    height: 72px !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
  }

  #proyectos .clients-carousel__item img {
    max-width: 100px !important;
    max-height: 36px !important;
  }
}

@media (max-width: 640px) {
  #proyectos .clients-carousel__viewport {
    padding: 20px 0 !important;
    border-radius: 22px !important;
  }

  #proyectos .clients-carousel__track {
    gap: 14px !important;
    animation-duration: 50s !important;
  }

  #proyectos .clients-carousel__item {
    width: 132px !important;
    height: 66px !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
  }

  #proyectos .clients-carousel__item img {
    max-width: 92px !important;
    max-height: 32px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #proyectos .clients-carousel__track {
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
   CLIENTES LOGO CAROUSEL — Clean implementation
   Fecha: 2026-05-17
   Objetivo:
   - Carrusel infinito limpio sin scroll horizontal
   - No invasivo: no toca altura, padding ni layout de sección
   ========================================================= */

.clients-logo-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(18px, 2.5vw, 28px) 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    14px 14px 32px rgba(15, 23, 42, 0.08),
    -12px -12px 28px rgba(255, 255, 255, 0.78);
}

.clients-logo-carousel::before,
.clients-logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(48px, 8vw, 120px);
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.clients-logo-carousel::before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(245, 247, 250, 0.95),
    rgba(245, 247, 250, 0)
  );
}

.clients-logo-carousel::after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(245, 247, 250, 0.95),
    rgba(245, 247, 250, 0)
  );
}

.clients-logo-track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  width: max-content;
  animation: clientsLogoMarquee 28s linear infinite;
}

.clients-logo-carousel:hover .clients-logo-track {
  animation-play-state: paused;
}

.clients-logo-item {
  flex: 0 0 auto;
  width: clamp(120px, 14vw, 180px);
  height: clamp(64px, 8vw, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.75),
    inset -1px -1px 2px rgba(15, 23, 42, 0.04),
    8px 8px 20px rgba(15, 23, 42, 0.07);
}

.clients-logo-item img {
  display: block;
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(1);
}

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

@media (max-width: 768px) {
  .clients-logo-carousel {
    margin-top: 28px;
    border-radius: 22px;
  }

  .clients-logo-track {
    gap: 16px;
    animation-duration: 22s;
  }

  .clients-logo-item {
    width: 132px;
    height: 68px;
    padding: 14px 18px;
  }

  .clients-logo-item img {
    max-height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-logo-track {
    animation: none;
  }
}

/* =========================================================
   CONTACTO SECTION FIX — Borde punteado y formulario
   Fecha: 2026-05-17
   Objetivo:
   - Eliminar línea punteada del contenedor de contacto
   - Reducir ancho del formulario para evitar corte derecho
   - Mantener neumorphism, textos, inputs y layout intactos
   ========================================================= */

/* Eliminar borde punteado solo en #contacto */
#contacto .qa-placeholder {
  border: none !important;
  outline: none !important;
}

/* Ajustar columnas del contact-frame para que el formulario no se corte */
#contacto .contact-frame {
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1fr) !important;
  align-items: center !important;
}

/* Acotar el ancho máximo del formulario */
#contacto .contact-form {
  width: min(100%, 660px) !important;
  max-width: 660px !important;
  justify-self: start !important;
}

/* Responsive: apilado en móvil/tablet */
@media (max-width: 1000px) {
  #contacto .contact-frame {
    grid-template-columns: 1fr !important;
  }

  #contacto .contact-form {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   TENSIÓN OPERATIVA — Balance estético y composición premium
   Fecha: 2026-05-17
   Objetivo:
   - Centrar el bloque dentro del ancho visual del header
   - Acercar el texto izquierdo hacia el centro
   - Juntar las cartas, reducir su ancho y desplazarlas a la izquierda
   ========================================================= */

#problema .problem-frame {
  max-width: 1280px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(360px, 440px) minmax(560px, 700px) !important;
  column-gap: clamp(36px, 4vw, 64px) !important;
  justify-content: center !important;
  align-items: center !important;
}

#problema .section-copy {
  transform: translateX(24px) !important;
}

#problema .problem-showcase {
  transform: translateX(-56px) !important;
  gap: 12px !important;
  justify-content: start !important;
}

#problema .problem-card,
#problema .problem-card__inner {
  width: 138px !important;
  min-width: 138px !important;
  max-width: 138px !important;
}

#problema .problem-card__inner {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#problema .problem-card__number {
  font-size: clamp(2.7rem, 4vw, 3.75rem) !important;
  line-height: 0.88 !important;
}

#problema .problem-card p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 1200px) {
  #problema .problem-frame {
    max-width: 1120px !important;
    grid-template-columns: minmax(320px, 400px) minmax(500px, 620px) !important;
    column-gap: 32px !important;
  }

  #problema .section-copy {
    transform: translateX(12px) !important;
  }

  #problema .problem-showcase {
    transform: translateX(-28px) !important;
    gap: 10px !important;
  }

  #problema .problem-card,
  #problema .problem-card__inner {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }
}

@media (max-width: 900px) {
  #problema .section-copy,
  #problema .problem-showcase {
    transform: none !important;
  }

  #problema .problem-frame {
    grid-template-columns: 1fr !important;
    justify-content: initial !important;
  }

  #problema .problem-card,
  #problema .problem-card__inner {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* HEADER NAV BALANCE — desktop estrecho 1200–1320px */
@media (min-width: 1200px) and (max-width: 1320px) {
  .nav__list {
    gap: 12px;
  }
  .header__container {
    column-gap: 20px;
  }
}

/* debug centerline removed */

/* =========================================================
   HEADER VISIBILITY CLEAN FIX — after intro only
   Fecha: 2026-05-17
   Objetivo:
   - Restaurar header como flex
   - Mostrarlo solo después de la intro
   - Proteger navegación desktop
   - No tocar secciones internas
   ========================================================= */

.header {
  display: flex !important;
}

body:not(.intro-dismissed) .header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.intro-dismissed .header {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 5000 !important;
}

body.intro-dismissed .header__container {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.intro-dismissed .header__logo,
body.intro-dismissed .header__actions {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (min-width: 1200px) {
  body.intro-dismissed .header .nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.intro-dismissed .header .nav__list {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.intro-dismissed .header__actions {
    display: flex !important;
  }

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

/* -----------------------------------------------
   WhatsApp Popup Modal (global)
----------------------------------------------- */
.wa-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wa-popup.is-open { display: flex; }

.wa-popup__box {
  position: relative;
  border-radius: 28px;
  background: linear-gradient(145deg, #e0e0e0, #f5f5f5);
  box-shadow: 7px 7px 14px #848484, -7px -7px 14px #ffffff;
  padding: 40px 36px 36px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}

.wa-popup__close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 1.1rem;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: color 0.2s;
}
.wa-popup__close:hover { color: var(--color-accent, #e63329); }

.wa-popup__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.wa-popup__subtitle {
  font-size: 0.84rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 18px;
}
.wa-popup__number {
  font-size: 1rem;
  font-weight: 700;
  color: #25d366;
  margin-bottom: 6px;
}
.wa-popup__msg {
  font-size: 0.8rem;
  color: #999;
  font-style: italic;
  margin-bottom: 20px;
}
.wa-popup__qr {
  width: 128px;
  height: 128px;
  border-radius: 12px;
  box-shadow: 3px 3px 8px #c0c0c0, -3px -3px 8px #ffffff;
  margin: 0 auto 24px;
  display: block;
}
.wa-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-popup__btn {
  display: block;
  padding: 12px 20px;
  border-radius: 50px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.wa-popup__btn:hover {
  box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
  transform: translateY(1px);
}
.wa-popup__btn--copy { color: #555; }

@media (max-width: 479px) {
  .wa-popup__box { padding: 32px 18px 28px; }
  .wa-popup__title { font-size: 1rem; }
}

/* -----------------------------------------------
   Contact Form — Select, Success, Error
----------------------------------------------- */
#contacto select {
  width: 100%;
  border: none;
  outline: none;
  background: var(--neumo-base);
  border-radius: 18px;
  box-shadow: var(--neumo-shadow-inset);
  padding: 12px 14px;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  color: var(--color-text-primary);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

#contacto select option[value=""][disabled] {
  color: #aaa;
}

#contacto .form-check__link {
  color: var(--color-accent, #e63329);
  text-decoration: underline;
}

#contacto .form-error-msg {
  font-size: 0.68rem;
  color: var(--color-accent, #e63329);
  margin: 0;
  min-height: 0;
  display: none;
}

#contacto .form-error-msg:not(:empty) {
  display: block;
}

#contacto .form-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Lead Feedback Modal */
.lead-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lead-modal.is-open {
  display: flex;
}

.lead-modal__box {
  position: relative;
  max-width: 420px;
  width: 100%;
  border-radius: 28px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: 14px 14px 28px #b0b0b0, -14px -14px 28px #ffffff;
  padding: 40px 32px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lead-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4d4d4, #f0f0f0);
  box-shadow: 4px 4px 8px #b8b8b8, -4px -4px 8px #ffffff;
  font-size: 1rem;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

.lead-modal__close:hover {
  box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
  color: var(--color-accent, #e63329);
}

.lead-modal__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4d4d4, #f5f5f5);
  box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.lead-modal__icon--success { color: #2a9d3f; }
.lead-modal__icon--error   { color: var(--color-accent, #e63329); }

.lead-modal__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0;
  line-height: 1.2;
}

.lead-modal__text {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #666);
  line-height: 1.55;
  max-width: 340px;
  margin: 0;
}

.lead-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.lead-modal__btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  background: linear-gradient(145deg, #d4d4d4, #f5f5f5);
  box-shadow: 4px 4px 8px #b8b8b8, -4px -4px 8px #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent, #e63329);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.lead-modal__btn:hover {
  box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  transform: translateY(1px);
}

.lead-modal__btn--secondary {
  color: #555;
}

@media (max-width: 479px) {
  .lead-modal__box { padding: 36px 20px 28px; }
  .lead-modal__actions { flex-direction: column; align-items: center; }
}

/* Inline form validation */
.form-field-error {
  display: none;
  font-size: 0.74rem;
  color: var(--color-accent, #e63329);
  margin: -4px 0 10px 2px;
  padding-left: 2px;
}
.form-field-error.is-visible { display: block; }

input.is-invalid {
  outline: none;
  box-shadow: 0 0 0 2px rgba(230, 51, 41, 0.3), 4px 4px 10px #c8c8c8, -4px -4px 10px #ffffff;
}

.form-check__error {
  display: none;
  font-size: 0.74rem;
  color: var(--color-accent, #e63329);
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f8e8e7, #fff3f3);
  box-shadow: 2px 2px 6px #ddc0bf, -2px -2px 6px #ffffff;
  line-height: 1.4;
}
.form-check.is-invalid .form-check__error { display: block; }
.form-check.is-invalid > input[type="checkbox"] {
  outline: 2px solid rgba(230, 51, 41, 0.4);
  outline-offset: 2px;
}

/* ===== FAQ GEO ===== */
.faq-geo-section{background:#fff;color:#151515}
.faq-geo-frame{width:min(1140px,100%);margin:0 auto;display:grid;grid-template-columns:.8fr 1.35fr;gap:clamp(24px,4vw,54px);align-items:center;max-height:100%}
.faq-geo-copy{max-width:420px}
.faq-geo-title{margin:0 0 14px;font-size:clamp(1.55rem,2.5vw,2.55rem);line-height:.98;letter-spacing:-.055em;font-weight:900;color:#111}
.faq-geo-text{margin:0;font-size:.82rem;line-height:1.65;font-weight:500;color:rgba(20,20,20,.62)}
.faq-geo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.faq-geo-tab{border:1px solid rgba(0,0,0,.08);background:#f5f5f5;color:rgba(20,20,20,.72);border-radius:999px;padding:8px 12px;font-size:.68rem;line-height:1;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:all .2s ease}
.faq-geo-tab:hover,.faq-geo-tab.is-active{background:#151515;color:#fff;border-color:#151515}
.faq-geo-panel{max-height:58vh;overflow-y:auto;padding:8px 10px 8px 0;scrollbar-width:thin}
.faq-geo-item{border-top:1px solid rgba(0,0,0,.09)}
.faq-geo-item:last-child{border-bottom:1px solid rgba(0,0,0,.09)}
.faq-geo-question{width:100%;min-height:42px;padding:0;border:0;background:transparent;display:grid;grid-template-columns:36px 1fr 22px;gap:12px;align-items:center;text-align:left;cursor:pointer;color:#151515}
.faq-geo-number{font-size:.66rem;font-weight:900;color:rgba(20,20,20,.38)}
.faq-geo-question-text{font-size:.82rem;line-height:1.25;font-weight:800;letter-spacing:-.015em}
.faq-geo-icon{font-size:1rem;font-weight:700;color:rgba(20,20,20,.46);transition:transform .2s ease}
.faq-geo-item.is-open .faq-geo-icon{transform:rotate(45deg)}
.faq-geo-answer{display:none;padding:0 22px 16px 48px}
.faq-geo-item.is-open .faq-geo-answer{display:block}
.faq-geo-answer p{margin:0;font-size:.74rem;line-height:1.55;color:rgba(20,20,20,.62);font-weight:500}
.faq-geo-item.is-hidden{display:none}
@media(max-width:900px){.faq-geo-frame{grid-template-columns:1fr;gap:22px;align-items:start}.faq-geo-copy{max-width:100%;text-align:center}.faq-geo-tabs{justify-content:center}.faq-geo-panel{max-height:52vh;padding-right:4px}}
@media(max-width:640px){.faq-geo-title{font-size:1.7rem}.faq-geo-question{grid-template-columns:30px 1fr 18px;min-height:40px;gap:8px}.faq-geo-question-text{font-size:.76rem}.faq-geo-answer{padding-left:38px}.faq-geo-answer p{font-size:.7rem}}

/* ── HEADER MOBILE REBUILD CLEAN 2026-05-19 ── */

/* Íconos siempre ocultos en desktop */
.header__actions .btn-icon { display: none; }

/* Mobile: restaurar flex, ordenar logo→hamburguesa→actions, botones icono-only */
@media (max-width: 1199px) {
  body.intro-dismissed .header__container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 var(--space-sm) !important;
    gap: 0 !important;
  }
  body.intro-dismissed .header__logo {
    order: 1 !important;
    flex: 0 1 auto !important;
    margin-right: auto !important;
  }
  body.intro-dismissed .menu-toggle {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-right: 8px !important;
  }
  body.intro-dismissed .header__actions {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-right: 0 !important;
  }
  body.intro-dismissed .header__actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  body.intro-dismissed .header__actions .btn .btn-text { display: none !important; }
  body.intro-dismissed .header__actions .btn .btn-icon { display: block !important; }
}

/* M1 — FAQ tabs wrap on small screens */
@media (max-width: 640px) {
  .faq-geo-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* M5/M6 — Liberación de height locks en mobile */
@media (max-width: 900px) {

  /* M5 — Sección y section__inner: pasar de height fijo a height auto */
  #problema.section,
  #metodo.section,
  #electronika.section,
  #contacto.section {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #problema > .section__inner,
  #metodo > .section__inner,
  #electronika > .section__inner,
  #contacto > .section__inner {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* M6 — Frames internos: liberar altura y desbordamiento */
  #problema .qa-placeholder,
  #metodo .qa-placeholder,
  #electronika .qa-placeholder,
  #contacto .qa-placeholder,
  #problema .section-frame,
  #metodo .section-frame,
  #electronika .section-frame,
  #contacto .section-frame,
  #problema .content-frame,
  #metodo .content-frame,
  #electronika .content-frame,
  #contacto .content-frame,
  #problema .problem-frame {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* M8 — Más info button debajo de imagen en mobile (Hardware + Software) */
@media (max-width: 900px) {

  /* Grid pasa a flex column para habilitar order */
  #soluciones .ek-interactive-grid,
  #software .ek-interactive-grid {
    display: flex;
    flex-direction: column;
  }

  /* display:contents aplana hijos de copy al flex container */
  #soluciones .ek-interactive-copy,
  #software .ek-interactive-copy {
    display: contents;
  }

  /* Texto: aparece primero */
  #soluciones .ek-interactive-copy > .eyebrow,
  #soluciones .ek-interactive-copy > h2,
  #soluciones .ek-interactive-copy > p,
  #software .ek-interactive-copy > .eyebrow,
  #software .ek-interactive-copy > h2,
  #software .ek-interactive-copy > p {
    order: 1;
  }

  /* Imagen: aparece segunda */
  #soluciones .ek-visual-wrap,
  #software .ek-visual-wrap {
    order: 2;
  }

  /* Botón: aparece tercero, debajo de la imagen */
  #soluciones .ek-more-info,
  #software .ek-more-info {
    order: 3;
    align-self: flex-start;
    margin-top: 16px;
  }

  /* Switches: aparecen al final */
  #soluciones .ek-selector,
  #software .ek-selector {
    order: 4;
  }
}