/*
Theme Name: HeavyRiff
Theme URI: https://heavyriff.net
Author: Lanzaddt
Author URI: https://heavyriff.net
Description: Tema editorial minimalista, mobile-first, enfocado en tipografía y rendimiento. Sin imágenes, diseño puramente textual.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: musicapulse-theme
Tags: minimal, editorial, mobile-first, typography, news
*/

:root {

  /* ----------------------------------------------------------

     1. PALETA DE COLORES

     ---------------------------------------------------------- */

  --color-primary:   #109110;  /* Verde vibrante — acento principal */

  --color-secondary: #ccc;    /* Gris claro — fondos, bordes suaves */

  --color-dark:      #000;    /* Negro — texto principal, contraste */

  --color-light:     #fff;    /* Blanco — fondos, texto sobre oscuro */


  /* Derivados funcionales para flexibilidad */

  --color-primary-dark:   #0a6b0a;

  --color-primary-light:  #e8f5e8;

  --color-secondary-dark: #999;

  --color-secondary-dim:  #e5e5e5;

  --color-dark-soft:      #1a1a1a;

  --color-dark-muted:     #333;

  --color-light-warm:     #fafafa;


  /* ----------------------------------------------------------

     2. TIPOGRAFÍA — Escala Fluida (Mobile-First)

     ---------------------------------------------------------- */

  /* Familias: Serif para títulos (elegancia editorial), 

     Sans-serif para cuerpo (legibilidad) */

  --font-serif:    'Playfair Display', 'Georgia', 'Times New Roman', serif;

  --font-sans:     'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;


  /* Tamaños fluidos con clamp(): mínimo, preferido, máximo */

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);   /* 12–14px */

  --text-sm:   clamp(0.875rem, 0.85rem + 0.25vw, 1rem);       /* 14–16px */

  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);  /* 16–18px */

  --text-md:   clamp(1.125rem, 1rem   + 0.5vw,  1.25rem);    /* 18–20px */

  --text-lg:   clamp(1.25rem,  1.1rem + 0.75vw, 1.5rem);      /* 20–24px */

  --text-xl:   clamp(1.5rem,   1.2rem + 1.5vw,  2rem);        /* 24–32px */

  --text-2xl:  clamp(1.75rem,  1.3rem + 2.25vw, 2.5rem);      /* 28–40px */

  --text-3xl:  clamp(2rem,     1.4rem + 3vw,    3rem);         /* 32–48px */

  --text-4xl:  clamp(2.5rem,   1.5rem + 5vw,    4rem);         /* 40–64px */

  --text-5xl:  clamp(3rem,     1.8rem + 6vw,    5rem);         /* 48–80px */


  /* Pesos tipográficos */

  --font-light:    300;

  --font-regular:  400;

  --font-medium:   500;

  --font-semibold: 600;

  --font-bold:     700;

  --font-black:    900;


  /* Altura de línea */

  --leading-tight:  1.1;   /* Títulos */

  --leading-snug:   1.25;  /* Subtítulos */

  --leading-normal: 1.5;   /* Cuerpo de texto */

  --leading-relaxed: 1.65; /* Artículos largos */

  --leading-loose:  1.8;   /* Texto denso */


  /* Espaciado entre letras (tracking) */

  --tracking-tight:  -0.02em;

  --tracking-normal:  0;

  --tracking-wide:    0.05em;

  --tracking-wider:   0.1em;

  --tracking-widest:  0.15em;


  /* ----------------------------------------------------------

     3. ESPACIADO — Escala Modular

     ---------------------------------------------------------- */

  --space-1:  clamp(0.25rem, 0.2rem  + 0.25vw, 0.5rem);   /* 4–8px */

  --space-2:  clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);  /* 8–12px */

  --space-3:  clamp(0.75rem, 0.6rem  + 0.75vw, 1rem);     /* 12–16px */

  --space-4:  clamp(1rem,    0.8rem  + 1vw,    1.5rem);    /* 16–24px */

  --space-5:  clamp(1.5rem,  1.2rem  + 1.5vw,  2rem);      /* 24–32px */

  --space-6:  clamp(2rem,    1.5rem  + 2.5vw,  3rem);      /* 32–48px */

  --space-7:  clamp(3rem,    2rem    + 5vw,    4.5rem);     /* 48–72px */

  --space-8:  clamp(4rem,    2.5rem  + 7.5vw,  6rem);       /* 64–96px */

  --space-9:  clamp(5rem,    3rem    + 10vw,   8rem);        /* 80–128px */

  --space-10: clamp(6rem,    4rem    + 12.5vw, 10rem);       /* 96–160px */


  /* ----------------------------------------------------------

     4. BORDES Y RADIUS

     ---------------------------------------------------------- */

  --radius-sm:  2px;

  --radius-md:  4px;

  --radius-lg:  8px;

  --radius-xl:  12px;

  --radius-full: 9999px;


  --border-thin:   1px solid var(--color-secondary);

  --border-medium: 2px solid var(--color-dark);

  --border-accent: 2px solid var(--color-primary);


  /* ----------------------------------------------------------

     5. SOMBRAS (Sutil, para profundidad sin imágenes)

     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);

  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);


  /* ----------------------------------------------------------

     6. TRANSICIONES

     ---------------------------------------------------------- */

  --transition-fast:   150ms ease;

  --transition-base:   250ms ease;

  --transition-slow:   400ms ease;

  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ----------------------------------------------------------

     7. LAYOUT — Anchos y Z-index

     ---------------------------------------------------------- */

  --content-max:   75ch;        /* ~75 caracteres — óptimo lectura */

  --content-wide:  1200px;

  --content-full:  100%;


  --z-base:     0;

  --z-dropdown: 100;

  --z-sticky:   200;

  --z-modal:    300;

  --z-tooltip:  400;


  /* ----------------------------------------------------------

     8. COMPONENTES REUTILIZABLES (Tokens de UI)

     ---------------------------------------------------------- */

  /* Botón primario */

  --btn-primary-bg:     var(--color-primary);

  --btn-primary-color:  var(--color-light);

  --btn-primary-hover:  var(--color-primary-dark);

  

  /* Etiquetas de categoría (Música, Cine, Lucha Libre) */

  --tag-bg-music:       var(--color-primary-light);

  --tag-color-music:    var(--color-primary-dark);

  --tag-bg-cinema:      #f0f0f0;

  --tag-color-cinema:   var(--color-dark-muted);

  --tag-bg-wrestling:   #1a1a1a;

  --tag-color-wrestling: var(--color-secondary);


  /* Tarjetas de artículo */

  --card-bg:            var(--color-light);

  --card-border:        var(--border-thin);

  --card-padding:       var(--space-4);

  --card-gap:           var(--space-4);

}


