/* ============================================================
   NEXO COOP — Corporate site
   Sistema visual basado en BRAND-SHEET de Nora (NEXO Cognitive SL)
   ============================================================ */

:root {
  /* Surfaces */
  --abyss:    #06070D;
  --surface:  #0F1015;
  --elevated: #16181F;
  --border:   #1F2230;

  /* Ink */
  --ink:       #F4F4F7;
  --ink-soft:  #A1A1AA;
  --ink-muted: #6E6E76;

  /* Brand */
  --indigo:      #6366F1;
  --indigo-glow: #818CF8;
  --violet:      #A855F7;
  --cyan:        #22D3EE;
  --amber:       #F59E0B;
  --emerald:     #10B981;
  --rose:        #F43F5E;

  /* Gradients */
  --grad-main:  linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #22D3EE 100%);
  --grad-warm:  linear-gradient(135deg, #6366F1 0%, #A855F7 60%, #F59E0B 100%);
  --grad-soft:  linear-gradient(135deg, rgba(99,102,241,.10), rgba(168,85,247,.06));
  --halo:       radial-gradient(closest-side, rgba(99,102,241,.35), transparent 70%);

  --line:        rgba(168,168,200,.10);
  --line-strong: rgba(168,168,200,.20);

  --maxw: 1180px;
  --radius: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);

  color-scheme: dark;
}

/* Ink-muted +luminancia para cumplir contraste AA en texto pequeño
   (sobre #06070D el antiguo #6E6E76 quedaba ~4.0:1). Marca preservada. */
:root { --ink-muted: #8A8A95; }

::selection { background: rgba(129,140,248,.35); color: #fff; }

/* Foco visible accesible — nunca outline:none sin reemplazo */
:focus-visible {
  outline: 2px solid var(--indigo-glow);
  outline-offset: 3px;
  border-radius: 6px;
}
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--indigo-glow);
  outline-offset: 4px;
}

/* Scrollbar acorde a la marca */
* { scrollbar-width: thin; scrollbar-color: #2A2D3C var(--abyss); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: #2A2D3C; border-radius: 8px; border: 3px solid var(--abyss); }
::-webkit-scrollbar-thumb:hover { background: #3A3E52; }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  /* touch-action: manipulation desactiva el zoom por doble-tap en iOS y
     deja sólo pan/scroll y tap normales — primera línea de defensa. */
  touch-action: manipulation;
}

/* iOS Safari hace zoom automático en cualquier input/select/textarea con
   font-size < 16px. Regla global de seguridad para evitar el descuadre. */
input, select, textarea { font-size: 16px; }

/* Oculta el badge flotante de reCAPTCHA Enterprise. Google lo permite
   siempre que se mantenga el aviso visible en el formulario, requisito
   que ya cumplimos en el modal de contacto ("Protegido por reCAPTCHA
   Enterprise") más la mención del proveedor en la política de privacidad. */
.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  background: var(--abyss);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overscroll-behavior-x: none;
  isolation: isolate;
}

/* Ambient background glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vw 50vh at 78% -5%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(55vw 45vh at 12% 8%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(50vw 45vh at 60% 100%, rgba(34,211,238,.07), transparent 60%);
  pointer-events: none;
}

/* Grano sutil: profundidad atmosférica, sin fondos planos */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

h1, h2, h3 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--indigo-glow);
  display: inline-block;
  margin-bottom: 18px;
}

.grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); border-color: var(--indigo); }
.btn-primary {
  background: var(--grad-main);
  border: none;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: 0 10px 40px -12px rgba(99,102,241,.7);
}
.btn-primary:hover { box-shadow: 0 16px 50px -10px rgba(168,85,247,.75); }
.btn-arrow { transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------------- Nav ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(6,7,13,.62);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled {
  border-bottom: 1px solid var(--line);
  background: rgba(6,7,13,.86);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.nav-logo svg { height: 38px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 18px; }

.lang-toggle {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.lang-toggle button {
  background: transparent;
  color: var(--ink-soft);
  border: none;
  min-height: 40px;
  padding: 9px 16px;
  cursor: pointer;
  letter-spacing: .08em;
  transition: color .2s, background .2s;
}
.lang-toggle button.active { color: #fff; background: var(--indigo-glow); }
.lang-toggle button:not(.active):hover { color: var(--ink); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
}

/* ---------------- Hero ---------------- */
.hero { position: relative; padding: 92px 0 86px; text-align: center; overflow: clip; }
.hero-halo {
  position: absolute;
  top: -60px; left: 50%;
  width: 760px; height: 760px;
  max-width: 100%;
  transform: translateX(-50%);
  background: var(--halo);
  pointer-events: none;
  z-index: -1;
}
.hero-logo-svg {
  width: 138px; height: 138px;
  display: block;
  margin: 0 auto 30px;
  overflow: visible;
  filter: drop-shadow(0 8px 40px rgba(99,102,241,.45));
  animation: lgFloat 6.5s var(--ease) infinite;
}
.hero h1 { font-size: clamp(38px, 6.4vw, 76px); max-width: 16ch; margin: 0 auto 26px; }
.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 38px;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: center;
  margin-top: 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.trust-strip span { display: inline-flex; align-items: center; gap: 9px; }
.trust-strip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 12px rgba(16,185,129,.8); }

/* ---------------- Sections ---------------- */
section { padding: 96px 0; position: relative; }
.section-head { max-width: 60ch; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin-bottom: 18px; }
.section-head p { color: var(--ink-soft); font-size: 18px; }

.divider { height: 1px; background: var(--line); border: none; }

/* Meaning split */
.meaning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.meaning-card {
  background: var(--grad-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px;
}
.meaning-card .term {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 30px;
  margin-bottom: 6px;
}
.meaning-card .latin { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink-muted); margin-bottom: 14px; }
.meaning-card p { color: var(--ink-soft); }
.meaning-join {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
}

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.pillar:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.pillar-ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--indigo-glow);
}
.pillar h3 { font-size: 21px; margin-bottom: 10px; }
.pillar p { color: var(--ink-soft); font-size: 15.5px; }

/* Products */
.product-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  overflow: hidden;
}
.product-body { padding: 56px; }
.product-flag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.product-body h3 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 16px; }
.product-body > p { color: var(--ink-soft); margin-bottom: 26px; max-width: 46ch; }
.product-feats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.product-feats li {
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}
.product-visual {
  background:
    radial-gradient(closest-side, rgba(99,102,241,.32), transparent 72%),
    linear-gradient(135deg, rgba(168,85,247,.10), rgba(34,211,238,.05));
  display: grid; place-items: center;
  padding: 40px;
  border-left: 1px solid var(--line);
}
.product-visual img { width: 200px; filter: drop-shadow(0 10px 50px rgba(99,102,241,.5)); }
.product-soon {
  margin-top: 22px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-muted);
}

/* Company */
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.company-copy h2 { font-size: clamp(28px, 4vw, 46px); margin-bottom: 20px; }
.company-copy p { color: var(--ink-soft); margin-bottom: 16px; }
.company-card {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
}
.company-card .eyebrow { margin-bottom: 22px; }
.legal-rows { display: grid; gap: 0; }
.legal-rows .row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.legal-rows .row:last-child { border-bottom: none; }
.legal-rows .k { color: var(--ink-muted); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; }
.legal-rows .v { color: var(--ink); text-align: right; font-weight: 500; }

/* Contact */
.contact { text-align: center; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.contact-card {
  background: var(--grad-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 28px;
  transition: border-color .3s, transform .3s;
}
.contact-card:hover { border-color: var(--indigo); transform: translateY(-4px); }
.contact-card .lbl { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--indigo-glow); margin-bottom: 14px; }
.contact-card .val { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 21px; }
.contact-card .sub { color: var(--ink-muted); font-size: 13.5px; margin-top: 8px; }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 50px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.footer-brand svg { height: 40px; margin-bottom: 16px; }
.footer-brand p { color: var(--ink-muted); font-size: 14px; max-width: 34ch; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; font-weight: 600; }
.footer-col a, .footer-col span { display: block; color: var(--ink-soft); font-size: 14.5px; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-muted);
}
.footer-legal .links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--ink); }

/* ---------------- Legal pages ---------------- */
.legal-page { max-width: 820px; margin: 0 auto; padding: 70px 28px 100px; }
.legal-page h1 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 10px; }
.legal-page .updated { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink-muted); margin-bottom: 44px; }
.legal-page h2 { font-size: 23px; margin: 40px 0 14px; }
.legal-page p, .legal-page li { color: var(--ink-soft); margin-bottom: 14px; }
.legal-page ul { padding-left: 22px; list-style: disc; }
.legal-page a { color: var(--indigo-glow); }
.legal-page a:hover { text-decoration: underline; }
.back-link { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-soft); margin-bottom: 30px; font-size: 14px; }
.back-link:hover { color: var(--ink); }

