/* diflow/assets/css/style.css */

/* =========================================================
   ---------- 0) OBJETIVO ----------
   - Quitar el “corte” de color que aparece a media página.
   - Mantener partículas (canvas) intactas.
   - Mantener bg-lines, pero su fade NO debe depender del % del documento.
   - Fondo (gradientes) más integrado usando una capa fija (body::before).
   ========================================================= */

/* diflow/assets/css/style.css */

/* =========================================================
   ---------- 0) OBJETIVO ----------
   - style.css será la ÚNICA fuente del tema (antes era theme.css + style.css)
   - Eliminamos duplicidad de variables y dejamos tokens claros
   ========================================================= */

/* =========================================================
   ---------- 1) TOKENS / VARIABLES (SINGLE SOURCE) ----------
   - Aquí vive TODO el tema: colores base + alias consumidos por UI
   - Ya NO dependes de theme.css
   ========================================================= */
:root{
  /* ---------- 1.1) DIFLOW BASE (DARK) ---------- */
  --dif-bg: #0B0F14;
  --dif-bg2: #0E1622;

  --dif-text: rgba(232, 240, 255, .92);
  --dif-muted: rgba(232, 240, 255, .72);
  --dif-muted2: rgba(232, 240, 255, .58);

  --dif-panel: rgba(255,255,255,0.06);
  --dif-panel2: rgba(255,255,255,0.08);

  --dif-border: rgba(255,255,255,0.12);

  --dif-accent:  #77D4D4; /* teal marca */
  --dif-accent2: #204D6D; /* azul profundo */
  --dif-accent3: #4FBACB; /* cyan secundario */

  --dif-danger: #fb7185;

  --dif-shadow: 0 12px 40px rgba(0,0,0,.35);
  --dif-ring: 0 0 0 3px rgba(119,212,212,.18);

  /* ---------- 1.2) ALIASES (consumidos por tu UI) ---------- */
  --bg: var(--dif-bg);
  --bg-2: var(--dif-bg2);

  --text: var(--dif-text);
  --muted: var(--dif-muted);
  --muted-2: var(--dif-muted2);

  --panel: var(--dif-panel);
  --panel-2: var(--dif-panel2);

  --border: var(--dif-border);

  --accent: var(--dif-accent);
  --accent-2: var(--dif-accent3);

  --danger: var(--dif-danger);

  /* ---------- 1.3) TOKENS UI / LAYOUT ---------- */
  --shadow: var(--dif-shadow);

  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;

  --container: 1120px;
  --pad: 20px;
  --header-h: 76px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  /* Fade de bg-lines SOLO cerca del borde superior/inferior */
  --bgline-fade-px: 160px;

  /* Separadores (línea + glow) */
  --divider-line: rgba(119,212,212,0.35);
  --divider-glow: rgba(119,212,212,0.22);
  --divider-opacity-top: .95;
  --divider-opacity-bottom: .85;

  /* Mobile menu (si lo usas en responsive) */
  --mobile-menu-border: rgba(255,255,255,0.14);
}

/* =========================================================
   ---------- 2) RESET + BASE ----------
   ========================================================= */
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.5;

  /* Header fijo */
  padding-top: var(--header-h);

  /* CLAVE: stacking consistente para fondos */
  position: relative;
  min-height: 100vh;
  isolation: isolate;

  /* Base sólida */
  background: var(--bg);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 99999;
}
.skip-link:focus{ left:10px; }
/* =========================================================
   ---------- 2) RESET + BASE ----------
   ========================================================= */
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.5;

  /* Header fijo */
  padding-top: var(--header-h);

  /* CLAVE: stacking consistente para fondos */
  position: relative;
  min-height: 100vh;
  isolation: isolate;

  /* Base sólida */
  background: var(--bg);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 99999;
}
.skip-link:focus{ left:10px; }

