:root{
 --bg:#090d13;--bg2:#0c121b;--panel:#111923;--panel2:#151f2c;--text:#eef4f8;--muted:#97a5b4;
 --line:rgba(255,255,255,.085);--accent:#8c7bff;--accent2:#55a9ff;--green:#53d4b4;--red:#f06d78;
 --radius:20px;--shadow:0 28px 80px rgba(0,0,0,.34)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 88% -10%,rgba(140,123,255,.18),transparent 30%),linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer}
.wrap{width:min(1180px,calc(100% - 34px));margin:auto}
.nav{position:sticky;top:0;z-index:30;background:rgba(9,13,19,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.navin{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px}
.brand strong{display:block;font-size:15px;letter-spacing:.04em} .brand small{display:block;color:var(--muted);font-size:10px}
.links{display:flex;gap:22px;color:#bbc6d1;font-size:13px}
.actions{display:flex;align-items:center;gap:9px}
.lang{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02)}
.lang a{display:inline-block;border:0;background:transparent;color:var(--muted);padding:6px 9px;border-radius:8px;font-size:10px;font-weight:800}
.lang a[aria-current="page"]{background:rgba(140,123,255,.18);color:white}
.btn{border:1px solid var(--line);background:var(--panel2);color:#fff;padding:11px 15px;border-radius:12px}
.btn.primary{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:800}
.kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:800}
.hero{padding:78px 0 62px} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:center}
h1{font-size:58px;line-height:.98;letter-spacing:-.05em;margin:15px 0 18px}
.hero p{color:#b0bbc7;font-size:17px;line-height:1.62;max-width:700px;margin:0}
.hero-cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.metric{padding:15px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}
.metric strong{display:block;font-size:20px;margin-bottom:3px} .metric span{display:block;color:var(--muted);font-size:10px;line-height:1.4}

.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.017));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.choice{padding:18px} .choice-grid{display:grid;grid-template-columns:1fr 54px 1fr;gap:10px;align-items:stretch}
.choice-side{padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.022)}
.choice-side h2{font-size:14px;margin:0 0 12px} .roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.role{padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);font-size:11px;text-align:center}
.choice-bottom{margin-top:12px;padding:10px;border-radius:10px;background:rgba(240,109,120,.06);border:1px solid rgba(240,109,120,.16);font-size:10px;color:#d8afb4;text-align:center}
.arrow{display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--muted)}
.stack{display:grid;gap:8px} .stack .box{padding:11px;border:1px solid var(--line);border-radius:10px;text-align:center;font-size:11px;background:rgba(255,255,255,.02)}
.stack .fdebox{background:rgba(140,123,255,.11);border-color:rgba(140,123,255,.25);font-weight:800}
.stack .result{background:rgba(83,212,180,.08);border-color:rgba(83,212,180,.2);font-weight:800}
.stack .arr{text-align:center;color:var(--muted);font-size:13px}

