/* ============================================
   CREVO — sistema base (dark)
   ============================================ */

/* --- Google Sans Flex (archivos reales) --- */
/* óptica de texto (72pt): Light → ExtraBold */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_72pt-Light.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_72pt-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_72pt-Regular.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_72pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_72pt-Medium.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_72pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_72pt-SemiBold.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_72pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* pesos de título (óptica display 120pt, mejor para tamaños grandes) */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_120pt-Bold.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_120pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_120pt-ExtraBold.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_120pt-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../assets/fonts/GoogleSansFlex_120pt-Black.woff2') format('woff2'), url('../assets/fonts/GoogleSansFlex_120pt-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* v2 (10 sep 2026): rebranding — Luis pidió sacar el naranja como color
     principal de la marca en TODO el sitio (no solo esta página), pasar a
     grises/negro/blanco. Se mantienen los mismos 4 nombres de variable
     (--orange, --orange-light, --orange-mid, --orange-dark) para no tener
     que tocar cientos de referencias en cascada por todo el CSS y las
     páginas — solo se reasignan los valores. --orange (acento principal,
     botones/CTAs) pasa a casi negro, mismo tono que --text; los otros 3
     escalan como grises hacia arriba/abajo desde ahí. */
  --orange: #18181B;
  --orange-light: #D4D4D8;
  --orange-mid: #52525B;
  --orange-dark: #09090B;

  /* v3 (11 sep 2026): rebranding — nuevo manual de marca (lima/negro/
     blanco/gris). El manual pide usar el lima "con moderación, en el
     símbolo y en acentos", no como reemplazo de --orange en todo el sitio
     (eso rompería el contraste en textos y botones con texto blanco
     encima) — --accent-lime se usa suelto, solo en detalles puntuales
     donde el contraste funciona bien. Valores del manual de marca. */
  --accent-lime: #C1EA50;
  --brand-black: #111111;
  --brand-gray: #E9EEE9;
  /* v4 (11 sep 2026): Luis: en los degradados, no mezclar con negro puro,
     "se siente mucho" — verde oscuro derivado del lima (no del negro) para
     usar como el otro extremo del degradado en vez de --brand-black. */
  --accent-lime-dark: #3A4D12;

  /* superficies claras */
  --bg: #FFFFFF;
  --surface: #F6F6F7;
  --surface-2: #F1F1F3;
  --surface-3: #EAEAEE;
  --border: rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.16);

  /* texto */
  --text: #101013;
  --text-dim: rgba(0,0,0,0.56);
  --text-faint: rgba(0,0,0,0.40);

  --white: #FFFFFF;
  --black: #000000;

  --font: 'Google Sans Flex', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 1 oct 2026: Luis pidió que TODO vaya en Google Sans Flex, sin monospace. */
  --font-mono: var(--font);

  --container: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(.16,1,.3,1);

  /* tokens de movimiento (interaction-physics) */
  --dur-fast: 200ms;   /* hover, press, focus */
  --dur-base: 320ms;   /* dropdowns, tarjetas, reveals cortos */
  --dur-slow: 450ms;   /* transiciones estructurales grandes */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* entra: desacelera */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);      /* sale: acelera */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, code, pre, kbd, samp { font-family: inherit; }
svg text { font-family: var(--font); }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- utility ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
/* rombo del eyebrow retirado a pedido */
.eyebrow.on-light { color: var(--orange-dark); }

.section {
  padding: 150px 0;
}
.section.tight { padding: 110px 0; }
@media (max-width: 768px) {
  .section { padding: 90px 0; }
  .section.tight { padding: 64px 0; }
}

.section-head {
  max-width: 640px;
  margin-bottom: 64px;
}
.section-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 16px;
}
.section-head p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-dim);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }


/* ---------- end-band: la foto propia del hero de esta página, de ancho
   completo (a sangre). Se muestra ÍNTEGRA, sin recortar ni un pixel: el
   bloque toma la proporción real de la foto (1672x941) en vez de una
   altura arbitraria, así "cover" nunca tiene que cortar nada para llenarlo.
   Las tarjetas de precio Y el CTA de cierre de la página (antes una sección
   aparte, en blanco, entre los precios y el footer) flotan juntos, centrados,
   encima de esta misma foto — así la imagen "llega" hasta cerca del footer
   en vez de dejar un tramo grande en blanco antes de él. En pantallas
   angostas, si el contenido apilado pesa más que el alto real de la foto,
   se extiende un poco más abajo sobre fondo simple — es el trade-off
   aceptado para no perder nunca nada de la imagen. ---------- */
.end-band { position: relative; margin: 56px 0 0; }
/* cuando el end-band es lo último de su sección (la foto es el cierre de la
   página, justo antes del footer), se quita el padding inferior de la
   sección — si no, quedaba una franja blanca grande entre la foto y el
   footer aunque la foto ya llegara "completa" hasta el borde de su banda. */
.section.tight:has(> .end-band:last-child) { padding-bottom: 0; }
.end-band .bloom-field { display: none; }
.end-band-bg { position: relative; z-index: 0; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; }
.end-band-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.end-band > .wrap {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 48px;
  padding: 40px 32px;
}
.end-band .btn-outline { color: #fff; border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
.end-band .price-row, .end-band .level, .end-band .asesoria { box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.end-band .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }
/* CTA de cierre (título + botón) flotando directo sobre la foto, sin tarjeta
   detrás: texto blanco con sombra para que se lea sobre cualquier foto. */
.end-band .end-cta { text-align: center; }
.end-band .end-cta h2 { color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.end-band .end-cta .grad-anim { background: none; -webkit-text-fill-color: #fff; color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* primary = negro sólido */
.btn-primary {
  background: #0A0A0A;
  color: var(--white);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--orange); box-shadow: 0 12px 30px rgba(24,24,27,0.28); }

/* pulsación + foco de teclado para todos los botones */
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible, .btn-glow:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 14px; }

/* accent naranja */
.btn-orange {
  background: var(--orange);
  color: var(--white);
}
.btn-orange:hover { transform: translateY(-2px); background: var(--orange-mid); box-shadow: 0 10px 30px rgba(24,24,27,0.35); }

.btn-outline {
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--white); transform: translateY(-2px); background: rgba(255,255,255,0.05); }

.btn-white {
  background: #0A0A0A;
  color: var(--white);
}
.btn-white:hover { transform: translateY(-2px); background: var(--orange); }

.btn-ghost-dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}
.btn-ghost-dark:hover { border-color: var(--white); transform: translateY(-2px); }

