/*
Theme Name: Magia sobre ruedas (Astra Child)
Template: astra
Description: Child theme de Astra para la portada de magiasobreruedas.com. Sustituye al widget "HTML" de Elementor: home.css/home.js viven aquí, el contenido dinámico lo imprime front-page.php leyendo el plugin "Magia sobre ruedas — Panel".
Version: 1.0.0
*/

/* ── RESET LOCAL (solo dentro de #msr-home, no toca el resto del sitio/Astra) ── */
#msr-home, #msr-home *, #msr-home *::before, #msr-home *::after { box-sizing: border-box; }
/* Astra envuelve el contenido entre get_header()/get_footer() en un
   `.ast-container` (display:flex). Como <main> es el único hijo flex y no
   declara un ancho propio, el algoritmo de flexbox lo dimensiona por su
   contenido (shrink-to-fit) en vez de llenar la fila completa — por eso sin
   esto el diseño de secciones a todo el ancho (6vw de padding, full-bleed)
   quedaba encogido y pegado a la izquierda, con un hueco vacío a la derecha. */
#msr-home { margin: 0; width: 100%; min-width: 0; flex: 1 1 auto; }
#msr-home ul, #msr-home ol { list-style: none; margin: 0; padding: 0; }
#msr-home figure { margin: 0; }
#msr-home h1, #msr-home h2, #msr-home h3, #msr-home p, #msr-home blockquote { margin: 0; }
#msr-home button { font: inherit; }
#msr-home img { max-width: 100%; display: block; }

:root {
  --rojo:    #D62828;
  --arena:   #F5E6C8;
  --carbon:  #1A1A1A;
  --humo:    #2E2E2E;
  --oro:     #C8963C;
  --blanco:  #FAFAF7;
  --rojo-rgb: 214,40,40;
  --oro-rgb:  200,150,60;
}

#msr-home {
  background: var(--carbon);
  color: var(--blanco);
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── HERO ── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* padding-top real (no solo min-height) porque el contenido ahora puede
     superar el alto del viewport (vídeo + panel flotante incluidos): sin esto,
     justify-content:flex-end deja el eyebrow pegado contra el header apenas
     el total crece más allá de 100svh. */
  padding: 10vh 6vw 8vh;
  position: relative;
  background: var(--carbon);
}
/* Foto de fondo del hero (opcional, subida desde el panel). Vive detrás de
   .hero-bg (el overlay que la oscurece para que el texto siga siendo legible)
   y de .hero-media/el resto del contenido. */
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(var(--rojo-rgb),0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(var(--oro-rgb),0.12) 0%, transparent 60%);
}
/* Con foto de fondo, las dos radiales decorativas no alcanzan a oscurecer lo
   suficiente para que el texto blanco/dorado siga siendo legible sobre una
   foto real -- se reemplazan por un degradado diagonal (más fondo hacia la
   izquierda, donde vive el título) + uno vertical (oscurece abajo, donde
   flota el panel de estadísticas). */
.hero.has-photo .hero-bg {
  background:
    linear-gradient(96deg, var(--carbon) 0%, rgba(26,26,26,.94) 30%, rgba(26,26,26,.55) 58%, rgba(26,26,26,.35) 100%),
    linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,0) 26%, rgba(26,26,26,.8) 88%, var(--carbon) 100%);
}
#msr-home .hero-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.2rem;
  max-width: 520px;
  line-height: 1.6;
}
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: 0.9;
  color: var(--blanco);
  position: relative;
  z-index: 1;
  min-height: 2.7em; /* reserva el alto de 3 líneas para evitar CLS al cargar Bebas Neue */
}
.hero-title .hl-line { display: block; }
.hero-title .accent { color: var(--rojo); display: block; }
.hero-sub {
  margin-top: 2rem;
  max-width: 520px;
  font-style: italic;
  color: var(--arena);
  font-size: clamp(1rem, 2vw, 1.15rem);
  position: relative;
  z-index: 1;
}
.hero-sub strong { font-style: normal; color: var(--blanco); }
.hero-cta { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-primary {
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
}
.btn-primary:hover { background: #b51f1f; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--arena);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: 1px solid rgba(245,230,200,0.3);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}
.btn-ghost:hover { border-color: var(--arena); color: var(--blanco); }

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  right: 6vw;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,250,247,0.3);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.scroll-hint::before {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(250,250,247,0.2);
  animation: scrollline 1.8s ease-in-out infinite;
}
@keyframes scrollline {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── HERO: título + vídeo, siempre a 2 columnas en desktop ──
   La columna de vídeo es un elemento fijo del diseño (como en la referencia):
   si no hay vídeo cargado todavía, muestra un placeholder en vez de
   desaparecer, para que el layout no cambie de golpe en cuanto el admin
   suba uno desde el panel. */
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 4rem;
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-video-col { min-width: 0; }
.hero-video-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hero-video-label span { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); }
.hero-video-label i { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,0.28); font-style: normal; }

