/* ════════════════════════════════════════════════════════════════════
   to-base.css — base del rediseño "estilo Apple" (noviembre 2026).
   SOLO variables: no estila nada por sí sola. Cada pantalla que se pasa
   al estilo nuevo carga esta hoja + su capa (home-noche.css, …) y usa
   estos tokens, así un tono se cambia en un solo lugar.
     Noche  (--n-*): páginas que venden/presentan (inicio, landings, registro).
     Claro  (--c-*): páginas para mirar y comparar (listado, perfil).
   Renders aprobados: docs/redisenio-apple/etapa1.html
   ════════════════════════════════════════════════════════════════════ */
:root {
  --to-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --to-amarillo: #FFD11A;
  --to-amarillo-grad: linear-gradient(95deg, #FFE27A 0%, #FFD11A 45%, #F29F05 100%);
  /* El mismo degradé, un punto más profundo, para texto sobre fondo CLARO
     (el de arriba es para negro: sobre #eeeef3 el amarillo claro no se lee). */
  --to-amarillo-grad-claro: linear-gradient(95deg, #F5B800 0%, #F29F05 55%, #E07B00 100%);
  --to-verde-wa: #25D366;
  --to-verde-ok: #34C759;
  --to-azul-link: #0a84ff;

  /* Noche */
  --n-bg: #000;
  --n-card: #1c1c1e;
  --n-card-2: #111113;
  --n-borde: #2a2a2c;
  --n-txt: #f5f5f7;
  --n-sec: #a1a1a6;
  --n-ter: #6e6e73;

  /* Claro */
  --c-bg: #eeeef3;            /* un punto más oscuro que el de Apple: separa más la tarjeta blanca */
  --c-card: #fff;
  --c-borde: #e8e8ed;
  --c-txt: #1d1d1f;
  --c-sec: #6e6e73;
  --c-ter: #86868b;

  --to-r-xl: 28px;
  --to-r-lg: 22px;
  --to-r-md: 16px;
}

/* Contraste (pedido del dueño, nov. 2026: "lo veo muy plano"). */
:root {
  --c-borde-fuerte: rgba(0, 0, 0, .1);
  --c-sombra: 0 2px 4px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .09);
  --to-estrella: #FFB800;
  --to-azul-tinte: #e3eeff;
  --to-azul-fuerte: #0055d4;
  --to-verde-tinte: #dff5e7;
  --to-verde-fuerte: #127a3e;
}

/* Verde de ACCIÓN (nov. 2026): el de los botones de contacto del listado.
   Más profundo que el verde de iOS para que el texto blanco tenga buen
   contraste, y moderno (esmeralda) para acompañar el negro y el amarillo. */
:root {
  --to-verde-accion: #16a34a;
  --to-verde-accion-hover: #15803d;
  --to-verde-accion-sombra: 0 6px 16px rgba(22, 163, 74, .32);
}