/* ==========================================================
   Muyal Technologies — landing
   Dirección visual: fondo carbón, azul eléctrico,
   acentos rosa/lila, instrumentos retrofuturistas.
   ========================================================== */

:root {
  --bg:          #0B0D12;
  --bg-alt:      #10131B;
  --surface:     #151926;
  --surface-2:   #1B2030;
  --border:      #262C3D;
  --border-soft: #1B2130;

  --text:        #E9EDF5;
  --text-muted:  #9AA3B8;
  --text-dim:    #69728A;

  --electric:    #2E6BFF;   /* azul eléctrico */
  --magenta:     #E5489B;   /* magenta */
  --lila:        #A77BFF;   /* lila */
  --ok:          #35D07F;
  --cyan:        #2CC4E0;
  --gold:        #F2B84B;
  --warn:        #FFB13D;

  --radius:      16px;
  --radius-sm:   11px;
  --maxw:        1180px;

  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, monospace;
}


/* ==========================================================
   TEMA CLARO
   Se aplica con [data-theme="light"] en <html>.
   Sólo cambian variables: todas las reglas siguen funcionando.
   ========================================================== */
:root[data-theme="light"] {
  --bg:          #F7F8FA;
  --bg-alt:      #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F1F3F7;
  --border:      #D5DBE5;
  --border-soft: #E6EAF0;

  --text:        #131720;
  --text-muted:  #4B5567;
  --text-dim:    #7A8494;

  --electric:    #1E56E0;
  --magenta:     #C92E7C;
  --lila:        #7B4FD6;
  --ok:          #14804A;
  --cyan:        #0E7C97;
  --gold:        #A8701A;
  --warn:        #9A5B00;

  --hero-grid:   rgba(19,23,32,.07);
  --card-fade:   rgba(255,255,255,.96);
  color-scheme: light;
}

:root[data-theme="light"] body { color-scheme: light; }

