/* ============================================================
   J. Alberto Márquez — Asesoría Integral y Servicios
   Dirección: "Ledger premium" — tinta indigo + platino + periwinkle
   Marca: #393186 (indigo) / #C5C7C6 (plata)
   ============================================================ */

:root{
  /* Tinta / oscuros */
  --ink:        #16132E;
  --ink-2:      #1E1A42;
  --ink-3:      #262056;
  /* Marca */
  --indigo:     #393186;
  --indigo-600: #4A40A8;
  --peri:       #6F66E4;
  --peri-soft:  #9b94f2;
  /* Plata / claros */
  --platinum:   #C8CAD6;
  --platinum-hi:#EEF0F7;
  --canvas:     #F6F6FB;
  --white:      #FFFFFF;
  /* Texto */
  --text:       #1B1830;
  --muted:      #5C5878;
  --muted-dark: #A9A6C4;
  /* Líneas de libro contable */
  --line:       rgba(57,49,134,.14);
  --line-soft:  rgba(57,49,134,.08);
  --line-dark:  rgba(200,202,214,.14);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --shadow: 0 24px 60px -28px rgba(22,19,46,.45);
  --shadow-soft: 0 18px 48px -30px rgba(22,19,46,.35);

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body: "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

body{
  font-family:var(--ff-body);
  color:var(--text);
  background:var(--canvas);
  line-height:1.6;
  font-size:clamp(15px,1.05vw,17px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-family:var(--ff-display); font-weight:600; line-height:1.05; letter-spacing:-.015em; }
.eyebrow{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--indigo); font-weight:500;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--indigo); opacity:.5; }
.ink .eyebrow{ color:var(--peri-soft); }
.ink .eyebrow::before{ background:var(--peri-soft); }

h2.title{ font-size:clamp(1.9rem,4.4vw,3.3rem); margin:.5rem 0 1rem; }
h2.title em{ font-style:italic; color:var(--indigo); font-weight:400; }
.ink h2.title em{ color:var(--peri-soft); }
.lead{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.18rem); max-width:62ch; }
.ink .lead{ color:var(--muted-dark); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-body); font-weight:600; font-size:.96rem;
  padding:.95em 1.6em; border-radius:999px; position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s, color .3s;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; transition:transform .35s; }
