/* ==========================================================
   NOVAWORKFLOWS — STYLES (2026 redesign)
   Modern · glassmorphism · 3D tilt · animated
   ========================================================== */

/* ---------- Variables / Tokens ---------- */
:root{
  --bg:#f6f8fb;
  --bg-elev:#ffffff;
  --text:#0f1722;
  --muted:#5a6675;
  --border:#e6ecf2;
  --brand:#05AEAF;
  --brand-2:#6c5ce7;     /* violeta de acento para gradientes */
  --brand-3:#1ed7c4;
  --ring: color-mix(in oklab, var(--brand) 45%, transparent);
  --radius:20px;
  --radius-sm:14px;
  --shadow:0 24px 60px rgba(15,23,34,.08);
  --shadow-lg:0 40px 90px rgba(15,23,34,.14);
  --maxw:1180px;
  --grad: linear-gradient(120deg, var(--brand) 0%, var(--brand-3) 40%, var(--brand-2) 100%);
}
:root[data-theme='dark']{
  --bg:#070b11;
  --bg-elev:#0e141d;
  --text:#eaf2ff;
  --muted:#9fb1c2;
  --border:rgba(255,255,255,.10);
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --shadow-lg:0 50px 110px rgba(0,0,0,.6);
}

/* ---------- Reset & base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top: clamp(64px, 9vw, 84px);
}
img,picture,svg{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-family:"Space Grotesk",Inter,system-ui,sans-serif; letter-spacing:-0.02em; }
h1{ font-size: clamp(34px, 6vw, 60px); line-height:1.07; margin:0 0 14px; font-weight:700; }
h2{ font-size: clamp(26px, 4.4vw, 42px); line-height:1.15; margin:0; font-weight:600; }
h3{ font-size: clamp(19px, 2.4vw, 24px); line-height:1.25; margin:.2rem 0 .4rem; font-weight:600; }
strong{ font-weight:600; }
a{ color:inherit; }

/* Decoración de fondo global (mesh suave) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(40% 50% at 12% 8%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(38% 45% at 90% 18%, color-mix(in oklab, var(--brand-2) 20%, transparent), transparent 72%),
    radial-gradient(45% 50% at 50% 100%, color-mix(in oklab, var(--brand-3) 16%, transparent), transparent 70%);
  opacity:.55; pointer-events:none;
}

/* Utilitarios */
.wrap,.container{ width:min(92%,var(--maxw)); margin-inline:auto; }
.muted{ color:var(--muted); }
.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 100%;
  animation:hue 8s ease infinite;
}
@keyframes hue{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.accent{ color:var(--brand); }

/* Barra de progreso de scroll */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad); z-index:1300;
  box-shadow:0 0 12px color-mix(in oklab, var(--brand) 60%, transparent);
}

/* Reveal en scroll */
.section{ padding:84px 0; }
.reveal,.tilt-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.section.is-visible .reveal,
.is-visible.reveal{ opacity:1; transform:none; }
.section.is-visible .card,
.section.is-visible .chip,
.section.is-visible .tl-step{ animation: pop .6s both; }
@keyframes pop{ from{ opacity:0; transform:translateY(22px) scale(.98);} to{ opacity:1; transform:none;} }
/* Escalonado */
.section.is-visible .grid-3 > *:nth-child(2){ animation-delay:.08s; }
.section.is-visible .grid-3 > *:nth-child(3){ animation-delay:.16s; }
.section.is-visible .timeline > *:nth-child(2){ animation-delay:.06s; }
.section.is-visible .timeline > *:nth-child(3){ animation-delay:.12s; }
.section.is-visible .timeline > *:nth-child(4){ animation-delay:.18s; }
.section.is-visible .timeline > *:nth-child(5){ animation-delay:.24s; }
.section.is-visible .timeline > *:nth-child(6){ animation-delay:.30s; }

.block{ display:flex; flex-direction:column; gap:2.4rem; }

/* Encabezados de sección */
.section-head{ max-width:760px; }
.kicker{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
  padding:6px 12px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--brand) 35%, var(--border));
  background:color-mix(in oklab, var(--brand) 8%, transparent);
  margin-bottom:14px;
}
.sub{ color:var(--muted); font-size:clamp(15px,1.6vw,18px); margin:.9rem 0 0; max-width:680px; }