/* fondos y superficies que estaban escritos en oscuro fijo */
:root[data-theme="light"] .nav { background: rgba(255,255,255,.82); }
:root[data-theme="light"] .nav.is-scrolled { background: rgba(255,255,255,.96); }
:root[data-theme="light"] .footer { background: #FFFFFF; }
:root[data-theme="light"] .product {
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(var(--tint-rgb), .10), transparent 62%),
    radial-gradient(ellipse 55% 90% at 100% 100%, rgba(var(--tint-rgb), .05), transparent 70%),
    linear-gradient(135deg, #FFFFFF 0%, #F7F8FA 100%);
  border-color: rgba(var(--tint-rgb), .30);
}
:root[data-theme="light"] .product__gl { opacity: .10; }
:root[data-theme="light"] .product__gl svg { opacity: .07; }
:root[data-theme="light"] .product__gl::after {
  background: linear-gradient(105deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 42%, rgba(255,255,255,.62) 100%);
}
:root[data-theme="light"] .hero__grid { opacity: .9; }
:root[data-theme="light"] .hero::after { background: radial-gradient(circle, rgba(46,107,255,.10), transparent 68%); }
:root[data-theme="light"] .exposure,
:root[data-theme="light"] .panorama,
:root[data-theme="light"] .section--alt,
:root[data-theme="light"] .section--boundary,
:root[data-theme="light"] .section--contact,
:root[data-theme="light"] .section--upsell { background: #FFFFFF; }
:root[data-theme="light"] .exposure::before { opacity: .35; }
:root[data-theme="light"] .stat, :root[data-theme="light"] .threat,
:root[data-theme="light"] .card, :root[data-theme="light"] .plan,
:root[data-theme="light"] .boundary__item, :root[data-theme="light"] .sector,
:root[data-theme="light"] .svc-block, :root[data-theme="light"] .sub,
:root[data-theme="light"] .upsell { background: var(--surface); }
:root[data-theme="light"] .buy {
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgba(46,107,255,.12), transparent 62%),
    radial-gradient(ellipse 55% 90% at 100% 100%, rgba(229,72,155,.08), transparent 68%),
    linear-gradient(135deg, #FFFFFF 0%, #F4F6FA 100%);
  border-color: rgba(46,107,255,.3);
}
:root[data-theme="light"] .buy__card { background: #FFFFFF; box-shadow: 0 18px 50px rgba(19,23,32,.10); }
:root[data-theme="light"] .dd__menu { background: #FFFFFF; box-shadow: 0 24px 60px rgba(19,23,32,.16); }
:root[data-theme="light"] .finding,
:root[data-theme="light"] .agent,
:root[data-theme="light"] .ledger { background: #FFFFFF; box-shadow: 0 12px 30px rgba(19,23,32,.12); }
:root[data-theme="light"] .form input,
:root[data-theme="light"] .form textarea,
:root[data-theme="light"] .form select { background: #FFFFFF; border-color: var(--border); }
:root[data-theme="light"] .blip { background: #FFFFFF; }
:root[data-theme="light"] .vault__shell { background: linear-gradient(160deg, #EDE6D4 0%, #F6F2E8 55%, #FFFFFF 100%); }
:root[data-theme="light"] .vault__door { background: radial-gradient(circle at 35% 30%, #E8DFC8, #F7F3E9 70%); }
:root[data-theme="light"] .btn--primary { color: #FFFFFF; }
:root[data-theme="light"] .product__cta,
:root[data-theme="light"] .plan__cta { color: var(--text); }
:root[data-theme="light"] .currencies li { background: rgba(168,112,26,.07); border-color: rgba(168,112,26,.3); }
:root[data-theme="light"] .settle { background: rgba(20,128,74,.07); border-color: rgba(20,128,74,.25); }
:root[data-theme="light"] .shielded li { background: #FFFFFF; }
:root[data-theme="light"] .upsell {
  background: linear-gradient(150deg, rgba(46,107,255,.09), rgba(229,72,155,.06) 60%, rgba(167,123,255,.06));
}

/* el botón de tema */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent, var(--electric)); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.025em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--electric);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------- NAV ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 13, 18, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav.is-scrolled {
  background: rgba(11, 13, 18, 0.95);
  border-bottom-color: var(--border-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.logo__mark {
  width: 27px;
  height: 27px;
  color: var(--electric);
  flex-shrink: 0;
}
.logo__light { color: var(--text-muted); font-weight: 500; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__links > a {
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color .18s;
}
.nav__links > a:hover { color: var(--text); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform .22s, opacity .22s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- BOTONES ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 27px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--electric), var(--magenta));
  color: #fff;
  box-shadow: 0 6px 26px rgba(46, 107, 255, 0.28);
}
.btn--primary:hover {
  box-shadow: 0 10px 34px rgba(229, 72, 155, 0.32);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--border);
  color: var(--text);
  padding: 9px 19px;
}
.btn--ghost:hover { border-color: var(--electric); color: var(--electric); }

.btn--link { color: var(--text-muted); padding: 13px 0; }
.btn--link:hover { color: var(--lila); }

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

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  padding: 108px 0 94px;
  overflow: hidden;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(38, 44, 61, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 44, 61, 0.4) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 78%);
  opacity: .55;
}
.hero::after {
  content: '';
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 520px;
  background: radial-gradient(circle, rgba(46, 107, 255, 0.16), transparent 68%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }

/* panel de instrumentos */
.visual {
  position: absolute;
  top: 150px;
  right: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  z-index: 1;
  opacity: .9;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.visual__panel {
  background: linear-gradient(160deg, rgba(21,25,38,.92), rgba(16,19,27,.72));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 232px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  font-family: var(--mono);
  font-size: .78rem;
}
.visual__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.visual__row:last-child { border-bottom: 0; }
.visual__row b { font-weight: 500; }
.visual .ok { color: var(--ok); }
.visual .warn { color: var(--warn); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lila);
  margin-bottom: 22px;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 3px rgba(229, 72, 155, .16);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.hero__title {
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  max-width: 780px;
}
.grad {
  background: linear-gradient(100deg, var(--electric) 5%, var(--magenta) 55%, var(--lila) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__lead {
  margin-top: 26px;
  max-width: 600px;
  font-size: 1.07rem;
  color: var(--text-muted);
  line-height: 1.72;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__trust {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
}
.hero__trust li {
  font-size: .87rem;
  color: var(--text-dim);
  position: relative;
  padding-left: 21px;
}
.hero__trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ok);
  font-size: .8rem;
}

/* ---------------- SECCIONES ---------------- */
.section { padding: 96px 0; }
.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.section__head { max-width: 700px; margin-bottom: 54px; }
.section__head h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.section__sub {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 1.01rem;
}

/* ---------------- PRODUCTOS (banners) ---------------- */
.products { display: grid; gap: 26px; }

.product {
  --tint: var(--electric);
  --tint-rgb: 46, 107, 255;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "head  body"
    "pitch body"
    "cta   body";
  gap: 18px 56px;
  align-content: center;
  min-height: 340px;
  padding: 52px 56px;
  border-radius: 24px;
  border: 1px solid rgba(var(--tint-rgb), .28);
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(var(--tint-rgb), .30), transparent 62%),
    radial-gradient(ellipse 55% 90% at 100% 100%, rgba(var(--tint-rgb), .12), transparent 70%),
    linear-gradient(135deg, #141a2b 0%, #0f121b 100%);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.product--vault    { --tint: var(--electric); --tint-rgb: 46, 107, 255; }
.product--sentinel { --tint: var(--magenta);  --tint-rgb: 229, 72, 155; }
.product--shield   { --tint: var(--lila);     --tint-rgb: 167, 123, 255; }

.product:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tint-rgb), .55);
  box-shadow: 0 28px 70px rgba(var(--tint-rgb), .16);
}

/* número fantasma de fondo */
/* ---------- Glifo de producto como TELA DE FONDO de la card ----------
   Ya no es una figura: es un patrón a sangre, recortado por el borde,
   en la esquina inferior derecha, muy tenue. */
.product__gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  color: var(--tint);
  border-radius: inherit;
}
.product__gl svg {
  position: absolute;
  right: -4%;
  bottom: -14%;
  top: auto;
  transform: none;
  width: auto;
  height: 132%;
  opacity: .10;
  /* el patrón se desvanece hacia el contenido (degradado en la máscara) */
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 100% 100%, #000 0%, #000 42%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 100% at 100% 100%, #000 0%, #000 42%, transparent 78%);
}
.product__gl::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10,12,18,.96) 0%, rgba(10,12,18,.86) 42%, rgba(10,12,18,.42) 100%);
}

/* contenido por delante del fondo */
.product > .product__head,
.product > .product__pitch,
.product > .product__body,
.product > .product__cta { position: relative; z-index: 1; }

/* Gradiente (cuenta digital / Tesorería) */
.product--treasury .product__gl svg { opacity: .14; }
.product--treasury .product__gl [stroke]:not([stroke="none"]) { stroke: url(#glTreasury); }
.product--treasury .product__gl [fill="currentColor"] { fill: url(#glTreasury); stroke: none; }

/* Desktop ancho */
@media (min-width: 1400px) { .product__gl svg { height: 145%; } }

/* Tablet */
@media (max-width: 1100px) {
  .product__gl svg { height: 120%; opacity: .085; }
}

/* Móvil */
@media (max-width: 900px) {
  .product__gl svg {
    right: -10%;
    bottom: -20%;
    height: 108%;
    opacity: .08;
  }
  .product--treasury .product__gl svg { opacity: .11; }
  .product__gl::after {
    background: linear-gradient(180deg, rgba(10,12,18,.95) 0%, rgba(10,12,18,.80) 45%, rgba(10,12,18,.45) 100%);
  }
}

@media (max-width: 480px) {
  .product__gl svg { height: 96%; right: -14%; bottom: -24%; }
}

.product > .product__head,
.product > .product__pitch,
.product > .product__body,
.product > .product__cta { position: relative; z-index: 1; }

/* Gradiente (cuenta digital / Tesorería) */
.product--treasury .product__gl [stroke]:not([stroke="none"]) { stroke: url(#glTreasury); }
.product--treasury .product__gl [fill="currentColor"] { fill: url(#glTreasury); stroke: none; }

.product__head { grid-area: head; align-self: end; }
.product__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tint);
  background: rgba(var(--tint-rgb), .13);
  border: 1px solid rgba(var(--tint-rgb), .35);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 18px;
}
.product__head h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.product__pitch {
  grid-area: pitch;
  align-self: start;
  margin-top: 0;
  color: var(--text-muted);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 460px;
}

.product__body { grid-area: body; align-self: center; }
.product__body > p:first-child {
  color: var(--text-muted);
  font-size: .95rem;
}
.product__list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}
.product__list li {
  font-size: .92rem;
  color: var(--text);
  padding-left: 24px;
  position: relative;
}
.product__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 2px;
  background: var(--tint);
  border-radius: 2px;
}
.product__list li strong { font-weight: 700; }

.product__note {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--tint-rgb), .2);
  font-size: .82rem;
  color: var(--text-dim);
  font-style: italic;
}

.product__cta {
  grid-area: cta;
  justify-self: start;
  align-self: start;
  margin-top: 8px;
  font-weight: 600;
  font-size: .94rem;
  color: #fff;
  background: rgba(var(--tint-rgb), .22);
  border: 1px solid rgba(var(--tint-rgb), .5);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  transition: background .2s, transform .16s;
}
.product__cta:hover { background: rgba(var(--tint-rgb), .4); transform: translateX(3px); }

@media (max-width: 900px) {
  .product {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "pitch" "body" "cta";
    min-height: 0;
    padding: 36px 26px;
    gap: 16px;
  }
}

/* ---------------- CARDS ---------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: border-color .22s, transform .22s;
}
.card:hover {
  border-color: var(--border);
  transform: translateY(-3px);
}
.card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 9px;
}
.card__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--electric);
  background: rgba(46, 107, 255, .1);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 13px;
}
.card > p:last-child {
  color: var(--text-muted);
  font-size: .91rem;
}

/* ---------------- PASOS ---------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 30px;
}
.step {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.step__num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--magenta);
  letter-spacing: .08em;
  display: block;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; }
.step p { color: var(--text-muted); font-size: .915rem; }

/* ---------------- FRONTERA ---------------- */
.section--boundary {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-top: 1px solid var(--border-soft);
}
.boundary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.boundary__item {
  background: var(--surface);
  padding: 28px 26px;
}
.boundary__item h3 {
  font-size: .97rem;
  font-weight: 600;
  margin-bottom: 9px;
  color: var(--text);
}
.boundary__item h3::before {
  content: '✕';
  color: var(--magenta);
  margin-right: 9px;
  font-size: .85rem;
}
.boundary__item p {
  font-size: .89rem;
  color: var(--text-muted);
}

/* ---------------- CTA / FORM ---------------- */
.section--cta { padding-bottom: 108px; }

.cta {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 62px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 52px;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  top: -170px;
  right: -90px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(229, 72, 155, .1), transparent 70%);
  pointer-events: none;
}
.cta__text { position: relative; z-index: 1; }
.cta h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.98rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.cta__text > p {
  margin-top: 16px;
  color: var(--text-muted);
  max-width: 440px;
}
.cta__points {
  margin-top: 28px;
  display: grid;
  gap: 11px;
}
.cta__points li {
  font-size: .89rem;
  color: var(--text-dim);
  padding-left: 22px;
  position: relative;
}
.cta__points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--electric);
}

.form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 15px;
}
.form__row { display: grid; gap: 6px; }
.form label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
}
.form input,
.form textarea,
.form select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: .93rem;
  transition: border-color .18s, box-shadow .18s;
  resize: vertical;
}
.form select { appearance: none; cursor: pointer; }
.form input::placeholder,
.form textarea::placeholder { color: var(--text-dim); }
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(46, 107, 255, .17);
}
.form__legal {
  font-size: .77rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------------- FOOTER ---------------- */
.footer {
  border-top: 1px solid var(--border-soft);
  padding: 54px 0 28px;
  background: var(--bg-alt);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border-soft);
}
.footer__brand { max-width: 350px; }
.footer__brand .logo__text { font-weight: 700; font-size: 1.05rem; }
.footer__brand p {
  margin-top: 12px;
  font-size: .87rem;
  color: var(--text-dim);
}
.footer__nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer__nav a { font-size: .89rem; color: var(--text-muted); }
.footer__nav a:hover { color: var(--lila); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: .81rem;
  color: var(--text-dim);
}
.footer__mono { font-family: var(--mono); font-size: .77rem; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1040px) {
  .visual { display: none; }
}

@media (max-width: 900px) {
  .product {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 26px;
  }
  .cta {
    grid-template-columns: 1fr;
    padding: 38px 26px;
    gap: 38px;
  }
}

@media (max-width: 760px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 24px 20px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 1rem;
  }
  .nav__links > a.btn {
    border-bottom: 0;
    margin-top: 14px;
    justify-content: center;
  }
  .hero { padding: 68px 0 60px; }
  .section { padding: 66px 0; }
  .section__head { margin-bottom: 36px; }
  .hero__trust { gap: 15px; flex-direction: column; }
  .hero__cta { gap: 14px; flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .footer__inner { flex-direction: column; gap: 26px; }
  .footer__base { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- v2: logo real ---------- */
.logo__img { width:auto; height:26px; flex-shrink:0; }
.visual { opacity:.95; animation:floaty 8s ease-in-out infinite; top:120px; }
.visual img { width:min(330px,28vw); height:auto; filter:drop-shadow(0 0 38px rgba(167,123,255,.28)); }
.footer__logo { height:70px; width:auto; margin-bottom:14px; opacity:.92; }
.footer__brand .logo__text { display:block; }

/* ---------- header: solo logo ---------- */

.nav__inner { height: 78px; }
@media (max-width: 760px) { .nav__links { top: 78px; } .logo__img { height: 42px; } }

/* ---------- banner: exposición de datos ---------- */
.exposure {
  position: relative;
  padding: 88px 0;
  background:
    radial-gradient(ellipse 60% 90% at 85% 50%, rgba(229,72,155,.16), transparent 65%),
    radial-gradient(ellipse 50% 80% at 0% 0%, rgba(46,107,255,.14), transparent 60%),
    linear-gradient(180deg, #0d0f17 0%, #0a0c12 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.exposure::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.exposure__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 56px;
  align-items: center;
}
.exposure h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1.1;
}
.exposure__lead { margin-top: 20px; color: var(--text-muted); max-width: 560px; font-size: 1.02rem; line-height: 1.7; }

.sources { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.source {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(21,25,38,.8);
  border: 1px solid var(--border);
  font-size: .86rem; color: var(--text);
  opacity: 0; transform: translateY(10px);
  animation: srcIn .6s ease forwards;
  animation-delay: calc(var(--d) * .12s + .2s);
}
.source svg { width: 18px; height: 18px; color: var(--magenta); flex-shrink: 0; }
.source:nth-child(2n) svg { color: var(--lila); }
.source:nth-child(3n) svg { color: var(--electric); }
@keyframes srcIn { to { opacity: 1; transform: translateY(0); } }

.exposure__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.exposure__checks { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-muted); }
.exposure__checks svg { width: 18px; height: 18px; color: var(--ok); }
.exposure__note { margin-top: 22px; max-width: 560px; font-size: .92rem; color: var(--text-muted); line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--magenta); }

/* radar */
.exposure__visual { position: relative; min-height: 430px; display: grid; place-items: center; }
.radar { position: relative; width: min(380px, 78vw); aspect-ratio: 1; }
.radar__ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(167,123,255,.28); }
.radar__ring.r1 { width: 100%; height: 100%; }
.radar__ring.r2 { width: 68%; height: 68%; border-color: rgba(229,72,155,.28); }
.radar__ring.r3 { width: 36%; height: 36%; border-color: rgba(46,107,255,.4); }
.radar::before, .radar::after { content:''; position:absolute; background: rgba(167,123,255,.14); }
.radar::before { left: 50%; top: 0; width: 1px; height: 100%; }
.radar::after { top: 50%; left: 0; height: 1px; width: 100%; }
.radar__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(229,72,155,.55), rgba(229,72,155,0) 22%, transparent 100%);
  animation: sweep 5s linear infinite;
  mask-image: radial-gradient(circle, #000 68%, transparent 71%);
  -webkit-mask-image: radial-gradient(circle, #000 68%, transparent 71%);
}
@keyframes sweep { to { transform: rotate(360deg); } }
.radar__core {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--electric), var(--magenta));
  box-shadow: 0 0 0 8px rgba(46,107,255,.14), 0 0 46px rgba(229,72,155,.5);
  animation: core 3s ease-in-out infinite;
}
.radar__core svg { width: 34px; height: 34px; color: #fff; }
@keyframes core { 50% { box-shadow: 0 0 0 16px rgba(46,107,255,.06), 0 0 64px rgba(229,72,155,.7); } }

.blip {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1a1f31; border: 1px solid var(--magenta); color: var(--magenta);
  animation: blip 5s ease-in-out infinite;
}
.blip svg { width: 18px; height: 18px; }
.blip::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--magenta); animation: ping 2.5s ease-out infinite; }
.blip.b1 { top: 6%; left: 62%; animation-delay: .2s; }
.blip.b2 { top: 30%; left: 88%; animation-delay: 1.1s; color: var(--lila); border-color: var(--lila); }
.blip.b3 { top: 74%; left: 78%; animation-delay: 2s; }
.blip.b4 { top: 80%; left: 18%; animation-delay: 2.9s; color: var(--lila); border-color: var(--lila); }
.blip.b5 { top: 28%; left: 4%; animation-delay: 3.8s; }
@keyframes blip { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes ping { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

.finding {
  position: absolute; display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; min-width: 250px;
  background: rgba(16,19,29,.94); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  font-size: .82rem;
  animation: bob 6s ease-in-out infinite;
}
.finding > svg { width: 22px; height: 22px; color: var(--lila); flex-shrink: 0; }
.finding b { display: block; font-weight: 600; font-size: .84rem; }
.finding small { display: block; color: var(--text-dim); font-size: .72rem; margin-top: 1px; }
.finding .tag { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: rgba(255,177,61,.14); color: var(--warn); }
.finding .tag--hot { background: rgba(229,72,155,.16); color: var(--magenta); }
.finding.f1 { top: 2%; left: -4%; }
.finding.f2 { bottom: 6%; right: -2%; animation-delay: 1.8s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.exposure__caption { position: absolute; bottom: -4px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--text-dim); font-style: italic; }

@media (max-width: 960px) {
  .exposure { padding: 64px 0; }
  .exposure__inner { grid-template-columns: 1fr; gap: 40px; }
  .exposure__visual { min-height: 400px; }
  .finding.f1 { left: 0; } .finding.f2 { right: 0; }
}
@media (max-width: 520px) { .finding { min-width: 0; max-width: 220px; } .finding small { display: none; } }

/* ---------- header: icono + wordmark ---------- */
.logo { gap: 14px; }
.logo__mark-img { height: 38px; width: auto; flex-shrink: 0; }
.logo__word-img { height: 28px; width: auto; flex-shrink: 0; }
@media (max-width: 760px) {
  .logo { gap: 11px; }
  .logo__mark-img { height: 32px; }
  .logo__word-img { height: 22px; }
}

/* ---------- v2: 5 banners ---------- */
.product--sentinel { --tint: var(--electric); --tint-rgb: 46, 107, 255; }
.product--shield   { --tint: var(--magenta);  --tint-rgb: 229, 72, 155; }
.product--audit    { --tint: var(--lila);     --tint-rgb: 167, 123, 255; }
.product--vault    { --tint: var(--cyan);     --tint-rgb: 44, 196, 224; }
.product--treasury { --tint: var(--gold);     --tint-rgb: 242, 184, 75; }
.product--audit .product__list { gap: 8px; }
.product--audit .product__list li { font-size: .88rem; color: var(--text-muted); }
.product--audit .product__list li strong { color: var(--text); }
.product--treasury .product__cta { color: #fff; }

/* ---------- etiqueta Próximamente ---------- */
.soon {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--warn);
  background: rgba(242, 184, 75, .12);
  border: 1px solid rgba(242, 184, 75, .45);
  border-radius: 999px;
  padding: 3px 10px;
  vertical-align: middle;
  animation: soonPulse 3s ease-in-out infinite;
}
@keyframes soonPulse { 50% { border-color: rgba(242,184,75,.9); box-shadow: 0 0 0 4px rgba(242,184,75,.08); } }

/* ---------- bóveda digital + agentes IA ---------- */
.product--treasury { grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); }

.vault { grid-area: body; align-self: center; position: relative; display: grid; place-items: center; min-height: 300px; }

.vault__shell {
  position: relative;
  width: 168px; height: 190px;
  border-radius: 16px;
  background: linear-gradient(160deg, #3a3526 0%, #221f18 55%, #17150f 100%);
  border: 1px solid rgba(242,184,75,.5);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(242,184,75,.25), 0 0 44px rgba(242,184,75,.12);
  display: grid; place-items: center;
  animation: vaultFloat 7s ease-in-out infinite;
}
@keyframes vaultFloat { 50% { transform: translateY(-7px); } }

.vault__door {
  position: relative;
  width: 112px; height: 112px;
  border-radius: 50%;
  border: 2px solid rgba(242,184,75,.75);
  background: radial-gradient(circle at 35% 30%, #4a432f, #1d1a13 70%);
  display: grid; place-items: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,.7);
}
.vault__dial {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle, #6b5f3c, #2a2519);
  animation: dialSpin 9s linear infinite;
}
@keyframes dialSpin { to { transform: rotate(360deg); } }
.vault__spoke { position: absolute; width: 2px; height: 40%; background: linear-gradient(var(--gold), transparent); top: 8%; opacity: .5; transform-origin: bottom center; }
.vault__spoke.s2 { transform: rotate(120deg); } .vault__spoke.s3 { transform: rotate(240deg); }
.vault__bolt { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, var(--gold), #6b5f3c); }
.vault__bolt.b1 { top: 12px; left: 12px; } .vault__bolt.b2 { top: 12px; right: 12px; }
.vault__bolt.b3 { bottom: 12px; left: 12px; } .vault__bolt.b4 { bottom: 12px; right: 12px; }

.agent {
  position: absolute;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 10px;
  background: rgba(16,19,29,.95);
  border: 1px solid rgba(242,184,75,.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: agentBob 5.5s ease-in-out infinite;
}
.agent b { font-family: var(--mono); font-size: .72rem; color: var(--gold); letter-spacing: .06em; grid-row: 1; }
.agent em { font-style: normal; font-size: .68rem; color: var(--text-muted); grid-row: 2; }
.agent__eye {
  grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 22%, rgba(242,184,75,.22) 60%, transparent 70%);
  animation: eye 2.4s ease-in-out infinite;
}
@keyframes eye { 50% { transform: scale(.72); opacity: .6; } }
@keyframes agentBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.agent.a1 { top: 4%; left: -2%; }
.agent.a2 { top: 46%; right: -4%; animation-delay: 1.4s; }
.agent.a3 { bottom: 6%; left: 2%; animation-delay: 2.6s; }

/* líneas de revisión hacia la bóveda */
.agent::after {
  content: ''; position: absolute; height: 1px; width: 46px;
  background: linear-gradient(90deg, rgba(242,184,75,.7), transparent);
}
.agent.a1::after { right: -44px; top: 60%; }
.agent.a2::after { left: -44px; top: 50%; transform: rotate(180deg); }
.agent.a3::after { right: -44px; top: 40%; }

.ledger {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 168px;
  background: rgba(16,19,29,.95);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: .72rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: agentBob 6.5s ease-in-out infinite;
  animation-delay: .8s;
}
.ledger__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; color: var(--text-muted); }
.ledger__row + .ledger__row { border-top: 1px solid var(--border-soft); }
.ledger .st { font-style: normal; font-family: var(--mono); font-size: .7rem; }
.ledger .ok { color: var(--ok); } .ledger .warn { color: var(--warn); }

@media (max-width: 900px) {
  .product--treasury { grid-template-columns: 1fr; }
  .vault { margin-top: 26px; min-height: 320px; }
  .agent.a1 { left: 0; } .agent.a2 { right: 0; } .agent.a3 { left: 0; }
  .ledger { right: 0; bottom: 0; }
}

/* ================= v3: Cybersecurity + dropdown + acordeón + páginas ================= */

/* ---- dropdown ---- */
.dd { position: relative; }
.dd__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: inherit; font-size: .92rem; color: var(--text-muted);
  transition: color .18s;
}
.dd__btn svg { width: 16px; height: 16px; transition: transform .22s; }
.dd__btn:hover, .dd.is-open .dd__btn { color: var(--text); }
.dd.is-open .dd__btn svg { transform: rotate(180deg); }

.dd__menu {
  position: absolute; top: calc(100% + 18px); left: -20px;
  width: 372px; padding: 10px;
  background: rgba(16,19,29,.98);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 200;
}
.dd.is-open .dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd__menu a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 11px 13px; border-radius: 10px;
  transition: background .16s;
}
.dd__menu a:hover { background: rgba(46,107,255,.12); }
.dd__menu b { font-size: .91rem; font-weight: 600; color: var(--text); grid-column: 1; }
.dd__menu small { font-size: .77rem; color: var(--text-dim); grid-column: 1; }
.dd__menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: 7px 4px; }
.soon.sm { font-size: .6rem; padding: 2px 7px; margin-left: 0; grid-column: 2; grid-row: 1; align-self: center; }
@media (max-width: 760px) {
  .dd { width: 100%; }
  .dd__btn { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--border-soft); }
  .dd__menu { position: static; width: 100%; box-shadow: none; border: 0; background: none; padding: 4px 0 10px 8px; opacity: 1; visibility: visible; transform: none; display: none; }
  .dd.is-open .dd__menu { display: block; }
}