/* botones sobre fondo naranja */
.on-orange .btn-primary { background: var(--white); color: #0A0A0A; }
.on-orange .btn-primary:hover { background: #0A0A0A; color: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* botón "Consultoría gratuita" del nav — antes tenía un blob difuminado animado detrás
   y fondo negro (btn-glow original, tipo Uiverse); a pedido queda liso, naranja, sin
   difuminado ni animación. El span .blob se mantiene en el HTML pero se oculta acá.
   v2 (11 sep 2026): rebranding — pasa a fondo lima con texto negro, "versión en
   acento" del manual de marca (fondo --accent-lime, símbolo/texto en negro, no
   blanco encima que casi no se leería sobre un lima tan claro). */
.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.btn-glow .blob { display: none; }
.btn-glow .inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  background: var(--accent-lime);
  color: var(--brand-black);
  padding: 13px 30px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-glow:hover .inner, .btn-glow:focus-visible .inner { background: #B0DA3F; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(193,234,80,0.45); }
.btn-glow:active .inner { transform: translateY(0) scale(0.98); }

/* glow compacto en el nav */
.nav-cta .btn-glow .inner { padding: 9px 20px; font-size: 13px; }
/* en celular el botón del nav se partía en dos líneas */
.nav-cta .btn-glow .inner { white-space: nowrap; }
@media (max-width: 420px) { .nav-cta .btn-glow .inner { padding: 9px 14px; font-size: 12.5px; } }
/* glow en el menú móvil (ancho completo, centrado) */
.mobile-panel .btn-glow { display: flex; margin-top: 30px; }
.mobile-panel .btn-glow .inner { flex: 1; justify-content: center; }

.rombo {
  width: 8px;
  height: 8px;
  background: var(--orange);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.rombo.outline {
  background: transparent;
  border: 2px solid var(--orange);
}

/* ---------- nav ---------- */
/* al tope de la página el nuv va integrado al blanco de fondo, sin verse
   como una tarjeta aparte — recién al deslizar (.scrolled, ver js/main.js)
   toma la forma de píldora "liquid glass": translúcida, con blur y un
   brillo sutil en el borde superior, pero sin pasarse de intensidad. */
.nav {
  position: fixed;
  top: 16px; left: 64px; right: 64px;
  z-index: 100;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.05);
}
/* v2 (10 sep 2026): con flex + space-between los links quedaban a mitad de
   camino entre el logo y el botón, no centrados de verdad en el nav (el
   logo y el CTA no pesan lo mismo en ancho, así que el "medio" entre
   ambos no es el centro real). Pasa a grid de 3 columnas simétricas
   (logo 1fr | links auto | cta+toggle 1fr) para que el bloque de links
   quede centrado respecto al nav completo, no respecto a sus vecinos.
   .nav-cta y .nav-toggle (este último solo visible en mobile) comparten
   la 3ra columna metidos en su propio flex, así conviven en fila sin
   pisarse cuando ambos están visibles. */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 62px;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 26px;
}
.nav-logo { justify-self: start; }
.nav-links { justify-self: center; }
/* .nav-right envuelve el CTA y el botón de menú mobile (que en mobile
   conviven lado a lado) en un solo bloque flex — así ocupan juntos la 3ra
   columna del grid sin pisarse entre sí. */
.nav-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-logo { display: flex; align-items: center; gap: 10px; margin-left: -4px; }
.nav-logo img { height: 27px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  /* v3 (11 sep 2026): rebranding, manual de marca nuevo — el lima
     (--accent-lime) entra acá como el primer punto de acento real del
     sitio: una franja sólida de 2px, buen contraste sobre blanco, exactamente
     el uso que pide el manual ("con moderación, en acentos y elementos
     destacados"), sin tocar --orange (que se queda en negro/gris en el
     resto del sitio por legibilidad de texto). */
  background: var(--accent-lime);
  transition: right .3s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
/* la página activa se distingue solo por el color (más oscuro), sin línea permanente debajo —
   se ve más limpia/premium; la línea naranja queda solo como detalle de hover.
   v2 (11 sep 2026): Luis notó que el nav "cambiaba de tamaño" al pasar de sección
   — no era el tamaño, era el font-weight (600 acá vs 500 en el resto), que hacía
   que la palabra activa se viera más gruesa y corriera el ancho del texto según
   qué página estuvieras viendo. Se quita el peso extra, mismo 500 que el resto,
   la página activa se distingue solo por el color más oscuro, ya no por el grosor. */
.nav-links a.active { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-cta .btn { padding: 9px 18px; font-size: 13px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--text);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #FFFFFF;
  z-index: 99;
  clip-path: circle(0% at calc(100% - 52px) 44px);
  pointer-events: none;
  transition: clip-path .6s cubic-bezier(.65,0,.35,1);
  padding: 120px 32px 40px;
  display: none;
}
.mobile-panel.open {
  pointer-events: auto;
  clip-path: circle(150% at calc(100% - 52px) 44px);
}
.mobile-panel a {
  display: block;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.mobile-panel.open a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-panel.open a:nth-child(1) { transition-delay: .15s; }
.mobile-panel.open a:nth-child(2) { transition-delay: .2s; }
.mobile-panel.open a:nth-child(3) { transition-delay: .25s; }
.mobile-panel.open a:nth-child(4) { transition-delay: .3s; }
.mobile-panel .btn { margin-top: 30px; width: 100%; justify-content: center; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: flex; }
  .mobile-panel { display: block; }
  .nav { left: 16px; right: 16px; }
}

body.menu-open { overflow: hidden; }

/* ---------- page header (inner pages) ---------- */
.page-header {
  padding: 190px 0 100px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-header .kicker { margin-bottom: 18px; }
.page-header h1 {
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 820px;
}
.page-header .lede {
  margin-top: 22px;
  font-size: 18px;
  color: var(--text-dim);
  max-width: 560px;
  line-height: 1.6;
}

/* ---------- footer ---------- */
/* v3 (9 sep 2026): rehecho completo — Luis dijo que en mobile "se ve
   terrible" y que abandonemos la idea de que la franja legal tenga que
   verse chica, resolverlo bien en vez de comprimir. Se toma como referencia
   elevabuilds.com: footer-top (marca + columnas de links) separado de una
   franja legal propia y compacta al final, con su propia línea divisoria.
   En mobile cada pieza pasa a ocupar su ancho completo con jerarquía real
   (marca primero, cada columna de links apilada verticalmente con su
   label), en vez de un grid de 1 columna donde todo competía igual. */
.footer {
  background: var(--surface);
  color: var(--text);
  padding: 56px 0 0;
  margin-top: 60px; /* aire real antes de la parte legal, en vez de una línea pegada al CTA */
}
.footer-wrap { max-width: 1680px; margin: 0 auto; padding: 0 40px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 1fr 1fr;
  align-items: start;
  gap: 32px 28px;
  padding-bottom: 40px;
  font-family: var(--font);
}
.footer-brand-col, .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-brand { display: flex; align-items: center; }
.footer-brand img { height: 24px; width: auto; max-width: 60vw; }
.footer-logo { opacity: .8; }
/* v4 (10 sep 2026): Luis pidió que los títulos de columna (Navegación,
   Contacto, Legal) se queden en su tamaño actual, y que todo lo demás del
   footer (tagline, links) baje un poco — para que la jerarquía entre
   título de columna y contenido se note más. */
.footer-tagline {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  margin: 0;
  max-width: none;
}
.footer-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
/* v3: lista vertical (era flex-wrap horizontal) — en mobile un wrap
   horizontal de 5 links se lee como un párrafo desordenado; en columna cada
   link es su propio renglón, fácil de escanear en cualquier ancho. */
.footer-col-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col-links a {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-dim);
  transition: color .2s ease;
}
.footer-col-links a:hover { color: var(--orange-mid); }
.footer-mark {
  margin-top: 22px;
  text-align: center;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  font-size: clamp(34px, 6vw, 72px);
  background: linear-gradient(180deg, var(--orange), rgba(24,24,27,.06));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 88%);
  user-select: none;
}
/* franja legal: separada del resto por una línea, solo copyright + Instagram,
   igual de compacta en mobile que en desktop (no se comprime más, solo se
   apila si hace falta ancho) */
.footer-legal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; margin-top: 4px;
  border-top: 1px solid var(--border);
}
.footer-copy { margin: 0; font-size: 12.5px; letter-spacing: .01em; line-height: 1.4; color: var(--text-faint); font-weight: 500; }
.footer-legal-ig { display: inline-flex; align-items: center; color: var(--text-faint); transition: color .2s ease; }
.footer-legal-ig:hover { color: var(--orange-mid); }
.footer-legal-ig svg { width: 18px; height: 18px; }

