/* ==========================================================================
   RUNLOOP · Design System
   Maqueta HTML de referencia para la migración a WordPress + Bricks
   Marca: morado #9264cd · negro #07050c · lila #e6c0f1 · grafito #3e3a59
   Tipografía: Space Grotesk (títulos) + Inter (texto)
   ========================================================================== */

/* ---------- Tipografía local (sin CDN en producción) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens de marca ---------- */
:root {
  /* Bricks fija html { font-size: 62.5% } (1rem = 10px). El design system
     de la maqueta asume el estándar 16px, así que lo restauramos aquí:
     :root (0,1,0) gana a html (0,0,1) sin depender del orden de carga. */
  font-size: 100%;

  /* Color */
  --rl-black:      #07050c;
  --rl-ink:        #0b0813;
  --rl-panel:      #14101f;
  --rl-panel-2:    #221830;
  --rl-graphite:   #3e3a59;
  --rl-slate:      #6b6580;
  --rl-muted:      #9a94ad;
  --rl-line:       rgba(146, 100, 205, 0.18);
  --rl-line-soft:  rgba(255, 255, 255, 0.07);

  --rl-purple:     #9264cd;
  --rl-purple-400: #a87fdb;
  --rl-purple-600: #7248ab;
  --rl-purple-700: #5a3589;
  --rl-purple-900: #2a153f;
  --rl-lilac:      #e6c0f1;
  --rl-lilac-soft: #f4e6f9;

  --rl-white:      #ffffff;
  --rl-off-white:  #f7f5fb;
  --rl-text:       #e8e5f0;
  --rl-text-dim:   #a49db8;

  /* Tipografía */
  --rl-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --rl-font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Escala modular */
  --rl-fs-xs:   0.75rem;
  --rl-fs-sm:   0.875rem;
  --rl-fs-base: 1rem;
  --rl-fs-lg:   1.125rem;
  --rl-fs-xl:   1.375rem;
  --rl-fs-2xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --rl-fs-3xl:  clamp(1.9rem, 1.45rem + 2.1vw, 2.85rem);
  --rl-fs-4xl:  clamp(2.15rem, 1.5rem + 2.9vw, 3.35rem);
  --rl-fs-hero: clamp(2.15rem, 1.4rem + 3.3vw, 3.75rem);

  /* Espaciado */
  --rl-space-1:  0.25rem;
  --rl-space-2:  0.5rem;
  --rl-space-3:  0.75rem;
  --rl-space-4:  1rem;
  --rl-space-5:  1.5rem;
  --rl-space-6:  2rem;
  --rl-space-7:  3rem;
  --rl-space-8:  4rem;
  --rl-space-9:  6rem;

  /* Estructura */
  --rl-container: 1200px;
  --rl-container-narrow: 820px;
  --rl-radius-sm: 6px;
  --rl-radius:    12px;
  --rl-radius-lg: 20px;
  --rl-header-h:  76px;

  /* Sombra y foco */
  --rl-shadow:    0 18px 48px -22px rgba(0, 0, 0, 0.85);
  --rl-focus:     0 0 0 3px rgba(146, 100, 205, 0.45);
}

/* ---------- Reset acotado ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rl-ink);
  color: var(--rl-text);
  font-family: var(--rl-font-body);
  font-size: var(--rl-fs-base);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 {
  font-family: var(--rl-font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 var(--rl-space-4);
  color: var(--rl-white);
}
h1 { font-size: var(--rl-fs-4xl); }
h2 { font-size: var(--rl-fs-3xl); }
h3 { font-size: var(--rl-fs-2xl); }
h4 { font-size: var(--rl-fs-xl); letter-spacing: -0.01em; }
p  { margin: 0 0 var(--rl-space-4); }
a  { color: var(--rl-lilac); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--rl-white); }
ul, ol { margin: 0 0 var(--rl-space-4); padding-left: 1.15rem; }
li { margin-bottom: var(--rl-space-2); }
strong { font-weight: 600; color: var(--rl-white); }
::selection { background: var(--rl-purple); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--rl-focus); border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rl-purple); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--rl-font-display);
}
.skip-link:focus { left: var(--rl-space-4); top: var(--rl-space-4); }

/* ==========================================================================
   CAPA DE INTEGRACIÓN CON BRICKS
   Reglas que Bricks no puede expresar como clase global: landmarks del tema,
   adaptación del formulario nativo y utilidades globales.
   ========================================================================== */

/* ---------- Landmarks de Bricks ---------- */
#brx-header { position: sticky; top: 0; z-index: 100; }

/* El skip-link de la maqueta apunta al main real de Bricks */
.skip-link:target, #brx-content:target { scroll-margin-top: var(--rl-header-h); }

/* ---------- Formulario nativo de Bricks con la piel de la maqueta ----------
   Bricks aporta su propia piel al formulario en frontend.min.css:
     :where(.brxe-form) label { font-weight:600; text-transform:uppercase; letter-spacing:.4px }
     :where(.brxe-form) .form-group { padding:0 0 20px }
     .input, input:not([type=submit]), select, textarea { line-height:40px; padding:0 12px }
   :where() tiene especificidad 0, así que las reglas de abajo ganan; pero solo
   ganan en las propiedades que declaran, por eso hay que neutralizar aquí el
   peso, las mayúsculas, el interletrado, el relleno del grupo y el line-height. */
