/* ==========================================================================
   Pablo Morales F. — hoja de estilos del sitio
   1. Tokens        6. Hero            11. Trabajos y mockups
   2. Base          7. Tarjetas        12. Cifras
   3. Utilidades                       13. Bandas CTA / FAQ
   4. Botones       9. Proceso         14. Pie de pagina
   5. Cabecera     10. Precios         15. Responsive
                                       16. Movimiento
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #12141c;
  --ink-soft: #1b1e2a;
  --ink-line: #2b2f3d;
  --paper: #ffffff;
  --bone: #f4f2ec;
  --bone-deep: #ebe7de;
  --line-base: #e2ded4;
  --line: var(--line-base);
  /* Hilo mas marcado para superficies hueso, donde --line casi no se ve (1,2:1) */
  --line-strong: #cfcbc2;
  --muted: #5d6371;
  /* --muted-light es decorativo (iconos apagados, separadores): como texto no
     llega a 2,7:1 de contraste. Para texto secundario siempre --muted. */
  --muted-light: #9aa0ae;
  --accent: #ffc531;
  --accent-deep: #e9ac10;
  --green: #16a34a;
  /* Texto sobre tinta: cuerpo y etiquetas. Antes habia siete grises distintos. */
  --on-dark: #b9bfcd;
  --on-dark-muted: #8f97a7;
  /* Tintes de hover derivados de la paleta */
  --paper-soft: #fbfaf8;
  --paper-warm: #fffaef;

  --wrap: 1200px;
  --gutter: 24px;
  --radius: 3px;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala de texto secundario: dos tamanos en vez de seis casi iguales */
  --text-sm: 0.95rem;
  --text-md: 1.06rem;
  /* Texto de interfaz en negrita (menu, botones, enlaces con flecha, WhatsApp)
     y su version corta (boton pequeno, notas mono). Antes: 0,9 / 0,92 / 0,93 /
     0,94 y 0,85 / 0,86 repartidos por el archivo. */
  --text-ui: 0.94rem;
  --text-xs: 0.85rem;
  /* Parrafo de entrada (lead y texto del hero comparten tamano) */
  --text-lead: clamp(1.05rem, 1.4vw, 1.19rem);
  /* Etiquetas mono en mayusculas: tres tamanos, ninguno por debajo de 10,5px */
  --label-xs: 0.66rem;
  --label: 0.72rem;
  --label-lg: 0.78rem;
  --track-caps: 0.14em;
  --track-mono: 0.04em;
  --lh-body: 1.6;
  --lh-lead: 1.5;
  /* Listas compactas (checks de los packs, notas de las cuotas) */
  --lh-tight: 1.45;

  /* Escala de espacio (multiplos de 4): todo margen o gap interno sale de aqui */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --pad-card: clamp(28px, 3vw, 40px);
  --pad-card-lg: clamp(32px, 3.4vw, 48px);

  /* Movimiento: una curva y dos tiempos para todos los hovers */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .18s;
  --t-base: .3s;

  --section: clamp(68px, 7.4vw, 106px);
  /* Hueco reducido entre dos secciones seguidas del mismo color de fondo */
  --section-join: clamp(42px, 4.4vw, 66px);
}
/* Donde el navegador sabe mezclar colores, los derivados salen de la paleta */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --line-strong: color-mix(in srgb, var(--line-base), var(--ink) 10%);
    --paper-soft: color-mix(in srgb, var(--bone) 35%, var(--paper));
    --paper-warm: color-mix(in srgb, var(--accent) 8%, var(--paper));
  }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  /* Solo se cargan Archivo 400/700 e IBM Plex Mono 500: sin pesos falsos */
  font-synthesis: none;
}
/* El suavizado en escala de grises adelgaza el texto: solo ayuda al texto claro
   sobre tinta, asi que se aplica a las superficies oscuras y no a todo el sitio */
.topbar, .hero, .page-head, .cta-band, .card--dark, .section--dark, .site-footer,
.btn--dark, .wa {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

/* 1,05 es para el h1 (una o dos lineas); el h2 llega a tres y necesita 1,08 */
h1 { font-size: clamp(2.75rem, 5.6vw, 4.3rem); }
h2 { font-size: clamp(1.95rem, 3.8vw, 3rem); line-height: 1.08; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.25; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
/* Sin viudas de una palabra al final del parrafo (donde el navegador lo soporta) */
p, li, summary { text-wrap: pretty; }

::selection { background: var(--accent); color: var(--ink); }

/* Anillo de foco: tinta sobre superficies claras, ambar sobre las oscuras y
   tinta otra vez sobre ambar. El desplazamiento de 3px deja ver el fondo, asi
   que lo que cuenta es el contraste del anillo con la superficie, no con el
   elemento. (El ambar oscuro sobre blanco se quedaba en 1,9:1.) */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.topbar :focus-visible, .hero :focus-visible, .page-head :focus-visible, .cta-band :focus-visible,
.card--dark :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible,
.skip:focus-visible { outline-color: var(--accent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 12px; top: 12px; }

/* 3. Utilidades ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 920px; }

.section { padding-block: var(--section); }
/* Sobre hueso el hilo normal (1,2:1) desaparece: estas secciones usan el fuerte */
.section--bone { background: var(--bone); --line: var(--line-strong); }
.section--dark { background: var(--ink); color: #fff; }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }

/* Dos secciones seguidas sobre el mismo fondo suman dos paddings enteros y
   dejan una franja vacia enorme. Cuando cambia el color de fondo el aire si
   hace falta, asi que solo se recorta el hueco entre secciones del mismo tono.
   Las secciones --tight quedan fuera: ya traen su propio ritmo. */
.section + .section:not(.section--tight) { padding-top: var(--section-join); }
.section + .section--bone:not(.section--tight),
.section + .section--dark:not(.section--tight),
.section--bone + .section:not(.section--bone):not(.section--tight),
.section--dark + .section:not(.section--dark):not(.section--tight) { padding-top: var(--section); }
.section--bone + .section--bone:not(.section--tight),
.section--dark + .section--dark:not(.section--tight) { padding-top: var(--section-join); }

/* Etiquetas mono en mayusculas: una sola definicion para todas. Cada una solo
   declara despues lo que la diferencia (tamano xs/lg, color, posicion). */
.eyebrow, .hero__meta, .hero__panel-head span, .card__index,
.plan__flag, .plan__option-name em,
.breadcrumb, .footer__grid h4, .work p.work__sector, .work__shot--empty, .slot dt,
.stat__label, .quote__by span, .brand__tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
/* Mono en caja baja (cifras, notas, pie): tracking corto */
.topbar, .plan__unit, .plan__note, .footer__bar {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: var(--track-mono);
}

.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--muted);
  margin: 0 0 var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent-deep);
  flex: none;
}
/* La barra se centra en la primera linea, no en el bloque: en etiquetas de
   dos lineas quedaba flotando entre ambas */
.eyebrow::before { margin-top: calc((var(--lh-body) * 1em - 2px) / 2); }
.eyebrow--center { justify-content: center; }
/* Sobre tinta el eyebrow pasa a ambar: en gris (--muted) se quedaba en 2,96:1.
   Con dos clases gana tambien a ".cta-band p", que lo pisaba por accidente. */
.section--dark .eyebrow, .page-head .eyebrow, .cta-band .eyebrow { color: var(--accent); }
.section--dark .eyebrow::before, .page-head .eyebrow::before, .cta-band .eyebrow::before { background: var(--accent); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
  max-width: 62ch;
}
.section--dark .lead, .page-head .lead { color: var(--on-dark); }

.section-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
/* Ritmo titulo -> lead: el salto grande va despues del elemento grande.
   (Antes ".section-head p" le colaba 20px de margen superior al eyebrow.) */
h1 + .lead, h2 + .lead { margin-top: var(--s-6); }

.mark {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 90%;
  padding-inline: 0.05em;
}

/* 4. Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--s-4) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  /* Al pasar el raton el boton se levanta y deja una sombra solida: la misma
     firma que el panel del hero y el pack destacado, en miniatura */
  --btn-shadow: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast) var(--ease); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--btn-shadow); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: none; box-shadow: none; transition-duration: .06s; }