/* =========================================================
   ---------- 3) FONDO INTEGRADO (SIN “CORTES”) ----------
   Nota:
   - Esto reemplaza la lógica de “gradientes en body” que puede
     generar cambios raros al hacer scroll.
   - Al ser FIXED, NO se “repite” ni cambia su referencia.
   ========================================================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;

  /* Fondo estilo login pero MÁS integrado y sutil */
  background:
    radial-gradient(1300px 900px at 18% 8%, rgba(19,33,53,0.92) 0%, rgba(19,33,53,0.00) 66%),
    radial-gradient(1100px 820px at 82% 18%, rgba(32,77,109,0.50) 0%, rgba(32,77,109,0.00) 62%),
    radial-gradient(1000px 800px at 50% 120%, rgba(9,14,20,0.80) 0%, rgba(9,14,20,0.00) 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

  background-repeat: no-repeat;
  background-size: cover;
}

/* =========================================================
   ---------- 4) FONDOS: CANVAS + BG-LINES ----------
   Capas:
   - body::before (gradientes) -> z 0
   - #diflow-bg (partículas)    -> z 1
   - .bg-lines (líneas)         -> z 2
   - contenido                  -> z 3
   ========================================================= */

/* ---------- 4.1) CANVAS (NO TOCAR MOTOR) ---------- */
#diflow-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display:block;
  pointer-events:none;
  z-index: 1;
}

/* ---------- 4.2) BG-LINES (AJUSTE REAL DEL PROBLEMA) ---------- */
.bg-lines{
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - (var(--pad)*2)));

  pointer-events: none;
  z-index: 2;

  /* Patrón uniforme */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.040) 0px,
      rgba(255,255,255,0.040) 1px,
      transparent 1px,
      transparent 72px
    );

  /* CLAVE: el patrón “arranca” donde arranca el contenido real (bajo header) */
  background-position: 0 var(--header-h);

  opacity: .14;

  /* CLAVE ABSOLUTA:
     Antes usabas 10%/90% (dependía del alto total del documento).
     Eso crea un “corte” a mitad de página cuando el documento es largo.
     Ahora el fade es POR PIXELES fijos (solo bordes). */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,1) var(--bgline-fade-px),
    rgba(0,0,0,1) calc(100% - var(--bgline-fade-px)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,1) var(--bgline-fade-px),
    rgba(0,0,0,1) calc(100% - var(--bgline-fade-px)),
    rgba(0,0,0,0) 100%
  );
  mask-mode: alpha;
}

/* ---------- 4.3) CONTENIDO ARRIBA DE FONDOS ---------- */
header{ z-index: 1000; }
main, footer{ position: relative; z-index: 3; }

/* Para anchors con header fijo */
section[id]{ scroll-margin-top: calc(var(--header-h) + 14px); }

/* =========================================================
   ---------- 5) LAYOUT ----------
   ========================================================= */
.container{
  width: min(var(--container), calc(100% - (var(--pad)*2)));
  margin-inline: auto;
}

.section{
  padding: 72px 0;
  position: relative;
}

/* =========================================================
   ---------- 5.1) SECTION “ALT” SIN BANDA FULL-WIDTH ----------
   (Si quieres “alt” pero sin que cambie el tono a lo ancho total)
   ========================================================= */
.section--alt{
  background: transparent;
  border-top: none;      /* CLAVE: elimina 1ra línea duplicada */
  border-bottom: none;   /* CLAVE: elimina 2da línea duplicada */
  position: relative;
  isolation: isolate;
}


/* Panel solo dentro del ancho del container */
.section--alt::before{
  content:"";
  position:absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);

  width: min(var(--container), calc(100% - (var(--pad)*2)));
  border-radius: var(--r-xl);

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);

  pointer-events:none;
  z-index: 0;
}

.section--alt > .container{
  position: relative;
  z-index: 1;
}

