/* ==========================================================================
   1. VARIABLES, FUENTES Y RESET GENERAL (index.html es fuente de verdad)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@100;300;500;900&family=Caveat:wght@500;700&family=Space+Mono:wght@400;700&display=swap');

/* Variables globales de diseño (colores y paletas) */
:root {
    --black: #0A0A0A;       /* Negro puro / Textos principales y bordes gruesos */
    --paper: #F3EFE6;       /* Fondo estilo papel retro texturizado desaturado */
    --paper-dim: #e9e2d3;   /* Tono de papel ligeramente más oscuro para contrastes y hovers */
    --red: #AB163D;         /* Rojo carmín de acento principal (identidad artística) */
    --gray: #948C7F;        /* Gris desaturado para etiquetas secundarias, bordes suaves y textos auxiliares */
    --ink: #161412;         /* Color tinta oscura para textos de lectura fluida */
}

/* Reset universal para control de márgenes, paddings y box-sizing */
* {
    box-sizing: border-box; /* Asegura que bordes y paddings se incluyan en el ancho total */
    margin: 0;              /* Elimina márgenes por defecto de todos los navegadores */
    padding: 0;             /* Elimina paddings por defecto de todos los navegadores */
}

/* Comportamiento global del scroll de la página */
html {
    scroll-behavior: smooth; /* Desplazamiento fluido al navegar por anclas internas */
}


/* Estilos base del cuerpo de la aplicación */
body {
    background: var(--paper);          /* Color de fondo por defecto */
    color: var(--ink);                 /* Color del texto por defecto */
    font-family: 'Archivo', sans-serif; /* Familia tipográfica principal para legibilidad */
    font-weight: 300;                  /* Grosor de fuente ligero */
    overflow-x: hidden;                /* Previene desbordamiento y scroll horizontal indeseado */
    position: relative;                /* Contexto de posicionamiento para elementos absolutos o pseudoelementos */
}

/* Ajustes de accesibilidad para usuarios que prefieren animación reducida */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;             /* Desactiva animaciones de forma mandatoria */
        transition: none !important;            /* Desactiva transiciones de forma mandatoria */
        scroll-behavior: auto !important;       /* Fuerza desplazamiento instantáneo */
    }
}

/* Pseudoelemento para añadir una textura de grano analógico retro sobre toda la interfaz */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;                       /* Permite que el usuario haga clic a través del grano */
    z-index: 9999;                             /* Se sitúa por encima de todo el contenido */
    opacity: .05;                              /* Opacidad sumamente sutil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Clases de Utilidad Tipográfica (Sistema de fuentes unificado)
   -------------------------------------------------------------------------- */

/* Tipografía de impacto para títulos destacados (Display) */
.display {
    font-family: 'Anton', sans-serif;           /* Fuente sans-serif compacta e impactante */
    font-weight: 400;
    text-transform: uppercase;                 /* Fuerza mayúsculas para estética editorial */
    letter-spacing: -0.01em;                   /* Espaciado estrecho */
    line-height: .86;                          /* Altura de línea compacta para títulos monolíticos */
}

/* Tipografía de trazo manual para detalles artísticos y notas personales */
.hand {
    font-family: 'Caveat', cursive;             /* Estilo manuscrito informal */
    font-weight: 700;
}

/* Tipografía monoespaciada para metadatos, números, etiquetas y diseño técnico */
.mono {
    font-family: 'Space Mono', monospace;       /* Fuente técnica de ancho fijo */
}

/* Variante de texto extremadamente delgada */
.thin {
    font-family: 'Archivo', sans-serif;
    font-weight: 100;
}

/* Reseteo de enlaces */
a {
    color: inherit;                             /* Hereda el color del contenedor padre */
    text-decoration: none;                      /* Elimina el subrayado por defecto */
}

/* --------------------------------------------------------------------------
   Estructuras de Contenedores y Envolturas (.wrap)
   -------------------------------------------------------------------------- */

/* Contenedor adaptativo centralizado con padding de seguridad lateral */
.wrap {
    max-width: 1320px;                          /* Ancho máximo recomendado en la web de inicio */
    margin: 0 auto;                            /* Centrado automático en pantallas anchas */
    padding: 0 24px;                           /* Espaciado interno lateral para pantallas móviles */
    position: relative;                        /* Contexto de posicionamiento para subelementos */
}

/* Modificadores de ancho de contenedor específicos para subpáginas */
.tienda-page .wrap,
.detalle-page .wrap,
.crowdfunding-page .wrap {
    max-width: 1200px;                         /* Contenedores ligeramente más estrechos para subpáginas */
}

/* --------------------------------------------------------------------------
   Elementos Estructurales Comunes
   -------------------------------------------------------------------------- */

/* Secciones genéricas de la web */
section {
    padding: 100px 0;                          /* Amplio respiro vertical para separar bloques de contenido */
    position: relative;
}

/* Borde superior de separación grueso, característico del estilo punk/grunge retro */
.b-top {
    border-top: 2px solid var(--black);
}

/* Etiquetas indicadoras de sección con numeración y separador lineal */
.sec-label {
    display: flex;
    align-items: center;
    gap: 14px;                                 /* Separación entre texto, número y línea */
    font-family: 'Space Mono';
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--gray);                        /* Tono atenuado para no restar jerarquía */
    margin-bottom: 34px;
}

/* Resaltado del número secuencial de la sección */
.sec-label .n {
    color: var(--red);
    font-weight: 700;
}

/* Línea horizontal autollenable que se extiende después de la etiqueta */
.sec-label::after {
    content: "";
    flex: 1;                                   /* Ocupa todo el espacio horizontal remanente */
    height: 1px;
    background: var(--gray);
    opacity: .4;
}


/* ==========================================================================
   2. BOTONES PRINCIPALES (SISTEMA DE DISEÑO UNIFICADO - brutalista y asimétrico)
   ========================================================================== */

/* Estilo base del botón (con sombra proyectada e inclinación asimétrica) */
.btn {
    display: inline-flex;                      /* Se adapta al tamaño de su contenido interior */
    align-items: center;
    gap: 10px;                                 /* Espaciado para icono o texto interno */
    background: var(--red);                    /* Fondo rojo característico */
    color: var(--paper);                       /* Texto color papel claro */
    font-family: 'Space Mono', monospace;      /* Tipografía técnica y legible */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    padding: 18px 30px;
    border: 2px solid var(--black);            /* Borde negro grueso brutalista */
    position: relative;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    box-shadow: 6px 6px 0 var(--black);       /* Sombra de bloque sólida y asimétrica */
}

/* Efecto hover: El botón "se levanta" moviéndose arriba y a la izquierda */
.btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--black);       /* La sombra se expande para acentuar la elevación */
}

/* Efecto active (clic): El botón simula hundirse en el plano físico */
.btn:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--black);       /* Sombra reducida al mínimo */
}

/* Modificador: Botón fantasma (fondo transparente con borde negro) */
.btn.ghost {
    background: transparent;
    color: var(--black);
}

/* Modificador: Botón oscuro con sombra de acento rojo */
.btn.dark {
    background: var(--black);
    color: var(--paper);
    box-shadow: 6px 6px 0 var(--paper);
    border: 2px solid var(--black);
}

/* Efecto hover en botón oscuro */
.btn.dark:hover {
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--red);
    color: var(--red);
}

/* --------------------------------------------------------------------------
   Adaptación de Botones para Tienda, Detalle de Producto y Crowdfunding
   -------------------------------------------------------------------------- */
.tienda-page .btn,
.detalle-page .btn,
.crowdfunding-page .btn {
    gap: 8px;
    font-size: 13px;
    padding: 15px 26px;                       /* Un poco más compacto */
    box-shadow: 5px 5px 0 var(--black);
}

.tienda-page .btn:hover,
.detalle-page .btn:hover,
.crowdfunding-page .btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--red);          /* Hover cambia color de sombra a rojo */
    background: var(--paper);                  /* Inversión cromática del fondo */
    color: var(--black);                       /* Cambio de color de texto a negro */
}