.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-deep); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-soft); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--light { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--dark, .btn--light { --btn-shadow: var(--accent); }
/* Boton ambar sobre fondo tinta: la sombra tiene que ser clara para verse */
.hero .btn--accent, .page-head .btn--accent, .cta-band .btn--accent,
.site-footer .btn--accent, .section--dark .btn--accent { --btn-shadow: #fff; }

.btn--sm { padding: 11px 18px; font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Botonera tras un bloque de texto: antes eran margenes inline en el HTML */
.hero__panel .btn-row, .footer__brand .btn-row { margin-top: var(--s-6); }
.works + .btn-row { margin-top: var(--s-8); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: var(--text-ui);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
/* La flecha avanza con transform (compositor), no animando el gap (layout) */
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* 5. Cabecera -------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--label-lg);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar__list { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.topbar__item svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.topbar a { transition: color var(--t-fast) var(--ease); }
.topbar a:hover { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: 0 10px 28px -22px rgba(18, 20, 28, .25); }
/* Barra de progreso de lectura: linea ambar que avanza sobre el hilo inferior.
   El valor --scroll (0 a 1) lo actualiza site.js */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--scroll, 0));
  transform-origin: left;
  pointer-events: none;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 78px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand__mark {
  width: 52px; height: 52px;
  display: block;
  object-fit: contain;
  flex: none;
}
.brand__name { font-weight: 700; font-size: var(--text-md); letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.brand__tag {
  display: block;
  font-size: var(--label-xs);
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: var(--s-7); }
.nav a {
  position: relative;
  font-size: var(--text-ui);
  font-weight: 700;
  padding-block: 6px;
}
/* Subrayado ambar que crece desde la izquierda en vez de aparecer de golpe */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-4); }

.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.lang a { padding: 7px 11px; color: var(--muted); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lang a + a { border-left: 1px solid var(--line); }
.lang a:hover { background: var(--bone); color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  place-items: center;
}
.burger svg { width: 20px; height: 20px; }
/* Las tres rayas se convierten en una X cuando el menu esta abierto */
.burger path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* El menu movil se despliega con una transicion de altura (0fr -> 1fr) en vez
   de aparecer de golpe. Cerrado queda invisible tambien para el teclado. */
.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--paper);
  transition: grid-template-rows var(--t-base) var(--ease);
}
.mobile-nav > .wrap { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s var(--t-base); }
.mobile-nav.is-open { grid-template-rows: 1fr; }
.mobile-nav.is-open > .wrap { visibility: visible; transition-delay: 0s; }
.mobile-nav a:first-child { border-top: 1px solid var(--line); }
.mobile-nav a {
  display: block;
  padding: var(--s-4) 0;
  font-weight: 700;
  font-size: var(--text-md);
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin: var(--s-6) 0; }

/* 6. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
/* Rejilla tecnica de fondo (hero y cabeceras interiores). Va una celda mas
   grande por arriba y por la izquierda para poder desplazarla en bucle sin que
   se note el salto. El desvanecido hacia los bordes lo pinta ::after por encima
   (tinta sobre tinta): asi la rejilla se mueve en el compositor sin repintar. */
