/* ============================================================================
   egfconnect · HOJA DE ESTILOS
   Sistema oscuro y editorial · Clash Display (títulos) + General Sans (cuerpo)
   ========================================================================== */

:root{
  /* Lienzo oscuro (dominante) */
  --bg:          #0A0E16;
  --bg-soft:     #0D1220;
  --surface:     #12182A;
  --surface-2:   #171E33;
  --navy:        #0E2F56;   /* referencia de marca, usado en detalles puntuales */

  /* Acento (aparece por escasez, nunca como fondo de bloques enteros)
     Suavizado (ago 2026): antes #00C2FF (cian neón, saturación 100%) — se
     desatura a un azul cielo más premium, menos "IA genérica". */
  --cian:        #4BB4DD;
  --cian-deep:   #2E8FB0;
  --cian-pale:   #C7E9F5;   /* variante muy clara, para degradados suaves */

  /* Acentos de servicio / apoyo */
  --verde:       #10B981;
  --indigo:      #7C7FF2;   /* uso puntual en tarjetas de servicio, no en degradados de marca */
  --ambar:       #F5A623;
  --coral:       #FB7185;

  /* Degradado de marca, reservado a un titular o detalle, nunca de relleno.
     Suavizado (ago 2026): antes cian→índigo (el degradado azul-morado más
     característico de las webs genéricas hechas con IA). Ahora un único
     tono (cian) de oscuro a claro — más sobrio, sigue siendo tu color. */
  --grad-brand:  linear-gradient(120deg, var(--cian-deep) 0%, var(--cian) 50%, var(--cian-pale) 100%);

  /* Jerarquía de texto sobre el fondo oscuro, por opacidad */
  --text:        rgba(255,255,255,.94);
  --text-2:      rgba(255,255,255,.70);
  --text-3:      rgba(255,255,255,.50);
  --text-4:      rgba(255,255,255,.32);

  /* Líneas y bordes, siempre en rgba blanco (nunca gris opaco) */
  --rule:        rgba(255,255,255,.10);
  --rule-strong: rgba(255,255,255,.20);

  /* Tipografía: display con carácter + cuerpo legible. Nada de fuentes por defecto. */
  --f-head: "Clash Display", "Arial Black", sans-serif;
  --f-body: "General Sans", "Arial", sans-serif;
  --f-accent: "Instrument Serif", Georgia, serif;   /* palabra suelta en itálica, look editorial */

  /* Medidas */
  --maxw: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 78px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  --shadow-sm: 0 6px 24px rgba(0,0,0,.28);
  --shadow-md: 0 24px 70px rgba(0,0,0,.42);
}

/* ----------------------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  color:var(--text-2);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:2px solid var(--cian); outline-offset:3px; border-radius:2px; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* Fondo dinámico sutil que reacciona al scroll (variable la mueve el JS).
   Corregido (ago 2026): usaba rgba(0,194,255) y rgba(124,127,242) fijos
   -el cian y el índigo antiguos, en crudo- así que no cambiaron al
   suavizar la paleta en la Fase 1. Ahora un único acento (cian actual,
   en dos tonos de profundidad), sin índigo. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1000px 700px at 82% calc(0% + var(--scrolly,0) * 0.5),
      color-mix(in srgb, var(--cian) 22%, transparent), transparent 62%),
    radial-gradient(900px 600px at 6% 90%,
      color-mix(in srgb, var(--cian-deep) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 60%);
}

/* Grano digital premium */
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* Spotlight border: el borde se ilumina alrededor del cursor, en vez de
   un borde estático. Se aplica añadiendo la clase .spotlight a cualquier
   superficie con borde (JS actualiza --mx/--my en initSpotlight). */
.spotlight{ position:relative; }
.spotlight::after{
  content:""; position:absolute; inset:0; z-index:6; border-radius:inherit;
  padding:1px; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--card-acc, var(--cian)) 85%, white 15%), transparent 72%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.spotlight:hover::after{ opacity:1; }

/* ==================================================== BARRA DE PROGRESO */
.progress{
  position:fixed; top:0; left:0; right:0; z-index:600;
  height:2px; background:transparent;
}
.progress__fill{
  display:block; height:100%; width:0%; background:var(--cian);
  box-shadow:0 0 12px rgba(0,194,255,.6);
}

/* ============================================================== SPLASH */
.splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.splash.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.splash__inner{ text-align:center; }
/* El logo NO está visible al abrir la página: se revela con un barrido
   de izquierda a derecha, al mismo ritmo que la barra de carga de abajo
   (misma duración/retraso que splashBar), como si se fuera "creando"
   mientras carga. */
.splash__logo{
  /* Mismo tamaño que el texto "egfconnect" de abajo (mismo clamp) */
  height:clamp(2.6rem,9vw,5rem); width:auto; margin:0 auto 24px; display:block;
  clip-path:inset(0 100% 0 0);
  animation:splashLogoReveal 3.6s var(--ease) .2s forwards;
}
@keyframes splashLogoReveal{ to{ clip-path:inset(0 0% 0 0); } }
.splash__siglas{
  font-family:var(--f-head); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.6rem,9vw,5rem); color:var(--text);
  opacity:0; transform:translateY(14px);
  animation:splashIn .9s var(--ease) .15s forwards;
}
.splash__siglas span{ color:var(--cian); }
.splash__bar{
  width:min(260px,60vw); height:2px; margin:26px auto 0;
  background:var(--rule); overflow:hidden;
}
.splash__bar-fill{
  display:block; height:100%; width:0; background:var(--cian);
  /* Red de seguridad nº1: avanza solo con CSS aunque el JS falle */
  animation:splashBar 3.6s var(--ease) .2s forwards;
}
@keyframes splashIn{ to{ opacity:1; transform:none; } }
@keyframes splashBar{ 0%{width:0} 70%{width:88%} 100%{width:100%} }

/* ============================================================== CURSOR */
.cursor{
  position:fixed; top:0; left:0; z-index:900; pointer-events:none;
  width:32px; height:32px; margin:-16px 0 0 -16px;
  border:1px solid var(--cian); border-radius:50%;
  transform:translate(-100px,-100px);
  transition:width .25s var(--ease), height .25s var(--ease),
             background-color .25s var(--ease), margin .25s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.cursor.is-active{
  width:80px; height:80px; margin:-40px 0 0 -40px;
  background:rgba(0,194,255,.10);
}
.cursor__label{
  font-family:var(--f-head); font-weight:600; font-size:.6rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--cian);
  opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s;
}
.cursor.is-active .cursor__label{ opacity:1; transform:scale(1); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none !important; } }