.btn-primary{ background:var(--indigo); color:#fff; box-shadow:0 14px 30px -12px rgba(57,49,134,.7); }
.btn-primary:hover{ background:var(--indigo-600); transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(57,49,134,.75); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.ink .btn-ghost{ border-color:var(--line-dark); color:var(--platinum-hi); }
.btn-ghost:hover{ border-color:var(--indigo); color:var(--indigo); transform:translateY(-3px); }
.ink .btn-ghost:hover{ border-color:var(--peri-soft); color:#fff; background:rgba(111,102,228,.12); }
.btn-light{ background:#fff; color:var(--ink); box-shadow:0 14px 34px -16px rgba(0,0,0,.6); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -16px rgba(0,0,0,.65); }
.btn-light:hover svg{ transform:translateX(4px); }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--ink); color:var(--platinum); font-size:.82rem;
  font-family:var(--ff-mono); letter-spacing:.02em;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:40px; flex-wrap:wrap; }
.topbar a{ color:var(--platinum); transition:color .25s; }
.topbar a:hover{ color:#fff; }
.topbar .tb-left{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.topbar .tb-left span{ display:inline-flex; align-items:center; gap:.5em; }
.topbar .tb-left svg{ width:14px; height:14px; color:var(--peri-soft); }
.topbar .tb-social{ display:flex; gap:.9rem; align-items:center; }
.topbar .tb-social a{ display:grid; place-items:center; }
.topbar .tb-social svg{ width:15px; height:15px; }
@media (max-width:640px){ .topbar .tb-left span.hide-sm{ display:none; } }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(246,246,251,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:padding .35s, background .35s, box-shadow .35s;
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:18px; transition:padding-block .35s; }
.header.shrink{ background:rgba(246,246,251,.95); box-shadow:0 10px 30px -22px rgba(22,19,46,.6); }
.header.shrink .wrap{ padding-block:10px; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:46px; width:auto; transition:height .35s; }
.header.shrink .brand img{ height:38px; }
.brand .brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand .brand-txt b{ font-family:var(--ff-display); font-weight:600; font-size:1rem; color:var(--text); letter-spacing:-.01em; white-space:nowrap; }
.brand .brand-txt small{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
@media (max-width:520px){ .brand .brand-txt{ display:none; } }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a.navlink{
  font-size:.92rem; font-weight:500; color:var(--text); position:relative; padding:.3em 0;
}
.nav a.navlink::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:var(--indigo); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav a.navlink:hover::after{ transform:scaleX(1); }
.nav a.navlink:hover{ color:var(--indigo); }
.header-cta{ display:flex; align-items:center; gap:1rem; }
.nav-cta-mobile{ display:none; }
.nav-toggle{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); align-items:center; justify-content:center; }
.nav-toggle span{ position:relative; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
body.menu-open .nav-toggle span{ background:transparent; }
body.menu-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:980px){
  .nav-toggle{ display:inline-flex; }
  .header-cta .btn-cta-head{ display:none; }
  .nav{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    height:100vh; height:100dvh; width:min(86vw,340px);
    background:var(--ink); flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:.4rem; padding:96px 32px 32px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
    z-index:65; box-shadow:-30px 0 60px -30px rgba(0,0,0,.7);
  }
  body.menu-open .nav{ transform:translateX(0); }
  /* full-screen scrim painted inside the header stacking context so it covers the hero */
  body.menu-open .header::before{
    content:""; position:fixed; top:0; right:0; bottom:0; left:0;
    background:rgba(11,9,25,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    z-index:62;
  }
  /* keep the toggle (now an X) above the open panel so it stays tappable */
  body.menu-open .nav-toggle{ position:relative; z-index:70; }
  .nav a.navlink{ color:var(--platinum-hi); font-size:1.15rem; font-family:var(--ff-display); padding:.6em 0; width:100%; border-bottom:1px solid var(--line-dark); }
  .nav a.navlink::after{ display:none; }
  .nav .nav-cta-mobile{ display:inline-flex; margin-top:1.2rem; }
}

/* ---------- Ink sections base ---------- */
.ink{ background:var(--ink); color:var(--platinum-hi); position:relative; isolation:isolate; }
.ink h2.title,.ink h3{ color:#fff; }
/* ledger ruled lines motif */
.ledger-lines{ position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.ledger-lines::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(to right, var(--line-dark) 0 1px, transparent 1px calc(100%/12));
  opacity:.5; mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.glow{ position:absolute; border-radius:50%; filter:blur(70px); z-index:-1; opacity:.55; pointer-events:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(70px,11vh,130px) clamp(60px,9vh,110px); overflow:hidden; }
.hero .glow.g1{ width:520px; height:520px; background:radial-gradient(circle,#4A40A8,transparent 70%); top:-180px; left:-120px; }
.hero .glow.g2{ width:460px; height:460px; background:radial-gradient(circle,#6F66E4,transparent 70%); bottom:-200px; right:-80px; opacity:.4; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,70px); align-items:center; }
.hero-copy{ max-width:38ch; }
.hero h1{
  font-size:clamp(2.6rem,6.2vw,4.6rem); color:#fff; margin:1.1rem 0 1.3rem; font-weight:600;
}
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:inline-block; transform:translateY(110%); animation:rise .9s cubic-bezier(.2,.85,.25,1) forwards; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.12s; }
.hero h1 .ln:nth-child(3) > span{ animation-delay:.24s; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--peri-soft); }
@keyframes rise{ to{ transform:translateY(0); } }
.hero p.lead{ color:var(--muted-dark); opacity:0; animation:fadeUp .8s ease .5s forwards; }
.hero-actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; opacity:0; animation:fadeUp .8s ease .68s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none; } }

.hero-visual{ position:relative; opacity:0; animation:fadeUp 1s ease .4s forwards; }
.hero-photo{
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  box-shadow:var(--shadow); aspect-ratio:4/3.4;
  border:1px solid var(--line-dark);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.2s ease; }
.hero-visual:hover .hero-photo img{ transform:scale(1.12); }
.hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(57,49,134,.28),transparent 55%); }

/* floating stat chips */
.float-chip{
  position:absolute; background:rgba(30,26,66,.72); backdrop-filter:blur(12px);
  border:1px solid var(--line-dark); border-radius:var(--r); padding:.85rem 1.1rem;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:.8rem;
}
.float-chip .fc-num{ font-family:var(--ff-display); font-size:1.8rem; font-weight:600; color:#fff; line-height:1; }
.float-chip .fc-lab{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--peri-soft); }
.float-chip.fc1{ top:-26px; right:-10px; animation:floaty 6s ease-in-out infinite; }
.float-chip.fc2{ bottom:-26px; left:-18px; animation:floaty 7s ease-in-out infinite .8s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:520px; }
  .float-chip.fc1{ right:6px; } .float-chip.fc2{ left:6px; }
}

.scroll-cue{ margin-top:3.5rem; display:flex; align-items:center; gap:.8rem; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dark); }
.scroll-cue .line{ width:54px; height:1px; background:var(--muted-dark); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; inset:0; width:40%; background:var(--peri); animation:slide 2.4s ease-in-out infinite; }
@keyframes slide{ 0%{ left:-40%; } 100%{ left:120%; } }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{ background:var(--white); border-block:1px solid var(--line-soft); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0; }
.stat{ padding:clamp(28px,4vw,46px) clamp(16px,2.5vw,32px); text-align:center; position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:18%; height:64%; width:1px; background:var(--line); }
.stat .num{ font-family:var(--ff-display); font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:600; color:var(--indigo); line-height:1; }
.stat .num .suf{ color:var(--peri); }
.stat .lab{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; }
@media (max-width:760px){
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2)::after{ display:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
}

/* ============================================================
   SECTION shell
   ============================================================ */
.section{ padding-block:clamp(64px,9vw,120px); position:relative; }
.section-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }

/* reveal — solo se oculta si hay JS (fallback sin JS muestra todo) */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js [data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s; }
[data-reveal][data-d="2"]{ transition-delay:.16s; }
[data-reveal][data-d="3"]{ transition-delay:.24s; }
[data-reveal][data-d="4"]{ transition-delay:.32s; }

/* ============================================================
   SERVICIOS — tres pilares (columnas de libro contable)
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.pillar{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px); position:relative; overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.pillar::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--indigo);
  transform:scaleY(0); transform-origin:top; transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.pillar:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.pillar:hover::before{ transform:scaleY(1); }
.pillar .p-ico{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--indigo),var(--peri)); color:#fff; margin-bottom:1.4rem;
  box-shadow:0 12px 26px -12px rgba(57,49,134,.6);
}
.pillar .p-ico svg{ width:28px; height:28px; }
.pillar .p-idx{ position:absolute; top:26px; right:30px; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; color:var(--platinum); }
.pillar h3{ font-size:1.55rem; margin-bottom:.5rem; }
.pillar > p{ color:var(--muted); font-size:.95rem; margin-bottom:1.3rem; }
.pillar ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.pillar li{ display:flex; gap:.6em; align-items:flex-start; font-size:.92rem; color:var(--text); }
.pillar li svg{ width:16px; height:16px; color:var(--indigo); flex:none; margin-top:.28em; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }

/* especialidades extra */
.specs{ margin-top:clamp(20px,3vw,34px); display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.specs .specs-lab{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-right:.4rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5em; padding:.6em 1.1em; border-radius:999px;
  background:var(--white); border:1px solid var(--line); font-size:.88rem; font-weight:500;
  transition:transform .3s, border-color .3s, color .3s, background .3s;
}
.chip svg{ width:15px; height:15px; color:var(--peri); }
.chip:hover{ transform:translateY(-3px); border-color:var(--indigo); color:var(--indigo); }

/* ============================================================
   OFERTA 360 (ink band)
   ============================================================ */
.band360{ overflow:hidden; }
.band360 .glow.g1{ width:480px; height:480px; background:radial-gradient(circle,#4A40A8,transparent 70%); top:-160px; right:-100px; }
.band360 .b-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.band360 .ring{ position:relative; width:min(380px,80%); aspect-ratio:1; margin-inline:auto; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring .ring-bg{ fill:none; stroke:var(--line-dark); stroke-width:6; }
.ring .ring-fg{ fill:none; stroke:url(#ringGrad); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); }
.js .ring .ring-fg{ stroke-dashoffset:1; }
.js .ring.in .ring-fg{ stroke-dashoffset:0; }
.ring .ring-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring .ring-center b{ font-family:var(--ff-display); font-size:clamp(3rem,7vw,4.6rem); color:#fff; line-height:1; }
.ring .ring-center span{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--peri-soft); display:block; margin-top:.4rem; }
.offer-tag{
  display:inline-flex; align-items:center; gap:.6em; padding:.55em 1.1em; border-radius:999px;
  background:rgba(111,102,228,.16); border:1px solid var(--peri); color:#fff;
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.4rem;
}
.offer-tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--peri); box-shadow:0 0 0 0 rgba(111,102,228,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(111,102,228,.6);} 70%{ box-shadow:0 0 0 12px rgba(111,102,228,0);} 100%{ box-shadow:0 0 0 0 rgba(111,102,228,0);} }
.band360 ul.feat{ list-style:none; display:flex; flex-direction:column; gap:.9rem; margin:1.6rem 0 2rem; }
.band360 ul.feat li{ display:flex; gap:.8em; align-items:flex-start; color:var(--platinum-hi); }
.band360 ul.feat svg{ width:20px; height:20px; color:var(--peri-soft); flex:none; margin-top:.18em; }
@media (max-width:860px){ .band360 .b-grid{ grid-template-columns:1fr; } .band360 .ring{ order:-1; } }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,68px); align-items:center; }
.about-photo{ position:relative; }
.about-photo .ph{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); aspect-ratio:1; }
.about-photo .ph img{ width:100%; height:100%; object-fit:cover; }
.about-photo .badge{
  position:absolute; right:-14px; bottom:-22px; background:var(--ink); color:#fff;
  border-radius:var(--r); padding:1.1rem 1.3rem; box-shadow:var(--shadow); width:200px;
}
.about-photo .badge b{ font-family:var(--ff-display); font-size:2.4rem; color:#fff; line-height:1; }
.about-photo .badge span{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--peri-soft); display:block; margin-top:.3rem; }
.about-photo .ledger-edge{ position:absolute; left:-18px; top:-18px; width:90px; height:90px; border-top:2px solid var(--indigo); border-left:2px solid var(--indigo); border-radius:6px 0 0 0; opacity:.4; }
.check-list{ list-style:none; display:grid; gap:1.05rem; margin-top:1.8rem; }
.check-list li{ display:flex; gap:.9em; align-items:flex-start; }
.check-list .ck{ width:26px; height:26px; border-radius:8px; background:rgba(57,49,134,.1); display:grid; place-items:center; flex:none; }
.check-list .ck svg{ width:15px; height:15px; color:var(--indigo); }
.check-list b{ display:block; font-weight:600; }
.check-list span{ color:var(--muted); font-size:.92rem; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } .about-photo{ max-width:440px; } }

/* ============================================================
   PROCESO
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); counter-reset:step; }
.step{ position:relative; padding-top:2.4rem; }
.step .s-num{ font-family:var(--ff-display); font-size:1rem; color:#fff; width:48px; height:48px; border-radius:50%; background:var(--indigo); display:grid; place-items:center; font-weight:600; margin-bottom:1.1rem; box-shadow:0 12px 24px -12px rgba(57,49,134,.6); }
.step::before{ content:""; position:absolute; left:24px; top:24px; right:-12px; height:1px; background:var(--line); z-index:-1; }
.step:last-child::before{ display:none; }
.step h3{ font-size:1.18rem; margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:.9rem; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr 1fr; gap:24px; } .step::before{ display:none; } }
@media (max-width:430px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   ENLACES DE INTERÉS
   ============================================================ */
.links-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.link-card{
  display:flex; flex-direction:column; gap:.7rem; padding:clamp(22px,2.6vw,30px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .4s, box-shadow .4s, border-color .4s;
}
.link-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--indigo); }
.link-card .lc-ico{ width:42px; height:42px; border-radius:11px; background:rgba(57,49,134,.08); display:grid; place-items:center; color:var(--indigo); }
.link-card .lc-ico svg{ width:21px; height:21px; }
.link-card h3{ font-size:1.1rem; font-family:var(--ff-body); font-weight:600; }
.link-card .lc-go{ margin-top:auto; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--indigo); display:inline-flex; align-items:center; gap:.5em; }
.link-card .lc-go svg{ width:14px; height:14px; transition:transform .3s; }
.link-card:hover .lc-go svg{ transform:translateX(4px); }
@media (max-width:760px){ .links-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{ overflow:hidden; text-align:center; }
.cta-final .glow.g1{ width:560px; height:560px; background:radial-gradient(circle,#4A40A8,transparent 68%); top:-220px; left:50%; transform:translateX(-50%); }
.cta-final h2{ font-size:clamp(2rem,5vw,3.6rem); color:#fff; max-width:18ch; margin-inline:auto; }
.cta-final p{ color:var(--muted-dark); max-width:52ch; margin:1.2rem auto 2.2rem; }
.cta-final .cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta-final .cta-mini{ margin-top:2rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.1em; color:var(--muted-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#100D24; color:var(--platinum); padding-top:clamp(56px,7vw,84px); position:relative; overflow:hidden; }
.skyline{ position:absolute; bottom:0; left:0; width:100%; height:120px; opacity:.10; pointer-events:none; }
.skyline svg{ width:100%; height:100%; display:block; }
.footer .f-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); position:relative; }
.footer .f-brand img{ height:54px; margin-bottom:1.1rem; }
.footer .f-brand p{ font-size:.9rem; color:var(--muted-dark); max-width:34ch; }
.footer h4{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--peri-soft); margin-bottom:1.2rem; }
.footer ul{ list-style:none; display:grid; gap:.7rem; }
.footer a{ color:var(--platinum); font-size:.92rem; transition:color .25s, padding-left .25s; }
.footer a:hover{ color:#fff; padding-left:4px; }
.footer .f-contact li{ display:flex; gap:.7em; align-items:flex-start; font-size:.92rem; color:var(--platinum); }
.footer .f-contact svg{ width:16px; height:16px; color:var(--peri-soft); flex:none; margin-top:.25em; }
.footer .f-social{ display:flex; gap:.8rem; margin-top:1.4rem; }
.footer .f-social a{ width:40px; height:40px; border-radius:11px; border:1px solid var(--line-dark); display:grid; place-items:center; transition:.3s; }
.footer .f-social a:hover{ background:var(--indigo); border-color:var(--indigo); transform:translateY(-3px); padding-left:0; }
.footer .f-social svg{ width:17px; height:17px; }
.footer .f-bottom{ border-top:1px solid var(--line-dark); margin-top:clamp(40px,5vw,60px); padding-block:24px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; position:relative; }
.footer .f-bottom small{ font-size:.8rem; color:var(--muted-dark); }
.footer .f-bottom a{ font-size:.8rem; }
.footer .f-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
@media (max-width:880px){ .footer .f-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer .f-grid{ grid-template-columns:1fr; } }

/* ---------- Floating actions ---------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:50; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;
}
.fab a, .to-top{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow); transition:transform .35s, opacity .35s, background .3s;
}
.fab .call{ background:var(--indigo); color:#fff; }
.fab .call:hover{ transform:scale(1.08) translateY(-2px); background:var(--indigo-600); }
.fab .call svg{ width:24px; height:24px; }
.to-top{ background:#fff; color:var(--ink); border:1px solid var(--line); opacity:0; pointer-events:none; transform:translateY(12px); }
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ transform:translateY(-3px); }
.to-top svg{ width:20px; height:20px; }

/* ---------- Cookie banner ---------- */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:560px;
  background:var(--ink); color:var(--platinum-hi); border:1px solid var(--line-dark);
  border-radius:var(--r); padding:1.3rem 1.4rem; box-shadow:var(--shadow);
  display:none; gap:1rem; align-items:center; flex-wrap:wrap;
}
.cookie.show{ display:flex; animation:fadeUp .5s ease; }
.cookie p{ font-size:.86rem; color:var(--muted-dark); flex:1 1 260px; line-height:1.5; }
.cookie p a{ color:var(--peri-soft); text-decoration:underline; }
.cookie .ck-actions{ display:flex; gap:.6rem; }
.cookie .ck-actions button{ padding:.65em 1.2em; border-radius:999px; font-weight:600; font-size:.85rem; transition:.3s; }
.cookie .ck-acc{ background:var(--peri); color:#fff; }
.cookie .ck-acc:hover{ background:var(--peri-soft); }
.cookie .ck-dec{ border:1px solid var(--line-dark); color:var(--platinum); }
.cookie .ck-dec:hover{ color:#fff; border-color:var(--platinum); }

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

/* ============================================================
   Anclas bajo cabecera fija
   ============================================================ */
section[id]{ scroll-margin-top:92px; }

/* ============================================================
   Tarifas
   ============================================================ */
.section-sub{ color:var(--muted); max-width:62ch; margin:.9rem auto 0; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2rem 1.8rem; box-shadow:var(--shadow-soft);
}
.plan-feat{ background:var(--ink); color:var(--platinum-hi); border-color:transparent; box-shadow:var(--shadow); }
.plan-feat h3{ color:#fff; }
.plan-tag{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--indigo);
}
.plan-feat .plan-tag{ color:var(--peri-soft); }
.plan h3{ font-family:var(--ff-display); font-size:1.5rem; margin:.4rem 0 1.1rem; line-height:1.15; }
.plan-list{ list-style:none; display:flex; flex-direction:column; gap:.7rem; margin:0 0 1.8rem; flex:1; }
.plan-list li{ position:relative; padding-left:1.6rem; color:var(--muted); font-size:.97rem; }
.plan-feat .plan-list li{ color:var(--muted-dark); }
.plan-list li::before{
  content:""; position:absolute; left:0; top:.5em; width:13px; height:8px;
  border-left:2px solid var(--indigo); border-bottom:2px solid var(--indigo);
  transform:rotate(-45deg);
}
.plan-feat .plan-list li::before{ border-color:var(--peri-soft); }
.plan-cta{ width:100%; justify-content:center; }
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--peri); color:#fff; font-family:var(--ff-mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.5em 1.1em; border-radius:999px;
  white-space:nowrap; box-shadow:0 10px 24px -10px rgba(111,102,228,.8);
}
.plans-note{ text-align:center; color:var(--muted); margin-top:2rem; font-size:.95rem; }

/* ============================================================
   Contacto
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:3rem; align-items:start; }
.contact-intro h2{ font-family:var(--ff-display); font-size:clamp(2rem,4vw,3rem); line-height:1.05; margin:.4rem 0 1rem; }
.contact-intro p{ color:var(--muted-dark); max-width:46ch; }
.contact-channels{ list-style:none; display:flex; flex-direction:column; gap:1rem; margin:2rem 0 0; }
.contact-channels li{ display:flex; align-items:center; gap:.9rem; color:var(--platinum-hi); }
.contact-channels a{ color:var(--platinum-hi); }
.contact-channels a:hover{ color:#fff; }
.cc-ico{ display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:rgba(111,102,228,.16); border:1px solid var(--line-dark); }
.cc-ico svg{ width:18px; height:18px; color:var(--peri-soft); }
.contact-card{
  background:var(--white); border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow);
}
.contact-form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field label{ font-size:.82rem; font-weight:600; color:var(--text); letter-spacing:.01em; }
.field input,.field textarea{
  width:100%; font:inherit; color:var(--text); background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.8em .9em; transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{ color:#9b98b5; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(57,49,134,.14); }
.field textarea{ resize:vertical; min-height:110px; }
.cf-submit{ width:100%; justify-content:center; margin-top:.2rem; }
.cf-note{ font-size:.8rem; color:var(--muted); line-height:1.5; }
.cf-note a{ color:var(--indigo); text-decoration:underline; }
.cf-ok{ text-align:center; padding:2rem 1rem; color:var(--text); }
.cf-ok h3{ font-family:var(--ff-display); font-size:1.6rem; margin-bottom:.5rem; }

@media (max-width:860px){
  .plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .contact-grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:520px){
  .field-row{ grid-template-columns:1fr; }
}