/* ---------- Header / Nav ---------- */
header.glass{
  position:fixed; top:0; left:0; right:0; z-index:1200;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
header.glass.is-scrolled{
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom-color:var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
header.glass.hide-mobile{ transform:translateY(-100%); }
header .container.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; transition:padding .35s ease;
}
header.glass.is-scrolled .container.nav{ padding-top:9px; padding-bottom:9px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brandmark img{ height:38px; width:auto; }
.brand-text{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; letter-spacing:-0.02em; font-size:18px; color:var(--text);
}
.brand-text .accent{ color:var(--brand); }
@media (max-width:480px){ .brand-text{ display:none; } }

nav.menu{ display:flex; align-items:center; gap:4px; }
nav.menu a{ text-decoration:none; }
nav.menu a.nav-link{
  position:relative; color:var(--text);
  padding:9px 12px; border-radius:10px; font-weight:500; font-size:15px;
  transition: color .2s ease, background-color .2s ease;
}
nav.menu a.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left center;
  transition:transform .28s ease; border-radius:2px;
}
nav.menu a.nav-link:hover{ color:var(--brand); }
nav.menu a.nav-link:hover::after{ transform:scaleX(1); }
nav.menu a.nav-link.active{ color:var(--brand); }
nav.menu a.nav-link.active::after{ transform:scaleX(1); }
nav.menu a.nav-link.clicked{ animation:clickPulse .28s ease; }
@keyframes clickPulse{ 0%{transform:scale(1);} 50%{transform:scale(.95);} 100%{transform:scale(1);} }

/* Botón hamburguesa */
.nav-toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:44px; height:44px; border:1px solid var(--border); border-radius:12px;
  background:color-mix(in oklab, var(--bg-elev) 70%, transparent); cursor:pointer;
}
.nav-toggle span{ width:20px; height:2px; background:var(--text); margin:0 auto; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-weight:600; text-decoration:none; border-radius:13px; padding:11px 18px;
  font-size:15px; cursor:pointer; line-height:1;
  transition: transform .18s ease, box-shadow .28s ease, background-position .5s ease, border-color .25s ease, color .25s ease;
  will-change: transform, box-shadow;
}
.btn .icon{ width:18px; height:18px; }
.btn-lg{ padding:14px 24px; font-size:16px; border-radius:14px; }
.btn-primary{
  color:#fff; border:none; position:relative;
  background-image: var(--grad);
  background-size:200% 100%; background-position:0% 0%;
  box-shadow:0 10px 26px color-mix(in oklab, var(--brand) 36%, transparent);
}
.btn-primary:hover{
  transform: translateY(-3px);
  background-position:100% 0%;
  box-shadow:0 18px 44px color-mix(in oklab, var(--brand) 48%, transparent);
}
.btn-primary:active{ transform: translateY(-1px) scale(.99); }
.btn-ghost{
  color:var(--text);
  background:color-mix(in oklab, var(--bg-elev) 60%, transparent);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  transform: translateY(-2px); color:var(--brand);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--border));
  background: color-mix(in oklab, var(--brand) 10%, transparent);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(40px,7vw,90px) 0 clamp(50px,7vw,90px);
  overflow:hidden;
  min-height:min(92vh, 860px);
  display:flex; align-items:center;
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.9; pointer-events:none;
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  opacity:.5;
}
.hero .wrap{ position:relative; z-index:1; padding:0; }
.hero-copy{ max-width:760px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.85rem; font-weight:500; color:var(--muted);
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-elev) 60%, transparent);
  backdrop-filter:blur(8px);
  margin-bottom:22px;
}
.eyebrow-dot{ width:8px; height:8px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 0 color-mix(in oklab,var(--brand) 60%,transparent); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--brand) 55%,transparent);} 70%{ box-shadow:0 0 0 10px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.hero .lead{ color:var(--muted); font-size:clamp(16px,2vw,20px); max-width:640px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* Pista de scroll */
.scroll-hint{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:1;
  width:26px; height:42px; border:2px solid color-mix(in oklab, var(--text) 35%, transparent);
  border-radius:14px; display:flex; justify-content:center;
}
.scroll-hint span{ width:4px; height:8px; border-radius:4px; background:var(--brand); margin-top:7px; animation:scrolldot 1.8s infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(12px); opacity:0;} 100%{ opacity:0;} }
@media (max-width:768px){ .scroll-hint{ display:none; } }

/* ---------- Métricas ---------- */
.metrics{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-top:42px; max-width:680px; }
.metric{
  padding:18px 16px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:color-mix(in oklab, var(--bg-elev) 72%, transparent);
  backdrop-filter:blur(10px); box-shadow:var(--shadow); text-align:center;
}
.metric .num{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size: clamp(24px, 3.4vw, 34px); line-height:1; }
.metric .num{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.metric .txt{ color:var(--muted); font-size:13px; margin-top:8px; }

/* ---------- Cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.card{
  position:relative;
  border:1px solid var(--border); border-radius:var(--radius);
  background:color-mix(in oklab, var(--bg-elev) 80%, transparent);
  backdrop-filter:blur(10px);
  box-shadow: var(--shadow); padding:26px;
  transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, color-mix(in oklab, var(--brand) 50%, transparent), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.card:hover{ box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--brand) 30%, var(--border)); }
.card:hover::after{ opacity:1; }
.card-ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:24px; margin-bottom:14px;
  background:color-mix(in oklab, var(--brand) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 28%, var(--border));
}
.service.is-featured{
  border-color:color-mix(in oklab, var(--brand) 45%, var(--border));
  box-shadow:0 30px 70px color-mix(in oklab, var(--brand) 22%, transparent);
}
.ribbon{
  position:absolute; top:16px; right:16px;
  font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:#fff; padding:5px 11px; border-radius:999px; background:var(--grad);
  box-shadow:0 8px 20px color-mix(in oklab, var(--brand) 40%, transparent);
}

.list{ list-style:none; padding:0; margin:14px 0 0; }
.list li{ display:flex; align-items:center; gap:.6rem; margin:.5rem 0; color:var(--muted); }
.list .dot{ width:.5rem; height:.5rem; border-radius:999px; background:var(--grad); display:inline-block; flex:0 0 auto; box-shadow:0 0 10px color-mix(in oklab,var(--brand) 60%,transparent); }
.benefit{ display:flex; align-items:flex-start; gap:.7rem; }
.benefit .dot{ margin-top:.5rem; }

/* ---------- Chips de tecnología ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  font-weight:500; font-size:14px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-elev) 70%, transparent);
  backdrop-filter:blur(8px);
  transition:transform .18s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.chip:hover{ color:var(--brand); border-color:color-mix(in oklab, var(--brand) 45%, var(--border)); transform:translateY(-2px); box-shadow:0 12px 26px color-mix(in oklab, var(--brand) 22%, transparent); }
.benefits{ margin-top:8px; }

/* ---------- Timeline (proceso) ---------- */
.timeline{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
.tl-step{
  position:relative; padding:22px 20px; border-radius:var(--radius);
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-elev) 80%, transparent);
  backdrop-filter:blur(10px); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:4px;
  transition:transform .2s ease, box-shadow .3s ease, border-color .3s ease;
}
.tl-step strong{ font-family:"Space Grotesk",sans-serif; font-size:18px; }
.tl-step .muted{ font-size:14px; }
.tl-num{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:30px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.85; margin-bottom:6px;
}
.tl-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--brand) 30%, var(--border)); }

