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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; }
h1 { letter-spacing: var(--track-h1); }
h2, h3 { letter-spacing: var(--track-h2); }

::selection { background: var(--volt); color: var(--volt-ink); }

:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #23262B; border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #31353C; }

.num { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: 'tnum', 'zero'; }

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05;
  background-size: 256px 256px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { position: relative; z-index: var(--z-content); padding: var(--section-pad) 0; }
.section-head { max-width: 700px; margin-bottom: var(--space-6); }

/* content-visibility: auto retirado el 1 de septiembre de 2026.
   Reservaba un placeholder de 700px por seccion no renderizada, y al hacer scroll
   el usuario veia esos huecos vacios (medido: 1.967px de hueco en /nosotros).
   Ademas descuadraba los saltos de ancla y bloqueaba la transicion del acordeon.
   El ahorro no compensa: las paginas pesan 30-50KB y cargan 8 recursos. */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--volt);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--volt); flex-shrink: 0;
}

.section-title { font-size: var(--text-3xl); margin-bottom: var(--space-4); color: var(--text); text-wrap: balance; }
.section-lead { font-size: var(--text-lg); color: var(--text-2); max-width: 620px; }

.fade-text {
  background: linear-gradient(to bottom right, var(--text) 30%, rgba(232,234,237,.55));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mark {
  color: var(--text);
  box-shadow: inset 0 -.14em 0 var(--volt);
  padding-bottom: .02em;
}

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-base); font-weight: 500;
  padding: 13px 22px; min-height: 46px;
  border: 1px solid transparent; border-radius: var(--r);
  letter-spacing: -.008em;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(.5px) scale(.995); }

.btn-primary {
  background: var(--volt); color: var(--volt-ink); font-weight: 600;
  box-shadow: inset 0 1px rgba(255,255,255,.35),
              inset 0 -1px 1px rgba(0,0,0,.12),
              0 1px 1px rgba(0,0,0,.18),
              0 5px 14px rgba(245,233,60,.10);
}
.btn-primary:hover { background: var(--volt-hot); box-shadow: inset 0 1px rgba(255,255,255,.45), 0 1px 1px rgba(0,0,0,.18), 0 8px 22px rgba(245,233,60,.18); }

.btn-ghost {
  background: rgba(255,255,255,.03); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px rgba(255,255,255,.06), 0 1px 1px rgba(0,0,0,.12);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px rgba(255,255,255,.08); }

.btn-sm { padding: 9px 16px; min-height: 40px; font-size: var(--text-sm); }
.btn-block { width: 100%; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(10,11,13,.55);

  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(10,11,13,.88);
  backdrop-filter: blur(16px) saturate(1.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.4);
}

.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur-slow, 480ms) var(--ease);
  background: linear-gradient(90deg,
    transparent 0%, rgba(245,233,60,.45) 18%, rgba(251,146,60,.32) 38%,
    rgba(251,113,133,.30) 56%, rgba(167,139,250,.32) 74%, rgba(96,165,250,.28) 88%, transparent 100%);
}
.site-header.is-scrolled::after { opacity: 1; }

.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; padding-top: 10px; padding-bottom: 10px; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.brand:hover .brand-mark { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(245,233,60,.22)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em; color: var(--text); }
.brand-tagline { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .13em; color: var(--volt); margin-top: 4px; }

.header-nav { display: flex; align-items: center; gap: 2px; }
.header-nav a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 13px; min-height: 38px;
  border-radius: var(--r);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-2); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.header-nav a { --nav: var(--text); }
.header-nav a[href*="desarrollo-web"] { --nav: var(--svc-web); }
.header-nav a[href*="aplicaciones"]   { --nav: var(--svc-app); }
.header-nav a[href*="crm"]            { --nav: var(--svc-crm); }
.header-nav a[href*="publicidad"]     { --nav: var(--svc-ads); }
.header-nav a[href*="nosotros"]       { --nav: var(--nav-nos); }
.header-nav a[href*="contacto"]       { --nav: var(--nav-con); }