/* ---------------- Reveal animation ---------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- Logo vivo + efectos ---------------- */
.hero-logo-svg .lg-ring-outer,
.hero-logo-svg .lg-arc,
.hero-logo-svg .lg-ring-inner,
.hero-logo-svg .lg-core,
.hero-logo-svg .lg-halo,
.hero-logo-svg .lg-sats {
  transform-box: view-box;
  transform-origin: 40px 40px;
}
.hero-logo-svg .lg-halo       { animation: lgBreathe 5s ease-in-out infinite; }
.hero-logo-svg .lg-ring-outer { animation: lgSpin 26s linear infinite; }
.hero-logo-svg .lg-arc        { animation: lgSpinRev 13s linear infinite; }
.hero-logo-svg .lg-ring-inner { animation: lgSpin 34s linear infinite; }
.hero-logo-svg .lg-core       { animation: lgPulse 3.4s ease-in-out infinite; transform-origin: 40px 40px; }
.hero-logo-svg .lg-sats       { animation: lgSpin 20s linear infinite; }
.hero-logo-svg .lg-sat        { animation: lgTwinkle 2.6s ease-in-out infinite; }
.hero-logo-svg .lg-sat:nth-child(2) { animation-delay: .6s; }
.hero-logo-svg .lg-sat:nth-child(3) { animation-delay: 1.3s; }
/* el logo reacciona al puntero */
.hero-logo-svg:hover .lg-ring-outer { animation-duration: 8s; }
.hero-logo-svg:hover .lg-arc        { animation-duration: 4s; }
.hero-logo-svg:hover .lg-sats       { animation-duration: 6s; }
.hero-logo-svg .lg-ring-outer,
.hero-logo-svg .lg-arc,
.hero-logo-svg .lg-sats { transition: none; }

@keyframes lgSpin    { to   { transform: rotate(360deg); } }
@keyframes lgSpinRev { to   { transform: rotate(-360deg); } }
@keyframes lgPulse   { 0%,100% { transform: scale(1); }   50% { transform: scale(1.13); } }
@keyframes lgBreathe { 0%,100% { opacity: .65; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes lgFloat   { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-12px); } }
@keyframes lgTwinkle { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Halo del hero: respiración lenta */
.hero-halo { animation: heroHalo 9s ease-in-out infinite; }
@keyframes heroHalo {
  0%,100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Entrada del hero (sin esperar scroll) */
.hero .eyebrow,
.hero h1,
.hero-sub,
.hero-cta,
.trust-strip {
  opacity: 0;
  animation: heroIn .9s var(--ease) forwards;
}
.hero .eyebrow { animation-delay: .15s; }
.hero h1       { animation-delay: .28s; }
.hero-sub      { animation-delay: .42s; }
.hero-cta      { animation-delay: .56s; }
.trust-strip   { animation-delay: .72s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Texto degradado con flujo de color */
.grad-text {
  background-size: 220% auto;
  animation: gradFlow 8s linear infinite;
}
@keyframes gradFlow { to { background-position: 220% center; } }

/* Trust dots latiendo */
.trust-strip .dot { animation: dotPulse 2.4s ease-in-out infinite; }
.trust-strip span:nth-child(2) .dot { animation-delay: .4s; }
.trust-strip span:nth-child(3) .dot { animation-delay: .8s; }
.trust-strip span:nth-child(4) .dot { animation-delay: 1.2s; }
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 10px rgba(16,185,129,.7); transform: scale(1); }
  50%     { box-shadow: 0 0 18px rgba(16,185,129,1);  transform: scale(1.35); }
}

/* Reveal escalonado dentro de grids */
.pillars .reveal:nth-child(2)       { transition-delay: .10s; }
.pillars .reveal:nth-child(3)       { transition-delay: .20s; }
.pillars .reveal:nth-child(4)       { transition-delay: .30s; }
.meaning-grid .reveal:nth-child(2)  { transition-delay: .12s; }
.meaning-grid .reveal:nth-child(3)  { transition-delay: .24s; }
.contact-cards .reveal:nth-child(2) { transition-delay: .10s; }
.contact-cards .reveal:nth-child(3) { transition-delay: .20s; }

/* Botón primario: barrido de brillo */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  will-change: transform;
  animation: btnShimmer 5.5s ease-in-out infinite;
}
/* Solo transform (GPU): sin layout thrash */
@keyframes btnShimmer {
  0%, 62%  { transform: translateX(-220%) skewX(-18deg); }
  82%,100% { transform: translateX(380%)  skewX(-18deg); }
}