/* ---- acordeón de sub-servicios dentro de cada banner ---- */
.subs { margin-top: 16px; display: grid; gap: 7px; }
.sub {
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(11,13,18,.5);
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.sub[open] { border-color: rgba(var(--tint-rgb), .5); background: rgba(var(--tint-rgb), .07); }
.sub:hover { border-color: rgba(var(--tint-rgb), .38); }
.sub summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px;
  cursor: pointer; list-style: none;
  font-size: .91rem; font-weight: 500; color: var(--text);
}
.sub summary::-webkit-details-marker { display: none; }
.sub summary svg { width: 16px; height: 16px; color: var(--tint); flex-shrink: 0; transition: transform .22s; }
.sub[open] summary svg { transform: rotate(180deg); }
.sub p { padding: 0 15px 12px; font-size: .85rem; color: var(--text-muted); }
.sub__link { display: inline-block; margin: 0 15px 13px; font-size: .82rem; font-weight: 600; color: var(--tint); }
.sub__link:hover { text-decoration: underline; }

/* ---- páginas de servicio ---- */
.svc-hero { padding: 74px 0 60px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border-soft); }
.svc-hero::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 65% 100% at 20% 0%, rgba(var(--tint-rgb), .22), transparent 65%); pointer-events:none; }
.svc-hero--sentinel { --tint-rgb: 46,107,255; }
.svc-hero--shield   { --tint-rgb: 229,72,155; }
.svc-hero--audit    { --tint-rgb: 167,123,255; }
.svc-hero--vault    { --tint-rgb: 44,196,224; }
.svc-hero--treasury { --tint-rgb: 242,184,75; }
.svc-hero .container { position: relative; z-index: 1; }
.crumb { font-family: var(--mono); font-size: .76rem; color: var(--text-dim); margin-bottom: 26px; }
.crumb a:hover { color: var(--lila); }
.crumb span { padding: 0 6px; opacity: .5; }
.svc-hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; max-width: 820px; margin-top: 14px; }
.svc-hero__lead { margin-top: 22px; max-width: 640px; font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; }
.svc-hero .btn { margin-top: 32px; }