/* ---------- Headings ---------- */
.section__head{
  display:grid;
  gap:10px;
  margin-bottom: 22px;
}
.section__title{
  font-size: clamp(22px, 2.1vw, 28px);
  margin:0;
  letter-spacing: -0.02em;
}
.section__subtitle{
  margin:0;
  color: var(--muted);
  max-width: 72ch;
}
.section__footer{
  margin-top: 20px;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}
/* =========================================================
   ---------- 5.2) SEPARADORES ALINEADOS AL CONTAINER ----------
   Objetivo:
   - Línea superior en .section, .cta y .footer
   - Línea inferior SOLO en .section--alt
   - Siempre al ancho del container (NO 100vw)
   - Siempre arriba del panel alt y bg-lines, pero abajo del contenido
   ========================================================= */

/* Asegura stacking correcto dentro de cada bloque */
.section,
.cta,
.footer{
  position: relative;
  isolation: isolate;
}

/* El contenido siempre por encima de los separadores */
.section > .container,
.cta > .container,
.footer > .container{
  position: relative;
  z-index: 2;
}

/* ---------- 5.2.1) SEPARADOR SUPERIOR ---------- */
.section::before,
.cta::before,
.footer::before{
  content:"";
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  width: min(var(--container), calc(100% - (var(--pad)*2)));
  height: 1px;

  pointer-events:none;
  z-index: 1;

  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--divider-line) 10%,
    var(--divider-line) 90%,
    transparent 100%
  );

  box-shadow: 0 0 18px var(--divider-glow);
  opacity: var(--divider-opacity-top);
}

/* ---------- 5.2.2) SEPARADOR INFERIOR SOLO PARA section--alt ---------- */
.section--alt::after{
  content:"";
  position:absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: min(var(--container), calc(100% - (var(--pad)*2)));
  height: 1px;

  pointer-events:none;
  z-index: 1;

  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--divider-line) 10%,
    var(--divider-line) 90%,
    transparent 100%
  );

  box-shadow: 0 0 18px var(--divider-glow);
  opacity: var(--divider-opacity-bottom);
}
/* =========================================================
   ---------- 5.3) ANTI-DUPLICADO ----------
   Problema:
   - .section--alt tiene línea inferior (alt::after)
   - El siguiente bloque tiene línea superior (::before)
   Resultado: se ven 2 líneas pegadas (doble)
   Solución:
   - Si vienes de .section--alt, APAGA el ::before del siguiente bloque
   ========================================================= */
.section--alt + .section::before,
.section--alt + .section--alt::before,
.section--alt + .cta::before,
.section--alt + .footer::before{
  content: none !important;
}
/* =========================================================
   ---------- 6) COMPONENTES (TAG / BOTONES) ----------
   ========================================================= */
.tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: none;
  box-shadow: var(--dif-ring);
}

.btn--sm{ height: 40px; padding: 0 14px; border-radius: 12px; }

.btn--primary{
  background: linear-gradient(135deg, rgba(119,212,212,.20), rgba(79,186,203,.16));
  border-color: rgba(119,212,212,.35);
  color: rgba(255,255,255,0.94);
}
.btn--primary:hover{ background: rgba(255,255,255,0.06); }

.btn--secondary{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}
.btn--secondary:hover{ background: rgba(255,255,255,0.06); }

.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
}
.btn--ghost:hover{ background: rgba(255,255,255,0.06); }

.text-accent{ color: var(--accent); }

/* =========================================================
   ---------- 7) HEADER / NAV ----------
   ========================================================= */

/* Smooth scroll solo si el usuario lo permite */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;

  background: rgba(11,15,20,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.header.is-scrolled{
  background: rgba(11,15,20,0.98);
  border-bottom-color: rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.header__inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* ---------- BRAND ---------- */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}
.brand__logo{ width: 34px; height: 34px; object-fit: contain; }
.brand__name{
  font-weight: 750;
  letter-spacing: 0.01em;
}
.brand__tag{
  margin-left: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 12px;
  display:none;
}
@media (min-width: 980px){
  .brand__tag{ display:inline-flex; }
}

.nav{ display:flex; align-items:center; gap: 10px; }

/* ---------- TOGGLE MOBILE ---------- */
.nav__toggle{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  display:none;
  cursor:pointer;
}
.nav__toggle-icon{
  width: 18px; height: 2px;
  background: rgba(255,255,255,0.88);
  display:block;
  margin: 0 auto;
  position: relative;
}
.nav__toggle-icon::before,
.nav__toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.88);
}
.nav__toggle-icon::before{ top: -6px; }
.nav__toggle-icon::after{ top: 6px; }