/* ---------- Reseñas ---------- */
.reviews .stars{ color:#ffb800; font-size:1.15rem; letter-spacing:2px; margin-bottom:.6rem; }
.reviews blockquote{ margin:0; }
.reviews p{ font-size:16px; }
.reviewer{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--muted); margin-top:1rem; }
.avatar{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff; background:var(--grad); flex:0 0 auto;
}

/* ---------- Contacto ---------- */
#contacto .block{ align-items:center; }
.contact{
  position:relative; overflow:hidden;
  width:min(100%,820px); margin:0 auto; text-align:center;
  padding:clamp(28px,5vw,48px);
}
.contact-glow{
  position:absolute; inset:auto -20% -60% -20%; height:340px;
  background:radial-gradient(50% 60% at 50% 50%, color-mix(in oklab,var(--brand) 55%,transparent), transparent 70%);
  filter:blur(60px); opacity:.4; pointer-events:none;
}
.contact > *{ position:relative; z-index:1; }
.contact h2{ margin:.4rem 0; }
.contact .contact-list{
  display:grid; grid-template-columns:auto 1fr; justify-content:center; align-items:center;
  gap:10px 16px; text-align:left; max-width:420px; margin:24px auto; padding:0;
}
.contact .contact-list li{ display:contents; }
.contact .contact-list .label{
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  color:var(--muted); font-weight:600; white-space:nowrap;
}
.contact .contact-list .icon{ width:18px; height:18px; flex:0 0 18px; color:var(--brand); }
.contact .contact-list a{
  text-decoration:none; color:var(--brand); font-weight:500;
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.contact .contact-list a:hover{ border-bottom-color:currentColor; }
.contact .hero-cta{ justify-content:center; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--border); color:var(--muted); padding:40px 0 48px; margin-top:20px; }
.foot{
  width:min(92%,var(--maxw)); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.foot-brand{ display:flex; flex-direction:column; gap:6px; }
.foot-brand p{ margin:0; font-size:13px; }
.foot-meta{ text-align:right; display:flex; flex-direction:column; gap:4px; }
.tiny{ font-size:12px; }

/* ---------- Tilt 3D ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .18s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .nav-toggle{ display:flex; }
  nav.menu{
    position:fixed; top:0; right:0; height:100dvh; width:min(80%,320px);
    flex-direction:column; align-items:stretch; gap:6px;
    padding:90px 22px 22px;
    background:color-mix(in oklab, var(--bg-elev) 96%, transparent);
    backdrop-filter:blur(20px);
    border-left:1px solid var(--border);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1);
    z-index:1190; box-shadow:var(--shadow-lg);
  }
  nav.menu.open{ transform:translateX(0); }
  nav.menu a.nav-link{ font-size:17px; padding:13px 14px; }
  nav.menu .btn{ margin-top:8px; }
}
@media (max-width: 720px){
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:repeat(2,1fr); }
  .foot{ flex-direction:column; text-align:center; }
  .foot-meta{ text-align:center; }
}
@media (max-width: 460px){
  .metrics{ grid-template-columns:1fr 1fr; }
  .contact .contact-list{ grid-template-columns:1fr; text-align:center; gap:6px; }
  .contact .contact-list .label{ justify-content:center; }
  .btn{ width:100%; }
}

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

/* ==========================================================
   MULTIPÁGINA — page hero, footer enriquecido, form, FAQ, CTA
   ========================================================== */

/* ---- Page hero (cabecera compacta de páginas internas) ---- */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,8vw,86px) 0 clamp(40px,6vw,64px);
  border-bottom:1px solid var(--border);
}
.page-hero .hero-canvas{ opacity:.7; }
.page-hero .wrap{ position:relative; z-index:1; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:14px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(30px,5vw,48px); margin:0 0 12px; }
.page-hero .lead{ color:var(--muted); font-size:clamp(16px,1.9vw,19px); max-width:640px; }

