/**
 * RITMO Design System — capa web.
 *
 * Los valores NO se eligen aquí: se transcriben de `src/theme/index.ts`, que es la fuente de verdad
 * del producto (ver `docs/DESIGN-SYSTEM.md`). Este archivo existe porque las páginas SEO son HTML
 * estático y no pueden importar el tema de TypeScript; cada token lleva anotado su equivalente para
 * que la correspondencia se pueda verificar de un vistazo y no se vuelva a separar.
 *
 * Antes cada landing traía su propio `:root` con radios 18/26/36, bordes grises sólidos y
 * superficies inventadas: por eso la calculadora parecía de otro producto aunque compartiera el
 * amarillo. Todo lo compartido entre landings (shell, header, botones, cards, campos, footer) vive
 * acá; lo propio de cada herramienta vive en su hoja de estilos.
 */

:root {
  /* Marca y acción — colors.yellow / yellowHover / yellowPressed / yellowSoft */
  --yellow: #ffc928;
  --yellow-hover: #ffd65e;
  --yellow-pressed: #e6b31f;
  --yellow-soft: #ffe38a;

  /* Superficies, de la más oscura a la más clara — colors.graphite → colors.modal */
  --graphite: #121419;
  --field: #161920;      /* superficie "inset": inputs, segmentados, filas anidadas */
  --carbon: #20232a;     /* cards */
  --sheet: #252932;
  --elevated: #292d35;
  --modal: #2a2f39;

  /* Texto — colors.warmWhite / white / grayLight / gray */
  --warm-white: #f8f7f2;
  --white: #fff;
  --gray-light: #b4bac6;
  --gray: #7b8494;

  /* Bordes translúcidos: el DS usa blanco cálido a baja opacidad, nunca un gris sólido. */
  --border: rgba(248, 247, 242, 0.08);
  --border-strong: rgba(248, 247, 242, 0.14);

  /* Estados — colors.success / orange / error */
  --success: #31c779;
  --orange: #ff814a;
  --error: #ff5d5d;

  /* Dominios de salud (domain.*): los macros usan estos y no colores nuevos, para que proteína,
     carbohidratos y grasas se lean igual acá que en el panel de la app. */
  --nutrition: #3fcb80;
  --nutrition-soft: rgba(63, 203, 128, 0.14);
  --hydration: #4fb2ee;
  --hydration-soft: rgba(79, 178, 238, 0.14);
  --movement: #ff7b54;
  --movement-soft: rgba(255, 123, 84, 0.14);

  /* Radios — radius.sm/md/lg/xl/pill. Botón 16, card 20, sheet 24. */
  --r-control: 8px;
  --r-input: 12px;
  --r-button: 16px;
  --r-card: 20px;
  --r-sheet: 24px;
  --r-pill: 999px;

  /* Espaciado, escala base 4px — spacing.xs…huge */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-18: 72px;

  /**
   * Escala tipográfica — `text.*`. Ningún paso baja de 12px: el DS documenta que dos tercios del
   * texto por debajo de 13px era la causa de la sensación de interfaz apretada, y la versión
   * anterior de esta landing pintaba 65 elementos entre 8.5px y 11px.
   *
   * `--fs-hero` es la única extensión sobre el DS y es deliberada: la escala del tema está pensada
   * para una pantalla de teléfono, donde no existe un titular de 1440px de ancho.
   */
  --fs-hero: clamp(40px, 5.2vw, 68px);
  --fs-display: clamp(30px, 3.4vw, 34px);
  --fs-title1: 28px;
  --fs-title2: 22px;
  --fs-title3: 19px;
  --fs-body: 17px;
  --fs-callout: 16px;
  --fs-subhead: 15px;
  --fs-footnote: 13px;
  --fs-caption: 12px;

  /* Tracking — letterSpacing.* */
  --ls-display: -1px;
  --ls-heading: -0.5px;
  --ls-heading2: -0.3px;
  --ls-label: 1px;

  /* Elevación — shadows.card / raised */
  --shadow-card: 0 6px 12px rgba(0, 0, 0, 0.28);
  --shadow-raised: 0 10px 20px rgba(0, 0, 0, 0.34);

  --container: 1180px;
  --header-h: 76px;
}

/* ---------------------------------------------------------------- base --- */

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

