/* ============================================================
   GLOBAL — reset, contenedor, tipografía base, botones y utilidades
   Edición V3 «Registro»
   Aquí NO va estilo de bloque: eso vive en bloques.css
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   LA CAPA DE GRANO — el detalle que elimina la planicie digital.
   Un ~3 % de ruido fractal sobre TODO el color dominante.
   ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--noise);
  background-size: 260px 260px;
  opacity: var(--noise-opacity);
  mix-blend-mode: multiply;
}

@media (max-width: 767px) {
  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------
   MARIDAJE TIPOGRÁFICO
   Titulares en FRAUNCES con los ejes SOFT y WONK abiertos: remates
   redondeados y formas caligráficas. Es un trazo que no sale de una
   rejilla matemática, y ahí está la diferencia.
   Cuerpo, botones, rótulos y datos en INSTRUMENT SANS.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk-display);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-serif);
  text-wrap: balance;
  padding-bottom: 0.04em;   /* margen de seguridad bajo el titular */
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: var(--measure-h1);
}
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
/* En tamaños pequeños el WONK estorba a la lectura: se apaga. */
h3, h4 { font-size: var(--fs-h3); font-weight: var(--fw-bold); font-variation-settings: var(--wonk-sub); }

p {
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

ul { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--cta-soft); color: var(--text-heading); }

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

/* ---------- Layout ---------- */

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

/* Alternancia por BLOQUE COMPLETO. Nunca dentro de un bloque. */
.section { padding-block: var(--section-pad); position: relative; }
.section--bg1 { background: var(--bg-1); }
.section--bg2 { background: var(--bg-2); }
.section--grad { background: var(--grad-cta); }
.section--dark {
  background: var(--grad-dark);
  color: var(--text-on-dark);
  padding-block: calc(var(--section-pad) * 1.2);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-on-dark); }

/* Grano reforzado sobre el bloque oscuro: sin él, la tinta queda plana. */
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--noise);
  background-size: 260px 260px;
  opacity: var(--noise-opacity-dark);
}
.section--dark > .container { position: relative; z-index: 1; }

.section__head { margin-bottom: var(--sp-12); max-width: 820px; }
.section__head p { color: var(--text-muted); margin-top: var(--sp-5); font-size: var(--fs-lead); }
.section--dark .section__head p { color: var(--text-on-dark-muted); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }

/* --- EL RAÍL ---
   La cabecera de cada bloque se parte en dos: un margen izquierdo
   estrecho con el índice, y el titular a la derecha. Es el cambio de
   disposición que más trabaja: alinea todos los bloques contra un
   mismo eje vertical y convierte la página en un documento con
   estructura, no en una pila de secciones centradas. */
.section__head--rail { max-width: none; }
@media (min-width: 900px) {
  .section__head--rail {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }
  .section__head--rail > .indice {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    padding-top: 0.6em;
  }
  .section__head--rail__texto { max-width: 780px; }
}
.section__head--rail .indice { margin-bottom: var(--sp-5); }
@media (min-width: 900px) { .section__head--rail .indice { margin-bottom: 0; } }
/* El índice es un <p>: hay que devolverle lo que `.section__head p` le quita. */
.section__head .indice { margin-top: 0; font-size: var(--fs-micro); color: var(--text-muted); }

/* --- EL ÍNDICE ---
   Guion + número tabular + rótulo en versalitas. Corre del 01 al 08
   por toda la página: quien hace scroll siempre sabe por dónde va. */