/* ============================================================== HEADER */
.header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease),
             height .35s var(--ease);
}
.header.is-scrolled{
  background:rgba(10,14,22,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--rule); height:64px;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.brand__logo{ height:44px; width:auto; transition:height .35s var(--ease); }
.header.is-scrolled .brand__logo{ height:36px; }

.nav{ display:flex; align-items:center; gap:32px; }
.nav__link{
  font-family:var(--f-head); font-weight:600; font-size:.9rem; color:var(--text-2);
  position:relative; padding:6px 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--cian); transition:width .3s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after{ width:100%; }
.nav__link.is-active{ color:var(--text); }
.nav__cta{
  font-family:var(--f-head); font-weight:600; font-size:.88rem;
  background:var(--cian); color:#031018; padding:11px 22px; border-radius:var(--radius-sm);
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.nav__cta:hover{ transform:translateY(-2px); background:#3ED0FF; }

/* Botón hamburguesa (móvil) */
.nav__toggle{ display:none; width:42px; height:42px; flex-direction:column;
  justify-content:center; align-items:center; gap:5px; }
.nav__toggle span{ width:24px; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================== BOTONES */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-head); font-weight:600; font-size:.98rem;
  padding:15px 28px; border-radius:var(--radius-sm);
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             border-color .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn--primary{ background:var(--cian); color:#031018; }
.btn--primary:hover{ transform:translateY(-2px); background:#3ED0FF; }
.btn--ghost{ background:transparent; color:var(--text); border:1px solid var(--rule-strong); }
.btn--ghost:hover{ border-color:var(--cian); color:var(--cian); transform:translateY(-2px); }
.btn--wa{ background:#25D366; color:#04210f; }
.btn--wa:hover{ background:#33e878; transform:translateY(-2px); }
.btn--block{ width:100%; }

/* ===================================================== SECCIONES COMÚN */
.section{ position:relative; padding:clamp(80px,11vw,140px) 0; }
.section__watermark{
  position:absolute; top:-.18em; left:0; z-index:0;
  font-family:var(--f-head); font-weight:700; line-height:1;
  font-size:clamp(8rem,26vw,22rem); color:var(--text); opacity:.035;
  pointer-events:none; user-select:none;
}
.section__eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--f-head);
  font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cian); margin-bottom:20px;
}
.section__eyebrow::before{ content:""; width:22px; height:1px; background:var(--cian); }
.section__title{
  font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.08; letter-spacing:-.03em;
  max-width:16ch;
}

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

/* Fondos alternos por sección: variaciones muy sutiles del mismo lienzo oscuro */
#faq{ background:var(--bg-soft); }
#contacto{ background:var(--bg); }

/* Halos de color muy tenues, como atmósfera, no como relleno */
#valor::after, #contacto::after{
  content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  filter:blur(10px);
}
#valor::after{ width:360px; height:360px; top:6%; right:-120px;
  background:radial-gradient(circle, rgba(0,194,255,.08), transparent 68%); }
#contacto::after{ width:380px; height:380px; top:-90px; left:-120px;
  background:radial-gradient(circle, rgba(16,185,129,.08), transparent 68%); }

/* ================================================================ HERO */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:var(--header-h); overflow:hidden;
}
.hero__aurora{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:.8; mix-blend-mode:screen;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(50% 46% at 88% 6%, rgba(0,194,255,.10), transparent 70%),
    radial-gradient(44% 50% at -6% 96%, rgba(124,127,242,.09), transparent 70%);
}
/* Marca como sello editorial centrado en el hero: sigue al ratón por encima
   del texto, en su propia capa (detrás del contenido, delante del fondo). */
.hero__mark-anchor{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0;
  width:min(560px,58vw); pointer-events:none; user-select:none;
}
.hero__mark{ width:100%; }
.hero__mark-img{
  width:100%; height:auto; opacity:.14;
  animation:heroMarkFloat 12s ease-in-out infinite;
  transform-origin:60% 40%;
}
@keyframes heroMarkFloat{
  0%,100%{ transform:rotate(-8deg) translate(0,0) scale(1); }
  50%{ transform:rotate(-4deg) translate(-18px,16px) scale(1.03); }
}
.hero__inner{ position:relative; z-index:1; text-align:center; padding-top:40px; padding-bottom:60px; }
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-weight:600; color:var(--cian);
  letter-spacing:.18em; text-transform:uppercase; font-size:clamp(.7rem,1.3vw,.84rem);
  margin-bottom:28px;
}
.hero__kicker::before, .hero__kicker::after{ content:""; width:22px; height:1px; background:var(--cian); }
.hero__title{
  font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:clamp(2.8rem,8.2vw,6.4rem); line-height:.98; letter-spacing:-.04em;
  display:flex; flex-direction:column; align-items:center;
}
.hero__line{ display:block; overflow:hidden; padding:0 .05em; text-wrap:balance; }
.hero__line .word{ display:inline-block; will-change:transform, opacity, filter; }
.hero__line .word--accent{
  font-family:var(--f-accent); font-style:italic; font-weight:400;
  letter-spacing:0; color:var(--text);
}
.hero__line--offset .word{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.hero__subtitle{
  max-width:600px; margin:30px auto 0; font-size:clamp(1rem,1.7vw,1.18rem);
  color:var(--text-3);
}
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:42px; }
.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:1;
  width:24px; height:40px; border:1px solid var(--rule-strong); border-radius:99px;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; width:3px; height:7px; margin-left:-1.5px;
  background:var(--cian); border-radius:99px; animation:scrollDot 1.6s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* ============================================================= MARQUEE */
.marquee{
  background:var(--bg-soft); color:var(--text); overflow:hidden; padding:18px 0;
  white-space:nowrap; position:relative; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.marquee__track{ display:inline-flex; gap:0; will-change:transform; animation:marquee 32s linear infinite; }
.marquee__item{
  font-family:var(--f-head); font-weight:600; font-size:clamp(1rem,2vw,1.4rem);
  padding:0 30px; display:inline-flex; align-items:center; gap:30px; color:var(--text-2);
}
.marquee__item::after{ content:"•"; color:var(--cian); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =============================================================== VALOR */
.valor__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:64px; align-items:center; }
.valor__copy p{ margin-top:18px; color:var(--text-3); font-size:1.05rem; max-width:52ch; }
.valor__bullets{ margin-top:30px; display:grid; gap:14px; }
.valor__bullets li{
  font-family:var(--f-head); font-weight:600; color:var(--text-2); display:flex;
  align-items:center; gap:14px; font-size:1.02rem;
}
.valor__bullets li::before{
  content:"→"; flex:none; width:26px; height:26px; color:var(--cian);
  display:grid; place-items:center; font-weight:700; font-size:1rem;
}

/* =========================================== DEMO EN VIVO (navegador) */
/* Un navegador de escritorio con una web de ejemplo que se desplaza sola:
   demuestra a un cliente potencial cómo podría verse su negocio. */
.demo{ position:relative; width:100%; }
.demo__browser{
  position:relative; border-radius:12px; overflow:hidden;
  background:#0f1524; border:1px solid var(--rule-strong);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.demo__bar{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  background:#161d30; border-bottom:1px solid var(--rule);
}
.demo__dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.demo__url{
  margin-left:12px; flex:1; height:18px; border-radius:9px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; padding:0 10px; font-family:var(--f-body);
  font-size:.62rem; color:var(--text-4); letter-spacing:.02em;
}
.demo__screen{
  position:relative; aspect-ratio:4/3.05; overflow:hidden; background:#fff;
}
.demo__tag{
  display:block; margin-top:14px; text-align:center; font-family:var(--f-head);
  font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-4);
}