html {
  background: var(--graphite);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--graphite);
  color: var(--warm-white);
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-menu-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Los grupos de opciones se marcan con `fieldset`/`legend` porque es lo que un lector de pantalla
   necesita para anunciar "Sexo: Mujer, 1 de 2". El navegador les dibuja por defecto un marco con
   la leyenda encajada, que no pertenece a ningún sistema de diseño: se apaga. */
fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
legend { display: block; width: 100%; padding: 0; }

/* Un solo anillo de foco para todo el sistema: si cada componente inventa el suyo, la navegación
   por teclado deja de ser predecible. */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: var(--r-control);
}

.container {
  width: min(100% - 2 * var(--s-5), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-input);
  background: var(--yellow);
  color: var(--graphite);
  font-size: var(--fs-footnote);
  font-weight: 800;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- header --- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(18, 20, 25, 0.72);
  backdrop-filter: blur(18px);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  padding-top: env(safe-area-inset-top);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(18, 20, 25, 0.94);
  box-shadow: var(--shadow-card);
}

.nav-shell {
  display: flex;
  min-height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

/**
 * Marca. Las proporciones son las de `BrandLogo` (src/components/brand-logo.tsx): glifo cuadrado,
 * radio 0.28 del lado, separación de 12px y palabra en 0.58 del lado, extrabold e itálica.
 * El símbolo es el archivo oficial, no una reconstrucción con la letra "R".
 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px; /* 44 × 0.28 */
}

.brand-word {
  color: var(--white);
  font-size: 26px; /* 44 × 0.58 */
  font-style: italic;
  font-weight: 800;
  letter-spacing: 1.1px;
  line-height: 1;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.desktop-nav a {
  position: relative;
  padding-block: var(--s-2);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  font-weight: 700;
  transition: color 0.2s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  content: "";
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible { color: var(--white); }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { transform: scaleX(1); }

.desktop-nav a[aria-current="page"] { color: var(--white); }
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r-input);
  background: var(--carbon);
  color: var(--white);
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: var(--r-pill);
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.2s ease;
}
.mobile-menu.is-open { max-height: 60vh; opacity: 1; }

.mobile-menu-inner {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3) var(--s-6);
}

.mobile-menu a:not(.btn) {
  padding: var(--s-3) var(--s-1);
  color: var(--gray-light);
  font-size: var(--fs-callout);
  font-weight: 700;
}
.mobile-menu a[aria-current="page"] { color: var(--yellow); }

/* ------------------------------------------------------------- botones --- */

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-button);
  padding-inline: var(--s-5);
  font-size: var(--fs-footnote);
  font-weight: 800;
  text-align: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn:disabled { cursor: not-allowed; opacity: 0.6; }

/* El texto sobre amarillo es SIEMPRE #121419 (regla de contraste del DS). */
.btn-primary { background: var(--yellow); color: var(--graphite); }
.btn-primary:hover:not(:disabled) { background: var(--yellow-hover); }
.btn-primary:active:not(:disabled) { background: var(--yellow-pressed); transform: translateY(1px); }

.btn-outline { border-color: var(--border-strong); color: var(--warm-white); }
.btn-outline:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }

.btn-ghost { color: var(--gray-light); }
.btn-ghost:hover:not(:disabled) { color: var(--white); }

.btn-sm { min-height: 44px; padding-inline: var(--s-4); }
.btn-lg { min-height: 56px; padding-inline: var(--s-6); font-size: var(--fs-subhead); }
.btn-block { width: 100%; }

.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* --------------------------------------------------------------- cards --- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--carbon);
  box-shadow: var(--shadow-card);
}

.card-inset {
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--field);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid rgba(255, 201, 40, 0.24);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3);
  background: rgba(255, 201, 40, 0.08);
  color: var(--yellow);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

.section-kicker {
  display: block;
  color: var(--yellow);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------- campos --- */

.field { display: grid; gap: var(--s-2); }

.field > .field-label {
  color: var(--warm-white);
  font-size: var(--fs-footnote);
  font-weight: 700;
}

.field-hint { color: var(--gray); font-size: var(--fs-caption); font-weight: 600; }

.input,
.select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding-inline: var(--s-4);
  background: var(--field);
  color: var(--white);
  font-size: var(--fs-callout);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.input::placeholder { color: var(--gray); }

.input:hover,
.select:hover { border-color: var(--border-strong); }

.input:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 201, 40, 0.16);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"] { border-color: var(--error); }