/* Modificador de botón sobre fondo negro para catálogo */
.tienda-page .btn.on-black {
    background: var(--paper);
    color: var(--black);
    box-shadow: 5px 5px 0 var(--red);
    border: 2px solid var(--paper);
}

.tienda-page .btn.on-black:hover {
    box-shadow: 7px 7px 0 var(--paper-dim);
    background: var(--red);
    color: var(--paper);
}

/* --------------------------------------------------------------------------
   Subrayado manuscrito decorativo en SVG
   -------------------------------------------------------------------------- */
.scribble-under {
    position: relative;
    display: inline-block;
}

/* Estilo del trazado SVG que simula un garabato dibujado a mano bajo el texto */
.scribble-under svg {
    position: absolute;
    left: 0;
    bottom: -6px;                              /* Ajuste para que se solape ligeramente bajo las letras */
    width: 100%;
    height: 14px;
}


/* ==========================================================================
   3. CABECERA Y NAVEGACIÓN (HEADER)
   ========================================================================== */
header {
    background: var(--paper);
    border-bottom: 2px solid var(--black);      /* Línea separadora estructural negra */
    z-index: 500;                              /* Capa intermedia de posicionamiento */
}

/* Comportamiento dinámico exclusivo para la cabecera en el Index (Home) */
.index-page header {
    position: fixed;                           /* Cabecera pegada que se desliza */
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);              /* Escondido por defecto hacia arriba */
    transition: transform .35s ease;           /* Transición para el deslizamiento suave */
}

/* Cabecera visible (se activa mediante Javascript al hacer scroll) */
.index-page header.show {
    transform: translateY(0);                  /* Reaparece deslizándose desde arriba */
}

/* Alineación interna de los elementos de navegación */
.nav-inner {
    display: flex;
    justify-content: space-between;            /* Logo a la izquierda, botones a la derecha */
    align-items: center;
    padding: 16px 24px;                        /* Espaciado de cabecera estándar */
}

/* Modificadores de anchura de cabecera en las páginas secundarias */
.tienda-page .nav-inner,
.detalle-page .nav-inner,
.crowdfunding-page .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Identidad visual tipográfica (Logo) */
.logo {
    font-family: 'Anton';
    font-size: 26px;
    letter-spacing: -.02em;
}

/* Adaptación del logo en páginas secundarias */
.tienda-page .logo,
.detalle-page .logo,
.crowdfunding-page .logo {
    font-size: 24px;
}

/* Contenedor derecho de acciones de navegación (botones y llamadas a la acción) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Llamada a la acción rápida en cabecera (Botón Apoyar / Volver) */
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    font-family: 'Space Mono';
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 2px solid var(--black);
    background: var(--red);
    color: var(--paper);
    transition: .2s ease;
}

/* Hover de flotado suave del botón */
.nav-cta:hover {
    transform: translateY(-2px);
}

/* Adaptación estética del botón CTA de navegación en páginas secundarias */
.tienda-page .nav-cta,
.detalle-page .nav-cta,
.crowdfunding-page .nav-cta {
    background: var(--paper-dim);              /* Fondo claro que no compite con los elementos primarios */
    color: var(--black);
    letter-spacing: .06em;
}

/* Modificador para el botón específico de Login / Acceso */
.nav-login {
    background: var(--paper-dim);
    color: var(--black);
}


/* ==========================================================================
   4. COMPONENTE UNIFICADO: TARJETAS Y GRID DE PRODUCTO (.merch-card)
   ========================================================================== */

.merch-title{
        font-size:40px;
        margin-bottom:18px;
        color:var(--black);
    }
.merch-title span{color:var(--red);}

.merch-slider{
    position:relative;
    margin-top:40px;
}

/* Contenedor del slider de merchandising (Sección de inicio) */
.merch-slider {
    position: relative;
    margin-top: 40px;
}

/* Grid del slider con scroll horizontal táctil y soporte snap */
.merch-grid {
    display: flex;
    flex-wrap: nowrap;                         /* Mantiene los elementos en una sola línea horizontal */
    width: 100%;
    gap: 0;
    border: 2px solid var(--black);            /* Borde total contenedor */
    overflow-x: auto;                          /* Habilita desplazamiento horizontal */
    overscroll-behavior-x: contain;            /* Previene rebote de página en contenedores anidados */
    scroll-snap-type: x mandatory;             /* Fuerza a detenerse al inicio de cada tarjeta en móviles */
    -webkit-overflow-scrolling: touch;         /* Desplazamiento inercial suave en iOS */
    scrollbar-width: none;                     /* Oculta la barra en Firefox */
}

/* Oculta barra de desplazamiento en navegadores Webkit (Chrome/Safari) */
.merch-grid::-webkit-scrollbar {
    display: none;
}

/* Adaptación del Grid para formato estático en Catálogos (Páginas de Tienda/Detalle) */
.tienda-page .merch-grid,
.detalle-page .merch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);     /* Distribución simétrica en 4 columnas estables */
    gap: 24px;
    border: none;                             /* Desactiva borde del slider */
    overflow: visible;                         /* Elimina scroll interno */
}

/* Ajustes adaptativos para el grid del catálogo en tablets */
@media (max-width: 900px) {
    .tienda-page .merch-grid,
    .detalle-page .merch-grid {
        grid-template-columns: repeat(2, 1fr); /* Reduce a 2 columnas */
        gap: 18px;
    }
}

/* Ajustes adaptativos para el grid del catálogo en móviles */
@media (max-width: 520px) {
    .tienda-page .merch-grid,
    .detalle-page .merch-grid {
        grid-template-columns: 1fr;            /* Fuerza formato de columna simple */
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   Estilos Generales de la Tarjeta (.merch-card)
   -------------------------------------------------------------------------- */
.merch-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;                    /* Organización vertical de contenido */
    color: var(--ink);
    background: var(--paper);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    position: relative;
}

/* Bordes y alineación exclusivos para las tarjetas dentro del Slider Horizontal (Index) */
.index-page .merch-card {
    border-right: 2px solid var(--black);      /* Línea separadora derecha en el slider */
    scroll-snap-align: start;                  /* Punto de anclaje de scroll en móviles */
    scroll-snap-stop: always;
}

/* Elimina el borde derecho del último elemento en el slider */
.index-page .merch-card:last-child {
    border-right: none;
}

/* Oscurecimiento sutil de tarjeta en hover en Home */
.index-page .merch-card:hover {
    background: var(--paper-dim);
}

/* Bordes y sombras característicos para las tarjetas estáticas de catálogo (Tienda) */
.tienda-page .merch-card,
.detalle-page .merch-card,
.crowdfunding-page .merch-card {
    border: 2px solid var(--black);
}

/* Efecto de elevación asimétrica en hover para tarjetas de catálogo */
.tienda-page .merch-card:hover,
.detalle-page .merch-card:hover,
.crowdfunding-page .merch-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--black);
}

/* Clase de utilidad para ocultar tarjetas mediante JavaScript (filtrado de productos) */
.merch-card.is-hidden {
    display: none;
}

/* --------------------------------------------------------------------------
   Área Multimedia de la Tarjeta (Imagen del Producto)
   -------------------------------------------------------------------------- */
.merch-media {
    aspect-ratio: 1/1;                         /* Fuerza proporción perfectamente cuadrada */
    background:
        repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(0, 0, 0, .045) 8px, rgba(0, 0, 0, .045) 9px), /* Patrón de sombreado */
        var(--paper-dim);                      /* Color de base del marcador de posición */
    border-bottom: 2px solid var(--black);     /* Línea inferior que divide la imagen de los textos */
    display: flex;
    align-items: flex-end;                     /* Sitúa la etiqueta de imagen al fondo de la misma */
    justify-content: flex-start;
    padding: 14px;
    position: relative;
    overflow: hidden;
}

/* Ajustes de imagen de producto en tarjeta */
.merch-media img {
    position: absolute;                        /* Posicionamiento absoluto sobre el contenedor aspectado */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                         /* Recorta y ajusta la imagen de manera fluida */
    display: block;
}