/* --- La "mini web" que vive dentro de la pantalla (tema claro, cálido) --- */
.demo__site{ color:#2a2320; font-family:var(--f-body); background:#fbf7f2; }
.dsite__nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:#fff; border-bottom:1px solid #efe7de;
  position:sticky; top:0; z-index:2;
}
.dsite__logo{ font-family:var(--f-head); font-weight:700; font-size:1.05rem; color:#b4552e; letter-spacing:-.01em; }
.dsite__links{ display:flex; gap:8px; }
.dsite__links i{ display:block; width:26px; height:6px; border-radius:3px; background:#e7ddd2; }
.dsite__hero{ position:relative; height:210px; overflow:hidden; display:flex; align-items:center; }
.dsite__heroimg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:dsiteKen 14s ease-in-out infinite alternate;
}
.dsite__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,15,8,.72), rgba(30,15,8,.15)); }
.dsite__herotext{ position:relative; z-index:1; padding:0 22px; color:#fff; }
.dsite__eyebrow{ font-family:var(--f-head); font-weight:600; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#ffd9b0; }
.dsite__herotext h3{ font-family:var(--f-head); font-weight:700; font-size:1.5rem; line-height:1.08; margin:8px 0 14px; }
.dsite__btn{
  display:inline-block; background:#e0763a; color:#fff; font-family:var(--f-head); font-weight:600;
  font-size:.78rem; padding:9px 16px; border-radius:8px; box-shadow:0 8px 18px rgba(224,118,58,.4);
}
.dsite__btn--big{ font-size:.92rem; padding:12px 22px; }
.dsite__block{ padding:26px 22px 6px; }
.dsite__blocktitle{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.dsite__blocktitle b{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; color:#2a2320; }
.dsite__blocktitle i{ flex:1; height:1px; background:#e7ddd2; }
.dsite__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dsite__card{ border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(80,50,30,.1); }
.dsite__card img{ width:100%; height:82px; object-fit:cover; display:block; }
.dsite__card figcaption{ padding:9px 10px; font-size:.72rem; display:flex; justify-content:space-between; align-items:center; color:#5a4a3e; }
.dsite__card figcaption b{ color:#b4552e; font-family:var(--f-head); }
.dsite__band{ position:relative; height:150px; margin:24px 0 0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.dsite__band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dsite__band::after{ content:""; position:absolute; inset:0; background:rgba(30,15,8,.55); }
.dsite__quote{ position:relative; z-index:1; color:#fff; font-family:var(--f-head); font-weight:600; font-size:1.05rem; text-align:center; padding:0 24px; }
.dsite__cta{ text-align:center; padding:34px 22px; background:#fff; }
.dsite__cta h4{ font-family:var(--f-head); font-weight:700; font-size:1.3rem; color:#2a2320; margin-bottom:16px; }
.dsite__foot{ text-align:center; padding:18px; font-size:.68rem; color:#8a7a6c; background:#f3ece3; }
@keyframes dsiteKen{ from{ transform:scale(1); } to{ transform:scale(1.12); } }

/* Grafismo de "red de conexión" (SVG propio, sin mockups genéricos) */
.network{ position:relative; aspect-ratio:1/.92; display:grid; place-items:center; }
.network__ring{
  position:absolute; inset:8%; border-radius:50%; border:1px solid var(--rule);
}
.network__ring::before{
  content:""; position:absolute; inset:14%; border-radius:50%; border:1px dashed var(--rule);
}
.network__svg{ position:relative; z-index:1; width:100%; height:100%; overflow:visible; }
.net-line{
  fill:none; stroke:var(--cian); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:var(--len,420); stroke-dashoffset:var(--len,420);
  transition:stroke-dashoffset 1.4s var(--ease-out);
  opacity:.6;
}
.net-line--dash{ stroke:var(--indigo); opacity:.4; }
.network.is-drawn .net-line{ stroke-dashoffset:0; }
.net-node{ fill:var(--bg); stroke:var(--text-2); stroke-width:1.5; opacity:0; transform-origin:center;
  transition:opacity .5s var(--ease), transform .5s var(--ease); transform:scale(.4); }
.network.is-drawn .net-node{ opacity:1; transform:scale(1); }
.net-node--core{ fill:var(--cian); stroke:none; }
.network__label{
  position:absolute; z-index:2; font-family:var(--f-head); font-weight:600;
  font-size:.78rem; letter-spacing:.02em; color:#031018;
}
.network__label b{ font-weight:700; }

/* ==================================================== POR QUÉ ELEGIRNOS */
.why{ background:var(--bg); }
.why__head{ max-width:760px; }
.why__head .section__title{ max-width:24ch; }
.why__lead{ margin-top:16px; color:var(--text-3); font-size:1.06rem; max-width:56ch; }

/* Cifras animadas: tira editorial con reglas finas, sin tarjetas */
.stats{
  margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.stat{
  position:relative; text-align:left; padding:32px 28px 30px;
}
.stat + .stat{ border-left:1px solid var(--rule); }
.stat__num{
  font-family:var(--f-head); font-weight:700; line-height:1; letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.2vw,2.6rem); color:var(--text); white-space:nowrap;
}
.stat__label{ margin-top:12px; font-size:.9rem; color:var(--text-3); font-weight:500; max-width:20ch; }

/* Garantías: lista editorial con numeral fantasma, sin tarjetas */
.why__grid{
  margin-top:6px; display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px;
  counter-reset:guarantee;
}
.guarantee{
  position:relative; padding:34px 0; display:grid; grid-template-columns:auto 1fr; gap:22px;
  align-items:start; border-top:1px solid var(--rule);
  counter-increment:guarantee;
}
.guarantee::before{
  content:counter(guarantee,decimal-leading-zero);
  font-family:var(--f-head); font-weight:700; font-size:1.6rem; line-height:1;
  color:var(--cian); padding-top:2px;
}
.guarantee__icon{ display:none; }
.guarantee__title{ grid-column:2; font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:1.14rem; line-height:1.25; }
.guarantee__text{ grid-column:2; margin-top:10px; color:var(--text-3); font-size:.95rem; max-width:44ch; }

/* ============================================= BOTÓN FLOTANTE WHATSAPP */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:700;
  display:flex; align-items:center; gap:0;
}
.wa-float__icon{
  position:relative; z-index:2; width:56px; height:56px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:#04210f; background:#25D366;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float__icon::after{ /* pulso sutil que llama la atención sin marear */
  content:""; position:absolute; inset:0; border-radius:50%; background:#25D366;
  z-index:-1; opacity:.55; animation:waPulse 2.6s var(--ease) infinite;
}
.wa-float:hover .wa-float__icon{ transform:scale(1.06); }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.5; } 70%,100%{ transform:scale(1.9); opacity:0; } }
.wa-float__bubble{
  position:absolute; right:68px; bottom:12px; max-width:200px;
  background:var(--surface); color:var(--text); font-family:var(--f-head); font-weight:500;
  font-size:.86rem; line-height:1.3; padding:10px 14px; border-radius:10px 10px 2px 10px;
  border:1px solid var(--rule); box-shadow:var(--shadow-md); white-space:nowrap;
  opacity:0; transform:translateX(10px) scale(.9); transform-origin:right center;
  pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-float.is-hint .wa-float__bubble,
.wa-float:hover .wa-float__bubble{ opacity:1; transform:none; }
@media (max-width:520px){
  .wa-float{ right:16px; bottom:16px; }
  .wa-float__bubble{ display:none; }
}

/* ============================================================ SERVICIOS */
/* Dos grandes bloques a pantalla completa: con solo 2 servicios, cada uno
   se presenta como una pieza propia, no como fila de una lista larga. */
.section__title--wide{ max-width:22ch; }
.services__grid{
  margin-top:24px; display:flex; flex-direction:column; perspective:1600px;
}
.service-card{
  position:relative; display:grid; grid-template-columns:1fr 1.15fr; gap:64px;
  align-items:center; padding:clamp(56px,8vw,96px) 0; border-top:1px solid var(--rule);
}
.services__grid .service-card:last-child{ border-bottom:1px solid var(--rule); }
.service-card__visual{ order:1; }
.service-card__content{ order:2; }
.service-card:nth-child(even) .service-card__visual{ order:2; }
.service-card:nth-child(even) .service-card__content{ order:1; }

.service-card__visual{
  position:relative; aspect-ratio:4/3.4; border-radius:var(--radius);
  overflow:hidden; display:grid; place-items:center;
  background:color-mix(in srgb, var(--card-acc) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--card-acc) 22%, transparent);
}
.service-card__ghost{
  position:absolute; top:-.12em; left:-.04em; z-index:0;
  font-family:var(--f-head); font-weight:700; line-height:1;
  font-size:clamp(9rem,16vw,13rem); color:var(--card-acc); opacity:.10;
  pointer-events:none; user-select:none;
}
.service-card__art{ position:relative; z-index:1; width:min(320px,64%); }
.service-card__svg{ width:100%; height:auto; }
.service-card__svg .draw{
  fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.4s var(--ease);
}
.service-card.is-drawn .service-card__svg .draw{ stroke-dashoffset:0; }
.service-card__svg .dot{ opacity:0; transition:opacity .4s var(--ease) .9s; }
.service-card.is-drawn .service-card__svg .dot{ opacity:1; }

/* --- Variante con FOTO: se funde con el tema oscuro (duotono + degradado) --- */
.service-card__visual--photo{ background:var(--surface); }
.service-card__photo{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  /* Desatura y oscurece la foto para que "pertenezca" al lienzo oscuro */
  filter:grayscale(.55) brightness(.62) contrast(1.08);
  transform:scale(1.04); transition:transform 1.2s var(--ease), filter .5s var(--ease);
}
.service-card__visual--photo:hover .service-card__photo{
  transform:scale(1.1); filter:grayscale(.35) brightness(.72) contrast(1.08);
}
/* Baño de color de marca + fundido oscuro hacia los bordes del panel */
.service-card__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--card-acc) 60%, transparent) 0%, transparent 55%),
    linear-gradient(0deg, var(--surface) 3%, transparent 42%),
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--cian) 22%, transparent), transparent 60%);
  mix-blend-mode:screen; opacity:.9;
}
.service-card__visual--photo .service-card__ghost{ z-index:2; opacity:.9; mix-blend-mode:screen; color:#fff; }

.service-card__index{
  display:block; font-family:var(--f-head); font-weight:600; font-size:.8rem;
  letter-spacing:.18em; color:var(--card-acc); margin-bottom:14px;
}
.service-card__modality{ display:none; }
.service-card__title{
  font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.06; letter-spacing:-.03em;
}
.service-card__sub{ font-family:var(--f-head); font-weight:600; color:var(--card-acc);
  margin-top:10px; font-size:1.05rem; }
.service-card__desc{ margin-top:20px; color:var(--text-3); font-size:1.06rem; max-width:52ch; }
.service-card__points{ margin-top:24px; display:grid; gap:12px; }
.service-card__points li{ display:flex; align-items:center; gap:12px; font-weight:500; font-size:.98rem; color:var(--text-2); }
.service-card__points li::before{ content:""; flex:none; width:14px; height:1px; background:var(--card-acc); }
.service-card__foot{
  margin-top:32px; padding-top:26px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.service-card__price{ font-family:var(--f-head); font-weight:700; color:var(--text); font-size:1.4rem; white-space:nowrap; }
.service-card__cta{ font-family:var(--f-head); font-weight:600; font-size:.92rem; color:var(--card-acc);
  transition:transform .2s var(--ease); white-space:nowrap; }
.service-card__cta:hover{ transform:translateX(4px); }

@media (max-width:760px){
  .service-card{ grid-template-columns:1fr; gap:32px; }
  .service-card__visual{ order:1 !important; aspect-ratio:4/3; }
  .service-card__content{ order:2 !important; }
}

/* ---------------------------------------------- Pack Web + Marca */
/* El Pack usa su PROPIO acento (ámbar), no el cian del resto del sitio —
   así se distingue a simple vista como "la oferta especial" en vez de
   mezclarse con el resto de tarjetas. --card-acc lo heredan .spotlight
   y cualquier elemento hijo que lo use. */
.pack{
  --card-acc: var(--ambar);
  position:relative; overflow:hidden; margin-top:36px;
  display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:center;
  color:var(--text); border-radius:var(--radius); padding:clamp(30px,4vw,52px);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ambar) 13%, transparent), transparent 65%),
    var(--surface);
  border:1px solid color-mix(in srgb, var(--ambar) 38%, var(--rule-strong));
  box-shadow:0 30px 80px rgba(0,0,0,.35), 0 0 0 1px transparent;
  animation:packGlow 3.4s ease-in-out infinite;
}
@keyframes packGlow{
  0%, 100% { border-color:color-mix(in srgb, var(--ambar) 38%, var(--rule-strong)); }
  50% { border-color:color-mix(in srgb, var(--ambar) 70%, var(--rule-strong)); }
}
@media (prefers-reduced-motion: reduce){ .pack{ animation:none; } }
.pack__glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--ambar) 22%, transparent), transparent 60%); }
/* Antes era un pill redondeado (border-radius:99px) — la forma de badge
   mas generica/IA que existe. Ahora una pequena etiqueta en la esquina,
   con corte diagonal, como una cinta. */