/* ============================================================

   RESET Y BASE

   ============================================================ */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  font-size: 16px; /* Base para rem */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  scroll-behavior: smooth;

}


body {

  font-family: var(--font-sans);

  font-size: var(--text-base);

  line-height: var(--leading-normal);

  color: var(--color-dark);

  background-color: var(--color-light-warm);

}


/* ============================================================

   MAIN — Contenedor principal (page.php & single.php)

   ============================================================ */

main {

  width: 100%;

  max-width: var(--content-wide);

  margin: 0 auto;

  padding: var(--space-5) var(--space-4);

}


/* En single.php: más aire para lectura inmersiva */

main.main-single {

  padding-top: var(--space-6);

  padding-bottom: var(--space-8);

}


/* En page.php: layout más compacto */

main.main-page {

  padding-top: var(--space-5);

  padding-bottom: var(--space-6);

}


/* ============================================================

   ARTICLE — Estilos base para todo contenido editorial

   Aplica a: page.php y single.php

   ============================================================ */

article {

  width: 100%;

  max-width: var(--content-max);

  margin: 0 auto;

  color: var(--color-dark);

}


/* --- Encabezados del artículo --- */

article h1 {

  font-family: var(--font-serif);

  font-size: var(--text-4xl);

  font-weight: var(--font-bold);

  line-height: var(--leading-tight);

  letter-spacing: var(--tracking-tight);

  color: var(--color-dark);

  margin-bottom: var(--space-4);

}


