/*
Theme Name: Albert Martí Cots
Theme URI: https://albertmarticots.com
Description: Tema WordPress custom para albertmarticots.com — Desarrollador web premium, consultor SEO y experto en IA. Sin builders, sin temas base. Código limpio orientado a negocio.
Version: 1.0.1
Author: Albert Martí Cots
License: GPL-2.0+
Text Domain: amc
*/

/* ==========================================
   FRAMEWORK CSS
   Albert Martí Cots — Sistema visual
   ========================================== */

:root {
  --color-bg: #FAFAF7;
  --color-bg-alt: #F5F3EE;
  --color-bg-accent: #E84545;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B67;
  --color-border: #D6D4CE;
  --color-surface: #FFFFFF;
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-error: #E74C3C;
  --color-info: #3498DB;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --font-size-4xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);
  --font-size-5xl: clamp(4rem, 3rem + 5vw, 8rem);

  --font-h1: var(--font-size-4xl);
  --font-h2: var(--font-size-3xl);
  --font-h3: var(--font-size-2xl);
  --font-h4: var(--font-size-xl);
  --font-h5: var(--font-size-lg);
  --font-h6: var(--font-size-base);

  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --space-2xl: clamp(3rem, 2rem + 4vw, 4rem);
  --space-3xl: clamp(4rem, 3rem + 5vw, 6rem);
  --space-4xl: clamp(6rem, 4rem + 8vw, 10rem);

  --container-max: clamp(90%, 85% + 5vw, 1400px);
  --content-width: clamp(65ch, 60ch + 5vw, 80ch);
  --sidebar-width: clamp(200px, 20vw, 320px);

  --border-thin: 1px solid var(--color-border);
  --border-thick: 2px solid var(--color-border);
  --border-accent: 3px solid var(--color-bg-accent);
  --radius-sm: clamp(2px, 0px + 0.5vw, 4px);
  --radius-md: clamp(4px, 2px + 1vw, 8px);

  --duration-fast: clamp(100ms, 80ms + 0.1vw, 180ms);
  --duration-base: clamp(200ms, 150ms + 0.25vw, 350ms);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: var(--duration-base) var(--ease-out);

  --icon-s: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --icon-m: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
  --icon-l: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --icon-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

/* Reset básico + body flex-column para footer abajo */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible */
:focus-visible {
  outline: 3px solid var(--color-bg-accent);
  outline-offset: 2px;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* ==========================================
   TIPOGRAFÍA
   ========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  overflow-wrap: break-word;
  word-break: break-word;
}
h1, .h1 { font-size: var(--font-h1); letter-spacing: -0.02em; overflow-wrap: break-word; word-break: break-word; }
h2, .h2 { font-size: var(--font-h2); border-bottom: var(--border-accent); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); letter-spacing: -0.01em; overflow-wrap: break-word; word-break: break-word; }
h3, .h3 { font-size: var(--font-h3); font-weight: 600; margin-bottom: var(--space-sm); }
h4, .h4 { font-size: var(--font-h4); font-weight: 600; }
h5, .h5 { font-size: var(--font-h5); font-weight: 600; }
h6, .h6 { font-size: var(--font-h6); font-weight: 600; }

p { margin-bottom: var(--space-md); max-width: var(--content-width); overflow-wrap: break-word; word-break: break-word; }
a { color: var(--color-bg-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-text); text-decoration: underline; }
strong, b { font-weight: 700; }
small { font-size: var(--font-size-xs); color: var(--color-text-muted); }
code, pre { font-family: var(--font-mono); }

/* ==========================================
   LAYOUTS
   ========================================== */

.container { width: var(--container-max); margin-inline: auto; padding-inline: var(--space-lg); min-width: 0; }
.container--narrow { width: var(--content-width); margin-inline: auto; padding-inline: var(--space-lg); min-width: 0; max-width: 100vw; }
.container--full { width: 100%; padding-inline: 0; min-width: 0; }

.grid-s { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-md); }
.grid-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); }
.grid-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-xl); }
@media (max-width: 48em) {
  .grid-l { grid-template-columns: 1fr; }
}