.indice {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  max-width: none;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  white-space: nowrap;
}
.indice::before {
  content: "";
  width: var(--indice-rule);
  height: 1px;
  flex: none;
  align-self: center;
  background: var(--rule-strong);
}
.indice b {
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.section--dark .indice { color: var(--text-on-dark-muted); }
.section--dark .indice::before { background: var(--rule-dark); }
.section--dark .indice b { color: var(--text-on-dark); }
@media (max-width: 480px) {
  .indice { letter-spacing: 0.1em; }
  .indice::before { width: 20px; }
}

/* ------------------------------------------------------------
   RÓTULO EN VIVO — sustituye a la píldora de disponibilidad.
   Ni caja, ni borde redondeado, ni fondo: una línea de rótulo en
   versalitas con su filete debajo y un cuadrado que late. Es el
   mismo dato, dicho como lo diría una portada, no un componente
   de catálogo.
   ------------------------------------------------------------ */
.rotulo-vivo {
  display: inline-flex;
  /* `flex-start`, no `center`: cuando el rótulo cae a dos líneas en móvil,
     el cuadrado tiene que quedarse pegado a la primera, no flotar en medio.
     Y el texto va dentro de UN solo <span>: si el <b> es hermano suelto,
     se convierte en otro elemento flexible y el dato se va al otro extremo. */
  align-items: flex-start;
  gap: 10px;
  max-width: none;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
}
.rotulo-vivo b { color: var(--text-heading); font-weight: var(--fw-bold); }
.rotulo-vivo__punto {
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 0.42em;
  border-radius: 1px;                /* cuadrado, con la esquina apenas rota */
  background: var(--cta);
  animation: latido 2.6s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 var(--cta-ring); }
  70%  { box-shadow: 0 0 0 7px var(--cta-fade); }
  100% { box-shadow: 0 0 0 0 var(--cta-fade); }
}
@media (max-width: 480px) {
  .rotulo-vivo { font-size: 0.6875rem; letter-spacing: 0.1em; gap: 8px; }
}
.section--dark .rotulo-vivo { color: var(--text-on-dark-muted); border-bottom-color: var(--border-dark); }
.section--dark .rotulo-vivo b { color: var(--text-on-dark); }

/* Rótulo sobrio sobre un H2 — siempre en sans: es una etiqueta, no un titular. */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.section--dark .eyebrow { color: var(--text-on-dark-muted); }

/* ---------- Tipografía auxiliar ---------- */

.lead { font-size: var(--fs-lead); color: var(--text-body); line-height: 1.6; }
.small { font-size: var(--fs-small); }
.muted { color: var(--text-muted); }
.on-dark-muted { color: var(--text-on-dark-muted); }

/* Subrayado de UNA palabra clave del H1: un filete recto de tinta,
   como el que se traza a regla sobre una prueba impresa. */
.mark {
  position: relative;
  white-space: nowrap;
  box-shadow: inset 0 -0.14em 0 var(--accent-soft);
}
.mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.04em;
  height: 1px;
  background: var(--text-heading);
  opacity: 0.75;
}

/* Reversión de riesgo bajo los CTAs */
.risk {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--sp-5);
  max-width: 48ch;
}
.section--dark .risk { color: var(--text-on-dark-muted); }

/* ------------------------------------------------------------
   BOTONES — el elemento más importante de la página

   LA REGLA DEL 2x: el grupo de CTA se separa del texto de encima el
   DOBLE de lo que el H1 se separa de su subtítulo. Así el cerebro lo
   lee como acción global y no como la coletilla de la frase anterior.

   Esquina apenas rota (4 px) y filete interior de 1 px: el botón
   parece troquelado, no un rectángulo redondeado por defecto.
   ------------------------------------------------------------ */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3);
  margin-top: var(--gap-cta);
}
.cta-group--par > .btn { flex: 1 1 0; min-width: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  min-width: 190px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  text-decoration: none;
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.25s var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primario: el ÚNICO color saturado de la web. */
.btn--primary {
  background: var(--cta);
  color: var(--cta-contrast);
  border: 1px solid var(--cta);
  box-shadow: var(--shadow-cta), inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
.btn--primary:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  box-shadow: var(--shadow-cta-hover), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Secundario: outline sutil. Nunca compite con el primario. */
.btn--secondary {
  background: rgba(253, 253, 251, 0.55);
  color: var(--text-heading);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .btn--secondary { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.btn--secondary:hover {
  background: var(--bg-card);
  border-color: var(--text-heading);
  box-shadow: var(--shadow-sm);
}

.section--dark .btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark);
  border-color: rgba(245, 244, 241, 0.26);
  box-shadow: none;
}
.section--dark .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(245, 244, 241, 0.52);
}

/* Variante compacta: la de la cabecera flotante. Por encima del mínimo táctil de 44px. */
.btn--compact {
  min-height: 44px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-small);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-cta-compact), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Botón discreto que sale de la landing (perfil de reseñas). */
