/* ==========================================================================
   Gimar Studio — hoja de estilos única
   Paleta de marca en :root. Cambiar ahí = cambia toda la web.
   ========================================================================== */

:root {
  /* --- Marca --- */
  --bg:            #071426;
  --bg-2:          #0B192D;
  --card:          #0D1D33;
  --blue:          #2F80ED;
  --blue-light:    #69B7FF;
  --purple:        #8B5CF6;
  --text:          #F5F8FC;
  --text-2:        #A8B6C8;
  --border:        #18304D;

  /* --- Derivados --- */
  --border-soft:   rgba(24, 48, 77, .7);
  --glass:         rgba(13, 29, 51, .58);
  --blue-05:       rgba(47, 128, 237, .05);
  --blue-10:       rgba(47, 128, 237, .10);
  --blue-18:       rgba(47, 128, 237, .18);
  --blue-30:       rgba(47, 128, 237, .30);

  /* --- Tipografía --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, "Segoe UI", sans-serif;

  /* --- Ritmo --- */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(88px, 11vw, 168px);

  /* --- Radios --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* --- Curvas --- */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r-sm);
}
.skip-link:focus { left: 16px; }

/* --------------------------------------------------------------- layout -- */

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

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-top: clamp(24px, 4vw, 56px); }

/* ------------------------------------------------------- fondo global --- */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(47, 128, 237, .10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(105, 183, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(105, 183, 255, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 25%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 60% at 50% 25%, #000 10%, transparent 75%);
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .55;
}
.bg-glow--a {
  width: 60vw; height: 60vw;
  max-width: 820px; max-height: 820px;
  top: -24vw; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(47, 128, 237, .40) 0%, transparent 68%);
}
.bg-glow--b {
  width: 42vw; height: 42vw;
  max-width: 620px; max-height: 620px;
  top: 8vw; right: -14vw;
  background: radial-gradient(circle, rgba(139, 92, 246, .20) 0%, transparent 70%);
}

/* ------------------------------------------------------------ tipografía */

.h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}

.grad {
  background: linear-gradient(104deg, var(--blue-light) 0%, var(--blue) 52%, #9B7BF5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 18px;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--text-2);
  max-width: 56ch;
}
.lead strong { color: var(--text); font-weight: 600; }

p { color: var(--text-2); }

.head {
  max-width: 720px;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.head__sub {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--text-2);
  max-width: 54ch;
}

/* marcador de contenido pendiente de rellenar */
.ph {
  color: var(--blue-light);
  background: var(--blue-10);
  border: 1px dashed rgba(105, 183, 255, .35);
  border-radius: 7px;
  padding: .06em .45em;
  font-size: .9em;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ----------------------------------------------------------- reveals ---- */
/* Solo se ocultan si el JS está vivo: sin JS, todo se ve. */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s var(--e-out),
    transform .75s var(--e-out);
  transition-delay: calc(var(--rd, 0) * 70ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ botones --- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform .35s var(--e-out),
    box-shadow .35s var(--e-out),
    background-color .3s var(--e-soft),
    border-color .3s var(--e-soft);
}
.btn--sm  { padding: 10px 19px; font-size: .86rem; }
.btn--lg  { padding: 16px 30px; font-size: .98rem; }
.btn--full { width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--blue-light) -20%, var(--blue) 55%, #2563D8 115%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 8px 24px -10px rgba(47, 128, 237, .75);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .3) inset,
    0 14px 38px -12px rgba(47, 128, 237, .95),
    0 0 0 1px rgba(105, 183, 255, .35);
}

.btn--ghost {
  background: rgba(255, 255, 255, .025);
  border-color: var(--border);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(105, 183, 255, .5);
  background: var(--blue-10);
  box-shadow: 0 10px 32px -16px rgba(47, 128, 237, .8);
}

.btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------- nav --- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s var(--e-soft), border-color .4s var(--e-soft), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7, 20, 38, .82);
  border-bottom-color: var(--border-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding .4s var(--e-soft);
}
.nav.is-stuck .nav__inner { padding-block: 11px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--blue-light), var(--blue) 60%, #6D4BE0);
  color: #fff;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: 0 6px 20px -8px rgba(47, 128, 237, .9), 0 0 0 1px rgba(255, 255, 255, .1) inset;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
}
/* «Studio» en azul: es el acento de la marca */
.brand__accent { color: var(--blue-light); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav__link {
  position: relative;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color .3s var(--e-soft), background-color .3s var(--e-soft);
}
.nav__link:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--blue-light);
  box-shadow: 0 0 10px 2px rgba(105, 183, 255, .8);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--e-out), opacity .25s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* --------------------------------------------------------- menú móvil --- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 96px var(--gutter) 40px;
  background: rgba(7, 20, 38, .96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .38s var(--e-soft), visibility .38s;
}
.drawer.is-open { opacity: 1; visibility: visible; }