/* ---- Home: tarjetas de servicio enlazadas ---- */
.link-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.link-card .more{ margin-top:auto; padding-top:14px; color:var(--brand); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.link-card .more::after{ content:"→"; transition:transform .2s ease; }
.link-card:hover .more::after{ transform:translateX(4px); }

/* ---- Banner CTA ---- */
.cta-banner{
  position:relative; overflow:hidden; text-align:center;
  border-radius:var(--radius); padding:clamp(34px,5vw,56px);
  background:var(--grad); background-size:160% 160%; animation:hue 9s ease infinite;
  color:#fff; box-shadow:0 30px 70px color-mix(in oklab,var(--brand) 30%, transparent);
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:rgba(255,255,255,.9); max-width:560px; margin:.6rem auto 0; }
.cta-banner .hero-cta{ justify-content:center; margin-top:24px; }
.cta-banner .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.10); }
.cta-banner .btn-ghost:hover{ background:rgba(255,255,255,.2); color:#fff; }
.cta-banner .btn-primary{ background:#fff; color:var(--brand); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.cta-banner .btn-primary:hover{ background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.26); }

/* ---- Servicio a detalle (fila alterna) ---- */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.svc-detail.alt .svc-visual{ order:2; }
.svc-visual{
  border-radius:var(--radius); min-height:240px; position:relative; overflow:hidden;
  border:1px solid var(--border);
  background:
    radial-gradient(60% 70% at 30% 30%, color-mix(in oklab,var(--brand) 30%,transparent), transparent 70%),
    radial-gradient(60% 70% at 80% 80%, color-mix(in oklab,var(--brand-2) 28%,transparent), transparent 70%),
    color-mix(in oklab, var(--bg-elev) 80%, transparent);
  display:grid; place-items:center; font-size:64px;
}
.svc-detail h3{ font-size:clamp(22px,3vw,30px); }
.svc-detail .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.svc-detail .tags span{ font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:color-mix(in oklab,var(--bg-elev) 70%,transparent); color:var(--muted); }
@media (max-width:760px){
  .svc-detail{ grid-template-columns:1fr; gap:18px; }
  .svc-detail.alt .svc-visual{ order:0; }
  .svc-visual{ min-height:160px; font-size:48px; }
}

/* ---- Valores / por qué (números grandes) ---- */
.value-card .big{ font-family:"Space Grotesk",sans-serif; font-size:34px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---- FAQ ---- */
.faq{ display:flex; flex-direction:column; gap:12px; max-width:820px; }
.faq details{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--bg-elev) 75%,transparent); padding:4px 18px;
  transition:border-color .25s ease;
}
.faq details[open]{ border-color:color-mix(in oklab,var(--brand) 35%,var(--border)); }
.faq summary{ cursor:pointer; list-style:none; padding:14px 0; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; color:var(--brand); transition:transform .25s ease; line-height:1; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0 0 16px; color:var(--muted); }

/* ---- Formulario de contacto ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--muted); }
.field input, .field textarea, .field select{
  font-family:inherit; font-size:15px; color:var(--text);
  padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:color-mix(in oklab,var(--bg-elev) 80%,transparent);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 18%,transparent);
}
.field textarea{ resize:vertical; min-height:120px; }
.form .btn{ align-self:flex-start; }
@media (max-width:460px){ .form .btn{ align-self:stretch; } }

.info-card .info-row{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.info-card .info-row:last-child{ border-bottom:none; }
.info-card .info-ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in oklab,var(--brand) 14%,transparent); border:1px solid color-mix(in oklab,var(--brand) 28%,var(--border)); color:var(--brand); }
.info-card .info-ico svg{ width:20px; height:20px; }
.info-card .info-row a, .info-card .info-row span{ text-decoration:none; color:var(--text); font-weight:500; }
.info-card .info-row .k{ display:block; font-size:12px; color:var(--muted); font-weight:500; }

/* ---- Footer enriquecido ---- */
.foot-rich{
  width:min(92%,var(--maxw)); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px;
  align-items:start; padding-bottom:28px;
}
.foot-rich h4{ font-family:"Space Grotesk",sans-serif; font-size:14px; margin:0 0 14px; color:var(--text); }
.foot-rich ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.foot-rich a{ color:var(--muted); text-decoration:none; font-size:14px; transition:color .2s ease; }
.foot-rich a:hover{ color:var(--brand); }
.foot-rich .foot-brand p{ font-size:13px; margin:10px 0 14px; max-width:260px; }
.foot-socials{ display:flex; gap:10px; }
.foot-socials a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--border); color:var(--muted); transition:color .2s ease, border-color .2s ease, transform .2s ease; }
.foot-socials a:hover{ color:var(--brand); border-color:color-mix(in oklab,var(--brand) 45%,var(--border)); transform:translateY(-2px); }
.foot-socials svg{ width:18px; height:18px; }
.foot-bottom{
  width:min(92%,var(--maxw)); margin:0 auto; padding-top:22px; margin-top:8px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted);
}
@media (max-width:760px){
  .foot-rich{ grid-template-columns:1fr 1fr; gap:24px; }
  .foot-rich .foot-brand{ grid-column:1 / -1; }
  .foot-bottom{ flex-direction:column; text-align:center; }
}
@media (max-width:420px){ .foot-rich{ grid-template-columns:1fr; } }

