/*
 Theme Name:   Bilbao que ver Child
 Theme URI:    https://bilbaoquever.com
 Description:  Child theme de Astra para bilbaoquever.com — Guía de turismo en Bilbao
 Author:       Bilbao que ver
 Template:     astra
 Version:      1.0.0
 Text Domain:  bilbaoquever-child
*/

/* ─── GOOGLE FONTS ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap');

/* ─── VARIABLES GLOBALES ───────────────────────────────────────────────── */
:root {
  /* Colores */
  --color-navy:  #1B3D5E;
  --color-blue:  #2C6B8E;
  --color-mid:   #5B8EAD;
  --color-light: #A8C5D8;
  --color-pale:  #C4D4DF;
  --color-beige: #F7F4EF;
  --color-warm:  #DDD8D0;
  --color-dark:  #2A2A2A;
  --color-muted: #6B7E8E;
  --color-white: #FFFFFF;

  /* Tipografía */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* Espaciado */
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Layout */
  --max-width:     1200px;
  --content-width: 860px;

  /* Sombras */
  --shadow-sm:  0 2px 8px rgba(27,61,94,0.08);
  --shadow-md:  0 4px 16px rgba(27,61,94,0.10);
  --shadow-lg:  0 8px 32px rgba(27,61,94,0.14);
}

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

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-dark);
  background-color: var(--color-beige);
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--color-navy); }

/* ─── CONTENEDOR ───────────────────────────────────────────────────────── */
.bqv-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* ─── TIPOGRAFÍA GLOBAL ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 var(--space-md);
}
h1 { font-size: clamp(28px, 5vw, 42px); }
h2 { font-size: clamp(22px, 3.5vw, 30px); }
h3 { font-size: clamp(16px, 2.5vw, 20px); }
p  { margin: 0 0 var(--space-md); }

/* ─── OVERRIDE ASTRA ───────────────────────────────────────────────────── */
.ast-container        { max-width: var(--max-width) !important; }
#masthead,
.site-header          { background: transparent !important; box-shadow: none !important; }
.ast-primary-header-bar { display: none !important; }
.ast-below-header     { display: none !important; }

/* ─── MEJORAS DE DISEÑO v2 ─────────────────────────────────────────────── */

/* Override font size para Cormorant (óptico más grande que Playfair) */
.bqv-hero__title { font-size: clamp(44px, 8vw, 82px); font-weight: 400; letter-spacing: -0.01em; }
.bqv-section__title { font-size: clamp(28px, 4.5vw, 42px); font-weight: 400; }
.bqv-card__title { font-size: 19px; font-weight: 500; }
.bqv-page-hero__title { font-size: clamp(36px, 7vw, 64px); font-weight: 400; }

/* ─── ANIMACIONES DE ENTRADA ────────────────────────────────────────────── */
@keyframes bqv-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bqv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bqv-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes bqv-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Hero animado */
.bqv-hero__eyebrow {
  animation: bqv-fade-up 0.7s ease both;
  animation-delay: 0.1s;
}
.bqv-hero__title {
  animation: bqv-fade-up 0.8s ease both;
  animation-delay: 0.25s;
}
.bqv-hero__desc {
  animation: bqv-fade-up 0.8s ease both;
  animation-delay: 0.45s;
}
.bqv-hero__actions {
  animation: bqv-fade-up 0.8s ease both;
  animation-delay: 0.6s;
}
.bqv-hero__scroll {
  animation: bqv-fade-in 1s ease both, bqv-bounce 2.5s ease 1.5s infinite;
  animation-delay: 1s, 1s;
}

/* ─── HERO: overlay más cinematográfico ─────────────────────────────────── */
.bqv-hero__overlay {
  background: linear-gradient(
    160deg,
    rgba(11,32,54,0.72) 0%,
    rgba(27,61,94,0.40) 55%,
    rgba(11,32,54,0.82) 100%
  );
}
.bqv-hero__bg {
  opacity: 0.55;
  filter: saturate(0.85);
}

/* ─── EYEBROW: línea animada ────────────────────────────────────────────── */
.bqv-hero__eyebrow::before {
  transform-origin: left;
  animation: bqv-line-in 0.6s ease both;
  animation-delay: 0.05s;
}
.bqv-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bqv-section__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}

