/* Cast · hoja compartida de las páginas de servicios.
   Los tokens y componentes salen de index.html; acá van versiones livianas, sin JS. */

:root {
  --fondo:#0c0d10; --fondo-2:#111317; --tarjeta:#15171c; --linea:#24272f; --linea-2:#30343e;
  --texto:#eceae4; --suave:#9a978f; --tenue:#5f5d58;
  --acento:#d4ff4f; --acento-osc:#9fc21f; --acento-rgb:212,255,79;
  --sans:'Geist', system-ui, sans-serif; --serif:'Instrument Serif', Georgia, serif; --mono:'Geist Mono', ui-monospace, monospace;
  --suave-curva:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--fondo); color:var(--texto); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:var(--acento); color:var(--fondo); }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--acento); outline-offset:3px; border-radius:6px; }
.ancho { max-width:1200px; margin:0 auto; padding:0 24px; }
em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; }

/* Grano sutil */
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.etiqueta { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--suave); }
.etiqueta::before { content:''; width:6px; height:6px; background:var(--acento); transform:rotate(45deg); }
h2 { font-weight:500; font-size:clamp(2.1rem, 4.6vw, 3.6rem); line-height:1.02; letter-spacing:-.045em; margin:18px 0 20px; max-width:18ch; }
h2 em { color:var(--acento); font-size:1.08em; }
.bajada { color:var(--suave); max-width:56ch; font-size:1.08rem; }
section { padding:110px 0; position:relative; }

/* Botones */
.boton { position:relative; display:inline-flex; align-items:center; gap:10px; background:var(--acento); color:var(--fondo); font-weight:600; font-size:.94rem; padding:14px 22px; border-radius:999px; border:0; cursor:pointer; font-family:inherit;
  transition:background .3s, box-shadow .3s, transform .4s var(--suave-curva); }
.boton:hover { background:#e2ff86; box-shadow:0 10px 40px -10px rgba(var(--acento-rgb),.6); transform:translateY(-1px); }
.boton .flecha { display:inline-block; transition:transform .4s var(--suave-curva); }
.boton:hover .flecha { transform:translateX(4px); }
.boton svg { width:18px; height:18px; flex:none; }
.boton.claro { background:rgba(255,255,255,.03); color:var(--texto); box-shadow:inset 0 0 0 1px var(--linea-2); }
.boton.claro:hover { background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--tenue); }
.acciones { display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }

/* Navegación flotante */
.nav { position:fixed; top:16px; left:50%; z-index:50; transform:translateX(-50%); width:min(1160px, calc(100% - 32px));
  display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 20px; border-radius:999px;
  background:rgba(17,19,23,.6); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 40px -20px #000; }
.logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.3rem; letter-spacing:-.05em; }
.logo i { width:11px; height:11px; background:var(--acento); border-radius:2px; transform:rotate(45deg); transition:transform .6s var(--suave-curva); }
.logo:hover i { transform:rotate(225deg); }
.menu { display:flex; gap:4px; font-size:.9rem; color:var(--suave); }
.menu a { padding:8px 14px; border-radius:999px; transition:color .2s, background .2s; }
.menu a:hover { color:var(--texto); background:rgba(255,255,255,.05); }
.nav .boton { padding:10px 18px; font-size:.88rem; }

/* Hero de servicio */
.hero { padding:170px 0 40px; overflow:hidden; }
.hero::before { content:''; position:absolute; z-index:-2; width:900px; height:900px; right:-300px; top:-360px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--acento-rgb),.14), transparent 62%); filter:blur(20px); pointer-events:none; }
.hero::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(236,234,228,.12) 1px, transparent 1.2px); background-size:30px 30px;
  mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%, #000, transparent 75%); }
.hero-grilla { display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:center; }
.migas { display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:.72rem; color:var(--tenue); margin-bottom:26px; }
.migas a { color:var(--suave); }
.migas a:hover { color:var(--texto); }
.migas span[aria-hidden] { color:var(--linea-2); }
.hero h1 { font-weight:500; font-size:clamp(2.6rem, 6vw, 5.2rem); line-height:.98; letter-spacing:-.05em; margin:24px 0 26px; max-width:15ch; }
.hero h1 em { color:var(--acento); font-size:1.06em; letter-spacing:-.01em; }
.hero .bajada { font-size:1.15rem; }

/* Visuales del hero (estáticos) */
.terminal { border-radius:18px; background:rgba(17,19,23,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px #000;
  overflow:hidden; font-family:var(--mono); font-size:.8rem; }
.terminal .barra { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--linea); color:var(--tenue); font-size:.72rem; }
.terminal .barra i { width:10px; height:10px; border-radius:50%; background:var(--linea-2); }
.terminal .barra span { margin-left:auto; }
.terminal pre { padding:20px 20px 24px; white-space:pre-wrap; color:var(--suave); line-height:1.85; font-family:inherit; }
.terminal .ok { color:var(--acento); }
.terminal .yo { color:var(--texto); }
.terminal .cursor { display:inline-block; width:8px; height:1.05em; background:var(--acento); vertical-align:-2px; animation:titilar 1s steps(1) infinite; }
@keyframes titilar { 50% { opacity:0; } }