.hero::before, .page-head::before {
  content: "";
  position: absolute;
  inset: -76px 0 0 -76px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 76px 76px;
  pointer-events: none;
}
.hero::after, .page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::after { background: radial-gradient(120% 90% at 78% 10%, transparent 10%, var(--ink) 72%); }
.page-head::after { background: radial-gradient(110% 100% at 85% 0%, transparent 5%, var(--ink) 70%); }
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
  /* Abajo: el solape de las tarjetas (hasta 140px) mas un tramo de aire para
     que los avales no toquen su borde */
  padding-block: clamp(72px, 8vw, 120px) clamp(190px, 16vw, 230px);
}
.hero h1 { max-width: 15ch; }
.hero__text {
  margin: var(--s-6) 0 var(--s-7);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--on-dark);
  max-width: 54ch;
}
.hero__text strong { color: #fff; font-weight: 700; }
/* Avales justo debajo de los botones, sin hilo: caben en una sola linea en la
   columna de 583px (a 1200px de wrap) con tamano label y hueco s-4 (575px) */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
  font-size: var(--label);
  color: var(--on-dark-muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__meta svg { width: 14px; height: 14px; color: var(--accent); }

/* Panel lateral del hero */
.hero__panel {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  padding: clamp(26px, 2.4vw, 34px);
  /* Sombra desplazada: la misma firma que la captura de "Que recibes" */
  box-shadow: 10px 10px 0 var(--accent);
}
.hero__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: var(--s-2);
}
.hero__panel-head h2 {
  font-size: var(--text-md);
  letter-spacing: -0.02em;
}
/* Parrafo suelto del panel (paginas interiores) */
.hero__panel > p { color: var(--on-dark); font-size: var(--text-sm); }
.hero__panel-head span {
  font-size: var(--label-xs);
  color: var(--on-dark);
  border: 1px solid var(--ink-line);
  padding: 5px 9px;
  flex: none;
}
/* La demo son tres pasos en orden, no tres checks iguales: numeros en chapa
   ambar unidos por un carril, el mismo lenguaje que la seccion de proceso */
.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.demo-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  font-size: var(--text-sm);
  color: var(--on-dark);
  line-height: var(--lh-lead);
}
.demo-steps li:last-child { padding-bottom: 0; }
.demo-steps li > span:last-child { padding-top: 5px; }
.demo-steps__num {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1;
}
/* Carril que une una chapa con la siguiente: arranca 6px bajo la chapa
   (padding 16 + chapa 32 + 6) y termina 6px antes de la chapa siguiente,
   que empieza 16px (padding) por debajo del borde de este li */
