/*
Theme Name:   Kadence Child — A. A. Espiño
Theme URI:    https://aaespino.es
Description:  Tema hijo personalizado para la web de autor A. A. Espiño
Author:       A. A. Espiño
Author URI:   https://aaespino.es
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child-aaespino
*/

/* ============================================================
   IMPORTAR FUENTES DE GOOGLE
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================
   VARIABLES GLOBALES — SISTEMA DE DISEÑO
   ============================================================ */
:root {
  /* Paleta */
  --color-bg:           #0a0a0a;
  --color-bg-alt:       #111111;
  --color-bg-card:      #141414;
  --color-surface:      #1a1a1a;
  --color-border:       #2a2a2a;
  --color-border-light: #333333;

  --color-rojo:         #c0392b;
  --color-rojo-vivo:    #e74c3c;
  --color-rojo-oscuro:  #7b1e15;
  --color-rojo-glow:    rgba(192, 57, 43, 0.15);

  --color-texto:        #e8e0d5;
  --color-texto-suave:  #9a9080;
  --color-texto-muted:  #5a5248;
  --color-blanco:       #f5f0eb;

  /* Tipografía */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Crimson Pro', Georgia, serif;
  --font-mono:     'Space Mono', 'Courier New', monospace;

  /* Espaciado */
  --espacio-xs:   0.5rem;
  --espacio-s:    1rem;
  --espacio-m:    2rem;
  --espacio-l:    4rem;
  --espacio-xl:   8rem;
  --espacio-xxl:  12rem;

  /* Transiciones */
  --trans-rapida:  150ms ease;
  --trans-normal:  300ms ease;
  --trans-lenta:   600ms ease;

  /* Radios */
  --radio-s: 2px;
  --radio-m: 4px;

  /* Sombras */
  --sombra-rojo: 0 0 40px rgba(192, 57, 43, 0.2);
  --sombra-card: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg) !important;
  color: var(--color-texto) !important;
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased;
}

/* Textura de fondo sutil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ============================================================
   TIPOGRAFÍA GLOBAL
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--color-blanco) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem) !important; font-weight: 900 !important; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem) !important; font-weight: 700 !important; }
h3 { font-size: clamp(1.3rem, 3vw, 2rem) !important; font-weight: 700 !important; }
h4 { font-size: 1.25rem !important; font-weight: 600 !important; }

p {
  font-family: var(--font-body) !important;
  color: var(--color-texto) !important;
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
}

a {
  color: var(--color-rojo-vivo) !important;
  text-decoration: none !important;
  transition: color var(--trans-normal), opacity var(--trans-normal) !important;
}

a:hover {
  color: var(--color-blanco) !important;
  opacity: 1 !important;
}

strong, b {
  color: var(--color-blanco) !important;
  font-weight: 700 !important;
}

em, i {
  font-style: italic !important;
  color: var(--color-texto-suave) !important;
}

blockquote {
  border-left: 3px solid var(--color-rojo) !important;
  padding: var(--espacio-s) var(--espacio-m) !important;
  margin: var(--espacio-m) 0 !important;
  background: var(--color-surface) !important;
  font-style: italic !important;
  color: var(--color-texto-suave) !important;
}

/* ============================================================
   HEADER Y NAVEGACIÓN
   ============================================================ */
.site-header,
#masthead,
.kadence-header-row {
  background-color: rgba(10, 10, 10, 0.97) !important;
  border-bottom: 1px solid var(--color-border) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Logo / Nombre del autor en el header */
.site-branding .site-title,
.site-title a,
.custom-logo-link,
header .site-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: var(--color-blanco) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.site-title a:hover {
  color: var(--color-rojo-vivo) !important;
}

/* Menú de navegación */
.nav-menu,
.main-navigation ul,
#site-navigation ul {
  background: transparent !important;
}

.nav-menu li a,
.main-navigation a,
#site-navigation a {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--color-texto-suave) !important;
  padding: 0.5rem 1rem !important;
  transition: color var(--trans-normal) !important;
  border: none !important;
}

.nav-menu li a:hover,
.main-navigation a:hover,
#site-navigation a:hover,
.nav-menu li.current-menu-item > a {
  color: var(--color-rojo-vivo) !important;
  background: transparent !important;
}

/* ============================================================
   HERO — SECCIÓN PRINCIPAL
   ============================================================ */
.hero-aaespino {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--espacio-xl) var(--espacio-m);
  background: var(--color-bg);
}

/* Líneas decorativas de fondo */
.hero-aaespino::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(192, 57, 43, 0.03) 50%, transparent 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 60px,
      rgba(192, 57, 43, 0.015) 60px,
      rgba(192, 57, 43, 0.015) 61px
    );
  pointer-events: none;
}

/* Punto de luz rojo lateral */
.hero-aaespino::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(192, 57, 43, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--color-rojo) !important;
  margin-bottom: var(--espacio-s) !important;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--color-rojo);
}

.hero-titulo {
  font-family: var(--font-display) !important;
  font-size: clamp(4rem, 10vw, 9rem) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  color: var(--color-blanco) !important;
  margin-bottom: var(--espacio-m) !important;
}