/* ─── CARDS: sombra más refinada + borde sutil ───────────────────────────── */
.bqv-card {
  border: 1px solid rgba(221,216,208,0.6);
  box-shadow: 0 1px 4px rgba(27,61,94,0.05), 0 0 0 0 rgba(44,107,142,0);
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.2),
              box-shadow 0.35s ease,
              border-color 0.25s ease;
  background: var(--color-white);
}
.bqv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(27,61,94,0.14), 0 2px 8px rgba(27,61,94,0.08);
  border-color: var(--color-light);
}
.bqv-card__img { transition: transform 0.55s cubic-bezier(.22,.68,0,1.05); }
.bqv-card:hover .bqv-card__img { transform: scale(1.06); }

/* Card link con underline deslizante */
.bqv-card__link {
  position: relative;
  overflow: hidden;
}
.bqv-card__link::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.bqv-card__link:hover::after { transform: scaleX(1); }

/* ─── BUTTONS: efecto ripple + mejora hover ──────────────────────────────── */
.bqv-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(.22,.68,0,1.2);
  letter-spacing: 0.04em;
}
.bqv-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.2s;
}
.bqv-btn:hover::after { opacity: 1; }
.bqv-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27,61,94,0.25);
}
.bqv-btn--outline:hover {
  background: rgba(247,244,239,0.15);
  transform: translateY(-1px);
}
.bqv-btn--outline-navy {
  border-color: var(--color-mid);
  letter-spacing: 0.03em;
}
.bqv-btn--outline-navy:hover {
  background: var(--color-navy);
  color: var(--color-beige);
  border-color: var(--color-navy);
  transform: translateY(-1px);
}

/* ─── CHIPS: transición más suave ────────────────────────────────────────── */
.bqv-chip {
  transition: all 0.22s cubic-bezier(.22,.68,0,1.2);
  letter-spacing: 0.07em;
}
.bqv-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44,107,142,0.2);
}

/* ─── QUICK CATEGORIES: iconos SVG refinados ────────────────────────────── */
.bqv-quickcat {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.22,.68,0,1.2);
}
.bqv-quickcat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168,197,216,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.bqv-quickcat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-mid); }
.bqv-quickcat:hover::before { opacity: 1; }
.bqv-quickcat__icon {
  font-size: 0; /* ocultar emoji si queda alguno, el SVG lo reemplaza */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(168,197,216,0.15);
  border-radius: 10px;
  margin-bottom: 4px;
  transition: background 0.25s;
}
.bqv-quickcat:hover .bqv-quickcat__icon { background: rgba(44,107,142,0.12); }
.bqv-quickcat__icon svg { display: block; }
.bqv-quickcat__label { font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: 0; }

/* ─── BARRIO CARDS: efecto overlay más fino ──────────────────────────────── */
.bqv-barrio-card {
  transition: box-shadow 0.35s ease;
}
.bqv-barrio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(247,244,239,0.12);
  transition: border-color 0.3s;
  pointer-events: none;
}
.bqv-barrio-card:hover { box-shadow: 0 12px 40px rgba(27,61,94,0.22); }
.bqv-barrio-card:hover::after { border-color: rgba(247,244,239,0.28); }
.bqv-barrio-card img { transition: transform 0.55s cubic-bezier(.22,.68,0,1.05); }
.bqv-barrio-card:hover img { transform: scale(1.07); }
.bqv-barrio-card__body h3 { font-size: 22px; font-weight: 400; }

/* ─── BANNER: fondo más sofisticado ─────────────────────────────────────── */
.bqv-banner {
  background: linear-gradient(135deg, #0B2036 0%, var(--color-navy) 45%, #204E72 100%);
  position: relative;
  overflow: hidden;
}
.bqv-banner::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,197,216,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.bqv-banner__cta {
  letter-spacing: 0.04em;
  transition: all 0.28s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.bqv-banner__cta:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.25); transform: translateY(-2px); }

/* ─── HEADER: blur glassmorphism cuando scrolled ────────────────────────── */
.bqv-header.is-scrolled {
  background: rgba(247,244,239,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── SECTION HEADER: fade in al aparecer ────────────────────────────────── */
.bqv-section__header {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ─── PÁGINA HERO: textura de puntos más sutil ───────────────────────────── */
.bqv-page-hero::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="1" cy="1" r="0.8" fill="rgba(168,197,216,0.10)"/></svg>') repeat;
}

/* ─── FOOTER: link hover refinado ───────────────────────────────────────── */
.bqv-footer__links a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.bqv-footer__links a:hover { padding-left: 4px; }

/* ─── SCROLL SUAVE global ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ─── SELECTION COLOR ────────────────────────────────────────────────────── */
::selection {
  background: rgba(44,107,142,0.18);
  color: var(--color-navy);
}