.drawer__links { display: flex; flex-direction: column; }
.drawer__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.drawer__links a span {
  font-family: var(--font);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--blue-light);
}
.drawer__cta { margin-top: 28px; }
.drawer__foot {
  margin-top: 18px;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding-top: clamp(120px, 16vh, 180px);
  padding-bottom: clamp(70px, 10vh, 120px);
  overflow: hidden;
}

.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .8;
  pointer-events: none;
}

.hero__beam {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 1px;
  height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(105, 183, 255, .55), transparent);
  pointer-events: none;
}

.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 17px 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .775rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  box-shadow: 0 0 0 1px rgba(105, 183, 255, .06), 0 10px 40px -20px rgba(47, 128, 237, .8);
}
.chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-light);
  box-shadow: 0 0 10px 2px rgba(105, 183, 255, .9);
  animation: pulse 3.4s var(--e-soft) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .5; transform: scale(.78); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.2vw, 5.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 30px 0 0;
}

.hero__sub {
  margin-top: 26px;
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.65vw, 1.19rem);
  color: var(--text-2);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.hero__trust {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--text-2);
}
.pin {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-10);
}

/* ------------------------------------------------------------- tarjetas - */

.grid { display: grid; gap: clamp(16px, 1.8vw, 22px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Los planes web son más anchos: no deben ocupar toda la pantalla. */
.grid--2 { max-width: 880px; margin-inline: auto; }

/* Un único plan: centrado y con ancho contenido, para que no quede
   un cartel gigante ni una tarjeta perdida a un lado. */
.plans--solo {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin-inline: auto;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 45%),
    var(--card);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .5s var(--e-out),
    border-color .45s var(--e-soft),
    box-shadow .5s var(--e-out);
}

/* foco luminoso que sigue al puntero */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s var(--e-soft);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(47, 128, 237, .18),
    rgba(139, 92, 246, .06) 38%,
    transparent 68%
  );
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(105, 183, 255, .34);
  box-shadow:
    0 26px 60px -30px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(105, 183, 255, .07);
}
.card:hover::before { opacity: 1; }

.card__num {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--blue-light);
  opacity: .75;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 22px 0 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(150deg, var(--blue-10), rgba(139, 92, 246, .05));
  color: var(--blue-light);
  transition: color .4s, border-color .4s, box-shadow .4s, transform .5s var(--e-out);
}
.card__icon svg { width: 22px; height: 22px; }
.card__icon--sm { width: 40px; height: 40px; margin: 0 0 18px; }
.card__icon--sm svg { width: 19px; height: 19px; }

.card:hover .card__icon {
  color: #fff;
  border-color: rgba(105, 183, 255, .45);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(47, 128, 237, .9);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.card__text {
  font-size: .945rem;
  color: var(--text-2);
  text-wrap: pretty;
}

.card--svc { padding-bottom: 62px; }
.card__arrow {
  position: absolute;
  left: clamp(24px, 2.4vw, 32px);
  bottom: clamp(22px, 2.2vw, 28px);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-2);
  transition: transform .45s var(--e-out), color .35s, border-color .35s, background-color .35s;
}
.card__arrow svg { width: 15px; height: 15px; }
.card--svc:hover .card__arrow {
  transform: translateX(5px);
  color: #fff;
  border-color: transparent;
  background: var(--blue);
  box-shadow: 0 6px 20px -8px rgba(47, 128, 237, 1);
}

/* ------------------------------------------------- nosotros: el escenario -
   Ellos dos, recortados sobre el fondo, con el nombre de la marca detrás y
   un foco de luz. La foto no lleva marco ni recuadro: están de pie sobre la
   propia página. Los pies se desvanecen para que no haya un corte seco.    */

.section--stage { padding-bottom: clamp(64px, 8vw, 120px); }

.h2--stage { max-width: 18ch; }

.stage {
  position: relative;
  width: 100%;
  max-width: 1340px;
  margin: clamp(26px, 4vw, 52px) auto clamp(34px, 5vw, 64px);
  /* La altura decide lo grandes que se ven: es el único número a tocar */
  height: clamp(400px, 54vw, 660px);
  isolation: isolate;
}