.hero-titulo .inicial-roja {
  color: var(--color-rojo-vivo) !important;
}

.hero-tagline {
  font-family: var(--font-body) !important;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  font-style: italic !important;
  color: var(--color-texto-suave) !important;
  max-width: 600px !important;
  line-height: 1.6 !important;
  margin-bottom: var(--espacio-l) !important;
}

.hero-generos {
  display: flex;
  gap: var(--espacio-s);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-l);
}

.genero-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-texto-muted) !important;
  border: 1px solid var(--color-border-light) !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: var(--radio-s) !important;
  transition: all var(--trans-normal) !important;
}

.genero-tag:hover {
  color: var(--color-rojo-vivo) !important;
  border-color: var(--color-rojo) !important;
  background: var(--color-rojo-glow) !important;
}

.hero-cta-grupo {
  display: flex;
  gap: var(--espacio-s);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primario,
.wp-block-button__link,
.btn {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 1rem 2rem !important;
  border-radius: var(--radio-s) !important;
  cursor: pointer !important;
  transition: all var(--trans-normal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
}

.btn-primario {
  background: var(--color-rojo) !important;
  color: var(--color-blanco) !important;
  border: 2px solid var(--color-rojo) !important;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, 0) !important;
}

.btn-primario:hover {
  background: var(--color-rojo-vivo) !important;
  border-color: var(--color-rojo-vivo) !important;
  color: var(--color-blanco) !important;
  box-shadow: 0 0 30px rgba(231, 76, 60, 0.4) !important;
  transform: translateY(-2px) !important;
}

.btn-secundario {
  background: transparent !important;
  color: var(--color-texto) !important;
  border: 2px solid var(--color-border-light) !important;
}

.btn-secundario:hover {
  border-color: var(--color-texto-suave) !important;
  color: var(--color-blanco) !important;
  transform: translateY(-2px) !important;
}

.btn-compra {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--color-border-light) !important;
  color: var(--color-texto-suave) !important;
  background: transparent !important;
  border-radius: var(--radio-s) !important;
  transition: all var(--trans-normal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.btn-compra:hover {
  background: var(--color-rojo-glow) !important;
  border-color: var(--color-rojo) !important;
  color: var(--color-rojo-vivo) !important;
}

.btn-compra-amazon:hover { color: #FF9900 !important; border-color: #FF9900 !important; background: rgba(255, 153, 0, 0.1) !important; }
.btn-compra-bubok:hover  { color: #4a9edd !important; border-color: #4a9edd !important; background: rgba(74, 158, 221, 0.1) !important; }

/* ============================================================
   DIVISORES Y SECCIONES
   ============================================================ */
.seccion-titulo {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 900 !important;
  color: var(--color-blanco) !important;
  margin-bottom: var(--espacio-xs) !important;
}

.seccion-subtitulo {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--color-rojo) !important;
  margin-bottom: var(--espacio-s) !important;
}

.seccion-descripcion {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  color: var(--color-texto-suave) !important;
  font-style: italic !important;
  max-width: 600px !important;
  margin-bottom: var(--espacio-l) !important;
}

.divisor-rojo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--espacio-m) 0;
}

.divisor-rojo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-rojo), transparent);
}

/* ============================================================
   CARDS DE OBRAS / LIBROS
   ============================================================ */
.obras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espacio-m);
  margin-top: var(--espacio-l);
}

.obra-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radio-m) !important;
  overflow: hidden !important;
  transition: all var(--trans-normal) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

.obra-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-rojo), transparent);
  opacity: 0;
  transition: opacity var(--trans-normal);
}

.obra-card:hover {
  border-color: var(--color-border-light) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--sombra-card), var(--sombra-rojo) !important;
}

.obra-card:hover::before {
  opacity: 1;
}

.obra-portada-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.obra-portada-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--color-border-light);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
}

.obra-portada-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--trans-lenta) !important;
}

.obra-card:hover .obra-portada-wrap img {
  transform: scale(1.05) !important;
}

.obra-genero-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(10, 10, 10, 0.9);
  color: var(--color-rojo-vivo);
  border: 1px solid var(--color-rojo-oscuro);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radio-s);
}

.obra-body {
  padding: var(--espacio-m) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.obra-tipo {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-texto-muted) !important;
}

.obra-titulo {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: var(--color-blanco) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.obra-subtitulo {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-style: italic !important;
  color: var(--color-texto-suave) !important;
  margin: 0 !important;
}

.obra-sinopsis {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--color-texto-suave) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.obra-año {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  color: var(--color-texto-muted) !important;
  letter-spacing: 0.1em !important;
}

.obra-botones {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
  padding-top: var(--espacio-s) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* ============================================================
   CARD ESPECIAL — OBRA DESTACADA (SAGA)
   ============================================================ */
.obra-card-destacada {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  min-height: 400px !important;
  background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-surface) 100%) !important;
}

