/* Estilos compartidos de decabo.net: tokens, navegación, botones, footer y botón flotante.
   Lenguaje visual inspirado en lumenlab.ai: fondo gris claro, tarjetas blancas muy redondeadas,
   títulos gigantes. Los estilos propios de cada página van en la página (o en legal.css). */
:root{
  --bg:#F4F4F5;
  --card:#FFFFFF;
  --ink:#0B1220;
  --ink-2:#3C4657;
  --muted:#5B6474;
  --line:#E2E3E8;
  --line-2:#D4D6DD;

  --brand:#031580;        /* azul marino del logo: texto, íconos y botones (14.8:1 sobre blanco) */
  --brand-2:#0A22A8;
  --brand-soft:#E9ECF8;
  --accent:#24F9E3;       /* cian del logo: solo sobre fondo marino (1.3:1 sobre blanco) */
  --on-brand-2:#C7CEF0;   /* texto secundario sobre marino (9.5:1) */

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:112px;
  --r:22px; --r-lg:28px;
  --t:180ms cubic-bezier(.2,.6,.3,1);
  --spring:260ms cubic-bezier(.22,.61,.36,1);
  --press:90ms cubic-bezier(.2,.7,.4,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-optical-sizing:auto; text-rendering:optimizeLegibility;
}
h1,h2,h3{line-height:1.05; letter-spacing:-.03em; font-weight:600}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px}

.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--s3)}
@media(max-width:560px){ .wrap{padding-inline:var(--s2)} }

.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s3); top:var(--s2); z-index:100; background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-weight:600}

/* ---------- Navegación ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(244,244,245,.82);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.site-nav{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); height:76px}
.logo{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1.08rem; letter-spacing:-.02em; color:var(--ink)}
.logo-mark{width:30px; height:30px; border-radius:8px; flex-shrink:0}
.logo-word span{color:var(--muted); font-weight:500}
.nav-links{display:none; flex:1; justify-content:space-evenly; list-style:none; max-width:640px}
.nav-links a{font-weight:500; font-size:.98rem; color:var(--ink); transition:opacity var(--t)}
.nav-links a:hover{opacity:.6}
.nav-links a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.nav-links sup{font-size:.62rem; color:var(--muted); margin-left:3px; font-weight:500}
@media(min-width:900px){ .nav-links{display:flex} }

/* ---------- Botones píldora ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:.96rem; letter-spacing:-.01em;
  padding:0 22px; min-height:46px; border-radius:999px; border:0;
  cursor:pointer; white-space:nowrap; touch-action:manipulation; font-family:inherit;
  transition:transform var(--spring), background var(--spring), box-shadow var(--spring), color var(--spring);
}
.btn:active{transform:scale(.97); transition:transform var(--press)}
.btn svg{width:18px; height:18px; flex-shrink:0}
.btn-lg{min-height:54px; padding:0 28px; font-size:1.02rem}
.btn-dark{background:var(--brand); color:#fff}
.btn-dark:hover{background:var(--brand-2); box-shadow:0 8px 22px rgba(3,21,128,.28)}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{box-shadow:0 8px 22px rgba(11,18,32,.14)}
/* Botón sobre fondo marino: toma el cian del logo */
.btn-accent{background:var(--accent); color:var(--brand)}
.btn-accent:hover{background:#5CFBEA; box-shadow:0 8px 24px rgba(36,249,227,.3)}
.btn-ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
/* Punto blanco de las píldoras, como en lumenlab */
.btn .pip{width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.9}

/* ---------- Etiqueta de sección: "⊕ Qué hacemos" ---------- */
.label{display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:.98rem; color:var(--ink)}
.label::before{
  content:"+"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:15px; line-height:1;
}
/* Sobre fondo marino */
.label-light{color:#fff}
.label-light::before{background:#fff; color:var(--brand)}

/* ---------- Footer ---------- */
.site-footer{padding:var(--s6) 0 var(--s4); color:var(--muted); font-size:.92rem}
.foot-grid{display:grid; gap:var(--s5); grid-template-columns:1fr}
@media(min-width:820px){ .foot-grid{grid-template-columns:2fr 1fr 1fr} }
.foot-brand{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1.05rem; color:var(--ink); letter-spacing:-.02em; margin-bottom:var(--s2)}
.foot-brand span span{color:var(--muted); font-weight:500}
.foot-legal{color:var(--ink-2); line-height:1.9; max-width:52ch}
.foot-legal strong{color:var(--ink); font-weight:600}
.foot-legal a{border-bottom:1px solid var(--line-2); transition:color var(--t), border-color var(--t)}
.foot-legal a:hover{color:var(--brand); border-color:var(--brand)}
.foot-col h2{font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2)}
.foot-col ul{list-style:none; display:grid; gap:10px}
.foot-col a{color:var(--ink); font-weight:500; transition:opacity var(--t)}
.foot-col a:hover{opacity:.6}
.foot-copy{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line-2); font-size:.85rem}

/* ---------- Botón flotante de WhatsApp ---------- */
.fab{
  position:fixed; z-index:40;
  right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 4px 12px rgba(11,18,32,.18), 0 12px 32px rgba(37,211,102,.32);
  touch-action:manipulation;
  transition:transform var(--spring), box-shadow var(--spring);
}
.fab svg{width:28px; height:28px}
.fab:hover{transform:translateY(-2px) scale(1.04)}
.fab:active{transform:scale(.94); transition:transform var(--press)}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-transparency: reduce){
  .site-header{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (prefers-contrast: more){
  :root{--line:#9AA1AD; --line-2:#7C8494; --muted:#3C4657}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}