.chat { display:grid; gap:10px; padding:24px; border-radius:18px; background:rgba(17,19,23,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px #000; font-size:.88rem; }
.chat p { width:fit-content; max-width:82%; padding:10px 14px; border-radius:14px; color:var(--texto); }
.chat .cliente { background:var(--fondo-2); box-shadow:inset 0 0 0 1px var(--linea); border-bottom-left-radius:4px; }
.chat .ia { justify-self:end; background:rgba(var(--acento-rgb),.12); color:#e9ffc0; border-bottom-right-radius:4px; }
.chat small { justify-self:end; font-family:var(--mono); font-size:.66rem; color:var(--tenue); margin-top:-4px; }

.ticket { width:min(320px, 100%); margin:0 auto; background:#fbfaf7; color:#111; border-radius:14px; padding:20px 22px; box-shadow:0 30px 60px rgba(0,0,0,.5);
  font-family:var(--mono); font-size:.7rem; transform:rotate(-4deg); }
.ticket strong { display:block; font-family:var(--sans); font-size:1.7rem; font-weight:500; letter-spacing:-.04em; line-height:1.05; margin:10px 0 14px; }
.ticket .fila { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #d8d5cc; }
.ticket .fila b { font-weight:500; }
.ticket .codigo-barras { height:30px; margin-top:14px; background:repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 5px, #111 5px 6px, transparent 6px 9px, #111 9px 12px, transparent 12px 14px); }

.tablero { display:grid; gap:16px; padding:22px; border-radius:18px; background:rgba(17,19,23,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px #000;
  font-family:var(--mono); font-size:.72rem; color:var(--tenue); }
.tablero .cabeza, .tablero .pie-tablero { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tablero .vivo, .tablero .pie-tablero b { color:var(--acento); font-weight:500; }
.tablero .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tablero .kpi { padding:12px; border-radius:12px; background:var(--fondo-2); box-shadow:inset 0 0 0 1px var(--linea); min-width:0; }
.tablero .kpi b { display:block; margin-top:4px; font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:-.02em; color:var(--texto); }
.tablero .barras { display:flex; align-items:flex-end; gap:6px; height:120px; border-bottom:1px solid var(--linea); }
.tablero .barras i { flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--acento), rgba(var(--acento-rgb),.18)); }

/* Antes / Después (páginas de rubros) */
.ad { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:56px; }
.ad article { display:flex; flex-direction:column; border-radius:22px; padding:28px; background:var(--tarjeta); box-shadow:inset 0 0 0 1px var(--linea); transition:box-shadow .4s; }
.ad article:hover { box-shadow:inset 0 0 0 1px rgba(var(--acento-rgb),.4); }
.ad .num { font-family:var(--mono); font-size:.72rem; color:var(--tenue); }
.ad h3 { font-size:1.22rem; font-weight:500; letter-spacing:-.03em; line-height:1.2; margin:18px 0 20px; }
.ad dl { display:grid; gap:16px; margin-top:auto; }
.ad dt { font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tenue); margin-bottom:6px; }
.ad dd { color:var(--suave); font-size:.93rem; }
.ad .despues { padding-top:16px; border-top:1px dashed var(--linea-2); }
.ad .despues dt { color:var(--acento); }
.ad .despues dd { color:var(--texto); }

/* Índice de rubros */
.hero h1.h1-ancho { max-width:17ch; }
.rubros-grilla { margin-top:0; }
a.celda.rubro { min-height:300px; }
a.celda.rubro:hover { transform:translateY(-3px); }
.celda .mini { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.celda .mini li { font-family:var(--mono); font-size:.68rem; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--linea); color:var(--suave); }
a.celda.rubro h3 { margin:28px 0 10px; padding-top:0; }
.celda .ir { margin-top:auto; padding-top:22px; font-size:.88rem; font-weight:500; color:var(--acento); }
.celda .ir .flecha { display:inline-block; transition:transform .4s var(--suave-curva); }
a.celda:hover .ir .flecha { transform:translateX(4px); }

/* Tarjetas */
.tarjetas { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:56px; }
.tarjetas.tres { grid-template-columns:repeat(3, 1fr); }
.celda { position:relative; border-radius:22px; padding:28px; background:var(--tarjeta); box-shadow:inset 0 0 0 1px var(--linea);
  display:flex; flex-direction:column; min-height:230px; transition:box-shadow .4s, transform .5s var(--suave-curva); }
.celda:hover { box-shadow:inset 0 0 0 1px rgba(var(--acento-rgb),.4); }
.celda .num { font-family:var(--mono); font-size:.72rem; color:var(--tenue); }
.celda h3 { font-size:1.25rem; font-weight:500; letter-spacing:-.03em; line-height:1.2; margin:auto 0 10px; padding-top:28px; }
.celda p { color:var(--suave); font-size:.94rem; }

/* Qué incluye */
.dos-col { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.dos-col > :first-child { position:sticky; top:120px; }
.lista { list-style:none; display:grid; gap:0; }
.lista li { display:flex; gap:14px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--linea); font-size:1.02rem; }
.lista li:first-child { border-top:1px solid var(--linea); }
.lista li::before { content:''; flex:none; width:7px; height:7px; background:var(--acento); transform:rotate(45deg) translateY(-2px); }

/* Caso en producción */
.caso { margin-top:56px; border-radius:24px; padding:40px; background:var(--fondo-2); box-shadow:inset 0 0 0 1px var(--linea); display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end; }
.caso .rubro { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--suave); }
.caso h3 { font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:500; line-height:1.1; letter-spacing:-.04em; margin:14px 0 12px; }
.caso p { color:var(--suave); }
.resultado { display:flex; gap:36px; flex-wrap:wrap; justify-content:flex-end; }
.resultado b { display:block; font-size:1.6rem; font-weight:500; letter-spacing:-.04em; color:var(--acento); }
.resultado span { font-size:.82rem; color:var(--suave); }

/* Proceso (estático) */
.pasos { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:64px; padding-top:44px; }
.pasos::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, var(--acento), var(--linea) 85%); }
.paso { position:relative; }
.paso::before { content:''; position:absolute; top:-49px; left:0; width:11px; height:11px; border-radius:50%; background:var(--acento); box-shadow:0 0 0 5px rgba(var(--acento-rgb),.12); }
.paso .num { font-family:var(--mono); font-size:.75rem; color:var(--acento); }
.paso h3 { font-size:1.3rem; font-weight:500; letter-spacing:-.03em; margin:8px 0; }
.paso p { color:var(--suave); font-size:.94rem; }
.paso small { display:inline-block; margin-top:14px; font-family:var(--mono); font-size:.7rem; color:var(--suave); padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.04); }