.pack__badge{
  position:absolute; top:0; right:28px; z-index:2;
  font-family:var(--f-head); font-weight:700; font-size:.7rem; letter-spacing:.08em;
  background:var(--ambar); color:#2b1600; padding:8px 16px 7px;
  border-radius:0 0 8px 8px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.pack__main{ position:relative; z-index:1; }
.pack__label{ font-family:var(--f-head); font-weight:600; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ambar); margin-bottom:10px; }
.pack__title{ font-family:var(--f-head); font-weight:700; font-size:clamp(1.7rem,3.6vw,2.6rem);
  line-height:1.05; letter-spacing:-.03em; }
.pack__desc{ margin-top:14px; color:var(--text-3); max-width:54ch; }
.pack__list{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
.pack__list li{ display:flex; align-items:center; gap:11px; font-weight:500; font-size:.96rem;
  color:var(--text-2); }
.pack__list li::before{ content:""; flex:none; width:14px; height:1px; background:var(--ambar); }
.pack__side{
  position:relative; z-index:1; text-align:center; border-radius:var(--radius-sm);
  padding:32px 28px; background:
    radial-gradient(140% 100% at 50% 0%, color-mix(in srgb, var(--ambar) 18%, transparent), transparent 65%),
    rgba(255,255,255,.04);
  border:1px solid color-mix(in srgb, var(--ambar) 36%, var(--rule));
}
.pack__priceLabel{ display:block; font-family:var(--f-head); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); }
.pack__price{ display:block; font-family:var(--f-head); font-weight:800; font-size:2.1rem;
  letter-spacing:-.02em; color:var(--text); margin:8px 0 22px; }

/* CTA del Pack: más grande, con flecha y un brillo que pulsa suavemente
   para que el ojo vaya directo ahí — es la conversión que más nos importa.
   Ámbar propio, no el cian de .btn--primary: en esta tarjeta el botón
   debe leerse como "la oferta especial", no como un botón más del sitio. */
.pack__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:18px 22px; font-size:1.05rem; font-weight:700;
  border-radius:var(--radius-sm); position:relative;
  background:var(--ambar); color:#2b1600;
  animation:packPulse 2.6s ease-in-out infinite;
}
.pack__cta:hover{ background:#FFC24D; }
.pack__cta svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.4;
  transition:transform .25s var(--ease); }
.pack__cta:hover svg{ transform:translateX(4px); }
@keyframes packPulse{
  0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ambar) 55%, transparent); }
  50% { box-shadow:0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce){ .pack__cta{ animation:none; } }
.pack__micro{ margin-top:14px; font-size:.8rem; color:var(--text-3); }

/* ======================================================= PLANES DE REDES */
/* 3 tiers del servicio de Gestión de Redes Sociales. El plan destacado se
   diferencia por color + insignia + botón sólido — no solo por ser más
   alto, para no caer en el patrón de tarjeta de precios más genérico. */
.tiers{ margin-top:64px; padding-top:48px; border-top:1px solid var(--rule); }
.tiers__head{ max-width:640px; }
.tiers__title{
  font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.02em; margin-top:10px;
}
.tiers__note{ margin-top:12px; color:var(--text-3); font-size:.98rem; line-height:1.6; }
.tiers__grid{
  margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  align-items:stretch;
}
.tier{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--rule-strong);
  border-radius:var(--radius); padding:32px 28px;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.tier--destacado{
  border-color:color-mix(in srgb, var(--cian) 45%, var(--rule-strong));
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--cian) 12%, transparent), transparent 65%),
    var(--surface);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