.header-nav a:hover {
  color: var(--nav);
  background: color-mix(in srgb, var(--nav) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav) 38%, transparent);
}

.header-nav a.is-current {
  color: var(--nav);
  background: color-mix(in srgb, var(--nav) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav) 55%, transparent),
              0 0 14px color-mix(in srgb, var(--nav) 18%, transparent);
}

.btn-header {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; min-height: 42px;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: -.008em;
  background: var(--volt); color: var(--volt-ink);
  border: 0; border-radius: var(--r); flex-shrink: 0;
  box-shadow:
    inset 0 1px rgba(255,255,255,.45),
    inset 0 -1px 1px rgba(0,0,0,.10),
    0 1px 2px rgba(0,0,0,.32),
    0 0 0 1px rgba(245,233,60,.22),
    0 4px 18px rgba(245,233,60,.24);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-header:hover {
  background: var(--volt-hot); transform: translateY(-1px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.6),
    0 2px 4px rgba(0,0,0,.32),
    0 0 0 1px rgba(245,233,60,.4),
    0 10px 30px rgba(245,233,60,.42);
}
.btn-header:active { transform: translateY(0) scale(.985); }
.btn-header:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

.btn-header .btn-ico { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.btn-header:hover .btn-ico { transform: scale(1.1) rotate(-4deg); }

.hero {
  position: relative; z-index: var(--z-content);
  padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}

.hero::before {
  content: ''; position: absolute; inset: -10% -5% auto -5%; height: 82%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 42% at 50% 0%,  rgba(245,233,60,.11) 0%, transparent 62%),
    radial-gradient(38% 36% at 14% 20%, rgba(96,165,250,.09) 0%, transparent 66%),
    radial-gradient(36% 34% at 86% 16%, rgba(167,139,250,.09) 0%, transparent 66%),
    radial-gradient(30% 30% at 70% 60%, rgba(251,113,133,.06) 0%, transparent 70%);
}

.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 68% 58% at 50% 0%, #000 32%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 0%, #000 32%, transparent 92%);
}

.hero .container { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }

.hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-5); color: var(--text); text-wrap: balance; }
.hero-lead { font-size: var(--text-lg); color: var(--text-2); margin-bottom: var(--space-6); max-width: 510px; }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-meta { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.hero-meta-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-2); }
.hero-meta-item svg { width: 16px; height: 16px; color: var(--volt); flex-shrink: 0; }

.code-window {
  position: relative;
  background: var(--well);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 .5px rgba(255,255,255,.14),
              0 1px 1px rgba(0,0,0,.20), 0 12px 32px rgba(0,0,0,.28);
}

.code-tabs { display: flex; align-items: center; gap: var(--space-2); padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.code-tab {
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  padding: 5px 10px; border-radius: 6px;
  color: var(--text-3);
}
.code-tab[aria-selected="true"] { color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.code-path { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); }

.code-body { padding: 20px 22px; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; overflow-x: auto; }
.code-body pre { margin: 0; }
.code-line { display: block; white-space: pre; }
.c-comment { color: var(--code-comment); }
.c-keyword { color: var(--code-keyword); }
.c-string  { color: var(--code-string); }
.c-fn      { color: var(--code-fn); }
.c-num     { color: var(--code-num); }
.c-prop    { color: var(--code-prop); }
.c-punct   { color: var(--code-punct); }

.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--volt); vertical-align: text-bottom; animation: caret 1.2s linear infinite; }
@keyframes caret { 0% { opacity: .2 } 20% { opacity: 1 } 100% { opacity: .2 } }

.code-status { display: flex; align-items: center; gap: var(--space-2); padding: 10px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-mono); color: #4ADE80; }

.dot-live { position: relative; display: inline-flex; width: 8px; height: 8px; flex-shrink: 0; }
.dot-live::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-pill);
  background: currentColor; opacity: .75;
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.dot-live::after { content: ''; position: relative; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; }
@keyframes ping { 75%, 100% { opacity: 0; transform: scale(2.2); } }