.grid-2-col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); }
.grid-2-col--reverse { grid-template-columns: 1fr 2fr; }
@media (max-width: 64em) {
  .grid-2-col, .grid-2-col--reverse { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--space-md); }
.stack--sm > * + * { margin-top: var(--space-sm); }
.stack--lg > * + * { margin-top: var(--space-lg); }

/* ==========================================
   SECCIONES Y DIVISORES
   ========================================== */

.section { padding-block: var(--space-3xl); }
.section--light { background-color: var(--color-bg); }
.section--alt  { background-color: var(--color-bg-alt); }
.section--accent { background-color: var(--color-bg-accent); color: #FFFFFF; }
.section--accent h1, .section--accent h2, .section--accent h3, .section--accent h4,
.section--accent p, .section--accent a { color: #FFFFFF; }

.divider { width: 100%; height: var(--border-accent); border: none; background: var(--color-border); margin-block: var(--space-xl); }
.divider--accent { background: var(--color-bg-accent); }

/* ==========================================
   BOTONES
   ========================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding-block: var(--space-sm); padding-inline: var(--space-lg);
  font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  min-height: 44px;
}
.btn--primary   { background-color: var(--color-bg-accent); color: #FFFFFF; }
.btn--primary:hover { background-color: #D63030; text-decoration: none; }
.btn--secondary { background-color: transparent; color: var(--color-bg-accent); border: 2px solid var(--color-bg-accent); }
.btn--secondary:hover { background-color: var(--color-bg-accent); color: #FFFFFF; text-decoration: none; }
.btn--ghost     { background-color: transparent; color: var(--color-text); border: none; text-decoration: underline; }
.btn--ghost:hover { color: var(--color-bg-accent); text-decoration: none; }

/* ==========================================
   CARDS
   ========================================== */

.card { background: var(--color-surface); border: var(--border-thin); padding: var(--space-lg); }
.card--border-only { background: transparent; border: var(--border-thick); box-shadow: none; }
.card--alt { background: var(--color-bg-alt); border: none; border-left: var(--border-accent); }

/* ==========================================
   FORMULARIOS
   ========================================== */

.form-group { margin-bottom: var(--space-md); }
.form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: var(--space-sm) var(--space-md); font-family: var(--font-body);
  font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-surface);
  border: var(--border-thin); outline: none; transition: border-color var(--transition-fast);
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--color-bg-accent); }
.form-textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-bg-accent); }

/* ==========================================
   BADGE
   ========================================== */

.badge { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: var(--border-thin); }
.badge--filled  { background-color: var(--color-bg-accent); color: #FFFFFF; border-color: var(--color-bg-accent); }
.badge--outline { background-color: transparent; color: var(--color-text); }

/* ==========================================
   NAVEGACIÓN
   Reset agresivo + separación clara desktop/móvil
   OJO con el orden: reglas de apertura del menú
   móvil DEBEN estar DESPUÉS de las media queries
   para que !important las gane.
   ========================================== */

/* ── RESET BULLETS — captura todo lo que WP/Bricks meta en <nav> */
.nav ul,
.nav ol,
.nav li,
.nav a,
.nav__list,
.nav__list li,
.nav__list li a,
.nav__list ul,
.nav__list ul li,
.nav__list ul li a,
.menu,
.menu li,
.menu li a,
.menu-item,
.menu-item a {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ── NAV CONTENEDOR — flex horizontal en escritorio */
nav.nav,
.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  overflow: visible;
}

/* ── UL DEL MENÚ DE ESCRITORIO — fila horizontal */
.nav > ul,
.nav > ul li,
.nav > ul li a,
.nav ul.nav__list,
.nav ul.nav__list li,
.nav ul.nav__list li a,
ul.nav__list,
ul.nav__list li,
ul.nav__list li a,
nav ul,
nav ul li,
nav ul li a {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
}

/* Links desktop */
.nav__link,
.menu-item > a,
.nav a {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  padding: var(--space-xs) 0;
  white-space: nowrap;
}
.nav__link::after,
.menu-item > a::after,
.nav a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px;
  background-color: var(--color-bg-accent);
  transition: width var(--transition-fast);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.menu-item > a:hover::after,
.nav a:hover::after { width: 100%; }

/* ── HAMBURGER — oculto en escritorio por defecto */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 0.5vw, 7px);
  width: var(--icon-l);
  aspect-ratio: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out),
              opacity   var(--duration-base) var(--ease-out);
}
.hamburger--active .hamburger__line:nth-child(1) { transform: rotate(45deg) translate(6px, 5px); }
.hamburger--active .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger--active .hamburger__line:nth-child(3) { transform: rotate(-45deg) translate(6px, -5px); }