/* Foco de luz detrás de ellos */
.stage__glow {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 0;
  width: min(78%, 840px);
  aspect-ratio: 1.35;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(105, 183, 255, .26) 0%,
    rgba(47, 128, 237, .13) 36%,
    rgba(139, 92, 246, .05) 58%,
    transparent 72%
  );
  filter: blur(54px);
  pointer-events: none;
}

/* El nombre de la marca, detrás: ellos lo tapan por el centro */
.stage__word {
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-inline: clamp(10px, 3.5vw, 64px);
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  /* Grande a propósito: tiene que meterse por detrás de ellos para que se
     vea el efecto de capas. Si se queda corto, no parece que estén delante. */
  font-size: clamp(3.1rem, 13.5vw, 12.5rem);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.055em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.stage__word span {
  background: linear-gradient(175deg, #FFFFFF 0%, rgba(168, 182, 200, .42) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Los dos se meten hacia el centro para quedar por detrás de ellos.
   Sin esto, el nombre se queda al lado y se pierde el efecto de capas. */
.stage__word-a { transform: translateX(2.5vw); }
/* El segundo apellido cae un poco, como en un cartel */
.stage__word-b { transform: translateY(.34em); }

/* Ellos */
.stage__people {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Los pies se funden con el fondo */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .35) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .35) 94%, transparent 100%);
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55));
}

/* Si la foto no estuviera, el escenario sigue teniendo sentido */
.stage.is-empty { height: clamp(220px, 26vw, 320px); }

/* Micro-rótulos en los bordes */
.stage__side,
.stage__note {
  position: absolute;
  z-index: 3;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: .62;
  pointer-events: none;
}
.stage__side {
  left: clamp(4px, 1.4vw, 18px);
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}
.stage__note--tl { left: clamp(14px, 3.5vw, 64px); top: 4px; }
.stage__note--bl { left: clamp(14px, 3.5vw, 64px); bottom: 4px; }

/* Sus nombres, centrados abajo */
.stage__names {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(-6px, 0.4vw, 6px);
  margin: 0;
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text);
}
.stage__names i {
  font-style: normal;
  margin-inline: 10px;
  font-size: .6em;
  color: var(--blue-light);
  vertical-align: middle;
}

/* Texto de la sección, ya debajo del escenario */
.about {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.about .lead { max-width: 30ch; }
.about__col p + p { margin-top: 16px; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(36px, 4.5vw, 64px);
}
.fact {
  position: relative;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), var(--card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s, transform .5s var(--e-out);
}
.fact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--blue-18), transparent 70%);
}
.fact:hover { transform: translateY(-3px); border-color: rgba(105, 183, 255, .3); }
.fact:hover::before { opacity: 1; }

.fact__n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(140deg, #fff, var(--blue-light) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fact__n--word { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.025em; }
.fact__l {
  display: block;
  margin-top: 8px;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ---------------------------------------------------------------- NFC --- */

.section--nfc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 78% 50%, rgba(47, 128, 237, .10), transparent 70%);
  pointer-events: none;
}