.obra-card-destacada .obra-portada-wrap {
  aspect-ratio: unset;
  height: 100%;
}

@media (max-width: 768px) {
  .obra-card-destacada {
    grid-template-columns: 1fr !important;
  }
  .obra-card-destacada .obra-portada-wrap {
    aspect-ratio: 16/9;
    height: auto;
  }
}

/* ============================================================
   SECCIÓN ANTOLOGÍAS
   ============================================================ */
.antologias-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
  margin-top: var(--espacio-m);
}

.antologia-item {
  display: flex;
  align-items: center;
  gap: var(--espacio-m);
  padding: var(--espacio-s) var(--espacio-m);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-rojo-oscuro);
  border-radius: var(--radio-m);
  transition: all var(--trans-normal);
}

.antologia-item:hover {
  border-left-color: var(--color-rojo-vivo);
  background: var(--color-surface);
  transform: translateX(4px);
}

.antologia-numero {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-border-light);
  min-width: 3rem;
  text-align: center;
  line-height: 1;
}

.antologia-info {
  flex: 1;
}

.antologia-titulo {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--color-blanco) !important;
  margin: 0 0 0.25rem !important;
}

.antologia-detalle {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--color-texto-muted) !important;
}

/* ============================================================
   SECCIÓN SOBRE MÍ
   ============================================================ */
.sobremi-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .sobremi-wrap {
    grid-template-columns: 1fr;
    gap: var(--espacio-l);
  }
}

.sobremi-texto h2 {
  margin-bottom: var(--espacio-m) !important;
}

.sobremi-texto p {
  margin-bottom: var(--espacio-m) !important;
}

.sobremi-datos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-m);
}

.dato-item {
  padding: var(--espacio-m);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radio-m);
  position: relative;
  overflow: hidden;
}

.dato-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-rojo), transparent);
}

.dato-label {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-rojo) !important;
  margin-bottom: 0.5rem !important;
}

.dato-valor {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--color-blanco) !important;
  line-height: 1.2 !important;
}

.dato-desc {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-texto-muted) !important;
  margin-top: 0.25rem !important;
}

/* ============================================================
   REDES SOCIALES
   ============================================================ */
.social-links {
  display: flex;
  gap: var(--espacio-s);
  flex-wrap: wrap;
  margin-top: var(--espacio-m);
}

.social-link {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--color-texto-suave) !important;
  border: 1px solid var(--color-border-light) !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radio-s) !important;
  transition: all var(--trans-normal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.social-link:hover {
  color: var(--color-blanco) !important;
  border-color: var(--color-rojo) !important;
  background: var(--color-rojo-glow) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-texto-muted) !important;
  padding: var(--espacio-l) var(--espacio-m) var(--espacio-m) !important;
}

.footer-nombre {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: var(--color-blanco) !important;
  letter-spacing: -0.02em !important;
}

.footer-nombre span {
  color: var(--color-rojo-vivo) !important;
}

.footer-lema {
  font-family: var(--font-body) !important;
  font-style: italic !important;
  color: var(--color-texto-muted) !important;
  font-size: 0.9rem !important;
  margin-top: 0.25rem !important;
}

.footer-copy {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  color: var(--color-texto-muted) !important;
  margin-top: var(--espacio-l) !important;
  padding-top: var(--espacio-m) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* ============================================================
   LAYOUT — CONTENEDOR KADENCE OVERRIDE
   ============================================================ */
.entry-content,
.wp-block-group,
.kadence-inner-column-inner {
  max-width: 1200px !important;
}

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--espacio-m);
}

.seccion {
  padding: var(--espacio-xl) var(--espacio-m);
}

.seccion-alt {
  background: var(--color-bg-alt);
}

/* ============================================================
   PÁGINA DE ENTRADA (BLOG / POSTS)
   ============================================================ */
.entry-header {
  margin-bottom: var(--espacio-l) !important;
}

.entry-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  color: var(--color-blanco) !important;
}

.entry-meta {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  color: var(--color-texto-muted) !important;
  text-transform: uppercase !important;
}

.entry-content {
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  line-height: 1.85 !important;
}

/* ============================================================
   SIDEBAR Y WIDGETS
   ============================================================ */
.widget-title,
.widget h2 {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--color-rojo) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: var(--espacio-s) !important;
  margin-bottom: var(--espacio-m) !important;
}

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radio-m) !important;
  color: var(--color-texto) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  transition: border-color var(--trans-normal) !important;
}

input:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-rojo) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}

/* ============================================================
   ANIMACIONES ENTRADA
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-in {
  animation: fadeInUp 0.7s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
  .obras-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --espacio-xl: 4rem;
    --espacio-l:  2rem;
  }

  .hero-titulo {
    font-size: clamp(3rem, 12vw, 5rem) !important;
  }

  .hero-cta-grupo {
    flex-direction: column;
    align-items: flex-start;
  }

  .obras-grid {
    grid-template-columns: 1fr;
  }

  .antologia-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-generos {
    display: none;
  }

  .seccion {
    padding: var(--espacio-l) var(--espacio-s);
  }
}