/* ═══════════════════════════════════════════════════
   ARCHIVO: css/premium.css  —  Grupo Mira Almería
   Mejoras visuales de prestigio — no sobreescribe
   la lógica de style.css, solo añade refinamiento.
═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   § 1  SCROLL REVEAL
   Las secciones aparecen suavemente al entrar en
   pantalla. Añade class="reveal" a cualquier bloque.
───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1),
              transform 0.7s cubic-bezier(.22,1,.36,1);
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ─────────────────────────────────────────────────
   § 2  TIPOGRAFÍA PREMIUM
   Añade una variable display para títulos hero
   e introduce un kerning más refinado.
───────────────────────────────────────────────── */
:root {
  --fuente-display: 'Montserrat', sans-serif;
  --shadow-color:   rgba(10, 83, 148, 0.12);
  --shadow-hover:   rgba(10, 83, 148, 0.22);
  --gradient-azul:  linear-gradient(135deg, #0a5394 0%, #073d6e 100%);
  --gradient-warm:  linear-gradient(135deg, #eb5c2b 0%, #c94a20 100%);
}

.section-header h2 {
  letter-spacing: -0.03em;
}

.hero-title {
  letter-spacing: -0.03em;
}


/* ─────────────────────────────────────────────────
   § 3  BOTONES PREMIUM
   Mantiene los nombres de clase. Añade gradiente,
   sombra de color y efecto shine al hover.
───────────────────────────────────────────────── */
.btn-primary,
.btn-cta-primary {
  background: var(--gradient-warm);
  box-shadow: 0 4px 18px rgba(235, 92, 43, 0.30);
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}
.btn-primary:hover::after,
.btn-cta-primary:hover::after {
  transform: translateX(100%);
}
.btn-primary:hover,
.btn-cta-primary:hover {
  box-shadow: 0 6px 28px rgba(235, 92, 43, 0.42);
  transform: translateY(-3px);
}

.btn-ghost,
.btn-cta-ghost {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ─────────────────────────────────────────────────
   § 4  TARJETAS DE FERIAS — sombras de color
───────────────────────────────────────────────── */
.feria-card {
  box-shadow: 0 2px 20px var(--shadow-color);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1),
              box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
.feria-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 48px var(--shadow-hover);
}


/* ─────────────────────────────────────────────────
   § 5  SECCIÓN DE CONFIANZA — fondo con patrón sutil
───────────────────────────────────────────────── */
.trust-section {
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
    var(--gradient-azul);
  position: relative;
  overflow: hidden;
}
.trust-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.trust-num {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.trust-suffix {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─────────────────────────────────────────────────
   § 6  CTA SECTION — gradiente premium
───────────────────────────────────────────────── */
.cta-section {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.06) 0%, transparent 55%),
    var(--gradient-azul);
  position: relative;
  overflow: hidden;
}
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.cta-section h2,
.cta-section p,
.cta-btns {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────
   § 7  SEPARADORES DE SECCIÓN — ola curva
───────────────────────────────────────────────── */
.wave-bottom {
  position: relative;
}
.wave-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 48px;
  background: inherit;
  clip-path: ellipse(55% 100% at 50% 0%);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────
   § 8  LINKS DE NAVEGACIÓN — subrayado animado premium
───────────────────────────────────────────────── */
.main-nav a::after {
  height: 2px;
  background: var(--gradient-warm);
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────
   § 9  GALERÍA — overlay premium al hover
───────────────────────────────────────────────── */
.gallery-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,61,110,0.45) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gallery-item:hover::after {
  opacity: 1;
}
.gallery-item img {
  transition: transform 0.55s cubic-bezier(.22,1,.36,1);
}
.gallery-item:hover img {
  transform: scale(1.07);
}


/* ─────────────────────────────────────────────────
   § 10  FOOTER — refinamiento visual
───────────────────────────────────────────────── */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--borde), transparent);
}


/* ─────────────────────────────────────────────────
   § 11  HEADER SCROLLED — borde inferior sutil
───────────────────────────────────────────────── */
.site-header.scrolled {
  border-bottom: 1px solid rgba(10, 83, 148, 0.10);
}


/* ─────────────────────────────────────────────────
   § 12  BRAND ITEMS — hover más refinado
───────────────────────────────────────────────── */
.brand-item {
  transition: border-color 0.3s ease,
              background 0.3s ease,
              transform 0.35s cubic-bezier(.22,1,.36,1),
              box-shadow 0.35s ease;
}
.brand-item:hover {
  border-color: rgba(10, 83, 148, 0.15);
  background: var(--fondo);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-color);
}


/* ─────────────────────────────────────────────────
   § 13  FAQ — animación de apertura más suave
───────────────────────────────────────────────── */
.faq-item {
  transition: box-shadow 0.3s ease;
}
.faq-item:focus-within {
  box-shadow: 0 0 0 2px rgba(10, 83, 148, 0.15);
}


/* ─────────────────────────────────────────────────
   § 14  SOCIAL LINKS — hover con color de marca
───────────────────────────────────────────────── */
.social-links a {
  transition: color 0.3s ease,
              background 0.3s ease,
              transform 0.3s cubic-bezier(.22,1,.36,1);
}
.social-links a:hover {
  transform: translateY(-3px);
}


/* ─────────────────────────────────────────────────
   § 15  EYEBROW — pill con gradiente sutil
───────────────────────────────────────────────── */
.eyebrow {
  background: linear-gradient(135deg, rgba(235,92,43,0.10) 0%, rgba(235,92,43,0.05) 100%);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(235,92,43,0.20);
}


/* ─────────────────────────────────────────────────
   § 16  SELECTION COLOR
───────────────────────────────────────────────── */
::selection {
  background: rgba(10, 83, 148, 0.20);
  color: var(--azul-oscuro);
}

/* ─────────────────────────────────────────────────
   § 17  BARAJA DE COLABORADORES
───────────────────────────────────────────────── */
.card-deck-stage {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 1rem;
  overflow: visible;
}

.deck-card {
  position: absolute;
  width: 220px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(10,83,148,0.10);
  padding: 2rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: default;
  will-change: transform, opacity;
}

.deck-card img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  border-radius: 8px;
}

.deck-card-nombre {
  font-family: var(--fuente-titulo);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-align: center;
  letter-spacing: 0.03em;
}

/* Carta central — resaltada */
.deck-card:nth-child(3) .deck-card-nombre {
  color: var(--azul);
}

@media (max-width: 768px) {
  .card-deck-stage { height: 280px; }
  .deck-card { width: 160px; padding: 1.25rem 1rem 1rem; }
  .deck-card img { height: 80px; }
}

@media (max-width: 480px) {
  .card-deck-stage { height: 240px; overflow: hidden; }
  .deck-card { width: 140px; }
}

/* ─────────────────────────────────────────────────
   § 18  SCROLLBAR PERSONALIZADO (Chromium)
───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #0a5394, #073d6e);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #073d6e; }