.nfc {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* En pantallas grandes la sección se queda quieta un rato mientras se hace
   scroll: ese recorrido extra es el que alimenta el acercamiento del móvil.
   Para acortar o alargar la animación, se toca este único valor. */
@media (min-width: 901px) and (min-height: 620px) {
  /* Cuánto scroll dura el acercamiento. Menos = más rápido. */
  .section--nfc .wrap { min-height: 175vh; }

  .nfc {
    position: sticky;
    top: 0;
    min-height: 100vh;
    align-content: center;
    /* La imagen se lleva algo más de sitio que el texto */
    grid-template-columns: 1fr 1.12fr;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 32px 0 38px;
}
.tag {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .855rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color .35s, border-color .35s, transform .4s var(--e-out), background-color .35s;
}
.tag:hover {
  color: var(--text);
  border-color: rgba(105, 183, 255, .45);
  background: var(--blue-10);
  transform: translateY(-2px);
}

/* --- Visualización NFC: encuadre de cámara con zoom vinculado al scroll ---
   La imagen se muestra entera y sin deformar. Lo único que cambia con el
   scroll es la escala y el desplazamiento de la capa que la contiene, con el
   punto de origen puesto sobre el móvil: por eso el móvil se queda quieto
   en su sitio mientras se acerca. El recorte lo hace .viz, así que el zoom
   nunca genera scroll lateral.
   Los valores del recorrido se ajustan en main.js (initNfcZoom). */

.nfc__viz { display: grid; place-items: center; }

.viz {
  position: relative;

  /* El encuadre es SIEMPRE cuadrado: de ahí depende que el punto de
     acercamiento caiga justo sobre el móvil. El tamaño lo decide el menor
     de tres: el hueco disponible, el alto de la pantalla y un tope.
     Medida base = móvil y tablet. */
  width: min(100%, 520px, 70vh);
  aspect-ratio: 1;
  margin-inline: auto;

  /* Intensidad del acercamiento en este tamaño de pantalla.
     main.js lee estos dos valores, así que el diseño y la animación se
     ajustan juntos. Ver LEEME.md, apartado 11. */
  --nfc-zoom: 2;
  --nfc-shift: -17;

  overflow: hidden;
  border-radius: var(--r-xl);
  /* Los bordes se disuelven en el fondo de la página */
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 50%, #000 62%, transparent 99%);
  mask-image: radial-gradient(ellipse 82% 82% at 50% 50%, #000 62%, transparent 99%);
}

.viz__layer {
  position: absolute;
  inset: 0;
  /* El móvil está en este punto de la imagen: es el centro del acercamiento */
  transform-origin: 79.3% 59.5%;
  will-change: transform;
  backface-visibility: hidden;
}

.viz__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* La imagen no se retoca: solo gana algo de luz al acercarse */
  filter: brightness(var(--nfc-light, 1)) saturate(var(--nfc-sat, 1));
  transition: filter .25s linear;
}

/* Brillo vivo sobre las ondas NFC de la imagen */
.viz__pulse {
  position: absolute;
  left: 59%;
  top: 46.5%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105, 183, 255, .5), rgba(47, 128, 237, .18) 45%, transparent 72%);
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: nfcPulse 4.6s var(--e-soft) infinite;
}

@keyframes nfcPulse {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.92); }
  50%      { opacity: .85; transform: translate(-50%, -50%) scale(1.08); }
}

/* En ordenador la escena es más grande y el acercamiento, más intenso.
   Va después de la regla general para que gane. */
@media (min-width: 901px) and (min-height: 620px) {
  .viz {
    width: min(100%, 68vh, 620px);
    --nfc-zoom: 2.15;
    --nfc-shift: -19;
  }
}

/* --------------------------------------------------------------- planes - */

.plans { align-items: stretch; }
.card--plan { padding-top: clamp(28px, 2.6vw, 38px); }

.card--plan.is-featured {
  border-color: rgba(105, 183, 255, .38);
  background:
    linear-gradient(180deg, rgba(47, 128, 237, .12), transparent 46%),
    var(--card);
  box-shadow:
    0 30px 70px -40px rgba(47, 128, 237, .85),
    0 0 0 1px rgba(105, 183, 255, .12);
}
.card--plan.is-featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(105, 183, 255, .75), rgba(139, 92, 246, .35) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Insignia «Más popular» — para quitarla, borra el <span class="badge"> del HTML */
.badge {
  position: absolute;
  top: 16px; right: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px -10px rgba(47, 128, 237, 1);
}

.plan__name {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--text);
}
.plan__per { font-size: .9rem; font-weight: 500; color: var(--text-2); letter-spacing: 0; }

/* Precio anterior tachado */
.plan__was {
  order: -1;
  flex-basis: 100%;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
  opacity: .8;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 123, 123, .95);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0;
}
/* Cuando el precio anterior aún no está puesto, no se tacha el marcador */
.plan__was--ph {
  opacity: 1;
  text-decoration: none;
}

/* Segunda línea del precio: la cuota o la aclaración */
.plan__second {
  margin-bottom: 12px;
  font-size: .89rem;
  color: var(--text-2);
}
.plan__second strong { color: var(--blue-light); font-weight: 600; }

/* Etiqueta «Ahorras X €» */
.save {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 5px 12px;
  border: 1px solid rgba(105, 183, 255, .3);
  border-radius: 999px;
  background: var(--blue-10);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue-light);
}

.plan__desc { font-size: .92rem; color: var(--text-2); }