.ticker-wrap { position: relative; z-index: var(--z-content); padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.ticker-label { text-align: center; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--space-5); }
.ticker {
  display: flex;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
  --gap: var(--space-8);
  display: flex; gap: var(--gap); padding-right: var(--gap);
  flex-shrink: 0; min-width: 100%;
  animation: scroll-x 34s linear infinite;
}
.ticker-item { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--text-3); white-space: nowrap; }

@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }

.countries-wrap {
  position: relative; z-index: var(--z-content);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center; overflow: hidden;
}
.countries-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 140% at 50% 50%, rgba(245,233,60,.05) 0%, transparent 70%);
}
.countries-eyebrow {
  position: relative;
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--space-5);
}
.countries {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3) var(--space-7); flex-wrap: wrap;
}
.country {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-lg); font-weight: 500; color: var(--text); white-space: nowrap;
}
.country::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--volt); box-shadow: 0 0 8px rgba(245,233,60,.5); flex-shrink: 0;
}

.console { background: var(--well); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), inset 0 .5px rgba(255,255,255,.10); }
.console-bar { display: flex; align-items: center; gap: var(--space-2); padding: 11px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); }
.console-body { padding: var(--space-4); display: flex; flex-direction: column; }
.console-line { display: flex; gap: var(--space-4); align-items: flex-start; padding: 13px var(--space-4); border-radius: var(--r); transition: background var(--dur) var(--ease); }
.console-line:hover { background: rgba(255,255,255,.025); }

.console-badge {
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-sm);
  flex-shrink: 0; margin-top: 1px;
  color: var(--svc-crm); background: rgba(251,113,133,.15);
}
.console-line p { font-size: var(--text-base); color: var(--text-2); }
.console-line p strong { color: var(--text); font-weight: 600; }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); position: relative; }

.card {
  position: relative;
  background: var(--surface-1);
  border-radius: 12px;
  padding: var(--space-6);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px rgba(255,255,255,.05);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px rgba(255,255,255,.08); }

.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--svc, transparent); opacity: .55; }

.card::after {
  content: ''; position: absolute; top: 10px; left: 10px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2);
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease), border-color var(--dur) var(--ease);
  pointer-events: none;
}
.card:hover::after { width: 14px; height: 14px; border-color: var(--volt); }

.card > * { position: relative; z-index: 1; }
.card-wide { grid-column: span 3; }
.card-third { grid-column: span 2; }

.card-icon { width: 40px; height: 40px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px rgba(255,255,255,.07); }
.card-icon svg { width: 19px; height: 19px; color: var(--svc, var(--text-2)); }

.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); color: var(--text); }
.card p { color: var(--text-2); font-size: var(--text-base); }
.card-meta { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }

.spot {
  position: absolute; top: 0; left: 0;
  width: 400px; height: 400px;
  margin: -200px 0 0 -200px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(255,255,255,.055) 0%, transparent 55%);
  mix-blend-mode: lighten;
  pointer-events: none; opacity: 0;
  transition: opacity 380ms var(--ease);
  z-index: 2;
}
.bento:hover .spot { opacity: 1; }

.proof { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.proof-panel { background: var(--surface-1); border-radius: 12px; padding: var(--space-6); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px rgba(255,255,255,.05); }
.proof-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); }
.proof-name { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text); }
.proof-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-mono); color: #4ADE80; }
.proof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.stat { padding: var(--space-4); background: rgba(255,255,255,.022); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.stat-value { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin-bottom: 3px; }
.stat-label { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); }

.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.stage {
  position: relative;
  background: var(--surface-1); border-radius: 12px; padding: var(--space-6);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px rgba(255,255,255,.05);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stage:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px rgba(255,255,255,.08); }