.svc-metrics { background: var(--bg-alt); border-bottom: 1px solid var(--border-soft); padding: 44px 0; }
.svc-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.metric b {
  display: block;
  font-family: 'Space Grotesk', var(--mono);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--electric), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.metric span { display: block; margin-top: 10px; font-size: .86rem; color: var(--text-dim); }

.svc-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.svc-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 28px 26px; transition: border-color .22s, transform .22s; }
.svc-block:hover { border-color: var(--border); transform: translateY(-3px); }
.svc-block h3 { font-size: 1.06rem; font-weight: 600; margin-bottom: 11px; }
.svc-block p { font-size: .92rem; color: var(--text-muted); }
.svc-block__why { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: .85rem; color: var(--text-dim); font-style: italic; }

.svc-note { padding: 26px 0; background: var(--bg-alt); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.svc-note p { max-width: 820px; font-size: .86rem; color: var(--text-dim); font-style: italic; }
.cta__actions { display: grid; gap: 12px; align-content: start; position: relative; z-index: 1; }

/* ================= panorama de ataques ================= */
.panorama {
  padding: 92px 0;
  background:
    radial-gradient(ellipse 55% 80% at 90% 0%, rgba(229,72,155,.13), transparent 62%),
    var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px;
  background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 18px; overflow: hidden; }
.stat { background: var(--surface); padding: 30px 26px; }
.stat b {
  display: block; font-family: 'Space Grotesk', var(--mono); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.7rem); letter-spacing: -.045em; line-height: 1; margin-bottom: 12px;
  background: linear-gradient(120deg, var(--electric), var(--magenta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.stat p { font-size: .89rem; color: var(--text-muted); line-height: 1.55; }
.stat p strong { color: var(--text); font-weight: 600; }

.threats { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; margin-top: 26px; }
.threat {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 28px 26px; transition: border-color .22s, transform .22s, background .22s;
}
.threat:hover { border-color: rgba(229,72,155,.42); transform: translateY(-3px); background: var(--surface-2); }
.threat__icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(229,72,155,.12); color: var(--magenta); margin-bottom: 16px;
}
.threat:nth-child(2) .threat__icon { width: 38px; height: 38px; background: rgba(46,107,255,.12); color: var(--electric); }
.threat:nth-child(3) .threat__icon { width: 38px; height: 38px; background: rgba(167,123,255,.12); color: var(--lila); }
.threat:nth-child(4) .threat__icon { width: 38px; height: 38px; background: rgba(44,196,224,.12); color: var(--cyan); }
.threat__icon svg { width: 18px; height: 18px; }
.threat h3 { font-size: 1.04rem; font-weight: 600; margin-bottom: 10px; }
.threat p { font-size: .9rem; color: var(--text-muted); }
.threat p strong { color: var(--text); font-weight: 600; }

.panorama__answer {
  margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding: 32px 36px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(46,107,255,.14), rgba(229,72,155,.13));
  border: 1px solid rgba(167,123,255,.32);
}
.panorama__answer-text { max-width: 660px; }
.panorama__answer h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 9px; }
.panorama__answer p { font-size: .93rem; color: var(--text-muted); }
.panorama__answer p strong { color: var(--text); font-weight: 600; }
.panorama__src { margin-top: 22px; font-size: .76rem; color: var(--text-dim); line-height: 1.55; }