/* Planes */
.planes { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:56px; max-width:900px; }
.plan { position:relative; border-radius:24px; padding:34px; background:var(--tarjeta); box-shadow:inset 0 0 0 1px var(--linea); display:flex; flex-direction:column; }
.plan.destacado { background:linear-gradient(170deg, rgba(var(--acento-rgb),.12), var(--tarjeta) 45%); box-shadow:inset 0 0 0 1px rgba(var(--acento-rgb),.45); }
.plan h3 { font-size:1.1rem; font-weight:500; color:var(--suave); }
.plan .precio { font-size:2.6rem; font-weight:500; letter-spacing:-.05em; line-height:1.1; margin:18px 0 8px; }
.plan .precio small:first-child { margin-right:2px; }
.plan .precio small { font-size:.9rem; font-weight:400; letter-spacing:0; color:var(--suave); }
.plan > p { color:var(--suave); font-size:.94rem; }
.plan ul { list-style:none; margin:26px 0 32px; padding-top:26px; border-top:1px solid var(--linea); display:grid; gap:12px; font-size:.94rem; }
.plan li { display:flex; gap:12px; align-items:baseline; }
.plan li::before { content:''; flex:none; width:6px; height:6px; background:var(--acento); transform:rotate(45deg) translateY(-2px); }
.plan .boton { margin-top:auto; justify-content:center; }
.nota-precio { margin-top:28px; font-size:.9rem; color:var(--suave); max-width:60ch; }
.nota-precio b { color:var(--texto); font-weight:500; }

/* Chips de tecnologías */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.chips span { font-family:var(--mono); font-size:.78rem; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--linea); color:var(--suave); }

/* Preguntas frecuentes */
.faq { margin-top:48px; border-top:1px solid var(--linea); max-width:860px; }
.faq details { border-bottom:1px solid var(--linea); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; font-size:1.12rem; font-weight:500; letter-spacing:-.02em; transition:color .2s; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--acento); }
.faq summary::after { content:'+'; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1px var(--linea-2); font-family:var(--mono); font-weight:400; color:var(--suave); transition:transform .4s var(--suave-curva), background .3s; }
.faq details[open] summary::after { transform:rotate(45deg); background:var(--acento); color:var(--fondo); box-shadow:none; }
.faq details p { color:var(--suave); padding:0 56px 26px 0; max-width:70ch; }