/* ── VÍDEO DEL HERO (self-hosted, subido a Medios) ──
   9:16 (vertical, tipo reel) y no 16:9: así lo pide el diseño de referencia.
   aspect-ratio fijo en el contenedor (no en el propio <video>) para reservar el
   espacio desde el primer pintado -- con preload="metadata" el navegador no
   conoce las dimensiones reales del archivo hasta que llega esa respuesta de
   red, y sin esto el <video> saltaría de su tamaño de reemplazo por defecto
   al tamaño real cuando la metadata llega (CLS). */
.msr-hero-video {
  position: relative; width: 100%; aspect-ratio: 9/16; max-height: 66vh; margin: 0 auto;
  border-radius: 4px; overflow: hidden; background: #101010;
  border: 1px solid rgba(255,255,255,0.16);
}
.msr-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.hero-video-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: repeating-linear-gradient(135deg, #151515 0 10px, #191919 10px 20px);
  padding: 0 20px; text-align: center;
}
.hero-video-play {
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
}
.hero-video-play::before {
  content: ''; display: block; width: 0; height: 0; margin-left: 5px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--rojo);
}
.hero-video-empty p {
  font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,230,200,0.55);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); }
  .hero-video-col { max-width: 360px; margin: 0 auto; width: 100%; }
}

/* ── BITÁCORA (galería): cuadrícula asimétrica, no un carrusel de retrato ──
   100% CSS Grid, sin JS de por medio para el caso normal (fotos ya
   sincronizadas a Medios): crece sola a medida que hay más fotos, en vez de
   ser una sola caja de retrato enorme que solo muestra una foto a la vez. */
.bitacora-section { background: var(--carbon); padding: 2rem 0 2.5rem; }
.bitacora-section .inner { max-width: none; margin: 0; padding: 0 8px; }
.bitacora-section .msr-gallery-title-row { display: flex; align-items: center; gap: 16px; padding: 0 8px; max-width: 1600px; margin: 0 auto; }
.section-eyebrow-inline { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); }
.bitacora-section .msr-gallery-title-row i { width: 48px; height: 1px; background: rgba(255,255,255,0.35); font-style: normal; }
#msr-home .msr-gallery-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: 0.01em; color: var(--blanco); line-height: 0.95; text-transform: none; max-width: 1600px; margin: 18px auto 48px; padding: 0 8px; }
.msr-gallery-title span { color: var(--rojo); }
/* Mosaico de columnas (masonry real): cada foto guarda su alto natural, así
   que nunca hace falta recortarla ni clasificar su proporción, y como las
   columnas se llenan de arriba hacia abajo en orden, no hay forma de que
   quede una celda vacía a mitad de camino -- a diferencia de un CSS Grid con
   spans, que necesita suficientes piezas para rellenar el rectángulo. */
.bitacora-grid {
  column-count: 2;
  column-gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 640px) { .bitacora-grid { column-count: 3; } }
@media (min-width: 900px) { .bitacora-grid { column-count: 4; } }
.bitacora-tile {
  position: relative;
  margin: 0 0 10px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  overflow: hidden;
  background: #1a1a1a;
}
.bitacora-tile a { display: block; }
.bitacora-tile img { width: 100%; height: auto; display: block; transition: transform 0.2s ease; }
.bitacora-tile a:hover img, .bitacora-tile a:focus-visible img { transform: scale(1.04); }
.msr-badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.7rem; font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,250,247,0.9); background: linear-gradient(transparent, rgba(0,0,0,0.72)); pointer-events: none; }
.bitacora-empty { text-align: center; font-family: 'Space Mono', monospace; font-size: 0.8rem; letter-spacing: 0.05em; color: rgba(245,230,200,0.5); padding: 3rem 0; }