@media (max-width: 760px) { .panorama { padding: 66px 0; } .panorama__answer { padding: 26px 22px; } }

/* ---------- Cloud Services ---------- */
.product--cloud { --tint: #5AC8FA; --tint-rgb: 90, 200, 250; }

/* ---------- Tesorería: corregir solape del visual ---------- */
.product--treasury { align-items: center; }
.product--treasury .product__body { min-width: 0; }
.vault { margin: 18px 0; }
.vault__shell { margin-bottom: 4px; }
.agent.a1 { top: -6px; left: -10px; }
.agent.a2 { top: 42%; right: -12px; }
.agent.a3 { bottom: -2px; left: -6px; }
.ledger { right: -10px; bottom: -14px; }
@media (max-width: 1200px) {
  .agent.a1 { left: 0; } .agent.a2 { right: 0; } .agent.a3 { left: 0; }
  .ledger { right: 0; }
}
@media (max-width: 900px) {
  .vault { margin: 30px 0 46px; padding: 0 6px; }
  .agent.a1 { top: 0; left: 0; } .agent.a2 { right: 0; } .agent.a3 { left: 0; bottom: 26px; }
  .ledger { right: 0; bottom: -6px; }
}

/* ---------- hero más arriba (sin eyebrow) ---------- */
.hero { padding-top: 76px; }
.hero__title { margin-top: 4px; }
@media (max-width: 760px) { .hero { padding-top: 52px; } }

/* ---------- panorama: sin bloque de fuente ---------- */
.panorama .threats:last-of-type { margin-bottom: 0; }

/* ================= planes: individuos y empresas ================= */
.plans {
  padding: 88px 0;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(ellipse 50% 70% at 10% 0%, rgba(46,107,255,.10), transparent 62%),
    var(--bg);
}
.plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 38px 34px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .24s, transform .24s;
}
.plan::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--tint), transparent);
}
.plan:hover { transform: translateY(-3px); border-color: var(--tint); }
.plan--personal { --tint: var(--cyan); }
.plan--business { --tint: var(--lila); }