/* Nota bajo cada bloque de precios */
.plans__note {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: center;
  font-size: .9rem;
  color: var(--text-2);
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 24px 0 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  flex-grow: 1;
}
.plan__list li {
  position: relative;
  padding-left: 26px;
  font-size: .925rem;
  color: var(--text-2);
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--blue-10);
  border: 1px solid rgba(105, 183, 255, .35);
}
.plan__list li::after {
  content: "";
  position: absolute;
  left: 4.6px; top: .72em;
  width: 5px; height: 2.5px;
  border-left: 1.6px solid var(--blue-light);
  border-bottom: 1.6px solid var(--blue-light);
  transform: rotate(-45deg);
}
.plan__list li.is-ph::before,
.plan__list li.is-ph::after { display: none; }
.plan__list li.is-ph { padding-left: 0; }

.card--nfc .plan__desc { flex-grow: 1; margin-bottom: 26px; }

/* ------------------------------------------------------------- proceso -- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}

.steps__rail {
  position: absolute;
  top: 27px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: var(--border);
  overflow: hidden;
}
.steps__rail i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-light), var(--purple));
  box-shadow: 0 0 12px 1px rgba(105, 183, 255, .6);
  transition: width 1.1s var(--e-out);
}

.step { position: relative; padding-top: 0; }
.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 24px;
  border: 1px solid rgba(105, 183, 255, .3);
  border-radius: 50%;
  background: linear-gradient(160deg, #10243D, var(--card));
  box-shadow: 0 0 0 7px var(--bg), 0 10px 30px -14px rgba(47, 128, 237, .9);
  transition: border-color .45s, box-shadow .45s, transform .55s var(--e-out);
}
.step__dot b {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue-light);
}
.step:hover .step__dot {
  transform: translateY(-3px);
  border-color: rgba(105, 183, 255, .8);
  box-shadow: 0 0 0 7px var(--bg), 0 0 26px -2px rgba(47, 128, 237, .7);
}
.step__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: 9px;
}
.step__text { font-size: .93rem; color: var(--text-2); }

/* ------------------------------------------------------------ contacto -- */

.section--contact { padding-bottom: clamp(60px, 8vw, 110px); }

.cta-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
  padding: clamp(32px, 4.5vw, 66px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    linear-gradient(170deg, rgba(47, 128, 237, .10), transparent 48%),
    rgba(11, 25, 45, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 50px 110px -60px rgba(0, 0, 0, 1);
}
.cta-box__glow {
  position: absolute;
  top: -46%;
  left: 18%;
  width: 62%;
  height: 92%;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(47, 128, 237, .34), rgba(139, 92, 246, .12) 55%, transparent 72%);
  pointer-events: none;
}
.cta-box__head { position: relative; }
.cta-box__btns { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

/* Email y teléfono, para quien prefiere no rellenar formularios */
.contacto-directo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
}
.contacto-directo__k {
  display: block;
  margin-bottom: 4px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: .75;
}
.contacto-directo a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  transition: color .3s var(--e-soft);
}
.contacto-directo a:hover { color: var(--blue-light); }

/* formulario */
.form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(7, 20, 38, .6);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(13, 29, 51, .8);
  color: var(--text);
  font-family: inherit;
  font-size: .94rem;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field textarea { resize: vertical; min-height: 104px; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(168, 182, 200, .45); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(105, 183, 255, .6);
  background: rgba(13, 29, 51, 1);
  box-shadow: 0 0 0 3px var(--blue-10);
}
.field.has-error input,
.field.has-error textarea { border-color: rgba(255, 107, 107, .7); }

.form__status {
  min-height: 1.4em;
  margin-top: 2px;
  font-size: .86rem;
  color: var(--text-2);
  text-align: center;
}
.form__status.is-ok  { color: var(--blue-light); }
.form__status.is-err { color: #FF9B9B; }

/* --------------------------------------------------------------- footer - */

.footer {
  position: relative;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, transparent, rgba(7, 20, 38, .9));
  padding-top: clamp(48px, 6vw, 76px);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 60px);
}
.footer__tag {
  margin-top: 16px;
  font-size: .9rem;
  color: var(--text-2);
  max-width: 28ch;
}
.footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 18px;
  align-content: start;
}
.footer__nav a {
  font-size: .9rem;
  color: var(--text-2);
  transition: color .3s, transform .35s var(--e-out);
}
.footer__nav a:hover { color: var(--blue-light); transform: translateX(2px); }