/* ── MENÚ MÓVIL — oculto por defecto, se muestra con .nav__menu--open */
.nav__menu,
#nav-menu-mobile {
  display: none !important;
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100dvh;
  background: var(--color-surface);
  border-left: var(--border-thin);
  padding: var(--space-2xl) var(--space-lg);
  box-sizing: border-box;
  flex-direction: column;
  gap: var(--space-md);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out),
              opacity   var(--duration-base) var(--ease-out);
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 85vw;
}

/* Solo cuando JS añade la clase → mostrar */
.nav__menu--open,
#nav-menu-mobile.nav__menu--open {
  display: flex !important;
  transform: translateX(0);
}

/* Reset estilos de WP BORRAR bullets del menú móvil */
#nav-menu-mobile ul,
#nav-menu-mobile li,
#nav-menu-mobile li a,
.nav__menu ul,
.nav__menu li,
.nav__menu li a {
  list-style: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Links dentro del menú móvil — columna */
#nav-menu-mobile ul,
.nav__menu ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#nav-menu-mobile li a,
.nav__menu li a {
  display: block !important;
  padding: var(--space-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--border-thin);
}
#nav-menu-mobile li a:hover,
.nav__menu li a:hover { color: var(--color-bg-accent); }

.nav__menu__close {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  background: none; border: none;
  font-size: var(--icon-xl);
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
  z-index: 10;
}

/* Overlay */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
  z-index: 9998;
  backdrop-filter: blur(1px);
}
.nav__overlay--visible { display: block; }

/* Lock body cuando menú abierto */
.body-lock { overflow: hidden; }

/* ══════════════════════════════════════════
   MEDIA QUERIES
   ══════════════════════════════════════════ */

/* ESCRITORIO — ocultar móvil, forzar menú horizontal */
@media (min-width: 64.01em) {
  .hamburger         { display: none !important; }
  .nav__overlay      { display: none !important; }

  /* Forzar que el <nav> de escritorio sea siempre fila horizontal */
  .nav,
  .nav *,
  nav.nav,
  nav.nav * {
    flex-direction: row !important;
  }
  .nav__list,
  .nav__list *,
  .menu,
  .menu * {
    flex-direction: row !important;
  }
  .nav__list,
  .menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--space-md) !important;
  }
  .nav__list li,
  .menu li {
    display: inline-flex !important;
  }
  .site-header       { flex-wrap: nowrap !important; overflow-x: hidden; }
  /* En escritorio el menú móvil está oculto */
  .nav__menu,
  #nav-menu-mobile   { display: none !important; }
}

/* MÓVIL — ocultar nav de escritorio, mostrar hamburger */
@media (max-width: 64em) {
  /* Ocultar completamente el nav de escritorio */
  nav.nav,
  nav.nav ul,
  nav.nav li,
  nav.nav a,
  .nav__list,
  .nav__list * {
    display: none !important;
  }
  .hamburger { display: flex !important; }
  /* El menú móvil (#nav-menu-mobile / .nav__menu) se controla
     por JS añadiendo .nav__menu--open. No se redeclara aquí para
     evitar conflicto de !important. */
}

/* NAV contenedor — siempre flex horizontal */
nav.nav,
.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  overflow: visible;
}

/* Forzar display flex en el UL del menú de escritorio */
.nav > ul,
.nav ul.nav__list,
ul.nav__list,
nav ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--space-md);
  align-items: center !important;
  list-style: none !important;
}