.plan__head { margin-bottom: 26px; }
.plan__tag {
  display: inline-block;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tint);
  background: rgba(var(--tint-rgb, 44,196,224), .1);
  border: 1px solid var(--tint);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
  opacity: .9;
}
.plan--personal .plan__tag { background: rgba(44,196,224,.1); }
.plan--business .plan__tag { background: rgba(167,123,255,.1); }
.plan__head h3 { font-size: clamp(1.3rem, 2.3vw, 1.65rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 11px; }
.plan__lead { font-size: .92rem; color: var(--text-muted); line-height: 1.6; }

.plan__list { display: grid; gap: 0; margin-bottom: 28px; flex: 1; }
.plan__list li {
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.plan__list li:last-child { border-bottom: 0; }
.plan__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.28em;
  width: 9px;
  height: 2px;
  background: var(--tint);
  border-radius: 2px;
}
.plan__list b { display: block; font-size: .93rem; font-weight: 600; margin-bottom: 3px; }
.plan__list span { display: block; font-size: .85rem; color: var(--text-dim); line-height: 1.5; }

.plan__cta {
  align-self: flex-start;
  font-size: .92rem; font-weight: 600;
  color: #fff;
  background: rgba(46,107,255,.16);
  border: 1px solid rgba(46,107,255,.45);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  transition: background .2s, transform .16s;
}
.plan--personal .plan__cta { background: rgba(44,196,224,.16); border-color: rgba(44,196,224,.45); }
.plan--business .plan__cta { background: rgba(167,123,255,.16); border-color: rgba(167,123,255,.45); }
.plan__cta:hover { transform: translateX(3px); background: rgba(46,107,255,.3); }
.plan--personal .plan__cta:hover { background: rgba(44,196,224,.3); }
.plan--business .plan__cta:hover { background: rgba(167,123,255,.3); }

@media (max-width: 760px) { .plans { padding: 62px 0; } .plan { padding: 30px 24px; } }

/* ================= TESORERÍA: layout sin solape (v4) =================
   Causa del solape: el visual "vault" compartía la celda "body" con el texto.
   Ahora el banner tiene 3 filas: texto | lista | visual, cada cosa en su propia fila. */
.product--treasury {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head  body"
    "pitch body"
    "cta   body"
    "vault vault";
  row-gap: 18px;
}
.product--treasury .vault {
  grid-area: vault;
  position: relative;
  justify-self: center;
  width: min(720px, 100%);
  min-height: 250px;
  margin: 26px 0 0;
  padding: 0;
  display: block;
}
.product--treasury .vault__shell {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0; animation: none;
}
/* satélites repartidos a los lados de la caja fuerte, fuera del texto */
.product--treasury .agent.a1 { top: 8%;  left: 4%;   right: auto; bottom: auto; }
.product--treasury .agent.a2 { top: 8%;  right: 4%;  left: auto;  bottom: auto; }
.product--treasury .agent.a3 { bottom: 8%; left: 4%; right: auto; top: auto; }
.product--treasury .ledger   { bottom: 8%; right: 4%; left: auto; top: auto; }
.product--treasury .agent::after { display: none; }

@media (max-width: 900px) {
  .product--treasury { grid-template-columns: 1fr; grid-template-areas: "head" "pitch" "body" "cta" "vault"; }
  .product--treasury .vault { min-height: 330px; }
  .product--treasury .agent.a1, .product--treasury .agent.a3 { left: 0; }
  .product--treasury .agent.a2 { right: 0; }
  .product--treasury .ledger { right: 0; bottom: 0; }
}

/* ================= BANNER DE COMPRA: Revisión Sentinel ================= */
.section--buy { padding: 96px 0 110px; }
.buy {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center;
  padding: 56px;
  border-radius: 26px;
  border: 1px solid rgba(46,107,255,.38);
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgba(46,107,255,.26), transparent 62%),
    radial-gradient(ellipse 55% 90% at 100% 100%, rgba(229,72,155,.18), transparent 68%),
    linear-gradient(135deg, #141a2b 0%, #0f121b 100%);
  position: relative; overflow: hidden;
}
.buy h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.038em; line-height: 1.1; }
.buy__lead { margin-top: 18px; color: var(--text-muted); font-size: 1.02rem; line-height: 1.7; max-width: 560px; }
.buy__list { margin-top: 24px; display: grid; gap: 11px; }
.buy__list li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--text); }
.buy__list li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.buy__note { margin-top: 24px; font-size: .8rem; color: var(--text-dim); font-style: italic; line-height: 1.6; max-width: 560px; }
.buy__note a { color: var(--lila); text-decoration: underline; }