article h2 {

  font-family: var(--font-serif);

  font-size: var(--text-2xl);

  font-weight: var(--font-semibold);

  line-height: var(--leading-snug);

  color: var(--color-dark);

  margin-top: var(--space-6);

  margin-bottom: var(--space-3);

  padding-bottom: var(--space-2);

  border-bottom: var(--border-thin);

}


article h3 {

  font-family: var(--font-sans);

  font-size: var(--text-xl);

  font-weight: var(--font-semibold);

  line-height: var(--leading-snug);

  color: var(--color-dark-muted);

  margin-top: var(--space-5);

  margin-bottom: var(--space-2);

}


article h4 {

  font-family: var(--font-sans);

  font-size: var(--text-lg);

  font-weight: var(--font-medium);

  color: var(--color-dark);

  margin-top: var(--space-4);

  margin-bottom: var(--space-2);

}


/* --- Párrafos --- */

article p {

  font-size: var(--text-base);

  line-height: var(--leading-relaxed);

  color: var(--color-dark-soft);

  margin-bottom: var(--space-4);

  max-width: var(--content-max);

}


/* Lead / Entradilla (primer párrafo destacado) */

article > p:first-of-type {

  font-family: var(--font-serif);

  font-size: var(--text-lg);

  line-height: var(--leading-normal);

  color: var(--color-dark-muted);

  font-style: italic;

  margin-bottom: var(--space-5);

}


/* --- Enlaces --- */

article a {

  color: var(--color-primary);

  text-decoration: underline;

  text-decoration-thickness: 1.5px;

  text-underline-offset: 3px;

  text-decoration-color: var(--color-primary);

  transition: all var(--transition-fast);

}


article a:hover,

article a:focus {

  color: var(--color-primary-dark);

  text-decoration-thickness: 2.5px;

  text-underline-offset: 4px;

}


/* --- Citas --- */

article blockquote {

  position: relative;

  font-family: var(--font-serif);

  font-size: var(--text-xl);

  font-style: italic;

  line-height: var(--leading-normal);

  color: var(--color-dark-muted);

  padding: var(--space-4) var(--space-5);

  margin: var(--space-6) 0;

  border-left: var(--border-accent);

  background: var(--color-primary-light);

}


article blockquote::before {

  content: '"';

  font-family: var(--font-serif);

  font-size: var(--text-5xl);

  color: var(--color-primary);

  opacity: 0.3;

  position: absolute;

  top: var(--space-2);

  left: var(--space-3);

  line-height: 1;

}


article blockquote cite {

  display: block;

  margin-top: var(--space-3);

  font-family: var(--font-sans);

  font-size: var(--text-sm);

  font-style: normal;

  font-weight: var(--font-medium);

  color: var(--color-secondary-dark);

}


/* --- Listas --- */

article ul,

article ol {

  margin-bottom: var(--space-4);

  padding-left: var(--space-5);

}


article li {

  margin-bottom: var(--space-2);

  line-height: var(--leading-normal);

}


article ul li {

  list-style-type: none;

  position: relative;

}


article ul li::before {

  content: '•';

  color: var(--color-primary);

  font-weight: var(--font-bold);

  position: absolute;

  left: calc(var(--space-3) * -1);

}


article ol {

  counter-reset: item;

}


article ol li {

  list-style-type: none;

  counter-increment: item;

}


article ol li::before {

  content: counter(item) '.';

  color: var(--color-primary);

  font-weight: var(--font-bold);

  position: absolute;

  left: calc(var(--space-3) * -1);

}