@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr; row-gap: 32px; }
  .footer-brand-col { gap: 12px; }
  .footer-brand img { height: 26px; }
}
@media (max-width: 480px) {
  .footer-wrap { padding: 0 24px; }
  .footer { padding-top: 48px; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- gradient text (mismo degradado del ícono) ----------
   v3 (11 sep 2026): rebranding — de gris a lima. Se mueve solo entre lima
   y un verde oscuro (nunca hacia blanco/gris clarito), porque este texto
   vive sobre fondo blanco en casi todos los títulos del sitio — si el
   degradado tocara un tono muy claro, el texto se volvería casi invisible
   ahí. v4: el otro extremo pasa de negro puro a --accent-lime-dark (verde
   oscuro) — Luis: "no lo mezcles con negro, se siente mucho". */
.grad-text {
  background: linear-gradient(120deg, var(--accent-lime) 0%, #8FB83A 35%, var(--accent-lime-dark) 70%, var(--accent-lime-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- wordmark gigante (estilo Resend) ---------- */
.mega-word {
  padding: 120px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mega-word .mega-text {
  font-size: clamp(90px, 22vw, 300px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: .9;
  background: linear-gradient(180deg, rgba(17,17,19,0.20) 0%, rgba(17,17,19,0.10) 34%, rgba(24,24,27,0.14) 60%, transparent 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  /* se deshace hacia el blanco por abajo */
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

/* ---------- texto con degradado animado (movimiento super leve, como el Inicio) ----------
   v3 (11 sep 2026): rebranding — de gris a lima, mismo criterio que
   .grad-text (nunca toca blanco/gris clarito, siempre queda legible sobre
   el fondo blanco donde vive esta clase en casi todos los títulos H1/H2
   del sitio).
   v4: los extremos pasan de negro puro a --accent-lime-dark (verde
   oscuro) — Luis: "no lo mezcles con negro, se siente mucho". El lima
   sigue apareciendo en el tramo medio. */
.grad-anim {
  display: inline-block;
  padding-right: .08em; margin-right: -.08em; /* evita que se corte la última letra */
  background: linear-gradient(100deg, var(--accent-lime-dark), #8FB83A, var(--accent-lime), #8FB83A, var(--accent-lime-dark));
  background-size: 230% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradSoft 4.5s ease-in-out infinite alternate;
}
@keyframes gradSoft { from { background-position: 0% center; } to { background-position: 100% center; } }

/* ---------- gradiente animado (fondo llamativo) ----------
   v2 (11 sep 2026): rebranding — de gris a lima/verde oscuro. Es fondo,
   no texto, así que no hay riesgo de legibilidad.
   v3: negro puro fuera del degradado — Luis: "no lo mezcles con negro, se
   siente mucho". Se mueve libre entre verde oscuro y lima. */
.flow-anim {
  background: linear-gradient(115deg, var(--accent-lime-dark) 0%, #4A6318 28%, #6B8A2E 52%, var(--accent-lime) 74%, var(--accent-lime-dark) 100%);
  background-size: 300% 300%;
  animation: flowMove 14s ease infinite;
}
@keyframes flowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- fondos difuminados (blobs) ---------- */
.blob-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.blob-orange { background: radial-gradient(circle, rgba(24,24,27,0.22), rgba(24,24,27,0) 70%); }
.blob-white { background: radial-gradient(circle, rgba(0,0,0,0.04), rgba(0,0,0,0) 70%); }
.z-content { position: relative; z-index: 1; }

/* textura de grano sutil global */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  opacity: .04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- blooms de color (editorial) ---------- */
.bloom-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bloom { position: absolute; border-radius: 50%; filter: blur(70px); }
.bloom.grain-over::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  opacity:.35; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bloom.float { animation: bloomFloat 16s ease-in-out infinite; }
.bloom.float.slow { animation-duration: 22s; animation-direction: reverse; }
@keyframes bloomFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(5%, -6%) scale(1.1); }
}
/* paleta cálida CREVO para blooms (naranja → coral → ámbar) */
.warm-a { background: radial-gradient(circle at 38% 36%, rgba(212,212,216,0.95), rgba(24,24,27,0.78) 34%, rgba(9,9,11,0.42) 58%, transparent 82%); }
.warm-b { background: radial-gradient(circle at 50% 50%, rgba(113,113,122,0.85), rgba(24,24,27,0.6) 40%, rgba(9,9,11,0.24) 72%, transparent 84%); }
.warm-c { background: radial-gradient(circle at 60% 40%, rgba(228,228,231,0.55), rgba(113,113,122,0.7) 40%, rgba(24,24,27,0.5) 70%, transparent 84%); }

/* columna offset — ni izquierda, ni centro, ni derecha */
.offset { max-width: 780px; margin-left: 10%; }
@media (max-width: 900px){ .offset { margin-left: 0; max-width: 100%; } }

/* jerarquía editorial: fina + énfasis */
.thin { font-weight: 300; }
.emph { font-weight: 800; }

/* ---------- lista editorial numerada ---------- */
.idx-list { border-top: 1px solid rgba(0,0,0,0.12); }
.idx-row {
  display: grid;
  grid-template-columns: 1fr 54px 240px;
  gap: 34px;
  align-items: center;
  padding: 40px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  transition: transform .4s var(--ease), background .4s var(--ease);
  position: relative;
}
.idx-row:hover { background: linear-gradient(90deg, rgba(24,24,27,0.05), transparent 55%); transform: translateX(14px); }
.idx-name { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.idx-desc { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; margin-top: 12px; font-weight: 300; max-width: 440px; }
.idx-num { font-size: 13px; font-weight: 700; color: var(--text-faint); text-align: center; letter-spacing: .05em; }
.idx-visual {
  height: 128px; border-radius: 16px; border: 1px solid var(--border);
  position: relative; overflow: hidden; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.idx-visual .ico { position: relative; z-index: 1; }
.idx-visual .glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(34px); opacity: .55; }
@media (max-width: 820px){
  .idx-row { grid-template-columns: 1fr auto; gap: 18px; }
  .idx-visual { display: none; }
  .idx-num { order: -1; text-align: left; grid-column: 1 / -1; }
}

/* ---------- CTA oscuro premium con gradiente animado ---------- */
.cta-dark {
  position: relative; overflow: hidden;
  background: #080808;
  padding: 150px 0;
  text-align: center;
}
/* v2 (11 sep 2026): rebranding — de gris claro a lima. Acá sí va lima
   puro (sin pasar por negro) porque el fondo detrás es negro sólido
   (#080808, ver .cta-dark arriba), así que el contraste está garantizado
   en todo el recorrido del degradado. */
.cta-dark h2 {
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 760px; margin: 0 auto 34px;
  background: linear-gradient(100deg, var(--accent-lime) 0%, #8FB83A 40%, #6B8A2E 70%, var(--accent-lime) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.cta-dark .sub { color: rgba(255,255,255,0.6); max-width: 520px; margin: 0 auto 34px; font-size: 16px; line-height: 1.6; font-weight: 300; }

/* ---------- acento tipográfico mono (números y labels) ---------- */
.tag, .fmt-num, .pkg-tag, .as-name .tag, .svc-name .tag {
  font-family: var(--font-mono);
}

/* ---------- tipo kinética (demuestra motion) ---------- */
.grad-text.kinetic {
  background-size: 220% auto;
  animation: gradSoft 4.5s ease-in-out infinite alternate;
}

/* ---------- microinteracción: íconos de fila reaccionan ---------- */
.svc-row .svc-ico, .as-row .as-ico { transition: transform .45s var(--ease); }
.svc-row:hover .svc-ico { transform: rotate(-8deg) scale(1.08); }
.as-row:hover .as-ico { transform: rotate(-8deg) scale(1.08); }
.why5-card .why5-ico, .svc-card2 .svc-ico, .why-card .ico { transition: transform .45s var(--ease); }
.why5-card:hover .why5-ico, .svc-card2:hover .svc-ico, .why-card:hover .ico { transform: rotate(-8deg) scale(1.08); }

/* ---------- showcase (muestra visual, placeholder) ---------- */
.showcase {
  max-width: 1240px; margin: 80px auto 0;
  border-radius: 26px; border: 1px solid var(--border); overflow: hidden;
  background: var(--surface); box-shadow: 0 60px 130px rgba(0,0,0,0.15); position: relative;
}
/* despliegue tipo "abrir app en Mac": llega chiquita y crece con un pop suave */
.showcase.reveal { opacity: 0; transform: scale(.55); transform-origin: center center; filter: blur(3px);
  transition: opacity .55s ease, transform .72s cubic-bezier(0.16, 1.08, 0.3, 1), filter .55s ease; }
.showcase.reveal.in { opacity: 1; transform: scale(1); filter: none; }

.showcase .bar { height: 50px; display: flex; align-items: center; gap: 9px; padding: 0 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(24,24,27,.10), rgba(113,113,122,.05) 45%, var(--surface-2) 80%); }
.showcase .bar span { width: 12px; height: 12px; border-radius: 50%; }
.showcase .bar span:nth-child(1) { background: #FF5F57; }
.showcase .bar span:nth-child(2) { background: #FEBC2E; }
.showcase .bar span:nth-child(3) { background: #28C840; }
.showcase .bar-title { margin-left: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: .02em; }

/* pestañas del portafolio */
.sc-tabs { display: flex; gap: 6px; padding: 14px 20px 0; border-bottom: 1px solid var(--border); overflow-x: auto;
  background: linear-gradient(180deg, rgba(24,24,27,.05), transparent); }
.sc-tab {
  position: relative; border: 1px solid transparent; background: transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); padding: 12px 18px; border-radius: 10px 10px 0 0;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sc-tab:hover { color: var(--text); background: rgba(0,0,0,.03); }
.sc-tab.active { color: var(--orange); background: var(--white); border-color: var(--border); border-bottom-color: var(--white); }
/* v2 (11 sep 2026): rebranding — misma franja de 2px que el underline del
   nav, ahora en lima (--accent-lime) en vez del gradiente de grises. */
.sc-tab.active::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px;
  background: var(--accent-lime); }

/* escenario que cambia por pestaña */
.sc-stage { position: relative; min-height: 500px; }
.sc-panel { position: absolute; inset: 0; padding: 40px; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .45s var(--ease-reveal), transform .45s var(--ease-reveal); }
.sc-panel.active { opacity: 1; transform: none; pointer-events: auto; position: relative; }

.sc-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; height: 100%; }
.sc-info .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); background: rgba(24,24,27,.09); padding: 5px 11px; border-radius: 999px; }
.sc-info h4 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; margin: 18px 0 12px; }
.sc-info p { color: var(--text-dim); font-weight: 500; font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sc-tags span { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); padding: 5px 11px; border-radius: 999px; }

.wicon { width: 24px; height: 24px; display: inline-flex; flex: 0 0 auto; }
.wicon svg { width: 100%; height: 100%; }

.metric-big { font-size: clamp(26px, 3.2vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(100deg, #09090B, #18181B, #71717A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric-big small { display: block; font-size: 12px; font-weight: 400; color: var(--text-faint);
  -webkit-text-fill-color: var(--text-faint); margin-top: 7px; letter-spacing: 0; }

/* Ads & SEO: Meta como dashboard + franja de SEO */
.ads-dash { display: flex; flex-direction: column; gap: 20px; }

/* ---- Dashboard de Meta Ads ---- */
.mad { border: 1px solid var(--border); border-radius: 16px; background: #F7F9FC; overflow: hidden; box-shadow: 0 14px 36px rgba(8,102,255,.06); }
.mad-bar { display: flex; align-items: center; gap: 22px; padding: 13px 18px; background: var(--white); border-bottom: 1px solid var(--border); }
.mad-brand { display: flex; align-items: center; gap: 8px; }
.mad-brand .wicon { width: 19px; height: 19px; }
.mad-brand strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #33415C; }
.mad-tabs { display: flex; gap: 18px; }
.mad-tabs span { font-size: 12px; font-weight: 400; color: var(--text-faint); position: relative; padding-bottom: 4px; white-space: nowrap; }
.mad-tabs span.on { color: #0866FF; font-weight: 500; }
.mad-tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0866FF; border-radius: 2px; }

.mad-grid { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr; gap: 12px; padding: 14px; }
.mad-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.mad-ch { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.mad-ch span { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.mad-ch b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: #33415C; }

.mad-linesvg { width: 100%; height: 92px; display: block; flex: 1; }
.mad-axis { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--text-faint); font-weight: 400; }

.rank-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; margin-bottom: 11px; }
.rank-row:last-child { margin-bottom: 0; }
.rk-name { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.rk-val { font-size: 12px; font-weight: 500; color: #33415C; }
.rk-bar { grid-column: 1 / -1; height: 6px; border-radius: 5px; background: var(--surface-2); position: relative; overflow: hidden; }
.rk-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: #0866FF; }

.donut-wrap { position: relative; width: 112px; height: 112px; margin: 0 auto 10px; }
.donut { width: 100%; height: 100%; transform: none; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-center b { font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: #33415C; line-height: 1; }
.donut-center span { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.donut-leg { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.donut-leg li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--text-dim); }
.donut-leg li b { margin-left: auto; font-weight: 500; color: #33415C; }
.donut-leg i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.mad-tiles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; padding: 0 14px 14px; }
.mad-tiles .tile { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px 11px; display: flex; flex-direction: column; gap: 6px; }
.mad-tiles .tile span { font-size: 11px; font-weight: 400; color: var(--text-faint); }
.mad-tiles .tile b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: #33415C; }

/* ---- Franja SEO & Analytics ---- */
.stat-card { border: 1px solid var(--border); border-radius: 18px; padding: 26px; background: var(--white); display: flex; gap: 16px; position: relative; overflow: hidden; }
.stat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.stat-card.ga::before { background: linear-gradient(90deg, #E8710A, #F9AB00); }
.stat-card.ga { background: radial-gradient(90% 120% at 100% 0%, rgba(249,171,0,.09), transparent 60%), var(--white); }
.seo-strip { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 28px; }
.seo-info { display: flex; flex-direction: column; gap: 14px; }
.stat-head { display: flex; align-items: center; gap: 10px; }
.stat-head .wicon { width: 26px; height: 26px; }
.stat-head b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.sc-desc { font-size: 14px; line-height: 1.55; color: var(--text-dim); font-weight: 500; }
.stat-foot { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); font-weight: 600; }
.area-chart { width: 100%; height: 100px; display: block; }

/* mock de web con tipografía/colores CREVO */
.web-mock { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; min-height: 320px; box-shadow: 0 24px 54px rgba(0,0,0,.11); }
.web-mock .wm-bar { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.web-mock .wm-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.web-mock .wm-body { flex: 1; padding: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; justify-content: center;
  background: radial-gradient(75% 95% at 12% 8%, rgba(24,24,27,.14), transparent 60%), var(--white); }
.wm-logo { font-weight: 800; letter-spacing: .04em; font-size: 13px; color: var(--text); }
.wm-hero { font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; max-width: 88%; color: var(--text); }
.wm-hero em { font-style: normal; background: linear-gradient(100deg, #18181B, #71717A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-row { display: flex; gap: 8px; }
.wm-row span { height: 8px; width: 74px; border-radius: 4px; background: var(--surface-2); }
.wm-btn { font-size: 12px; font-weight: 700; color: #fff; background: var(--orange); padding: 9px 18px; border-radius: 8px; }

/* variante oscura (caso música — RUBYHAZE) */
.web-mock.dark { border-color: #241016; }
.web-mock.dark .wm-bar { background: #1a0d11; border-bottom-color: #2c151b; }
.web-mock.dark .wm-bar i { background: #4a2530; }
.web-mock.dark .wm-body { color: #fff;
  background: radial-gradient(80% 100% at 85% 15%, rgba(225,29,72,.38), transparent 55%),
              radial-gradient(70% 90% at 10% 90%, rgba(147,51,90,.30), transparent 60%), #120a0d; }
.web-mock.dark .wm-logo { color: #fff; letter-spacing: .18em; }
.web-mock.dark .wm-hero { color: #fff; }
.web-mock.dark .wm-hero em { background: linear-gradient(100deg, #FB7185, #E11D48); -webkit-background-clip: text; background-clip: text; color: transparent; }
.web-mock.dark .wm-row span { background: rgba(255,255,255,.12); }
.web-mock.dark .wm-btn { background: linear-gradient(90deg, #E11D48, #FB7185); }

/* ---------- Silueta de teléfono (reutilizable) ---------- */
/* Uso:  <div class="phone" style="width:280px">
           <i class="pb s1"></i><i class="pb s2"></i><i class="pb s3"></i>
           <div class="phone-screen"><img src="..."></div>
         </div>
   Sin marco negro — solo la silueta, la isla y los botones grises sutiles. */
.phone { position: relative; width: 280px; aspect-ratio: 300 / 620; border-radius: 15% / 7.2%; background: var(--white); border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05); padding: 9px; }
.phone-screen { position: absolute; inset: 9px; border-radius: 13% / 6.4%; overflow: hidden; background: var(--surface-2); }
/* variante a ras: sin marco blanco — la imagen llena la silueta (bordes invisibles) */
.phone.flush { padding: 0; border: none; background: transparent; box-shadow: 0 30px 70px rgba(0,0,0,.10); }
.phone.flush .phone-screen { inset: 0; border-radius: 15% / 7.2%; }
.phone-screen img,
.phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* isla (Dynamic Island) */
.phone::after { content: ""; position: absolute; top: 3.6%; left: 50%; transform: translateX(-50%); width: 27%; height: 3.4%; min-height: 20px; background: #0b0b0d; border-radius: 999px; z-index: 3; }
/* botón derecho (encendido) — gris difuminado suave y sutil */
.phone::before { content: ""; position: absolute; right: -2px; top: 26%; width: 3px; height: 11%; border-radius: 3px; background: #c7cbd2; box-shadow: 0 0 3px rgba(120,128,140,.5); opacity: .7; }
/* botones izquierdos — mismo gris sutil */
.phone i.pb { position: absolute; left: -2px; width: 3px; border-radius: 3px; background: #c7cbd2; box-shadow: 0 0 3px rgba(120,128,140,.5); opacity: .7; }
.phone i.pb.s1 { top: 16.5%; height: 4.2%; }   /* switch silencio */
.phone i.pb.s2 { top: 23.5%; height: 7.5%; }   /* volumen + */
.phone i.pb.s3 { top: 32.5%; height: 7.5%; }   /* volumen − */

/* ---------- Web mock clickeable ---------- */
.web-mock.dark .wm-url { margin-left: 12px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .02em; }
a.web-mock { text-decoration: none; color: inherit; cursor: pointer; transition: transform .5s var(--ease-reveal), box-shadow .5s var(--ease-reveal); }
a.web-mock:hover { transform: translateY(-4px); box-shadow: 0 34px 70px rgba(0,0,0,.16); }
.sc-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--orange); text-decoration: none; }
.sc-link:hover { text-decoration: underline; }

/* ---------- Motion: dos teléfonos ---------- */
.motion-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.motion-phones { display: flex; justify-content: center; align-items: center; gap: 42px; flex-wrap: wrap; }
.motion-screen { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff;
  background: radial-gradient(90% 65% at 50% 22%, rgba(24,24,27,.38), transparent 62%), #17110e; }
.motion-screen .play { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.15); }
.motion-screen .play svg { width: 20px; height: 20px; margin-left: 3px; }
.motion-screen small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.motion-cap { text-align: center; max-width: 460px; }
.motion-cap h4 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -.02em; }
.motion-cap p { font-size: 15px; color: var(--text-dim); margin-top: 8px; line-height: 1.55; }

/* ---------- Eventos: sistema de tickets (exposición) ---------- */
.evt-head { text-align: center; max-width: 560px; margin: 0 auto 26px; }
.evt-head h4 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -.02em; }
.evt-head p { font-size: 15px; color: var(--text-dim); margin-top: 8px; line-height: 1.55; }
.evt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.evt-step { position: relative; border: 1px solid var(--border); border-radius: 16px; background: var(--white); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.evt-step .evt-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--orange); }
.evt-step h5 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.evt-step p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.evt-visual { border-radius: 12px; background: var(--surface); padding: 20px; display: grid; place-items: center; min-height: 158px; margin-top: auto; }
/* QR */
.qr { width: 104px; height: 104px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 3px; }
.qr i { background: var(--text); border-radius: 2px; }
.qr i.o { background: transparent; }
/* escaneo */
.evt-scan { text-align: center; }
.evt-check { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: rgba(34,197,94,.12); color: #16a34a; }
.evt-check svg { width: 28px; height: 28px; }
.evt-scan b { display: block; font-size: 15px; font-weight: 600; }
.evt-scan span { font-size: 12px; color: var(--text-faint); }
/* ingresos */
.evt-rev { text-align: center; }
.evt-rev .amt { font-size: clamp(28px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(100deg, #09090B, #18181B, #71717A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.evt-rev .lbl { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.evt-rev .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #16a34a; margin-top: 12px; }
.evt-rev .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }

/* ---------- Collage de muestra de trabajo ---------- */
.showcase-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.showcase-head .small-label { font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--orange); letter-spacing: 0; }
.showcase-head h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin-top: 14px; }
.showcase-head p { font-size: 17px; color: var(--text-dim); margin-top: 14px; line-height: 1.6; }

/* ---- LISTA DE SERVICIOS: filas simples, de punta a punta, un solo scroll ---- */
.svc-list { position: relative; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.svc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.bento-tag { display: inline-block; align-self: flex-start; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange); background: rgba(24,24,27,.10); padding: 4px 10px; border-radius: 999px; }

.cw { position: relative; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0,0,0,.08); width: 100%; }
.svc-row .cw-body, .svc-cell .cw-body { min-height: 200px; }
.svc-web .cw-body { min-height: 260px; }
.cw-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cw-bar span { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cw-bar span:nth-child(1) { background: #FF5F57; }
.cw-bar span:nth-child(2) { background: #FEBC2E; }
.cw-bar span:nth-child(3) { background: #28C840; }
.cw-bar em { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); font-style: normal; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-bar.dark { background: #17110e; border-bottom-color: rgba(255,255,255,.08); }
.cw-bar.dark em { color: rgba(255,255,255,.5); }

/* teléfonos (motion) — nuestra figura, sin botones */
.phone.nobtn::before { display: none; }   /* sin botón lateral derecho */

/* motion: dos teléfonos lado a lado, dentro de su fila */
.svc-motion-body { display: flex; align-items: flex-end; justify-content: center; gap: 34px; padding: 22px 0 0; }
.svc-motion-body .phone { width: 108px; box-shadow: 0 20px 44px rgba(0,0,0,.20); }

/* pantalla del teléfono */
.ph-holder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fbfbfc, #eef0f3); }
.ph-holder small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-faint); }

/* web hero (marca CREVO — naranja) */
.web-hero-dark { padding: 44px 40px 46px; display: flex; flex-direction: column; justify-content: center; gap: 12px; color: #fff;
  background: radial-gradient(80% 100% at 85% 12%, rgba(24,24,27,.42), transparent 55%), radial-gradient(70% 90% at 8% 92%, rgba(113,113,122,.26), transparent 60%), #16100b; }
.web-hero-dark .wm-hero { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin-top: 2px; }
.web-hero-dark .wm-hero em { font-style: normal; background: linear-gradient(100deg, #D4D4D8, #18181B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.web-hero-dark .wm-sub { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.55; max-width: 380px; }
.web-hero-dark .wm-btn { align-self: flex-start; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #18181B, #71717A); padding: 11px 20px; border-radius: 999px; margin-top: 8px; }

/* ventana Meta Ads (dashboard blanco) */
.dash-body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.dash-head { display: flex; align-items: center; gap: 10px; }
.dash-head .wicon { width: 24px; height: 24px; }
.dash-head b { font-size: 16px; font-weight: 600; color: #1C2B4A; }
.dash-chart { width: 100%; height: 90px; display: block; }
.dash-chips { display: flex; gap: 8px; }
.dash-chips span { flex: 1; font-size: 12px; font-weight: 500; color: var(--text-dim); background: var(--surface); border-radius: 8px; padding: 9px 4px; text-align: center; white-space: nowrap; }

/* ventana Google Analytics (SEO) */
.ga-body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ga-head { display: flex; align-items: center; gap: 9px; }
.ga-head .wicon { width: 20px; height: 22px; }
.ga-head b { font-size: 15px; font-weight: 600; color: #1C2B4A; }
.ga-metric { display: flex; flex-direction: column; gap: 3px; }
.ga-metric strong { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--orange); }
.ga-metric small { font-size: 12px; color: var(--text-faint); }
.ga-chart { width: 100%; height: 58px; display: block; }

/* ventana sistema de eventos (QR) */
.tix-body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.tix-row { display: flex; align-items: center; gap: 20px; }
.qr.tix-qr { width: 88px; height: 88px; gap: 2px; flex: 0 0 auto; }
.tix-info { display: flex; flex-direction: column; gap: 3px; }
.tix-info .tix-check { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(24,24,27,.10); color: var(--orange); margin-bottom: 4px; }
.tix-info .tix-check svg { width: 16px; height: 16px; }
.tix-info strong { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.tix-info small { font-size: 12px; color: var(--text-faint); }

/* notificaciones — pequeñas, animadas, a los lados del manifiesto, lejos del texto */
.manifesto-inner { position: relative; padding: 86px 0; }
.notif { position: absolute; display: flex; align-items: center; gap: 10px; width: 194px; padding: 9px 12px; border-radius: 13px;
  text-align: left;
  background: rgba(244,245,247,.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,.06); box-shadow: 0 14px 32px rgba(0,0,0,.14);
  z-index: 9; opacity: 0; animation: notifPop 12s ease-in-out infinite; }
.notif-1 { top: 0;               left: -6px;  animation-delay: 0s; }
.notif-2 { top: 0;               right: -6px; animation-delay: 1.5s; }
.notif-3 { top: 50%; margin-top: -27px; left: -30px;  animation-delay: 3s; }
.notif-4 { top: 50%; margin-top: -27px; right: -30px; animation-delay: 4.5s; }
.notif-5 { bottom: 0;            left: -6px;  animation-delay: 6s; }
.notif-6 { bottom: 0;            right: -6px; animation-delay: 7.5s; }
.notif .n-ico { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; background: #e5e7eb; color: #6b7280; }
.notif .n-ico svg { width: 16px; height: 16px; }
/* color por origen: naranja = Google/Analytics, azul = Meta Ads, verde = mensaje/venta, rojo = tickets */
.notif.n-orange .n-ico { background: rgba(232,113,10,.13); color: #E8710A; }
.notif.n-blue .n-ico   { background: rgba(8,102,255,.12);  color: #0866FF; }
.notif.n-green .n-ico  { background: rgba(16,163,111,.13); color: #10A36F; }
.notif.n-red .n-ico    { background: rgba(220,38,38,.13);  color: #DC2626; }
/* íconos de marca a color real (whatsapp, meta, instagram, imessage) — sin fondo tintado */
.notif.n-brand .n-ico  { background: transparent; width: 28px; height: 28px; }
.notif.n-brand .n-ico svg { width: 28px; height: 28px; }
.notif .n-body { min-width: 0; }
.notif .n-body b { font-size: 12px; font-weight: 600; color: #374151; display: block; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif .n-body span { font-size: 11px; color: #98a1ad; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif .n-time { margin-left: auto; align-self: flex-start; font-size: 11px; color: #aab2bd; flex: 0 0 auto; }
@keyframes notifPop {
  0%   { opacity: 0; transform: translateY(10px) scale(.96); }
  6%   { opacity: 1; transform: translateY(0) scale(1); }
  36%  { opacity: 1; transform: translateY(0) scale(1); }
  44%  { opacity: 0; transform: translateY(-10px) scale(.97); }
  100% { opacity: 0; transform: translateY(-10px) scale(.97); }
}

/* leyenda */
.collage-legend { text-align: center; margin-top: 34px; font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); letter-spacing: .02em; }
.collage-legend b { color: var(--text); font-weight: 600; }

/* responsive: la lista se apila a una sola columna */
@media (max-width: 760px) {
  .svc-pair { grid-template-columns: 1fr; }
  .manifesto .notif { position: relative; inset: auto; top: auto; left: auto; right: auto;
    margin: 10px auto 0; opacity: 1; animation: none; width: min(320px, 92%); }
}

@media (prefers-reduced-motion: reduce) {
  .notif { animation: none; opacity: 1; }
}

/* estado "pronto" */
.sc-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; min-height: 296px; }
.sc-soon .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(24,24,27,.09); color: var(--orange); }
.sc-soon .ico svg { width: 24px; height: 24px; }
.sc-soon h4 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.sc-soon p { color: var(--text-faint); font-weight: 500; font-size: 14px; max-width: 340px; }
.sc-soon .soon { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); background: rgba(24,24,27,.10); padding: 4px 11px; border-radius: 999px; }

@media (max-width: 900px) {
  .mad-grid { grid-template-columns: 1fr 1fr; }
  .mad-donut { grid-column: 1 / -1; }
  .donut-wrap { margin-top: 0; }
  .mad-tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .sc-split { grid-template-columns: 1fr; gap: 18px; }
  .sc-stage { min-height: 0; }
  .mad-bar { flex-wrap: wrap; gap: 12px 18px; }
  .mad-tabs { gap: 16px; }
  .mad-grid { grid-template-columns: 1fr; }
  .mad-donut { grid-column: auto; }
  .mad-tiles { grid-template-columns: repeat(2, 1fr); }
  .seo-strip { grid-template-columns: 1fr; gap: 18px; }
  .evt { grid-template-columns: 1fr; }
  .motion-phones { gap: 26px; }
}

/* ---------- Qué hacemos — lista simple minimal ---------- */
.do { padding: 40px 0 100px; }
.do-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.do-head h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; margin-top: 14px; }
.do-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border); }
.do-row {
  display: grid; grid-template-columns: 52px minmax(0,1fr) minmax(0,1.05fr) 34px;
  align-items: center; gap: 22px; padding: 30px 16px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.do-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #18181B, #71717A);
  transform: scaleY(0); transform-origin: center; transition: transform var(--dur-base) var(--ease-out); }
.do-row:hover { background: linear-gradient(90deg, rgba(24,24,27,.05), transparent 70%); }
.do-row:hover::before { transform: scaleY(1); }
.do-n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-faint); }
.do-name { font-size: clamp(24px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1; transition: color var(--dur-base) var(--ease-out); }
.do-row:hover .do-name { color: var(--orange); }
.do-desc { color: var(--text-dim); font-weight: 500; font-size: 15px; line-height: 1.5; }
.do-arrow { justify-self: end; color: var(--text-faint); font-size: 20px; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.do-row:hover .do-arrow { color: var(--orange); transform: translateX(5px); }

@media (max-width: 680px) {
  .do-row { grid-template-columns: 40px 1fr 26px; row-gap: 8px; padding: 24px 12px; }
  .do-desc { grid-column: 2 / 3; }
  .do-arrow { grid-row: 1; grid-column: 3; }
}

/* galería de piezas */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery .piece {
  aspect-ratio: 4/5; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  transition: transform .4s var(--ease);
}
.gallery .piece:hover { transform: translateY(-5px); }
.gallery .piece::after { content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%; filter: blur(34px); opacity: .4; background: var(--c, #18181B); }
.gallery .piece .rombo { position: relative; z-index: 1; width: 14px; height: 14px; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* panel de resultados (ads / seo) */
.panel {
  max-width: 980px; margin: 64px auto 0; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: 0 40px 90px rgba(0,0,0,0.13); padding: 34px; position: relative;
}
.panel .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.panel .panel-head .t { font-weight: 800; font-size: 16px; }
.panel .panel-head .m { font-family: var(--font-mono); font-size: 12px; color: var(--orange); }
.panel .bars { display: flex; align-items: flex-end; gap: 14px; height: 210px; }
.panel .bars .b { flex: 1; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--orange-mid), var(--orange)); opacity: .9; }
.panel .cap { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }

/* antes / después */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; margin: 64px auto 0; }
.ba-card { border-radius: 20px; border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.ba-card .ba-tag { font-family: var(--font-mono); font-size: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.ba-card.after .ba-tag { color: var(--orange); }
.ba-card .ba-body { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; font-weight: 600; }
.ba-card.after .ba-body { background: radial-gradient(60% 60% at 50% 40%, rgba(24,24,27,0.16), transparent 65%), var(--surface); }
@media (max-width: 700px) { .beforeafter { grid-template-columns: 1fr; } }

/* ---------- precios: 3 rectángulos verticales lado a lado ---------- */
.price-list { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-list.cols-4 { max-width: 1120px; grid-template-columns: repeat(4, 1fr); }
.price-row {
  border: 1px solid var(--border); border-radius: 20px; padding: 40px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: var(--surface); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.price-row:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,0.06); }
.price-row h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.price-row .d { font-size: 14px; color: var(--text-dim); font-weight: 500; }
.price-row .amt { font-family: var(--font-mono); font-size: 14px; color: var(--orange); font-weight: 700; white-space: nowrap; margin-top: auto; padding-top: 8px; }
@media (max-width: 760px) { .price-list, .price-list.cols-4 { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- FS — sector de servicio: encabezado + grid de rasgos, en dos columnas
   lado a lado (no apiladas) para usar el ancho completo en vez de dejar medio bloque
   vacío a la derecha. Los lados se alternan sección a sección (.fs.rev) para que las
   cuatro no se sientan copiadas una de otra, y cada una lleva su propio bloom de fondo
   sutil y animado, el mismo lenguaje visual que el hero/manifiesto del inicio. ---------- */
.fs { padding: 96px 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.fs.alt { background: var(--surface); }
.fs-body { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 20px 64px; align-items: center; }
.fs.rev .fs-body { grid-template-columns: 1fr minmax(0, 400px); }
.fs.rev .fs-head { order: 2; }
.fs.rev .fs-grid { order: 1; }
.fs-head { max-width: 420px; }
.fs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; }
.fs-title { display: flex; align-items: center; gap: 16px; }
.fs-title .fs-ico { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(24,24,27,.10); color: var(--orange); transition: transform .45s var(--ease); }
.fs-head:hover .fs-ico { transform: rotate(-8deg) scale(1.06); }
.fs-title .fs-ico svg { width: 22px; height: 22px; }
.fs-title h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.14; }
.fs-desc { margin-top: 18px; font-size: 16px; line-height: 1.64; color: var(--text-dim); font-weight: 500; }
.fs-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--orange); }
.fs-link svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.fs-link:hover svg { transform: translate(2px, -2px); }

/* grid de rasgos, 2x2 junto al encabezado — mismo acento (tick naranja + número mono) más
   un levantamiento sutil al pasar el mouse, igual de simple que el hover de las cards del inicio */
.fs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
.fs-item { position: relative; padding-top: 22px; transition: transform .35s var(--ease); }
.fs-item:hover { transform: translateY(-3px); }
/* v2 (11 sep 2026): rebranding — misma franja corta, ahora en lima en vez
   del gradiente de grises. */
.fs-item::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--accent-lime); transform: scaleX(.636); transform-origin: left; transition: transform .35s var(--ease); }
.fs-item:hover::before { transform: scaleX(1); }
.fs-n { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .05em; margin: 13px 0 10px; }
.fs-item h4 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 9px; }
.fs-item p { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; font-weight: 500; }

@media (max-width: 900px) {
  .fs-body, .fs.rev .fs-body { grid-template-columns: 1fr; gap: 44px; }
  .fs-head, .fs.rev .fs-head, .fs.rev .fs-grid { order: initial; max-width: none; }
}
@media (max-width: 600px) {
  .fs { padding: 72px 0; }
  .fs-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- reveal on scroll ---------- */
:root { --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); }

/* v2 (10 sep 2026): Luis pidió que el aparecer al hacer scroll (en toda la
   página) sea más lento y se sienta más "cool" — sube la duración
   (.7s → 1s en .reveal, .65s → .9s en .stagger) y el recorrido
   (translateY más largo), para que se note más el movimiento en vez de
   sentirse casi instantáneo. */
.reveal, .reveal-late {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(6px);
  transition: opacity 1s var(--ease-reveal), transform 1s var(--ease-reveal), filter 1s var(--ease-reveal);
  will-change: opacity, transform;
}
.reveal.in, .reveal-late.in { opacity: 1; transform: translateY(0); filter: none; }

/* reveal con stagger — los hijos entran en secuencia */
.stagger > * {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal), filter .9s var(--ease-reveal);
  will-change: opacity, transform;
}
.stagger.in > * { opacity: 1; transform: none; filter: none; }

/* despliegue de entrada del hero / título de cada página — al cargar */
.intro-reveal > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(7px);
  transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal), filter .8s var(--ease-reveal);
  will-change: opacity, transform;
}
.intro-reveal.in > * { opacity: 1; transform: none; filter: none; }

/* despliegue automático por sección — cada bloque entra en secuencia */
.auto-reveal > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .65s var(--ease-reveal), transform .65s var(--ease-reveal), filter .65s var(--ease-reveal);
  will-change: opacity, transform;
}
.auto-reveal.in > * { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  /* baseline: apaga todo loop decorativo (glow, cortina, orbe, shine, gradientes)
     y vuelve las transiciones casi instantáneas, sin perder la feedback de estado */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-late, .stagger > *, .auto-reveal > *, .intro-reveal > *, .grad-text.kinetic, .bloom.float { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================
   MINI APPS estilo Apple (.ax) — v1 (25 sep 2026)
   Luis: "mejoremos los gráficos de la web, que se parezcan a los que
   hicimos para social media, algo cool de verdad, tómate el tiempo, que
   sean gráficos estilo apple bien desarrollados". Mismo lenguaje que el
   calendario de servicios.html (.sv-cal-app): superficies blancas,
   radios grandes, sombra suave, colores de sistema (verde/azul/naranja
   de .cal-chk) para dar significado y el lima de marca solo como acento.
   Lo usan ads-seo.html, eventos.html, web.html y paquetes.html. Cada
   página arma su propio contenido encima de estas piezas base.
   Animación: js/main.js agrega .ax-on a cada .ax cuando entra en
   pantalla (trazos que se dibujan, barras que crecen, cifras que
   cuentan desde cero). Sin JS o con reduced-motion todo queda en su
   estado final, nunca vacío.
   ============================================ */
.ax {
  --ax-green: #2D8A56; --ax-blue: #3A82DE; --ax-orange: #E67A35; --ax-red: #EC6A5E; --ax-purple: #8B6CDB;
  position: relative; width: 100%; max-width: 280px; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 24px 48px -24px rgba(17,17,17,.24);
  padding: 14px; text-align: left; color: var(--text); font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.ax.flush { padding: 0; overflow: hidden; }
/* la tarjeta que la contiene nunca se estira por el contenido de la mini app (celular) */
.sv-card:has(.ax), .sv-canvas:has(.ax) { min-width: 0; }

/* cabecera tipo app: ícono de app + nombre + dato a la derecha */
.ax-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ax-app { width: 24px; height: 24px; border-radius: 7px; flex: none; color: #fff; display: flex; align-items: center; justify-content: center; }
.ax-app svg { width: 13px; height: 13px; }
.ax-app.green { background: var(--ax-green); }
.ax-app.blue { background: var(--ax-blue); }
.ax-app.orange { background: var(--ax-orange); }
.ax-app.red { background: var(--ax-red); }
.ax-app.purple { background: var(--ax-purple); }
.ax-app.dark { background: var(--brand-black); color: var(--accent-lime); }
.ax-head b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-head small { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

.ax-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; white-space: nowrap; flex: none; }
.ax-pill > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-pill svg { width: 10px; height: 10px; }
.ax-pill.green { background: rgba(45,138,86,.12); color: #1B6B43; }
.ax-pill.orange { background: rgba(230,122,53,.14); color: #9C4A1A; }
.ax-pill.red { background: rgba(236,106,94,.14); color: #B23A2E; }
.ax-pill.blue { background: rgba(58,130,222,.12); color: #2568B8; }
.ax-pill.gray { background: var(--surface-2); color: var(--text-dim); }

.ax-label { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.ax-big { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }

.ax-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12px; }
.ax-row > span { flex: 1; min-width: 0; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row > b { font-weight: 600; color: var(--text); white-space: nowrap; }

/* control segmentado (Día/Semana/Mes del calendario, en chico) */
.ax-seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: 9px; padding: 2px; }
.ax-seg span { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: var(--text-dim); padding: 5px 0; border-radius: 7px; }
.ax-seg span.on { background: var(--white); color: var(--text); box-shadow: 0 1px 3px rgba(17,17,17,.12); }

/* switch de Ajustes (encendido) */
.ax-toggle { width: 32px; height: 19px; border-radius: 99px; background: #34C759; position: relative; flex: none; transition: background .45s ease var(--d, .4s); }
.ax-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transform: translateX(13px); transition: transform .45s var(--ease) var(--d, .4s); }

/* barra de progreso */
.ax-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ax-bar b { display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: var(--ax-green); transform-origin: left center; transition: transform 1.4s var(--ease) .35s; }

/* trazos SVG que se dibujan: pathLength="100" en el SVG y --to = cuánto
   queda sin dibujar al final (0 para una línea completa, 100 menos el
   valor para un anillo parcial) */
.ax .ax-draw { stroke-dasharray: 100 100; stroke-dashoffset: var(--to, 0); transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.ax .ax-fade { transition: opacity .9s ease 1s; }
.ax .ax-grow { transform-origin: bottom; transform-box: fill-box; transition: transform 1.1s var(--ease) calc(.3s + var(--i, 0) * .07s); }

/* estado "antes de entrar": solo existe cuando main.js está activo
   (html.ax-js). Sin JS o con reduced-motion, todo se ve completo. */
.ax-js .ax:not(.ax-on) .ax-draw { stroke-dashoffset: 100; }
.ax-js .ax:not(.ax-on) .ax-fade { opacity: 0; }
.ax-js .ax:not(.ax-on) .ax-grow { transform: scaleY(0); }
.ax-js .ax:not(.ax-on) .ax-bar b { transform: scaleX(0); }
.ax-js .ax:not(.ax-on) .ax-toggle { background: var(--surface-3); }
.ax-js .ax:not(.ax-on) .ax-toggle::after { transform: none; }

/* punto "en vivo" con halo que late */
.ax-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ax-red, #EC6A5E); flex: none; }
.ax-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: axPulse 1.8s ease-out infinite; }
@keyframes axPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }

/* anillo tipo Actividad/Fitness con cifra al centro */
.ax-ring { position: relative; flex: none; }
.ax-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ax-ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }

/* título que termina con la parte en degradado + punto: el punto no
   puede quedar solo en otra línea en celular (25 sep 2026) */
.nw { white-space: nowrap; }

/* ---------- texto explicativo entre bloques (1 oct 2026) ----------
   Luis pidió texto "repartido de izquierda a derecha", en dos líneas, para
   explicar mejor cada servicio entre gráfico y gráfico. .sv-lead es ese
   párrafo ancho con título; .sv-points, los puntos explicados debajo. */
.sv-lead { max-width: 1000px; margin: 0 auto; text-align: center; }
.sv-lead h3 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; margin-bottom: 14px; color: var(--text); }
.sv-lead p { font-size: 20px; line-height: 1.6; color: var(--text-dim); letter-spacing: -.008em; text-wrap: balance; }
.sv-lead p strong { color: var(--text); font-weight: 500; }
.sv-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 1060px; margin: 44px auto 0; text-align: left; }
.sv-points.three { grid-template-columns: repeat(3, 1fr); max-width: 940px; }
.sv-points > div { padding-top: 16px; border-top: 1px solid var(--border-strong); }
.sv-points small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--accent-lime-dark); letter-spacing: .04em; }
.sv-points b { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.sv-points p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
@media (max-width: 900px) { .sv-points, .sv-points.three { grid-template-columns: repeat(2, 1fr); max-width: 560px; } }
@media (max-width: 640px) { .sv-lead p { font-size: 17px; } .sv-points, .sv-points.three { grid-template-columns: 1fr; max-width: 400px; gap: 18px; } }

/* ==========================================================================
   Bloque de planes (1 oct 2026, 4ta). Luis: "en ese espacio con la imagen
   de fondo van a ir donde la gente elige el plan o paquete, y aplica para
   todos los servicios", con el CTA para agendar más claro. Reemplaza al
   .sv-final-cta de cada página de servicio: tres planes sobre la foto del
   cielo (el del medio recomendado) y una barra final para agendar.
   ========================================================================== */
.plan-cta { position: relative; overflow: hidden; margin: 0 64px; border-radius: 40px; padding: 84px 0 64px;
  background: url('../assets/hero-final.jpg') 50% 30% / cover no-repeat; box-shadow: 0 8px 24px -16px rgba(20,20,25,.14); }
.plan-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,.62) 0%, rgba(6,12,22,.38) 45%, rgba(6,12,22,.55) 100%); }
.pc-inner { position: relative; z-index: 1; }
.pc-head { text-align: center; max-width: 760px; margin: 0 auto; }
.pc-head h2 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; color: #fff; }
.pc-head h2 em { font-style: normal; color: var(--accent-lime); }
.pc-head p { margin: 16px auto 0; max-width: 600px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.9); }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin: 44px auto 0; align-items: stretch; }
.pc-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 28px 26px 26px; border-radius: 28px;
  background: rgba(255,255,255,.95); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.pc-card .pc-tag { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); }
.pc-card h3 { margin-top: 6px; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--text); }
.pc-card .pc-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.pc-card ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pc-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text); }
.pc-card li svg { width: 16px; height: 16px; flex: none; margin-top: 1px; padding: 3px; border-radius: 50%; background: rgba(193,234,80,.35); color: #3A4D12; }
.pc-card .pc-btn { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 99px; font-size: 14.5px; font-weight: 600; text-decoration: none;
  background: #F2F3F5; color: var(--text); transition: transform .3s var(--ease), background .3s ease; }
.pc-card .pc-btn:hover { transform: translateY(-2px); background: #E7E9EC; }
.pc-card .pc-btn svg { width: 15px; height: 15px; }
.pc-card.rec { background: var(--brand-black); box-shadow: 0 0 0 1.5px rgba(193,234,80,.55), 0 36px 70px -30px rgba(0,0,0,.6); }
.pc-card.rec .pc-tag { color: var(--accent-lime); }
.pc-card.rec h3 { color: #fff; }
.pc-card.rec .pc-sub { color: rgba(255,255,255,.72); }
.pc-card.rec ul { border-top-color: rgba(255,255,255,.12); }
.pc-card.rec li { color: rgba(255,255,255,.9); }
.pc-card.rec li svg { background: var(--accent-lime); color: var(--brand-black); }
.pc-card.rec .pc-btn { background: var(--accent-lime); color: var(--brand-black); box-shadow: 0 14px 30px -12px rgba(193,234,80,.6); }
.pc-card.rec .pc-btn:hover { background: #d4f279; }
.pc-card .pc-badge { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: var(--accent-lime); color: var(--brand-black); }
.pc-inc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1080px; margin: 22px auto 0; }
.pc-inc .lbl { width: 100%; text-align: center; font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 2px; }
.pc-inc span:not(.lbl) { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: #fff; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.pc-inc span i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-lime); }
.pc-book { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1080px; margin: 22px auto 0; padding: 18px 18px 18px 28px; border-radius: 28px;
  background: rgba(255,255,255,.95); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); text-align: left; }
.pc-book .ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand-black); color: var(--accent-lime); }
.pc-book .ic svg { width: 22px; height: 22px; }
.pc-book .tx { flex: 1; min-width: 0; }
.pc-book .tx b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.pc-book .tx span { display: block; margin-top: 3px; font-size: 14px; color: var(--text-dim); }
.pc-book .btn-book { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; padding: 18px 30px; border-radius: 99px; text-decoration: none; font-size: 16px; font-weight: 600;
  background: var(--brand-black); color: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pc-book .btn-book svg { width: 17px; height: 17px; color: var(--accent-lime); }
.pc-book .btn-book:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(17,17,17,.6); }
@media (max-width: 980px) {
  .pc-grid { grid-template-columns: 1fr; max-width: 460px; }
  .pc-book { flex-direction: column; align-items: stretch; text-align: center; max-width: 460px; padding: 24px 20px 20px; }
  .pc-book .ic { margin: 0 auto; }
  .pc-book .btn-book { justify-content: center; }
  .pc-inc { max-width: 460px; }
}
@media (max-width: 760px) {
  .plan-cta { margin: 0 16px; border-radius: 28px; padding: 56px 0 20px; }
  .pc-head h2 { font-size: 34px; }
  .pc-head p { font-size: 16px; }
  .pc-grid { margin-top: 30px; gap: 12px; }
  .pc-card { padding: 24px 20px 20px; border-radius: 24px; }
  .pc-card h3 { font-size: 24px; }
  .pc-book .tx b { font-size: 17px; }
  .pc-book .btn-book { padding: 16px 22px; font-size: 15px; }
}

/* v (1 oct 2026, 6ta): Luis comparó el bloque de planes con el
   "¿Empezamos?" del inicio: tiene que verse igual de liviano. Cielo claro
   (el mismo velo suave del inicio), títulos con peso 500, sin tarjeta
   negra (la recomendada va blanca con borde lima) y la barra final como
   la del inicio: texto blanco sobre el cielo y un botón blanco tipo
   píldora. */
.plan-cta { background-position: 75% 20%; }
.plan-cta::before { background: linear-gradient(180deg, rgba(10,20,35,.26) 0%, rgba(10,20,35,.10) 45%, rgba(10,20,35,.16) 100%); }
.pc-head h2 { font-weight: 500; text-shadow: 0 2px 24px rgba(12,40,70,.18); }
.pc-head p { color: rgba(255,255,255,.88); text-shadow: 0 1px 14px rgba(12,40,70,.25); }
.pc-card { background: rgba(255,255,255,.94); box-shadow: 0 10px 26px -14px rgba(0,0,0,.28); }
.pc-card h3 { font-weight: 500; }
.pc-card li { color: var(--text-dim); }
.pc-card li svg { background: rgba(193,234,80,.3); color: #4E6A12; }
.pc-card .pc-btn { background: #fff; box-shadow: inset 0 0 0 1px var(--border); font-weight: 500; }
.pc-card .pc-btn:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); }
.pc-card.rec { background: #fff; box-shadow: 0 0 0 2px var(--accent-lime), 0 18px 40px -18px rgba(0,0,0,.35); }
.pc-card.rec .pc-tag { color: var(--text-faint); }
.pc-card.rec h3 { color: var(--text); }
.pc-card.rec .pc-sub { color: var(--text-dim); }
.pc-card.rec ul { border-top-color: var(--border); }
.pc-card.rec li { color: var(--text-dim); }
.pc-card.rec li svg { background: rgba(193,234,80,.3); color: #4E6A12; }
.pc-card.rec .pc-btn { background: var(--accent-lime); color: var(--brand-black); box-shadow: none; }
.pc-book { background: transparent; box-shadow: none; padding: 26px 6px 0; }
.pc-book .ic { display: none; }
.pc-book .tx b { color: #fff; font-weight: 500; font-size: 22px; text-shadow: 0 2px 18px rgba(12,40,70,.25); }
.pc-book .tx span { color: rgba(255,255,255,.82); font-size: 15px; }
.pc-book .btn-book { background: #fff; color: var(--text); font-weight: 500; padding: 19px 34px; box-shadow: 0 10px 26px -10px rgba(0,0,0,.4); }
.pc-book .btn-book svg { color: var(--text); }
.pc-book .btn-book:hover { box-shadow: 0 14px 32px -10px rgba(0,0,0,.45); }
.pc-inc span:not(.lbl) { background: rgba(255,255,255,.18); }
@media (max-width: 980px) { .pc-book { padding: 22px 0 0; } }

/* v (1 oct 2026, 7ma): Luis mandó de referencia una página de precios
   oscura con tarjetas de vidrio ("que se vean así, cool"). Fondo casi
   negro con brillo azul y lima, la palabra "Planes" gigante detrás,
   tarjetas translúcidas con borde fino y la recomendada con brillo lima.
   Lo de agendar pasa a su propio bloque claro (.ask-cta), como el
   "¿Empezamos?" del inicio. */
.plan-cta { background: radial-gradient(60% 55% at 50% 62%, rgba(22,102,197,.55), transparent 70%), radial-gradient(40% 35% at 78% 85%, rgba(193,234,80,.16), transparent 70%), #05070B; padding: 96px 0 80px; }
.plan-cta::before { display: none; }
.pc-bgword { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); font-size: clamp(120px, 17vw, 250px); font-weight: 600; letter-spacing: -.05em; line-height: 1;
  color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; pointer-events: none; white-space: nowrap; }
.pc-head h2 { text-shadow: none; }
.pc-head p { color: rgba(255,255,255,.66); text-shadow: none; }
.pc-card, .pc-card.rec { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.pc-card.rec { background: rgba(255,255,255,.1); border-color: rgba(193,234,80,.55); box-shadow: 0 0 40px -6px rgba(193,234,80,.25), 0 30px 60px -30px rgba(0,0,0,.6); }
.pc-card .pc-tag, .pc-card.rec .pc-tag { color: rgba(255,255,255,.55); }
.pc-card h3, .pc-card.rec h3 { color: #fff; font-size: 30px; }
.pc-card .pc-sub, .pc-card.rec .pc-sub { color: rgba(255,255,255,.62); }
.pc-card ul, .pc-card.rec ul { border-top-color: rgba(255,255,255,.12); }
.pc-card li, .pc-card.rec li { color: rgba(255,255,255,.86); }
.pc-card li svg, .pc-card.rec li svg { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.55); }
.pc-card.rec li svg { color: var(--accent-lime); box-shadow: inset 0 0 0 1.4px rgba(193,234,80,.7); }
.pc-card .pc-btn { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.pc-card .pc-btn:hover { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.pc-card.rec .pc-btn { background: #fff; color: var(--brand-black); }
.pc-card.rec .pc-btn:hover { background: #fff; }
.pc-card .pc-badge { background: var(--accent-lime); }
.pc-inc .lbl { color: rgba(255,255,255,.55); }
.pc-inc span:not(.lbl) { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }

.ask-cta { position: relative; overflow: hidden; margin: 16px 64px 0; padding: 72px 0; border-radius: 40px; background: url('../assets/hero-final.jpg') 75% 20% / 145% auto no-repeat; }
.ask-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,20,35,.32) 0%, rgba(10,20,35,.16) 42%, rgba(10,20,35,.04) 78%, rgba(10,20,35,0) 100%); }
.ask-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; text-align: left; }
.ask-cta h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.03em; color: #fff; }
.ask-cta p { margin-top: 12px; max-width: 460px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.8); }
.ask-btn { flex: none; display: inline-flex; align-items: center; padding: 19px 38px; border-radius: 99px; background: #fff; color: var(--text); font-size: 16.5px; font-weight: 500; text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.4); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ask-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -10px rgba(0,0,0,.45); }
@media (max-width: 760px) {
  .ask-cta { margin: 12px 16px 0; border-radius: 28px; padding: 48px 0; background-size: cover; }
  .ask-inner { flex-direction: column; align-items: flex-start; }
  .pc-bgword { top: 40px; }
}
.pc-bgword { top: 215px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 80%); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 760px) { .pc-bgword { top: 170px; font-size: 96px; } }
.pc-grid { margin-top: 110px; }
.pc-bgword { top: 270px; }
@media (max-width: 760px) { .pc-bgword { display: none; } .pc-grid { margin-top: 30px; } }
.pc-grid { margin-top: 170px; }
.pc-bgword { top: 236px; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.02) 75%); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 760px) { .pc-grid { margin-top: 30px; } }

/* v (2 oct 2026, 8va): Luis: "el fondo no es negro, es el cielo, pero
   el Planes sí me gusta", descriptivo en una sola línea y tarjetas "más
   flacas". Vuelve la foto del cielo con un velo suave; se queda la
   palabra "Planes" gigante detrás y las tarjetas de vidrio, ahora más
   angostas y con menos relleno. Social Media vuelve a su cierre abierto
   (.sv-final-cta) porque su plan se va adaptando. */
.plan-cta { background: url('../assets/hero-final.jpg') 75% 20% / cover no-repeat; }
.plan-cta::before { display: block; background: linear-gradient(180deg, rgba(10,24,42,.30) 0%, rgba(10,24,42,.16) 45%, rgba(10,24,42,.30) 100%); }
.pc-bgword { z-index: 0; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 78%); -webkit-background-clip: text; background-clip: text; }
.pc-head h2 { text-shadow: 0 2px 24px rgba(12,40,70,.2); }
.pc-head p { max-width: none; white-space: nowrap; color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(12,40,70,.25); }
.pc-grid { max-width: 900px; gap: 14px; }
.pc-card, .pc-card.rec { padding: 24px 22px 22px; border-radius: 26px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 24px 50px -30px rgba(8,24,44,.55); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.pc-card.rec { background: rgba(255,255,255,.24); border-color: var(--accent-lime); box-shadow: 0 0 36px -8px rgba(193,234,80,.45), 0 24px 50px -30px rgba(8,24,44,.55); }
.pc-card h3, .pc-card.rec h3 { font-size: 26px; }
.pc-card .pc-tag, .pc-card.rec .pc-tag { color: rgba(255,255,255,.75); }
.pc-card .pc-sub, .pc-card.rec .pc-sub { color: rgba(255,255,255,.82); }
.pc-card ul, .pc-card.rec ul { margin-top: 16px; padding-top: 16px; gap: 10px; border-top-color: rgba(255,255,255,.25); }
.pc-card li, .pc-card.rec li { color: #fff; font-size: 13.5px; }
.pc-card li svg { box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.75); }
.pc-card .pc-btn { margin-top: 20px; height: 44px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.pc-card .pc-btn:hover { background: rgba(255,255,255,.28); }
.pc-inc .lbl { color: rgba(255,255,255,.85); }
.pc-inc span:not(.lbl) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
@media (max-width: 980px) { .pc-grid { max-width: 400px; } }
@media (max-width: 760px) { .pc-head p { white-space: normal; } }

/* v (2 oct 2026, 8va b): Luis marcó cómo quiere los planes: tarjetas
   justo debajo del descriptivo, más angostas y altas, juntas al centro.
   Se quita "Todos los niveles incluyen". */
.pc-grid { max-width: 830px; gap: 14px; margin-top: 28px; }
.pc-bgword { top: 300px; }
@media (max-width: 980px) { .pc-grid { max-width: 400px; } }
@media (max-width: 760px) { .pc-grid { margin-top: 28px; } }

/* v (2 oct 2026, 8va c): Luis pidió tarjetas más simples con "Plan
   Simple / Elegido / Pro" en todas las páginas y un espacio para el precio.
   Orden: nombre, una línea, precio grande, botón y la lista sin líneas. */
.pc-card, .pc-card.rec { padding: 28px 24px 26px; }
.pc-card h3, .pc-card.rec h3 { margin-top: 0; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.pc-card .pc-sub, .pc-card.rec .pc-sub { margin-top: 4px; font-size: 14px; }
.pc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; color: #fff; }
.pc-price b { font-size: 48px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.pc-price span { font-size: 14px; color: rgba(255,255,255,.75); }
.pc-card .pc-btn { margin-top: 22px; }
.pc-card ul, .pc-card.rec ul { margin-top: 24px; padding-top: 0; border-top: 0; gap: 12px; flex: 1; }
.pc-card li svg, .pc-card.rec li svg { width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.pc-card.rec li svg { background: var(--accent-lime); color: var(--brand-black); }
.pc-card .pc-badge { top: 26px; right: 22px; }
@media (max-width: 760px) { .pc-price b { font-size: 42px; } }
.plan-cta .pc-grid { padding-top: 14px; }
.pc-card { overflow: visible; }
.pc-card .pc-badge { top: -13px; right: auto; left: 50%; transform: translateX(-50%); padding: 6px 14px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.3); }

/* v (2 oct 2026, 8va d): Luis: "más largos los recuadros". Tarjetas más
   altas y angostas, como su boceto (proporción vertical ~ 0.6). */
@media (min-width: 981px) {
  .pc-grid { max-width: 780px; gap: 14px; }
  .pc-card, .pc-card.rec { min-height: 580px; padding: 36px 24px 30px; }
  .pc-price { margin-top: 30px; }
  .pc-card .pc-btn { margin-top: 28px; }
  .pc-card ul, .pc-card.rec ul { margin-top: 32px; gap: 16px; }
}
.pc-card .pc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-card ul, .pc-card.rec ul { flex: none; }
.pc-card .pc-btn { order: 5; margin-top: auto; }
@media (min-width: 981px) { .pc-card ul, .pc-card.rec ul { margin-bottom: 32px; } .pc-card .pc-btn { margin-top: auto; } }
@media (max-width: 980px) { .pc-card .pc-btn { margin-top: 24px; } }

/* v (2 oct 2026, 8va e): Luis: "¿Tienes dudas?" en fondo negro, para que
   no sea un copia y pega del cielo de los precios. */
.ask-cta { background: var(--brand-black); }
.ask-cta::before { display: none; }
.ask-cta p { color: rgba(255,255,255,.66); }
.ask-btn { background: var(--accent-lime); color: var(--brand-black); font-weight: 600; box-shadow: none; }
.ask-btn:hover { box-shadow: 0 14px 32px -12px rgba(193,234,80,.5); }

/* 13 oct 2026 (giro a socio): con "Socio CREVO" y "Diagnóstico gratuito"
   el menú chocaba con el botón entre 921 y 1180 px. */
@media (min-width: 921px) and (max-width: 1180px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
}
@media (min-width: 921px) and (max-width: 1060px) {
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 12.5px; }
  .nav-inner { padding: 0 18px; }
}