.stage::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--svc); opacity: .55; }
.stage-tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-sm); margin-bottom: var(--space-4);
  color: var(--svc); background: color-mix(in srgb, var(--svc) 15%, transparent);
}
.stage h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); color: var(--text); }
.stage p { color: var(--text-2); font-size: var(--text-base); margin-bottom: var(--space-4); }
.stage-do { font-size: var(--text-sm); color: var(--text-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.stage-do b { color: var(--text-2); font-weight: 500; }

.photo-banner {
  position: relative; z-index: var(--z-content);
  margin: 0 auto; max-width: var(--max-width);
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: inset 0 0 0 1px var(--line);
}
.photo-banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  display: block; filter: contrast(1.05) brightness(.92);
}

.photo-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,11,13,.05) 0%, rgba(10,11,13,.08) 55%, rgba(10,11,13,.88) 100%),
    linear-gradient(90deg, rgba(10,11,13,.6) 0%, transparent 30%, transparent 70%, rgba(10,11,13,.6) 100%);
}
.photo-banner-tag {
  position: absolute; left: 24px; bottom: 18px; z-index: 1;
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500;
  letter-spacing: .04em; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 8px;
}

.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

.portfolio-card {
  display: flex; flex-direction: column;
  background: var(--surface-1); border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px rgba(255,255,255,.05);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.portfolio-card:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.portfolio-card::before { content: ''; height: 1px; background: var(--svc, var(--volt)); opacity: .6; }

.portfolio-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3);
}
.portfolio-domain { color: var(--text-2); }

.portfolio-frame { position: relative; background: var(--well); aspect-ratio: 16 / 10; overflow: hidden; }
.portfolio-img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 600ms var(--ease); }
.portfolio-card:hover .portfolio-img { transform: scale(1.035); }

.portfolio-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.portfolio-tag {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .02em;
  padding: 3px 8px; border-radius: var(--r-sm);
  color: var(--svc, var(--volt)); background: color-mix(in srgb, var(--svc, var(--volt)) 15%, transparent);
}
.portfolio-body h3 { font-size: var(--text-xl); color: var(--text); }
.portfolio-sector { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); margin-top: -6px; }
.portfolio-desc { color: var(--text-2); font-size: var(--text-base); }
.portfolio-link {
  margin-top: auto; padding-top: var(--space-2);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-2);
  width: fit-content; transition: color var(--dur-fast) var(--ease);
}
.portfolio-link:hover { color: var(--volt); }
.portfolio-link svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.portfolio-link:hover svg { transform: translate(2px,-2px); }

.pipeline { position: relative; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.pipeline::before { content: ''; position: absolute; left: 17px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(180deg, var(--volt), rgba(245,233,60,.15) 40%, transparent); }
.pipe-step { display: flex; gap: var(--space-5); align-items: flex-start; position: relative; }
.pipe-node {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-pill);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; color: var(--volt);
  z-index: 1;
}
.pipe-content { flex: 1; background: var(--surface-1); border-radius: 12px; padding: var(--space-5); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px rgba(255,255,255,.04); transition: background var(--dur) var(--ease); }
.pipe-step:hover .pipe-content { background: var(--surface-2); }
.pipe-content h3 { font-size: var(--text-lg); margin-bottom: 6px; color: var(--text); }
.pipe-content p { color: var(--text-2); font-size: var(--text-base); }
.pipe-cmd { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); margin-bottom: 8px; }
.pipe-cmd b { color: var(--volt); font-weight: 500; }

.cta-band { position: relative; text-align: center; padding: clamp(44px, 6vw, 76px) var(--space-5); border-radius: 12px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px rgba(255,255,255,.06); overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, rgba(245,233,60,.10) 0%, transparent 68%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); color: var(--text); text-wrap: balance; }
.cta-band p { color: var(--text-2); max-width: 520px; margin: 0 auto var(--space-6); font-size: var(--text-lg); }

.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 4.5vw, 60px); align-items: flex-start; }
.contact-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.contact-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--text-2); font-size: var(--text-base); }
.contact-list svg { width: 18px; height: 18px; color: var(--volt); flex-shrink: 0; }