/* --- Código inline y bloques --- */

article code {

  font-family: var(--font-mono);

  font-size: 0.9em;

  background: var(--color-secondary-dim);

  padding: 0.15em 0.4em;

  border-radius: var(--radius-sm);

  color: var(--color-dark);

}


article pre {

  font-family: var(--font-mono);

  font-size: var(--text-sm);

  line-height: var(--leading-loose);

  background: var(--color-dark-soft);

  color: var(--color-secondary);

  padding: var(--space-4);

  border-radius: var(--radius-md);

  overflow-x: auto;

  margin-bottom: var(--space-4);

}


article pre code {

  background: transparent;

  padding: 0;

  color: inherit;

}


/* --- Tablas --- */

article table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: var(--space-5);

  font-size: var(--text-sm);

}


article th {

  font-family: var(--font-sans);

  font-weight: var(--font-semibold);

  text-align: left;

  padding: var(--space-3);

  border-bottom: var(--border-medium);

  color: var(--color-dark);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

  font-size: var(--text-xs);

}


article td {

  padding: var(--space-3);

  border-bottom: var(--border-thin);

  color: var(--color-dark-soft);

}


article tr:hover td {

  background: var(--color-secondary-dim);

}


/* --- Separadores --- */

article hr {

  border: none;

  height: 1px;

  background: var(--color-secondary);

  margin: var(--space-6) 0;

  position: relative;

}


article hr::after {

  content: '§';

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  background: var(--color-light-warm);

  padding: 0 var(--space-3);

  color: var(--color-secondary-dark);

  font-family: var(--font-serif);

  font-size: var(--text-lg);

}


/* --- Meta información (autor, fecha, categoría) --- */

article .entry-meta {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

  align-items: center;

  font-size: var(--text-sm);

  color: var(--color-secondary-dark);

  margin-bottom: var(--space-5);

  padding-bottom: var(--space-4);

  border-bottom: var(--border-thin);

}


article .entry-meta time {

  font-weight: var(--font-medium);

}


article .entry-meta .category-tag {

  display: inline-block;

  padding: var(--space-1) var(--space-3);

  border-radius: var(--radius-full);

  font-size: var(--text-xs);

  font-weight: var(--font-semibold);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wider);

}


/* Variantes de etiqueta por sección */

article .entry-meta .category-tag.tag-music {

  background: var(--tag-bg-music);

  color: var(--tag-color-music);

}


article .entry-meta .category-tag.tag-cinema {

  background: var(--tag-bg-cinema);

  color: var(--tag-color-cinema);

}


article .entry-meta .category-tag.tag-wrestling {

  background: var(--tag-bg-wrestling);

  color: var(--tag-color-wrestling);

}


/* --- Destacados y callouts (sin imágenes) --- */

article .callout {

  padding: var(--space-5);

  margin: var(--space-5) 0;

  border-radius: var(--radius-lg);

  border-left: 4px solid var(--color-primary);

  background: var(--color-primary-light);

}


article .callout.callout-info {

  border-left-color: var(--color-primary);

  background: var(--color-primary-light);

}


article .callout.callout-dark {

  border-left-color: var(--color-dark);

  background: var(--color-dark-soft);

  color: var(--color-light);

}


article .callout.callout-dark p {

  color: var(--color-secondary);

}


/* --- Estilos de lectura progresiva --- */

article .drop-cap::first-letter {

  font-family: var(--font-serif);

  font-size: var(--text-5xl);

  font-weight: var(--font-black);

  float: left;

  line-height: 0.8;

  padding-right: var(--space-2);

  padding-top: var(--space-1);

  color: var(--color-primary);

}


/* ============================================================

   UTILIDADES RESPONSIVE

   ============================================================ */


/* Tablet (768px+) */

@media (min-width: 768px) {

  main {

    padding: var(--space-6) var(--space-5);

  }

  

  article h1 {

    margin-bottom: var(--space-5);

  }

  

  article > p:first-of-type {

    font-size: var(--text-xl);

  }

}