@media (min-width:901px){ .tier--destacado{ transform:scale(1.035); } }
.tier__badge{
  position:absolute; top:0; right:24px;
  font-family:var(--f-head); font-weight:700; font-size:.66rem; letter-spacing:.08em;
  background:var(--cian); color:#031018; padding:7px 14px 6px;
  border-radius:0 0 7px 7px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.tier__nombre{
  font-family:var(--f-head); font-weight:700; font-size:1.25rem; color:var(--text);
  margin-top:6px;
}
.tier--destacado .tier__nombre{ margin-top:16px; }
.tier__resumen{ margin-top:6px; color:var(--text-3); font-size:.9rem; line-height:1.5; min-height:2.7em; }
.tier__precio{ display:flex; align-items:baseline; gap:6px; margin-top:18px; }
.tier__num{ font-family:var(--f-head); font-weight:800; font-size:2.3rem; letter-spacing:-.02em; color:var(--text); }
.tier__num::before{ content:"€"; font-size:1.1rem; font-weight:700; margin-right:2px; color:var(--text-3); }
.tier__mod{ font-size:.82rem; color:var(--text-3); }
.tier__list{ margin-top:22px; display:flex; flex-direction:column; gap:11px; flex:1; }
.tier__list li{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text-2); }
.tier__list li::before{ content:""; flex:none; width:12px; height:1px; background:var(--rule-strong); }
.tier--destacado .tier__list li::before{ background:var(--cian); }
.tier__cta{ margin-top:26px; width:100%; text-align:center; justify-content:center; }

@media (max-width:900px){
  .tiers__grid{ grid-template-columns:1fr; }
  .tier--destacado{ transform:none; }
}

/* =============================================================== PROCESO */
/* Línea de tiempo conectada, sin tarjetas: los nodos se prenden al hacer scroll */
.process{ background:var(--bg-soft); }
.process__timeline{ position:relative; margin-top:64px; }
.process__track{
  position:absolute; top:23px; left:0; right:0; height:1px; background:var(--rule);
  display:none;
}
.process__track-fill{
  display:block; height:100%; width:100%; background:var(--cian);
  transform-origin:left; transform:scaleX(0);
}
.process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 26px; position:relative; }
.process-step{ position:relative; padding-top:62px; }
.process-step:nth-child(1){ --step:#00C2FF; }
.process-step:nth-child(2){ --step:#10B981; }
.process-step:nth-child(3){ --step:#7C7FF2; }
.process-step:nth-child(4){ --step:#F5A623; }
.process-step__icon{
  position:absolute; top:0; left:0; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--step); z-index:1;
}
.process-step__icon svg{ width:20px; height:20px; stroke:var(--step); fill:none; stroke-width:2; }
.process-step__phase{ font-family:var(--f-head); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--step); }
.process-step__title{ font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:1.24rem; margin:8px 0 10px; }
.process-step__desc{ color:var(--text-3); font-size:.94rem; }
.process-step__num{ display:none; }

@media (min-width:761px){
  .process__track{ display:block; }
}

/* ============================================================ PORTFOLIO */
/* Proyectos de muestra, cada uno dentro de un marco de navegador (mismo
   lenguaje visual que la demo de "¿Por qué?"), para que el visitante piense
   "quiero una web así". */
.portfolio{ background:var(--bg-soft); }
.portfolio__note{ margin-top:16px; color:var(--text-3); font-size:1.05rem; max-width:56ch; }
/* Filas alternadas (izquierda/derecha), no una cuadrícula simétrica —
   misma técnica de zig-zag que .service-card, y junto al mockup ahora
   hay una descripción de qué formato de web es cada proyecto. */
.portfolio__grid{ margin-top:24px; display:flex; flex-direction:column; }
.portfolio-card{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,5vw,64px);
  align-items:center; padding:clamp(40px,6vw,68px) 0; border-top:1px solid var(--rule);
}
.portfolio__grid .portfolio-card:last-child{ border-bottom:1px solid var(--rule); }
.portfolio-card__frames{ position:relative; order:1; }
.portfolio-card--web .portfolio-card__frames{ padding-bottom:36px; }
.portfolio-card__info{ order:2; }
.portfolio-card:nth-child(even) .portfolio-card__frames{ order:2; }
.portfolio-card:nth-child(even) .portfolio-card__info{ order:1; }
.portfolio-card__browser{
  position:relative; border-radius:12px; overflow:hidden;
  background:#0f1524; border:1px solid var(--rule-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.portfolio-card:hover .portfolio-card__browser{
  transform:translateY(-6px);
  box-shadow:0 34px 80px rgba(0,0,0,.5);
  border-color:color-mix(in srgb, var(--card-acc) 45%, var(--rule-strong));
}

/* Marco de móvil, superpuesto en la esquina inferior derecha del navegador
   (misma idea que un mockup desktop + mobile juntos). Reutiliza el mismo
   mini-site en miniatura, escalado, en vez de duplicar contenido real. */
.portfolio-card__phone{
  position:absolute; right:-4%; bottom:-11%; z-index:2;
  width:clamp(92px, 21%, 128px); aspect-ratio:9/18.5;
  background:#0b0f18; border:2px solid rgba(255,255,255,.16); border-radius:20px;
  padding:7px 5px; box-shadow:0 22px 50px rgba(0,0,0,.55);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.portfolio-card:hover .portfolio-card__phone{
  transform:translateY(-4px);
  box-shadow:0 30px 64px rgba(0,0,0,.6);
  border-color:color-mix(in srgb, var(--card-acc) 45%, rgba(255,255,255,.16));
}
.portfolio-card__notch{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; border-radius:99px; background:rgba(255,255,255,.14); z-index:1;
}
.portfolio-card__phoneshot{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:13px; background:var(--surface);
}
/* zoom (no transform:scale) a propósito: transform no afecta al tamaño de
   layout, así que el scroll (scrollTop/scrollHeight) del marco quedaba
   descuadrado con lo que se veía en pantalla y el contenido se salía del
   marco al desplazarse. zoom sí redimensiona el layout real: el scroll
   queda coherente con lo que se ve. */
/* Ancho 400px (no 360) + zoom .3 (no .3333): con más margen interno el
   texto del titular deja de partirse a media palabra en el clon del
   móvil (zoom con fracciones periódicas como .3333 redondea el ancho
   disponible y corta texto que en la versión de escritorio cabe bien).
   400*.3 = 120px visibles, el mismo tamaño final que antes (360*.3333). */
.portfolio-card__phonescale{ width:400px; zoom:.3; }
/* El titular del hero, a 1.5rem, se corta a media palabra dentro del
   clon del móvil (zoom + ancho reducido calculan mal el ajuste de
   línea). Con la fuente más pequeña aquí, el texto tiene margen de
   sobra para ajustarse bien sin depender de ese cálculo justo. */
.portfolio-card__phonescale .pfs__herotext h3{ font-size:1.15rem; line-height:1.15; }
.portfolio-card__bar{
  display:flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  background:#161d30; border-bottom:1px solid var(--rule);
}
.portfolio-card__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); }
.portfolio-card__url{
  margin-left:10px; flex:1; height:16px; border-radius:8px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; padding:0 9px; font-family:var(--f-body);
  font-size:.6rem; color:var(--text-4); letter-spacing:.02em;
}
.portfolio-card__shot{
  position:relative; aspect-ratio:16/10.5; overflow:hidden; background:var(--surface);
}
/* Dentro del marco vive una web de ejemplo (mini-site) que se desplaza sola */
.portfolio-card__shot .pfs{ display:block; width:100%; }
.portfolio-card__info{ display:block; }
.portfolio-card__tag{
  display:block; font-family:var(--f-head); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--card-acc);
}
.portfolio-card__title{
  font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; margin-top:10px;
}
.portfolio-card__desc{
  margin-top:16px; color:var(--text-3); font-size:1rem; line-height:1.6; max-width:48ch;
}
.portfolio-card__tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.portfolio-card__tagpill{
  font-family:var(--f-head); font-weight:600; font-size:.72rem; letter-spacing:.04em;
  color:var(--text-2); border:1px solid var(--rule-strong); border-radius:7px;
  padding:6px 12px;
}