/* ==========================================================
   CASOS DE ÉXITO
   ========================================================== */
.cases{ display:flex; flex-direction:column; gap:28px; }
.case{ position:relative; overflow:hidden; padding:clamp(22px,3.5vw,34px); }
.case-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.case-tag{
  font-size:12px; font-weight:600; letter-spacing:.04em; padding:6px 12px; border-radius:999px;
  color:var(--brand); background:color-mix(in oklab,var(--brand) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--brand) 30%,var(--border));
}
.case-emoji{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center; font-size:24px; flex:0 0 auto;
  background:color-mix(in oklab,var(--brand) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--brand) 26%,var(--border));
}
.case h3{ font-size:clamp(20px,2.6vw,26px); margin:.2rem 0 0; }
.case-body{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:18px 0 4px; }
.case-body h4{ font-family:"Space Grotesk",sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.case-body p{ margin:0; color:var(--text); font-size:15px; }
.case-body .reto h4{ color:#e0746a; }
.case-body .sol h4{ color:var(--brand); }
.case-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px;
  padding-top:20px; border-top:1px solid var(--border);
}
.case-metric{ text-align:center; }
.case-metric .n{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(22px,3vw,30px); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.case-metric .l{ display:block; font-size:12.5px; color:var(--muted); margin-top:6px; }
.case-quote{ margin:18px 0 0; padding-left:16px; border-left:3px solid var(--brand); color:var(--muted); font-style:italic; font-size:14.5px; }
.case-quote .who{ display:block; font-style:normal; font-weight:600; color:var(--text); margin-top:6px; font-size:13px; }
@media (max-width:680px){
  .case-body{ grid-template-columns:1fr; gap:14px; }
  .case-metrics{ grid-template-columns:1fr; gap:16px; }
  .case-metric{ display:flex; align-items:baseline; gap:10px; justify-content:center; }
  .case-metric .l{ margin-top:0; }
}

/* Franja de logos/sectores */
.logos-strip{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:center; opacity:.85; }
.logos-strip span{ font-family:"Space Grotesk",sans-serif; font-weight:600; color:var(--muted); font-size:15px; }

/* ==========================================================
   BLOG — timeline mensual
   ========================================================== */
.blog-timeline{ position:relative; max-width:880px; margin:0 auto; padding-left:118px; }
.blog-timeline::before{
  content:""; position:absolute; left:101px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  opacity:.45; border-radius:2px;
}
.year-divider{
  position:relative; margin:8px 0 26px -118px; padding-left:118px;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(26px,4vw,38px);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.year-divider:not(:first-child){ margin-top:34px; }

.post{ position:relative; margin-bottom:24px; }
.post-date{
  position:absolute; left:-118px; top:8px; width:78px; text-align:right;
  display:flex; flex-direction:column; line-height:1.1;
}
.post-date .m{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:16px; color:var(--text); text-transform:uppercase; }
.post-date .y{ font-size:13px; color:var(--muted); }
.post::before{
  content:""; position:absolute; left:-23px; top:11px;
  width:15px; height:15px; border-radius:50%;
  background:var(--grad);
  border:3px solid var(--bg);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--brand) 55%,transparent);
  transition:box-shadow .3s ease, transform .3s ease;
}
.post:hover::before{ transform:scale(1.18); box-shadow:0 0 18px color-mix(in oklab,var(--brand) 70%,transparent); }
.post-card{ padding:22px 24px; }
.post-card h3{ margin:.1rem 0 .5rem; font-size:clamp(18px,2.2vw,22px); }
.post-card p{ margin:0; color:var(--muted); font-size:15px; }
.post-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.post-tags span{
  font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 10px; border-radius:999px;
  color:var(--brand); background:color-mix(in oklab,var(--brand) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--brand) 26%,var(--border));
}
/* aparición de posts al hacer scroll (solo si hay JS) */
html.js .post{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
html.js .post.in{ opacity:1; transform:none; }

@media (max-width:600px){
  .blog-timeline{ padding-left:54px; }
  .blog-timeline::before{ left:19px; }
  .year-divider{ margin-left:-54px; padding-left:54px; }
  .post-date{ position:static; width:auto; text-align:left; flex-direction:row; gap:6px; margin-bottom:8px; }
  .post-date .y{ font-size:14px; }
  .post::before{ left:-41px; top:4px; }
}

/* Filtros por año (sticky) */
.blog-filters{
  position:sticky; top:clamp(64px,9vw,84px); z-index:60;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  width:fit-content; max-width:100%; margin:0 auto 38px; padding:9px 12px;
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow);
}
.filter-btn{
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px;
  padding:8px 16px; border-radius:999px; cursor:pointer; line-height:1;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-elev) 70%, transparent); color:var(--muted);
  transition:color .2s ease, border-color .2s ease, background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.filter-btn:hover{ color:var(--brand); border-color:color-mix(in oklab,var(--brand) 45%,var(--border)); transform:translateY(-1px); }
.filter-btn.active{
  color:#fff; border-color:transparent; background-image:var(--grad); background-size:160% 100%;
  box-shadow:0 8px 20px color-mix(in oklab,var(--brand) 32%,transparent);
}
.post.hide, .year-divider.hide{ display:none; }

/* Entradas recientes (año en curso) destacadas */
.post-card.is-recent{
  border-color:color-mix(in oklab,var(--brand) 38%,var(--border));
  box-shadow:0 26px 64px color-mix(in oklab,var(--brand) 15%,transparent);
}
.post-card.is-recent::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  border-radius:var(--radius) var(--radius) 0 0; background:var(--grad);
}
.post-take{
  margin:14px 0 0; padding-top:13px; border-top:1px dashed color-mix(in oklab,var(--brand) 30%,var(--border));
  font-size:14px; color:var(--text);
}
.post-take b{ color:var(--brand); font-weight:600; }
@media (max-width:600px){
  .blog-filters{ gap:6px; padding:8px; }
  .filter-btn{ font-size:13px; padding:7px 13px; }
}