/* ============================================================
   LICISCOPE — LANDING
   Paleta, tipografía y reglas de uso según el brandbook v1.0.
   Todo el color y la tipografía se controlan desde :root, así
   que cambiar la identidad = editar variables, no buscar por
   todo el archivo.
   ============================================================ */

:root {
  /* --- Paleta de marca --- */
  --grafito:      #1B1E23;  /* primario: fondos oscuros, texto sobre claro */
  --naranja:      #FF6B1A;  /* acento: SOLO CTA, enlaces, iconos, cifras */
  --naranja-dark: #E85A0C;  /* hover del acento (más oscuro) */
  --hueso:        #F4F3F0;  /* fondo claro por defecto */
  --gris-tecnico: #7A8085;  /* texto secundario, metadatos, leyendas */
  --blanco:       #FFFFFF;

  /* Derivados para superficies y bordes (respetan el 60/30/10) */
  --grafito-soft: #23272D;  /* tarjetas sobre fondo grafito */
  --linea-clara:  #E2E0DB;  /* bordes sobre hueso */
  --linea-oscura: #33383F;  /* bordes sobre grafito */

  /* --- Tipografía --- */
  --font-titulares: "Space Grotesk", system-ui, sans-serif;
  --font-cuerpo:    "Inter", system-ui, sans-serif;
  --font-datos:     "IBM Plex Mono", ui-monospace, monospace;

  /* --- Layout --- */
  --maxw: 1120px;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --shadow: 0 1px 2px rgba(27, 30, 35, .04), 0 8px 24px rgba(27, 30, 35, .06);
}

/* ------------------------------------------------------------
   Reset ligero
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-cuerpo);
  font-size: 1.0625rem;      /* ~17px base para pantalla */
  line-height: 1.6;
  color: var(--grafito);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-titulares); line-height: 1.12; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Utilidades */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.eyebrow {
  font-family: var(--font-datos);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--naranja);
  margin: 0 0 .9rem;
}
.mono { font-family: var(--font-datos); }
.muted { color: var(--gris-tecnico); }

/* ------------------------------------------------------------
   Wordmark (logotipo de texto)
   Preparado para sustituir por <img> el día que haya logo.
   ------------------------------------------------------------ */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-titulares);
  font-weight: 700;
  letter-spacing: .16em;   /* tracking amplio (carácter instrumental) */
  text-transform: uppercase;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}
.wordmark .wm-accent { color: var(--naranja); }   /* fragmento acentuado del wordmark de texto */
.wordmark--nav  { font-size: 1.15rem; }
.wordmark--foot { font-size: 1.3rem; }

/* Imagen del logotipo (sustituye al wordmark de texto cuando hay archivo).
   Altura fija + ancho automático: cambiar el logo por otro de distinta
   proporción no rompe el layout. */
.brand-logo { display: block; width: auto; }
.wordmark--nav  .brand-logo { height: 30px; }
.wordmark--foot .brand-logo { height: 40px; }
@media (max-width: 640px) {
  .wordmark--nav .brand-logo { height: 26px; }
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-cuerpo);
  font-weight: 600;
  font-size: 1rem;
  padding: .8rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--naranja); color: var(--blanco); }