.demo-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(var(--s-4) + 32px + 6px);
  bottom: calc(6px - var(--s-4));
  width: 2px;
  background: rgba(255, 197, 49, .35);
}
.demo-steps strong { color: #fff; font-weight: 700; }

/* 7. Tarjetas -------------------------------------------------------------- */
.cards-overlap {
  position: relative;
  z-index: 2;
  margin-top: clamp(-140px, -11vw, -110px);
}
/* Banda de tarjetas: un solo panel con sombra ambar (la misma firma que el
   panel del hero) dividido en columnas por hilos. Sin placas: el icono va en
   tinta junto a la etiqueta mono, el titulo mas grande y el enlace al pie
   sobre un hilo. En una columna (movil) los hilos pasan a ser horizontales. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 14px 14px 0 var(--accent);
}
.card {
  background: var(--paper);
  padding: var(--pad-card-lg) var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-right: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease);
}
.card:last-child { border-right: 0; }
.card:hover { background: var(--bone); }
.card__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-5); }
.card__icon { display: inline-grid; place-items: center; color: var(--ink); }
.card__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.card__index { color: var(--muted); }
.card h3 { font-size: 1.45rem; letter-spacing: -0.02em; }
.card p { color: var(--muted); font-size: var(--text-sm); max-width: 36ch; }
.card__foot { margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.card .link-arrow { margin: 0; }

.card--dark { background: var(--ink); color: #fff; }
.card--dark:hover { background: var(--ink-soft); }
.card--dark p { color: var(--on-dark); }
.card--dark .card__icon { color: #fff; }
.card--dark .card__foot { border-top-color: var(--ink-line); }
@media (max-width: 900px) {
  .grid-cards { box-shadow: 8px 8px 0 var(--accent); }
  .card { border-right: 0; border-bottom: 1px solid var(--line); }
  .card:last-child { border-bottom: 0; }
}

/* Lista con carril + visual fijo (home, "Que recibes"). Patron de Stripe y
   Superlist: la captura se queda fija a la izquierda y hace zoom a la zona de
   la web que ilustra el beneficio activo; los beneficios van a la derecha en
   una lista vertical con hilo. El activo lo decide site.js por posicion de
   scroll (el ultimo cuyo borde superior ha pasado la linea de lectura), asi
   que da igual la velocidad a la que se baje: siempre acaba en el correcto. */
.feature-scroll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.feature-scroll__stage { order: -1; align-self: stretch; }
.feature-scroll .stage { position: sticky; top: calc(78px + var(--s-7)); }
.feature-scroll__note { margin-top: var(--s-7); color: var(--muted); font-size: var(--text-sm); max-width: 48ch; }
.feature-scroll__note .link-arrow { margin-top: var(--s-3); }

.feature-rail {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  border-left: 2px solid var(--line);
}
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon text" "icon tag";
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-content: center;
  /* Cada beneficio ocupa un tramo de scroll holgado: asi el zoom de cada uno
     se ve bajando a ritmo normal, no solo muy despacio */
  min-height: clamp(180px, 24vh, 240px);
  padding: var(--s-6) 0 var(--s-6) var(--s-6);
  transition: opacity var(--t-base) var(--ease);
}
/* Tramo ambar del carril que marca el beneficio activo */
.feature::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease);
}
.feature.is-active::before { transform: none; }
.feature__icon {
  grid-area: icon;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.feature__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.feature.is-active .feature__icon { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.feature h3 { grid-area: title; align-self: center; }
.feature > p { grid-area: text; color: var(--muted); font-size: var(--text-sm); max-width: 44ch; }
.feature p.feature__tag { grid-area: tag; color: var(--muted); display: flex; align-items: center; gap: 10px; margin-top: var(--s-1); }
.feature__tag::before { content: ""; width: 22px; height: 2px; background: var(--accent-deep); flex: none; }
/* Con JS, los beneficios que no estan activos se atenuan un poco (Superlist) */
.js .feature-rail .feature:not(.is-active) { opacity: .62; }

/* Escenario: marco con la captura y, debajo, el nombre del beneficio activo
   (fuera del marco para no tapar lo que se ensena). El zoom se hace con un
   solo transform (desplazar + escalar, origen fijo arriba a la izquierda):
   --z es el aumento y --px/--py el punto de la captura que se centra; el
   clamp impide que el encuadre se salga de la imagen. Animar solo transform,
   y no transform-origin, evita el bandazo que se veia al bajar rapido. */
.stage { margin: 0; position: relative; }
.stage__frame {
  aspect-ratio: 3888 / 2178;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 14px 14px 0 var(--accent);
  background: var(--ink);
}
.stage__img {
  width: 100%; height: 100%;
  object-fit: cover;
  --z: 1; --px: 50%; --py: 50%;
  transform-origin: 0 0;
  transform:
    translate(
      clamp(calc((1 - var(--z)) * 100%), calc(50% - var(--px) * var(--z)), 0%),
      clamp(calc((1 - var(--z)) * 100%), calc(50% - var(--py) * var(--z)), 0%)
    )
    scale(var(--z));
  transition: transform 1s var(--ease);
  will-change: transform;
}
/* Encuadres (medidos sobre la captura, en % de ancho y alto), uno por
   beneficio y en orden de lectura: cada uno ensena justo lo que promete.
   brand -> logo y foto real del negocio en la portada (arriba a la izq.)
   cta   -> botones "Ver proyectos" y "WhatsApp" (abajo a la izq.)
   copy  -> titular grande con antetitulo y texto de apoyo (centro)
   full  -> la web entera, cierre de "todo incluido" */
.stage[data-focus="brand"] .stage__img { --z: 1.8; --px: 28%; --py: 20%; }
.stage[data-focus="cta"] .stage__img   { --z: 3.4; --px: 34%; --py: 92%; }
.stage[data-focus="copy"] .stage__img  { --z: 1.45; --px: 53%; --py: 58%; }
.stage__caption {
  display: flex; align-items: center; gap: 10px;
  margin-top: calc(14px + var(--s-4));
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--label-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.stage__caption::before { content: ""; width: 26px; height: 2px; background: var(--accent-deep); flex: none; }

@media (max-width: 900px) {
  /* En movil el orden es: cabecera (eyebrow, titulo, lead), captura fija bajo
     la cabecera del sitio y, debajo, la lista de beneficios y la nota. Para
     poder intercalar la captura entre la cabecera y la lista, los dos
     envoltorios pasan a display: contents y la columna a flex; asi el sticky
     de la captura tiene todo el recorrido de la lista. */
  .feature-scroll { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .feature-scroll__stage, .feature-scroll__copy { display: contents; }
  .feature-scroll .stage { order: 1; position: sticky; top: 66px; z-index: 3; background: var(--paper); margin-top: var(--s-5); padding-block: var(--s-3) var(--s-4); }
  .feature-rail { order: 2; margin-top: var(--s-5); }
  .feature-scroll__note, .feature-scroll__copy .btn-row { order: 3; }
  .feature-scroll .stage__frame { box-shadow: 8px 8px 0 var(--accent); }
  .feature-scroll .stage__caption { font-size: 0.6rem; margin-top: calc(8px + var(--s-3)); }
  .feature { min-height: 0; padding-block: var(--s-5); }
  /* La etiqueta del beneficio ya se lee bajo la captura fija: no repetirla */
  .feature p.feature__tag { display: none; }
}

/* 9. Proceso --------------------------------------------------------------- */
/* Acordeon de pasos + escenario (patron de Squarespace/Hostinger/Linear): a la
   izquierda los pasos, abiertos de uno en uno; a la derecha una escena por
   paso (chat, demo, ajustes, publicada / diagnostico, presupuesto, entrega).
   Sin JS se ven todos los pasos abiertos y la primera escena. */
.process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.process__stage { order: 2; position: sticky; top: calc(78px + var(--s-7)); }
.process__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.process__item { border-bottom: 1px solid var(--line); }
.process__head { margin: 0; font: inherit; }
.process__head button {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-5);
  padding: var(--s-5) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.process__num {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bone);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.process__title { font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.25; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.process__meta {
  font-family: var(--mono); font-weight: 500; font-size: var(--label-xs);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--muted-light);
  white-space: nowrap;
}
.process__head button:hover .process__title { color: var(--ink); }
.process__item.is-open .process__num { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.process__item.is-open .process__title { color: var(--ink); }
.process__item.is-open .process__meta { color: var(--muted); }
/* El cuerpo se despliega en altura (0fr -> 1fr), como el menu movil */
.process__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-base) var(--ease); }
.process__body > div { min-height: 0; overflow: hidden; }
.process__body p { color: var(--muted); font-size: var(--text-sm); max-width: 44ch; padding: 0 0 var(--s-6) calc(52px + var(--s-5)); }
.js .process__item:not(.is-open) .process__body { grid-template-rows: 0fr; }
.js .process__item:not(.is-open) .process__body > div { visibility: hidden; transition: visibility 0s var(--t-base); }

/* Escenas: solo se ve la del paso abierto */
.scene { display: none; }
.process__stage[data-active="1"] .scene[data-scene="1"],
.process__stage[data-active="2"] .scene[data-scene="2"],
.process__stage[data-active="3"] .scene[data-scene="3"],
.process__stage[data-active="4"] .scene[data-scene="4"] { display: block; }
.scene__label {
  font-family: var(--mono); font-weight: 500; font-size: var(--label);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.scene__label::before { content: ""; width: 26px; height: 2px; background: var(--accent-deep); flex: none; }

/* Chat: burbujas sobre panel tinta */
.scene--chat .scene__panel {
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--accent);
  padding: var(--pad-card);
  display: grid;
  gap: var(--s-3);
  box-shadow: 14px 14px 0 var(--accent);
}
.bubble {
  margin: 0;
  max-width: 78%;
  justify-self: start;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  color: var(--on-dark);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.bubble--out { justify-self: end; background: var(--accent); border-color: var(--accent); color: var(--ink); }
.bubble small { display: block; margin-top: var(--s-1); font-family: var(--mono); font-size: var(--label-xs); letter-spacing: var(--track-mono); opacity: .7; }

/* Marco con la captura, chapas y marcadores de ajuste encima */
.scene--frame .scene__shot {
  position: relative;
  aspect-ratio: 3888 / 2178;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 14px 14px 0 var(--accent);
  background: var(--ink);
}
.scene--frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene__chip {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  background: var(--accent); color: var(--ink);
  padding: 7px 10px;
  font-family: var(--mono); font-weight: 500; font-size: var(--label-xs);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  white-space: nowrap;
}
.pin {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 500; font-size: var(--label-xs);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink);
}
.pin::before { content: ""; width: 14px; height: 14px; background: var(--accent); border: 2px solid var(--ink); flex: none; }
.pin span { background: var(--accent); padding: 4px 7px; }
/* Posiciones sobre la captura: logo en la cabecera (arriba a la izquierda),
   textos sobre el titular grande del centro, fotos sobre la fachada abajo a
   la derecha */
.pin--1 { left: 28.5%; top: 5.5%; }
.pin--2 { left: 44%; top: 52%; }
.pin--3 { left: 68%; top: 80%; }

/* Ticket (web publicada): lista de filas con hilos, valor a la derecha */
.scene--ticket .scene__panel {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: var(--paper);
  padding: var(--s-2) var(--pad-card) var(--pad-card);
  box-shadow: 14px 14px 0 var(--accent);
}
.scene__rows { list-style: none; margin: 0; padding: 0; }
.scene__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.scene__rows li:last-child { border-bottom: 0; }
.scene__rows b { font-family: var(--mono); font-weight: 500; font-size: var(--label); letter-spacing: var(--track-mono); color: var(--muted); text-align: right; }
.scene__rows li.is-ok b { color: var(--ink); }
.scene__rows li.is-ok b::before { content: "✓ "; color: var(--accent-deep); }
.scene__foot { margin-top: var(--s-4); display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; font-weight: 700; font-size: var(--text-sm); }
.scene__foot .scene__chip { position: static; }

/* Reproductor de pasos (port del "step-player" de Rare UI): puntos en una
   pista; el paso activo se estira en una barra que se llena (--p, de 0 a 1,
   lo escribe site.js). Solo existe con JS. */
.step-player {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  color: var(--muted);
}
.step-player__control {
  width: 40px; height: 40px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.step-player__control:hover { border-color: var(--ink); }
.step-player__control:active { transform: scale(.92); }
.step-player__control svg { width: 20px; height: 20px; fill: currentColor; }
.step-player__control path { transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); transform-origin: 12px 12px; }
.step-player__control path:not(.step-player__play) { opacity: 0; transform: scale(.82); }
.step-player[data-state="playing"] .step-player__play,
.step-player[data-state="finished"] .step-player__play { opacity: 0; transform: scale(.82); }
.step-player[data-state="playing"] .step-player__pause,
.step-player[data-state="finished"] .step-player__replay { opacity: 1; transform: none; }
.step-player__track {
  flex: 1;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
}
.step-player__step {
  position: relative;
  width: 8px; height: 8px;
  padding: 0; border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: width .42s var(--ease), background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
/* Zona de toque de 36px alrededor de cada punto (el punto mide 8px) */
.step-player__step::after { content: ""; position: absolute; inset: -14px; }
.step-player__step:hover { transform: scale(1.3); }
.step-player__step[data-state="past"] { background: var(--ink); }
.step-player__step[data-state="active"] { width: 66px; transform: none; background: var(--line-strong); }
.step-player__fill {
  position: absolute; inset: 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent-deep);
  border-radius: 999px;
}
.step-player__step[data-state="past"] .step-player__fill { background: var(--ink); }
.step-player__step:focus-visible { outline-offset: 4px; }

@media (max-width: 900px) {
  /* En movil el escenario va encima y se queda fijo bajo la cabecera mientras
     se tocan los pasos; la columna pasa a flex (en una rejilla de una columna
     el sticky no tendria recorrido) */
  .process { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-7); }
  .step-player { margin-top: var(--s-3); }
  .process__stage { order: -1; top: 66px; z-index: 3; background: var(--paper); padding-block: var(--s-3) var(--s-5); }
  .scene--chat .scene__panel, .scene--frame .scene__shot,
  .scene--ticket .scene__panel { box-shadow: 8px 8px 0 var(--accent); }
  .scene--chat .scene__panel { padding: var(--s-5); gap: var(--s-2); }
  .bubble { max-width: 88%; font-size: var(--text-xs); padding: var(--s-2) var(--s-3); }
  .scene__rows li { padding: var(--s-3) 0; font-size: var(--text-xs); }
  .scene--ticket .scene__panel { padding: 0 var(--s-5) var(--s-5); }
  .process__head button { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--s-4); }
  .process__num { width: 44px; height: 44px; font-size: 1.15rem; }
  .process__meta { display: none; }
  .process__body p { padding-left: calc(44px + var(--s-4)); }
  /* Marcadores mas discretos sobre la captura pequena */
  .pin { font-size: 0.55rem; gap: 5px; }
  .pin::before { width: 10px; height: 10px; }
  .pin span { padding: 3px 5px; }
  .scene__foot { flex-wrap: wrap; }
}

/* 10. Precios -------------------------------------------------------------- */
/* Banda de precios: un solo panel con sombra ambar y dos columnas separadas
   por un hilo (la misma pieza que las tarjetas de arranque). Las filas de las
   dos columnas van alineadas con subgrid (nombre, texto, precio, cuotas,
   lista, boton a la misma altura); sin subgrid cada columna fluye sola. */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 14px 14px 0 var(--accent);
}
.plan {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  padding: var(--pad-card-lg) var(--pad-card);
  border-right: 1px solid var(--line);
}
.plan:last-child { border-right: 0; }
/* El pack destacado: filo ambar por arriba */
.plan--featured { box-shadow: inset 0 3px 0 var(--accent); }
.plan__flag { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: var(--s-5); }
.plan__flag::before { content: ""; width: 26px; height: 2px; background: var(--accent-deep); flex: none; }
.plan__flag--quiet { color: var(--muted); }
.plan__flag--quiet::before { background: var(--line-strong); }
.plan__name { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.plan__desc { color: var(--muted); font-size: var(--text-sm); margin-top: var(--s-3); max-width: 40ch; }
/* Cifra y unidad alineadas por linea base, sin paddings magicos */
.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-7);
  padding: var(--s-6) 0 var(--s-5);
  border-top: 1px solid var(--line);
}
.plan__amount {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan__unit { font-size: var(--label-lg); color: var(--muted); }
/* Cuentakilometros (port del "animated-counter" de Rare UI): cada cifra es una
   rueda de 0 a 9 que gira hasta su valor (--d) cuando el precio entra en
   pantalla. Cifras tabulares para que el ancho no baile mientras gira. */
.counter { display: inline-flex; align-items: baseline; font-weight: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.counter__wheels { display: inline-flex; align-items: baseline; }
.odo { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; }
.odo__wheel { display: block; transform: translateY(0); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s); }
.odo__wheel span { display: block; height: 1em; line-height: 1; }
.counter.is-on .odo__wheel { transform: translateY(calc(var(--d) * -1em)); }
/* Cuotas mensuales: filas con hilo (nombre, precio a la derecha y nota
   debajo); la recomendada lleva un filo ambar a la izquierda y la chapa en
   linea con el nombre */
.plan__options { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.plan__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  row-gap: 2px;
  align-items: baseline;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.plan__option:last-child { border-bottom: 1px solid var(--line); }
.plan__option-name { font-weight: 700; font-size: var(--text-sm); }
.plan__option-name em {
  font-style: normal;
  font-size: var(--label-xs);
  background: var(--accent);
  color: var(--ink);
  padding: 3px 7px;
  margin-left: 8px;
  vertical-align: 2px;
  white-space: nowrap;
}
.plan__option-price { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; white-space: nowrap; }
.plan__option-price > span {
  font-family: var(--mono);
  font-size: var(--label-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 2px;
}
.plan__option small { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--muted); line-height: var(--lh-tight); }
.plan__option.is-recommended { position: relative; padding-left: var(--s-4); }
.plan__option.is-recommended::before {
  content: "";
  position: absolute;
  left: 0; top: var(--s-3); bottom: var(--s-3);
  width: 2px;
  background: var(--accent);
}
.plan__list { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; gap: var(--s-3); align-content: start; }
.plan__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  align-items: start;
}
.plan__list svg { width: 19px; height: 19px; color: var(--accent-deep); margin-top: 2px; }
.plan__list li.is-off { color: var(--muted); }
.plan__list li.is-off svg { color: var(--muted-light); }
.plan__foot { margin-top: auto; }
.plan__note {
  margin-top: var(--s-3);
  font-size: var(--label);
  color: var(--muted);
  text-align: center;
}
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; box-shadow: 8px 8px 0 var(--accent); }
  .plan { display: flex; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--line); }
  .plan:last-child { border-bottom: 0; }
  .plan__foot { margin-top: 0; }
}