.rl-form .form-group { display: grid; gap: .45rem; margin: 0; padding: 0; }
.rl-form .form-group label,
.rl-form .form-group .label {
  font-family: var(--rl-font-display);
  font-size: var(--rl-fs-sm);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  color: var(--rl-text);
}
.rl-form .form-group input:not([type="checkbox"]):not([type="radio"]),
.rl-form .form-group select,
.rl-form .form-group textarea {
  width: 100%; padding: .8rem .95rem; border-radius: var(--rl-radius-sm);
  background-color: rgba(255,255,255,.035); border: 1px solid var(--rl-graphite);
  color: var(--rl-white); font-family: var(--rl-font-body); font-size: var(--rl-fs-sm);
  line-height: normal;
  transition: border-color .18s ease, background-color .18s ease;
}
/* El select recupera la flecha nativa del navegador, como en la maqueta.
   Bricks impone `select { appearance: none; background-image: <chevron gris> }`
   en su frontend.min.css, así que hay que devolver explícitamente la apariencia
   nativa y borrar ese fondo para reproducir el control del diseño. */
.rl-form .form-group select {
  -webkit-appearance: auto; appearance: auto;
  background-image: none;
}
.rl-form .form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.rl-form .form-group textarea::placeholder { color: var(--rl-slate); }
.rl-form .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.rl-form .form-group select:focus,
.rl-form .form-group textarea:focus {
  outline: none; border-color: var(--rl-purple); background-color: rgba(146,100,205,.08);
}
.rl-form .form-group textarea { min-height: 130px; resize: vertical; }
.rl-form .form-group select option { background: var(--rl-panel); color: var(--rl-text); }

/* Rejilla del formulario. La maqueta apila todos los campos salvo la pareja
   Email + Teléfono del diagnóstico, que va en dos columnas. Los campos del
   formulario nativo no llevan clase propia, pero el markup sí lleva el `name`
   del control, así que la pareja se reconoce por ahí y solo en el formulario
   que de verdad la tiene. */
.rl-form { display: grid; gap: var(--rl-space-4); grid-template-columns: minmax(0, 1fr); }
.rl-form:has(input[name="telefono"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rl-form > .form-group { grid-column: 1 / -1; }
.rl-form:has(input[name="telefono"]) > .form-group:has(input[name="email"]),
.rl-form:has(input[name="telefono"]) > .form-group:has(input[name="telefono"]) {
  grid-column: span 1;
}

/* Textos auxiliares dentro del formulario. Van como campos de tipo HTML, así
   que su CSS no lo emite Bricks: lo aporta el tema, igual que las clases que
   solo viven dentro de contenido enriquecido. */
.rl-form .rl-hint { font-size: var(--rl-fs-xs); color: var(--rl-muted); }
.rl-form .rl-fineprint { font-size: var(--rl-fs-xs); color: var(--rl-slate); line-height: 1.6; }
/* En la maqueta el aviso va dentro del mismo campo, separado del control por el
   hueco de la rejilla (.45rem). Aquí es un campo aparte, así que se le resta el
   hueco del formulario para dejar exactamente esa separación. */
.rl-form > .form-group:has(> .rl-hint) { margin-top: calc(.45rem - var(--rl-space-4)); }
/* El botón de envío lo coloca Bricks al final de todos los campos, así que el
   pie de formulario se adelantaría al botón. Con `order` vuelve a su sitio
   (detrás del botón), separado solo por el hueco de la rejilla, como en la
   maqueta. */
.rl-form > .form-group:has(> .rl-fineprint) { order: 2; }

/* La casilla de privacidad, con la piel de la maqueta: texto pequeño y gris y
   la casilla alineada con la primera línea, como el `.rl-check` del diseño. */
.rl-form .options-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Como bloque, el `ul` de Bricks añade una línea fantasma de 8px sobre la
     casilla; en flex-column la altura es exactamente la de su contenido. */
  display: flex;
  flex-direction: column;
}
.rl-form .options-wrapper li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  /* El reset base da 8px de margen inferior a todo `li`; aquí no aplica. */
  margin: 0;
}
.rl-form .options-wrapper li,
.rl-form .options-wrapper label {
  font-family: var(--rl-font-body);
  font-size: var(--rl-fs-xs);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rl-text-dim);
}
.rl-form .options-wrapper input[type="checkbox"],
.rl-form .options-wrapper input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin-top: .2rem;
  accent-color: var(--rl-purple);
}

/* Botón de envío */
.rl-form .submit-button-wrapper { margin: 0; }
.rl-form .bricks-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .95rem 1.6rem; border: 1px solid var(--rl-purple);
  border-radius: var(--rl-radius-sm); background: var(--rl-purple); color: #fff;
  font-family: var(--rl-font-display); font-size: var(--rl-fs-sm); font-weight: 500;
  line-height: 1; letter-spacing: .01em; text-align: center; cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.rl-form .bricks-button:hover { background: var(--rl-purple-400); border-color: var(--rl-purple-400); transform: translateY(-1px); }