.btn--primary:hover { background: var(--naranja-dark); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(255,255,255,.06); }
.btn--outline-dark { background: transparent; border-color: var(--linea-clara); color: var(--grafito); }
.btn--outline-dark:hover { border-color: var(--grafito); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------
   Header / navegación (sticky)
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(27, 30, 35, .92);
  backdrop-filter: blur(8px);
  color: var(--hueso);
  border-bottom: 1px solid var(--linea-oscura);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { color: var(--hueso); font-size: .95rem; opacity: .82; transition: opacity .15s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; background: none; border: 0; color: var(--hueso); cursor: pointer; padding: .4rem; }

/* ------------------------------------------------------------
   Secciones — ritmo de color 60/30/10
   ------------------------------------------------------------ */
section { padding-block: var(--section-y); }
.section-dark  { background: var(--grafito); color: var(--hueso); }
.section-light { background: var(--hueso);  color: var(--grafito); }
.section-bone  { background: var(--blanco); color: var(--grafito); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; }
.section-head p { margin-top: .9rem; color: var(--gris-tecnico); font-size: 1.1rem; }
.section-dark .section-head p { color: #B9BEC4; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero { padding-top: clamp(3.5rem, 9vw, 6.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
.hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.hero h1 .accent { color: var(--naranja); }
.hero__sub { margin-top: 1.3rem; font-size: 1.2rem; color: #C7CBD0; max-width: 34ch; }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__note { margin-top: 1.1rem; font-size: .9rem; color: var(--gris-tecnico); }

/* Tarjeta lateral del hero */
.hero__card {
  background: var(--grafito-soft);
  border: 1px solid var(--linea-oscura);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  overflow: hidden; /* recorta las esquinas del carrusel al radio de la tarjeta */
}

/* Carrusel deslizable del informe de muestra (scroll-snap nativo:
   funciona con gesto táctil sin JS de arrastre propio). */
.pdf-carousel { position: relative; }
.pdf-carousel__badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: var(--naranja); color: var(--blanco);
  font-family: var(--font-datos); font-weight: 600; font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
}
.pdf-carousel__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pdf-carousel__viewport::-webkit-scrollbar { display: none; }
.pdf-carousel__track { display: flex; }
.pdf-carousel__img {
  flex: none; width: 100%; scroll-snap-align: center; display: block;
  aspect-ratio: 900 / 1273; object-fit: contain; background: var(--blanco);
}
.pdf-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(27,30,35,.65); color: var(--hueso); font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center; transition: background-color .15s ease;
}
.pdf-carousel__nav:hover { background: var(--naranja); }
.pdf-carousel__nav:disabled { opacity: .35; cursor: default; }
.pdf-carousel__nav:disabled:hover { background: rgba(27,30,35,.65); }
.pdf-carousel__nav--prev { left: .6rem; }
.pdf-carousel__nav--next { right: .6rem; }
.pdf-carousel__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; background: var(--grafito-soft); border-top: 1px solid var(--linea-oscura);
}
.pdf-carousel__dots { display: flex; gap: .4rem; }
.pdf-carousel__dot {
  width: 6px; height: 6px; border-radius: 3px; background: var(--linea-oscura);
  border: 0; padding: 0; cursor: pointer; transition: width .2s ease, background-color .2s ease;
}
.pdf-carousel__dot.is-active { background: var(--naranja); width: 16px; }
.pdf-carousel__counter { font-family: var(--font-datos); font-size: .75rem; color: var(--gris-tecnico); }

/* Resalte de palabras clave (dolor/emoción) dentro de titulares */
.hl { color: var(--naranja); font-weight: 700; }

/* ------------------------------------------------------------
   Beneficios
   ------------------------------------------------------------ */
.grid-4 { display: grid; gap: var(--gap); grid-template-columns: repeat(4, 1fr); }
.benefit { }
.benefit__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,107,26,.12); color: var(--naranja);
  margin-bottom: 1rem;
}
.benefit h3 { font-size: 1.15rem; font-weight: 600; font-family: var(--font-titulares); }
.benefit p { margin-top: .5rem; color: var(--gris-tecnico); font-size: 1rem; }

/* ------------------------------------------------------------
   Especialización (diferenciador de sector)
   ------------------------------------------------------------ */
.specialization { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 2.4rem); }
.specialization__icon {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: var(--naranja);
  background: rgba(255,107,26,.12); border: 1px solid var(--naranja);
}
.specialization__body h2 { margin-top: .4rem; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; color: var(--hueso); }
.specialization__text { margin-top: .7rem; color: #C7CBD0; font-size: 1.05rem; max-width: 60ch; }

/* ------------------------------------------------------------
   Cómo funciona
   El paso del cliente se destaca solo (borde naranja); los pasos
   que hacemos nosotros van agrupados debajo, visualmente más
   discretos, para que quede claro que solo hay UNA cosa que el
   cliente tiene que hacer.
   ------------------------------------------------------------ */
.how-it-works { display: flex; flex-direction: column; gap: 1.5rem; }

.how-it-works__step {
  background: var(--blanco); border: 2px solid var(--naranja);
  border-radius: var(--radius); padding: 1.9rem 2.1rem;
  box-shadow: 0 16px 36px rgba(255,107,26,.16);
}
.how-it-works__tag {
  display: inline-block; font-family: var(--font-datos); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--naranja);
  border: 1px solid var(--naranja); border-radius: 999px; padding: .25rem .7rem;
  margin-bottom: 1rem;
}
.how-it-works__step h3 { font-size: 1.35rem; font-weight: 600; }
.how-it-works__step p { margin-top: .6rem; color: var(--gris-tecnico); font-size: 1.05rem; max-width: 62ch; }