/* ── VISOR DE FOTOS (lightbox) ── */
.msr-lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.92);
  padding: 4vh 4vw;
}
.msr-lightbox[hidden] { display: none; }
.msr-lightbox figure { max-width: 100%; max-height: 100%; margin: 0; text-align: center; }
.msr-lightbox img { max-width: 100%; max-height: 88vh; width: auto; height: auto; display: block; margin: 0 auto; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.msr-lightbox figcaption { margin-top: 0.8rem; font-family: 'Space Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: rgba(245,230,200,0.75); }
.msr-lightbox-close {
  position: absolute; top: 18px; right: 20px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35); color: var(--blanco); font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.msr-lightbox-close:hover { background: rgba(0,0,0,0.55); }

/* ── META / PROGRESO: panel que flota sobre el borde inferior del hero ──
   A propósito NO usa position:absolute: eso anclaba la tarjeta al borde
   inferior del <section class="hero"> sin dejarle espacio propio, así que
   se montaba encima de los botones "Apoyar el viaje"/"Leer la historia" en
   vez de quedar debajo. Ahora vive en el flujo normal (después de esos
   botones, con su propio margin-top de separación) y el efecto de "flotar
   sobre la sección siguiente" se logra con un margin-bottom NEGATIVO: eso
   sí es seguro, porque solo tira hacia arriba lo que viene DESPUÉS de la
   tarjeta (el cierre del hero y el inicio de Bitácora), nunca lo de arriba. */
.hero-stats-wrap {
  position: relative;
  z-index: 5;
  margin-top: 3rem;
  margin-bottom: -70px;
}
.hero-stats-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2.4rem 2.75rem;
  background: rgba(26,26,26,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}
@media (max-width: 640px) {
  .hero-stats-wrap { margin-bottom: -40px; }
}
.meta-label { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); margin-bottom: 0.5rem; }
.meta-amount { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; color: var(--blanco); }
.meta-amount .denom { font-size: 0.4em; color: var(--oro); vertical-align: super; }
.meta-goal { font-family: 'Lora', serif; font-style: italic; color: rgba(245,230,200,0.6); font-size: 0.9rem; margin-top: 0.3rem; }
.meta-destino { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--blanco); }
.meta-destino-vote { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--oro); margin-top: 0.3rem; letter-spacing: 0.1em; text-transform: uppercase; }
.progress-wrap { margin-top: 2rem; }
.progress-bar-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.1); position: relative; }
.progress-bar-fill { height: 100%; background: var(--rojo); width: 0; position: relative; transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.progress-bar-fill::after { content: ''; position: absolute; right: -1px; top: -3px; width: 10px; height: 10px; background: var(--rojo); border-radius: 50%; }
.progress-stats { display: flex; justify-content: space-between; margin-top: 0.8rem; font-family: 'Space Mono', monospace; font-size: 0.72rem; color: rgba(250,250,247,0.4); }
.msr-stat-pending { filter: blur(6px); opacity: 0.5; transition: filter .35s ease, opacity .35s ease; }
.msr-stat-error { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--oro); margin-top: 0.6rem; }