/* Micro-interacciones */
.nav-logo { transition: transform .3s var(--ease), filter .3s var(--ease); }
.nav-logo:hover { transform: scale(1.05); filter: drop-shadow(0 4px 16px rgba(129,140,248,.55)); }
.pillar-ico { transition: transform .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.pillar:hover .pillar-ico { transform: translateY(-3px) scale(1.08); color: #fff; box-shadow: 0 8px 24px -8px rgba(99,102,241,.7); }
.product-visual img { transition: transform .5s var(--ease); animation: lgFloat 7s var(--ease) infinite; }
.product-card:hover .product-visual img { transform: scale(1.06) rotate(2deg); }
.meaning-card, .contact-card, .pillar { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.meaning-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px -24px rgba(99,102,241,.55); }

/* ---------------- Cookie consent banner ---------------- */
.cc-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 80;
  background: rgba(15,16,21,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 24px 70px -28px rgba(0,0,0,.9);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cc-banner.cc-in { opacity: 1; transform: none; }
.cc-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.cc-text strong {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
}
.cc-text p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }
.cc-text a { color: var(--indigo-glow); text-decoration: underline; }
.cc-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cc-actions .btn { padding: 12px 24px; font-size: 14px; }
.cc-reject { background: transparent; }

@media (max-width: 720px) {
  .cc-banner { left: 10px; right: 10px; bottom: 10px; }
  .cc-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .cc-actions { flex-direction: column-reverse; }
  .cc-actions .btn { width: 100%; justify-content: center; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 940px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .product-card { grid-template-columns: 1fr; }
  .product-visual { border-left: none; border-top: 1px solid var(--line); order: -1; }
  .company-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(6,7,13,.97);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav-links.open a { padding: 16px 28px; width: 100%; }
  .nav-burger { display: flex; }
  section { padding: 72px 0; }
  .meaning-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .product-body { padding: 38px 28px; }
  .footer-top { flex-direction: column; gap: 36px; }
}

/* ---------------- Contact modal ---------------- */
.contact-card[type="button"] {
  font: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.contact-card[type="button"]:hover { transform: translateY(-3px); border-color: var(--line-strong); }

dialog.contact-modal {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--ink);
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
dialog.contact-modal::backdrop {
  background: rgba(6,7,13,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-modal-inner {
  position: relative;
  width: min(520px, calc(100% - 28px));
  margin: 4vh auto;
  background: #0E1020;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 30px 28px 24px;
  box-shadow: 0 30px 80px -30px rgba(99,102,241,.4), 0 12px 30px -12px rgba(0,0,0,.6);
  display: grid;
  gap: 12px;
}
.contact-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.contact-modal-close:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.contact-modal-inner h3 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  letter-spacing: -.01em;
}
.contact-modal-sub {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0 0 2px;
}
.contact-modal-field {
  display: grid;
  gap: 4px;
}
.contact-modal-field > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-modal-field > span .opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
  opacity: .7;
}
.contact-modal-field input,
.contact-modal-field textarea {
  font-family: 'Inter', system-ui, sans-serif;
  /* 16px obligatorio en mobile: iOS Safari hace zoom automático al focar
     cualquier input con font-size < 16px, lo que descuadra la página. */
  font-size: 16px;
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color .2s, background .2s;
  resize: vertical;
}
.contact-modal-field input:focus,
.contact-modal-field textarea:focus {
  outline: none;
  border-color: var(--indigo-glow);
  background: rgba(255,255,255,.06);
}
.contact-modal-err {
  color: #fda4a4;
  font-size: 12.5px;
  min-height: 14px;
  font-style: normal;
}
.contact-modal-honey {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-modal-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 2px 0;
}
.contact-modal-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line-strong);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  margin-top: 1px;
  flex-shrink: 0;
  position: relative;
  transition: border-color .2s, background .2s;
}
.contact-modal-consent input[type="checkbox"]:hover { border-color: var(--indigo-glow); }
.contact-modal-consent input[type="checkbox"]:checked {
  background: var(--indigo-glow);
  border-color: var(--indigo-glow);
}
.contact-modal-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #06070D;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}
.contact-modal-consent > span { grid-column: 2; }
.contact-modal-consent a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.contact-modal-consent .contact-modal-err { grid-column: 2; margin-top: 2px; }

.contact-modal-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}
.contact-modal-submit {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--grad-main);
  border-radius: 999px;
  padding: 11px 22px;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(99,102,241,.55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.contact-modal-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(168,85,247,.65); }
.contact-modal-submit svg { width: 16px; height: 16px; }
.contact-modal-submit[disabled] { opacity: .6; cursor: progress; transform: none; }

.contact-modal-legal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin: 2px 0 0;
  text-align: right;
}
.contact-modal-status {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin-top: 4px;
}
.contact-modal-status.ok { background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.35); color: #b8f3ff; }
.contact-modal-status.err { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.32); color: #ffb4b4; }

@media (max-width: 540px) {
  .contact-modal-inner { margin: 2vh auto; padding: 26px 20px 20px; border-radius: 16px; }
  .contact-modal-inner h3 { font-size: 20px; }
}
@media (max-height: 720px) {
  .contact-modal-inner { margin: 16px auto; }
}