.how-it-works__connector {
  display: flex; align-items: center; gap: .6rem; padding-left: 2.1rem;
  color: var(--gris-tecnico); font-family: var(--font-datos); font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.how-it-works__connector svg { color: var(--naranja); flex: none; }

.how-it-works__us { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
.how-it-works__us-item {
  background: var(--hueso); border: 1px solid var(--linea-clara);
  border-radius: var(--radius); padding: 1.6rem 1.8rem;
}
.how-it-works__us-item h3 { font-size: 1.15rem; font-weight: 600; }
.how-it-works__us-item p { margin-top: .5rem; color: var(--gris-tecnico); }

/* ------------------------------------------------------------
   Oferta de prueba (1 mes de Pro puntual, distinta del descuento
   recurrente de la tarjeta Pro) — tarjeta destacada sobre fondo
   oscuro, mismo lenguaje visual que .plan--featured.
   ------------------------------------------------------------ */
.trial-offer {
  position: relative; max-width: 620px; margin-inline: auto; text-align: center;
  background: var(--grafito-soft); border: 2px solid var(--naranja);
  border-radius: var(--radius); padding: clamp(2.6rem, 6vw, 3.4rem) clamp(1.6rem, 5vw, 3rem) clamp(2.2rem, 5vw, 3rem);
  box-shadow: 0 24px 50px rgba(255,107,26,.2);
}
.trial-offer__badge {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  background: var(--naranja); color: var(--blanco);
  font-family: var(--font-datos); font-weight: 700; font-size: 1.5rem; line-height: 1;
  padding: .55rem 1.3rem; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(255,107,26,.4);
  white-space: nowrap;
}
.trial-offer__eyebrow {
  margin: 0; font-family: var(--font-datos); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--naranja);
}
.trial-offer h2 { margin-top: .7rem; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; color: var(--hueso); }
.trial-offer__sub { margin-top: 1rem; color: #C7CBD0; font-size: 1.05rem; max-width: 46ch; margin-inline: auto; }
.trial-offer__price {
  margin-top: 1.8rem; font-family: var(--font-datos); font-size: 2.4rem; color: var(--naranja);
}
.trial-offer__price .price-old {
  font-size: .5em; color: var(--gris-tecnico); text-decoration: line-through; margin-right: .7rem;
}
.trial-offer__price .per { font-size: .45em; color: var(--gris-tecnico); margin-left: .4rem; }
.trial-offer__tag {
  display: inline-block; margin-top: 1.1rem;
  font-family: var(--font-datos); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--naranja); border: 1px solid var(--naranja); border-radius: 999px; padding: .3rem .8rem;
}
.trial-offer__note { margin-top: .7rem; font-size: .82rem; color: var(--gris-tecnico); }
.trial-offer .btn { margin-top: 1.8rem; }

/* ------------------------------------------------------------
   Precios
   ------------------------------------------------------------ */
.plans { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); align-items: start; }
.plan {
  background: var(--blanco); border: 1px solid var(--linea-clara);
  border-radius: var(--radius); padding: 1.8rem 1.6rem;
  display: flex; flex-direction: column; gap: 1.1rem; height: 100%;
  position: relative;
}
.plan__name { font-family: var(--font-titulares); font-weight: 600; font-size: 1.25rem; margin-bottom: .9rem; }

/* Bloque de precio: anual (grande, destacado por ser el más barato)
   + mensual (más pequeño, debajo) — ambos siempre visibles. */
