@charset "UTF-8";
/* ==========================================================================
   Flor Catalán Nails Studio — florcatalan.com
   styles.css · Fase 1: tokens, reset, tipografía fluida, base y utilidades
   --------------------------------------------------------------------------
   Autor        : Alianzared
   Metodología  : Vanilla CSS · Mobile-first · WCAG 2.2 AA
   Arquitectura : Cascade Layers (@layer) para controlar la cascada sin
                  recurrir a !important ni a selectores de alta especificidad.
   Tema oscuro  : un único mapa de tokens con light-dark(); las reglas de
                  componentes NUNCA se reescriben para el modo oscuro.
   Requisitos   : navegadores con soporte de light-dark() y color-scheme
                  (Chrome/Edge 123+, Safari 17.5+, Firefox 120+).
   ==========================================================================
   ÍNDICE
   00. Tipografías autoalojadas (@font-face)
   01. Cascade layers (orden de la cascada)
   02. Tokens de diseño (:root)
   03. Esquema de color y tema oscuro
   04. Reset moderno
   05. Tipografía fluida y elementos base
   06. Accesibilidad (foco, skip link, contenido solo para lectores)
   07. Layout: contenedores y primitivas
   08. Componentes base reutilizables
   09. Utilidades
   10. Preferencias de movimiento (prefers-reduced-motion)
   11. Índice de clases CSS creadas
   ========================================================================== */


/* ==========================================================================
   00. TIPOGRAFÍAS AUTOALOJADAS
   --------------------------------------------------------------------------
   Los archivos viven en /fonts y se sirven desde el propio dominio: la CSP
   del .htaccess declara `font-src 'self'`, así que no puede haber peticiones
   a fonts.gstatic.com. Solo se incluyen los subconjuntos latin y latin-ext
   (castellano completo); `unicode-range` evita descargar el segundo salvo
   que la página use algún carácter fuera de Latin-1.

   Playfair Display  → titulares (variable 400–900)
   Playfair Display SC → titulares en versalitas (h1, h3)
   Rubik             → texto corrido, menús y botones (variable 300–700)
   Over the Rainbow  → antetítulos manuscritos decorativos

   `font-display: swap` pinta ya con la familia de reserva y sustituye al
   llegar el archivo: nunca hay texto invisible (FOIT).
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/playfairdisplay-400-900-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: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/playfairdisplay-400-900-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: "Playfair Display SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/playfairdisplaysc-400-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: "Playfair Display SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/playfairdisplaysc-400-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: "Rubik";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/rubik-300-700-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: "Rubik";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/rubik-300-700-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: "Over the Rainbow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/overtherainbow-400-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: "Over the Rainbow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/overtherainbow-400-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;
}


/* ==========================================================================
   01. CASCADE LAYERS
   El orden declarado aquí define la prioridad: cada capa posterior gana a la
   anterior con independencia de la especificidad. Gracias a esto las
   utilidades sobrescriben a los componentes sin necesidad de !important.
   ========================================================================== */

@layer tokens, reset, base, a11y, layout, components, utilities;


/* ==========================================================================
   02. TOKENS DE DISEÑO
   --------------------------------------------------------------------------
   Dos niveles:
   a) Paleta cruda (--c-*): valores literales. No usar directamente en
      componentes.
   b) Tokens semánticos: describen la función (superficie, texto, borde…).
      Son los únicos que se remapean en tema oscuro.
   ========================================================================== */