.btn--enlace { min-width: 0; }

/* Botón masivo del lead magnet y del CTA final */
.btn--xl { min-height: 62px; font-size: var(--fs-lead); padding: 0 var(--sp-10); }

/* Por debajo de 560px el logo y el CTA de cabecera no caben juntos con el
   texto completo: se queda el icono y la etiqueta la sostiene `aria-label`. */
@media (max-width: 559px) {
  .site-header .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .site-header .btn--compact { padding-inline: var(--sp-4); }
}

@media (max-width: 620px) {
  .btn { min-width: 150px; padding-inline: var(--sp-4); font-size: var(--fs-small); gap: var(--sp-2); }
  .btn--xl { min-height: 58px; font-size: var(--fs-body); padding-inline: var(--sp-5); }
}
@media (max-width: 380px) {
  .cta-group { gap: var(--sp-2); }
  .btn { min-width: 130px; padding-inline: var(--sp-3); }
  .btn svg { width: 18px; height: 18px; }
}
/* Un CTA solo (lead magnet, garantía) sí ocupa todo el ancho en móvil. */
@media (max-width: 620px) {
  .cta-group:not(.cta-group--par) > .btn:only-child { width: 100%; }
}
/* El CTA de la cabecera NUNCA hereda un ancho mínimo: en 320px empujaría el
   logo fuera de la pantalla. Doble clase (0,2,0) para ganar a `.btn` en
   cualquier consulta de medios, esté donde esté. */
.btn.btn--compact { min-width: 0; }

/* Etiqueta larga en escritorio, corta en móvil. El texto del documento manda;
   tres líneas dentro de un botón de 390px, no. */
.btn__corto { display: none; }
@media (max-width: 620px) {
  .btn__largo { display: none; }
  .btn__corto { display: inline; }
}

/* ------------------------------------------------------------
   SUPERFICIE DE TARJETA
   Una sola definición para todas las tarjetas del esqueleto. El peso
   lo lleva el FILETE, no la sombra: la sombra solo insinúa que el
   papel está despegado un milímetro.
   ------------------------------------------------------------ */
.tarjeta {
  background-color: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Filete horizontal de sección: separa sin encajonar. */
.filete { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Superficies reutilizables ---------- */

/* Cristal esmerilado. Siempre con respaldo sólido si no hay soporte. */
.glass {
  background-color: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur-deep);
    backdrop-filter: var(--glass-blur-deep);
  }
}

/* ---------- Imágenes ----------
   Todas son SVG placeholder rotulados (assets/img/ph-*.svg). Se sustituyen
   por la FOTOGRAFÍA REAL del cliente sin tocar el marcado: mismo
   `width`/`height` → CLS 0. Prohibido el stock genérico. */

.foto {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

/* ---------- Números fantasma 01 / 02 / 03 ---------- */

.ghost {
  position: absolute;
  top: 12px;
  right: var(--sp-5);
  z-index: 0;
  font-family: var(--font-serif);
  font-variation-settings: var(--wonk-display);
  font-size: clamp(50px, 5.4vw, 72px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--ghost-number);
  letter-spacing: var(--ls-tight);
  user-select: none;
  pointer-events: none;
}

/* ---------- Texturas contextuales de fondo ---------- */
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%);
}
.grid-bg > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .servicio:hover, .dolor__col:hover, .opinion:hover { transform: none !important; }
}