/* ── HISTORIA ── */
.story-section { padding: 7rem 6vw; max-width: 1040px; margin: 0 auto; }
.section-eyebrow { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.section-eyebrow::after { content: ''; display: block; height: 1px; width: 40px; background: var(--oro); opacity: 0.4; }
.story-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; color: var(--blanco); margin-bottom: 3rem; }
.story-section p { color: var(--arena); margin-bottom: 1.4rem; font-size: 1.05rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* 2 columnas de texto en desktop -- la historia es larga y en una sola
   columna angosta se convertía en un scroll eterno. */
@media (min-width: 800px) {
  .story-body { column-count: 2; column-gap: 3rem; }
  .story-body p { break-inside: avoid; -webkit-column-break-inside: avoid; }
}
/* Sin column-span:all: eso sacaba la cita del flujo de columnas y la
   estiraba a lo ancho de TODA la sección (rompiendo las 2 columnas justo
   ahí), que es lo que se veía "comiéndose" la columna de al lado. Como
   bloque normal dentro de su columna, el ancho de la cita ya es el ancho de
   esa columna automáticamente -- solo hace falta que no se parta a la mitad. */
.pull-quote { margin: 1.2rem 0; padding-left: 1.4rem; border-left: 2px solid var(--rojo); font-size: 0.95rem; font-style: italic; color: var(--blanco); line-height: 1.55; text-align: left; break-inside: avoid; -webkit-column-break-inside: avoid; }

/* ── RUTA ── */
.ruta-section { background: var(--humo); padding: 6rem 6vw; border-top: 1px solid rgba(200,150,60,0.1); border-bottom: 1px solid rgba(200,150,60,0.1); overflow-x: hidden; }
.ruta-section .inner { max-width: 900px; margin: 0 auto; overflow-x: hidden; }
.ruta-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--blanco); margin-bottom: 3rem; }
.ruta-map { margin: 3rem 0 1.5rem; overflow-x: hidden; }
.ruta-flow { display: flex; align-items: flex-start; }
.ruta-seg { flex: 1; height: 2px; min-width: 24px; margin-top: 9px; border-radius: 2px; }
.ruta-seg.is-done { background: var(--rojo); }
.ruta-seg.is-next { background: repeating-linear-gradient(to right, rgba(200,150,60,0.45) 0 7px, transparent 7px 14px); }
.ruta-stop { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 92px; position: relative; }
.ruta-dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.ruta-stop.is-done .ruta-dot { background: var(--rojo); }
.ruta-stop.is-current .ruta-dot { background: var(--rojo); animation: rutaPulse 2s infinite; }
.ruta-stop.is-next .ruta-dot { background: transparent; border: 2px solid rgba(200,150,60,0.45); }
@keyframes rutaPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--rojo-rgb),0.55); } 70% { box-shadow: 0 0 0 13px rgba(var(--rojo-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--rojo-rgb),0); } }
.ruta-pin { position: absolute; top: -25px; font-size: 1.05rem; }
.ruta-stop-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.03em; margin-top: 0.7rem; color: var(--blanco); line-height: 1; }
.ruta-stop.is-next .ruta-stop-name { color: rgba(245,230,200,0.5); }
.ruta-stop-date { font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.4rem; color: var(--oro); }
.ruta-badge { display: inline-block; font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--rojo); padding: 0.2rem 0.5rem; border-radius: 3px; margin-top: 0.55rem; }
.ruta-nota { margin-top: 2.5rem; font-style: italic; color: rgba(245,230,200,0.5); font-size: 0.9rem; }
.ruta-nota a { color: var(--oro); text-decoration: none; }
@media (max-width: 560px) {
  .ruta-stop-name { font-size: 1.1rem; }
  .ruta-pin { top: -22px; font-size: 0.9rem; }
  .ruta-flow { flex-direction: column; align-items: flex-start; }
  .ruta-stop { flex-direction: row; align-items: center; text-align: left; min-width: 0; width: 100%; gap: 0.8rem; }
  .ruta-stop-name { margin-top: 0; }
  .ruta-pin { position: static; margin-right: 0.3rem; }
  .ruta-seg { width: 2px; height: 20px; min-width: 0; flex: 0 0 auto; margin: 0 0 0 9px; }
  .ruta-badge, .ruta-stop-date { margin-top: 0; margin-left: 0.6rem; }
}

/* ── EVENTOS ── */
.events-section { background: var(--carbon); padding: 6rem 6vw; }
.events-section .inner { max-width: 900px; margin: 0 auto; }
.events-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--blanco); margin-bottom: 3rem; }
.msr-events-panel:empty { display: none; }
.msr-events-panel .ss-events-archive {
  background: transparent !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important;
  --ss-primary: var(--rojo); --ss-primary-light: var(--oro); --ss-primary-rgb: var(--rojo-rgb);
  --ss-primary-contrast: var(--blanco); --ss-text: var(--blanco); --ss-text-rgb: 250,250,247;
}
.msr-events-panel .ss-event-card { background: var(--humo) !important; border-color: rgba(200,150,60,0.15) !important; }
.msr-events-panel .ss-event-card__title { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 0.02em !important; font-size: 1.3rem !important; }
.msr-events-panel .ss-event-card__meta-row { font-family: 'Space Mono', monospace !important; font-size: 0.72rem !important; letter-spacing: 0.05em !important; color: var(--oro) !important; }
.msr-events-panel .ss-event-card__meta-row svg { opacity: 0.8; }
.msr-events-panel .ss-event-card__cta { font-family: 'Space Mono', monospace !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-radius: 0 !important; }