/* El `select` nativo pinta su propia flecha con el estilo del sistema operativo, que es justo lo
   que delata una página como "formulario HTML". Se apaga y se dibuja la del sistema RITMO. */
.select {
  appearance: none;
  padding-right: var(--s-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bac6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
}
.select:invalid { color: var(--gray); }
.select option { background: var(--carbon); color: var(--warm-white); }

.input-unit { position: relative; }
.input-unit .input { padding-right: var(--s-14); }
.input-unit em {
  position: absolute;
  top: 50%;
  right: var(--s-4);
  color: var(--gray);
  font-size: var(--fs-footnote);
  font-style: normal;
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}

.field-error {
  display: block;
  min-height: 18px;
  color: var(--error);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* Segmentado: la misma pieza que la app usa para elegir entre pocas opciones excluyentes. El input
   real sigue ahí (radio nativo), así que teclado y lector de pantalla funcionan sin ayuda extra. */
.segmented { display: grid; gap: var(--s-2); }

.segmented-options {
  /* Posicionado para contener los radios ocultos: sin esto el input absoluto se ancla al bloque
     inicial de la página y termina lejos de su propia etiqueta, tapando otros controles. */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
}

/* El radio nativo sigue existiendo (teclado, lector de pantalla, envío del formulario); lo que se
   ve y se toca es la etiqueta. */
.segmented input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding-inline: var(--s-3);
  background: var(--field);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.segmented label:hover { border-color: var(--border-strong); color: var(--warm-white); }

.segmented input:checked + label {
  border-color: var(--yellow);
  background: rgba(255, 201, 40, 0.1);
  color: var(--white);
}

.segmented input:focus-visible + label {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  line-height: 1.5;
  cursor: pointer;
}

.checkbox-row input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--yellow);
}

.form-status {
  min-height: 20px;
  color: var(--gray-light);
  font-size: var(--fs-footnote);
}
.form-status.is-error { color: var(--error); }
.form-status.is-success { color: var(--success); }

/* --------------------------------------------------------------- footer --- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-10);
  padding-bottom: max(var(--s-10), env(safe-area-inset-bottom));
}

.footer-grid {
  display: grid;
  /* La marca ocupa una columna angosta y fija: el peso del footer es el mapa del sitio, no el logo.
     Con la proporción anterior (1 / 1.6) los enlaces se apiñaban y partían en dos líneas mientras
     sobraba la mitad del ancho a la izquierda. */
  grid-template-columns: minmax(200px, 0.9fr) minmax(0, 3.2fr);
  gap: var(--s-10);
}

.footer-tagline {
  margin-top: var(--s-4);
  max-width: 320px;
  color: var(--gray);
  font-size: var(--fs-footnote);
}

.footer-links {
  display: grid;
  /* Columnas por contenido y no un número fijo: el mapa del sitio crece con cada página nueva y no
     debe obligar a tocar el CSS para que quepa. */
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: var(--s-6);
}

/* La página actual aparece en el mapa pero sin enlace, para no enlazarse a sí misma. */
.footer-links [aria-current='page'] {
  color: var(--white);
  font-size: var(--fs-footnote);
  font-weight: 700;
}

.footer-links h3 {
  margin-bottom: var(--s-3);
  color: var(--gray);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.footer-links li + li { margin-top: var(--s-2); }

.footer-links a {
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  transition: color 0.18s ease;
}
.footer-links a:hover { color: var(--white); }

/* Un ítem sin página publicada se muestra pero no se enlaza: un enlace muerto cuesta más que la
   ausencia del enlace, tanto para la persona como para el rastreo del buscador. */
.footer-links span[data-pending] { color: var(--gray); font-size: var(--fs-footnote); }

/* Contacto y redes: cierran el mapa del sitio antes de la línea legal. */
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
}

.footer-contact a { color: var(--yellow); }
.footer-contact a:hover { color: var(--yellow-hover); }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  color: var(--gray);
  font-size: var(--fs-caption);
}

/* ------------------------------------------------------------- movimiento --- */

/* Aparición al entrar en pantalla. El estado inicial se aplica sólo si el JS marcó la página como
   capaz de animar, para que sin JS (o si falla) el contenido nunca quede invisible. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-motion [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 900px) {
  .desktop-nav,
  .desktop-only { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: block; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

@media (max-width: 560px) {
  :root { --header-h: 68px; }
  .container { width: min(100% - 2 * var(--s-4), var(--container)); }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand-word { font-size: 22px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}