@layer tokens {

  :root {

    /* ---- a) Paleta cruda ------------------------------------------------ */

    /* Negro / neutros cálidos */
    --c-black-900: #0b0a09;
    --c-black-800: #131110;
    --c-black-700: #1c1918;
    --c-black-600: #272220;
    --c-black-500: #3a3330;
    --c-gray-600:  #5c5350;
    --c-gray-500:  #7d726e;
    --c-gray-400:  #a89f9b;
    --c-gray-300:  #d6cec9;
    --c-gray-200:  #e8e1dc;
    --c-gray-100:  #f4efeb;
    --c-cream:     #fdfbf8;
    --c-white:     #ffffff;

    /* Dorado */
    --c-gold-800: #5e4610;
    --c-gold-700: #7a5c16;
    --c-gold-600: #9a7520;
    --c-gold-500: #c9a227;
    --c-gold-400: #d9bc5f;
    --c-gold-300: #e7d49a;
    --c-gold-200: #f2e6c6;
    --c-gold-100: #faf4e4;

    /* Rosado */
    --c-rose-800: #6f3742;
    --c-rose-700: #8c4a55;
    --c-rose-600: #b76e79;
    --c-rose-500: #d99aa3;
    --c-rose-400: #e8b4bb;
    --c-rose-300: #efc9ce;
    --c-rose-200: #f7e0e3;
    --c-rose-100: #fbeff1;

    /* Funcionales (estados) */
    --c-green-700: #1f6b45;
    --c-green-500: #25d366; /* verde de marca WhatsApp */
    --c-red-700:   #9b2226;

    /* ---- b) Tokens semánticos ------------------------------------------ */
    /* light-dark(claro, oscuro): un solo lugar por token, sin duplicar reglas */

    /* Superficies */
    --surface-page:    light-dark(var(--c-cream),     var(--c-black-900));
    --surface-raised:  light-dark(var(--c-white),     var(--c-black-800));
    --surface-sunken:  light-dark(var(--c-gray-100),  var(--c-black-700));
    --surface-accent:  light-dark(var(--c-rose-100),  var(--c-black-700));
    --surface-inverse: light-dark(var(--c-black-900), var(--c-gray-100));
    --surface-overlay: light-dark(rgb(11 10 9 / 55%), rgb(0 0 0 / 72%));

    /* Texto */
    --text-strong:  light-dark(var(--c-black-800), var(--c-gray-100));
    --text-body:    light-dark(var(--c-black-600), var(--c-gray-300));
    --text-muted:   light-dark(var(--c-gray-600),  var(--c-gray-400));
    --text-accent:  light-dark(var(--c-gold-700),  var(--c-gold-400));
    --text-rose:    light-dark(var(--c-rose-700),  var(--c-rose-400));
    --text-inverse: light-dark(var(--c-cream),     var(--c-black-900));
    --text-onbrand: light-dark(var(--c-black-800), var(--c-black-900));

    /* Marca */
    --brand-gold:        light-dark(var(--c-gold-500), var(--c-gold-400));
    --brand-gold-soft:   light-dark(var(--c-gold-100), var(--c-black-700));
    --brand-gold-strong: light-dark(var(--c-gold-700), var(--c-gold-300));
    --brand-rose:        light-dark(var(--c-rose-600), var(--c-rose-500));
    --brand-rose-soft:   light-dark(var(--c-rose-100), var(--c-black-700));
    --brand-ink:         light-dark(var(--c-black-900), var(--c-black-900));

    /* Bordes y separadores */
    /* --border-strong y --border-brand delimitan controles: necesitan >=3:1
       contra la superficie (WCAG 2.2 · 1.4.11 Contraste no textual). */
    --border-subtle: light-dark(var(--c-gray-200), var(--c-black-600));
    --border-strong: light-dark(var(--c-gray-500), var(--c-black-500));
    --border-brand:  light-dark(var(--c-gold-600), var(--c-gold-400));

    /* Enlaces */
    --link-color:       var(--text-accent);
    --link-color-hover: light-dark(var(--c-gold-800), var(--c-gold-300));

    /* Estados */
    --focus-ring-color: light-dark(var(--c-rose-700), var(--c-gold-300));
    --state-success:    light-dark(var(--c-green-700), #6ee7a4);
    --state-error:      light-dark(var(--c-red-700), #ff9ea1);
    --brand-whatsapp:   var(--c-green-500);

    /* Degradados decorativos */
    --gradient-gold: linear-gradient(
      100deg,
      var(--c-gold-600) 0%,
      var(--c-gold-400) 45%,
      var(--c-gold-600) 100%
    );
    --gradient-rose: linear-gradient(
      160deg,
      var(--brand-rose-soft) 0%,
      var(--surface-page) 70%
    );
    --gradient-veil: linear-gradient(
      to top,
      light-dark(rgb(11 10 9 / 82%), rgb(0 0 0 / 88%)) 0%,
      light-dark(rgb(11 10 9 / 30%), rgb(0 0 0 / 45%)) 55%,
      transparent 100%
    );

    /* ---- Tipografía ----------------------------------------------------- */
    /* Las familias se declaran una sola vez; los archivos se autoalojan en
       /fonts con las reglas @font-face de la sección 00.

       --font-display    titulares y citas (serif de alto contraste)
       --font-display-sc la misma serif en versalitas: h1 y h3, que van en
                         mayúsculas, y donde las versalitas reales evitan el
                         efecto «gritado» del text-transform sobre mayúsculas
       --font-body       texto corrido, navegación, botones y formularios
       --font-script     antetítulos manuscritos, siempre decorativos: nunca
                         debe portar información que no se repita en texto
                         normal, porque su legibilidad es baja.             */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-display-sc: "Playfair Display SC", "Playfair Display", Georgia,
                       "Times New Roman", serif;
    --font-body: "Rubik", "Segoe UI", system-ui, -apple-system,
                 "Helvetica Neue", Arial, sans-serif;
    --font-script: "Over the Rainbow", "Segoe Script", "Bradley Hand",
                   cursive;

    /* Escala tipográfica fluida (320px → 1280px). Nunca usar px en texto. */
    --step--2: clamp(0.75rem,   0.7292rem + 0.1042vw, 0.8125rem); /* 12→13 */
    --step--1: clamp(0.875rem,  0.8438rem + 0.1563vw, 0.9688rem); /* 14→15.5 */
    --step-0:  clamp(1rem,      0.9583rem + 0.2083vw, 1.125rem);  /* 16→18 */
    --step-1:  clamp(1.1875rem, 1.1042rem + 0.4167vw, 1.4375rem); /* 19→23 */
    --step-2:  clamp(1.375rem,  1.2292rem + 0.7292vw, 1.8125rem); /* 22→29 */
    --step-3:  clamp(1.625rem,  1.3958rem + 1.1458vw, 2.3125rem); /* 26→37 */
    --step-4:  clamp(1.875rem,  1.5208rem + 1.7708vw, 2.9375rem); /* 30→47 */
    --step-5:  clamp(2.1875rem, 1.6875rem + 2.5vw,    3.6875rem); /* 35→59 */
    --step-6:  clamp(2.5625rem, 1.8542rem + 3.5417vw, 4.6875rem); /* 41→75 */

    --leading-tight:   1.12;
    --leading-snug:    1.28;
    --leading-normal:  1.6;
    /* Interlineado del texto corrido. Holgado a propósito: es lo que da el
       aire de editorial de spa y compensa el peso ligero de la Rubik 300. */
    --leading-relaxed: 1.85;

    --tracking-tight:  -0.015em;
    --tracking-normal: 0;
    /* Los titulares en versalitas necesitan separación positiva: sin ella
       las mayúsculas pequeñas se apelmazan. */
    --tracking-display: 0.02em;
    --tracking-wide:   0.08em;
    --tracking-wider:  0.16em;
    /* Tracking de los botones y microtítulos en caja alta (estilo salón). */
    --tracking-widest: 0.3em;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* Longitud de línea legible (WCAG 1.4.8) */
    --measure:        68ch;
    --measure-narrow: 46ch;

    /* ---- Espaciado fluido ------------------------------------------------ */
    --space-3xs: clamp(0.25rem, 0.2292rem + 0.1042vw, 0.3125rem); /*  4→5  */
    --space-2xs: clamp(0.5rem,  0.4583rem + 0.2083vw, 0.625rem);  /*  8→10 */
    --space-xs:  clamp(0.75rem, 0.6875rem + 0.3125vw, 0.9375rem); /* 12→15 */
    --space-s:   clamp(1rem,    0.9167rem + 0.4167vw, 1.25rem);   /* 16→20 */
    --space-m:   clamp(1.5rem,  1.375rem  + 0.625vw,  1.875rem);  /* 24→30 */
    --space-l:   clamp(2rem,    1.8333rem + 0.8333vw, 2.5rem);    /* 32→40 */
    --space-xl:  clamp(3rem,    2.75rem   + 1.25vw,   3.75rem);   /* 48→60 */
    --space-2xl: clamp(4rem,    3.6667rem + 1.6667vw, 5rem);      /* 64→80 */
    --space-3xl: clamp(6rem,    5.5rem    + 2.5vw,    7.5rem);    /* 96→120 */

    /* ---- Contenedores ---------------------------------------------------- */
    --container-wide:   87.5rem; /* 1400px — galerías a sangre */
    --container-max:    75rem;   /* 1200px — ancho general */
    --container-narrow: 46rem;   /* 736px  — texto largo */
    --container-pad:    var(--space-m);

    /* ---- Radios ---------------------------------------------------------- */
    --radius-xs:     0.25rem;
    --radius-sm:     0.5rem;
    --radius-md:     0.875rem;
    --radius-lg:     1.25rem;
    --radius-xl:     2rem;
    --radius-pill:   62.4375rem;
    --radius-circle: 50%;

    /* ---- Sombras --------------------------------------------------------- */
    --shadow-xs: 0 1px 2px light-dark(rgb(58 42 36 / 8%), rgb(0 0 0 / 45%));
    --shadow-sm: 0 1px 2px light-dark(rgb(58 42 36 / 6%), rgb(0 0 0 / 40%)),
                 0 4px 12px light-dark(rgb(58 42 36 / 8%), rgb(0 0 0 / 45%));
    --shadow-md: 0 2px 4px light-dark(rgb(58 42 36 / 6%), rgb(0 0 0 / 40%)),
                 0 12px 28px light-dark(rgb(58 42 36 / 12%), rgb(0 0 0 / 55%));
    --shadow-lg: 0 4px 8px light-dark(rgb(58 42 36 / 8%), rgb(0 0 0 / 45%)),
                 0 24px 56px light-dark(rgb(58 42 36 / 16%), rgb(0 0 0 / 62%));
    --shadow-gold: 0 8px 24px light-dark(rgb(201 162 39 / 28%),
                                         rgb(217 188 95 / 18%));

    /* ---- Movimiento ------------------------------------------------------ */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 480ms;

    /* ---- Capas (z-index) ------------------------------------------------- */
    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  100;
    --z-header:  200;
    --z-float:   300;
    --z-overlay: 400;
    --z-modal:   500;
    --z-skip:    900;

    /* ---- Métricas de interfaz -------------------------------------------- */
    --header-height: 4.5rem;      /* altura del header fijo */
    --tap-target: 2.75rem;        /* 44px — WCAG 2.2 objetivo cómodo */
    --border-hairline: 1px;
  }
}


/* ==========================================================================
   03. ESQUEMA DE COLOR Y TEMA OSCURO
   --------------------------------------------------------------------------
   No se reescribe ni una sola regla de componente: basta con cambiar el
   color-scheme del documento para que todos los light-dark() del bloque de
   tokens conmuten a la vez. Además los controles nativos (scrollbars, inputs,
   date pickers) adoptan el esquema correcto de forma automática.

   Solo hay dos estados, oscuro y claro, y el oscuro es el de partida. No se
   sigue prefers-color-scheme: la marca se presenta sobre negro, así que el
   sistema operativo de quien visita no decide con qué aspecto abre el sitio.

   El atributo va escrito en el <html> de cada página, de modo que el estado
   inicial existe aunque JavaScript no llegue a ejecutarse. El :root de aquí
   abajo repite ese mismo valor por si algún día faltara el atributo.
   - [data-theme="dark"] / ["light"]: lo cambia el conmutador de la cabecera.
   ========================================================================== */

@layer tokens {

  :root {
    color-scheme: dark;
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }
}


/* ==========================================================================
   04. RESET MODERNO
   ========================================================================== */

@layer reset {

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
    /* WCAG 2.2 · 2.4.11 Foco no oscurecido: compensa el header fijo.
       --altura-cabecera la publica js/main.js con el alto real medido; la
       constante de reserva solo actúa sin JavaScript. */
    scroll-padding-top: calc(
      var(--altura-cabecera, var(--header-height)) + var(--space-s)
    );
  }

  body {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }

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

  img,
  video {
    block-size: auto;
  }

  img {
    font-style: italic; /* estiliza el texto alternativo si falla la carga */
    vertical-align: middle;
  }

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

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

  textarea {
    resize: vertical;
    min-block-size: 6rem;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  dt,
  dd,
  figcaption {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding-inline-start: 0;
  }

  table {
    border-collapse: collapse;
    inline-size: 100%;
  }

  fieldset {
    border: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  address {
    font-style: normal;
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  :target {
    scroll-margin-block-start: calc(var(--header-height) + var(--space-s));
  }

  [hidden] {
    display: none;
  }

  ::selection {
    background-color: var(--brand-rose);
    color: var(--c-black-900);
  }
}


/* ==========================================================================
   05. TIPOGRAFÍA FLUIDA Y ELEMENTOS BASE
   ========================================================================== */

@layer base {

  body {
    background-color: var(--surface-page);
    background-image: var(--gradient-rose);
    background-repeat: no-repeat;
    background-size: 100% 60vh;
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-light);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
  }

  /* Jerarquía de titulares:
       h1 y h3 → versalitas en caja alta (los dos niveles que abren página y
                 sección, donde interesa el tono de rótulo de salón)
       h2 y h4 → serif en caja normal, para que los bloques largos de texto
                 no queden gritados.
     El peso se mantiene en 400: en una serif de contraste alto como la
     Playfair, la negrita ensucia el trazo fino a tamaños grandes.          */
  h1,
  h2,
  h3,
  h4 {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-normal);
    text-wrap: balance;
  }

  /* Versalitas reales, no `text-transform: uppercase`: la Playfair Display SC
     ya trae las minúsculas dibujadas como mayúsculas de menor altura, así que
     el titular se lee como un rótulo grabado y conserva la diferencia visual
     entre la inicial y el resto. Forzar mayúsculas encima anularía ese dibujo
     y dejaría un bloque de caja alta uniforme. */
  h1,
  h3 {
    font-family: var(--font-display-sc);
    letter-spacing: var(--tracking-display);
  }

  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); line-height: var(--leading-snug); }
  h3 { font-size: var(--step-3); }
  h4 { font-size: var(--step-2); line-height: var(--leading-snug); }

  h5,
  h6 {
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  h6 {
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  a {
    color: var(--link-color);
    text-decoration-line: underline;
    text-decoration-thickness: 0.0625em;
    text-underline-offset: 0.22em;
    transition: color var(--duration-fast) var(--ease-soft),
                text-decoration-color var(--duration-fast) var(--ease-soft);
  }

  a:hover {
    color: var(--link-color-hover);
    text-decoration-thickness: 0.125em;
  }

  strong,
  b {
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
  }

  em,
  i {
    font-style: italic;
  }

  small {
    font-size: var(--step--1);
  }

  mark {
    background-color: var(--brand-gold-soft);
    color: var(--text-strong);
    padding-inline: 0.2em;
    border-radius: var(--radius-xs);
  }

  blockquote {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: var(--leading-snug);
    color: var(--text-strong);
  }

  cite {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-style: normal;
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
  }

  ul,
  ol {
    padding-inline-start: 1.25em;
  }

  /* Ritmo entre ítems solo en listas de contenido. Las listas usadas como
     layout (role="list" dentro de .grid, .cluster o .stack) ya separan con
     gap: añadir margen aquí duplicaría el espaciado. */
  :where(ul, ol):not([role="list"]) li + li {
    margin-block-start: var(--space-2xs);
  }

  li::marker {
    color: var(--brand-gold);
  }

  dt {
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
  }

  dd {
    margin-inline-start: 0;
    color: var(--text-muted);
  }

  hr {
    block-size: var(--border-hairline);
    border: 0;
    background-color: var(--border-subtle);
    margin-block: var(--space-l);
  }

  figcaption {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-block-start: var(--space-2xs);
  }

  code,
  kbd,
  samp {
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo,
                 Consolas, monospace;
    font-size: 0.9em;
  }

  caption {
    caption-side: bottom;
    font-size: var(--step--1);
    color: var(--text-muted);
    text-align: start;
    padding-block-start: var(--space-2xs);
  }

  th {
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
    text-align: start;
  }

  th,
  td {
    padding-block: var(--space-xs);
    padding-inline: var(--space-2xs);
    border-block-end: var(--border-hairline) solid var(--border-subtle);
    vertical-align: baseline;
  }
}


/* ==========================================================================
   06. ACCESIBILIDAD
   ========================================================================== */

@layer a11y {

  /* Indicador de foco visible y consistente (WCAG 2.2 · 2.4.11 / 2.4.13) */
  :focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  /* Evita el doble anillo en navegadores que aún aplican :focus */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Enlace de salto al contenido principal */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: var(--z-skip);
    padding: var(--space-2xs) var(--space-s);
    background-color: var(--surface-raised);
    color: var(--text-strong);
    border: var(--border-hairline) solid var(--border-brand);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* Oculto visualmente pero anunciado por lectores de pantalla */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Variante que sí se muestra al recibir foco (p. ej. controles ocultos) */
  .visually-hidden--focusable:focus-visible {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  /* Refuerzo del foco cuando el usuario pide más contraste */
  @media (prefers-contrast: more) {
    :focus-visible {
      outline-width: 4px;
      outline-offset: 3px;
    }
  }
}


/* ==========================================================================
   07. LAYOUT: CONTENEDORES Y PRIMITIVAS
   Mobile-first: una columna por defecto; las columnas se activan con
   min-width o con auto-fit, nunca al revés.
   ========================================================================== */

@layer layout {

  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .container--narrow { max-inline-size: var(--container-narrow); }
  .container--wide   { max-inline-size: var(--container-wide); }
  .container--flush  { padding-inline: 0; }

  /* Sección vertical con ritmo consistente */
  .section {
    padding-block: var(--space-2xl);
  }

  .section--tight { padding-block: var(--space-xl); }
  .section--loose { padding-block: var(--space-3xl); }

  .section--raised { background-color: var(--surface-raised); }
  .section--sunken { background-color: var(--surface-sunken); }
  .section--accent { background-color: var(--surface-accent); }

  .section--inverse {
    background-color: var(--surface-inverse);
    background-image: none;
    color: light-dark(var(--c-gray-300), var(--c-black-600));
  }

  .section--inverse :is(h1, h2, h3, h4, h5, h6) {
    color: light-dark(var(--c-cream), var(--c-black-900));
  }

  /* Flujo vertical: separa hermanos sin márgenes sueltos por componente */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-s));
  }

  .flow--tight { --flow-space: var(--space-2xs); }
  .flow--loose { --flow-space: var(--space-m); }

  /* Pila vertical con gap */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-s));
  }

  .stack--tight { --stack-gap: var(--space-2xs); }
  .stack--loose { --stack-gap: var(--space-l); }

  /* Grupo horizontal que envuelve (botones, etiquetas, redes) */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-xs));
  }

  .cluster--center  { justify-content: center; }
  .cluster--between { justify-content: space-between; }
  .cluster--end     { justify-content: flex-end; }

  /* Rejilla responsiva sin media queries: mínimo por tarjeta */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-m));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--grid-min, 17rem), 100%), 1fr)
    );
  }

  .grid--wide   { --grid-min: 22rem; }
  .grid--narrow { --grid-min: 13rem; }
  .grid--loose  { --grid-gap: var(--space-l); }

  /* Rejilla explícita de 12 columnas para composiciones editoriales */
  .grid-12 {
    display: grid;
    gap: var(--grid-gap, var(--space-m));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  /* Dos bloques (texto + imagen) que se apilan en móvil */
  .split {
    display: grid;
    gap: var(--space-l);
    align-items: center;
  }

  @media (min-width: 48em) {
    .split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split--media-first > :first-child { order: 2; }
    .split--media-first > :last-child  { order: 1; }

    .split--wide-start { grid-template-columns: 1.35fr 1fr; }
    .split--wide-end   { grid-template-columns: 1fr 1.35fr; }
  }

  /* Centra su contenido y limita la medida de lectura */
  .prose {
    max-inline-size: var(--measure);
  }

  .prose--narrow { max-inline-size: var(--measure-narrow); }
  .prose--center { margin-inline: auto; }

  /* Contenedor que escapa del padding para sangrar a pantalla completa */
  .full-bleed {
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  /* Carrusel accesible por scroll (galería, testimonios) */
  .scroller {
    display: flex;
    gap: var(--space-m);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    padding-block-end: var(--space-xs);
    overscroll-behavior-x: contain;
  }

  .scroller > * {
    flex: 0 0 auto;
    inline-size: min(20rem, 78%);
    scroll-snap-align: start;
  }

  /* Superposición de contenido sobre imagen (hero, tarjetas de galería) */
  .overlay {
    display: grid;
    isolation: isolate;
  }

  .overlay > * {
    grid-area: 1 / 1;
  }

  .overlay__veil {
    background-image: var(--gradient-veil);
    z-index: var(--z-raised);
  }

  .overlay__content {
    position: relative;
    z-index: var(--z-raised);
    align-self: end;
  }
}


/* ==========================================================================
   08. COMPONENTES BASE REUTILIZABLES
   ========================================================================== */

@layer components {

  /* ---- Cabecera del sitio ------------------------------------------------
     Composición simétrica: el logotipo manda en el centro y la navegación se
     reparte a izquierda y derecha, con la llamada a la acción cerrando el
     lado derecho. Es una cabecera de salón, no de aplicación.

     Rejilla de tres columnas en ambos tamaños:

       móvil        [botón]   [logotipo]   ( vacío )
                    [·········  navegación  ·········]   ← fila 2, plegable

       escritorio   [media nav]  [logotipo]  [media nav + CTA]

     La columna vacía de la derecha en móvil no es un descuido: al ser `1fr`
     como la del botón, es lo que mantiene el logotipo centrado de verdad.

     Sin JavaScript la navegación permanece siempre desplegada (ver .site-nav).
     ---------------------------------------------------------------------- */

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--surface-raised);
    border-block-end: var(--border-hairline) solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2xs) var(--space-s);
    padding-block: var(--space-2xs);
  }

  .site-header__brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    text-decoration: none;
  }

  /* El logotipo completo solo aparece cuando hay ancho para él; por debajo
     manda el isotipo, que centrado ocupa el mismo papel visual. El cambio
     ocurre antes (48em) que el reparto de la navegación (72em): en tablet
     sobra sitio para la marca completa aunque el menú siga plegado. */
  .site-header__logo--full { display: none; }

  @media (min-width: 48em) {
    .site-header__logo--full    { display: block; }
    .site-header__logo--compact { display: none; }
  }

  /* El botón de menú solo accionaría algo con JavaScript: sin él se oculta y
     la navegación queda visible de forma permanente.
     Los selectores llevan .site-header por delante a propósito: el botón
     también es un .btn, que declara `display: inline-flex` más abajo en esta
     misma capa. Con un solo nombre de clase empatarían en especificidad y
     ganaría el .btn por venir después, de modo que el botón reaparecería
     justo en el caso que se quiere evitar: la página sin JavaScript. */
  .site-header .site-header__toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: none;
  }

  .js .site-header .site-header__toggle {
    display: inline-flex;
  }

  /* ---- Conmutador de tema -------------------------------------------------
     Botón cuadrado y sin rótulo, en el extremo derecho de la barra. Ocupa la
     tercera columna, que en móvil está vacía: así equilibra el botón «Menú»
     de la izquierda y deja el logotipo centrado en la del medio.

     Funciona sin JavaScript en el sentido de que nunca miente: el icono lo
     elige el CSS a partir del [data-theme] del <html>, que viene escrito en
     el propio HTML. Sin JS el botón no cambia nada, pero tampoco muestra un
     estado falso. El texto accesible lo lleva un .visually-hidden dentro, y
     el estado lo comunica aria-checked, que actualiza js/main.js.

     El selector lleva .site-header por delante por el mismo motivo que el del
     botón «Menú» de arriba: el conmutador también es un .btn.btn--ghost, y
     esas dos reglas se declaran más abajo en esta misma capa. Con un solo
     nombre de clase empatarían en especificidad y ganarían ellas por venir
     después, devolviéndole el relleno lateral y el radio de píldora que aquí
     se le quitan para dejarlo cuadrado.
     ---------------------------------------------------------------------- */
  .site-header .site-header__tema {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    inline-size: var(--tap-target);
    block-size: var(--tap-target);
    padding: 0;
    /* El filete es lo que lo convierte en un control a la vista: sin él, un
       icono suelto en una esquina no se lee como algo pulsable. */
    border-color: var(--border-strong);
    border-radius: var(--radius-circle);
  }

  .site-header .site-header__tema:hover {
    border-color: var(--brand-gold);
    color: var(--brand-gold-strong);
  }

  /* Sobre la fotografía del hero la cabecera va sin fondo: el filete gris se
     perdería contra la imagen, así que ahí se dibuja en blanco translúcido. */
  .site-header[data-flotante="true"] .site-header__tema {
    border-color: rgb(255 255 255 / 35%);
  }

  .site-header[data-flotante="true"] .site-header__tema:hover {
    border-color: var(--c-gold-300);
    color: var(--c-gold-200);
  }

  .site-header__tema-icono {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: currentColor;
  }

  /* El sol solo aparece en tema claro. Se oculta por defecto y no al revés
     para que, si faltara el atributo, quede a la vista la luna: el icono que
     corresponde al tema oscuro, que es el de partida. */
  .site-header__tema-icono--sol {
    display: none;
  }

  :root[data-theme="light"] .site-header__tema-icono--sol  { display: block; }
  :root[data-theme="light"] .site-header__tema-icono--luna { display: none; }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-block-end: var(--space-2xs);
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav[data-open="true"] {
    display: flex;
  }

  /* Dentro del panel plegable los ítems se apilan: en fila, un desplegable
     abierto empujaría a sus vecinos a un costado y el menú quedaría ilegible.
     A partir de 64em pasan a fila (ver la media query del final). */
  .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3xs);
  }

  /* Enlaces de primer nivel: rótulos en caja alta, sin subrayado permanente.
     El filete aparece al pasar y en la página actual, y se dibuja con
     `border` en lugar de `text-decoration` para poder separarlo del texto. */
  .site-nav__link,
  .site-nav .menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: var(--tap-target);
    border-block-end: 2px solid transparent;
    color: var(--tinta-cabecera, var(--text-strong));
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-soft),
                border-color var(--duration-fast) var(--ease-soft);
  }

  .site-nav__link:hover,
  .site-nav .menu__trigger:hover,
  .site-nav .menu[open] > .menu__trigger {
    color: var(--brand-gold-strong);
    border-block-end-color: var(--brand-gold);
  }

  .site-nav__link[aria-current="page"] {
    color: var(--brand-gold-strong);
    border-block-end-color: var(--brand-gold);
  }

  @media (min-width: 72em) {
    .site-header__inner {
      gap: var(--space-m);
      padding-block: var(--space-xs);
    }

    /* Con la navegación desplegada el botón no tiene nada que abrir, y además
       ocuparía la misma celda que la media navegación izquierda. */
    .site-header .site-header__toggle,
    .js .site-header .site-header__toggle { display: none; }

    /* `display: contents` disuelve la caja del <nav> para que sus dos listas
       pasen a ser celdas de la misma rejilla que el logotipo, y así puedan
       colocarse una a cada lado. El elemento sigue existiendo en el árbol de
       accesibilidad: la región de navegación y su aria-label se conservan.
       La tercera regla repite el selector con [data-open] porque el script
       lo deja escrito en el DOM al pasar de móvil a escritorio. */
    .site-nav,
    .js .site-nav,
    .js .site-nav[data-open="true"] {
      display: contents;
    }

    /* La barra no rompe nunca en dos filas: con el logotipo centrado en la
       columna del medio, una segunda fila lo descoloca y deforma la cabecera
       entera. De ahí el nowrap, aquí y en los rótulos. Para que quepa sin
       envolver, el aire entre ítems baja de --space-m a --space-s. */
    .site-nav__list {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--space-3xs) var(--space-s);
    }

    .site-nav__link,
    .site-nav .menu__trigger {
      white-space: nowrap;
    }

    .site-nav__list--start {
      grid-column: 1;
      grid-row: 1;
      justify-content: flex-start;
    }

    .site-nav__list--end {
      grid-column: 3;
      grid-row: 1;
      justify-content: flex-end;
    }

    /* El conmutador pasa a columna propia. Compartiendo celda con la mitad
       derecha había que reservarle el hueco con un relleno, y ese relleno era
       justo lo que estrechaba la lista hasta obligarla a envolver. */
    .site-header__inner {
      grid-template-columns: 1fr auto 1fr auto;
    }

    .site-header .site-header__tema {
      grid-column: 4;
    }
  }

  /* Cabecera flotante sobre el hero.
     El atributo lo escribe js/main.js mientras la página está sin desplazar y
     solo en las páginas que abren con un .hero a sangre; en cuanto se baja,
     vuelve la barra opaca. Sin JavaScript el atributo no llega a existir y la
     cabecera es siempre sólida, que es el estado seguro: nunca queda texto
     oscuro sobre una fotografía.
     --tinta-cabecera recorre los enlaces, el botón de menú y sus estados. */
  .site-header[data-flotante="true"] {
    --tinta-cabecera: var(--c-cream);
    background-color: transparent;
    border-block-end-color: transparent;
    box-shadow: none;
  }

  .site-header[data-flotante="true"] .btn--ghost {
    color: var(--tinta-cabecera);
  }

  .site-header[data-flotante="true"] .btn--ghost:hover {
    background-color: rgb(255 255 255 / 14%);
  }

  .site-header[data-flotante="true"] .site-nav__link:hover,
  .site-header[data-flotante="true"] .menu__trigger:hover,
  .site-header[data-flotante="true"] .menu[open] > .menu__trigger {
    color: var(--c-gold-300);
    border-block-end-color: var(--c-gold-300);
  }

  /* El panel plegable de móvil sí necesita fondo propio: se abre sobre la
     fotografía y sus enlaces son los mismos de la barra. */
  .site-header[data-flotante="true"] .site-nav[data-open="true"] {
    background-color: var(--surface-overlay);
    border-radius: var(--radius-md);
    padding: var(--space-2xs) var(--space-xs);
  }

  /* ---- Hero -------------------------------------------------------------
     Fondo negro de lado a lado, texto a la izquierda y fotografía a la derecha
     teñida de dorado. El negro no es una superficie más del sistema: es fijo
     en tema claro y oscuro, porque aquí hace de fondo de escenario para el
     dorado de la marca. Por eso usa la paleta cruda (--c-black-900) y no un
     token semántico, que se remapearía con el esquema.

     La cabecera flota encima sin fondo (ver .site-header[data-flotante]); sobre
     este negro sus enlaces claros y el logotipo dorado se leen siempre, sin
     depender de qué zona de una fotografía les toque debajo.
     ---------------------------------------------------------------------- */

  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: min(38rem, 100svb - 5rem);
    padding-block: var(--space-2xl);
    overflow: hidden;
    background-color: var(--c-black-900);
    color: var(--c-cream);
  }

  /* Con JavaScript la cabecera flota encima, así que el hero sube por debajo
     de ella para que el negro llegue al borde de la ventana, y recupera ese
     alto en forma de relleno para que el texto no quede tapado. La altura la
     mide js/main.js y la escribe en --altura-cabecera; el valor de reserva
     solo actúa en el instante entre el pintado y la medición. */
  .js .hero {
    margin-block-start: calc(-1 * var(--altura-cabecera, var(--header-height)));
    padding-block-start: calc(
      var(--altura-cabecera, var(--header-height)) + var(--space-2xl)
    );
  }

  /* Halo dorado muy tenue detrás de la fotografía: rompe la planitud del negro
     y ata el bloque al color de marca sin llegar a leerse como un degradado. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
      55% 65% at 76% 50%,
      rgb(201 162 39 / 16%) 0%,
      transparent 72%
    );
  }

  .hero__interior {
    position: relative;
  }

  .hero__texto {
    max-inline-size: var(--measure-narrow);
  }

  /* La fotografía, sin ningún tratamiento: se muestra tal cual llega el
     archivo. No lleva `aspect-ratio` ni `object-fit`; manda la proporción
     propia de la imagen. Así, cambiarla por otra de distinto formato no obliga
     a tocar el CSS y nunca se le recorta la cara. */
  .hero__figura {
    position: relative;
    overflow: hidden;
    inline-size: 100%;
    max-inline-size: min(16rem, 70vw);
    justify-self: center;
    border: var(--border-hairline) solid var(--c-gold-600);
    border-radius: var(--radius-lg);
  }

  .hero__img {
    inline-size: 100%;
    block-size: auto;
  }

  @media (min-width: 48em) {
    .hero__figura {
      max-inline-size: 22rem;
    }
  }

  /* Los componentes de dentro heredan el color del hero o toman una variante
     clara: sus tokens habituales están pensados para fondos de página. */
  .hero :is(h1, .lead) {
    color: inherit;
  }

  .hero .lead {
    color: var(--c-gray-100);
  }

  .hero .eyebrow {
    color: var(--c-rose-400);
  }

  /* La insignia normal va en `nowrap`, pero la del hero es larga y a 320 px no
     cabe en una línea: como el hero recorta lo que se sale (overflow: hidden),
     sin esto perdería el final del texto en vez de partirlo. */
  .hero .badge {
    background-color: rgb(255 255 255 / 12%);
    color: var(--c-gold-200);
    white-space: normal;
  }

  .hero .btn--secondary {
    border-color: var(--c-gold-300);
    color: var(--c-gold-200);
  }

  .hero .btn--secondary:hover {
    background-color: rgb(255 255 255 / 12%);
    color: var(--c-gold-100);
  }

  /* ---- Menú desplegable de la navegación ---------------------------------
     Construido sobre <details>/<summary>: funciona sin JavaScript. El script
     solo añade cierre con Escape y al pulsar fuera.
     ---------------------------------------------------------------------- */

  .menu {
    position: relative;
  }

  .menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: var(--tap-target);
    color: var(--link-color);
    cursor: pointer;
    list-style: none;
    text-decoration-line: underline;
    text-decoration-thickness: 0.0625em;
    text-underline-offset: 0.22em;
  }

  .menu__trigger::-webkit-details-marker {
    display: none;
  }

  .menu__trigger:hover {
    color: var(--link-color-hover);
  }

  .menu__icon {
    inline-size: 0.7em;
    block-size: 0.7em;
    flex: 0 0 auto;
    fill: currentColor;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .menu[open] .menu__icon {
    transform: rotate(180deg);
  }

  .menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin-block-start: var(--space-2xs);
    padding: var(--space-2xs);
    background-color: var(--surface-raised);
    border: var(--border-hairline) solid var(--border-subtle);
    border-radius: var(--radius-md);
  }

  .menu__link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    text-decoration: none;
  }

  .menu__link:hover {
    background-color: var(--surface-sunken);
    color: var(--link-color-hover);
  }

  .menu__link[aria-current="page"] {
    background-color: var(--brand-gold-soft);
    color: var(--brand-gold-strong);
    font-weight: var(--weight-semibold);
  }

  /* El desplegable flota sobre el contenido solo cuando la navegación está en
     línea; por debajo de ese ancho vive dentro del panel plegable y empuja al
     resto de ítems hacia abajo, que es lo esperable en un menú de móvil. */
  @media (min-width: 72em) {
    .menu__list {
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      z-index: var(--z-header);
      min-inline-size: 17rem;
      margin-block-start: 0;
      box-shadow: var(--shadow-lg);
    }
  }

  /* ---- Botones --------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--tap-target);
    min-inline-size: var(--tap-target);
    /* Una etiqueta larga con este tracking supera con facilidad el ancho de
       un móvil; el tope evita que el botón desborde y provoque scroll
       horizontal en toda la página. El texto envuelve dentro del botón. */
    max-inline-size: 100%;
    padding-block: var(--space-xs);
    padding-inline: var(--space-l);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-pill);
    background-color: var(--surface-raised);
    color: var(--text-strong);
    font-family: var(--font-body);
    /* Cuerpo pequeño con mucho tracking: la etiqueta se lee como un rótulo,
       no como una frase. El `padding-inline` compensa el espacio que el
       tracking añade a la derecha de la última letra. */
    font-size: var(--step--2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    line-height: var(--leading-snug);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--duration-fast) var(--ease-soft),
                border-color var(--duration-fast) var(--ease-soft),
                color var(--duration-fast) var(--ease-soft),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
  }

  .btn[aria-disabled="true"],
  .btn:disabled {
    opacity: 0.55;
    pointer-events: none;
    box-shadow: none;
    transform: none;
  }

  /* Primario: acción de conversión (agendar cita) */
  .btn--primary {
    background-color: var(--brand-gold);
    background-image: var(--gradient-gold);
    border-color: transparent;
    color: var(--text-onbrand);
    box-shadow: var(--shadow-gold);
  }

  .btn--primary:hover {
    color: var(--text-onbrand);
    box-shadow: var(--shadow-lg);
  }

  /* Secundario: contorno dorado sobre cualquier superficie */
  .btn--secondary {
    background-color: transparent;
    border-color: var(--border-brand);
    color: var(--text-accent);
  }

  .btn--secondary:hover {
    background-color: var(--brand-gold-soft);
    color: var(--brand-gold-strong);
  }

  /* Terciario: enlace con forma de botón, sin caja */
  .btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-strong);
    padding-inline: var(--space-s);
  }

  .btn--ghost:hover {
    background-color: var(--surface-sunken);
    box-shadow: none;
  }

  /* WhatsApp: color de marca obligatorio para reconocimiento */
  .btn--whatsapp {
    background-color: var(--brand-whatsapp);
    color: var(--c-black-900);
    border-color: transparent;
  }

  .btn--whatsapp:hover {
    color: var(--c-black-900);
  }

  .btn--block {
    display: flex;
    inline-size: 100%;
  }

  /* Las variantes de tamaño mueven sobre todo el aire alrededor de la
     etiqueta: el cuerpo apenas varía, porque por debajo de 12px el tracking
     ancho deja de leerse como rótulo y pasa a leerse como ruido. */
  .btn--sm {
    font-size: var(--step--2);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    letter-spacing: var(--tracking-wider);
  }

  /* Las etiquetas grandes del sitio son frases enteras («Agenda tu cita en
     línea»), no rótulos de dos palabras: a --tracking-widest no caben en un
     móvil. Se abre el aire vertical y se recorta el horizontal. */
  .btn--lg {
    font-size: var(--step--1);
    padding-block: var(--space-s);
    padding-inline: var(--space-l);
    letter-spacing: var(--tracking-wider);
  }

  .btn__icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: 0 0 auto;
    fill: currentColor;
  }

  /* Botón flotante de WhatsApp (conversión permanente) */
  .wa-float {
    position: fixed;
    inset-block-end: var(--space-m);
    inset-inline-end: var(--space-m);
    z-index: var(--z-float);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--radius-circle);
    background-color: var(--brand-whatsapp);
    color: var(--c-black-900);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
  }

  .wa-float:hover {
    transform: scale(1.06);
    color: var(--c-black-900);
  }

  .wa-float__icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    fill: currentColor;
  }

  /* ---- Enlaces decorados ------------------------------------------------ */

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border-block-end: var(--border-hairline) solid currentColor;
    padding-block-end: 2px;
  }

  .link-arrow::after {
    content: "\2192";
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .link-arrow:hover::after {
    transform: translateX(0.25em);
  }

  /* Enlace que cubre toda su tarjeta contenedora (target grande, WCAG 2.5.8) */
  .link-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* ---- Etiquetas y distintivos ------------------------------------------ */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    background-color: var(--brand-gold-soft);
    color: var(--brand-gold-strong);
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .badge--rose {
    background-color: var(--brand-rose-soft);
    color: var(--text-rose);
  }

  .badge--outline {
    background-color: transparent;
    border: var(--border-hairline) solid var(--border-brand);
  }

  /* Antetítulo de sección.
     Manuscrito y en caja normal, como contrapunto a los titulares en
     versalitas: es el gesto que da el aire de salón de belleza. Va a un
     cuerpo mayor que el texto base porque la altura de x de una cursiva es
     mucho menor y a --step--1 resultaría ilegible.
     El texto es siempre corto y redundante con el titular que le sigue, de
     modo que nada se pierde si la fuente no llega a cargar. */
  .eyebrow {
    display: block;
    color: var(--text-rose);
    font-family: var(--font-script);
    font-size: var(--step-1);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  /* Variante sobria: mismo papel, en caja alta espaciada. Para antetítulos
     que sí portan datos que conviene leer sin esfuerzo. */
  .eyebrow--caps {
    color: var(--text-accent);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  /* Filete decorativo dorado */
  .rule {
    inline-size: 4.5rem;
    block-size: 2px;
    border: 0;
    margin: 0;
    background-image: var(--gradient-gold);
  }

  .rule--center { margin-inline: auto; }

  /* ---- Encabezado de sección ------------------------------------------- */

  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
    max-inline-size: var(--measure);
  }

  .section-head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .section-head__title {
    font-size: var(--step-4);
  }

  .section-head__lead {
    font-size: var(--step-1);
    color: var(--text-muted);
    line-height: var(--leading-snug);
  }

  /* ---- Tarjetas --------------------------------------------------------- */

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
    background-color: var(--surface-raised);
    border: var(--border-hairline) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-soft);
  }

  .card--interactive:hover,
  .card--interactive:focus-within {
    transform: translateY(-4px);
    border-color: var(--border-brand);
    box-shadow: var(--shadow-lg);
  }

  .card--flush { padding: 0; }

  .card--accent { background-color: var(--surface-accent); }

  .card--featured {
    border-color: var(--border-brand);
    box-shadow: var(--shadow-gold);
  }

  .card__media {
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    object-fit: cover;
    background-color: var(--surface-sunken);
  }

  .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
  }

  .card__title {
    font-size: var(--step-2);
  }

  .card__text {
    color: var(--text-muted);
  }

  .card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
  }

  /* ---- Ítem de precio (menú de servicios) ------------------------------- */

  .price-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3xs) var(--space-s);
    align-items: baseline;
    padding-block: var(--space-xs);
    border-block-end: var(--border-hairline) solid var(--border-subtle);
  }

  .price-item__name {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
  }

  .price-item__value {
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .price-item__meta {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: var(--step--1);
  }

  /* ---- Media / figuras --------------------------------------------------- */

  .media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--surface-sunken);
  }

  .media__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .media--square    { aspect-ratio: 1 / 1; }
  .media--portrait  { aspect-ratio: 3 / 4; }
  .media--landscape { aspect-ratio: 16 / 9; }

  .media--framed {
    border: var(--border-hairline) solid var(--border-brand);
    outline: var(--border-hairline) solid var(--surface-page);
    outline-offset: -0.5rem;
  }

  /* ---- Cita / testimonio -------------------------------------------------- */

  .quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    background-color: var(--surface-raised);
    border: var(--border-hairline) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .quote__text {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: var(--leading-snug);
    color: var(--text-strong);
  }

  .quote__author {
    color: var(--text-muted);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wide);
  }

  .quote__stars {
    color: var(--brand-gold);
    letter-spacing: 0.15em;
  }

  /* ---- Lista de datos de contacto ----------------------------------------- */

  .info-list {
    display: grid;
    gap: var(--space-s);
  }

  .info-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs);
    align-items: start;
  }

  .info-list__icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    color: var(--brand-gold);
    fill: currentColor;
  }

  .info-list__label {
    display: block;
    color: var(--text-muted);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .info-list__value {
    color: var(--text-strong);
  }

  /* ---- Acordeón (FAQ / módulos del curso) --------------------------------- */

  .accordion__item {
    border-block-end: var(--border-hairline) solid var(--border-subtle);
  }

  .accordion__trigger {
    display: flex;
    inline-size: 100%;
    min-block-size: var(--tap-target);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-s);
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-align: start;
    list-style: none;
  }

  .accordion__trigger::-webkit-details-marker {
    display: none;
  }

  .accordion__icon {
    flex: 0 0 auto;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--brand-gold);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .accordion__item[open] .accordion__icon {
    transform: rotate(45deg);
  }

  .accordion__panel {
    padding-block-end: var(--space-s);
    color: var(--text-muted);
    max-inline-size: var(--measure);
  }
}