/* ── RECOMPENSAS ── */
.rewards-section { padding: 7rem 6vw; max-width: 960px; margin: 0 auto; }
.rewards-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--blanco); margin-bottom: 3rem; }
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.reward-card { background: var(--humo); padding: 2rem; border: 1px solid rgba(200,150,60,0.15); transition: border-color 0.2s, transform 0.2s; }
.reward-card:hover { border-color: var(--oro); transform: translateY(-3px); }
.reward-price { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--rojo); line-height: 1; }
.reward-price .curr { font-size: 1rem; color: var(--oro); vertical-align: super; }
.reward-title { font-family: 'Space Mono', monospace; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blanco); font-weight: normal; margin: 0.7rem 0 0.5rem; }
.reward-desc { font-size: 0.9rem; color: rgba(245,230,200,0.7); line-height: 1.5; }

/* ── DONACIÓN ── */
.donate-section { background: var(--rojo); padding: 6rem 6vw; text-align: center; }
.donate-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 8vw, 6rem); color: var(--blanco); line-height: 0.95; margin-bottom: 1rem; }
.donate-section > p { font-style: italic; color: rgba(250,250,247,0.8); margin-bottom: 2.5rem; font-size: 1.05rem; }
.donate-amounts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-bottom: 2rem; }
.amount-btn { font-family: 'Space Mono', monospace; font-size: 0.8rem; letter-spacing: 0.1em; background: transparent; border: 1px solid rgba(250,250,247,0.4); color: var(--blanco); padding: 0.7rem 1.4rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.amount-btn:hover, .amount-btn.active { background: rgba(250,250,247,0.15); border-color: var(--blanco); }
.donate-input-wrap { display: flex; justify-content: center; gap: 0; max-width: 420px; margin: 0 auto 1.5rem; }
.donate-input { flex: 1; background: rgba(0,0,0,0.2); border: 1px solid rgba(250,250,247,0.3); border-right: none; color: var(--blanco); font-family: 'Space Mono', monospace; font-size: 0.9rem; padding: 0.85rem 1.2rem; outline: none; }
.donate-input::placeholder { color: rgba(250,250,247,0.4); }
.donate-submit { background: var(--carbon); color: var(--blanco); border: 1px solid var(--carbon); font-family: 'Space Mono', monospace; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.85rem 1.5rem; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.donate-submit:hover { background: var(--humo); }
.donate-note { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(250,250,247,0.45); text-transform: uppercase; }
.transfer-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 auto 1rem; }
.transfer-reveal { display: none; align-items: center; justify-content: center; gap: 0.8rem; background: rgba(0,0,0,0.2); border: 1px solid rgba(250,250,247,0.3); max-width: 420px; margin: 0 auto 1.2rem; padding: 0.85rem 1.2rem; }
.transfer-reveal .num { font-family: 'Space Mono', monospace; font-size: 1.1rem; letter-spacing: 0.05em; color: var(--blanco); }
.transfer-copy { background: var(--carbon); color: var(--blanco); border: 1px solid var(--carbon); font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 0.9rem; cursor: pointer; white-space: nowrap; }
.transfer-copy:hover { background: var(--humo); }
.msr-donors-panel:empty { display: none; }
.msr-donors-panel { background: rgba(255,255,255,0.94); border-radius: 10px; padding: 1.2rem; margin: 1.8rem auto 0; max-width: 640px; text-align: left; color: #222; }

/* ── FOOTER (propio de la campaña, dentro de #msr-home) ── */
.msr-footer {
  background: var(--carbon);
  padding: 3rem 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid rgba(200,150,60,0.1);
}
.footer-brand { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--blanco); letter-spacing: 0.05em; }
.footer-ig { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--oro); text-decoration: none; }
.footer-ig:hover { color: var(--blanco); }
.footer-copy { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: rgba(250,250,247,0.2); letter-spacing: 0.1em; }
@media (max-width: 640px) {
  .msr-footer { flex-direction: column; align-items: flex-start; }
}

/* La sección que sigue al hero (historia o, si está desactivada, ruta) necesita
   un colchón extra arriba para no quedar tapada por la mitad de la tarjeta de
   estadísticas que cae fuera del hero. El selector de hermano adyacente hace
   que esto funcione sin importar cuál sección sea la que realmente sigue. */