/* ============================================================ MINI-SITES
   Webs de ejemplo (inventadas) que se muestran dentro del marco de navegador
   del portfolio. Todo el color se controla con variables, así cada tarjeta
   tiene su propia identidad. Se desplazan solas (js: initPortfolioScroll). */
.pfs{
  --pfs-bg:#fbf7f2; --pfs-ink:#241f1b; --pfs-mut:#7d7268; --pfs-acc:#c2603a;
  --pfs-acc-ink:#fff; --pfs-card:#fff; --pfs-line:#ece3d8;
  background:var(--pfs-bg); color:var(--pfs-ink); font-family:var(--f-body);
  font-size:14px; line-height:1.4;
}
.pfs__nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--pfs-line);
}
.pfs__logo{ font-family:var(--f-head); font-weight:700; font-size:1.05rem; color:var(--pfs-acc); letter-spacing:-.01em; }
.pfs__links{ display:flex; gap:8px; }
.pfs__links i{ display:block; width:26px; height:6px; border-radius:3px; background:var(--pfs-line); }
.pfs__hero{ position:relative; height:200px; overflow:hidden; display:flex; align-items:center; }
.pfs__heroimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pfs__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,8,6,.74), rgba(10,8,6,.18)); }
.pfs__herotext{ position:relative; z-index:1; padding:0 22px; color:#fff; }
.pfs__eyebrow{ font-family:var(--f-head); font-weight:600; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:.86; }
.pfs__herotext h3{ font-family:var(--f-head); font-weight:700; font-size:1.5rem; line-height:1.08; margin:8px 0 14px; color:#fff; }
.pfs__btn{
  display:inline-block; background:var(--pfs-acc); color:var(--pfs-acc-ink);
  font-family:var(--f-head); font-weight:600; font-size:.78rem; padding:9px 16px; border-radius:999px;
}
.pfs__btn--big{ font-size:.92rem; padding:12px 22px; }
.pfs__block{ padding:26px 22px 6px; }
.pfs__blocktitle{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pfs__blocktitle b{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; color:var(--pfs-ink); }
.pfs__blocktitle i{ flex:1; height:1px; background:var(--pfs-line); }
.pfs__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pfs__card{ border-radius:12px; overflow:hidden; background:var(--pfs-card); border:1px solid var(--pfs-line); }
.pfs__card img{ width:100%; height:82px; object-fit:cover; display:block; }
.pfs__card figcaption{ padding:9px 10px; font-size:.72rem; display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--pfs-mut); }
.pfs__card figcaption b{ color:var(--pfs-acc); font-family:var(--f-head); white-space:nowrap; }
/* Tarjeta de servicio (sin foto): para la agencia */
.pfs__scard{ padding:16px 14px; border-radius:12px; background:var(--pfs-card); border:1px solid var(--pfs-line); }
.pfs__scard span{ display:block; width:26px; height:26px; border-radius:8px; background:var(--pfs-acc); margin-bottom:12px; }
.pfs__scard b{ display:block; font-family:var(--f-head); font-weight:700; font-size:.92rem; color:var(--pfs-ink); }
.pfs__scard i{ display:block; font-style:normal; font-size:.72rem; color:var(--pfs-mut); margin-top:4px; }
.pfs__band{ margin-top:24px; padding:26px 24px; background:var(--pfs-acc); text-align:center; }
.pfs__quote{ color:var(--pfs-acc-ink); font-family:var(--f-head); font-weight:600; font-size:1.02rem; }
.pfs__cta{ text-align:center; padding:32px 22px; background:var(--pfs-card); }
.pfs__cta h4{ font-family:var(--f-head); font-weight:700; font-size:1.3rem; color:var(--pfs-ink); margin-bottom:16px; }
.pfs__foot{ text-align:center; padding:18px; font-size:.68rem; color:var(--pfs-mut); background:var(--pfs-bg); border-top:1px solid var(--pfs-line); }

/* ---------------------------------------- Mockup de redes (Instagram) */
/* Un único móvil, más grande que el de los ejemplos de web (que va
   superpuesto). Se desplaza solo al pasar el ratón, igual que los demás
   (initPortfolioScroll detecta .portfolio-card__shot dentro). */
.social-mock{
  position:relative; width:min(300px,78%); margin:0 auto;
  aspect-ratio:9/18.5; background:#0b0f18; border:2px solid rgba(255,255,255,.14);
  border-radius:34px; padding:12px 9px; box-shadow:0 30px 70px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.portfolio-card:hover .social-mock{
  transform:translateY(-6px); box-shadow:0 40px 90px rgba(0,0,0,.55);
  border-color:color-mix(in srgb, var(--card-acc) 45%, rgba(255,255,255,.14));
}
.social-mock__notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:30%; height:7px; border-radius:99px; background:rgba(255,255,255,.16); z-index:2;
}
.social-mock__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:24px; background:#fff; aspect-ratio:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Barra de estado (hora + iconos), imitando la parte superior del móvil */
.social-mock__status{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 18px 2px; font-size:.72rem; font-weight:600; color:#0a0a0a;
}
.social-mock__statusicons{ display:flex; align-items:center; gap:4px; }
.social-mock__statusicons svg{ display:block; height:9px; color:#0a0a0a; }
.social-mock__statusicons svg:first-child{ height:8px; }

/* Cabecera: volver / usuario / menú */
.social-mock__header{
  display:flex; align-items:center; gap:10px; padding:6px 14px 10px;
  border-bottom:1px solid #efefef;
}
.social-mock__back svg, .social-mock__headermenu svg{ display:block; width:19px; height:19px; color:#14181f; }
.social-mock__headeruser{
  flex:1; font-weight:700; font-size:.86rem; color:#14181f; letter-spacing:-.01em;
}

.social-mock__profile{ padding:16px 16px 6px; background:#fff; }
.social-mock__top{ display:flex; align-items:center; gap:18px; }
.social-mock__ring{
  flex:none; width:66px; height:66px; border-radius:50%; padding:2.5px;
  display:flex; align-items:center; justify-content:center;
}
.social-mock__avatar{
  width:100%; height:100%; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--card-acc); color:#fff; box-shadow:inset 0 0 0 2.5px #fff;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
}
.social-mock__stats{ flex:1; display:flex; justify-content:space-around; gap:6px; }
.social-mock__stats div{ text-align:center; }
.social-mock__stats b{ display:block; font-family:var(--f-head); font-weight:700; font-size:.88rem; color:#14181f; }
.social-mock__stats i{ font-style:normal; font-size:.6rem; color:#8a93a0; }
.social-mock__name{ margin-top:11px; font-family:var(--f-head); font-weight:700; font-size:.82rem; color:#14181f; }
.social-mock__bio{ margin-top:2px; font-size:.72rem; line-height:1.4; color:#5a6472; }

.social-mock__actions{ display:flex; gap:6px; margin-top:12px; }
.social-mock__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  height:28px; border-radius:7px; background:#efefef; color:#14181f;
  font-family:var(--f-head); font-weight:600; font-size:.68rem;
}
.social-mock__btn svg{ width:12px; height:12px; }
.social-mock__btn--follow{ color:#fff; flex:1.3; }
.social-mock__iconbtn{
  width:28px; height:28px; flex:none; border-radius:7px; background:#efefef;
  display:flex; align-items:center; justify-content:center;
}
.social-mock__iconbtn svg{ width:14px; height:14px; color:#14181f; }

/* Ancho en % (no px fijos) + space-between: los 4 destacados siempre
   caben en el ancho del móvil, sea cual sea su tamaño — antes el último
   círculo se cortaba en los mockups más estrechos. */
.social-mock__hls{ display:flex; justify-content:space-between; margin-top:16px; }
.social-mock__hl{ flex:none; display:flex; flex-direction:column; align-items:center; gap:5px; width:22%; }
.social-mock__hl span{ display:block; width:100%; aspect-ratio:1/1; border-radius:50%; border:1px solid #e3e3e3; }
.social-mock__hl i{ font-style:normal; font-size:.58rem; color:#14181f; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:100%; }

.social-mock__tabs{
  display:flex; margin-top:14px; border-top:1px solid #efefef;
}
.social-mock__tabs span{
  flex:1; display:flex; align-items:center; justify-content:center; height:38px;
  color:#b8bcc4; border-top:1px solid transparent; margin-top:-1px;
}
.social-mock__tabs span svg{ width:19px; height:19px; }
.social-mock__tabs span.is-active{ color:#14181f; border-top-color:#14181f; }

.social-mock__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.social-mock__post{ position:relative; aspect-ratio:1/1; background:var(--surface); overflow:hidden; }
.social-mock__post img{ width:100%; height:100%; object-fit:cover; display:block; }
.social-mock__post.is-fallback{ background:color-mix(in srgb, var(--card-acc) 30%, var(--surface)); }
.social-mock__reel{
  position:absolute; top:6px; right:6px; color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.social-mock__reel svg{ display:block; }
.social-mock__credit{
  text-align:center; padding:12px; font-family:var(--f-head); font-weight:600;
  font-size:.62rem; letter-spacing:.03em; color:var(--card-acc); background:#fff;
}

/* --------------------------------------- Mockup de branding (tablero) */
/* Pieza estática (sin marco de navegador/móvil, no hay nada que
   desplazar): estructura de manual de identidad real, con secciones
   etiquetadas (Logotipo / Paleta / Tipografía / Aplicación), no solo
   texto suelto. */
.brand-mock{
  position:relative; border-radius:var(--radius);
  padding:clamp(26px,3.6vw,38px); overflow:hidden;
  background:color-mix(in srgb, var(--card-acc) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--card-acc) 24%, transparent);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.portfolio-card:hover .brand-mock{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--card-acc) 45%, transparent);
}
.brand-mock__head{ display:flex; align-items:center; justify-content:space-between; }
.brand-mock__eyebrow{
  font-family:var(--f-head); font-weight:700; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--card-acc);
}
.brand-mock__index{ font-family:var(--f-head); font-weight:700; font-size:.7rem; color:var(--text-4); }

.brand-mock__sec{ margin-top:24px; padding-top:20px; border-top:1px solid color-mix(in srgb, var(--card-acc) 16%, var(--rule)); }
.brand-mock__sec--logo{ margin-top:20px; padding-top:0; border-top:none; }
.brand-mock__seclabel{
  display:block; font-family:var(--f-head); font-weight:600; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px;
}

.brand-mock__lockup{ display:flex; align-items:center; gap:16px; }
.brand-mock__mark{
  flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-family:var(--f-head); font-weight:800; font-size:1.4rem;
}
.brand-mock__mark svg, .brand-mock__icon svg{ width:60%; height:60%; display:block; }
.brand-mock__wordwrap{ display:flex; flex-direction:column; }
.brand-mock__word{
  font-family:var(--f-head); font-weight:800; font-size:clamp(1.7rem,3.6vw,2.3rem);
  letter-spacing:-.03em; line-height:1;
}
.brand-mock__tagline{ margin-top:5px; font-size:.86rem; color:var(--text-3); }

.brand-mock__palette{ display:flex; gap:10px; }
.brand-mock__swatch{
  flex:1; aspect-ratio:1/1; border-radius:10px; display:flex; align-items:flex-end;
  padding:8px; max-width:76px;
}
.brand-mock__swatch i{
  font-style:normal; font-size:.56rem; line-height:1.3; color:inherit; opacity:.92;
}
.brand-mock__swatch i b{ display:block; font-weight:700; font-family:var(--f-head); }

.brand-mock__type{ display:flex; align-items:center; gap:16px; }
.brand-mock__aa{ font-family:var(--f-head); font-weight:700; font-size:2.6rem; color:var(--text); line-height:1; }
.brand-mock__typeinfo{ display:flex; flex-direction:column; gap:4px; }
.brand-mock__fontname{ font-family:var(--f-head); font-weight:600; font-size:.82rem; color:var(--text); }
.brand-mock__specimen{ font-size:.78rem; color:var(--text-3); letter-spacing:.02em; }

.brand-mock__apps{ display:flex; align-items:flex-end; gap:14px; }
.brand-mock__card{
  background:var(--card-acc); border-radius:10px; padding:16px 18px;
  display:flex; flex-direction:column; width:min(210px,64%);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}
.brand-mock__cardword{ font-family:var(--f-head); font-weight:800; font-size:1.05rem; color:#0b0f18; }
.brand-mock__cardtag{ font-size:.68rem; color:rgba(11,15,24,.7); margin-top:2px; }
.brand-mock__icon{
  flex:none; width:52px; height:52px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; font-family:var(--f-head); font-weight:800; font-size:1.3rem;
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}

@media (max-width:760px){
  .portfolio-card{ grid-template-columns:1fr; gap:28px; padding:36px 0; }
  .portfolio-card__frames, .portfolio-card:nth-child(even) .portfolio-card__frames{ order:1; }
  .portfolio-card__info, .portfolio-card:nth-child(even) .portfolio-card__info{ order:2; }
}

/* ==================================================================== FAQ */
.faq__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.faq__lead{ margin-top:16px; color:var(--text-3); max-width:40ch; }
.faq__cta{ margin-top:26px; }
.faq__list{ display:grid; border-top:1px solid var(--rule); }
.faq-item{ border-bottom:1px solid var(--rule); transition:background-color .25s var(--ease); }
.faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  text-align:left; padding:24px 4px; font-family:var(--f-head); font-weight:600; color:var(--text);
  font-size:1.04rem; line-height:1.3; }
.faq-item__icon{ flex:none; width:22px; height:22px; position:relative; }
.faq-item__icon::before, .faq-item__icon::after{ content:""; position:absolute; top:50%; left:50%;
  width:14px; height:1px; background:var(--text-2); border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .3s var(--ease); }
.faq-item__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after{ background:var(--cian); }
.faq-item.is-open .faq-item__icon::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-item__a-inner{ padding:0 30px 24px 4px; color:var(--text-3); font-size:.98rem; }

/* =============================================================== CONTACTO */
.contact__grid{ position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr;
  gap:60px; align-items:start; }
.contact__lead{ margin-top:18px; color:var(--text-3); max-width:42ch; }
.contact__info{ margin-top:30px; display:grid; gap:18px; }
.contact__info li{ display:flex; gap:14px; align-items:flex-start; }
.contact__info .ci-ic{ flex:none; width:42px; height:42px; border-radius:var(--radius-sm);
  background:rgba(0,194,255,.08); border:1px solid var(--rule); display:grid; place-items:center; }
.contact__info .ci-ic svg{ width:20px; height:20px; stroke:var(--cian); fill:none; stroke-width:1.5; }
.contact__info .ci-k{ font-family:var(--f-head); font-weight:600; color:var(--text); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; }
.contact__info .ci-v{ color:var(--text-3); }
.contact__info a.ci-v:hover{ color:var(--cian); }

.contact__form{ background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--radius);
  padding:clamp(24px,4vw,40px); display:grid; gap:22px; }
.field{ display:grid; gap:8px; position:relative; }
.field__num{ font-family:var(--f-head); font-weight:700; font-size:.74rem; color:var(--cian);
  letter-spacing:.08em; }
.field__label{ font-family:var(--f-head); font-weight:600; color:var(--text); font-size:.96rem; }
.field input, .field select, .field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--text);
  padding:13px 16px; border:1px solid var(--rule); border-radius:var(--radius-sm);
  background:var(--bg-soft); transition:border-color .25s var(--ease);
  width:100%; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cian); }
.field input:invalid:not(:placeholder-shown){ border-color:#e0573e; }
.contact__note{ font-size:.9rem; color:var(--text-2); min-height:1em; font-weight:500; }
.contact__note.is-ok{ color:var(--verde); }

/* Tarjeta de contacto (WhatsApp-first, sin formulario) */
.contact__card{
  position:relative; overflow:hidden; background:var(--surface); color:var(--text);
  border:1px solid var(--rule-strong); border-radius:var(--radius); padding:clamp(28px,4vw,44px);
}
.contact__card-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%, rgba(0,194,255,.16), transparent 60%); }
.contact__card > *{ position:relative; z-index:1; }
.contact__card-eyebrow{ font-family:var(--f-head); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cian); margin-bottom:12px; }
.contact__card-title{ font-family:var(--f-head); font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem);
  line-height:1.15; letter-spacing:-.02em; }
.contact__card-text{ margin-top:14px; color:var(--text-3); max-width:44ch; }
.contact__actions{ margin-top:28px; display:grid; gap:14px; }
.contact__actions-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact__card .btn--ghost{ color:var(--text); border-color:var(--rule-strong); }
.contact__card .btn--ghost:hover{ border-color:var(--cian); color:var(--cian); }
.contact__reassure{ margin-top:22px; font-size:.86rem; color:var(--text-4);
  font-family:var(--f-head); font-weight:500; }

/* ================================================================ FOOTER */
.footer{ position:relative; background:var(--bg-soft); color:var(--text); padding:80px 0 30px;
  overflow:hidden; margin-top:0; border-top:1px solid var(--rule); }
.footer__bgword{ position:absolute; left:50%; bottom:-.18em; transform:translateX(-50%);
  font-family:var(--f-head); font-weight:700; font-size:clamp(5rem,20vw,18rem); line-height:1;
  color:var(--text); opacity:.035; white-space:nowrap; pointer-events:none; user-select:none; }
.footer__inner{ position:relative; z-index:1; display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer__logo{ height:44px; width:auto; margin-bottom:18px; }
.footer__slogan{ color:var(--text-3); max-width:30ch; }
.footer__title{ font-family:var(--f-head); font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--cian); margin-bottom:18px; }
.footer__link{ display:block; color:var(--text-3); padding:5px 0; transition:color .2s; }
.footer__link:hover{ color:var(--text); }
.footer__bottom{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between; margin-top:54px; padding-top:24px;
  border-top:1px solid var(--rule); font-size:.86rem; color:var(--text-4); }
.footer__top{ font-family:var(--f-head); font-weight:600; color:var(--text);
  border:1px solid var(--rule-strong); padding:8px 18px; border-radius:99px;
  transition:background-color .25s, border-color .25s, color .25s; }
.footer__top:hover{ background:var(--cian); border-color:var(--cian); color:#031018; }

/* =================================================== REVEAL (defensivo) */
/* Por defecto TODO es visible. El JS sólo oculta y anima si GSAP cargó. */
.reveal{ opacity:1; transform:none; }
.gsap-ready .reveal{ opacity:0; }
.gsap-ready .hero__title .word{ opacity:0; filter:blur(6px); transform:translateY(16px); }

/* =============================================== MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .gsap-ready .reveal{ opacity:1 !important; transform:none !important; }
  .service-card__svg .draw{ stroke-dashoffset:0 !important; }
  .service-card__svg .dot{ opacity:1 !important; }
}

/* ==================================================== RESPONSIVE */
@media (max-width:980px){
  .valor__grid{ grid-template-columns:1fr; gap:48px; }
  .valor__media{ max-width:420px; margin:0 auto; }
  .process__grid{ grid-template-columns:repeat(2,1fr); }
  .process__track{ display:none; }
  .contact__grid{ grid-template-columns:1fr; gap:42px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:32px; }
  .pack{ grid-template-columns:1fr; gap:28px; }
  .pack__list{ grid-template-columns:1fr; }
  .faq__inner{ grid-template-columns:1fr; gap:34px; }
  .why__grid{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw); height:100vh;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:24px;
    background:var(--bg-soft); padding:0 36px; border-left:1px solid var(--rule);
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:480;
  }
  .nav.is-open{ transform:none; }
  .nav__link{ font-size:1.3rem; }
  .nav__cta{ font-size:1.05rem; padding:13px 26px; }
  .nav__toggle{ display:flex; z-index:490; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__col--brand{ grid-column:1 / -1; }
  .footer__bottom{ justify-content:flex-start; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat + .stat{ border-left:none; }
  .stat:nth-child(odd){ border-right:1px solid var(--rule); }
  .stat{ border-top:1px solid var(--rule); }
}

@media (max-width:520px){
  .container{ padding:0 20px; }
  .hero__line--offset{ transform:none; }
  .hero__mark{ width:80vw; right:-24%; }
  .process__grid{ grid-template-columns:1fr; gap:34px; }
  .footer__inner{ grid-template-columns:1fr; }
}

/* ===================================================== PÁGINAS LEGALES */
.legal-body{ background:var(--bg); color:var(--text-2); }
.legal-head{ display:flex; align-items:center; justify-content:space-between;
  max-width:820px; margin:0 auto; padding:24px 28px; }
.legal-head img{ height:40px; width:auto; }
.legal-back{ font-family:var(--f-head); font-weight:600; font-size:.9rem; color:var(--text-2); }
.legal-back:hover{ color:var(--cian); }
.legal{ max-width:820px; margin:0 auto; padding:10px 28px 70px; }
.legal__updated{ font-size:.82rem; color:var(--text-4); margin-bottom:10px; }
.legal h1{ font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:clamp(2rem,5vw,2.8rem); letter-spacing:-.03em; line-height:1.05; margin-bottom:6px; }
.legal h2{ font-family:var(--f-head); font-weight:700; color:var(--text);
  font-size:1.22rem; margin:34px 0 10px; letter-spacing:-.01em; }
.legal p{ margin:12px 0; line-height:1.75; color:var(--text-2); }
.legal ul{ margin:12px 0; display:grid; gap:8px; }
.legal li{ display:flex; gap:11px; line-height:1.6; color:var(--text-2); }
.legal li::before{ content:""; flex:none; width:14px; height:1px; background:var(--cian); margin-top:13px; }
.legal a{ color:var(--cian); }
.legal a:hover{ text-decoration:underline; }
.legal strong{ color:var(--text); }
/* Marcadores en color: lo que debes rellenar con tus datos reales */
.legal__fill{ color:var(--cian); font-weight:600; }
.legal-foot{ border-top:1px solid var(--rule); max-width:820px; margin:0 auto;
  padding:22px 28px 44px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  font-size:.84rem; color:var(--text-4); }
.legal-foot a{ color:var(--text-3); font-family:var(--f-head); font-weight:600; }
.legal-foot a:hover{ color:var(--cian); }
.legal-foot .legal-foot__sp{ flex:1; }