/* CTA final */
.cta { position:relative; border-radius:32px; padding:72px; overflow:hidden; background:var(--fondo-2); box-shadow:inset 0 0 0 1px var(--linea); }
.cta::before { content:''; position:absolute; width:700px; height:700px; right:-260px; bottom:-420px; border-radius:50%; background:radial-gradient(circle, rgba(var(--acento-rgb),.16), transparent 65%); pointer-events:none; }
.cta h2 { max-width:16ch; }
.cta .acciones { position:relative; }

/* Otros servicios */
.otros { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px; }
.otros a { display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:20px; background:var(--tarjeta); box-shadow:inset 0 0 0 1px var(--linea); transition:box-shadow .3s, transform .5s var(--suave-curva); }
.otros a:hover { box-shadow:inset 0 0 0 1px rgba(var(--acento-rgb),.45); transform:translateY(-3px); }
.otros b { font-weight:500; font-size:1.08rem; letter-spacing:-.02em; display:flex; justify-content:space-between; gap:12px; }
.otros b::after { content:'→'; color:var(--acento); transition:transform .4s var(--suave-curva); }
.otros a:hover b::after { transform:translateX(4px); }
.otros span { color:var(--suave); font-size:.9rem; }

/* Pie */
footer { padding:100px 0 40px; overflow:hidden; }
.gigante { font-size:clamp(7rem, 30vw, 26rem); font-weight:600; line-height:.78; letter-spacing:-.08em; text-align:center; margin-bottom:60px; user-select:none;
  background:linear-gradient(180deg, var(--linea-2), transparent 92%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gigante i { font-style:normal; color:transparent; background:linear-gradient(180deg, var(--acento), rgba(var(--acento-rgb),0) 95%); -webkit-background-clip:text; background-clip:text; }
.pie { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; color:var(--suave); font-size:.86rem; padding-top:28px; border-top:1px solid var(--linea); }
.pie nav { display:flex; flex-wrap:wrap; gap:8px 22px; }
.pie a:hover { color:var(--texto); }

/* Botón flotante de WhatsApp */
.wsp { position:fixed; z-index:60; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--acento); color:var(--fondo);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.7), 0 0 0 6px rgba(var(--acento-rgb),.12); transition:transform .4s var(--suave-curva), box-shadow .3s; }
.wsp:hover { transform:scale(1.07); box-shadow:0 14px 40px -8px rgba(var(--acento-rgb),.55), 0 0 0 8px rgba(var(--acento-rgb),.16); }
.wsp svg { width:28px; height:28px; }

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

@media (max-width:1000px) {
  .menu { display:none; }
  .hero-grilla { grid-template-columns:1fr; gap:48px; }
  .hero-grilla > :last-child { max-width:520px; }
  .tarjetas, .tarjetas.tres { grid-template-columns:1fr 1fr; }
  .dos-col { grid-template-columns:1fr; gap:36px; }
  .dos-col > :first-child { position:static; }
  .caso { grid-template-columns:1fr; gap:28px; }
  .resultado { justify-content:flex-start; }
  .pasos { grid-template-columns:1fr 1fr; row-gap:48px; }
  .otros { grid-template-columns:1fr 1fr; }
  .ad { grid-template-columns:1fr 1fr; }
  .cta { padding:48px; }
}
@media (max-width:640px) {
  .ancho { padding:0 16px; }
  section { padding:72px 0; }
  .nav { padding-left:16px; width:calc(100% - 24px); top:12px; }
  .hero { padding:120px 0 24px; }
  .hero .bajada { font-size:1.05rem; }
  .acciones .boton { flex:1 1 auto; justify-content:center; }
  .tarjetas, .tarjetas.tres { grid-template-columns:1fr; margin-top:40px; }
  .celda { min-height:0; padding:24px; }
  .celda h3 { padding-top:18px; }
  .caso { padding:28px 22px; }
  .pasos { grid-template-columns:1fr; padding-top:0; padding-left:32px; gap:36px; margin-top:44px; }
  .pasos::before { top:0; bottom:0; left:5px; right:auto; width:1px; height:auto; background:linear-gradient(180deg, var(--acento), var(--linea) 85%); }
  .paso::before { top:6px; left:-32px; }
  .planes { grid-template-columns:1fr; }
  .plan { padding:28px 24px; }
  .faq summary { font-size:1.02rem; padding:20px 0; }
  .faq details p { padding-right:0; }
  .cta { padding:36px 22px; border-radius:24px; }
  .otros { grid-template-columns:1fr; }
  .ad { grid-template-columns:1fr; margin-top:40px; }
  .ad article { padding:24px; }
  a.celda.rubro { min-height:0; }
  .terminal pre { font-size:.74rem; padding:16px; }
  .pie { flex-direction:column; padding-bottom:72px; }
  .wsp { width:54px; height:54px; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
}