/* Etiqueta flotante pequeña sobre la imagen (ej: "Música", "Ropa", "Colección") */
.merch-media-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray);
    background: var(--paper);
    border: 1px solid var(--black);
    padding: 5px 10px;
    position: relative;
    z-index: 1;                                /* Asegura visualización encima de la imagen */
}

/* --------------------------------------------------------------------------
   Cuerpo de Texto de la Tarjeta (.merch-body)
   -------------------------------------------------------------------------- */
.merch-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;                                 /* Separación interna uniforme entre metadatos */
    flex: 1;                                   /* Empuja el contenido del pie hacia abajo */
}

/* Reducción de relleno interno en tienda para optimizar espacio */
.tienda-page .merch-body {
    padding: 18px;
}

/* Etiqueta pequeña de categoría del producto */
.merch-tag {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--red);
}

/* Título de producto en tarjeta */
.merch-body h4 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 17px;
    line-height: 1.15;
}

/* Altura mínima reservada para evitar saltos asimétricos entre títulos en el slider de Home */
.index-page .merch-body h4 {
    min-height: 2.3em;
}

/* Adaptación tipográfica de títulos en catálogo de tienda */
.tienda-page .merch-body h4 {
    font-size: 15px;
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Pie de Tarjeta: Precios e Interacciones (.merch-foot)
   -------------------------------------------------------------------------- */
.merch-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;            /* Precio a un extremo, CTA al opuesto */
}

/* Ajustes adicionales para pies de tarjeta en página de inicio */
.index-page .merch-foot {
    margin-top: auto;                          /* Auto-alineación para empujar al extremo inferior */
    padding-top: 14px;
    border-top: 1px dashed var(--gray);        /* Línea punteada decorativa */
    gap: 10px;
}

/* Estilos de visualización del precio */
.merch-price {
    color: var(--black);
}

/* Tamaños de precio en Home */
.index-page .merch-price {
    font-size: 22px;
}

/* Tamaños de precio en páginas de catálogo de tienda y detalle */
.tienda-page .merch-price,
.detalle-page .merch-price {
    font-size: 18px;
}

/* --------------------------------------------------------------------------
   Llamada a la Acción (Botón) en la Tarjeta (.merch-cta)
   -------------------------------------------------------------------------- */
.merch-cta {
    font-size: 11px;
    text-transform: uppercase;
    border: 2px solid var(--black);
    background: var(--paper);
    white-space: nowrap;                      /* Previene saltos de línea molestos en textos cortos */
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    padding: 9px 14px;
}

/* Detalle visual de botones del slider en Home */
.index-page .merch-cta {
    font-weight: 700;
    letter-spacing: .06em;
    padding: 9px 14px;
}

/* Detalle visual de botones en la tienda de catálogo */
.tienda-page .merch-cta,
.detalle-page .merch-cta {
    font-family: 'Space Mono', monospace;
    padding: 7px 12px;
}

/* Inversión total de colores cuando el usuario posa el ratón en cualquier sección de la tarjeta */
.merch-card:hover .merch-cta {
    background: var(--red);
    color: var(--paper);
    border-color: var(--red);
}

/* --------------------------------------------------------------------------
   Estado: Agotado / Sold-out (Tarjetas deshabilitadas estéticamente)
   -------------------------------------------------------------------------- */
.merch-card.sold-out {
    cursor: default;                           /* Cursor estándar */
    opacity: .55;                              /* Se atenúa drásticamente para denotar indisponibilidad */
}

.merch-card.sold-out:hover {
    background: var(--paper);                  /* Desactiva efectos de hover cromáticos */
}

.merch-card.sold-out .merch-media {
    filter: grayscale(1);                     /* Convierte la imagen a blanco y negro */
}

/* Mantiene el botón de acción atenuado y sin efectos */
.merch-card.sold-out .merch-cta {
    background: transparent;
    color: var(--gray);
    border-color: var(--gray);
}

.merch-card.sold-out:hover .merch-cta {
    background: transparent;
    color: var(--gray);
    border-color: var(--gray);
}

/* --------------------------------------------------------------------------
   Flechas e Indicadores de Navegación del Slider (Home)
   -------------------------------------------------------------------------- */

/* Flecha de scroll derecha flotante */
.merch-scroll-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);               /* Alineación vertical perfecta */
    width: 46px;
    height: 46px;
    background: var(--red);
    color: var(--paper);
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    animation: merchArrowNudge 1.6s ease-in-out infinite; /* Sutil animación de llamada al clic */
}

/* Hover de la flecha de navegación */
.merch-scroll-arrow:hover {
    transform: translateY(-52%) scale(1.05);  /* Elevación dinámica */
    box-shadow: 6px 6px 0 var(--black);
    background: var(--black);                  /* Cambio a color de contraste */
}

/* Ocultado dinámico de las flechas (por ejemplo, al llegar a los límites del slider) */
.merch-scroll-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;                      /* Inhabilita interacciones */
}

/* Variación para la flecha izquierda */
.merch-scroll-arrow--left {
    right: auto;
    left: 14px;
    animation-name: merchArrowNudgeLeft;       /* Dirección de animación inversa */
}

/* Indicador de barra de progreso de scroll exclusivo de pantallas táctiles/móviles */
.merch-progress {
    display: none;                             /* Oculto en escritorio */
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

/* Contador textual "X de Y" */
.merch-progress-count {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--gray);
    white-space: nowrap;
}

.merch-progress-count b {
    color: var(--black);
    font-weight: 700;
}

/* Pista o fondo de la barra de progreso */
.merch-progress-track {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--paper-dim);
    border: 1px solid var(--black);
}

/* Barra interna activa que indica el porcentaje de desplazamiento horizontal */
.merch-progress-bar {
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    background: var(--red);
    width: 25%;
    transition: width .2s ease, left .2s ease; /* Desplazamiento fluido */
}

/* Visibilidad adaptativa de barra de progreso e inhabilitación de flechas en móviles */
@media (max-width: 768px) {
    .merch-progress {
        display: flex;                          /* Aparece en tablets y móviles */
    }
    .merch-scroll-arrow {
        display: none;                         /* Desaparece para priorizar el scroll táctil */
    }
}

/* Animaciones del vaivén de las flechas indicadoras */
@keyframes merchArrowNudgeLeft {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-4px); }
}

@keyframes merchArrowNudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(4px); }
}

/* Botón centralizado de "Ver catálogo completo" */
.merch-more {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* Anchura proporcional de las tarjetas del slider horizontal según la resolución */
@media (min-width: 901px) {
    .index-page .merch-card { flex: 0 0 25%; } /* 4 columnas estables */
}

@media (min-width: 521px) and (max-width: 900px) {
    .index-page .merch-card { flex: 0 0 50%; } /* 2 columnas en tablets */
}

@media (max-width: 520px) {
    .index-page .merch-card { flex: 0 0 82%; } /* 1.2 tarjetas visibles para sugerir arrastre */
}


/* ==========================================================================
   5. SECCIÓN: PROYECTOS (EDITORIAL FULL-BLEED / Sin márgenes, pantalla completa)
   ========================================================================== */
.pf-section {
    padding: 0;                                /* Fuerza eliminación de espaciado estándar */
    border-top: 2px solid var(--black);
    overflow: hidden;
}

/* Contenedor asimétrico dividido al 50% entre contenido e imagen */
.pf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
}

/* Inversión de columnas para crear maquetación tipo damero/zigzag */
.pf-row.reverse {
    direction: rtl;                            /* Invierte orden visual de las columnas */
}

/* Fuerza a los elementos del panel inverso a mantener la lectura normal de izquierda a derecha */
.pf-row.reverse > * {
    direction: ltr;
}

/* Área contenedor del contenido multimedia (portada o material promocional) */
.pf-media {
    position: relative;
    overflow: hidden;
    background: var(--paper-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 60px);           /* Relleno autoadaptativo */
}

