/* ===================================================
   PUERTO DE MAZARRÓN — Sistema de Estilos Completo
   styles.css · Versión 2026
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Josefin+Sans:wght@300;400;600&display=swap');

/* ───────────────────────────────────────────
   1. VARIABLES
─────────────────────────────────────────── */
:root {
  /* Paleta — Mediterráneo */
  --color-navy:       #0d1b2a;
  --color-navy-mid:   #1a2e45;
  --color-blue:       #1b4f72;
  --color-sea:        #2e86ab;
  --color-sky:        #a8dadc;
  --color-sand:       #f5efe6;
  --color-cream:      #fdf6ec;
  --color-gold:       #9b7610;
  --color-gold-lt:    #e8c96b;
  --color-white:      #ffffff;
  --color-text:       #1c1c2e;
  --color-text-muted: #5a6a7a;

  /* Aliases del segundo sistema */
  --azul-mar:   #1a4a6b;
  --turquesa:   #2a8fa8;
  --arena:      #f5ede0;
  --dorado:     #c8963a;
  --blanco:     #fdfaf6;
  --texto:      #1c2b35;
  --gris:       #6b7f8a;
  --sombra:     0 8px 40px rgba(26, 74, 107, 0.12);

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Josefin Sans', 'Segoe UI', sans-serif;

  /* Tipografía fluida */
  --font-size-body: clamp(1rem, 1.05vw, 1.1rem);
  --font-size-h1:   clamp(2.2rem, 5vw, 3.6rem);
  --font-size-h2:   clamp(1.8rem, 4vw, 2.6rem);
  --font-size-h3:   clamp(1.3rem, 2.5vw, 1.8rem);
  --line-height-body:     1.65;
  --line-height-headings: 1.2;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* Contenedor */
  --container-max: 1280px;
  --container-pad: 1.25rem;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Sombras */
  --shadow-card: 0 4px 24px rgba(13, 27, 42, 0.10);
  --shadow-lg:   0 12px 48px rgba(13, 27, 42, 0.18);

  /* Transiciones */
  --transition: 0.25s ease;
}

/* ───────────────────────────────────────────
   2. RESET & BASE
─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ───────────────────────────────────────────
   3. UTILIDADES
─────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────
   4. TIPOGRAFÍA
─────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--line-height-headings);
  margin-bottom: 0.75em;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); text-align: center; }
h3 { font-size: var(--font-size-h3); }
p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-bottom: 1.25em;
  color: var(--color-text-muted);
  max-width: 65ch;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px; height: 3px;
  background: var(--color-gold);
  margin: 10px auto 0;
}

/* ───────────────────────────────────────────
   5. BOTONES
─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}
.btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-gold);
  color: var(--color-white);
  border: none;
  padding: 10px 22px;
  border-radius: 30px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.25s;
}

.btn-primary:hover {
  background: var(--color-gold-lt);
}
.btn-outline {
  background-color: var(--color-gold);
  color: var(--color-white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-gold);
  border-color: var(--color-white);
}

/* ───────────────────────────────────────────
   6. HEADER & NAVEGACIÓN
─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 100;
  background-color: rgba(13, 27, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
}
.logo-icon { font-size: 1.4rem; }
.logo strong { color: var(--color-gold); }

.main-nav ul {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.nav-link {
  color: rgba(255,255,255,0.8);
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--color-gold);
  background-color: rgba(201,168,76,0.08);
}
.nav-cta {
  background-color: var(--color-gold);
  color: var(--color-navy) !important;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.nav-cta:hover { background-color: var(--color-gold-lt); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px; height: 20px;
  background: none; border: none;
  cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ───────────────────────────────────────────
   7. HERO (index)
─────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 68px;
  background: linear-gradient(160deg, var(--color-sand) 0%, var(--color-cream) 60%, #d6edf5 100%);
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--color-text);
  padding-block: var(--space-xl);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-sm);
  max-width: 90%; margin-inline: auto;
}
.hero-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.hero-content h1 {
  font-weight: 900;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}
.hero-content h1 em {
  color: var(--color-gold);
  font-style: normal;
  display: inline-block;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-muted);
  margin-inline: auto;
  text-align: center;
  max-width: 55ch;
  margin-bottom: var(--space-md);
}
.hero-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ───────────────────────────────────────────
   8. SECCIONES GENERALES
─────────────────────────────────────────── */
.section { padding-block: var(--space-xl); }
.section--light { background-color: var(--color-cream); }
.section--dark  {
  background-color: var(--color-navy);
  color: var(--color-white);
}
.section--dark p,
.section--dark h2 { color: var(--color-white); }
.section--accent {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
}
.section--accent p,
.section--accent h2 { color: var(--color-white); }

