/* ============================================================
   Totten Creative — CSS GLOBAL del proyecto (Customizer / push:css)
   Prefijo: tn-
   Fuente de verdad de los tokens: DESIGN-SYSTEM.md
   Subir con: npm run push:css
   ------------------------------------------------------------
   9-sep-2026: hasta hoy este archivo seguía siendo la PLANTILLA en
   crudo — paleta crema/naranja, fuentes serif y tres marcadores sin sustituir.
   Los bloques pintan su propio fondo negro, así que casi no se veía,
   pero el body, el ::selection y el anillo de foco iban en naranja
   sobre crema. Sustituido por los tokens reales del DESIGN-SYSTEM.
   ============================================================ */

:root {
  /* ---- Paleta de marca (DESIGN-SYSTEM §1) ---- */
  --tn-black:     #000000;  /* fondo principal — estética dark */
  --tn-dark:      #060E18;  /* fondo alternativo azulado */
  --tn-blue-deep: #0D1B2A;  /* paneles/overlays profundos */
  --tn-white:     #FFFFFF;  /* texto principal sobre oscuro */
  --tn-blue:      #0A84FF;  /* acento primario (azul eléctrico) */
  --tn-blue-mid:  #0055AA;  /* acento apagado / hovers */
  --tn-cyan:      #00B4FF;  /* acento secundario (gradientes/glow) */
  --tn-gray:      #6B7280;  /* texto secundario */

  --tn-blue-dim:  rgb(10 132 255 / 15%);
  --tn-blue-glow: rgb(10 132 255 / 35%);

  /* Alias de rol: lo que usan body, foco y selección */
  --tn-base:   var(--tn-white);
  --tn-fondo:  var(--tn-black);
  --tn-acento: var(--tn-blue);

  /* ---- Tipografía (DESIGN-SYSTEM §2) ----
     Sora + Playfair Display. Hoy llegan por Google Fonts desde el bloque
     hero de cada página (un solo URL por página, R12). Cuando el cliente
     confirme la licencia por escrito se pasan a .woff2 self-hosted y se
     añade aquí el @font-face. Ver PENDIENTE-CLIENTE.md §8. */
  --tn-font-display: 'Playfair Display', 'Times New Roman', serif;
  --tn-font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --tn-font-body:    'Sora', system-ui, -apple-system, sans-serif;

  /* ---- Escala fluida ---- */
  --tn-fs-display-xl: clamp(3.5rem, 9vw, 7.5rem);
  --tn-fs-display-l: clamp(2.75rem, 6vw, 5rem);
  --tn-fs-h2: clamp(2rem, 3.5vw, 3rem);
  --tn-fs-h3: clamp(1.5rem, 2.5vw, 2rem);
  --tn-fs-h4: clamp(1.25rem, 2vw, 1.5rem);
  --tn-fs-body-l: 1.125rem;
  --tn-fs-body: 1rem;
  --tn-fs-caption: 0.8125rem;
  --tn-fs-micro: 0.6875rem;

  /* ---- Espaciado ---- */
  --tn-sp-1: 4px;  --tn-sp-2: 8px;  --tn-sp-3: 12px; --tn-sp-4: 16px;
  --tn-sp-5: 24px; --tn-sp-6: 32px; --tn-sp-7: 48px; --tn-sp-8: 64px;
  --tn-sp-9: 96px; --tn-sp-10: 128px;
  --tn-side-mobile: 20px;
  --tn-side-desktop: 80px;
  --tn-section-y-mobile: 64px;
  --tn-section-y-desktop: 128px;

  /* ---- Layout ---- */
  --tn-max-content: 720px;
  --tn-max-prose: 640px;
  --tn-max-grid: 1200px;
  --tn-max-wide: 1440px;

  /* ---- Movimiento (animar solo transform/opacity — INP) ---- */
  --tn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tn-dur-fast: 150ms;
  --tn-dur-normal: 300ms;
  --tn-dur-slow: 600ms;
}

/* ---- Base global (el CSS del Customizer SÍ puede tocar body) ---- */
body {
  font-family: var(--tn-font-body);
  color: var(--tn-base);
  background: var(--tn-fondo);
}

::selection {
  background: #0A6CDB;
  color: var(--tn-white);
}

/* ---- Skip-link (el markup va en pages-prod/header.html) ---- */
.tn-skip-link {
  position: absolute;
  top: -100px;
  left: var(--tn-sp-4);
  z-index: 10000;
  padding: var(--tn-sp-3) var(--tn-sp-5);
  background: var(--tn-white);
  color: var(--tn-black);
  font-family: var(--tn-font-heading);
  font-size: var(--tn-fs-body);
  text-decoration: none;
  transition: top var(--tn-dur-fast) var(--tn-ease);
}

.tn-skip-link:focus-visible {
  top: var(--tn-sp-4);
}

/* ---- El rosa del tema ----------------------------------------------
   Hello Elementor trae en su reset.css:
     [type="submit"]:hover, button:hover { background-color: #cc3366 }
   Es decir: CUALQUIER <button> del sitio se vuelve rosa al pasar el ratón,
   salvo que el bloque declare su propio fondo en :hover — cosa que casi
   ningún bloque hace, porque su hover es un borde o una capa interna.
   Se veía en el botón "Enviar" de Contacto (rev. vídeo 9-sep-2026).
   Esto solo apaga el color del tema; el hover que declare cada bloque manda. */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus,
button[type="button"]:hover,
button[type="button"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="reset"]:hover,
button[type="reset"]:focus {
  background-color: transparent;
  color: inherit;
}

/* ---- Foco canónico del proyecto (WCAG 2.1 AA: foco visible) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tn-acento);
  outline-offset: 3px;
}

/* ---- Respeto global a usuarios con movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* a11y: anula animación para quien lo pide */
    animation-iteration-count: 1 !important; /* a11y */
    transition-duration: 0.01ms !important; /* a11y */
    scroll-behavior: auto !important; /* a11y */
  }
}