.footer__meta { display: flex; flex-direction: column; gap: 13px; }
.footer__meta p { font-size: .9rem; color: var(--text); }
.footer__meta a { color: var(--text-2); transition: color .3s; }
.footer__meta a:hover { color: var(--blue-light); }
.footer__k {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: .7;
  margin-bottom: 3px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 24px 30px;
  border-top: 1px solid var(--border-soft);
}
.footer__bottom p { font-size: .82rem; color: var(--text-2); }
.footer__top {
  font-size: .82rem;
  color: var(--text-2);
  transition: color .3s;
}
.footer__top:hover { color: var(--blue-light); }

/* ====================================================== RESPONSIVE ======= */

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .about,
  .nfc,
  .cta-box { grid-template-columns: 1fr; }

  .about { gap: 26px; }
  .about .lead { max-width: none; }

  /* En tablet el nombre se reparte arriba y abajo, no a los lados */
  .stage { height: clamp(380px, 68vw, 560px); }
  .stage__word { font-size: clamp(2.8rem, 13vw, 6.5rem); }
  .stage__side { display: none; }

  .nfc__viz { order: -1; }

  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
  .plans .card--plan { max-width: 540px; margin-inline: auto; width: 100%; }

  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps__rail { display: none; }

  .cta-box__head { text-align: left; }
}

@media (max-width: 640px) {
  :root { --section-y: clamp(72px, 14vw, 104px); }

  .nav__inner { padding-block: 12px; }
  .nav .brand__name { display: none; }
  .nav__actions .btn--sm { display: none; }

  .hero {
    min-height: auto;
    padding-top: 118px;
    padding-bottom: 64px;
    text-align: left;
  }
  .hero__inner { align-items: flex-start; text-align: left; }
  .chip {
    font-size: .68rem;
    letter-spacing: .08em;
    padding: 7px 14px 7px 11px;
  }

  .hero__title {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
    margin-top: 24px;
  }
  .hero__sub { margin-top: 20px; font-size: 1rem; }
  .hero__cta {
    justify-content: stretch;
    width: 100%;
    margin-top: 32px;
    flex-direction: column;
  }
  .hero__cta .btn { width: 100%; }
  .hero__trust {
    width: 100%;
    margin-top: 34px;
    font-size: .8rem;
  }
  .hero__beam { display: none; }

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

  /* Escenario en móvil.
     Aquí son dos personas en una pantalla estrecha: ocupan tanto ancho que,
     si el nombre fuera por detrás, quedaría tapado entero y no se leería.
     Así que el nombre va arriba, a dos líneas, y ellos suben justo lo
     suficiente para pisarlo un poco. Se mantiene el efecto de capas sin
     perder ni una letra. */
  .section--stage { padding-bottom: clamp(48px, 10vw, 72px); }
  .h2--stage { max-width: none; }

  .stage {
    height: clamp(430px, 128vw, 580px);
    margin-bottom: 26px;
  }

  .stage__word {
    top: 4px;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--gutter);
    font-size: clamp(3rem, 19vw, 5.2rem);
    line-height: .86;
  }
  .stage__word-a { text-align: left; transform: none; }
  .stage__word-b { text-align: right; transform: none; }

  /* Se apoyan abajo y su cabeza roza la segunda línea del nombre */
  .stage__people {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 82%;
  }

  .stage__glow { top: 52%; width: 92%; }

  /* En móvil solo se dejan los nombres: los rótulos de los bordes
     amontonan y no aportan a ese tamaño. */
  .stage__note { display: none; }
  .stage__names { font-size: .66rem; letter-spacing: .18em; }

  .facts { grid-template-columns: 1fr; gap: 10px; }
  .fact {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 16px 18px;
  }
  .fact__l { margin-top: 0; }

  .steps { grid-template-columns: 1fr; row-gap: 28px; }
  .step { display: grid; grid-template-columns: 54px 1fr; column-gap: 18px; }
  .step__dot { grid-row: span 2; margin-bottom: 0; }
  .step__title { align-self: center; }
  .step__text { grid-column: 2; }

  .form__row { grid-template-columns: 1fr; }
  .cta-box__btns .btn { width: 100%; }

  .footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* ============================================= movimiento reducido ======= */
/* Solo desactivamos lo intrusivo. Los micro-movimientos se quedan:
   Windows activa esta preferencia por defecto en muchos equipos y la web
   no debe verse muerta por ello. */

@media (prefers-reduced-motion: reduce) {
  .hero__particles { display: none; }
  .chip__dot { animation: none; }
  /* El brillo NFC deja de latir, pero sigue ahí */
  .viz__pulse { animation: none; opacity: .5; }
}