.hero + section {
  padding-top: calc(2rem + 70px);
}
@media (max-width: 640px) {
  .hero + section { padding-top: calc(1.5rem + 40px); }
}

/* ── RESPONSIVE GENERAL ── */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint::before { animation: none; }
}

/* ── FOCO VISIBLE ──
   Sin esto, todo dependía del outline nativo del navegador, que sobre fondos
   saturados (.donate-section en rojo) o dentro de contenedores con
   overflow:hidden (.msr-carousel) puede quedar con contraste marginal o recortado. */
#msr-home a:focus-visible,
#msr-home button:focus-visible {
  outline: 2px solid var(--arena);
  outline-offset: 3px;
}

/* ── SCREEN READER ONLY ── */
#msr-home .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ══════════════════════════════════════════════════════════
   WooCommerce — estilos para que la tienda combine con el
   resto del sitio (paleta y tipografías de :root, arriba).
   ══════════════════════════════════════════════════════════ */

/* ── Global (tienda, producto, carrito, checkout) ── */
body.woocommerce,
body.woocommerce-page {
  background: var(--carbon);
  color: var(--blanco);
}
.woocommerce-page #primary {
  background: var(--carbon);
}
/* Scoped a #primary para no pintar el .ast-container que Astra
   reutiliza también dentro del <header>. */
.woocommerce-page #primary .ast-container {
  background: var(--carbon);
}
.woocommerce-breadcrumb {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena);
  opacity: 0.75;
  padding: 1.5rem 0;
}
.woocommerce-breadcrumb a { color: var(--arena); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--oro); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: var(--humo);
  border: 1px solid rgba(var(--oro-rgb), 0.3);
  border-top: 3px solid var(--oro);
  color: var(--blanco);
  font-family: 'Lora', serif;
}
.woocommerce-error { border-top-color: var(--rojo); }
.woocommerce-message .button,
.woocommerce-error .button {
  background: var(--rojo);
  color: var(--blanco);
}
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible {
  outline: 2px solid var(--arena);
  outline-offset: 2px;
}

/* ── Archivo de tienda / listado ── */
h1.woocommerce-products-header__title,
.woocommerce-page .page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--blanco);
}
.woocommerce-result-count {
  font-family: 'Lora', serif;
  color: var(--arena);
}
.woocommerce-ordering select {
  background: var(--humo);
  color: var(--blanco);
  border: 1px solid rgba(var(--oro-rgb), 0.15);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus { border-color: var(--oro); }

ul.products li.product {
  background: var(--humo);
  padding: 1.5rem;
  border: 1px solid rgba(var(--oro-rgb), 0.15);
  transition: border-color 0.2s, transform 0.2s;
}
ul.products li.product:hover {
  border-color: var(--oro);
  transform: translateY(-3px);
}
ul.products li.product img { margin-bottom: 1rem; }

.woocommerce-loop-product__title {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco);
  font-weight: normal;
  margin: 0.5rem 0;
}
ul.products li.product .price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--rojo);
  line-height: 1;
}
ul.products li.product .price del { color: var(--arena); opacity: 0.6; font-size: 0.6em; }
ul.products li.product .price ins { text-decoration: none; color: var(--rojo); }
.star-rating { color: var(--oro); }
.star-rating::before { color: rgba(var(--oro-rgb), 0.25); }

ul.products li.product a.button,
ul.products li.product a.add_to_cart_button {
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s, transform 0.2s;
}
ul.products li.product a.button:hover {
  background: #b51f1f;
  transform: translateY(-2px);
  color: var(--blanco);
}

/* ── Producto individual ── */
.single-product div.product {
  background: var(--carbon);
  color: var(--blanco);
}
.single-product .product_title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--blanco);
  line-height: 1;
  margin-bottom: 1rem;
}
.single-product p.price,
.single-product span.price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: var(--oro);
  line-height: 1;
}
.single-product p.price del { color: var(--arena); opacity: 0.5; font-size: 0.55em; }
.single-product p.price ins { text-decoration: none; }
.woocommerce-product-details__short-description {
  font-family: 'Lora', serif;
  color: var(--arena);
  font-size: 1.05rem;
  line-height: 1.6;
}
.woocommerce-product-gallery__image {
  border: 1px solid rgba(var(--oro-rgb), 0.15);
}
.flex-control-thumbs li img { opacity: 0.6; }
.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover { opacity: 1; border: 1px solid var(--oro); }