/* 11. Trabajos y mockups --------------------------------------------------- */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-7);
}
.work {
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
/* Sombra solida, como el resto del sitio; nada de difuminados */
.work:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--accent); }
.work__shot { border-bottom: 1px solid var(--line); background: var(--bone); }
.work__body { padding: var(--s-6) clamp(22px, 2.4vw, 32px) var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); flex: 1; }
/* ".work p" delante: la regla generica del parrafo es mas especifica */
.work p.work__sector { color: var(--muted); }
.work p { color: var(--muted); font-size: var(--text-sm); }

/* Hueco de proyecto todavia sin publicar */
.works--single { grid-template-columns: minmax(0, 400px); }
.work--empty { border-style: dashed; background: transparent; }
.work--empty:hover { transform: none; box-shadow: none; }
.work__shot--empty {
  aspect-ratio: 8 / 5;
  display: grid;
  place-items: center;
  background: var(--bone);
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
}
.work--empty h3 { color: var(--muted); font-weight: 700; }
.slot { margin: var(--s-1) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s-4); }
.slot dt { color: var(--muted); padding-top: 2px; }
.slot dd { margin: 0; font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }

/* 12. Cifras --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.stat { background: var(--ink); padding: var(--s-7) var(--s-6); }
.stat__num {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
}
.stat__label {
  margin-top: var(--s-3);
  color: var(--on-dark-muted);
}

/* 13. Bandas CTA / FAQ / testimonios --------------------------------------- */
.cta-band {
  background: var(--ink);
  color: #fff;
  border-left: 6px solid var(--accent);
  padding: clamp(36px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cta-band h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.cta-band p { color: var(--on-dark); margin-top: var(--s-4); max-width: 58ch; }

.faq { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.faq details { background: var(--paper); }
.section--bone .faq details { background: var(--bone); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-6) 44px var(--s-6) 0;
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* Barra ambar en el margen izquierdo de la pregunta abierta (y al pasar el raton) */
.faq summary::before {
  content: "";
  position: absolute;
  left: -14px; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-fast) var(--ease);
}
.faq summary:hover::before, .faq details[open] summary::before { transform: scaleY(1); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 13px; height: 13px;
  border-right: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq p { padding: 0 44px var(--s-6) 0; color: var(--muted); font-size: var(--text-sm); }

.quote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.quote__item { background: var(--paper); padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--s-4); }
.quote__item blockquote { margin: 0; font-size: var(--text-md); line-height: var(--lh-lead); letter-spacing: -0.02em; }
.quote__by { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.quote__by strong { display: block; font-size: var(--text-sm); }
.quote__by span { color: var(--muted); }
.quote__stars { display: flex; gap: 3px; color: var(--accent-deep); }
.quote__stars svg { width: 16px; height: 16px; }

/* Cabecera de paginas interiores */
.page-head {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-head__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 6.5vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
}
/* Cabecera sin panel lateral (paginas legales) */
.page-head__inner--single { grid-template-columns: minmax(0, 1fr); }
.page-head__inner--single .lead { max-width: 54ch; }

/* Paginas legales: texto corrido con apartados numerados y ficha de datos */
.legal h2 { font-size: var(--text-md); letter-spacing: -0.02em; margin-top: var(--s-8); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: var(--s-4); color: var(--muted); max-width: 66ch; }
.legal p strong { color: var(--ink); }
.legal__data { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin: var(--s-5) 0; max-width: 66ch; }
.legal__data div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); background: var(--paper); padding: var(--s-3) 0; font-size: var(--text-sm); }
.legal__data dt { font-family: var(--mono); font-weight: 500; font-size: var(--label-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.legal__data dd { margin: 0; }
.footer__bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-line); }
.footer__bar a:hover { color: #fff; text-decoration-color: var(--accent); }
.legal__date { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); margin-top: var(--s-8); }
@media (max-width: 520px) { .legal__data div { grid-template-columns: 1fr; gap: 2px; } }
.page-head h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); max-width: 18ch; }
.breadcrumb {
  color: var(--on-dark-muted);
  margin-bottom: var(--s-6);
}
.breadcrumb a { transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
/* Separador a media opacidad del texto: en --ink-line (1,3:1) no se veia */
.breadcrumb span { opacity: .5; padding-inline: var(--s-2); }

/* 14. Pie de pagina -------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-dark); border-top: 3px solid var(--accent); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.15fr 1.15fr;
  gap: clamp(32px, 3.5vw, 56px);
  padding-block: clamp(56px, 6vw, 80px) var(--s-9);
}
.footer__grid h4 {
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.footer__brand .brand__mark { border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(255,255,255,.16); }
.footer__brand .brand__name { color: #fff; }
.footer__brand p { margin-top: var(--s-5); font-size: var(--text-sm); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--text-sm); }
.footer__list a, .footer__contact a { transition: color var(--t-fast) var(--ease); }
.footer__list a:hover { color: #fff; }
.footer__contact { display: grid; gap: var(--s-3); font-size: var(--text-sm); }
.footer__contact div { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); align-items: start; }
.footer__contact svg { width: 17px; height: 17px; color: var(--accent); margin-top: 3px; }
.footer__contact a:hover { color: #fff; }
.map {
  border: 1px solid var(--ink-line);
  aspect-ratio: 4 / 3;
  width: 100%;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  transition: filter var(--t-base) var(--ease);
}
.map:hover { filter: none; }
.footer__bar {
  border-top: 1px solid var(--ink-line);
  padding-block: var(--s-6) var(--s-7);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--label);
  color: var(--on-dark-muted);
}

/* Boton flotante de WhatsApp */
.wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--text-ui);
  /* Sombra solida en tinta, la misma firma que los botones */
  box-shadow: 4px 4px 0 var(--ink);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.wa:hover { background: #12833c; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
/* Flota sobre cualquier fondo: anillo doble (blanco + tinta) visible en todos */
.wa:focus-visible { outline: 2px solid var(--paper); outline-offset: 0; box-shadow: 0 0 0 4px var(--ink); }
.wa svg { width: 22px; height: 22px; flex: none; }
/* Anillo que se expande desde el borde del boton (animacion en el bloque 16) */
.wa::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
}