.buy__card {
  background: rgba(11,13,18,.72);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 28px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.buy__price b { font-family: 'Space Grotesk', var(--font); font-size: 3rem; font-weight: 700; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(120deg, var(--electric), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.buy__price span { font-family: var(--mono); font-size: .9rem; color: var(--text-muted); }
.buy__price small { flex-basis: 100%; font-size: .8rem; color: var(--text-dim); }

.check { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--electric); }
.check span { font-size: .78rem; color: var(--text-muted); line-height: 1.55; }
.form__error { font-size: .84rem; color: #FF8A8A; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.35); border-radius: 10px; padding: 10px 13px; }
.form__error[hidden] { display: none; }
.form__legal { display: flex; gap: 8px; align-items: flex-start; }
.form__legal svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--ok); }

@media (max-width: 900px) { .buy { grid-template-columns: 1fr; padding: 34px 22px; gap: 34px; } .section--buy { padding: 66px 0 80px; } }

/* páginas gracias / cancelado */
.thanks { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 18px; text-align: center; padding: 40px 24px; }
.thanks h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.035em; max-width: 620px; }
.thanks p { max-width: 520px; color: var(--text-muted); line-height: 1.7; }
.thanks a:not(.btn) { color: var(--lila); text-decoration: underline; }

/* ---------- pale Muyal es una marca de ---------- */
.footer__mother { color: var(--text-muted); }
.footer__mother strong { color: var(--text); font-weight: 600; }
.footer__base { flex-wrap: wrap; gap: 10px 26px; }