/* Imagen del proyecto (estética grunge analógica de alto contraste) */
.pf-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(.15) contrast(1.02);     /* Toque de blanco y negro contrastado retro */
}

/* Contenedor de contenido textual en fila del proyecto */
.pf-panel {
    display: flex;
    align-items: center;                       /* Centrado vertical de la información del panel */
}

/* Variante: Panel con fondo rojo corporativo */
.pf-panel--red {
    background: var(--red);
    color: var(--paper);
}

/* Variante: Panel con fondo negro de fuerte impacto visual */
.pf-panel--black {
    background: var(--black);
    color: var(--paper);
}

/* Caja de espaciado interno textual de los proyectos */
.pf-panel-inner {
    padding: clamp(40px, 6vw, 80px);           /* clamp corregido para evitar 0px de padding */
    max-width: 560px;
}

/* Etiqueta de pre-cabecera para enumerar proyectos (ej: "Proyecto 01") */
.pf-eyebrow {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 18px;
}

/* Título colosal del proyecto */
.pf-num {
    font-size: clamp(52px, 7vw, 110px);        /* Escalado controlado para evitar overflows tipográficos */
    line-height: .85;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.pf-panel--red .pf-num,
.pf-panel--black .pf-num {
    color: var(--paper);
}

/* Subtítulo informativo del tipo de proyecto (ej: "EP", "Single", "Tour") */
.pf-sub {
    font-size: clamp(22px, 2.6vw, 34px);
    text-transform: uppercase;
    margin-bottom: 26px;
    opacity: .9;
}

/* Párrafo descriptivo del proyecto */
.pf-copy {
    font-family: 'Archivo', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 32px;
}

.pf-copy b {
    font-weight: 700;
}

/* Botón de acción con estilo limpio de marco en panel */
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 16px 26px;
    border: 2px solid currentColor;            /* Borde del mismo color que hereda del texto actual */
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

/* Ajuste de botón sobre el panel rojo */
.pf-panel--red .pf-btn {
    color: var(--paper);
}

.pf-panel--red .pf-btn:hover {
    background: var(--black);
    color: var(--paper);
    box-shadow: 6px 6px 0 var(--paper);       /* Sombra asimétrica color papel */
}

/* Ajuste de botón sobre el panel negro */
.pf-panel--black .pf-btn {
    color: var(--paper);
}

.pf-panel--black .pf-btn:hover {
    background: var(--red);
    color: var(--paper);
    border-color: var(--red);
    box-shadow: 6px 6px 0 var(--paper);
}

/* Reorganización adaptativa a una sola columna para pantallas pequeñas */
@media (max-width: 860px) {
    .pf-row, .pf-row.reverse {
        grid-template-columns: 1fr;            /* Apila verticalmente */
        direction: ltr;                        /* Reinicia dirección normal */
    }
    .pf-media {
        min-height: 320px;                     /* Altura mínima para la imagen en móvil */
    }
    .pf-row {
        min-height: 0;
    }
    .pf-panel-inner {
        max-width: none;
        padding: 44px 26px;                    /* Relleno optimizado para móvil */
    }
    .pf-num {
        font-size: clamp(48px, 12vw, 80px);
    }
}


/* ==========================================================================
   6. SECCIÓN: CONCIERTOS / PRÓXIMAS FECHAS (.conc-list)
   ========================================================================== */

/* Título de sección de conciertos con acento cromático */
.conc-title {
    font-size: clamp(40px, 7vw, 84px);
    margin-bottom: 44px;
    color: var(--black);
}

.conc-title span {
    color: var(--red);
}

/* Lista contenedora de conciertos con delimitador superior */
.conc-list {
    border-top: 2px solid var(--black);
}

/* Fila de concierto (Esquema de distribución por rejilla asimétrica) */
.conc-row {
    display: grid;
    grid-template-columns: 34px 190px 1fr auto; /* [Nº orden] [Fecha] [Lugar/Evento] [Botón Comprar] */
    align-items: center;
    gap: 26px;
    padding: 26px 18px;
    border-bottom: 2px solid var(--black);      /* Delimitador inferior estilo periódico */
    color: var(--ink);
    transition: background .15s ease, transform .15s ease;
    position: relative;
}

/* Reacción hover en la fila del concierto */
.conc-row:hover {
    background: var(--paper-dim);
}

/* Animación y realce del botón de acción al pasar el ratón por la fila */
.conc-row:hover .conc-cta {
    background: var(--red);
    color: var(--paper);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--black);
}

/* Variante Destacada (Concierto Especial / Sold-out inminente) */
.conc-row.featured {
    background: var(--red);                     /* Inversión total a color rojo */
    color: var(--paper);
    border-bottom-color: var(--black);
}

/* Adaptación de colores de etiquetas para visibilidad en variante destacada */
.conc-row.featured .conc-num {
    color: var(--paper);
    opacity: .65;
}

.conc-row.featured .conc-event {
    color: var(--paper);
    opacity: .75;
}

.conc-row.featured .conc-dash {
    color: var(--paper);
    opacity: .5;
}

/* Modificación de CTA de entrada en concierto destacado */
.conc-row.featured .conc-cta {
    background: var(--black);
    color: var(--paper);
    border-color: var(--black);
}

.conc-row.featured:hover {
    background: var(--red);                     /* Mantiene el fondo rojo fijo */
}

.conc-row.featured:hover .conc-cta {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--paper);        /* Sombra de botón contrasta en papel claro */
}

/* Número correlativo lateral de fecha */
.conc-num {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--gray);
}

/* Presentación tipográfica de la fecha del concierto */
.conc-date {
    font-size: clamp(20px, 2.4vw, 30px);
    white-space: nowrap;
}

/* Contenedor del lugar físico e información geográfica */
.conc-place {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;                              /* Evita rotura del layout por desbordamiento de texto */
}

/* Nombre de la Ciudad / Provincia */
.conc-city {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(16px, 1.6vw, 20px);
}

/* Guión separador estético */
.conc-dash {
    color: var(--gray);
    font-weight: 400;
    margin: 0 2px;
}

/* Nombre de la sala, festival o evento del directo */
.conc-event {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray);
}

/* Botón comprar entradas del concierto */
.conc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 20px;
    border: 2px solid var(--black);
    background: var(--paper);
    color: var(--ink);
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

/* Reajuste responsivo drástico para filas de concierto en pantallas de móviles */
@media (max-width: 720px) {
    .conc-row {
        grid-template-columns: 1fr auto;       /* Solo dos columnas */
        grid-template-areas:
            "num cta"                          /* Reorganización asimétrica mediante áreas */
            "date date"
            "place place";
        row-gap: 10px;
        padding: 22px 16px;
    }
    .conc-num { grid-area: num; }
    .conc-cta { grid-area: cta; justify-self: end; }
    .conc-date { grid-area: date; }
    .conc-place { grid-area: place; }
}


/* ==========================================================================
   7. SECCIÓN: GALERÍA DE IMÁGENES (MARQUEE TRACK / Galería continua infinita)
   ========================================================================== */

/* Contenedor general de la galería dinámica */
.bjdg-galeria {
    box-sizing: border-box;
    padding: min(1vw, 180px) 0;
    overflow-x: hidden;                         /* Oculta desbordamientos para lograr efecto sin fin */
}

/* Pausa de la animación del slider de fotos infinita si se enfoca un elemento interno */
.bjdg-track:focus-within {
    animation-play-state: paused;
}

.bjdg-galeria * {
    box-sizing: border-box;
}

/* Ventana de visualización que recorta y difumina los extremos para transición suave */
.bjdg-viewport {
    overflow: hidden;
    width: 100%;
    /* Máscara de degradado CSS para fundir los bordes derecho e izquierdo a transparente */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--bjdg-edge, 10%), #000 calc(100% - var(--bjdg-edge, 10%)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--bjdg-edge, 10%), #000 calc(100% - var(--bjdg-edge, 10%)), transparent 100%);
}