.section{padding:70px 0} .section h2{font-size:40px;letter-spacing:-.04em;line-height:1.05;margin:9px 0 12px}
.intro{max-width:760px;color:var(--muted);font-size:14px;line-height:1.6}
.fde-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:24px}
.fde-main{padding:22px} .fde-main p{color:var(--muted);font-size:13px;line-height:1.6}
.fde-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.fde-point{padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.fde-point strong{display:block;font-size:12px} .fde-point span{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.fde-diagram{padding:20px;display:flex;flex-direction:column;justify-content:center}
.fde-diagram .node{padding:12px;border:1px solid var(--line);border-radius:12px;text-align:center;background:rgba(255,255,255,.02);font-size:11px}
.fde-diagram .main{background:rgba(140,123,255,.12);border-color:rgba(140,123,255,.24);font-weight:800}
.fde-diagram .down{text-align:center;color:var(--muted);padding:6px}
.capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .capabilities div{padding:10px;border:1px solid var(--line);border-radius:10px;text-align:center;font-size:10px}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.comparebox{padding:22px} .comparebox h3{margin:0 0 12px;font-size:16px}
.list{display:grid;gap:0} .li{padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;display:flex;gap:9px;align-items:center}
.li:last-child{border-bottom:0} .bullet{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.b-red{background:var(--red)} .b-green{background:var(--green)}

.proto-flow{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;gap:8px;align-items:center;margin-top:26px}
.proto-card{padding:18px;min-height:128px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.proto-card strong{display:block;font-size:13px;margin-bottom:5px} .proto-card span{display:block;color:var(--muted);font-size:10px}
.proto-arr{text-align:center;color:var(--muted);font-size:20px}
.proto-note{margin-top:14px;padding:13px;border:1px solid rgba(83,212,180,.19);background:rgba(83,212,180,.05);border-radius:12px;color:#cbeee5;font-size:11px;text-align:center}

/* Tres caminos: tradicional, Project y Embedded. Eran dos cuando la página
   vendía una sola modalidad. */
.timeline-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.timeline{padding:20px} .timeline h4{margin:0 0 14px;font-size:14px}
.timeline-row{display:flex;gap:7px;flex-wrap:wrap} .chip{padding:8px 10px;border:1px solid var(--line);border-radius:999px;font-size:10px;background:rgba(255,255,255,.02)}
.chip.good{border-color:rgba(83,212,180,.24);background:rgba(83,212,180,.06)}
.speed-note{margin-top:14px;color:var(--muted);font-size:11px;line-height:1.5}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.step{padding:18px} .step h4{margin:0 0 6px;font-size:14px} .step p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}

.proposal{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:24px}
.browser{padding:18px} .browser-shell{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0b1118}
.browser-top{height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.browser-top i{width:8px;height:8px;border-radius:50%;background:#4c5966} .url{font-size:10px;color:#768594;margin-left:7px}
.browser-body{padding:14px} .prop-item{padding:11px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:11px;background:rgba(255,255,255,.02)}
.proposal-copy{padding:22px;display:flex;flex-direction:column;justify-content:center} .proposal-copy p{color:var(--muted);font-size:12px;line-height:1.55}
.close-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px} .close{padding:18px;text-align:center}
.close .ico{font-size:23px;margin-bottom:7px} .close strong{font-size:13px}
.final{padding:30px;text-align:center} .final h2{max-width:820px;margin:10px auto 14px} .final-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.footer{padding:28px 0 40px;border-top:1px solid var(--line);color:#748292;font-size:11px}
/* Legal identity line. Deliberately quieter than the brand line above it:
   it builds trust by being present and verifiable, not by competing for
   attention with the brand. */
.footer-legal{margin-top:6px;opacity:.78;max-width:70ch;line-height:1.5}
@media(max-width:1050px){.hero-grid,.fde-grid,.compare,.timeline-wrap,.proposal{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}.proto-flow{grid-template-columns:1fr}.proto-arr{transform:rotate(90deg)}}
@media(max-width:760px){.links{display:none}h1{font-size:42px}.metrics,.steps,.close-grid{grid-template-columns:1fr}.fde-points,.roles,.capabilities{grid-template-columns:1fr}}

.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.nav-toggle-bar{display:block;width:16px;height:2px;border-radius:2px;background:var(--text)}
.mobile-nav-inner{display:flex;flex-direction:column;gap:2px;padding:6px 0 14px}
.mobile-nav a{padding:12px 6px;border-radius:10px;color:#bbc6d1;font-size:14px}
.mobile-nav a:hover,.mobile-nav a:focus-visible{background:rgba(255,255,255,.05);color:#fff}
.mobile-nav a:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.nav-toggle:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
/* Mobile-panel copies of the language switcher and the primary CTA — the
   desktop-row originals (inside .navin) are hidden below 760px so the
   header row itself never has to fit both nav links and these controls. */
.mobile-nav-lang{margin-top:10px;align-self:flex-start}
.mobile-nav-cta{margin-top:12px;width:100%;text-align:center;justify-content:center}
@media(max-width:760px){
 .nav-toggle{display:flex}
 .mobile-nav:not([hidden]){display:flex;border-top:1px solid var(--line)}
 .brand small{display:none}
 .navin .lang,
 .navin .btn.primary{display:none}
}

/* Cuatro razones desde el rediseño dual: la cuarta es 'Capacidad adaptable'.
   A tres columnas quedaba una tarjeta sola en una segunda fila. Las media
   queries de abajo ya bajan a 2 y a 1, así que la fila siempre se llena. */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.proof-card{padding:20px}
.proof-card .ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(140,123,255,.13);font-size:21px;margin-bottom:12px}
.proof-card h3{margin:0 0 6px;font-size:15px}
.proof-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.proof-note{margin-top:14px;padding:12px;border:1px dashed var(--line);border-radius:11px;color:var(--muted);font-size:10px;text-align:center}
.final-micro{margin:12px auto 0;max-width:700px;color:var(--muted);font-size:11px;line-height:1.5}
/* Progressive enhancement: content must never depend on JavaScript to
   become visible. .reveal elements start fully visible by default; they
   are only hidden while document.documentElement carries "js-reveal" — a
   class set synchronously in <head> by assets/js/reveal-flag.js before
   <body> is parsed. If JS is disabled, reveal-flag.js never runs, this
   class is never added, and this rule never applies. See main.js
   wireRevealAnimations() for the corresponding capability checks,
   try/catch, and safety-net timer that guarantee "visible" always gets
   added even if IntersectionObserver misbehaves. */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
.links a.active{color:#fff}
.links a.active:after{content:"";display:block;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));margin-top:5px}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.proof-grid{grid-template-columns:1fr}}


.social-wrap{margin-top:24px}
.social-logo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.social-logo{
  min-height:86px;border:1px dashed var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:#738294;font-size:10px;font-weight:800;letter-spacing:.12em;
  background:rgba(255,255,255,.015)
}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.social-box{padding:20px}
.social-box h3{margin:0 0 8px;font-size:14px}
.social-box p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
.social-note{margin-top:14px;padding:10px 12px;border:1px solid rgba(83,212,180,.18);border-radius:11px;background:rgba(83,212,180,.045);font-size:10px;color:#badfd6;text-align:center}
@media(max-width:760px){.social-logo-row,.social-grid{grid-template-columns:1fr}}


.social-logo-card{
  min-height:110px;border:1px solid var(--line);border-radius:16px;
  display:flex;align-items:center;gap:12px;padding:14px;
  background:rgba(255,255,255,.02)
}
.fake-logo{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(140,123,255,.28),rgba(85,169,255,.2));
  border:1px solid rgba(140,123,255,.25);font-weight:900;font-size:15px
}
.logo-meta strong{display:block;font-size:12px}.logo-meta span{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.demo-badge{
  display:inline-block;margin-top:8px;padding:4px 7px;border-radius:999px;
  background:rgba(240,182,93,.09);border:1px solid rgba(240,182,93,.2);
  color:#d8bd8d;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase
}
.social-quote{
  margin-top:10px;padding:13px;border-left:3px solid var(--accent);
  background:rgba(140,123,255,.05);border-radius:0 10px 10px 0
}
.social-case-list{display:grid;gap:8px;margin-top:10px}
.social-case-row{
  padding:9px 10px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.02);font-size:10px
}

:root{
 --bg:#041a33;
 --bg2:#06213f;
 --panel:#0a2747;
 --panel2:#0d3156;
 --text:#f7fbff;
 --muted:#9fb2c8;
 --line:rgba(255,255,255,.11);
 --accent:#2fc3c9;
 --accent2:#5ad9df;
 --accent3:#78a8ff;
 --green:#2fc3c9;
 --red:#f06d78;
 --radius:20px;
 --shadow:0 28px 80px rgba(0,0,0,.34);
}
body{
 background:
   radial-gradient(circle at 88% -10%,rgba(47,195,201,.18),transparent 32%),
   radial-gradient(circle at 12% 16%,rgba(120,168,255,.10),transparent 28%),
   linear-gradient(180deg,var(--bg),var(--bg2));
}
.nav{background:rgba(4,26,51,.82)}
.logo-img{
 width:42px;height:42px;object-fit:cover;border-radius:14px;
 box-shadow:0 12px 34px rgba(47,195,201,.24);
 border:1px solid rgba(255,255,255,.12)
}
.btn.primary{
 background:linear-gradient(135deg,var(--accent),var(--accent2));
 color:#041a33;
 box-shadow:0 10px 28px rgba(47,195,201,.22)
}
.kicker{color:var(--accent2)}
.metric,.choice-side,.fde-point,.proto-card,.chip,.prop-item{
 background:rgba(255,255,255,.025)
}
.choice-bottom{
 background:rgba(47,195,201,.06);
 border-color:rgba(47,195,201,.18);
 color:#b9e9ec
}
.stack .fdebox{
 background:rgba(47,195,201,.12);
 border-color:rgba(47,195,201,.28)
}
.stack .result{
 background:rgba(120,168,255,.08);
 border-color:rgba(120,168,255,.22)
}
.fde-diagram .main{
 background:rgba(47,195,201,.12);
 border-color:rgba(47,195,201,.25)
}
.b-green{background:var(--accent)}
.proto-note,.social-note{
 border-color:rgba(47,195,201,.20);
 background:rgba(47,195,201,.05);
 color:#c7eff1
}
.chip.good{
 border-color:rgba(47,195,201,.26);
 background:rgba(47,195,201,.07)
}
.fake-logo{
 background:linear-gradient(135deg,rgba(47,195,201,.28),rgba(120,168,255,.18));
 border-color:rgba(47,195,201,.30)
}
.social-quote{
 border-left-color:var(--accent);
 background:rgba(47,195,201,.05)
}
.links a.active:after{
 background:linear-gradient(90deg,var(--accent),var(--accent2))
}
.brand strong{font-size:16px}


.choice::before{
 content:"";
 position:absolute;
 right:-34px;top:-34px;
 width:170px;height:170px;
 background:url('../img/logo-340.webp') center/cover no-repeat;
 opacity:.07;
 filter:saturate(1.1);
 pointer-events:none;
}
.choice{position:relative;overflow:hidden}


/* ===== V11 vivid Cardyram palette ===== */
:root{
  --bg:#01132b;
  --bg2:#071d3b;
  --panel:#0c2749;
  --panel2:#103257;
  --text:#f8fbff;
  --muted:#a7b8cb;
  --line:rgba(111,194,255,.18);
  --accent:#3cd5d9;
  --accent2:#62eff1;
  --accent3:#5d93ff;
  --green:#3cd5d9;
  --red:#f06d78;
  --radius:20px;
  --shadow:0 28px 80px rgba(0,0,0,.42);
}
body{
  background:
    radial-gradient(circle at 85% -8%,rgba(50,217,220,.24),transparent 28%),
    radial-gradient(circle at 70% 8%,rgba(72,125,255,.22),transparent 26%),
    radial-gradient(circle at 12% 14%,rgba(16,119,199,.14),transparent 24%),
    linear-gradient(180deg,#011127 0%,#041a33 48%,#061c38 100%) !important;
}
.nav{
  background:rgba(1,18,41,.88)!important;
  border-bottom:1px solid rgba(89,199,255,.16)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.18)
}
.card{
  background:
    linear-gradient(180deg,rgba(17,61,101,.72),rgba(7,30,56,.78))!important;
  border:1px solid rgba(95,194,255,.20)!important;
  box-shadow:
    0 24px 65px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.choice-side,.metric,.fde-point,.proto-card,.chip,.prop-item,.social-logo-card,.social-case-row{
  background:linear-gradient(180deg,rgba(18,58,96,.70),rgba(8,32,59,.72))!important;
  border-color:rgba(93,191,255,.17)!important;
}
.kicker{
  color:#61f0ed!important;
  text-shadow:0 0 18px rgba(97,240,237,.14)
}
.btn.primary{
  background:linear-gradient(135deg,#49dedf 0%,#67eff1 48%,#57b7ff 100%)!important;
  color:#02142d!important;
  box-shadow:
    0 12px 34px rgba(50,213,217,.28),
    0 0 28px rgba(80,169,255,.14)!important;
}
.btn.primary:hover{
  filter:brightness(1.08);
  transform:translateY(-1px)
}
.logo-img{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 12px 30px rgba(54,213,217,.26),
    0 0 24px rgba(61,184,255,.15)!important;
}
.stack .fdebox,
.fde-diagram .main{
  background:linear-gradient(135deg,rgba(55,211,213,.17),rgba(72,128,255,.12))!important;
  border-color:rgba(72,226,226,.32)!important;
}
.stack .result{
  background:linear-gradient(135deg,rgba(76,152,255,.15),rgba(55,211,213,.09))!important;
  border-color:rgba(88,171,255,.26)!important;
}
.choice-bottom{
  background:rgba(50,213,217,.08)!important;
  border-color:rgba(70,222,224,.22)!important;
  color:#c8f7f5!important
}
.proto-note,.social-note,.proof-note{
  background:linear-gradient(90deg,rgba(50,213,217,.07),rgba(81,137,255,.045))!important;
  border-color:rgba(70,223,227,.23)!important;
  color:#c9f5f2!important
}
.chip.good{
  background:rgba(50,213,217,.10)!important;
  border-color:rgba(74,226,226,.28)!important
}
.fake-logo{
  background:linear-gradient(135deg,rgba(52,219,219,.36),rgba(77,128,255,.26))!important;
  border-color:rgba(77,225,228,.30)!important;
  box-shadow:0 10px 24px rgba(21,121,180,.12)
}
.social-quote{
  background:linear-gradient(90deg,rgba(50,213,217,.07),rgba(78,124,255,.04))!important;
  border-left-color:#55e5e5!important
}
.links a.active:after{
  background:linear-gradient(90deg,#52e4e4,#62a9ff)!important;
  box-shadow:0 0 12px rgba(79,217,228,.3)
}
.metric strong,
.choice-side h2,
.fde-point strong,
.comparebox h3,
.timeline h4,
.step h4,
.close strong{
  color:#ffffff
}
.hero h1,
.section h2,
.final h2{
  text-shadow:0 1px 0 rgba(255,255,255,.02)
}
.hero::after{
  content:"";
  position:absolute;
  width:480px;height:480px;
  right:4%;top:52px;
  background:radial-gradient(circle,rgba(42,217,219,.12),rgba(80,121,255,.07) 38%,transparent 68%);
  filter:blur(6px);
  pointer-events:none;
  z-index:-1
}
.hero{position:relative;z-index:0}
.role{
  background:rgba(7,30,55,.72)!important;
  border-color:rgba(92,183,245,.14)!important
}
.b-green{background:#55e4e1!important;box-shadow:0 0 10px rgba(85,228,225,.3)}
.close .ico{
  background:linear-gradient(135deg,rgba(50,213,217,.16),rgba(85,136,255,.14))!important;
  border-radius:14px;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 9px;
  box-shadow:inset 0 0 0 1px rgba(105,200,255,.12)
}


/* Contact form */
.contact-form{display:flex;flex-direction:column;gap:16px;text-align:left;max-width:560px;margin:24px auto 0}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row label{font-size:13px;font-weight:600;color:var(--text)}
.form-row input,
.form-row select,
.form-row textarea{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  padding:11px 13px;
  font:inherit;
  width:100%;
}
.form-row textarea{resize:vertical;min-height:96px}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
}
.btn:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
}
.field-error{color:var(--red);font-size:12px;min-height:14px}
.form-row[data-invalid="true"] input,
.form-row[data-invalid="true"] select,
.form-row[data-invalid="true"] textarea{border-color:var(--red)}
.form-status{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5;text-align:left}
.form-status.success{background:rgba(83,212,180,.12);border:1px solid rgba(83,212,180,.4);color:var(--green)}
.form-status.error{background:rgba(240,109,120,.12);border:1px solid rgba(240,109,120,.4);color:var(--red)}
.form-status a{color:inherit;text-decoration:underline}
.contact-form button[type="submit"][disabled]{opacity:.6;cursor:not-allowed}

/* Consent row.
   Two deliberate overrides of the field styling above, both needing higher
   specificity than the rules they beat:
   - `.form-row input` sets width:100% and a 12px radius, which would render
     a checkbox as a full-width pill. `.form-row input[type="checkbox"]`
     (0,2,1) beats it (0,1,1).
   - `.form-row label` sets weight 600 for field names. This label is a
     sentence to read, not a name to scan, so `.form-row .consent-label`
     (0,2,0) beats it on class count.
   The honeypot checkbox is not inside a .form-row and is unaffected. */
.form-row-consent{gap:8px}
.form-row .consent-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
}
.form-row input[type="checkbox"]{
  width:16px;
  height:16px;
  flex:none;
  margin:2px 0 0;
  padding:0;
  border-radius:4px;
  accent-color:var(--accent2);
  cursor:pointer;
}
.consent-note{font-size:11.5px;color:var(--muted);line-height:1.45}
.form-row-consent[data-invalid="true"] .consent-label{color:var(--red)}

.hidden{display:none !important}

/* Reduced motion: disable smooth scrolling and reveal transitions */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,
  .reveal.visible{transition:none}
}

/* 404 page (tools/404.template.html -> /404.html).
   Bilingual and JS-free by design: a visitor who landed on a broken link
   has already had one thing fail on them, so this page depends on nothing
   but this stylesheet. It shows both languages at once because a 404 has
   no locale context to infer from. */
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:56px 0}
.nf-logo{display:block}
.nf h1{font-size:clamp(26px,4vw,38px);margin:0 0 8px}
.nf h2{font-size:clamp(20px,3vw,26px);margin:0 0 8px}
.nf p{color:var(--muted);margin:0 0 18px;max-width:52ch}
.nf .btn{display:inline-block}
.nf-sep{width:100%;height:1px;border:0;background:var(--line);margin:6px 0}

/* Sección Método: fusión de Prototype-first, velocidad y pasos.
   Un solo destino de navegación en vez de tres secciones seguidas sin
   ancla propia. Los subtítulos son h3 bajo el h2 de la sección, y las
   tarjetas bajan a h4 para que la jerarquía siga siendo real. */
.metodo-sub{font-size:22px;letter-spacing:-.03em;line-height:1.15;margin:52px 0 0}
.proto-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.proto-split-card{padding:16px}
.proto-split-card strong{display:block;font-size:12px;margin-bottom:5px;color:#fff}
.proto-split-card span{display:block;color:var(--muted);font-size:11px;line-height:1.5}
.proto-warning{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}

/* Pasos ramificados. El núcleo es común a las dos modalidades y luego se
   bifurca, así que NO va numerado 01-04: una numeración corrida afirmaría
   una secuencia única que ya no existe. */
.work-branches{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.work-branch-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin-bottom:9px;
}
.work-branch .steps{margin-top:0}
.steps-core{grid-template-columns:repeat(3,1fr)}
.steps-fork{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.work-fork{display:grid;grid-template-columns:2fr 3fr;gap:18px}
@media(max-width:900px){.work-fork,.proto-split{grid-template-columns:1fr}}
@media(max-width:1050px){.steps-core{grid-template-columns:1fr}}

/* Modalidades: Project vs Embedded.
   Dos tarjetas iguales, misma estructura en el mismo orden — nombre, frase,
   condiciones, criterios de elección, CTA — para que se comparen de un
   vistazo en vez de leerse por separado. Los criterios NO son simétricos
   (4 contra 5) porque son decisiones de negocio del cliente, no relleno:
   `align-items:stretch` iguala la altura sin inventar un quinto criterio.
   La CTA va a `margin-top:auto` para que ambos botones queden a la misma
   altura pase lo que pase con el largo del texto de arriba. */
.modalities{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;align-items:stretch}
.modality{padding:24px;display:flex;flex-direction:column;gap:14px}
.modality h3{margin:0;font-size:20px;letter-spacing:-.02em}
.modality-lead{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.modality .list{margin-top:2px}
.modality-choose{padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.modality-choose strong{display:block;font-size:12px;margin-bottom:8px}
.modality-choose ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:5px}
.modality-choose li{color:var(--muted);font-size:11.5px;line-height:1.45}
.modality-cta{margin-top:auto;width:100%}
.modality-note{margin:0;color:var(--muted);font-size:10.5px;line-height:1.5}
.modalities-unsure{
  margin:18px 0 0;padding:14px 16px;border:1px solid rgba(83,212,180,.19);
  background:rgba(83,212,180,.05);border-radius:12px;color:#cbeee5;
  font-size:12px;text-align:center;
}
@media(max-width:900px){.modalities{grid-template-columns:1fr}}

/* Data-processing page (tools/legal.template.html).
   A reading page: one narrow column, no JS, no reveal animations. */
.legal{max-width:74ch;padding:48px 0 72px;display:flex;flex-direction:column;gap:30px}
.legal-head h1{font-size:clamp(24px,3.4vw,32px);margin:8px 0 10px;line-height:1.2}
.legal-updated{color:var(--muted);font-size:12px;margin:0}
.legal-s{display:flex;flex-direction:column;gap:10px}
.legal-s h2{font-size:17px;margin:0}
.legal-s p{margin:0;color:var(--muted);line-height:1.65}
.legal-list{margin:0;padding-left:1.2em;color:var(--muted);display:flex;flex-direction:column;gap:5px;line-height:1.6}
.legal-back{margin:0}
.legal-back a{text-decoration:underline}

/* Draft notice and unresolved fields.
   These are LOUD on purpose. A privacy policy is read as authoritative, so
   a placeholder that looks like ordinary prose is worse than no page: it
   would state, in the site's own voice, things nobody has confirmed. Every
   .pending value must be replaced with a real one, and this notice
   removed, BEFORE the page is linked from the footer or the consent
   checkbox. Until then the template also carries noindex and the page is
   absent from sitemap.xml. */
.legal-draft{
  margin:0;
  padding:14px 16px;
  border:2px solid var(--red);
  border-radius:12px;
  background:rgba(240,109,120,.12);
  color:var(--red);
  font-weight:700;
  font-size:13px;
  line-height:1.5;
}
.pending{
  display:inline-block;
  padding:3px 9px;
  border:1px dashed var(--red);
  border-radius:6px;
  background:rgba(240,109,120,.09);
  color:var(--red) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  line-height:1.5;
}

/* Mobile background gradient tuning.
   The body{background:...} rule under "V11 vivid Cardyram palette" above
   uses `!important` and sits later in the cascade than every other
   body{background} rule in this file, so it is the one that actually
   renders in every browser regardless of viewport — it is the rule this
   override must beat, not the earlier non-!important body rules further up.
   Its three radial-gradient layers size themselves with the default
   `farthest-corner` radius and percentage position/fade-stop values, which
   resolve against the body box. On a narrow mobile viewport that box has a
   very different aspect ratio than desktop, so the same percentages cover a
   much larger share of the visible screen — the glow reads more saturated
   on mobile even though the color values never change. This block only
   narrows the fade-stop percentage (smaller visible radius) and lowers peak
   alpha slightly; positions, hues, and --bg/--bg2/--panel tokens are
   untouched, and nothing here applies above 760px. */
@media(max-width:760px){
  body{
    background:
      radial-gradient(circle at 85% -8%,rgba(50,217,220,.20),transparent 23%),
      radial-gradient(circle at 70% 8%,rgba(72,125,255,.18),transparent 22%),
      radial-gradient(circle at 12% 14%,rgba(16,119,199,.11),transparent 20%),
      linear-gradient(180deg,#011127 0%,#041a33 48%,#061c38 100%) !important;
  }
}