/* Pildora de progreso (port del "scroll-progress" de Rare UI): chip fijo abajo
   en el centro con un anillo de lectura y el nombre de la seccion; al pulsar
   se convierte en un menu de secciones. Ancho y alto los fija site.js midiendo
   la capa activa (la pildora mide siempre lo que ocupa la etiqueta mas larga,
   asi no cambia de tamano al pasar de seccion); aqui solo se anima el cambio.
   Aparece pasada la portada. */
.spill {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 65;
  transform: translate(-50%, 24px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility 0s var(--t-base);
}
.spill.is-shown { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.spill__surface {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  overflow: hidden;
  background: rgba(18, 20, 28, .9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-font-smoothing: antialiased;
  transition: width .45s var(--ease), height .45s var(--ease);
}
.spill__pill, .spill__menu {
  position: absolute; left: 0; top: 0;
  width: max-content;
  transition: opacity .24s var(--ease), filter .24s var(--ease);
}
.spill__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 9px;
  border: 0; background: none; color: inherit;
  font-weight: 700; font-size: var(--text-xs); letter-spacing: -0.01em;
  cursor: pointer;
}
.spill__ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.spill__ring circle { fill: none; stroke-width: 2.6; stroke: rgba(255, 255, 255, .18); }
.spill__arc { stroke: var(--accent) !important; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.spill__label { position: relative; display: block; height: 1.2em; overflow: hidden; white-space: nowrap; text-align: center; }
.spill__label span { position: absolute; left: 0; top: 0; width: 100%; line-height: 1.2; animation: spill-in .22s var(--ease) both; }
.spill__label span.is-out { animation: spill-out .22s var(--ease) both; }
@keyframes spill-in  { from { opacity: 0; filter: blur(2px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes spill-out { to { opacity: 0; filter: blur(2px); transform: translateY(-4px); } }
.spill__menu { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.spill__menu button {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 12px;
  border: 0; border-radius: var(--radius);
  background: none; color: rgba(255, 255, 255, .6);
  font-weight: 700; font-size: var(--text-xs); letter-spacing: -0.01em;
  text-align: left; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.spill__menu button i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .3); flex: none; transition: background-color var(--t-fast) var(--ease); }
.spill__menu button:hover { color: #fff; }
.spill__menu button.is-active { color: #fff; background: rgba(255, 255, 255, .1); }
.spill__menu button.is-active i { background: var(--accent); }
/* Capa visible segun estado: la otra queda apagada y sin puntero */
.spill__menu { opacity: 0; filter: blur(4px); pointer-events: none; }
.spill.is-open .spill__menu { opacity: 1; filter: none; pointer-events: auto; }
.spill.is-open .spill__pill { opacity: 0; filter: blur(4px); pointer-events: none; }
.spill :focus-visible { outline-color: var(--accent); outline-offset: -3px; }
/* Con el menu abierto la pildora entra un poco en la capa de "menu" del reveal:
   escalonar delays de entrada de los items */
.spill.is-open .spill__menu li { animation: spill-in .3s var(--ease) both; }
.spill.is-open .spill__menu li:nth-child(2) { animation-delay: .03s; }
.spill.is-open .spill__menu li:nth-child(3) { animation-delay: .06s; }
.spill.is-open .spill__menu li:nth-child(4) { animation-delay: .09s; }
.spill.is-open .spill__menu li:nth-child(5) { animation-delay: .12s; }
.spill.is-open .spill__menu li:nth-child(6) { animation-delay: .15s; }
.spill.is-open .spill__menu li:nth-child(7) { animation-delay: .18s; }
@media (max-width: 720px) {
  .spill { bottom: 16px; }
  .spill__pill { padding: 7px 14px 7px 8px; }
}

/* 16. Movimiento ----------------------------------------------------------- */
@keyframes rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slide  { from { transform: translateY(20px); } to { transform: none; } }
@keyframes draw-x { from { background-size: 0 .3em; } to { background-size: 100% .3em; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes draw-line { from { transform: scaleX(0); } to { transform: none; } }
@keyframes grid-drift { to { transform: translate3d(76px, 76px, 0); } }
@keyframes wa-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .75; } 45%, 100% { transform: scale(1.45); opacity: 0; } }

/* Todo lo que se mueve solo vive aqui dentro: quien pide menos movimiento en
   el sistema ve la pagina quieta y completa desde el primer frame. */
@media (prefers-reduced-motion: no-preference) {

  /* Entrada del hero al cargar: cada pieza llega un poco despues de la anterior.
     El h1 solo se desliza (sin opacidad) para no retrasar el LCP. */
  .page-head .breadcrumb { animation: rise .6s ease both; }
  .hero h1, .page-head h1 { animation: slide .7s cubic-bezier(.2, .7, .2, 1) both; }
  .page-head .eyebrow { animation: rise .6s ease .08s both; }
  .hero h1 .mark { background-size: 0 .3em; animation: draw-x .5s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .hero__text, .page-head .lead { animation: rise .6s ease .16s both; }
  .hero .btn-row { animation: rise .6s ease .26s both; }
  .hero__meta { animation: rise .6s ease .36s both; }
  .hero__panel { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .demo-steps li { animation: rise .5s ease both; }
  .demo-steps li:nth-child(1) { animation-delay: .6s; }
  .demo-steps li:nth-child(2) { animation-delay: .78s; }
  .demo-steps li:nth-child(3) { animation-delay: .96s; }
  .demo-steps li::before { transform-origin: top; animation: grow-y .35s ease both; }
  .demo-steps li:nth-child(1)::before { animation-delay: .82s; }
  .demo-steps li:nth-child(2)::before { animation-delay: 1s; }

  /* Rejilla del hero a la deriva: una celda (76px) cada 24 s */
  .hero::before, .page-head::before { animation: grid-drift 24s linear infinite; }

  /* Aparicion progresiva al hacer scroll: el contenedor pinta fondo y bordes y
     sus hijos suben escalonados (80 ms entre uno y el siguiente) */
  .js .reveal { transition: background-color .5s ease, border-color .5s ease; }
  .js .reveal:not(.is-in) { background-color: transparent; border-color: transparent; }
  .js .reveal > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.is-in > * { opacity: 1; transform: none; }
  .js .reveal > :nth-child(2) { transition-delay: .08s; }
  .js .reveal > :nth-child(3) { transition-delay: .16s; }
  .js .reveal > :nth-child(4) { transition-delay: .24s; }
  .js .reveal > :nth-child(5) { transition-delay: .32s; }
  .js .reveal > :nth-child(6) { transition-delay: .4s; }
  .js .reveal > :nth-child(7) { transition-delay: .48s; }
  .js .reveal > :nth-child(8) { transition-delay: .56s; }

  /* Cada escena del proceso entra subiendo al cambiar de paso; las burbujas
     del chat llegan una detras de otra */
  .scene { animation: rise .45s var(--ease) both; }
  .bubble { animation: rise .4s var(--ease) both; }
  .bubble:nth-child(2) { animation-delay: .15s; }
  .bubble:nth-child(3) { animation-delay: .4s; }
  .bubble:nth-child(4) { animation-delay: .65s; }
  .bubble:nth-child(5) { animation-delay: .9s; }
  .pin { animation: rise .4s var(--ease) both; }
  .pin--2 { animation-delay: .2s; }
  .pin--3 { animation-delay: .4s; }

  /* Hilo ambar de los eyebrows: se dibuja al entrar en pantalla, ligado al
     scroll (Chrome/Edge). Donde no hay soporte se ve fijo, como hasta ahora. */
  @supports (animation-timeline: view()) {
    .eyebrow { view-timeline: --eyebrow block; }
    .eyebrow::before {
      transform-origin: left;
      animation: draw-line linear both;
      animation-timeline: --eyebrow;
      animation-range: cover 0% cover 12%;
    }
  }

  /* WhatsApp: entra tarde, cuando ya se ha leido el hero, y avisa con un anillo */
  .wa { animation: wa-in .5s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
  .wa::before { animation: wa-ring 4s ease-out 2.4s infinite; }
}

/* Hovers que levantan la pieza y dejan sombra solida: solo con raton, en
   pantallas tactiles el estado se quedaria pegado tras el toque */
@media (hover: hover) {
  .process__head button:hover .process__num { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 15. Responsive ----------------------------------------------------------- */
@media (max-width: 1120px) {
  .nav { gap: 22px; }
  .nav a { font-size: var(--text-xs); }
}

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: grid; }
  .hero__inner { grid-template-columns: 1fr; padding-block: 56px 156px; }
  .hero h1 { max-width: 100%; }
  .page-head__inner { grid-template-columns: 1fr; align-items: start; }
  .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar { font-size: var(--label); }
  .topbar__inner { min-height: 0; padding-block: var(--s-2); flex-wrap: nowrap; gap: var(--s-3); }
  .topbar__list { gap: var(--s-4); }
  /* El telefono no se parte nunca; cede el texto de la izquierda */
  .topbar__list:last-child { flex: none; }
  .topbar a.topbar__item { white-space: nowrap; }
  .topbar__extra { display: none; }
  .header__inner { min-height: 66px; gap: var(--s-3); }
  .header__actions { gap: 10px; }
  .brand__mark { width: 44px; height: 44px; }
  .brand__name { font-size: 1rem; }
  .brand__tag { display: none; }
  .lang a { padding: 6px 9px; }
  .cards-overlap { margin-top: -80px; }
  .hero__inner { padding-bottom: 124px; }
  .footer__grid { grid-template-columns: 1fr; }
  .wa { padding: 14px; }
  .wa span { display: none; }
}