/* Links desktop */
.nav__link,
.menu-item a,
.nav a {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  padding: var(--space-xs) 0;
  white-space: nowrap;
}
.nav__link::after,
.nav a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px;
  background-color: var(--color-bg-accent);
  transition: width var(--transition-fast);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav a:hover::after { width: 100%; }

/* ── HAMBURGER — oculto en escritorio por defecto */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 0.5vw, 7px);
  width: var(--icon-l);
  aspect-ratio: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out),
              opacity   var(--duration-base) var(--ease-out);
}
.hamburger--active .hamburger__line:nth-child(1) { transform: rotate(45deg) translate(6px, 5px); }
.hamburger--active .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger--active .hamburger__line:nth-child(3) { transform: rotate(-45deg) translate(6px, -5px); }

/* ── MENÚ MÓVIL — oculto por defecto, se muestra con .nav__menu--open */
#nav-menu-mobile,
.nav__menu {
  display: none !important;
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100dvh;
  background: var(--color-surface);
  border-left: var(--border-thin);
  padding: var(--space-2xl) var(--space-lg);
  box-sizing: border-box;
  flex-direction: column;
  gap: var(--space-md);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out),
              opacity   var(--duration-base) var(--ease-out);
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 85vw;
}

/* Solo cuando JS añade la clase → mostrar */
.nav__menu--open,
#nav-menu-mobile.nav__menu--open {
  display: flex !important;
  transform: translateX(0);
}

/* Reset estilos de WP dentro del menú móvil */
#nav-menu-mobile ul,
#nav-menu-mobile li,
#nav-menu-mobile li a,
.nav__menu ul,
.nav__menu li,
.nav__menu li a {
  list-style: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Links dentro del menú móvil — columna */
#nav-menu-mobile ul,
.nav__menu ul {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-xs) !important;
}
#nav-menu-mobile li a,
.nav__menu li a {
  padding: var(--space-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--border-thin);
}
#nav-menu-mobile li a:hover,
.nav__menu li a:hover { color: var(--color-bg-accent); }

.nav__menu__close {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  background: none; border: none;
  font-size: var(--icon-xl);
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
  z-index: 10;
}

/* Lock body cuando menú abierto */
.body-lock { overflow: hidden; }

/* ── OVERLAY */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
  z-index: 9998;
  backdrop-filter: blur(1px);
}
.nav__overlay--visible { display: block; }

/* En escritorio el menú es visible → forzar fila y sin desbordar */
@media (min-width: 64.01em) {
  .hamburger         { display: none !important; }
  .nav__overlay      { display: none !important; }
  .nav__menu         { display: none !important; }
  #nav-menu-mobile   { display: none !important; }
  /* Forzar menú de escritorio como fila horizontal — por si Bricks/WP mete column */
  .nav,
  .nav *,
  nav.nav,
  nav.nav *,
  .nav__list,
  .nav__list * {
    flex-direction: row !important;
  }
  .nav__list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--space-md) !important;
  }
  .site-header       { flex-wrap: nowrap !important; overflow-x: hidden; }
}

/* Móvil: ocultar nav de escritorio, mostrar hamburger */
@media (max-width: 64em) {
  nav .nav__list,
  nav.nav__list,
  .nav > ul,
  .nav ul.nav__list {
    display: none !important;
  }
  .hamburger { display: flex !important; }
  /* El menú móvil (#nav-menu-mobile / .nav__menu) se controla por JS
     añadiendo .nav__menu--open. No se redeclara aquí para evitar
     conflicto de !important con el bloque base. */
}

/* ==========================================
   CTA BLOCK
   ========================================== */