/* ==========================================================================
   09. UTILIDADES
   Al vivir en la última capa ganan siempre a los componentes: no se necesita
   !important en ninguna de ellas.
   ========================================================================== */

@layer utilities {

  /* Texto */
  .text-center { text-align: center; }
  .text-start  { text-align: start; }
  .text-strong { color: var(--text-strong); }
  .text-muted  { color: var(--text-muted); }
  .text-accent { color: var(--text-accent); }
  .text-rose   { color: var(--text-rose); }
  .text-inverse { color: var(--text-inverse); }
  .text-balance { text-wrap: balance; }
  .text-nowrap  { white-space: nowrap; }
  .uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .font-display { font-family: var(--font-display); }
  .font-display-sc { font-family: var(--font-display-sc); }
  .font-body    { font-family: var(--font-body); }
  .font-script  { font-family: var(--font-script); }

  /* Tamaños de texto (siempre fluidos) */
  .fs-xs   { font-size: var(--step--2); }
  .fs-sm   { font-size: var(--step--1); }
  .fs-base { font-size: var(--step-0); }
  .fs-md   { font-size: var(--step-1); }
  .fs-lg   { font-size: var(--step-2); }
  .fs-xl   { font-size: var(--step-3); }
  .fs-2xl  { font-size: var(--step-4); }
  .fs-3xl  { font-size: var(--step-5); }
  .fs-4xl  { font-size: var(--step-6); }

  .lead {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    color: var(--text-muted);
  }

  /* Espaciado vertical puntual */
  .mbs-0   { margin-block-start: 0; }
  .mbs-xs  { margin-block-start: var(--space-xs); }
  .mbs-s   { margin-block-start: var(--space-s); }
  .mbs-m   { margin-block-start: var(--space-m); }
  .mbs-l   { margin-block-start: var(--space-l); }
  .mbs-xl  { margin-block-start: var(--space-xl); }
  .mbe-0   { margin-block-end: 0; }
  .mbe-xs  { margin-block-end: var(--space-xs); }
  .mbe-s   { margin-block-end: var(--space-s); }
  .mbe-m   { margin-block-end: var(--space-m); }
  .mbe-l   { margin-block-end: var(--space-l); }
  .mi-auto { margin-inline: auto; }

  /* Superficies y relieve */
  .surface-raised { background-color: var(--surface-raised); }
  .surface-sunken { background-color: var(--surface-sunken); }
  .surface-accent { background-color: var(--surface-accent); }
  .radius-md   { border-radius: var(--radius-md); }
  .radius-lg   { border-radius: var(--radius-lg); }
  .radius-pill { border-radius: var(--radius-pill); }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .border-subtle { border: var(--border-hairline) solid var(--border-subtle); }

  /* Posición y flujo */
  .relative { position: relative; }
  .sticky-top {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
  }

  /* Rendimiento de carga: reserva de espacio y descarte de render */
  .content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 40rem;
  }

  /* Visibilidad responsiva */
  .hide { display: none; }

  @media (min-width: 48em) {
    .hide-desktop { display: none; }
  }

  @media (max-width: 47.999em) {
    .hide-mobile { display: none; }
  }

  /* Sustituye a los <hr> decorativos entre bloques */
  .divider {
    block-size: var(--border-hairline);
    background-color: var(--border-subtle);
  }

  /* ---- Aparición al hacer scroll ----------------------------------------
     Triple salvaguarda para que el contenido nunca quede invisible:
     1. La regla vive dentro de prefers-reduced-motion: no-preference, así que
        quien pide menos movimiento nunca ve el estado oculto.
     2. Depende de la clase .js del <html>: sin JavaScript no se aplica.
     3. El script marca [data-visible] y, si no hay IntersectionObserver,
        lo marca en todos de inmediato.
     Se anima `translate` y no `transform` a propósito: así el desplazamiento
     de :hover de .card--interactive sigue funcionando sin pisarse con este.
     ---------------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-revelar] {
      opacity: 0;
      translate: 0 1.25rem;
      transition: opacity var(--duration-slow) var(--ease-out),
                  translate var(--duration-slow) var(--ease-out);
    }

    .js [data-revelar][data-visible] {
      opacity: 1;
      translate: none;
    }
  }
}


/* ==========================================================================
   10. PREFERENCIAS DE MOVIMIENTO
   --------------------------------------------------------------------------
   WCAG 2.2 · 2.3.3 (Animación a partir de interacciones).
   Justificación del uso de !important — única excepción en toda la hoja:
   esta regla debe anular cualquier transición, animación o desplazamiento
   declarado en cualquier capa o en estilos en línea generados por JS. Sin
   !important, un estilo en línea (mayor prioridad que cualquier hoja) seguiría
   animando y se incumpliría la preferencia declarada por la persona usuaria.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Neutraliza los desplazamientos de hover sin perder la señal visual */
  .btn:hover,
  .card--interactive:hover,
  .card--interactive:focus-within,
  .wa-float:hover,
  .link-arrow:hover::after {
    transform: none;
  }
}


