/*
Theme Name: Asesoria Raton Asociados
Theme URI: https://asesoria-raton-asociados.es
Author: Trinocex TriForge
Author URI: https://trinocex.com
Description: Theme classic WordPress code-puro para Asesoría Ratón Asociados. Asesoría fiscal, contable y laboral para autónomos y pymes con llevanza mensual, plazos AEAT controlados y respuesta en 24 h. Construido con PHP plano, CSS moderno (container queries, color-mix, :has, view-transitions) y JS módulo ES2022. Estilo visual Cristal Atlántico sobre paleta Confianza Atlántica.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asesoria-raton-asociados
Tags: classic, code-puro, profesional, asesoria, fiscal, contable, laboral
*/

/* ----------------------------------------------------------------
   BASE RESET + GLOBAL TYPOGRAPHY
   Token-driven. Toda variable vive en tokens.css.
---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
}

@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;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: var(--bg-aurora);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-wrap: pretty;
  max-inline-size: 70ch;
}

p + p { margin-block-start: var(--space-4); }

a {
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--motion-fast) var(--ease-out);
}
a:hover { color: var(--color-primary-strong); text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

img, picture, svg, video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; }

/* ----------------------------------------------------------------
   FOCUS-VISIBLE GLOBAL (Regla 4 · A11y AA)
---------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ----------------------------------------------------------------
   SKIP LINK
---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
  transition: transform var(--motion-base) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--color-accent);
}

/* ----------------------------------------------------------------
   CONTAINER UTIL · base layout shell
---------------------------------------------------------------- */
.trx-container {
  width: min(100% - var(--space-6) * 2, var(--container-max));
  margin-inline: auto;
}

.trx-section {
  container-type: inline-size;
  position: relative;
  padding-block: clamp(3.5rem, 7cqi + 1rem, 7rem);
}

/* ----------------------------------------------------------------
   SELECTION
---------------------------------------------------------------- */
::selection {
  background-color: color-mix(in oklch, var(--color-primary) 25%, transparent);
  color: var(--color-text);
}

/* ----------------------------------------------------------------
   VIEW TRANSITIONS (Regla 3 · CSS moderno)
---------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-slow);
  animation-timing-function: var(--ease-out);
}