.cta-block { background-color: var(--color-bg-accent); color: #FFFFFF; text-align: center; padding-block: var(--space-3xl); padding-inline: var(--space-lg); }
.cta-block__title { color: #FFFFFF; margin-bottom: var(--space-md); }
.cta-block .btn--primary { background-color: #FFFFFF; color: var(--color-bg-accent); }
.cta-block .btn--primary:hover { background-color: var(--color-bg); }

/* ==========================================
   HERO
   ========================================== */

.hero { padding-block: var(--space-4xl); }
.hero__title { font-family: var(--font-display); color: var(--color-text); margin-bottom: var(--space-md); word-break: break-word; }
.hero__subtitle { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: var(--content-width); margin-bottom: var(--space-xl); }

/* ==========================================
   METODOLOGÍA / PASOS
   ========================================== */

.steps-block { border-left: var(--border-accent); padding-left: var(--space-xl); }
.step { margin-bottom: var(--space-xl); position: relative; }
.step-number { font-family: var(--font-display); font-size: var(--font-size-5xl); color: var(--color-bg-accent); line-height: 1; margin-bottom: var(--space-sm); }
.step-title { font-size: var(--font-size-xl); margin-bottom: var(--space-xs); }
.step-desc { font-size: var(--font-size-base); color: var(--color-text-muted); max-width: 50ch; }

/* ==========================================
   CONTENT BLOCK
   ========================================== */

.content-block { padding-block: var(--space-3xl); }
.content-block--alt { background-color: var(--color-bg-alt); }

/* ==========================================
   LISTAS SIMPLES
   ========================================== */

.list-simple { list-style: none; }
.list-simple li { padding-left: var(--space-lg); position: relative; margin-bottom: var(--space-sm); overflow-wrap: break-word; word-break: break-word; }
.list-simple li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: var(--space-xs); height: var(--space-xs); background-color: var(--color-bg-accent); transform: rotate(45deg); }

/* ==========================================
   FAQ — CERRADO por defecto
   ========================================== */

.faq { border-top: var(--border-thin); }
.faq__item { border-bottom: var(--border-thin); }
.faq__question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-md); background: none; border: none; font-family: var(--font-body);
  font-size: var(--font-size-base); font-weight: 600; text-align: left; cursor: pointer; color: var(--color-text);
}
.faq__answer { display: none; padding: 0 var(--space-md) var(--space-md); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.faq__item--open .faq__answer { display: block; }

/* ==========================================
   FOOTER
   ========================================== */

.footer { background-color: var(--color-text); color: var(--color-bg); padding-block: var(--space-2xl); overflow-x: hidden; }
.footer a { color: var(--color-bg); text-decoration: underline; }
.footer__label { color: var(--color-bg); margin-bottom: var(--space-sm); font-family: var(--font-display); }
.footer--small { padding-block: var(--space-md); font-size: var(--font-size-xs); text-align: center; color: var(--color-text-muted); }

/* ==========================================
   HEADER / LOGO
   ========================================== */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border-bottom: var(--border-thin);
  position: sticky; top: 0; z-index: 100;
  flex-wrap: nowrap;
  overflow-x: hidden;
  max-width: 100vw;
}
.site-logo {
  font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-lg);
  text-decoration: none; color: var(--color-text);
  overflow-wrap: break-word;
}

/* ==========================================
   ARTICLE / ENTRADA
   ========================================== */

.amc-article-content h2 { font-size: var(--font-size-3xl); border-bottom: var(--border-accent); padding-bottom: var(--space-sm); margin-top: var(--space-2xl); margin-bottom: var(--space-lg); }
.amc-article-content h3 { font-size: var(--font-size-2xl); margin-top: var(--space-xl); }
.amc-article-content h4 { font-size: var(--font-size-xl); margin-top: var(--space-lg); }
.amc-article-content p { margin-bottom: var(--space-lg); overflow-wrap: break-word; word-break: break-word; }
.amc-article-content ul, .amc-article-content ol { margin-bottom: var(--space-lg); padding-left: var(--space-lg); }
.amc-article-content li { margin-bottom: var(--space-sm); }
.amc-article-content pre { background: var(--color-bg-alt); padding: var(--space-lg); border: var(--border-thin); overflow-x: auto; margin-bottom: var(--space-lg); }
.amc-article-content code { font-size: var(--font-size-sm); }
.amc-article-content blockquote {
  border-left: var(--border-accent); padding-left: var(--space-lg);
  margin-bottom: var(--space-lg); color: var(--color-text-muted); font-style: italic;
}

/* ==========================================
   SEARCH / 404
   ========================================== */

.search-no-results .no-results, .error404 .no-results { text-align: center; padding: var(--space-4xl) var(--space-lg); }
.search-no-results .search-form, .error404 .search-form { max-width: 500px; margin-inline: auto; margin-top: var(--space-xl); }