.form-panel { background: var(--surface-1); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px rgba(255,255,255,.05), 0 12px 32px rgba(0,0,0,.24); }
.form-head { display: flex; align-items: center; gap: var(--space-2); padding: 12px 20px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); }
.form-body { padding: var(--space-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; color: var(--text-2); margin-bottom: 7px; }
.field label .req { color: var(--volt); }
.field input, .field select {
  width: 100%; padding: 12px 14px; min-height: 46px;
  background: rgba(255,255,255,.028);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-base);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus {
  outline: none; background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--volt), 0 0 0 3px rgba(245,233,60,.12);
}
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238B919B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; padding-right: 40px; }
.field select option { background: var(--surface-3); color: var(--text); }
.form-note { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); text-align: center; margin-top: var(--space-4); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

.sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,11,13,.9);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  border-top: 1px solid var(--line);
}

.site-footer { position: relative; z-index: var(--z-content); border-top: 1px solid var(--line); padding: var(--space-8) 0 var(--space-6); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
  gap: var(--space-6) var(--space-7);
  align-items: start;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.footer-about { margin-top: var(--space-4); max-width: 330px; font-size: var(--text-sm); line-height: 1.65; color: var(--text-2); }

.footer-services { display: contents; }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col li { font-size: var(--text-sm); color: var(--text-2); }
.footer-col a { font-size: var(--text-sm); color: var(--text-2); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--volt); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); }
.footer-status { display: inline-flex; align-items: center; gap: 8px; color: #4ADE80; }

.thanks { position: relative; z-index: var(--z-content); min-height: 74vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-8) var(--space-5); }
.thanks-box { max-width: 540px; }
.thanks-icon { width: 68px; height: 68px; margin: 0 auto var(--space-5); border-radius: var(--r-pill); background: rgba(74,222,128,.13); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(74,222,128,.28); }
.thanks-icon svg { width: 32px; height: 32px; color: #4ADE80; }
.thanks h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); color: var(--text); }
.thanks p { color: var(--text-2); font-size: var(--text-lg); margin-bottom: var(--space-6); }
.thanks .eyebrow { justify-content: center; }

.status-panel {
  background: var(--well); border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 .5px rgba(255,255,255,.14),
              0 1px 1px rgba(0,0,0,.20), 0 12px 32px rgba(0,0,0,.28);
}
.status-head { display: flex; align-items: center; gap: var(--space-2); padding: 11px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); }
.status-head svg { width: 13px; height: 13px; }
.status-body { padding: var(--space-3) var(--space-2); }
.status-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-4); border-radius: var(--r);
  font-family: var(--font-mono); font-size: var(--text-mono);
  transition: background var(--dur) var(--ease);
}
.status-row:hover { background: rgba(255,255,255,.03); }
.status-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--svc); flex-shrink: 0; }
.status-name { color: var(--text); }
.status-state { margin-left: auto; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; }
.status-foot { display: flex; align-items: center; gap: var(--space-2); padding: 11px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-mono); color: #4ADE80; }

.pillar { margin-bottom: var(--space-8); }
.pillar:last-child { margin-bottom: 0; }
.pillar-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.pillar-head h3 { font-size: var(--text-2xl); color: var(--text); }
.pillar-head span { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--text-3); margin-left: auto; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.svc-grid.is-two { grid-template-columns: repeat(2, 1fr); }

a.card { display: flex; flex-direction: column; }
a.card:hover { transform: translateY(-2px); }
a.card { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; color: var(--svc, var(--volt));
}
.card-go svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
a.card:hover .card-go svg { transform: translateX(3px); }