.rl-form .bricks-form__error,
.rl-form .form-group.error input,
.rl-form .form-group.error select,
.rl-form .form-group.error textarea { border-color: #e07b9a; }

/* ---------- Clases usadas solo dentro de contenido enriquecido ----------
   Bricks solo emite el CSS de las clases globales referenciadas en los
   ajustes de un elemento. Estas aparecen dentro del texto de un heading,
   un text-basic o una tabla, así que el tema las aporta aquí. */
.rl-badge.rl-badge--solid { background: var(--rl-purple); color: #fff; }
.rl-nowrap { white-space: nowrap; }
.rl-muted-text { color: var(--rl-muted); }
.rl-chip {
  display: inline-block; font-family: var(--rl-font-display);
  font-size: var(--rl-fs-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--rl-text); background: rgba(255,255,255,.045);
  border: 1px solid var(--rl-line); border-radius: 999px; padding: .38rem .85rem;
}
.rl-chip--purple {
  border-color: rgba(146,100,205,.55); color: var(--rl-lilac);
  background: rgba(146,100,205,.14);
}

/* Guarda de cascada para la tabla.
   El elemento Rich text de Bricks añade a su control de tipografía una regla
   `a { font-size: inherit }` (para que las unidades em funcionen en enlaces) y,
   al generar el CSS de un selector de clase global, reescribe el selector de
   todas sus reglas. El resultado es un `font-size: inherit` que aterriza en el
   propio caption por detrás del token del design system. Con el selector
   duplicado el token vuelve a ganar sin depender del orden de carga. */
.rl-table.rl-table caption,
.rl-table.rl-table thead th { font-size: var(--rl-fs-xs); }

/* Guarda de cascada para el raíl de los pasos.
   La clase global .rl-steps emite dos reglas para el mismo selector: la del
   sub-selector (padding/margin-left del raíl) y la del reseteo del li
   (`margin: 0`). Al ir la segunda después, borra el margin-left del raíl y la
   numeración se descoloca 17,6px. Con el selector duplicado el raíl vuelve. */
.rl-steps.rl-steps > li { margin: 0 0 0 1.1rem; }

/* Guarda de cascada para el raíl de pasos en contenedor estrecho.
   En la maqueta `.rl-container--narrow { margin-inline: auto }` (línea 155)
   precede a `.rl-steps { margin: 0 }` (línea 512), así que el `margin: 0` gana
   y el raíl queda alineado a la izquierda del contenedor: `--narrow` solo le
   limita el ancho a 820px. Bricks emite las dos clases en orden inverso y, con
   la misma especificidad, gana el `margin-inline: auto`, centrando el raíl
   190px y desalineándolo del encabezado de la sección. El selector duplicado
   reproduce la precedencia de la maqueta. */
.rl-steps.rl-steps.rl-container--narrow { margin-inline: 0; }
.rl-container--narrow.rl-container--narrow { margin-inline: auto; }

/* Guarda de cascada para el menú móvil.
   El estado abierto del menú se declara en la clase global .rl-nav como
   sub-selector `&.is-open { display: flex }`, y el estado base móvil de la
   misma clase —`.rl-nav { … display: none }` dentro de la media query de
   1080px— se emite DESPUÉS, con idéntica especificidad. Resultado: el drawer
   abierto quedaba invisible y el sitio no navegaba en el teléfono. En la
   maqueta el orden es el inverso y `.rl-nav.is-open` gana. El selector
   triplicado devuelve la victoria al estado abierto. */
.rl-nav.is-open.is-open { display: flex; }

/* Guarda de cascada para las utilidades de margen.
   En la maqueta las utilidades viven al final de runloop.css, así que siempre
   ganan al `margin` en atajo que usan algunos componentes (`.rl-steps` lo trae).
   Bricks, en cambio, emite el CSS por clase y en orden de uso, de modo que la
   utilidad puede quedar por detrás y perder. El selector duplicado reproduce el
   resultado de la maqueta sin depender del orden de emisión. */
.rl-mt-4.rl-mt-4 { margin-top: var(--rl-space-4); }
.rl-mt-5.rl-mt-5 { margin-top: var(--rl-space-5); }
.rl-mt-6.rl-mt-6 { margin-top: var(--rl-space-6); }
.rl-mt-7.rl-mt-7 { margin-top: var(--rl-space-7); }
.rl-mb-5.rl-mb-5 { margin-bottom: var(--rl-space-5); }
.rl-mb-6.rl-mb-6 { margin-bottom: var(--rl-space-6); }

/* ---------- Accesibilidad global ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rl-btn:hover, .rl-form .bricks-button:hover { transform: none; }
}

@media print {
  .rl-header, .rl-footer, .rl-cta__actions, .rl-burger { display: none; }
  body { background: #fff; color: #000; }
  .rl-card, .rl-table-wrap { border-color: #ccc; }
}