.quantity input.qty {
  background: var(--humo);
  color: var(--blanco);
  border: 1px solid rgba(var(--oro-rgb), 0.2);
  font-family: 'Space Mono', monospace;
  height: 48px;
  width: 64px;
  text-align: center;
}
form.cart .button,
form.cart button[type="submit"] {
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  border: none;
  min-height: 48px;
  transition: background 0.2s, transform 0.2s;
}
form.cart .button:hover { background: #b51f1f; transform: translateY(-2px); }

.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.wc-tabs li {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.wc-tabs li.active {
  border-bottom-color: var(--oro);
}
.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.wc-tabs li a {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--blanco); }
.woocommerce-tabs .panel {
  background: var(--humo);
  padding: 2rem;
  border: 1px solid rgba(var(--oro-rgb), 0.15);
}
.woocommerce-Tabs-panel p { font-family: 'Lora', serif; color: var(--arena); }
.product_meta { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--arena); opacity: 0.7; }
.product_meta a { color: var(--oro); }

/* ── Carrito y checkout ── */
table.cart,
table.shop_table {
  background: var(--humo);
  border: 1px solid rgba(var(--oro-rgb), 0.15);
  color: var(--blanco);
}
table.cart th,
table.shop_table th {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro);
  border-bottom: 1px solid rgba(var(--oro-rgb), 0.2);
}
table.cart td,
table.shop_table td {
  border-bottom: 1px solid rgba(var(--oro-rgb), 0.08);
  font-family: 'Lora', serif;
}
.cart_item .product-name a { color: var(--blanco); }
.cart_item .product-price,
.cart_item .product-subtotal {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  color: var(--rojo);
}
.product-remove a.remove {
  color: var(--arena);
  background: transparent;
  border: 1px solid rgba(var(--oro-rgb), 0.3);
  border-radius: 50%;
}
.product-remove a.remove:hover { color: var(--blanco); border-color: var(--rojo); background: var(--rojo); }
.cart td.actions .button[name="update_cart"] {
  background: transparent;
  color: var(--arena);
  border: 1px solid rgba(var(--oro-rgb), 0.3);
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cart td.actions .button[name="update_cart"]:hover { border-color: var(--oro); color: var(--blanco); }

.cart_totals,
.woocommerce-checkout-review-order {
  background: var(--humo);
  border: 1px solid rgba(var(--oro-rgb), 0.15);
  padding: 1.5rem 2rem;
}
.cart_totals h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--blanco);
}
.cart_totals .order-total .amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--oro);
}
#place_order,
.checkout-button {
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: none;
  width: 100%;
  min-height: 48px;
}
#place_order:hover { background: #b51f1f; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select {
  background: var(--carbon);
  color: var(--blanco);
  border: 1px solid rgba(var(--oro-rgb), 0.2);
  font-family: 'Lora', serif;
}
.woocommerce-checkout input.input-text:focus { border-color: var(--oro); outline: none; }
.woocommerce-checkout label {
  color: var(--arena);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════
   WooCommerce Blocks — Carrito y Checkout (Cart Block /
   Checkout Block de WooCommerce 11, clases wc-block-*, NO
   comparten selectores con el bloque legacy de arriba).
   ══════════════════════════════════════════════════════════ */

.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  background: var(--carbon);
  color: var(--arena);
}

/* ── Carrito: tabla de items ── */
table.wc-block-cart-items {
  background: transparent;
  border-collapse: collapse;
}
table.wc-block-cart-items thead th {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--oro);
  background: transparent;
  border-bottom: 1px solid rgba(var(--oro-rgb), 0.15);
  padding: 1rem 0.75rem;
}
table.wc-block-cart-items tbody tr {
  background: transparent;
  border-bottom: 1px solid rgba(var(--oro-rgb), 0.1);
}
.wc-block-components-product-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--blanco);
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--oro); }
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  color: var(--rojo);
}
.wc-block-components-quantity-selector {
  border: 1px solid rgba(var(--oro-rgb), 0.3);
  background: var(--humo);
  border-radius: 0;
}
.wc-block-components-quantity-selector__input {
  background: transparent !important;
  color: var(--blanco) !important;
  border: none !important;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  color: var(--oro) !important;
  min-width: 32px;
  min-height: 44px;
}
.wc-block-components-quantity-selector__button:hover {
  background: rgba(var(--oro-rgb), 0.15) !important;
}
.wc-block-cart-item__remove-link {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,230,200,0.5);
}
.wc-block-cart-item__remove-link:hover { color: var(--rojo); }