/* Track o riel móvil que contiene los grupos de imágenes repetidas */
.bjdg-track {
    display: flex;
    width: max-content;                        /* Ocupa el ancho real acumulado de todas las imágenes */
    animation: bjdg-marquee-scroll var(--bjdg-duration, 46s) linear infinite; /* Animación continua uniforme */
}

/* Bloque contenedor que agrupa imágenes (se duplica en HTML para dar sensación de infinito) */
.bjdg-group {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
    flex: 0 0 auto;
}

/* Declaración de animación para la traslación de scroll horizontal sin saltos */
@keyframes bjdg-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }         /* Se traslada exactamente la mitad (el grupo duplicado) */
}

/* Elemento individual de imagen (marco contenedor) */
.bjdg-item {
    flex: 0 0 auto;
    height: min(50vh, 460px);                  /* Escalado flexible basado en altura de pantalla */
    width: auto;
    background: var(--bjdg-ph-bg, var(--paper-dim));
    border: 1px solid var(--bjdg-ph-border, var(--black));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Ajustes de imagen interna */
.bjdg-item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;                           /* Desactiva límites de anchura para evitar deformaciones */
    object-fit: contain;
}

/* Desactivación de animación de desplazamiento continuo para respetar preferencias del sistema */
@media (prefers-reduced-motion: reduce) {
    .bjdg-track {
        animation: none;
    }
    .bjdg-viewport {
        overflow-x: auto;                      /* Cambia a scroll manual físico e inercial */
        -webkit-overflow-scrolling: touch;
    }
}

/* Ajustes adaptativos para la altura de las imágenes en pantallas medianas */
@media (max-width: 900px) {
    .bjdg-item {
        height: min(46vw, 340px);
    }
}

/* Ajustes adaptativos de máscara y altura en pantallas pequeñas */
@media (max-width: 640px) {
    .bjdg-galeria {
        --bjdg-edge: 20px;                      /* Borde de difuminado más estrecho */
    }
    .bjdg-item {
        height: 240px;
    }
}


/* ==========================================================================
   8. COMPONENTES DE PÁGINAS DE CONTENIDO (SOBRE MÍ, PASOS, DONACIÓN)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Clásico vs Hero Elegante (index.html)
   -------------------------------------------------------------------------- */

/* Sección Hero (Estructura base) */
.hero {
    position: relative;
    padding: 60px 0 110px;
    border-bottom: 2px solid var(--black);
    overflow: hidden;
}

/* Ceja del título (ej: "Sorteo Activo" o "Lanzamiento") */
.hero-eyebrow {
    font-family: 'Space Mono';
    font-size: 13px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* Línea decorativa izquierda en la ceja del hero */
.hero-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--red);
}

/* Título colosal con desplazamiento a la izquierda para un look asimétrico e informal */
.hero-title {
    font-size: clamp(72px, 17vw, 220px);
    color: var(--black);
    margin-left: -4px;
}

/* Bloque rotado con fondo negro de subtítulo */
.hero-sub {
    font-family: 'Anton';
    text-transform: uppercase;
    color: var(--paper);
    background: var(--black);
    display: inline-block;
    font-size: clamp(20px, 3.4vw, 34px);
    padding: 6px 16px;
    margin-top: 10px;
    transform: rotate(-1.2deg);                /* Rotación intencionada estética analógica */
}

/* Párrafo del bloque de bienvenida */
.hero-copy {
    max-width: 460px;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 300;
    margin-top: 34px;
}

.hero-copy b {
    font-weight: 500;
    color: var(--black);
}

/* Acciones en hero (Botones agrupados) */
.hero-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

/* Nota tipográfica informal manuscrita al lado de botones */
.hero-note {
    font-family: 'Caveat';
    font-size: 22px;
    color: var(--red);
    transform: rotate(-2deg);
}

/* Ticket decorativo analógico con aspecto de concierto vintage */
.hero-ticket {
    position: absolute;
    right: 24px;
    top: 70px;
    width: 280px;
    background: var(--paper);
    border: 2px solid var(--black);
    padding: 18px;
    transform: rotate(6deg);                    /* Inclinación cruzada */
    box-shadow: 10px 10px 0 var(--black);       /* Sombra brutalista rígida */
}

/* Muescas laterales circulares que imitan la perforación de corte de un ticket físico */
.hero-ticket::before,
.hero-ticket::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--paper);
    border: 2px solid var(--black);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.hero-ticket::before { left: -13px; }
.hero-ticket::after { right: -13px; }

/* Etiquetas internas del ticket */
.hero-ticket .t-label {
    font-family: 'Space Mono';
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray);
}

/* Número de serie central del ticket delimitado por líneas punteadas */
.hero-ticket .t-num {
    font-family: 'Anton';
    font-size: 30px;
    margin-top: 6px;
    border-top: 1px dashed var(--black);
    border-bottom: 1px dashed var(--black);
    padding: 8px 0;
}

/* Información de pie de ticket */
.hero-ticket .t-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: 'Space Mono';
    font-size: 10px;
    text-transform: uppercase;
    color: var(--gray);
}

/* Cruz de registro de impresión analógica decorativa */
.hero-cross {
    position: absolute;
    font-family: 'Anton';
    color: var(--red);
    font-size: 34px;
    opacity: .8;
}

/* --------------------------------------------------------------------------
   Hero Elegante (Pantalla completa con fondo fotográfico)
   -------------------------------------------------------------------------- */
.hero-elegant {
    min-height: 100svh;                        /* Ocupa el alto total real del viewport del móvil */
    padding: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Imagen de fondo de alta calidad del artista con base roja */
    background: var(--red) url('src/index-bg.webp') center 30%/cover no-repeat;
}

/* Capa de degradado oscura sobre la imagen de fondo para garantizar legibilidad del título */
.hero-elegant::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.38) 38%, rgba(10,10,10,.4) 62%, rgba(10,10,10,.88) 100%);
    z-index: 1;
}

/* Alineador interno para el contenido de la portada */
.hero-elegant-content {
    position: relative;
    z-index: 2;                                /* Sitúa el contenido tipográfico por encima del overlay oscuro */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 140px 24px 120px;
}

/* Ceja centrada con estilo sticker o tarjeta independiente */
.hero-eyebrow--center {
    display: inline-flex;
    justify-content: center;
    color: var(--black);
    background: var(--paper);
    border: 2px solid var(--black);
    padding: 6px 16px;
    margin-bottom: 4px;
}

.hero-eyebrow--center::before {
    display: none;                             /* Desactiva línea decorativa lateral izquierda */
}

/* Ajuste de imagen del logo del artista */
.hero-elegant-title {
    margin-top: 8px;
    max-height: 20vw;
}
@media (max-width: 768px){
    .hero-elegant-title {
            max-height: 45vw;
}
}

/* Copia poética o subtítulo en la presentación elegante */
.hero-elegant-copy {
    max-width: 560px;
    margin: 28px auto 0;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 14px;
    line-height: 1.85;
    color: var(--paper);
}

/* Indicador visual inferior que invita a hacer scroll descendente */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 2;
    width: 24px;
    height: 38px;
    border: 2px solid var(--paper);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
}

/* Pequeño punto que simula deslizarse dentro del ratón indicador */
.scroll-cue::before {
    content: "";
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: var(--paper);
    animation: scrollCue 1.6s infinite;         /* Animación cíclica de caída */
}

/* Animación de caída y desvanecimiento de la rueda del ratón virtual */
@keyframes scrollCue {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(12px); }
}

/* --------------------------------------------------------------------------
   Hero de Tienda / Catálogo
   -------------------------------------------------------------------------- */
.shop-hero {
    padding: 80px 0;
    text-align: center;
    border-bottom: 2px solid var(--black);
    background-image: url("src/catalogo-camiseta.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ajuste específico de encuadre en móviles de fondo */
@media (max-width: 600px) {
    .shop-hero {
        background-position: 80% center;
    }

}

/* Títulos del catálogo */
.shop-hero h1 {
    font-size: clamp(40px, 7vw, 80px);
}

/* Efecto de silueta tipográfica de alto impacto */
.shop-hero h1 span {
    color: var(--red);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--paper);
}

/* Copia de cabecera de tienda */
.shop-hero p {
    max-width: 460px;
    margin: 20px auto 30px;
    font-size: 16px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Grid de Características / Perfil (.about-grid)
   -------------------------------------------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);     /* Tres bloques asimétricos de perfil */
    gap: 0;
    border: 2px solid var(--black);
}