html.js .reveal {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {

  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--space-6); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card-wide, .card-third { grid-column: span 1; }
  .proof { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .spot { display: none; }
  .svc-grid, .stage-grid, .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid > div:first-child { grid-column: 1 / -1; margin-bottom: var(--space-4); }
  .footer-about { max-width: 520px; }

  .footer-col ul { gap: 0; }
  .footer-col li { display: flex; align-items: center; min-height: 44px; }
  .footer-col a { display: flex; align-items: center; width: 100%; min-height: 44px; }

  .site-header .container { flex-wrap: wrap; row-gap: 0; min-height: 60px; }
  .header-nav {
    order: 3; width: 100%;
    margin-top: 6px; padding-top: 6px; padding-bottom: 2px;
    border-top: 1px solid var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { min-height: 44px; }
}

@media (max-width: 720px) {
  .sticky-cta { display: block; }
  body { padding-bottom: 76px; }
  .bento { grid-template-columns: 1fr; }
  .svc-grid, .svc-grid.is-two, .stage-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .pillar-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .pillar-head span { margin-left: 0; }
  .form-row { grid-template-columns: 1fr; }
  .proof-stats { grid-template-columns: 1fr 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .code-body { font-size: 12px; padding: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-about { max-width: none; }
  .header-cta-full { display: none; }
  .photo-banner { aspect-ratio: 4 / 3; border-radius: 0; }
  .photo-banner img { object-position: center 30%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============ paginas legales ============ */
.container-narrow{max-width:760px}
.legal h1{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.15;margin:.5rem 0 1.1rem}
.legal-lead{font-size:1.08rem;color:var(--text-2);line-height:1.7;margin-bottom:.6rem}
.legal-meta{font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);
  letter-spacing:.03em;padding-bottom:1.6rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.legal h2{font-size:1.22rem;line-height:1.3;margin:2.4rem 0 .7rem;padding-top:.2rem}
.legal h3{font-size:1.05rem;margin:1.6rem 0 .5rem}
.legal p{color:var(--text-2);line-height:1.75;margin:0 0 .9rem}
.legal ul,.legal ol{color:var(--text-2);line-height:1.75;padding-left:1.25rem;margin:0 0 1.1rem}
.legal li{margin-bottom:.5rem}
.legal b{color:var(--text);font-weight:600}
.legal a{color:var(--volt);text-decoration:underline;text-underline-offset:3px}
.legal-note{background:var(--surface-1);border:1px solid var(--line);border-left:2px solid var(--volt);
  border-radius:var(--r-sm);padding:.9rem 1.1rem;margin:1.2rem 0 1.4rem}
.legal-data{list-style:none;padding:0;margin:1rem 0 1.4rem;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.legal-data li{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;padding:.7rem 1.1rem;
  border-bottom:1px solid var(--line);background:var(--surface-1)}
.legal-data li:last-child{border-bottom:0}
.legal-data span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);min-width:150px}
.legal-cta{margin-top:3rem;padding:1.8rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-1);text-align:center}
.legal-cta h3{margin-top:0}
.legal-cta .btn{margin-top:.9rem}

/* ============ consentimiento de datos en formularios ============ */
.consent{display:flex;gap:.7rem;align-items:flex-start;margin:.2rem 0 1.1rem;
  padding:.85rem .95rem;background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-sm)}
.consent input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--text-3);
  border-radius:5px;background:transparent;cursor:pointer;position:relative;
  transition:border-color .15s ease,background-color .15s ease}
.consent input[type="checkbox"]:hover{border-color:var(--text-2)}
.consent input[type="checkbox"]:checked{background:var(--volt);border-color:var(--volt)}
.consent input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--volt-ink);border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.consent label{font-size:.86rem;line-height:1.55;color:var(--text-2);cursor:pointer;margin:0}
.consent a{color:var(--volt);text-decoration:underline;text-underline-offset:2px}
.consent .req{color:var(--volt)}
@media (prefers-reduced-motion:reduce){.consent input[type="checkbox"]{transition:none}}

/* ============================================================
   MENU MOVIL, ANCLAS Y VISIBILIDAD DEL HERO
   ============================================================ */

/* --- El header sticky tapaba el titulo de cada seccion al saltar a un ancla.
       Los 20 enlaces a #contacto aterrizaban en una seccion decapitada. --- */
html { scroll-padding-top: 92px; }
@media (max-width: 900px) { html { scroll-padding-top: 76px; } }