/* ==========================================================================
   11. ÍNDICE DE CLASES CSS CREADAS
   --------------------------------------------------------------------------
   Listado exhaustivo para reutilizar en el HTML de la Fase 2.

   ACCESIBILIDAD (a11y)
     .skip-link
     .visually-hidden
     .visually-hidden--focusable

   LAYOUT · Contenedores
     .container
     .container--narrow
     .container--wide
     .container--flush

   LAYOUT · Secciones
     .section
     .section--tight
     .section--loose
     .section--raised
     .section--sunken
     .section--accent
     .section--inverse

   LAYOUT · Primitivas de composición
     .flow            .flow--tight        .flow--loose
     .stack           .stack--tight       .stack--loose
     .cluster         .cluster--center    .cluster--between    .cluster--end
     .grid            .grid--wide         .grid--narrow        .grid--loose
     .grid-12
     .split           .split--media-first .split--wide-start   .split--wide-end
     .prose           .prose--narrow      .prose--center
     .full-bleed
     .scroller
     .overlay         .overlay__veil      .overlay__content

   COMPONENTES · Cabecera y navegación
     .site-header            .site-header__inner    .site-header__brand
     .site-header__toggle    .site-header__logo--full
     .site-header__logo--compact
     .site-header__tema      .site-header__tema-icono
     .site-header__tema-icono--luna                 .site-header__tema-icono--sol
     .site-nav               .site-nav__list        .site-nav__link
     .site-nav__list--start  .site-nav__list--end
     .menu            .menu__trigger      .menu__icon
     .menu__list      .menu__link

   COMPONENTES · Hero
     .hero            .hero__interior     .hero__texto
     .hero__figura    .hero__img

   COMPONENTES · Botones y acciones
     .btn
     .btn--primary    .btn--secondary     .btn--ghost          .btn--whatsapp
     .btn--block      .btn--sm            .btn--lg
     .btn__icon
     .wa-float        .wa-float__icon
     .link-arrow
     .link-cover

   COMPONENTES · Etiquetas y ornamentos
     .badge           .badge--rose        .badge--outline
     .eyebrow         .eyebrow--caps
     .rule            .rule--center

   COMPONENTES · Encabezado de sección
     .section-head    .section-head--center
     .section-head__title
     .section-head__lead

   COMPONENTES · Tarjetas
     .card
     .card--interactive .card--flush      .card--accent        .card--featured
     .card__media     .card__body         .card__title
     .card__text      .card__footer

   COMPONENTES · Menú de precios
     .price-item
     .price-item__name
     .price-item__value
     .price-item__meta

   COMPONENTES · Imagen
     .media           .media__img
     .media--square   .media--portrait    .media--landscape    .media--framed

   COMPONENTES · Testimonios
     .quote           .quote__text        .quote__author       .quote__stars

   COMPONENTES · Contacto
     .info-list
     .info-list__item .info-list__icon
     .info-list__label .info-list__value

   COMPONENTES · Acordeón
     .accordion__item .accordion__trigger
     .accordion__icon .accordion__panel

   UTILIDADES · Texto
     .text-center     .text-start         .text-strong         .text-muted
     .text-accent     .text-rose          .text-inverse        .text-balance
     .text-nowrap     .uppercase          .font-display        .font-body
     .font-display-sc .font-script
     .lead

   UTILIDADES · Tamaño de texto (fluido)
     .fs-xs  .fs-sm  .fs-base  .fs-md  .fs-lg  .fs-xl  .fs-2xl  .fs-3xl  .fs-4xl

   UTILIDADES · Espaciado
     .mbs-0  .mbs-xs  .mbs-s   .mbs-m  .mbs-l  .mbs-xl
     .mbe-0  .mbe-xs  .mbe-s   .mbe-m  .mbe-l
     .mi-auto

   UTILIDADES · Superficie y relieve
     .surface-raised  .surface-sunken     .surface-accent
     .radius-md       .radius-lg          .radius-pill
     .shadow-sm       .shadow-md          .shadow-lg
     .border-subtle
     .divider

   UTILIDADES · Posición, rendimiento y visibilidad
     .relative        .sticky-top         .content-auto
     .hide            .hide-mobile        .hide-desktop

   ATRIBUTOS CON ESTILO PROPIO (no son clases, pero se usan en el HTML)
     [data-revelar] / [data-visible]             → aparición al hacer scroll
     [data-nav-toggle] · [data-open]             → navegación móvil
     [data-theme-toggle] · [data-anio]           → controles de js/main.js
     [data-theme="light"] · [data-theme="dark"]  → tema activo en <html>
     [aria-checked] en .site-header__tema        → estado del conmutador
     [aria-disabled="true"] / :disabled          → estado inactivo de .btn
     [open]                                      → estado abierto del acordeón
     [role="list"]                               → listas sin viñeta accesibles
     [hidden]                                    → ocultación total
   ========================================================================== */