/* ============================================================
   AppMinistra — Sitio comercial
   Sistema visual derivado de la identidad del producto.
   Azul de marca #0099ff · Outfit (display) + Inter (texto)
   ============================================================ */

:root{
  /* Marca */
  --primary:        #0099ff;
  --primary-bright: #00b4ff;
  --primary-deep:   #0066cc;
  --primary-dark:   #007acc;
  --primary-tint:   #e6f5ff;

  /* Neutros (escala slate) */
  --ink:       #0f172a;
  --ink-soft:  #1e293b;
  --body:      #334155;
  --muted:     #64748b;
  --faint:     #94a3b8;
  --line:      #e2e8f0;
  --line-soft: #f1f5f9;
  --page:      #f8fafc;
  --white:     #ffffff;

  /* Semánticos */
  --success: #10b981;
  --danger:  #ef4444;
  --amber:   #f59e0b;

  /* Sombras — la azulada es la firma del sistema */
  --shadow-premium: 0 25px 50px -12px rgba(0,153,255,.25);
  --shadow-card:    0 1px 2px rgba(15,23,42,.04), 0 10px 24px -12px rgba(15,23,42,.10);
  --shadow-lift:    0 30px 60px -22px rgba(15,23,42,.22);
  --shadow-float:   0 40px 80px -30px rgba(2,32,71,.45);

  /* Gradiente insignia */
  --grad-hero: radial-gradient(circle at top right, #00b4ff, #0099ff, #0066cc);

  /* Radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 999px;

  --wrap: 1200px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body);
  background:var(--white);
  line-height:1.65;
  font-size:1rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.brand-name,.step-num{
  font-family:'Outfit','Inter',system-ui,sans-serif;
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.025em;
}

h1{ font-weight:900; }
h2{ font-weight:900; font-size:clamp(1.9rem,4vw,3rem); }
h3{ font-weight:700; }

p{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; border-radius:4px; }

/* ── Layout ────────────────────────────────────────────── */
.container{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; }
.container-narrow{ max-width:820px; }

.section{ padding:clamp(4.5rem,9vw,7.5rem) 0; }
.section-alt{ background:var(--page); }

.section-head{ max-width:760px; margin:0 auto clamp(2.75rem,5vw,4rem); text-align:center; }
.section-head h2{ margin-bottom:1rem; }
.section-lead{ font-size:1.125rem; color:var(--muted); }

.eyebrow{
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:rgba(255,255,255,.75); margin-bottom:1rem;
}
.eyebrow-dark{ color:var(--primary); }

/* ── Botones ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border:2px solid transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:.9375rem; letter-spacing:.01em;
  padding:.8rem 1.6rem; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.175,.885,.32,1.275),
             box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm{ padding:.6rem 1.15rem; font-size:.875rem; }
.btn-lg{ padding:1rem 2rem; font-size:1rem; }
.btn-block{ width:100%; }

.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 10px 24px -10px rgba(0,153,255,.7); }
.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(0,153,255,.75); }

.btn-white{ background:#fff; color:var(--primary-deep); box-shadow:0 12px 30px rgba(3,37,76,.22); }
.btn-white:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(3,37,76,.28); }

.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.75); transform:translateY(-3px); }

/* ── Header ────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.1rem 0; transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 1px 0 var(--line), 0 8px 30px -18px rgba(15,23,42,.4);
  padding:.7rem 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand-mark{
  width:42px; height:42px; flex:none;
  border:2px solid rgba(255,255,255,.9);  /* aro blanco: separa el azul del logo del azul del hero */
  border-radius:12px;
  overflow:hidden;
  transform:rotate(3deg);                 /* el gesto de marca: leve inclinación */
  box-shadow:0 6px 16px -4px rgba(0,153,255,.55);
  transition:transform .3s ease, border-color .3s ease;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand:hover .brand-mark{ transform:rotate(-3deg) scale(1.05); }
/* Sobre el header blanco el aro blanco desaparece: se vuelve azul claro */
.is-stuck .brand-mark{ border-color:rgba(0,153,255,.35); }
.brand-name{ font-size:1.3rem; font-weight:900; color:#fff; letter-spacing:-.03em; text-shadow:#000 2px 2px 4px; }
/* Sobre el header blanco el texto pasa a oscuro y la sombra negra lo ensuciaría */
.is-stuck .brand-name{ color:var(--ink); text-shadow:none; }

.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  font-size:.9375rem; font-weight:600; color:rgba(255,255,255,.88);
  transition:color .2s ease;
}
.nav-links a:hover{ color:#fff; }
.is-stuck .nav-links a{ color:var(--body); }
.is-stuck .nav-links a:hover{ color:var(--primary); }
.nav-cta, .is-stuck .nav-cta{ color:#fff !important; }

.nav-toggle{
  display:none; width:44px; height:44px; background:none; border:0;
  cursor:pointer; padding:10px; flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:2.5px; background:#fff; border-radius:2px; transition:.3s ease; }
.is-stuck .nav-toggle span{ background:var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(8rem,14vw,11rem) 0 clamp(5rem,9vw,8rem); color:#fff; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:var(--grad-hero);
  /* clip-path:ellipse(150% 100% at 50% 0%); */  /* la curva característica */
}
.hero-bg::after{                            /* textura de rejilla sutil */
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 70% 0%,#000,transparent 70%);
}

.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

.hero-copy h1{ font-size:clamp(2.4rem,5.4vw,4.1rem); letter-spacing:-.04em; margin-bottom:1.35rem; color:#fff; }
.hero-copy h1 span{ color:rgba(255,255,255,.72); }
.hero-lead{ font-size:clamp(1.05rem,1.7vw,1.22rem); color:rgba(255,255,255,.92); max-width:33rem; margin-bottom:2.25rem; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; font-size:.875rem; color:rgba(255,255,255,.85); }
.hero-trust li{ display:flex; align-items:center; gap:.5rem; }
.hero-trust li::before{
  content:''; width:17px; height:17px; flex:none; border-radius:50%;
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
}

/* ── Mock de producto ──────────────────────────────────── */
.hero-visual{ position:relative; }
.mock-glow{
  position:absolute; top:45%; left:50%; width:125%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.34) 0%,transparent 65%);
  pointer-events:none;
}
.mock-window{
  position:relative; background:#fff; border-radius:var(--r-md);
  box-shadow:var(--shadow-float); overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
}
.mock-chrome{
  display:flex; gap:6px; align-items:center;
  padding:9px 12px; background:#f1f5f9; border-bottom:1px solid var(--line);
}
.mock-chrome i{ width:9px; height:9px; border-radius:50%; background:#cbd5e1; }
.mock-chrome i:first-child{ background:#fca5a5; }
.mock-chrome i:nth-child(2){ background:#fcd34d; }
.mock-chrome i:nth-child(3){ background:#86efac; }

.mock-body{ display:grid; grid-template-columns:104px 1fr; min-height:300px; }

.mock-side{ background:var(--primary); padding:.85rem .7rem; }
.mock-side-brand{
  display:flex; align-items:center; gap:.35rem;
  font-size:.5rem; font-weight:900; color:#fff; letter-spacing:-.02em; margin-bottom:.9rem;
}
.mock-side-brand span{ width:13px; height:13px; border-radius:4px; background:#fff; transform:rotate(3deg); }
.mock-nav{
  display:flex; align-items:center; gap:.35rem;
  font-size:.46rem; font-weight:600; color:rgba(255,255,255,.72);
  padding:.32rem .35rem; border-radius:5px; margin-bottom:.12rem;
}
.mock-nav span{ width:9px; height:9px; border-radius:2.5px; background:rgba(255,255,255,.4); flex:none; }
.mock-nav.is-active{ background:rgba(255,255,255,.2); color:#fff; }
.mock-nav.is-active span{ background:#fff; }

.mock-main{ padding:.85rem .95rem; background:var(--page); }
.mock-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.7rem; }
.mock-head strong{ display:block; font-family:'Outfit',sans-serif; font-size:.68rem; font-weight:900; color:var(--ink); }
.mock-head em{ font-style:normal; font-size:.46rem; color:var(--faint); }
.mock-pill{
  font-size:.4rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  background:#d1fae5; color:#047857; padding:.18rem .45rem; border-radius:var(--r-pill);
}

.mock-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:.55rem; }
.mock-kpi{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:.45rem .5rem; display:flex; flex-direction:column; gap:.08rem;
}
.k-label{ font-size:.38rem; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.k-value{ font-family:'Outfit',sans-serif; font-size:.62rem; font-weight:900; color:var(--ink); }
.k-value em{ font-style:normal; font-size:.44rem; color:var(--faint); font-weight:600; }
.k-delta{ font-size:.38rem; font-weight:700; }
.k-delta.up{ color:var(--success); }
.k-delta.down{ color:var(--danger); }

.mock-chart{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:.5rem .55rem; }
.mock-chart-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.45rem; }
.mock-chart-head strong{ font-family:'Outfit',sans-serif; font-size:.5rem; font-weight:900; color:var(--ink); }
.mock-chart-head span{ font-size:.38rem; color:var(--faint); }
.mock-bars{ display:flex; align-items:flex-end; gap:.28rem; height:62px; }
.mock-bars i{
  flex:1; height:var(--h); border-radius:3px 3px 1px 1px;
  background:linear-gradient(to top,#bae2ff,#7fcbff);
}
.mock-bars i.is-now{ background:linear-gradient(to top,var(--primary),var(--primary-bright)); }

.mock-phone{
  /* Bajo y a la derecha: deja ver la barra destacada del gráfico */
  position:absolute; right:-26px; bottom:-72px; width:126px;
  background:#0f172a; border-radius:18px; padding:5px;
  box-shadow:var(--shadow-float); border:1px solid rgba(255,255,255,.14);
}
.mock-phone-screen{ background:var(--page); border-radius:14px; padding:.5rem .45rem; }
.mp-top{ display:flex; align-items:center; gap:.3rem; font-size:.44rem; font-weight:800; color:var(--ink); margin-bottom:.4rem; }
.mp-top span{ width:11px; height:11px; border-radius:3px; background:var(--primary); transform:rotate(3deg); }
.mp-card{
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:.45rem .5rem; display:flex; flex-direction:column; gap:.05rem; margin-bottom:.4rem;
}
.mp-label{ font-size:.36rem; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; }
.mp-value{ font-family:'Outfit',sans-serif; font-size:.85rem; font-weight:900; color:var(--ink); }
.mp-ok{ font-size:.38rem; font-weight:700; color:var(--success); }
.mp-months{ display:grid; grid-template-columns:repeat(6,1fr); gap:.2rem; margin-bottom:.45rem; }
.mp-months i{ aspect-ratio:1; border-radius:3px; background:var(--line); }
.mp-months i.paid{ background:#a7f3d0; }
.mp-months i.now{ background:var(--primary); box-shadow:0 0 0 1.5px rgba(0,153,255,.3); }
.mp-btn{
  background:var(--primary); color:#fff; text-align:center;
  font-size:.4rem; font-weight:800; padding:.32rem; border-radius:var(--r-pill);
}

.float-slow{ animation:float 7s ease-in-out infinite; }
.float-fast{ animation:float 5.5s ease-in-out infinite .8s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }

/* ── Tira de datos ─────────────────────────────────────── */
.strip{ background:var(--ink); padding:2.5rem 0; }
.strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.strip-item{ display:flex; flex-direction:column; gap:.2rem; }
.strip-item strong{
  font-family:'Outfit',sans-serif; font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:900; color:var(--primary-bright); letter-spacing:-.03em; line-height:1;
}
.strip-item span{ font-size:.875rem; color:rgba(255,255,255,.65); }

/* ── Dolores ───────────────────────────────────────────── */
.pain-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.pain{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2rem 1.65rem; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pain:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:#cbe9ff; }
.pain-icon{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:1.1rem;
  border-radius:13px; background:#fee2e2; color:#dc2626; transform:rotate(3deg);
}
.pain h3{ font-size:1.125rem; margin-bottom:.5rem; }
.pain p{ font-size:.9375rem; color:var(--muted); }

/* ── Módulos ───────────────────────────────────────────── */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; }
.feature{
  background:#fff; border:2px solid rgba(15,23,42,.05); border-radius:var(--r-xl);
  padding:2.1rem 1.8rem; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.feature:hover{ transform:translateY(-10px); box-shadow:var(--shadow-premium); border-color:var(--primary); }
.feature-icon{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:1.25rem;
  border-radius:15px; background:var(--primary-tint); color:var(--primary);
  transform:rotate(3deg); transition:transform .35s ease;
}
.feature:hover .feature-icon{ transform:rotate(-3deg) scale(1.06); }
.feature h3{ font-size:1.1875rem; margin-bottom:.55rem; }
.feature p{ font-size:.9375rem; color:var(--muted); }

/* ── Bloques partidos ──────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.split-reverse .split-copy{ order:2; }
.split-copy h2{ margin-bottom:1.1rem; }
/* :not(.eyebrow) — si no, esta regla le gana al color azul del eyebrow */
.split-copy > p:not(.eyebrow){ color:var(--muted); font-size:1.0625rem; margin-bottom:1.1rem; }

.check-list{ display:flex; flex-direction:column; gap:.9rem; margin:1.75rem 0; }
.check-list li{ position:relative; padding-left:2rem; font-size:.9375rem; color:var(--muted); }
.check-list li strong{ color:var(--ink); font-weight:700; }
.check-list li::before{
  content:''; position:absolute; left:0; top:.3rem;
  width:20px; height:20px; border-radius:50%;
  background:var(--primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230099ff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}

.note{
  background:var(--primary-tint); border-left:4px solid var(--primary);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:1rem 1.25rem;
  font-size:.9375rem; color:var(--ink-soft);
}

/* Cajas de deuda */
.buckets{ display:flex; flex-direction:column; gap:.85rem; }
.bucket{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.15rem; box-shadow:var(--shadow-card);
}
.bucket-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.bucket-top strong{ font-family:'Outfit',sans-serif; font-size:1.0625rem; font-weight:900; color:var(--ink); }
.bucket-tag{
  font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:.25rem .65rem; border-radius:var(--r-pill);
}
.tag-red{ background:#fee2e2; color:#b91c1c; }
.tag-amber{ background:#fef3c7; color:#b45309; }
.tag-blue{ background:var(--primary-tint); color:var(--primary-deep); }
.tag-slate{ background:var(--line-soft); color:var(--muted); }
.tag-green{ background:#d1fae5; color:#047857; }
.bucket-bar{ height:7px; background:var(--line-soft); border-radius:var(--r-pill); overflow:hidden; margin-bottom:.5rem; }
.bucket-bar i{ display:block; height:100%; width:var(--w); border-radius:var(--r-pill); }
.bucket-bar i.red{ background:#ef4444; }
.bucket-bar i.amber{ background:var(--amber); }
.bucket-bar i.blue{ background:var(--primary); }
.bucket-foot{ font-size:.8125rem; color:var(--faint); }
.bucket.is-locked{ background:var(--line-soft); box-shadow:none; border-style:dashed; }
.bucket-lock{ display:flex; align-items:center; gap:.4rem; font-size:.8125rem; color:var(--muted); font-weight:600; }
.bucket.is-credit{ border-color:#a7f3d0; background:linear-gradient(180deg,#f0fdf4,#fff); }

/* Verificador */
.verify-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift); overflow:hidden;
}
.verify-head{
  display:flex; align-items:center; gap:.55rem;
  background:var(--ink); color:#fff; padding:1rem 1.35rem;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:.9375rem;
}
.verify-input{ padding:1.35rem 1.35rem .35rem; }
.verify-input span{
  display:block; border:2px dashed var(--primary); border-radius:var(--r-sm);
  padding:.9rem; text-align:center; letter-spacing:.22em;
  font-weight:700; color:var(--primary-deep); background:var(--primary-tint);
  font-size:.9375rem;
}
.verify-result{ padding:1.1rem 1.35rem 1.5rem; }
.verify-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#d1fae5; color:#047857; font-weight:800; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.07em;
  padding:.42rem .85rem; border-radius:var(--r-pill); margin-bottom:1rem;
}
.verify-rows{ display:flex; flex-direction:column; }
.verify-rows > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.65rem 0; border-bottom:1px solid var(--line-soft); font-size:.9375rem;
}
.verify-rows > div:last-child{ border-bottom:0; }
.verify-rows dt{ color:var(--faint); }
.verify-rows dd{ font-weight:700; color:var(--ink); text-align:right; }

/* ── Infraestructura ───────────────────────────────────── */
.split-infra{ align-items:start; }
.infra-title{ font-size:1.25rem; margin-bottom:1.25rem; }

.infra-stack{ display:flex; flex-direction:column; }

.infra-node{
  background:#fff; border:2px solid var(--line); border-radius:var(--r-md);
  padding:1.1rem 1.25rem; box-shadow:var(--shadow-card);
  transition:border-color .3s ease, transform .3s ease;
}
.infra-node:hover{ border-color:var(--primary); transform:translateX(4px); }

.infra-node-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
.infra-node-head strong{
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:700; color:var(--ink);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.infra-dot{
  width:9px; height:9px; flex:none; border-radius:50%;
  background:var(--success); box-shadow:0 0 0 3px rgba(16,185,129,.18);
}
.infra-badge{
  flex:none; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  background:var(--primary-tint); color:var(--primary-deep);
  padding:.22rem .6rem; border-radius:var(--r-pill);
}

.infra-parts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.infra-part{
  font-size:.75rem; font-weight:600; color:var(--muted);
  background:var(--line-soft); border:1px solid var(--line);
  padding:.28rem .65rem; border-radius:var(--r-sm);
}

/* El corte entre servidores: la idea visual de la sección */
.infra-gap{
  position:relative; height:44px;
  display:flex; align-items:center; justify-content:center;
}
.infra-gap::before{
  content:''; position:absolute; inset:50% 0 auto 0; height:0;
  border-top:2px dashed var(--line);
}
.infra-gap span{
  position:relative; background:var(--white); padding:0 .7rem;
  font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--faint);
}

/* ── Roles ─────────────────────────────────────────────── */
.role-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; align-items:start; }
.role{
  position:relative; background:#fff; border:2px solid var(--line);
  border-radius:var(--r-xl); padding:2.25rem 1.85rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.role:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.role h3{ font-size:1.3rem; margin-bottom:.65rem; }
.role > p{ font-size:.9375rem; color:var(--muted); margin-bottom:1.25rem; }
.role ul{ display:flex; flex-direction:column; gap:.6rem; }
.role li{ position:relative; padding-left:1.4rem; font-size:.875rem; color:var(--body); }
.role li::before{
  content:''; position:absolute; left:0; top:.55rem;
  width:7px; height:7px; border-radius:50%; background:var(--primary);
}
.role-featured{
  background:linear-gradient(170deg,#0b3f6d,var(--ink));
  border-color:transparent; box-shadow:var(--shadow-premium);
}
.role-featured h3{ color:#fff; }
.role-featured > p{ color:rgba(255,255,255,.72); }
.role-featured li{ color:rgba(255,255,255,.9); }
.role-featured li::before{ background:var(--primary-bright); }
.role-flag{
  position:absolute; top:-13px; left:1.85rem;
  background:var(--primary); color:#fff; font-size:.6875rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.3rem .8rem; border-radius:var(--r-pill);
  box-shadow:0 8px 18px -6px rgba(0,153,255,.8);
}

/* ── Pasos (sección oscura) ────────────────────────────── */
.section-dark{ background:var(--ink); color:rgba(255,255,255,.75); position:relative; overflow:hidden; }
.section-dark::before{
  content:''; position:absolute; top:-40%; left:50%; width:900px; aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,153,255,.22),transparent 65%);
  pointer-events:none;
}
.section-head-light h2{ color:#fff; }
.section-head-light .section-lead{ color:rgba(255,255,255,.65); }

.steps{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.step{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:1.85rem 1.6rem;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.step:hover{ background:rgba(255,255,255,.09); border-color:rgba(0,180,255,.5); transform:translateY(-6px); }
.step-num{
  display:block; font-size:2rem; font-weight:900; color:var(--primary-bright);
  letter-spacing:-.04em; line-height:1; margin-bottom:.85rem; opacity:.9;
}
.step h3{ color:#fff; font-size:1.0625rem; margin-bottom:.45rem; }
.step p{ font-size:.9063rem; color:rgba(255,255,255,.62); }

/* ── FAQ ───────────────────────────────────────────────── */
.faq{ display:flex; flex-direction:column; gap:.75rem; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open]{ border-color:var(--primary); box-shadow:var(--shadow-card); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.4rem; cursor:pointer; list-style:none;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.0313rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230099ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .3s ease;
}
.faq-item[open] summary::after{ transform:rotate(135deg); }
.faq-body{ padding:0 1.4rem 1.3rem; }
.faq-body p{ font-size:.9375rem; color:var(--muted); }

/* ── CTA / formulario ──────────────────────────────────── */
.cta{ position:relative; padding:clamp(4.5rem,9vw,7rem) 0; color:#fff; background:var(--grad-hero); overflow:hidden; }
.cta::before{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 20% 100%,#000,transparent 70%);
}
.cta-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
.cta-copy h2{ color:#fff; margin-bottom:1rem; }
.cta-copy > p:not(.eyebrow){ color:rgba(255,255,255,.9); font-size:1.0625rem; margin-bottom:1.5rem; max-width:30rem; }

.cta-points{ display:flex; flex-direction:column; gap:.65rem; margin-bottom:2rem; }
.cta-points li{ position:relative; padding-left:1.9rem; font-size:.9375rem; color:rgba(255,255,255,.92); }
.cta-points li::before{
  content:''; position:absolute; left:0; top:.28rem; width:19px; height:19px; border-radius:50%;
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

.cta-direct{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.cta-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9375rem; font-weight:700; color:#fff;
  border-bottom:2px solid rgba(255,255,255,.35); padding-bottom:.2rem;
  transition:border-color .25s ease;
}
.cta-link:hover{ border-color:#fff; }

.cta-form-wrap{ position:relative; }
.cta-form{
  background:#fff; border-radius:var(--r-xl); padding:clamp(1.75rem,3vw,2.35rem);
  box-shadow:0 40px 80px -30px rgba(2,32,71,.6);
}
.cta-form h3{ font-size:1.35rem; margin-bottom:1.35rem; }

.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ font-size:.8125rem; font-weight:700; color:var(--ink-soft); }
.field label span{ font-weight:400; color:var(--faint); }
.field input,.field select,.field textarea{
  width:100%; background:transparent;
  border:0; border-bottom:2px solid var(--line);
  padding:.55rem 0; font-size:.9375rem; color:var(--ink);
  transition:border-color .2s ease, background-color .2s ease;
}
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#cbd5e1; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--primary); background:rgba(0,153,255,.03);
}
.field input.is-error,.field select.is-error{ border-bottom-color:var(--danger); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cta-form .btn{ margin-top:.65rem; }
.form-legal{ font-size:.75rem; color:var(--faint); text-align:center; margin-top:.85rem; }
.form-msg{ font-size:.875rem; font-weight:600; text-align:center; margin-top:.75rem; display:none; }
.form-msg.is-ok{ display:block; color:#047857; }
.form-msg.is-bad{ display:block; color:var(--danger); }

/* ── Footer ────────────────────────────────────────────── */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:4rem 0 2rem; }
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1);
}
.brand-dark .brand-name{ color:#fff; }
.footer-brand p{ font-size:.9063rem; margin-top:1rem; max-width:22rem; }
.footer-col{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col h4{ color:#fff; font-size:.8125rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:.35rem; }
.footer-col a{ font-size:.9063rem; transition:color .2s ease; }
.footer-col a:hover{ color:var(--primary-bright); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  padding-top:1.75rem; font-size:.8125rem; color:rgba(255,255,255,.42);
}
.footer-bottom strong{ font-weight:600; color:rgba(255,255,255,.72); }
.footer-bottom a{ border-bottom:1px solid rgba(255,255,255,.22); transition:color .2s ease, border-color .2s ease; }
.footer-bottom a:hover strong{ color:var(--primary-bright); }
.footer-bottom a:hover{ border-bottom-color:var(--primary-bright); }

/* ── Animación de entrada ──────────────────────────────────
   Solo se oculta cuando hay JS (clase .js en <html>). Sin JS,
   el contenido se ve completo desde el primer pintado.        */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.35rem;
    background:#fff; padding:6rem 2rem 2rem;
    box-shadow:-20px 0 60px -20px rgba(15,23,42,.35);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
  }
  .nav-links.is-open{ transform:none; }
  .nav-links a{ color:var(--body) !important; width:100%; padding:.7rem 0; font-size:1.0625rem; }
  .nav-links .nav-cta{ margin-top:1rem; width:100%; color:#fff !important; }

  .hero-grid,.split,.cta-grid{ grid-template-columns:1fr; }
  .split-reverse .split-copy{ order:0; }
  .hero-copy{ text-align:center; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-actions,.hero-trust{ justify-content:center; }
  .hero-visual{ max-width:560px; margin:1.5rem auto 0; }
  .mock-phone{ right:-6px; bottom:-26px; width:116px; }
  .strip-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:560px){
  .container{ padding:0 1.15rem; }
  .hero-actions .btn{ width:100%; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .mock-phone{ display:none; }
  .mock-body{ grid-template-columns:86px 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:flex-start; }
  .role-featured{ margin-top:1rem; }
}

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

@media print{
  .site-header,.nav-toggle,.cta-form-wrap,.hero-visual{ display:none; }
  body{ color:#000; }
}

/* ============================================================
   Páginas internas (cl.15). Bloque nuevo: no modifica nada de arriba.
   ============================================================ */

/* Menú: página actual */
.nav-links a[aria-current="page"]:not(.nav-cta){ color:#fff; box-shadow:inset 0 -2px 0 currentColor; }
.is-stuck .nav-links a[aria-current="page"]:not(.nav-cta){ color:var(--primary); }

/* Enlaces "ver más" del inicio */
.more-row{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }
.more-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; color:var(--primary-deep);
  border-bottom:2px solid rgba(0,153,255,.3); padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.more-link:hover{ color:var(--primary); border-color:var(--primary); }
.split-copy .more-link{ margin-top:.5rem; }
.more-link-light{ color:var(--primary-bright); border-color:rgba(0,180,255,.4); }
.more-link-light:hover{ color:#fff; border-color:#fff; }
.form-legal a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Banda azul con el H1 */
.page-hero{ position:relative; padding:clamp(7.5rem,12vw,9.5rem) 0 clamp(3rem,6vw,4.5rem); color:#fff; overflow:hidden; }
.page-hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); letter-spacing:-.035em; color:#fff; max-width:52rem; margin-bottom:1.1rem; }
.page-hero h1 span{ color:rgba(255,255,255,.72); }
.page-lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:rgba(255,255,255,.92); max-width:44rem; }

.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:.35rem; font-size:.8125rem; color:rgba(255,255,255,.75); margin-bottom:1.6rem; }
.breadcrumbs li + li::before{ content:'›'; margin-right:.35rem; opacity:.7; }
.breadcrumbs a{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px; }
.breadcrumbs a:hover{ text-decoration-color:#fff; }

/* Texto largo */
.prose{ max-width:760px; margin:0 auto; }
.prose > * + *{ margin-top:1.1rem; }
.prose h2{ font-size:clamp(1.6rem,3vw,2.15rem); margin-top:3.25rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.2rem; margin-top:2rem; }
.prose p,.prose li{ font-size:1.0625rem; color:var(--body); }
.prose ul:not(.check-list),.prose ol{ padding-left:1.35rem; display:flex; flex-direction:column; gap:.55rem; }
.prose ul:not(.check-list){ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li::marker{ color:var(--primary); font-weight:700; }
.prose a:not(.btn){ color:var(--primary-deep); font-weight:600; text-decoration:underline; text-decoration-color:rgba(0,102,204,.35); text-underline-offset:3px; }
.prose a:not(.btn):hover{ text-decoration-color:currentColor; }
.prose strong{ color:var(--ink); }
.prose .check-list{ margin:1.5rem 0; }
.prose .check-list li{ font-size:1rem; }
.prose .note{ margin:1.75rem 0; }
.prose-figure{ margin:2.25rem 0; }

.prose table{ width:100%; border-collapse:collapse; font-size:.9375rem; margin:1.5rem 0; }
.prose th,.prose td{ text-align:left; padding:.7rem .85rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ font-family:'Outfit','Inter',sans-serif; color:var(--ink); background:var(--page); }
.table-wrap{ overflow-x:auto; }

/* Índice de la página (módulos) */
.toc{ background:var(--page); border:1px solid var(--line); border-radius:var(--r-md); padding:1.25rem 1.5rem; }
.toc strong{ display:block; font-family:'Outfit','Inter',sans-serif; color:var(--ink); margin-bottom:.6rem; }
.toc ol{ columns:2; column-gap:2rem; }
.toc li{ break-inside:avoid; font-size:.9375rem; }

/* Sigue leyendo */
.related{ padding:clamp(3.5rem,7vw,5rem) 0; }
.related-title{ font-size:clamp(1.5rem,3vw,2rem); text-align:center; margin-bottom:2rem; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.related-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem;
  box-shadow:var(--shadow-card); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.related-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-premium); border-color:rgba(0,153,255,.35); }
.related-card strong{ font-family:'Outfit','Inter',sans-serif; font-size:1.15rem; color:var(--ink); }
.related-card span{ font-size:.9375rem; color:var(--muted); flex:1; }
.related-card em{ font-style:normal; font-weight:700; font-size:.875rem; color:var(--primary); }

/* Llamado corto al final de las internas */
.cta-short{ padding:clamp(3.5rem,7vw,5rem) 0; }
.cta-short-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-short h2{ color:#fff; font-size:clamp(1.6rem,3.2vw,2.4rem); max-width:34rem; }
.cta-short-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* 404 */
.notfound-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.75rem; margin-top:1.5rem; }

@media (max-width:980px){
  .nav-links a[aria-current="page"]:not(.nav-cta){ color:var(--primary) !important; box-shadow:none; }
}
@media (max-width:560px){
  .toc ol{ columns:1; }
  .cta-short-actions .btn{ width:100%; }
}