/* ==========================================
   PAGINACIÓN
   ========================================== */

.pagination { display: flex; gap: var(--space-sm); justify-content: center; align-items: center; padding: var(--space-xl) 0; flex-wrap: wrap; }
.pagination a, .pagination span { padding: var(--space-xs) var(--space-md); border: var(--border-thin); text-decoration: none; color: var(--color-text); font-size: var(--font-size-sm); }
.pagination .current { background: var(--color-bg-accent); color: #FFFFFF; border-color: var(--color-bg-accent); }
.pagination a:hover { border-color: var(--color-bg-accent); color: var(--color-bg-accent); }

/* ==========================================
   ENTRADA / IMÁGENES
   ========================================== */

.entry-header { padding: var(--space-2xl) var(--space-lg) 0; text-align: center; }
.entry-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.entry-title { margin-bottom: var(--space-md); }
.entry-content { padding: var(--space-lg); }
.entry-content img { margin-inline: auto; }

.search-results .entry-title { margin-bottom: var(--space-sm); }
.comments-area { padding: var(--space-xl) var(--space-lg); text-align: center; color: var(--color-text-muted); }

/* ==========================================
   ESTADOS / UTILIDADES
   ========================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.sr-only { position: absolute; width: 1px; height: 1px; background: none; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.truncate { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 48em) {
  .container { padding-inline: var(--space-md); }
  .section   { padding-block: var(--space-xl); }

  /* Anti-overflow: ningún elemento puede superar el viewport en móvil */
  .container, .container--narrow, .container--full,
  .container *, .container--narrow *, .container--full *,
  .content-block, .content-block *,
  .list-simple, .list-simple li,
  .card, .card * {
  max-width: 100vw !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 0 !important;
}

/* container--narrow: respetar el padding real de cada breakpoint */
@media (max-width: 48em) {
  .container--narrow { max-width: calc(100vw - var(--space-md) * 2) !important; }
}

  .list-simple li { padding-left: var(--space-md); }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-bg) 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent;
}
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-3xl) var(--space-lg); }
.empty-state__icon { font-size: var(--icon-xl); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.empty-state__title { font-size: var(--font-size-2xl); margin-bottom: var(--space-sm); }
.empty-state__text  { color: var(--color-text-muted); max-width: var(--content-width); }

/* Alerts */
.alert { padding: var(--space-md) var(--space-lg); border-left: 4px solid; font-size: var(--font-size-sm); margin-bottom: var(--space-md); }
.alert--info    { border-color: var(--color-info);    background: color-mix(in srgb, var(--color-info)    8%, transparent); }
.alert--success { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 8%, transparent); }
.alert--warning { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
.alert--error   { border-color: var(--color-error);   background: color-mix(in srgb, var(--color-error)   8%, transparent); }

/* ==========================================
   ANTI-OVERFLOW GLOBAL
   Previene que cualquier elemento supere el ancho del viewport
   en cualquier tamaño de pantalla.
   ========================================== */

/* Cualquier elemento que pueda desbordar: romper palabra */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, td, th,
blockquote, code, pre,
.hero__title, .hero__subtitle,
.list-simple li,
.content-block, .content-block *,
.card, .card * {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Contenedores: nunca superar viewport */
.container,
.container--narrow,
.container--full,
.content-block,
.site-header,
.site-main,
.site-footer,
.footer,
section {
  max-width: 100vw;
  min-width: 0;
}

/* En móvil: asegurar que los containers estrechos no fuercen ancho */
@media (max-width: 64em) {
  .container,
  .container--narrow,
  .container--full,
  .container *, .container--narrow *, .container--full *,
  .content-block, .content-block *,
  .card, .card * {
    max-width: 100vw !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
  }

  /* Nota: container--narrow tiene su propia medida en el bloque max-width:48em
     Aquí solo aplicamos medidas generales anti-overflow */
}

/* Elementos inline/longos dentro de celdas o cards con contenido dinámico */
pre, code {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Última línea de defensa: cualquier cosa que se desborde */
* {
  max-width: 100%;
}