/* Tarjeta individual de perfil */
.about-card {
    padding: 34px 26px;
    border-right: 2px solid var(--black);      /* Delimitación vertical gruesa */
}

.about-card:last-child {
    border-right: none;
}

/* Numeración colosal dentro de la tarjeta de perfil */
.about-card .num {
    font-family: 'Anton';
    font-size: 52px;
    color: var(--red);
    line-height: 1;
}

/* Títulos descriptivos */
.about-card h3 {
    font-family: 'Anton';
    font-size: 24px;
    text-transform: uppercase;
    margin: 12px 0 10px;
}

/* Textos informativos de perfil */
.about-card p {
    font-size: 15px;
    line-height: 1.55;
    color: #3a352f;
}

/* --------------------------------------------------------------------------
   Bloque Informativo: 'Por qué' (.why)
   -------------------------------------------------------------------------- */
.why {
    display: grid;
    grid-template-columns: 1fr 1.3fr;          /* Columna izquierda compacta, derecha amplia */
    gap: 60px;
    align-items: start;
}

/* Título de justificación */
.why-title {
    font-size: clamp(40px, 6vw, 84px);
    color: var(--black);
}
@media (max-width: 768px){
    .why-title{
        display: none;
    }
    .id-block{
        display: none;
    }
}

.why-title span {
    color: var(--red);
}

/* Líneas destacadas en negrita estilo manifiesto */
.why-lines p {
    font-family: 'Anton';
    text-transform: uppercase;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--ink);
}

/* Desplazamiento intencionado del segundo párrafo de la declaración */
.why-lines p:nth-child(2) {
    color: var(--red);
    margin-left: 30px;
}

/* Detalles descriptivos en texto fino atenuado */
.why-lines .tiny {
    font-family: 'Archivo';
    font-weight: 300;
    text-transform: none;
    font-size: 16px;
    margin-top: 26px;
    max-width: 420px;
    line-height: 1.6;
    color: #3a352f;
}

/* --------------------------------------------------------------------------
   Fases / Pasos / Procesos (.steps)
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);     /* 4 fases ordenadas */
    gap: 20px;
}

/* Tarjeta de paso individual con patrón de líneas de fondo */
.step {
    border: 2px solid var(--black);
    padding: 26px 20px;
    background: var(--paper);
    position: relative;
    /* Patrón de líneas verticales sutiles que recuerdan a hojas cuadriculadas de libreta */
    background-image: repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(0,0,0,.06) 9px, rgba(0,0,0,.06) 10px);
    background-size: 100% 100%;
    background-position: top;
}

/* Remache decorativo circular superior que simula una perforadora de carpetas de anillas */
.step::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--paper);
    border: 2px solid var(--black);
    border-radius: 50%;
}

/* Número silueteado colosal de paso */
.step .num {
    font-family: 'Anton';
    font-size: 56px;
    color: var(--black);
    -webkit-text-stroke: 1.5px var(--black);   /* Efecto de borde de trazado sin relleno */
    color: transparent;
}

/* Título de la fase */
.step h4 {
    font-family: 'Anton';
    text-transform: uppercase;
    font-size: 19px;
    margin: 14px 0 8px;
}

/* Texto de la fase */
.step p {
    font-size: 14px;
    color: #3a352f;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Caja de Donación / Patrocinio Independiente (.donate-box)
   -------------------------------------------------------------------------- */
.donate-box {
    border: 2px solid var(--black);
    padding: 40px;
    text-align: center;
    position: relative;
}

/* Categoría de donación */
.donate-top {
    font-family: 'Space Mono';
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 8px;
}

/* Título de la sección de soporte */
.donate-title {
    font-size: clamp(28px, 4.2vw, 52px);
    margin-bottom: 16px;
}

/* Copia de llamada al patrocinio */
.donate-copy {
    max-width: 480px;
    margin: 0 auto 30px;
    font-size: 15px;
    line-height: 1.6;
    color: #3a352f;
}

/* Grupo de selección de importes predeterminados rápidos */
.donate-quick {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

/* Botón de importe rápido */
.amount-btn {
    border: 2px solid var(--black);
    background: var(--paper);
    padding: 12px 20px;
    font-family: 'Space Mono';
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Hover interactivo */
.amount-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--black);
}

/* Estado activo (importe seleccionado actualmente) */
.amount-btn.active {
    background: var(--red);
    color: var(--paper);
}

/* Resalte de compensación estimado ficticio */
.donate-tickets {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: var(--red);
    border-top: 1px dashed var(--black);
    border-bottom: 1px dashed var(--black);
    padding: 10px 22px;
    margin-bottom: 10px;
}

/* Avisos legales de soporte */
.donate-note {
    font-size: 12px;
    color: var(--gray);
    margin-top: 16px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Control de errores dinámico en inputs de aportación */
.donate-error {
    color: var(--red);
    font-size: 13px;
    font-family: 'Space Mono';
    margin-top: -6px;
    margin-bottom: 14px;
    display: none;                             /* Oculto por defecto */
}

/* Muestra error cuando se añade la clase de validación activa */
.donate-error.show {
    display: block;
}

/* --------------------------------------------------------------------------
   Banner de Comunidad y Llamada Final (.double)
   -------------------------------------------------------------------------- */
.double {
    background: var(--black);
    color: var(--paper);
    padding: 90px 0;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
}

.double .wrap {
    text-align: center;
}

.double h2 {
    font-size: clamp(40px, 7vw, 110px);
    color: var(--paper);
}

.double h2 span {
    color: var(--red);
}

.double p {
    max-width: 480px;
    margin: 22px auto 34px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
    color: #d8d3c8;
}

/* --------------------------------------------------------------------------
   Campos e Inputs de Formularios Estándar (.form-row)
   -------------------------------------------------------------------------- */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    max-width: 440px;
}

/* Etiquetas descriptivas superiores */
.form-row label {
    font-family: 'Space Mono';
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray);
}

/* Caja de entrada de datos textuales */
.form-row input {
    border: 2px solid var(--black);
    background: var(--paper);
    padding: 14px 16px;
    font-family: 'Space Mono';
    font-size: 15px;
    letter-spacing: .04em;
    outline: none;                             /* Desactiva anillo de foco por defecto */
}

/* Foco activo: Añade realce de color e inclinación por sombra en el input */
.form-row input:focus {
    background: #fff;
    box-shadow: 4px 4px 0 var(--red);
}

/* --------------------------------------------------------------------------
   Firma o Detalle Manual de Garabato Lateral (.id-block)
   -------------------------------------------------------------------------- */
.id-block {
    font-family: 'Caveat';
    color: var(--red);
    font-size: 20px;
    line-height: 1.4;
    border-left: 2px solid var(--red);         /* Borde izquierdo rojo a modo de margen manuscrito */
    padding-left: 14px;
    max-width: 220px;
}

/* --------------------------------------------------------------------------
   Filtros de Clasificación de Productos (Catálogo)
   -------------------------------------------------------------------------- */
.filters-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

/* Botón de opción de filtro */
.filter-btn {
    font-family: 'Space Mono';
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 18px;
    border: 2px solid var(--black);
    background: var(--paper);
    cursor: pointer;
}

/* Estado de filtro activo seleccionado */
.filter-btn.active {
    background: var(--black);
    color: var(--paper);
}

/* --------------------------------------------------------------------------
   Bloque Promocional / Banner de Campaña (.promo-grid)
   -------------------------------------------------------------------------- */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Tarjeta promocional individual */
.promo-card {
    background: var(--paper-dim);
    border: 2px solid var(--black);
    padding: 36px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;                 /* Empuja contenido al fondo para efecto publicitario */
}