/* ── Sidebar de totales (cart y checkout comparten estructura) ── */
.wc-block-components-sidebar {
  background: var(--humo);
  border: 1px solid rgba(var(--oro-rgb), 0.15);
  padding: 2rem;
}
.wc-block-cart__totals-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  color: var(--blanco);
}
.wc-block-components-totals-item {
  font-family: 'Lora', serif;
  color: var(--arena);
  border-top: 1px solid rgba(var(--oro-rgb), 0.1);
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: var(--arena);
  font-family: 'Lora', serif;
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--oro);
  margin-top: 0.5rem;
  padding-top: 1rem;
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: var(--blanco);
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.2rem !important;
  color: var(--oro) !important;
  line-height: 1;
}

/* ── Botón "Proceder al pago" / "Finalizar compra" ── */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--rojo) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--blanco) !important;
  font-family: 'Space Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  padding: 1rem 1.8rem;
  box-shadow: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: #B71F1F !important;
}

/* ── Checkout: inputs de texto (floating label) ── */
.wc-block-components-text-input input {
  background: var(--carbon) !important;
  border: 1px solid rgba(var(--oro-rgb), 0.3) !important;
  color: var(--blanco) !important;
  border-radius: 0 !important;
  font-family: 'Lora', serif;
}
.wc-block-components-text-input input:focus {
  border-color: var(--oro) !important;
  box-shadow: 0 0 0 1px var(--oro) !important;
  outline: none !important;
}
.wc-block-components-text-input label {
  color: rgba(245,230,200,0.55);
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--carbon);
  padding: 0 4px;
}

/* Selects (país, departamento) */
.wc-blocks-components-select__select {
  background: var(--carbon) !important;
  color: var(--blanco) !important;
  border: 1px solid rgba(var(--oro-rgb), 0.3) !important;
  border-radius: 0 !important;
  font-family: 'Lora', serif;
}
.wc-blocks-components-select__select:focus {
  border-color: var(--oro) !important;
}

/* ── Radios de método de envío ── */
.wc-block-components-radio-control__option {
  background: var(--humo);
  border: 1px solid rgba(var(--oro-rgb), 0.2);
  border-radius: 0;
  color: var(--arena);
  font-family: 'Lora', serif;
  min-height: 44px;
}
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--oro);
  background: rgba(var(--oro-rgb), 0.08);
}
.wc-block-components-radio-control__input {
  accent-color: var(--oro);
}


/* ══════════════════════════════════════════════════════════
   Fixes: Astra fuerza padding/color con especificidad más alta
   que la de estas reglas de WooCommerce (confirmado con
   getComputedStyle en vivo) — de ahí el botón pegado a la
   esquina de la tarjeta, el precio sin jerarquía y el panel de
   descripción sin aire. Se corrige con !important puntual solo
   en las propiedades realmente peleadas.
   ══════════════════════════════════════════════════════════ */

ul.products li.product {
  padding: 1.5rem !important;
}

ul.products li.product .price {
  color: var(--rojo) !important;
  font-size: 1.6rem !important;
  font-family: 'Bebas Neue', sans-serif !important;
}

.single-product p.price,
.single-product span.price {
  color: var(--oro) !important;
  font-size: 2.2rem !important;
  font-family: 'Bebas Neue', sans-serif !important;
}

.woocommerce-tabs .panel {
  padding: 2rem !important;
}

.woocommerce-tabs ul.tabs li.active::before,
.woocommerce-tabs ul.wc-tabs li.active::before {
  background: var(--oro) !important;
}
.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.wc-tabs li a {
  color: var(--arena) !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.wc-tabs li.active a {
  color: var(--blanco) !important;
}

.woocommerce-breadcrumb a { color: var(--arena) !important; }
.single-product-category a { color: var(--oro) !important; }
.stock.in-stock { color: var(--oro) !important; }

/* Título de producto en la tarjeta: el letter-spacing original
   (0.12em) se veía apretado/feo en dos líneas; se reduce. */
.woocommerce-loop-product__title {
  letter-spacing: 0.02em !important;
}