.plan__price-block { display: flex; flex-direction: column; }
.plan__price { font-family: var(--font-datos); color: var(--grafito); line-height: 1.15; }
.plan__price .per { font-size: .55em; color: var(--gris-tecnico); margin-left: .2rem; }
.plan__price .price-old {
  font-size: .55em; color: var(--gris-tecnico); text-decoration: line-through;
  margin-right: .45rem; display: inline-block;
}
.plan__price--annual { font-size: 2.1rem; }
.plan__price--monthly { font-size: 1.15rem; color: var(--gris-tecnico); margin-top: .6rem; }
.plan__billing-note { font-size: .78rem; color: var(--gris-tecnico); margin: .15rem 0 0; }
.plan__billing-note--muted { opacity: .8; }

.plan__features { display: flex; flex-direction: column; gap: .6rem; }
.plan__features li { display: flex; gap: .6rem; color: var(--gris-tecnico); }
.plan__features .tick { color: var(--naranja); flex: none; }
.plan__features-lead span {
  font-family: var(--font-datos); font-size: .78rem; letter-spacing: .04em;
  color: var(--grafito); text-transform: uppercase;
}
.plan .btn { margin-top: auto; }
.placeholder { color: var(--gris-tecnico); font-style: italic; }

/* Pro: la tarjeta que más nos interesa vender — la más vistosa de las 3 */
.plan--featured {
  border: 2px solid var(--naranja);
  box-shadow: 0 24px 50px rgba(255,107,26,.24), 0 0 0 4px rgba(255,107,26,.07);
  transform: translateY(-10px);
  z-index: 1;
}
.plan__ribbon {
  position: absolute; top: -12px; left: 1.6rem;
  background: var(--naranja); color: var(--blanco);
  font-family: var(--font-datos); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 999px;
}
.plan--featured .plan__price--hero { font-size: 2.75rem; color: var(--naranja); }
.plan--featured .plan__price--monthly { color: var(--grafito); }

/* Enterprise: tarjeta oscura para transmitir exclusividad/plazas limitadas */
.plan--enterprise { background: var(--grafito); border-color: var(--linea-oscura); color: var(--hueso); }
.plan--enterprise .plan__price--hidden {
  font-family: var(--font-cuerpo); font-size: 1rem; font-weight: 500; color: #C7CBD0;
}
.plan--enterprise .plan__features li { color: #C7CBD0; }
.plan--enterprise .plan__features-lead span { color: var(--hueso); }
.plan__badge {
  position: absolute; top: -12px; left: 1.6rem;
  font-family: var(--font-datos); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 999px;
}
.plan__badge--full { background: var(--grafito-soft); border: 1px solid var(--naranja); color: var(--naranja); }

/* Formulario de lista de espera (Enterprise) */
.waitlist-form { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.waitlist-form__label { font-size: .9rem; font-weight: 600; color: var(--hueso); }
.waitlist-form__row { display: flex; gap: .5rem; }
.waitlist-form__row input {
  flex: 1; min-width: 0; font-family: var(--font-cuerpo); font-size: .95rem;
  padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--linea-oscura);
  background: var(--grafito-soft); color: var(--hueso);
}
.waitlist-form__row input::placeholder { color: var(--gris-tecnico); }
.waitlist-form__row input:focus { outline: 2px solid var(--naranja); outline-offset: 1px; }
.waitlist-form__row .btn { margin-top: 0; white-space: nowrap; }
.waitlist-form__note { font-size: .78rem; color: var(--gris-tecnico); margin: 0; }
.waitlist-form__row input:invalid[data-touched],
.demo-form__field input:invalid[data-touched] { border-color: var(--naranja); }

/* Mensaje de estado tras enviar (Formspree) */
.demo-form__status, .waitlist-form__status {
  font-size: .85rem; margin: 0; min-height: 1.1em; font-weight: 600;
}
.demo-form__status.is-success, .waitlist-form__status.is-success { color: var(--naranja); }
.demo-form__status.is-error, .waitlist-form__status.is-error { color: #E5484D; }

/* ------------------------------------------------------------
   FAQ (acordeón)
   ------------------------------------------------------------ */
.faq { max-width: 800px; }
.faq__item { border-bottom: 1px solid var(--linea-clara); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-cuerpo); font-weight: 600; font-size: 1.1rem; color: var(--grafito);
  padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
}
.faq__q::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-datos); color: var(--naranja); font-size: 1.5rem; line-height: 1;
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 2.5rem 1.4rem 0; color: var(--gris-tecnico); }
/* <details> nativo: ocultamos el marcador por defecto */
.faq__item summary { list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------
   CTA final — intro + formulario real de "Solicitar demo"
   ------------------------------------------------------------ */
.final-cta__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
.final-cta__intro h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 700; }
.final-cta__intro p { margin-top: 1rem; color: #C7CBD0; font-size: 1.15rem; max-width: 40ch; }

.demo-form {
  background: var(--grafito-soft); border: 1px solid var(--linea-oscura);
  border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem;
}
.demo-form__field { display: flex; flex-direction: column; gap: .4rem; }
.demo-form__field label { font-size: .85rem; font-weight: 600; color: var(--hueso); }
.demo-form__field input {
  font-family: var(--font-cuerpo); font-size: .98rem; padding: .75rem .9rem;
  border-radius: var(--radius-sm); border: 1px solid var(--linea-oscura);
  background: var(--grafito); color: var(--hueso);
}
.demo-form__field input::placeholder { color: var(--gris-tecnico); }
.demo-form__field input:focus { outline: 2px solid var(--naranja); outline-offset: 1px; }
.demo-form .btn { margin-top: 0; }
.demo-form__note { font-size: .8rem; color: var(--gris-tecnico); margin: 0; text-align: center; }
.demo-form__status { text-align: center; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer { background: var(--grafito); color: var(--hueso); padding-block: clamp(3rem, 6vw, 4rem) 2rem; border-top: 1px solid var(--linea-oscura); }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.footer__brand p { margin-top: .9rem; color: var(--gris-tecnico); max-width: 30ch; font-size: .95rem; }
.footer h4 { font-family: var(--font-titulares); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-tecnico); margin: 0 0 1rem; }
.footer li { margin-bottom: .6rem; }
.footer a { color: #C7CBD0; font-size: .95rem; }
.footer a:hover { color: var(--hueso); }
.social { display: flex; gap: .8rem; }
.social a {
  width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--linea-oscura); color: #C7CBD0;
}
.social a:hover { border-color: var(--naranja); color: var(--naranja); }
.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--linea-oscura);
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between;
  font-family: var(--font-datos); font-size: .8rem; color: var(--gris-tecnico);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Páginas legales (Aviso legal, Privacidad, Cookies)
   ------------------------------------------------------------ */