/* ---------- página Nosotros ---------- */
.about { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 56px; align-items: start; }
.about__story h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.035em; margin-bottom: 20px; }
.about__story p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.75; margin-bottom: 16px; }
.about__story p strong { color: var(--text); font-weight: 600; }
.about__facts { display: grid; gap: 2px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; }
.fact { background: var(--surface); padding: 20px 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fact b { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 500; }
.fact span { font-weight: 600; font-size: .98rem; color: var(--text); text-align: right; }

.mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.mv__card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 20px; padding: 36px 32px; position: relative; overflow: hidden; }
.mv__card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--electric), var(--magenta)); }
.mv__card h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 16px; }
.mv__card p:last-child { color: var(--text-muted); line-height: 1.72; font-size: .97rem; }
.about-yes h3::before { content: '✓'; color: var(--ok); margin-right: 9px; font-size: .9rem; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Tesorería: monedas y liquidación ---------- */
.currencies { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.currencies li {
  display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center;
  padding: 10px 16px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(242,184,75,.34);
  background: rgba(242,184,75,.07);
}
.currencies .ccy {
  grid-row: 1 / span 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .66rem; font-style: normal; font-weight: 500;
  color: var(--gold); background: rgba(242,184,75,.14); border: 1px solid rgba(242,184,75,.4);
}
.currencies b { font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.currencies span { font-size: .76rem; color: var(--text-dim); }

.settle {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(53,208,127,.1), rgba(44,196,224,.06));
  border: 1px solid rgba(53,208,127,.3);
}
.settle svg { width: 20px; height: 20px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.settle p { font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.settle p strong { color: var(--text); font-weight: 600; }
@media (max-width: 520px) { .currencies li { flex: 1 1 100%; } }

/* ---------- Tesorería: escudo de cuentas bancarias ---------- */
.shielded { display: grid; gap: 2px; margin: 22px 0 6px; background: rgba(242,184,75,.16);
  border: 1px solid rgba(242,184,75,.28); border-radius: 14px; overflow: hidden; }
.shielded li { display: flex; gap: 13px; align-items: flex-start; background: rgba(11,13,18,.72); padding: 14px 16px; }
.shielded svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.shielded b { display: block; font-size: .91rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.shielded span { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* ---------- Monedas centradas (página de Tesorería) ---------- */
.currencies--center {
  justify-content: center;
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 620px) {
  .currencies--center { justify-content: center; gap: 8px; }
  .currencies--center li { flex: 0 1 calc(50% - 8px); min-width: 0; }
}

/* ================================================================
   Ajuste de naturalidad: se apagan las animaciones decorativas
   que hacen la página vibrar sin aportar información.
   Se conserva lo que comunica estado (radar del banner de exposición
   al 50% de velocidad, y las apariciones al hacer scroll).
   ================================================================ */

/* 1. El punto del eyebrow deja de latir */
.dot { animation: none; opacity: 1; }

/* 2. Nada de elementos flotando sin motivo */
.blip, .blip::after, .radar__core, .agent, .ledger, .vault__shell, .agent__eye, .visual { animation: none; }
.blip { opacity: .8; }
.blip::after { display: none; }
.agent__eye { opacity: .85; }

/* 3. El radar gira más despacio: se siente como instrumento, no como adorno */
.radar__sweep { animation-duration: 11s; }

/* 4. La etiqueta "Próximamente" deja de pulsar */
.soon { animation: none; }

/* 5. Micro-movimientos más sobrios */
.product:hover { transform: translateY(-2px); }
.card:hover, .sector:hover, .threat:hover, .plan:hover, .svc-block:hover { transform: translateY(-2px); }

/* 6. Aparición al hacer scroll: más corta y menos "marketing" */
.product, .card, .step, .sector, .threat, .plan, .boundary__item {
  transition-duration: .32s !important;
}

/* 7. Sin transiciones largas en hover */
.btn, .product__cta, .plan__cta, .sub__link, .dd__menu a { transition-duration: .15s; }

/* ---------- Formulario de contacto (servicios) ---------- */
.section--contact { padding: 84px 0; border-top: 1px solid var(--border-soft); background: var(--bg-alt); }
.contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 52px; align-items: start; }
.contact__text h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 16px; }
.contact__text p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; max-width: 460px; }
.contact__direct { margin-top: 18px; font-size: .92rem; }
.contact__direct a { color: var(--lila); text-decoration: underline; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 32px; } .section--contact { padding: 62px 0; } }

/* ---------- Landings de campaña ---------- */
.camp-hero { padding: 84px 0 72px; }
.camp-hero .hero__title { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 860px; }

/* ---------- Upsell Sentinel Continuo ---------- */
.section--upsell { padding: 92px 0; background: var(--bg-alt); border-top: 1px solid var(--border-soft); }
.upsell {
  max-width: 720px; margin: 0 auto; text-align: center;
  padding: 48px 40px; border-radius: 24px;
  border: 1px solid rgba(167,123,255,.38);
  background: linear-gradient(150deg, rgba(46,107,255,.16), rgba(229,72,155,.12) 60%, rgba(167,123,255,.10));
}
.upsell__badge {
  display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lila); border: 1px solid rgba(167,123,255,.5); border-radius: 999px; padding: 5px 14px; margin-bottom: 20px;
}
.upsell h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 14px; }
.upsell > p { color: var(--text-muted); font-size: .98rem; line-height: 1.7; max-width: 560px; margin: 0 auto; }
.upsell__price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 26px 0 22px; }
.upsell__price b {
  font-family: 'Space Grotesk', var(--font); font-size: 3rem; font-weight: 700; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(120deg, var(--electric), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.upsell__price span { font-family: var(--mono); font-size: .88rem; color: var(--text-muted); }
.upsell__list { display: grid; gap: 10px; text-align: left; max-width: 480px; margin: 0 auto 30px; }
.upsell__list li { position: relative; padding-left: 24px; font-size: .92rem; color: var(--text-muted); }
.upsell__list li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.upsell__note { margin-top: 18px; font-size: .78rem; color: var(--text-dim); font-style: italic; }
@media (max-width: 620px) { .upsell { padding: 34px 22px; } .upsell__price b { font-size: 2.4rem; } }

/* ---------- Logos duales: oscuro por defecto, claro en tema claro ---------- */
.logo { display: flex; align-items: center; gap: 14px; }
.logo-light-only { display: none !important; }
:root[data-theme="light"] .logo-dark-hide { display: none !important; }
:root[data-theme="light"] .logo-light-only { display: inline-block !important; }
:root[data-theme="light"] .footer__logo.logo-light-only,
:root[data-theme="light"] .auth__logo.logo-light-only { display: block !important; }

/* ---------- Ajustes de texto y contraste en tema claro ---------- */
:root[data-theme="light"] .hero__title,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 { color: #0E1219; }

:root[data-theme="light"] .grad {
  background: linear-gradient(100deg, #1E56E0 5%, #C92E7C 55%, #7B4FD6 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* pasta de texto legible: los --text-muted del tema claro ya son más oscuros,
   pero estos bloques llevaban grises fijos */
:root[data-theme="light"] .footer__base,
:root[data-theme="light"] .footer__mono,
:root[data-theme="light"] .plan__list span,
:root[data-theme="light"] .card__list li,
:root[data-theme="light"] .product__note,
:root[data-theme="light"] .exposure__caption,
:root[data-theme="light"] .panorama__src,
:root[data-theme="light"] .footer__brand p { color: #5A6474; }

/* botones primarios: el texto blanco funciona sobre azul en ambos temas */
:root[data-theme="light"] .btn--primary { color: #FFFFFF; }

/* enlaces y elementos con color fijo */
:root[data-theme="light"] .eyebrow { color: #6B46C1; }
:root[data-theme="light"] .crumb { color: #6B7280; }
:root[data-theme="light"] .crumb span { opacity: .45; }

/* el glifo de fondo de las cards: más tenue en claro para no ensuciar */
:root[data-theme="light"] .product__gl::after {
  background: linear-gradient(105deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 45%, rgba(255,255,255,.75) 100%);
}

/* inputs y selects con borde visible en claro */
:root[data-theme="light"] .form input,
:root[data-theme="light"] .form textarea,
:root[data-theme="light"] .form select {
  background: #FFFFFF; border-color: #CBD3DF; color: #131720;
}
:root[data-theme="light"] .form input::placeholder,
:root[data-theme="light"] .form textarea::placeholder { color: #98A1B0; }

/* tabla del portal y códigos */
:root[data-theme="light"] .mono { color: #34405A; }

/* sombras más suaves en claro */
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .product:hover,
:root[data-theme="light"] .plan:hover { box-shadow: 0 14px 40px rgba(19,23,32,.08); }