/* Variante: Tarjeta promocional en fondo negro */
.promo-card.dark {
    background: var(--black);
    color: var(--paper);
}

.promo-card h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Adaptación responsiva para banners de campaña en móvil */
@media (max-width: 700px) {
    .promo-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ==========================================================================
   9. PÁGINA ESPECÍFICA: DETALLE DE PRODUCTO (detalle.html)
   ========================================================================== */

/* Distribución de la ficha de producto (Rejilla asimétrica imagen vs información) */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(30px, 5vw, 60px);
    padding: 40px 0;
}

/* Marco o visor expositor de imagen principal de producto */
.product-gallery {
    border: 2px solid var(--black);
    background: var(--paper-dim);
    aspect-ratio: 1/1;                         /* Formato cuadrado limpio */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Detalle de imagen de galería */
.product-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bloque derecho con información, variaciones y compra */
.product-details-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Nombre completo del producto destacado */
.product-details-info h2 {
    font-size: clamp(32px, 5vw, 56px);
    color: var(--black);
    line-height: 1.1;
}

/* Tamaño de visualización colosal de precio en la ficha de producto */
.product-details-info .merch-price {
    font-size: 32px;
}

/* Descripción extendida o ficha técnica del producto */
.product-details-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #3a352f;
}

.product-details-desc b {
    font-weight: 700;
}

/* Contenedor de opciones y variantes de producto (tallas, formatos, cantidades) */
.product-options {
    border-top: 1px dashed var(--gray);
    border-bottom: 1px dashed var(--gray);      /* Delimitadores punteados */
    padding: 24px 0;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Grupo selector individual (Tallas, etc.) */
.product-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Indicador de opción */
.product-option-group label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray);
}

/* Caja de selección desplegable (Dropdown) */
.product-option-group select {
    border: 2px solid var(--black);
    background: var(--paper);
    padding: 12px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

/* Sombra e iluminación activa en selección */
.product-option-group select:focus {
    box-shadow: 4px 4px 0 var(--red);
}

/* Reajuste responsivo para la ficha de producto en resoluciones de móvil */
@media (max-width: 860px) {
    .product-detail-layout {
        grid-template-columns: 1fr;            /* Apilado vertical simple */
        gap: 30px;
    }
}


/* ==========================================================================
   10. PÁGINA ESPECÍFICA: CROWDFUNDING / CAMPANAS (crowdfunding.html)
   ========================================================================== */

/* Distribución de la campaña (Contenido de objetivos vs panel de aportación rápida) */
.crowd-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;          /* Prioriza espacio para la explicación de recompensa */
    gap: clamp(30px, 5vw, 60px);
    padding: 40px 0;
}

/* Columna de contenidos del proyecto */
.crowd-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Caja contenedora de estadísticas de financiación */
.crowd-stats-panel {
    border: 2px solid var(--black);
    background: var(--paper-dim);
    padding: 30px;
}

/* Grid numérico de metas alcanzadas */
.crowd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);     /* [Financiado] [Meta] [Días] */
    gap: 20px;
    margin-bottom: 24px;
}

/* Cifras destacadas de progreso */
.crowd-stat-val {
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--red);
    line-height: 1;
}

/* Textos identificadores de métricas */
.crowd-stat-lbl {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gray);
    margin-top: 6px;
}

/* Contenedor o pista de la barra de porcentaje de recaudación */
.crowd-progress-bar {
    height: 16px;
    background: var(--paper);
    border: 2px solid var(--black);
    position: relative;
    overflow: hidden;
}

/* Relleno interior de progreso en color rojo */
.crowd-progress-fill {
    height: 100%;
    background: var(--red);
    width: 68%;                                /* Representa el porcentaje actual financiado */
}

/* Título para los diferentes niveles de mecenas (Tiers) */
.crowd-tiers-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--black);
}

/* Grid vertical para desplegar los diferentes niveles de patrocinador */
.crowd-tiers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Reajuste de la campaña en pantallas móviles */
@media (max-width: 880px) {
    .crowd-layout {
        grid-template-columns: 1fr;            /* Fuerza disposición vertical única */
        gap: 40px;
    }
}


/* ==========================================================================
   11. PIE DE PÁGINA (FOOTER - Cierre e Identidad)
   ========================================================================== */
footer {
    border-top: 2px solid var(--black);
    padding: 50px 0 30px;
}

/* Fila superior con logo de gran tamaño y enlaces de contacto */
.foot-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Logotipo gigantesco de cierre tipográfico */
.foot-logo {
        max-height: 4vw;
    }

/* Contenedor de iconos sociales de redes */
.foot-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Iconos de red social individuales */
.foot-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}

/* Hover de iconos sociales (Sutil elevación y desvanecimiento) */
.foot-links a:hover {
    opacity: .65;
    transform: translateY(-2px);
}

/* Dimensionamiento estándar para SVGs de iconos */
.social-icon {
    width: 30px;
    height: 30px;
    display: block;
    fill: currentColor;                        /* Adopta el color establecido en el elemento contenedor */
}

/* Fila de metadatos o propiedad de derechos del pie de página */
.foot-bottom {
    margin-top: 18px;
    font-family: 'Space Mono';
    font-size: 12px;
    color: var(--gray);
    line-height: 1.4;
}

/* Ajuste específico para el pie de página de la tienda */
.tienda-page footer {
    border-top: 2px solid var(--black);
    padding: 30px 0;
    text-align: left;
}

/* Reajuste responsivo de footer en móviles */
@media (max-width: 880px) {
    footer {
        padding: 38px 0 24px;
    }
    .foot-top {
        flex-direction: row;                   /* Mantiene flujo horizontal alineado */
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;                      /* Previene desbordamiento y saltos */
        gap: 14px;
    }
    .foot-links {
        gap: 16px;
    }
    .foot-logo {
        max-height: 10vw !important;
    }
}


/* ==========================================================================
   12. VENTANA MODAL (AUTH SYSTEM / Sistema de Registro y Login)
   ========================================================================== */

/* Capa oscura superpuesta que bloquea la pantalla trasera al abrir el modal */
.auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, .72);          /* Fondo negro con transparencia controlada */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;                             /* Capa por encima del resto de interacciones */
    opacity: 0;
    visibility: hidden;                        /* Invisibilidad por defecto */
    transition: opacity .3s ease, visibility 0s linear .3s; /* Transición sincronizada */
}

/* Estado modal abierto: Activado por javascript */
.auth-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease;               /* Reaparece fluidamente */
}

/* Bloqueo del desplazamiento de la web trasera al abrir el modal */
body.auth-lock {
    overflow: hidden;
}

/* Panel o tarjeta central del formulario de acceso */
.auth-panel {
    position: relative;
    width: 440px;
    max-width: 100%;
    background: var(--paper);
    border: 2px solid var(--black);
    box-shadow: 10px 10px 0 var(--black);       /* Sombra maciza brutalista */
    padding: 42px 36px 34px;
    transform: scale(.94) translateY(10px);    /* Ligera contracción inicial */
    opacity: 0;
    /* Transición amortiguada tipo muelle/elástico para apertura */
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, height .32s ease;
    overflow: hidden;
}

/* Efecto de escalado y reaparición en panel activo */
.auth-overlay.open .auth-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Botón de aspa de cierre (X) en el panel modal */
.auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 2px solid var(--black);
    background: var(--paper);
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Interacción de elevación del botón cerrar */
.auth-close:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--black);
}

/* Títulos descriptivos de acceso */
.auth-title {
    font-size: clamp(30px, 5vw, 42px);
    margin-bottom: 8px;
}

/* Copia de llamada o explicativa */
.auth-copy {
    font-size: 14px;
    color: #3a352f;
    line-height: 1.55;
    margin-bottom: 26px;
}

/* Vista activa de login o registro alternable */
.auth-view {
    opacity: 1;
    transition: opacity .25s ease;
}

/* Ocultado dinámico para vistas inactivas (Registro/Login) */
.auth-view:not(.active) {
    display: none;
}

/* Eliminación de anchos restrictivos para inputs internos de acceso */
.auth-form .form-row {
    max-width: none;
    margin-bottom: 16px;
}