.legal-hero { padding-block: clamp(2.5rem, 6vw, 3.5rem) 0; }
.legal-hero p.eyebrow { margin-bottom: .6rem; }
.legal-hero h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; }
.legal-hero .legal-updated { margin-top: .6rem; color: var(--gris-tecnico); font-size: .9rem; font-family: var(--font-datos); }

.legal-content { max-width: 72ch; padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 4.5rem); }
.legal-content h2 {
  font-size: 1.3rem; font-weight: 700; margin-top: 2.4rem; margin-bottom: .8rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-top: 1rem; color: var(--grafito); line-height: 1.7; }
.legal-content p.muted { color: var(--gris-tecnico); font-size: .95rem; }
.legal-content ul { margin-top: 1rem; padding-left: 1.3rem; list-style: disc; }
.legal-content li { margin-top: .5rem; color: var(--grafito); line-height: 1.6; }
.legal-content strong { font-weight: 600; }
.legal-content a { color: var(--naranja); text-decoration: underline; text-underline-offset: 2px; }
.legal-content .legal-box {
  margin-top: 1.6rem; padding: 1.2rem 1.4rem; background: var(--hueso);
  border: 1px solid var(--linea-clara); border-radius: var(--radius-sm);
}
.legal-back { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; font-size: .95rem; color: var(--gris-tecnico); }
.legal-back:hover { color: var(--naranja); }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__card { order: -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .how-it-works__us { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan--featured { transform: none; }
  .final-cta__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
    position: absolute; left: 0; right: 0; top: 68px;
    background: var(--grafito); padding: 1.2rem clamp(1.1rem, 4vw, 2rem); border-bottom: 1px solid var(--linea-oscura);
  }
  .grid-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .nav__cta .btn { padding: .6rem 1rem; font-size: .9rem; }
  .waitlist-form__row { flex-direction: column; }
  .specialization { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}