/* --- El hero es el elemento LCP: nunca debe depender de que corra JavaScript --- */
html.js .hero .reveal,
html.js .hero.reveal { opacity: 1; transform: none; transition: none; }

/* La red de seguridad ya no es una animacion CSS: una animacion activa gana en la
   cascada sobre .is-in y podia dejar elementos en opacity 0. Ahora la resuelve
   main.js (initReveal), que anade .is-in y no compite con nada. */

/* --- Boton hamburguesa --- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--line-3); background: var(--surface-2); }
.nav-toggle-box { position: relative; width: 18px; height: 12px; }
.nav-toggle-bar {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 5px; }
.nav-toggle-bar:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; order: 3; }
  /* Marca, CTA y hamburguesa en una sola fila: 151 + 147 + 44 + gaps no cabian
     en los 327px utiles, asi que el boton caia a una segunda fila */
  .site-header .container { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .brand { order: 1; min-width: 0; }
  .btn-header { order: 2; margin-left: auto; padding-left: 14px; padding-right: 14px; }
  .header-cta-full { display: none; }
  .brand-text { min-width: 0; }
}

@media (max-width: 380px) {
  .brand-tagline { display: none; }
}

@media (max-width: 900px) {

  /* El menu pasa de ser una fila que se desbordaba (588px dentro de 327px,
     con Publicidad, Nosotros y Contacto fuera de pantalla) a un panel vertical */
  .header-nav {
    order: 4; width: 100%;
    display: grid; grid-template-columns: 1fr; gap: 0;
    max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur);
  }
  .header-nav.is-open {
    max-height: 70vh; overflow-y: auto;
    opacity: 1; visibility: visible;
    padding: var(--space-2) 0 var(--space-3);
    transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), visibility 0s;
  }
  .header-nav a {
    display: flex; align-items: center;
    min-height: 48px; padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-base);
  }
  .header-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .header-nav { transition: none; }
}

/* Bloquea el scroll del fondo mientras el menu esta abierto */
body.nav-abierto { overflow: hidden; }

/* --- Salto al contenido, para teclado y lectores de pantalla --- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--volt); color: var(--volt-ink);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --- Barra fija movil con dos salidas: hablar ya, o dejar datos --- */
.sticky-cta--dual { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.sticky-cta--dual .btn { width: 100%; }
.btn-wa {
  background: #25D366; color: #062313; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0;
}
.btn-wa:hover { background: #1FBA57; color: #062313; }
.btn-wa svg { flex: none }
.thanks-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px }

/* ============ Preguntas frecuentes ============ */
.faq-lista { display: grid; gap: 10px; max-width: 780px; margin-top: var(--space-6); }
.faq-item {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: var(--line-2); background: var(--surface-2); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-weight: 600; line-height: 1.45; color: var(--text);
  font-size: var(--text-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: 5px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--volt); }
.faq-item summary:hover::after { border-color: var(--text-2); }
.faq-respuesta { padding: 0 20px 20px; }
.faq-respuesta p {
  margin: 0; color: var(--text-2); line-height: 1.72;
  font-size: var(--text-sm); max-width: 66ch;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary::after { transition: none; }
}

/* Enlaces dentro de texto: el reset global de a{} los dejaba invisibles */
.tlink { color: var(--volt); text-decoration: underline; text-underline-offset: 2px; }
.tlink:hover { color: var(--volt-hot); }

/* ============ Migas de pan ============ */
.crumbs { margin-bottom: var(--space-4); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0; line-height: 1.4;
}
.crumbs li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--line-3); }
.crumbs a { color: var(--text-3); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: var(--volt); }
.crumbs [aria-current="page"] { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .crumbs a { transition: none; } }

/* WCAG 1.4.11: el borde de los campos usaba --line-2 (rgba blanco .14) = 1,48:1.
   Con .34 sube a ~3,1:1, que es el minimo para controles de formulario. */