/* Desktop (1024px+) */

@media (min-width: 1024px) {

  main {

    padding: var(--space-7) var(--space-6);

  }

  

  main.main-single {

    padding-top: var(--space-8);

  }

  

  article {

    max-width: var(--content-max);

  }

}


/* Wide (1440px+) */

@media (min-width: 1440px) {

  main {

    padding-left: var(--space-7);

    padding-right: var(--space-7);

  }

}


/* ============================================================

   MODO OSCURO (Preferencia del sistema)

   ============================================================ */

@media (prefers-color-scheme: dark) {

  :root {

    --color-light-warm: #0a0a0a;

    --color-dark-soft: #e0e0e0;

    --color-dark-muted: #b0b0b0;

    --tag-bg-cinema: #2a2a2a;

    --tag-color-cinema: #d0d0d0;

  }

  

  body {

    background-color: var(--color-dark);

    color: var(--color-light);

  }

  

  article h1,

  article h2,

  article h3,

  article h4 {

    color: var(--color-light);

  }

  

  article p {

    color: var(--color-dark-soft);

  }

  

  article > p:first-of-type {

    color: var(--color-dark-muted);

  }

  

  article blockquote {

    background: rgba(16, 145, 16, 0.1);

  }

  

  article hr::after {

    background: var(--color-dark);

  }

}


/* ============================================================

   ACCESIBILIDAD — Reducir movimiento

   ============================================================ */

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

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}


/* ============================================================

   ACCESIBILIDAD — Focus visible

   ============================================================ */

:focus-visible {

  outline: 3px solid var(--color-primary);

  outline-offset: 2px;

  border-radius: var(--radius-sm);

}

/* ============================================================
   COMPONENTES: HEADER Y NAVEGACIÓN
   ============================================================ */