/* Separador textual horizontal (ej: "o continúa con email") */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--gray);
}

/* Líneas horizontales generadas autollunables */
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray);
    opacity: .4;
}

/* Contenedor central de alternancia de login/registro */
.auth-switch {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.auth-switch .mono {
    font-size: 13px;
    color: var(--gray);
}

/* Botón ancho de conmutación */
.auth-switch-btn {
    width: 100%;
    justify-content: center;
    box-shadow: 6px 6px 0 var(--black);
}

.auth-switch-btn:hover {
    box-shadow: 9px 9px 0 var(--black);
}

/* Botón con estilo específico para acceso de terceros con Google */
.google-btn {
    width: 100%;
    background: var(--paper);
    color: var(--black);
    justify-content: center;
    gap: 12px;
    box-shadow: 6px 6px 0 var(--black);
    margin-bottom: 4px;
    margin-top: 10px;
}

.google-btn:hover {
    box-shadow: 9px 9px 0 var(--black);
}

/* Dimensiones del logo oficial SVG de Google */
.google-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;                            /* Previene compresión del icono */
}

/* Ajuste optimizado de paddings del modal para móviles */
@media (max-width: 520px) {
    .auth-panel {
        width: 94%;
        padding: 34px 22px 28px;
    }
}


/* ==========================================================================
   13. COMPILACIÓN DE AJUSTES MÓVILES (OPTIMIZACIONES GENERALES - Responsive)
   ========================================================================== */

/* Reajuste global para pantallas medianas / tablets */
@media (max-width: 880px) {
    .about-grid {
        grid-template-columns: 1fr;            /* Apila rejilla de perfil */
    }
    .about-card {
        border-right: none;
        border-bottom: 2px solid var(--black);  /* Intercambia borde derecho por inferior */
    }
    .about-card:last-child {
        border-bottom: none;
    }
    .why {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .why-lines p:nth-child(2) {
        margin-left: 0;                        /* Elimina margen asimétrico en móviles */
    }
    .steps {
        grid-template-columns: 1fr 1fr;        /* 2 columnas para fases en tablets */
    }
    .hero {
        padding-bottom: 50px;
        overflow: visible;
    }
    /* Imagen artística recortada o ilustrativa flotante en el Hero de la Home */
    .hero-image {
        position: absolute;
        top: 130px;
        right: 8%;
        bottom: auto;
        transform: translateY(-40%);
        width: 34%;
        height: auto;
        padding-right: 0;
        display: block;
        z-index: 1;
    }
    .hero-image img {
        width: 90%;
        max-width: none;
        display: block;
    }
    .hero-ticket {
        display: none;                         /* Oculta ticket estorbo en pantallas pequeñas */
    }
    section {
        padding: 70px 0;                       /* Reduce paddings de sección */
    }
}

    .nav-logo{
        max-height: 2vw;
    }

/* Reajuste global minucioso para pantallas pequeñas de smartphones */
@media (max-width: 600px) {
    .nav-logo{
        max-height: 8vw;
    }
    .wrap {
        padding: 0 18px;                       /* Reduce márgenes de pantalla */
    }
    section {
        padding: 52px 0;                       /* Reduce respiros de sección */
    }
    .sec-label {
        font-size: 11px;
        gap: 10px;
        margin-bottom: 22px;
    }
    /* Los botones normales se expanden al 100% de la pantalla para fácil pulsación táctil */
    .btn {
        padding: 15px 20px;
        font-size: 13px;
        width: 100%;
        justify-content: center;
    }
    /* Estructuración vertical de botones en hero */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-actions .btn {
        width: 100%;
    }
    .nav-inner {
        padding: 12px 14px;
    }
    .logo {
        font-size: 20px;
    }
    .nav-actions {
        gap: 8px;
    }
    .nav-cta {
        padding: 8px 12px;
        font-size: 10.5px;
    }
    .hero-elegant-content {
        padding: 90px 18px 64px;
    }
    .hero-elegant-title {
        font-size: clamp(52px, 20vw, 84px);
        -webkit-text-stroke: .75px var(--black);
        text-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
    }
    .hero-elegant-copy {
        font-size: 12.5px;
        line-height: 1.75;
        letter-spacing: .05em;
        max-width: 300px;
    }
    .scroll-cue {
        bottom: 18px;
    }
    .why-title {
        font-size: clamp(34px, 11vw, 58px);
    }
    .why-lines p {
        font-size: clamp(18px, 6vw, 26px);
        margin-bottom: 14px;
    }
    .id-block {
        font-size: 17px;
        max-width: none;
        margin-top: 22px;
        padding-left: 12px;
    }
    .why-lines .tiny {
        font-size: 14.5px;
        line-height: 1.6;
    }
    #musica iframe {
        height: flex;                          /* Corrección de altura flexible en iframe de Spotify */
    }
    .step {
        padding: 20px 16px;
    }
    .step .num {
        font-size: 42px;
    }
    .step h4 {
        font-size: 17px;
    }
    .pf-panel-inner {
        padding: 36px 20px;
    }
    .pf-eyebrow {
        margin-bottom: 12px;
    }
    .pf-num {
        font-size: clamp(42px, 14vw, 64px);
    }
    .pf-sub {
        font-size: clamp(19px, 7vw, 26px);
        margin-bottom: 18px;
    }
    .pf-copy {
        font-size: 14.5px;
        margin-bottom: 24px;
    }
    .pf-btn {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
    }
    .conc-title {
        margin-bottom: 26px;
    }
    .conc-row {
        padding: 18px 14px;
    }
    .conc-date {
        font-size: 22px;
    }
    .conc-city {
        font-size: 15px;
    }
    .conc-cta {
        padding: 10px 14px;
        font-size: 10.5px;
    }
    .bjdg-galeria {
        padding: min(4vw, 60px) 0;
    }
    .merch-body {
        padding: 16px;
    }
    .merch-body h4 {
        font-size: 15px;
        min-height: 0;
    }
    .merch-price {
        font-size: 19px;
    }
    .merch-cta {
        padding: 8px 12px;
        font-size: 10.5px;
    }
    .double {
        padding: 60px 0;
    }
    .double h2 {
        font-size: clamp(34px, 11vw, 54px);
    }
    .double p {
        font-size: 14.5px;
        line-height: 1.55;
    }
    .donate-box {
        padding: 26px 18px;
    }
    .donate-title {
        font-size: clamp(24px, 8vw, 32px);
    }
    .donate-copy {
        font-size: 14px;
    }
    .donate-quick {
        gap: 8px;
    }
    .amount-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
    .donate-tickets {
        font-size: 16px;
        padding: 10px 16px;
    }
    .auth-title {
        font-size: clamp(26px, 8vw, 34px);
    }
    .auth-copy {
        font-size: 13.5px;
    }
}

/* Modificación para pantallas extremadamente compactas */
@media (max-width: 520px) {
    .steps {
        grid-template-columns: 1fr;            /* Fuerza fases a columna individual */
    }
    .hero-image {
        top: 130px;
        right: 6%;
        width: 36%;
    }
    .social-icon {
        width: 26px;
        height: 26px;
    }
}

/* ==========================================================================
   14. ANIMACIÓN DE SECCIONES (REVEAL ON SCROLL - Animaciones de carga)
   ========================================================================== */

/* Estado inicial oculto de los elementos con revelado */
.reveal {
  opacity: 0;
  transform: translateY(30px);                /* Desplazamiento inicial hacia abajo */
  transition: opacity 0.85s cubic-bezier(0.215, 0.610, 0.355, 1),
              transform 0.85s cubic-bezier(0.215, 0.610, 0.355, 1); /* Curva de velocidad suave */
  will-change: opacity, transform;             /* Optimiza el renderizado del navegador anticipadamente */
}

/* Estado activo cuando la sección entra en el área visible del viewport (Trigger por JS) */
.reveal.in {
  opacity: 1;
  transform: translateY(0);                  /* Recupera posición natural vertical */
}