.field input, .field select, .field textarea {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}
.consent input[type="checkbox"] { border-color: rgba(255,255,255,.42); }

/* ============ Bloques de precio ============ */
.precio-grid { display: grid; gap: 14px; margin-top: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.precio {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--dur-fast) var(--ease);
}
.precio:hover { border-color: var(--line-2); }
.precio-top { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.precio h3 { font-size: var(--text-lg); line-height: 1.3; margin: 0 0 8px; }
.precio-cifra {
  font-family: var(--font-mono); font-size: 1.45rem; font-weight: 500;
  color: var(--volt); letter-spacing: -0.01em; margin: 0; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.precio-cifra--sm { font-size: 1.15rem; }
.precio-para { font-size: var(--text-sm); color: var(--text-2); line-height: 1.62; margin: 0 0 14px; }
.precio-lab {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 8px;
}
.precio-inc { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; }
.precio-inc li {
  position: relative; padding-left: 22px;
  font-size: var(--text-sm); color: var(--text-2); line-height: 1.55;
}
.precio-inc li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 5px; border-left: 2px solid var(--volt);
  border-bottom: 2px solid var(--volt); transform: rotate(-45deg);
}
.precio-no, .precio-sube {
  font-size: 0.845rem; color: var(--text-3); line-height: 1.55;
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line);
}
.precio-sube { border-top: 0; padding-top: 6px; }
.precio-no b, .precio-sube b { color: var(--text-2); font-weight: 600; }
.precio-para b { color: var(--text); font-weight: 600; }

.precio-nota {
  margin-top: 14px; padding: 20px 22px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-left: 2px solid var(--volt); border-radius: var(--r);
}
.precio-nota p:last-child { font-size: var(--text-sm); color: var(--text-2); line-height: 1.65; margin: 8px 0 0; }

.precio-cierre {
  margin-top: var(--space-5); padding: 16px 20px;
  background: var(--volt-dim); border-radius: var(--r);
  color: var(--text); font-weight: 500; line-height: 1.6; max-width: 68ch;
}
.precio-vigencia {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-3);
  margin-top: 12px; letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) { .precio { transition: none; } }

/* Precio en las tarjetas de servicio de la portada */
.card-precio {
  display: inline-block; margin-top: auto; padding-top: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-mono);
  color: var(--volt); font-weight: 500; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.card-precio + .card-go { margin-top: var(--space-2); }

/* ============ Animacion del acordeon de preguntas ============
   Camino nativo: ::details-content + interpolate-size permite animar hacia
   'auto' sin medir nada en JS. Los navegadores que no lo soportan reciben
   el mismo movimiento por WAAPI desde main.js (initFaqAnim).
   'height' es de las pocas propiedades que cuesta layout por frame, por eso
   la duracion es corta: se usa --dur-fast (160ms), que ya existe en el sitio. */
:root { interpolate-size: allow-keywords; }

.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  /* allow-discrete va SOLO en content-visibility: como propiedad suelta se aplicaba
     tambien a block-size y la altura saltaba en un frame en vez de interpolar. */
  transition:
    block-size var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease),
    content-visibility var(--dur-fast) allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* La flecha iba a --dur (280ms) y el contenido a 160ms: se notaba el desfase */
.faq-item summary::after { transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }

/* Respaldo por JS: mientras dura la animacion medida se fija la altura */
.faq-item.faq-anim > .faq-respuesta { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  /* Menos movimiento, no cero: se conserva el fundido y se quita el desplazamiento de altura */
  .faq-item::details-content {
    transition: opacity 120ms var(--ease), content-visibility 120ms var(--ease);
  }
  .faq-item summary::after { transition: none; }
}

/* La seccion de preguntas queda fuera de content-visibility:auto.
   Con la contencion activa el navegador no registra la transicion de altura
   del ::details-content y el acordeon saltaba en un frame. Es una sola seccion,
   asi que el coste de renderizarla siempre es despreciable. */
/* (la excepcion de #preguntas ya no hace falta: content-visibility se retiro del sitio) */