/* ───────────────────────────────────────────
   9. CARDS GENÉRICAS
─────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card-body {
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.card-body h3 { font-size: 1.2rem; }
.card-body p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin: 0; max-width: 100%;
}

/* ───────────────────────────────────────────
   10. ACTIVIDADES (index)
─────────────────────────────────────────── */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.activity-card {
  background-color: var(--color-white);
  border: 1px solid rgba(13,27,42,0.06);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.activity-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 6px 24px rgba(201,168,76,0.12);
  transform: translateY(-4px);
}
.activity-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.activity-card p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 100%;
}

/* ───────────────────────────────────────────
   11. ANIMACIÓN FADE-IN
─────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ───────────────────────────────────────────
   12. FOOTER
─────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-navy);
  color: rgba(255,255,255,0.7);
  padding-block: 3rem;
}
.site-footer .container p,
.site-footer .container a {
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.4rem;
  max-width: 100%;
}
.site-footer .container a:hover { color: var(--color-gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-block: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

/* ═══════════════════════════════════════════
   PÁGINA: ACTIVIDADES & EVENTOS
   actividades.css → integrado aquí
   ═══════════════════════════════════════════ */

/* ───────────────────────────────────────────
   A1. HERO DE SECCIÓN (actividades/eventos)
─────────────────────────────────────────── */
.section-hero {
  padding: 130px 60px 90px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.section-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='40' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
}
.section-hero .container { position: relative; z-index: 2; }

.section-hero .hero-label {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 16px;
  font-weight: 600;
  font-family: var(--font-body);
}
.section-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #fff;
}
.section-hero h1 em {
  color: var(--color-gold);
  font-style: normal;
}
.section-hero .hero-desc {
  font-size: 17px;
  line-height: 1.75;
  max-width: 600px;
  color: rgba(255,255,255,0.82);
  font-weight: 300;
}
.hero-wave {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  width: 100%; z-index: 3;
}

/* Hero actividades */
.hero-actividades {
  background: linear-gradient(135deg, #0d1b2a 0%, #1b4f72 55%, #2e86ab 100%);
}
/* Hero eventos */
.hero-eventos {
  background: linear-gradient(135deg, #1a0d2a 0%, #2e1b72 50%, #6b2eab 100%);
}

/* ───────────────────────────────────────────
   A2. BARRA DE FILTROS
─────────────────────────────────────────── */
.filters-bar {
  background: var(--arena);
  padding: 22px 60px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  position: sticky;
  top: 68px; z-index: 50;
  box-shadow: 0 2px 10px rgba(13,27,42,0.07);
}
.filters-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex; gap: 10px;
  flex-wrap: wrap; align-items: center;
}
.filter-label {
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gris); margin-right: 6px;
  flex-shrink: 0; font-family: var(--font-body);
  font-weight: 600;
}
.filter-btn {
  padding: 8px 20px;
  border: 1.5px solid rgba(26,74,107,0.25);
  background: white; border-radius: 30px;
  font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--azul-mar); cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--azul-mar);
  color: white;
  border-color: var(--azul-mar);
}

/* ───────────────────────────────────────────
   A3. INTRO DE PÁGINA
─────────────────────────────────────────── */
.page-intro {
  padding: 50px 60px 16px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.page-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--azul-mar);
  margin-bottom: 12px;
  text-align: left;
}
.page-intro h2::after {
  content: "";
  display: block; width: 60px; height: 3px;
  background: var(--color-gold);
  margin-top: 10px;
}
.page-intro p {
  font-size: 16px; line-height: 1.75;
  color: var(--gris); max-width: 720px;
  margin-top: 14px; margin-bottom: 0;
}

/* ───────────────────────────────────────────
   A4. GRID ACTIVIDADES
─────────────────────────────────────────── */
.act-grid {
  padding: 44px 60px 70px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ───────────────────────────────────────────
   A5. TARJETA ACTIVIDAD
─────────────────────────────────────────── */
.act-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.act-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(26,74,107,0.18);
}
.act-card.destacada { border: 2px solid var(--dorado); }