/* ---------- MENU (DESKTOP) ---------- */
.nav__menu{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* ---------- LINKS EN PILL ---------- */
.nav__links{
  position: relative;
  display:flex;
  align-items:center;
  gap: 6px;

  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}

.nav__link{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;
  padding: 0 12px;
  border-radius: 999px;

  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;

  transition: background .16s ease, color .16s ease, transform .10s ease;
}

.nav__link:hover{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.96);
}
.nav__link:active{ transform: translateY(1px); }

.nav__link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(119,212,212,.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.96);
}

.nav__link.is-active{
  color: rgba(255,255,255,0.98);
}

.nav__active-indicator{
  position: absolute;
  top: 6px;
  left: 0;
  height: 38px;
  width: 0; /* JS */
  border-radius: 999px;

  background: linear-gradient(135deg, rgba(119,212,212,.18), rgba(79,186,203,.12));
  border: 1px solid rgba(119,212,212,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.20);

  opacity: 0;
  transform: translateX(0);
  transition: transform .18s ease, width .18s ease, opacity .12s ease;

  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   ---------- 8) HERO ----------
   ========================================================= */
.hero{ padding: 70px 0 60px; }

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items:center;
}

.kicker{
  margin:0 0 10px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero__title{
  margin:0;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.hero__subtitle{
  margin: 14px 0 0;
  color: var(--muted);
  max-width: 70ch;
}

.hero__actions{
  display:flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.hero__trust{
  display:flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.trust-pill{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}

.hero__visual{ display:flex; justify-content:flex-end; }

.hero-card{
  width: min(440px, 100%);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(11,15,20,0.62);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-card__top{
  display:flex;
  gap:6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}

.hero-card__body{ padding: 18px; display:grid; gap: 10px; }
.hero-card__badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(119,212,212,.30);
  background: rgba(119,212,212,.10);
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  width: fit-content;
}
.hero-card__headline{ font-size: 18px; font-weight: 650; margin:0; }
.hero-card__text{ color: var(--muted); font-size: 14px; }
.hero-card__cta{ color: var(--accent); font-weight: 600; font-size: 13px; }

/* =========================================================
   ---------- 9) GRID + CARDS ----------
   ========================================================= */
.grid{ display:grid; gap: 14px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.quick-addins-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.compare-wrap{
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(11,15,20,0.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.compare-table{
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.compare-table thead th{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.04);
}

.compare-table tbody tr:last-child td{
  border-bottom: none;
}

.compare-key{
  font-weight: 650;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

.compare-ok{
  color: #9ad3bc;
  font-weight: 700;
}

.compare-note{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.card{
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(11,15,20,0.56);
  padding: 18px;
  display:grid;
  gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card__title{ margin:0; font-size: 16px; font-weight: 650; }
.card__text{ margin:0; color: var(--muted); font-size: 14px; }
.card__link{ margin-top: 2px; color: var(--accent); font-weight: 600; font-size: 13px; }

/* =========================================================
   ---------- 10) SERVICE CARDS ----------
   ========================================================= */
.service-card{
  display:block;
  padding: 18px 18px 16px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(11,15,20,0.56);
  color: inherit;
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.service-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(11,15,20,0.64);
}
.service-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(480px 240px at 20% 10%, rgba(119,212,212,.18), transparent 62%),
    radial-gradient(420px 240px at 85% 25%, rgba(79,186,203,.14), transparent 58%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.service-card:hover::before{ opacity: 1; }

.service-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.service-card__badge{
  font-size: 12px;
  letter-spacing: .02em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}
.service-card__title{ margin: 0 0 8px 0; font-size: 18px; line-height: 1.2; }
.service-card__text{ margin: 0 0 12px 0; opacity: .88; }
.service-card__meta{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.service-card__link{ display:inline-block; font-weight: 600; opacity: .92; }

/* =========================================================
   ---------- 11) CTA + FOOTER ----------
   ========================================================= */
.cta{ padding: 70px 0; position: relative; }

.cta__inner{
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(119,212,212,.10), rgba(79,186,203,.08));
  box-shadow: var(--shadow);
  padding: 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.cta__title{ margin:0; font-size: 22px; letter-spacing: -0.02em; }
.cta__text{ margin:8px 0 0; color: rgba(255,255,255,0.84); max-width: 70ch; }
.cta__actions{ display:flex; gap: 10px; flex-wrap: wrap; }

.footer{
  border-top: none; /* CLAVE: ya no duplica con footer::before */
  padding: 46px 0 26px;
  background: rgba(0,0,0,0.12);
  position: relative;
  isolation: isolate;
}

.footer__grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 22px;
}

.footer__brand{ display:flex; align-items:center; gap: 12px; }
.footer__logo{ width: 34px; height: 34px; object-fit: contain; }
.footer__name{ font-weight: 750; }
.footer__tagline{ color: var(--muted); font-size: 13px; }
.footer__text{ color: var(--muted); margin: 12px 0 0; max-width: 68ch; }

.footer__title{ margin: 0 0 10px; font-size: 14px; color: rgba(255,255,255,0.90); }
.footer__list{ list-style: none; padding:0; margin:0; display:grid; gap: 8px; }
.footer__list a{ color: var(--muted); font-size: 13px; }
.footer__list a:hover{ color: rgba(255,255,255,0.92); }

.footer__bottom{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted-2);
}
.footer__note{ color: var(--muted-2); }

/* =========================================================
   ---------- 12) RESPONSIVE ----------
   ========================================================= */
@media (max-width: 980px){
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .nav__menu{
    position: fixed; /* antes: absolute */
    top: calc(var(--header-h) + 10px);
    right: var(--pad);
    left: var(--pad);

    max-width: 420px;
    margin-left: auto;

    padding: 12px;
    border-radius: var(--r-xl);
    border: 1px solid var(--mobile-menu-border);

    /* Mismo “feeling” de la barra superior pero sólido */
  background: rgba(11,15,20,0.94);
  border-bottom: 1px solid rgba(255,255,255,0.10);

    box-shadow: var(--shadow);
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    z-index: 2000; /* arriba del contenido */
    overflow: hidden; /* evita artefactos de blur/transparencias */
  }
  .nav__menu.is-open{ display:flex; }

  .nav__links{
    justify-content: stretch;
    flex-wrap: wrap;
    border-radius: 18px;
  }
  .nav__active-indicator{ display:none; }

  .nav__cta{
    margin-left: 0;
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero__grid{
    grid-template-columns: 1fr;
  }

  .grid--3{
    grid-template-columns: 1fr;
  }

  .cta__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ---------- 13) ORB SOLO EN LOGIN/REGISTER ----------
   Se activa únicamente cuando el body tiene class="auth-orb"
   (No afecta index.html)
   ========================================================= */
body.auth-orb::after {
  content: "";
  position: fixed;
  width: clamp(1600px, 165vmax, 2600px);
  height: clamp(1600px, 165vmax, 2600px);
  top: 50%;
  right: 56%;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 40% 48%,
      rgba(119, 212, 212, .95) 0%,
      rgba(79, 186, 203, .88) 42%,
      rgba(32, 77, 109, .86) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 22px 90px rgba(0, 0, 0, .22);
  filter: saturate(1.06);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}