/*-Estilos específicos del header.php mapeados al :root suministrado -->    
        /* Estilos del contenedor del header */
        .site-header {
            width: 100%;
            background-color: var(--color-light);
            border-bottom: var(--border-medium);
            position: relative;
            z-index: var(--z-sticky);
        }

        .header-container {
            max-width: var(--content-wide);
            margin: 0 auto;
            padding: var(--space-3) var(--space-4);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Branding Editorial (Minimalista e impactante basado en texto) */
        .site-branding {
            flex-shrink: 0;
        }

        .site-title {
            font-family: var(--font-serif);
            font-size: var(--text-2xl);
            font-weight: var(--font-black);
            line-height: var(--leading-tight);
            letter-spacing: var(--tracking-tight);
            text-transform: uppercase;
        }

        .site-title a {
            color: var(--color-dark);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        .site-title a:hover {
            color: var(--color-primary);
        }

        /* Hack CSS Pure (:checked) para menú responsivo */
        .menu-toggle-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* Botón Hamburguesa elegante (hecho con bordes, sin imágenes/iconos externos) */
        .menu-toggle-label {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 24px;
            height: 18px;
            cursor: pointer;
            z-index: calc(var(--z-modal) + 1);
            position: relative;
        }

        .menu-toggle-label span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: var(--color-dark);
            transition: transform var(--transition-bounce), opacity var(--transition-fast);
        }

        /* Navegación Principal Mobile-First */
        .main-navigation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--color-light);
            padding: var(--space-8) var(--space-5);
            transform: translateX(100%);
            transition: transform var(--transition-slow);
            z-index: var(--z-modal);
            overflow-y: auto;
        }

        /* Estructura de listas nativa de wp_nav_menu */
        .main-navigation ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        .main-navigation li a {
            font-family: var(--font-serif);
            font-size: var(--text-xl);
            font-weight: var(--font-bold);
            color: var(--color-dark);
            text-decoration: none;
            display: block;
            padding: var(--space-2) 0;
            border-bottom: 1px solid var(--color-secondary-dim);
            transition: color var(--transition-fast), padding-left var(--transition-fast);
        }

        .main-navigation li a:hover {
            color: var(--color-primary);
            padding-left: var(--space-2);
        }

        /* Lógica del disparador CSS :checked */
        .menu-toggle-input:checked ~ .main-navigation {
            transform: translateX(0);
        }

        /* Transformación de Hamburguesa a 'X' al abrir */
        .menu-toggle-input:checked ~ .menu-toggle-label span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
            background-color: var(--color-primary);
        }

        .menu-toggle-input:checked ~ .menu-toggle-label span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle-input:checked ~ .menu-toggle-label span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
            background-color: var(--color-primary);
        }

        /* Prevención de scroll en el body cuando el menú está abierto (Mejora UX) */
        body:has(.menu-toggle-input:checked) {
            overflow: hidden;
        }

        /* ============================================================
           VERSION DESKTOP (1024px+)
           ============================================================ */
        @media (min-width: 1024px) {
            /* Hacer que el menú sea STICKY solo en escritorio */
            .site-header {
                position: sticky;
                top: 0;
                box-shadow: var(--shadow-sm);
            }

            .menu-toggle-label {
                display: none; /* Ocultar hamburguesa */
            }

            .main-navigation {
				position: static;
				width: 100%;
				height: auto;
				background-color: transparent;
				padding: 0;
				transform: none;
				transition: none;
				z-index: var(--z-base);
				overflow-y: visible;
				display: flex;
				justify-content: space-around;
            }

            .main-navigation ul {
                flex-direction: row;
                gap: var(--space-5);
                align-items: center;
            }

            .main-navigation li a {
                font-family: var(--font-sans);
                font-size: var(--text-sm);
                font-weight: var(--font-semibold);
                text-transform: uppercase;
                letter-spacing: var(--tracking-wide);
                padding: var(--space-1) 0;
                border-bottom: 2px solid transparent;
            }

            .main-navigation li a:hover {
                color: var(--color-primary);
                padding-left: 0;
                border-bottom: var(--border-accent);
            }
            
            /* Clases activas de WP en escritorio */
            .main-navigation .current-menu-item > a {
                color: var(--color-primary);
                border-bottom: var(--border-accent);
            }
        }

        /* Integración sutil con el modo oscuro provisto */
        @media (prefers-color-scheme: dark) {
            .site-header {
                background-color: var(--color-dark);
                border-bottom: 1px solid var(--color-dark-muted);
            }
            .site-title a, .main-navigation li a {
                color: var(--color-light);
            }
            .menu-toggle-label span {
                background-color: var(--color-light);
            }
            .main-navigation {
                background-color: var(--color-dark);
            }
            .main-navigation li a {
                border-bottom-color: var(--color-dark-muted);
            }
        }

/* ============================================================
   FOOTER — Diseño Minimalista (Mobile-First)
   ============================================================ */
.site-footer {
    border-top: var(--border-medium);
    background-color: var(--color-light-warm);
    padding: var(--space-7) var(--space-4);
    margin-top: var(--space-9);
}

.footer-container {
    max-width: var(--content-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.footer-title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-black);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.footer-description {
    font-size: var(--text-sm);
    color: var(--color-secondary-dark);
}

.footer-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-menu li a {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-dark-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-menu li a:hover {
    color: var(--color-primary);
}

.footer-meta {
    font-size: var(--text-xs);
    color: var(--color-secondary-dark);
    border-top: var(--border-thin);
    padding-top: var(--space-4);
}

/* --- Ajustes Desktop (1024px+) --- */
@media (min-width: 1024px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .footer-menu {
        justify-content: flex-end;
    }
}

/* --- Ajuste para Modo Oscuro --- */
@media (prefers-color-scheme: dark) {
    .site-footer {
        background-color: #000;
        border-top-color: var(--color-dark-muted);
    }
    .footer-title { color: var(--color-light); }
    .footer-menu li a { color: var(--color-secondary); }
}