/* Cabecera visual */
.act-img {
  height: 170px;
  position: relative;
  display: flex; align-items: flex-end;
  padding: 0 20px 18px;
  overflow: hidden;
}
/* Colores por tipo de actividad */
.ac-nautica   { background: linear-gradient(135deg, #0d2233 0%, #1a5a7a 50%, #2a9ab0 100%); }
.ac-senderismo{ background: linear-gradient(135deg, #1a2e0d 0%, #3a6a1a 50%, #5a9a2a 100%); }
.ac-buceo     { background: linear-gradient(135deg, #0d1a33 0%, #1a3a7a 50%, #2a6ab0 100%); }
.ac-cultura   { background: linear-gradient(135deg, #2c1a0e 0%, #7a4a1a 50%, #c89040 100%); }
.ac-gastronomia { background: linear-gradient(135deg, #2c0e1a 0%, #7a1a3a 50%, #b03a2a 100%); }
.ac-deporte   { background: linear-gradient(135deg, #0e1a2c 0%, #1a3a7a 50%, #2a5ab0 100%); }
.ac-familia   { background: linear-gradient(135deg, #0e2c2a 0%, #1a7a6a 50%, #2ab0a0 100%); }
.ac-nocturno  { background: linear-gradient(135deg, #0a0a1a 0%, #1a1044 50%, #2a1a6a 100%); }

.act-img::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 C100 10 200 50 300 30 S400 10 400 30 L400 60 L0 60Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") no-repeat bottom/cover;
}

.act-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
  backdrop-filter: blur(4px);
}
.badge-nautica    { background: rgba(42,154,176,0.75); color: #e0f8fc; }
.badge-senderismo { background: rgba(90,154,42,0.75); color: #eaffea; }
.badge-buceo      { background: rgba(42,106,176,0.75); color: #e8f0ff; }
.badge-cultura    { background: rgba(200,144,64,0.75); color: #fff8ee; }
.badge-gastronomia{ background: rgba(176,58,42,0.75); color: #fff0ee; }
.badge-deporte    { background: rgba(42,90,176,0.75); color: #eaf0ff; }
.badge-familia    { background: rgba(42,176,160,0.75); color: #eafffe; }
.badge-nocturno   { background: rgba(42,26,106,0.75); color: #f0eeff; }

.act-duracion {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: white; border-radius: 8px;
  padding: 6px 10px; text-align: center;
}
.act-duracion .dur-val {
  font-family: var(--font-display); font-size: 18px;
  font-weight: 700; line-height: 1; color: white; display: block;
}
.act-duracion .dur-unit {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-gold-lt); display: block;
}

.act-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  color: white; line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}

/* Body tarjeta */
.act-body { padding: 20px 22px 14px; flex: 1; }
.act-ubicacion {
  font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--turquesa);
  font-weight: 600; margin-bottom: 10px;
}
.act-body p {
  font-size: 13.5px; line-height: 1.65;
  color: var(--gris); margin-bottom: 14px;
}
.act-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.act-tag {
  background: var(--arena); color: var(--azul-mar);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
  letter-spacing: 0.04em;
}

/* Footer tarjeta */
.act-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: var(--arena);
  border-top: 1px solid rgba(0,0,0,0.06);
  gap: 10px;
}
.act-precio { font-size: 13px; color: var(--gris); }
.act-precio strong { font-size: 15px; color: var(--azul-mar); font-weight: 700; }
.act-nivel {
  font-size: 11px; color: var(--gris);
  text-align: right; line-height: 1.5;
}

/* ───────────────────────────────────────────
   A6. TARJETA ACTIVIDAD GRANDE (2 columnas)
─────────────────────────────────────────── */
.act-card.act-grande {
  grid-column: span 2;
  flex-direction: row;
}
.act-card.act-grande .act-img {
  width: 320px; flex-shrink: 0; height: auto;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
}
.act-card.act-grande .act-title { font-size: 22px; margin-top: auto; }

/* ───────────────────────────────────────────
   A7. GRID EVENTOS
─────────────────────────────────────────── */
.eventos-grid {
  padding: 44px 60px 70px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ───────────────────────────────────────────
   A8. TARJETA EVENTO
─────────────────────────────────────────── */
.evento-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.evento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(26,74,107,0.18);
}
.evento-card.destacado { border: 2px solid var(--dorado); }

.evento-img {
  height: 170px;
  position: relative;
  display: flex; align-items: flex-end;
  padding: 0 20px 18px; overflow: hidden;
}
/* Colores evento */
.ev-musica     { background: linear-gradient(135deg, #0d1b2a 0%, #1b4f72 55%, #2e86ab 100%); }
.ev-cultura    { background: linear-gradient(135deg, #2c1a0e 0%, #7a4a1a 50%, #c8963a 100%); }
.ev-fiestas    { background: linear-gradient(135deg, #2c0e1a 0%, #8a1a3a 50%, #c83a60 100%); }
.ev-gastronomia{ background: linear-gradient(135deg, #1a0e2c 0%, #4a1a7a 50%, #8a3ab0 100%); }
.ev-deporte    { background: linear-gradient(135deg, #0e2c0e 0%, #1a7a1a 50%, #3ab03a 100%); }
.ev-nocturno   { background: linear-gradient(135deg, #0a0a1a 0%, #1a1044 50%, #3a2a7a 100%); }
.ev-infantil   { background: linear-gradient(135deg, #0e1a2c 0%, #1a5a9a 50%, #3a9ad0 100%); }
.ev-mar        { background: linear-gradient(135deg, #0d2233 0%, #1a5a7a 55%, #2a9ab0 100%); }

.evento-img::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 C100 10 200 40 300 25 S400 10 400 25 L400 50 L0 50Z' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E") no-repeat bottom/cover;
}

.ev-fecha-badge {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: white; text-align: center;
  border-radius: 10px; padding: 8px 12px; min-width: 54px;
}
.ev-fecha-badge .mes {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; color: var(--color-gold-lt); display: block; margin-bottom: 2px;
}
.ev-fecha-badge .dia {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 700; line-height: 1; color: white; display: block;
}

.ev-cat-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
  backdrop-filter: blur(4px);
}
.cat-musica     { background: rgba(46,134,171,0.78); color: #e0f4fa; }
.cat-cultura    { background: rgba(200,150,58,0.78); color: #fff8ee; }
.cat-fiestas    { background: rgba(200,58,96,0.78); color: #ffeeef; }
.cat-gastronomia{ background: rgba(138,58,176,0.78); color: #f8eeff; }
.cat-deporte    { background: rgba(58,176,58,0.78); color: #eaffea; }
.cat-nocturno   { background: rgba(58,42,122,0.78); color: #ece8ff; }
.cat-infantil   { background: rgba(58,154,208,0.78); color: #e8f4ff; }
.cat-mar        { background: rgba(42,154,176,0.78); color: #e0f8fc; }

.ev-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  color: white; line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}

.ev-body { padding: 20px 22px 14px; flex: 1; }
.ev-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ev-meta-item {
  font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--turquesa);
  font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.ev-meta-item .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-gold); flex-shrink: 0;
}
.ev-body p {
  font-size: 13.5px; line-height: 1.65;
  color: var(--gris); margin-bottom: 14px;
}
.ev-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.ev-tag {
  background: var(--arena); color: var(--azul-mar);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
}

.ev-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: var(--arena);
  border-top: 1px solid rgba(0,0,0,0.06);
  gap: 10px;
}
.ev-precio { font-size: 13px; color: var(--gris); }
.ev-precio strong { font-size: 15px; color: var(--azul-mar); font-weight: 700; }
.ev-lugar {
  font-size: 11px; color: var(--gris);
  text-align: right; line-height: 1.5; max-width: 140px;
}

/* Ribbon destacado */
.destacado-ribbon {
  position: absolute; top: 14px; right: -2px;
  background: var(--dorado); color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 5px 14px;
  border-radius: 3px 0 0 3px; z-index: 2;
}

/* ───────────────────────────────────────────
   A9. BANNER CTA VERANO
─────────────────────────────────────────── */
.banner-verano {
  background: linear-gradient(135deg, var(--color-navy) 0%, #1b4f72 55%, var(--color-sea) 100%);
  color: white; padding: 64px 60px;
  position: relative; overflow: hidden;
}
.banner-verano::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(46,134,171,0.2) 0%, transparent 70%);
}
.banner-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
  position: relative; z-index: 1;
}
.banner-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 14px; text-align: left; color: white;
}
.banner-inner h2::after { display: none; }
.banner-inner > div > p {
  font-size: 15px; line-height: 1.75;
  color: rgba(255,255,255,0.78); max-width: 500px;
}
.banner-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.bstat {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 20px;
  transition: background 0.3s;
}
.bstat:hover { background: rgba(255,255,255,0.13); }
.bstat .bnum {
  font-family: var(--font-display);
  font-size: 36px; color: var(--color-gold);
  line-height: 1; margin-bottom: 6px; display: block;
}
.bstat .bdesc {
  font-size: 12px; color: rgba(255,255,255,0.62);
  letter-spacing: 0.5px; line-height: 1.4;
}

/* ───────────────────────────────────────────
   A10. BOTÓN DE PÁGINA
─────────────────────────────────────────── */
.btn-act {
  background: var(--azul-mar); color: white;
  border: none; padding: 10px 22px; border-radius: 30px;
  font-family: var(--font-body); font-size: 11px;
  font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background 0.25s;
  white-space: nowrap;
}
.btn-act:hover { background: var(--turquesa); }

/* Ocultar tarjetas filtradas */
.act-card.hidden,
.evento-card.hidden { display: none; }

/* ───────────────────────────────────────────
   RESPONSIVE ACTIVIDADES / EVENTOS
─────────────────────────────────────────── */
@media (max-width: 900px) {
  .banner-inner { grid-template-columns: 1fr; gap: 32px; }
  .act-card.act-grande { grid-column: span 1; flex-direction: column; }
  .act-card.act-grande .act-img { width: 100%; min-height: 170px; }
}
@media (max-width: 768px) {
  .section-hero { padding: 110px 24px 80px; }
  .filters-bar { padding: 16px 20px; }
  .act-grid { padding: 28px 20px 50px; grid-template-columns: 1fr; }
  .eventos-grid { padding: 28px 20px 50px; grid-template-columns: 1fr; }
  .page-intro { padding: 36px 24px 10px; }
  .banner-verano { padding: 40px 24px; }
  .banner-stats { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: 68px; inset-inline: 0; bottom: 0;
    background-color: var(--color-navy);
    display: flex; align-items: center; justify-content: center;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    z-index: 99;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 0.5rem; text-align: center; }
  .nav-link { font-size: 1.1rem; padding: 0.75rem 1.5rem; }
}
@media (max-width: 480px) {
  .banner-stats { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
}

/* ───────────────────────────────────────────
   RESPONSIVE ACTIVIDADES / EVENTOS
─────────────────────────────────────────── */
@media (max-width: 900px) {
  .banner-inner { grid-template-columns: 1fr; gap: 32px; }
  .act-card.act-grande { grid-column: span 1; flex-direction: column; }
  .act-card.act-grande .act-img { width: 100%; min-height: 170px; }
}
@media (max-width: 768px) {
  .section-hero { padding: 110px 24px 80px; }
  .filters-bar { padding: 16px 20px; }
  .act-grid { padding: 28px 20px 50px; grid-template-columns: 1fr; }
  .eventos-grid { padding: 28px 20px 50px; grid-template-columns: 1fr; }
  .page-intro { padding: 36px 24px 10px; }
  .banner-verano { padding: 40px 24px; }
  .banner-stats { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: 68px; inset-inline: 0; bottom: 0;
    background-color: var(--color-navy);
    display: flex; align-items: center; justify-content: center;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    z-index: 99;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 0.5rem; text-align: center; }
  .nav-link { font-size: 1.1rem; padding: 0.75rem 1.5rem; }
}
@media (max-width: 480px) {
  .banner-stats { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
}

/* Layout en dos columnas */
    .contacto-wrapper{
      max-width:1100px;
      margin:0 auto;
      padding:20px;
      display:flex;
      flex-direction:column;
      gap:20px;
    }

    .contacto-imagen{
      width:100%;
      height:auto;
      border-radius:12px;
      object-fit:cover;
    }

    .contacto-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
    }

    .box{
      background:#fff;
      padding:20px;
      border-radius:12px;
      box-shadow:0 2px 10px rgba(0,0,0,0.1);
    }

    @media (max-width:768px){
      .contacto-grid{
        grid-template-columns:1fr;
      }
    }

/* ───────────────────────────────
   FOOTER
─────────────────────────────── */

.site-footer{
background:var(--color-navy);
color:white;
padding:40px 0;
text-align:center;
}

/* ───────────────────────────────
   RESPONSIVE FIX (IMPORTANTE)
─────────────────────────────── */

@media(max-width:768px){

/* MENÚ SIEMPRE VISIBLE EN MÓVIL (SCROLL HORIZONTAL) */
.main-nav{
position:relative;
display:block;
background:none;
transform:none;
}

.main-nav ul{
display:flex;
overflow-x:auto;
gap:8px;
padding:10px;
white-space:nowrap;
}

.nav-link{
flex-shrink:0;
background:rgba(255,255,255,0.08);
font-size:12px;
}

.nav-toggle{
display:none;
}

/* LAYOUTS MÓVIL */
.contacto-contenedor{
grid-template-columns:1fr;
}

.hero{
min-height:70vh;
}

}

/* ───────────────────────────────
   FIX ESPACIADO HEADER
─────────────────────────────── */

main{
margin-top:80px;
}

@media(max-width:768px){
main{margin-top:100px;}
}