/* =========================================================
   THE WILD BUNCH BARCELONA · Business Lounge Club
   Hoja de estilos principal
   Línea gráfica tomada del Dossier del club 2026:
   paleta limitada a los colores del logotipo (rojo y azul marino sobre blanco)
   más el verde del capítulo El club,
   titulares condensados en mayúsculas y subtítulos en serif cursiva.
   ========================================================= */

/* ---------- Tipografías (alojadas en el propio servidor) ---------- */
@font-face { font-family: "Oswald"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }

/* Diseño: capítulos a sangre, cada uno con el color de su sección del dossier;
   papel blanco para el texto, bandas de color para las cabeceras. */
:root {
  --rojo: #aa0837;          /* rojo del logotipo */
  --rojo-logo: #aa0837;
  --marino: #24344c;        /* azul marino del logotipo */
  --marino-hondo: #1a2638;  /* marino oscurecido para fondos de foto y agenda */
  --verde: #23473a;         /* verde del capítulo El club */
  --papel: #ffffff;
  --niebla: #e6e7ea;        /* gris frío de la portada del dossier */
  --tinta: #1c2433;         /* texto principal, marino casi negro */
  --tinta-suave: #5a6170;
  --linea: #d4d6dc;

  --f-titular: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --f-texto: "EB Garamond", Garamond, "Times New Roman", serif;

  --ancho: 1200px;
  --lectura: 38rem;
  --margen: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* ---------- Tipografía ---------- */
.titular, h1, h2, h3 {
  font-family: var(--f-titular);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); }
h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.subtitulo { font-family: var(--f-texto); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); margin: 0.5rem 0 0; opacity: 0.92; }
.etiqueta { font-family: var(--f-titular); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
p { margin: 0 0 1em; }
.texto { max-width: var(--lectura); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(6px);
}
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 68px; }
.cabecera .logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.6rem); }
.menu a { font-family: var(--f-titular); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--marino); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--rojo); }
.boton-socios {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-titular); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--papel) !important; background: var(--marino);
  padding: 0.65rem 1rem !important; border: 0 !important;
}
.boton-socios:hover { background: var(--rojo); }
.boton-socios svg { width: 14px; height: 14px; }
.menu-movil { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--marino); }
.menu-movil svg { width: 28px; height: 28px; }

@media (max-width: 1180px) {
  .menu-movil { display: block; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--papel); border-bottom: 1px solid var(--linea); padding: 0.5rem var(--margen) 1.25rem; display: none; }
  .menu.abierto { display: flex; }
  .menu a { padding-block: 0.85rem; border-bottom: 1px solid var(--linea); }
  .menu .boton-socios { margin-top: 1rem; justify-content: center; }
}

/* ---------- Portada ---------- */
.portada { position: relative; background: var(--marino-hondo); color: var(--papel); overflow: hidden; }
.portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.portada .contenedor > * { text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 0 28px rgba(0,0,0,0.75); }
.portada .boton { text-shadow: none; }
.portada .contenedor { position: relative; z-index: 1; padding-block: clamp(5rem, 12vw, 9.5rem) clamp(4rem, 9vw, 7rem); display: grid; gap: 1.5rem; }
.portada .etiqueta { color: var(--papel); }
.portada h1 { font-size: clamp(3.2rem, 1.8rem + 6.5vw, 6.8rem); line-height: 0.92; max-width: 10ch; color: var(--papel); }
.portada .portada-sub { margin: -0.4rem 0 0; font-family: var(--f-titular); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(1rem, 0.85rem + 0.7vw, 1.45rem); color: var(--papel); }
.portada h1 span { color: var(--rojo); display: block; }
.portada .lema { font-style: normal; font-weight: 500; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.45; max-width: 31rem; margin: 0.4rem 0 0; padding: 0.9rem 1.1rem; background: rgba(0,0,0,0.55); border-left: 3px solid var(--rojo); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-shadow: none; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.75rem; }
.boton { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-titular); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0.95rem 1.4rem; border: 1px solid currentColor; transition: background .2s, color .2s; }
.boton.lleno { background: var(--rojo); border-color: var(--rojo); color: var(--papel); }
.boton.lleno:hover { background: var(--rojo-logo); }
.boton.hueco { color: var(--papel); background: rgba(0,0,0,0.35); }
.boton.hueco:hover { background: var(--papel); color: var(--tinta); }

/* Diana del logo como motivo gráfico */
.diana { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--marino) 0 14%, var(--papel) 14% 22%, var(--rojo-logo) 22% 39%, var(--papel) 39% 56%, var(--marino) 56% 100%); pointer-events: none; }

/* ---------- Índice de capítulos ---------- */
.indice { display: grid; grid-template-columns: repeat(5, 1fr); }
.indice a { display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; min-height: 9.5rem; padding: 1.3rem 1.2rem 1.1rem; color: var(--papel); text-decoration: none; transition: filter .2s; }
.indice a:hover { filter: brightness(1.12); }
.indice .num { font-family: var(--f-titular); font-size: 2.4rem; line-height: 1; align-self: flex-end; }
.indice strong { font-family: var(--f-titular); font-weight: 600; text-transform: uppercase; font-size: 1.35rem; line-height: 1; display: block; }
.indice em { font-size: 0.98rem; }
@media (max-width: 900px) { .indice { grid-template-columns: 1fr; } .indice a { min-height: 0; flex-direction: row; align-items: center; padding-block: 1rem; } }

.c-rojo { background: var(--rojo); } .c-marino { background: var(--marino); } .c-verde { background: var(--verde); }


/* ---------- Capítulo (cabecera de sección en banda de color) ---------- */
.capitulo-cab { position: relative; color: var(--papel); overflow: hidden; }
.capitulo-cab .contenedor { position: relative; z-index: 1; padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; }
.capitulo-cab .num { font-family: var(--f-titular); font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); line-height: 1; opacity: 0.9; }
.capitulo-cab .miga { grid-column: 1 / -1; color: rgba(255,255,255,0.75); }
.capitulo-cab .circulo { position: absolute; right: -6vw; bottom: -40%; width: min(46vw, 520px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.07); }

.capitulo { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* ---------- 01 The Wild Bunch ---------- */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }
.capitular::first-letter { font-family: var(--f-titular); float: left; font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--rojo); }
.foto-marco { position: relative; }
.foto-marco img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto-marco figcaption { font-style: italic; font-size: 0.95rem; color: var(--tinta-suave); margin-top: 0.6rem; }
.foto-pila { display: grid; gap: 1rem; }
.foto-pila img:first-child { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.foto-pila img:last-child { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.lema-banda { background: var(--rojo); color: var(--papel); }
.lema-banda .contenedor { padding-block: clamp(2.8rem, 6vw, 4.5rem); }
.lema-banda blockquote { margin: 0; font-family: var(--f-titular); font-weight: 600; text-transform: uppercase; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.9rem); line-height: 1; max-width: 18ch; }
.lema-banda cite { display: block; margin-top: 1.1rem; font-family: var(--f-texto); font-style: italic; font-size: 1.15rem; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); margin-top: clamp(2.5rem, 6vw, 4rem); }
.cifras div { padding: 1.4rem 1rem 0 0; }
.cifras strong { display: block; font-family: var(--f-titular); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; color: var(--rojo); font-variant-numeric: tabular-nums; }
.cifras span { font-style: italic; color: var(--tinta-suave); font-size: 1rem; }
@media (max-width: 700px) { .cifras { grid-template-columns: 1fr 1fr; row-gap: 1rem; } }

/* ---------- 02 El fundador ---------- */
.fundador { background: var(--marino); color: var(--papel); }
.fundador .dos-columnas { align-items: center; }
.fundador img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.fundador .cita { font-style: italic; font-size: 1.35rem; border-left: 3px solid var(--rojo-logo); padding-left: 1.1rem; margin: 1.6rem 0; }
.fundador a.mas { font-family: var(--f-titular); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid currentColor; }
.desplegable[hidden] { display: none !important; }

/* ---------- 03 El club / Espacios ---------- */
.galeria-club { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vw, 230px); gap: 6px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.galeria-club img { width: 100%; height: 100%; object-fit: cover; }
.galeria-club .ancha { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) { .galeria-club { grid-template-columns: 1fr 1fr; } .galeria-club .ancha { grid-column: span 2; grid-row: span 1; } }

.espacios { display: grid; gap: clamp(3rem, 6vw, 4.5rem); margin-top: clamp(3rem, 7vw, 5rem); }
.espacio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.espacio:nth-child(even) .espacio-foto { order: 2; }
.espacio-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.espacio h3 { color: var(--verde); }
.espacio .subtitulo { color: var(--tinta-suave); }
.lista-puntos { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.lista-puntos li { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--linea); font-size: 1.02rem; line-height: 1.3; }
.lista-puntos li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--verde); box-shadow: inset 0 0 0 1.5px var(--papel), inset 0 0 0 4px var(--verde); transform: translateY(1px); }
.medidas { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; font-family: var(--f-titular); letter-spacing: 0.08em; font-size: 0.92rem; color: var(--verde); margin-top: 1rem; }
@media (max-width: 860px) { .espacio { grid-template-columns: 1fr; } .espacio:nth-child(even) .espacio-foto { order: 0; } }
@media (max-width: 480px) { .lista-puntos { grid-template-columns: 1fr; } }

.aviso-alquiler { background: var(--niebla); margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.aviso-alquiler h3 { color: var(--verde); }
.aviso-alquiler p { margin: 0.6rem 0 0; }
.aviso-alquiler .boton { color: var(--verde); }
.aviso-alquiler .boton:hover { background: var(--verde); color: var(--papel); }
@media (max-width: 760px) { .aviso-alquiler { grid-template-columns: 1fr; } }

/* ---------- 04 Temporada ---------- */
.temporada { background: var(--marino-hondo); color: var(--papel); }
.temporada .intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.temporada h3 { color: var(--papel); }
@media (max-width: 860px) { .temporada .intro { grid-template-columns: 1fr; } }

.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.2rem; }
.filtro { font-family: var(--f-titular); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 0.85rem; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: var(--papel); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--rojo); color: var(--papel); border-color: var(--rojo); }

.agenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.6rem); margin-top: 2rem; }
.evento { display: flex; flex-direction: column; gap: 0.75rem; }
.evento .poster { position: relative; aspect-ratio: 5 / 7; overflow: hidden; background: var(--marino); }
.evento .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.evento:hover .poster img { transform: scale(1.03); }
.evento .fecha { position: absolute; left: 0; top: 0; background: var(--papel); color: var(--tinta); padding: 0.45rem 0.6rem 0.4rem; text-align: center; min-width: 3.6rem; font-family: var(--f-titular); }
.evento .fecha b { display: block; font-weight: 600; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.evento .fecha small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.evento .cat { display: inline-block; align-self: flex-start; font-family: var(--f-titular); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.22rem 0.5rem; color: var(--papel); background: var(--rojo); }
.evento h4 { font-family: var(--f-titular); font-weight: 600; text-transform: uppercase; font-size: 1.32rem; line-height: 1.05; margin: 0; color: var(--papel); }
.evento p { font-size: 1rem; line-height: 1.4; margin: 0; color: rgba(255,255,255,0.72); }
.evento .cuando { font-style: italic; font-size: 0.98rem; color: var(--papel); }
.evento.pasado { display: none !important; }
.evento.pasado .fecha::after { content: "Celebrado"; display: block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; color: var(--rojo); }


.nota-reservas { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.18); font-style: italic; color: rgba(255,255,255,0.72); }
.nota-reservas a { color: var(--papel); }

/* ---------- 05 Correspondencias ---------- */
.clubes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.club-hermano img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.club-hermano h3 { color: var(--marino); margin-top: 1rem; font-size: 1.7rem; }
.club-hermano .subtitulo { font-size: 1.05rem; color: var(--tinta-suave); }
.club-hermano p { font-size: 1.02rem; margin-top: 0.6rem; }
.nuevo { display: inline-block; font-family: var(--f-titular); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--rojo); color: var(--papel); padding: 0.2rem 0.45rem; vertical-align: middle; margin-left: 0.4rem; }
@media (max-width: 860px) { .clubes { grid-template-columns: 1fr; } }

.acuerdos-titulo { margin-top: clamp(3.5rem, 7vw, 5rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; border-bottom: 2px solid var(--marino); padding-bottom: 0.9rem; }
.acuerdos-titulo h3 { color: var(--marino); }
.acuerdos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1.8rem 1.2rem; margin-top: 1.8rem; }
.acuerdo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.acuerdo h4 { font-family: var(--f-titular); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; margin: 0.7rem 0 0.15rem; color: var(--tinta); }
.acuerdo p { margin: 0; font-style: italic; font-size: 0.98rem; color: var(--rojo); line-height: 1.3; }
.acuerdo .lugar { color: var(--tinta-suave); font-style: normal; font-size: 0.9rem; }

.afiliate { background: var(--marino); color: var(--papel); padding: clamp(1.8rem, 4vw, 2.6rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.afiliate h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.afiliate a { font-style: italic; font-size: 1.15rem; }

/* ---------- Prensa ---------- */
.prensa { background: var(--niebla); }
.prensa h2 { color: var(--marino); }
.medios { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.medios li { font-family: var(--f-titular); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); color: var(--marino); }
.medios li:nth-child(3n+2) { font-family: var(--f-texto); font-style: italic; text-transform: none; letter-spacing: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem); color: var(--rojo); }
.recortes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.recorte { padding: 0; border: 0; background: var(--papel); cursor: zoom-in; text-align: left; box-shadow: 0 1px 2px rgba(29,34,43,.12), 0 8px 24px -12px rgba(29,34,43,.35); transition: transform .25s; font: inherit; color: inherit; }
.recorte:hover { transform: translateY(-3px); }
.recorte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.recorte span { display: block; padding: 0.7rem 0.9rem 0.8rem; font-family: var(--f-titular); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marino); }

.visor { position: fixed; inset: 0; z-index: 100; background: rgba(26,38,56,0.96); display: flex; align-items: center; justify-content: center; padding: 3.5rem var(--margen) 2rem; }
.visor img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.visor button { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.8rem); right: 1rem; background: none; border: 1px solid rgba(255,255,255,.5); color: var(--papel); font-family: var(--f-titular); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0.8rem; cursor: pointer; }

/* ---------- ¿Quieres ser soci@? ---------- */
.hazte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--niebla); }
.hazte .foto { background: var(--niebla); }
.hazte .foto img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.hazte .texto-hazte { padding: clamp(2.5rem, 6vw, 5rem) var(--margen); display: flex; flex-direction: column; justify-content: center; gap: 1rem; max-width: 40rem; }
.hazte h2 { color: var(--rojo); }
.datos-contacto { border-top: 1px solid var(--tinta); padding-top: 1.2rem; margin-top: 0.8rem; font-size: 1.08rem; line-height: 1.6; }
.datos-contacto a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.datos-contacto a:hover { border-bottom-color: var(--rojo); }
@media (max-width: 820px) { .hazte { grid-template-columns: 1fr; } .hazte .foto img { min-height: 0; aspect-ratio: 16 / 10; } }

/* ---------- Pie ---------- */
.pie { background: var(--marino); color: #d9dee7; font-size: 1rem; }
.pie .contenedor { padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.pie img { height: 46px; width: auto; }
.pie h5 { font-family: var(--f-titular); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.8rem; color: var(--papel); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--papel); text-decoration: underline; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.9rem; color: #aab4c4; }
.pie .lema-pie { font-style: italic; margin-top: 1rem; max-width: 22rem; }
.redes { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.redes a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.3); display: grid; place-items: center; }
.redes a:hover { background: var(--rojo); border-color: var(--rojo); }
.redes svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 760px) { .pie .contenedor { grid-template-columns: 1fr; } }

/* ---------- Páginas interiores (legal, socios) ---------- */
.pagina-simple { padding-block: clamp(3rem, 7vw, 5rem); }
.pagina-simple h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); color: var(--marino); }
.pagina-simple h2 { font-size: 1.6rem; color: var(--rojo); margin: 2.2rem 0 0.8rem; }
.pendiente { background: #fff3c4; padding: 0 0.25em; }

/* ---------- Área de socios ---------- */
.socios-pagina { min-height: 100vh; display: flex; flex-direction: column; background: var(--niebla); }
.socios-cab { background: var(--marino); color: var(--papel); }
.socios-cab .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.socios-cab img { height: 40px; width: auto; }
.socios-cab a.volver { font-family: var(--f-titular); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: #d9dee7; }
.socios-cab a.volver:hover { color: var(--papel); }
.socios-main { flex: 1; position: relative; overflow: hidden; }
.socios-main .diana { width: 520px; height: 520px; right: -170px; bottom: -170px; opacity: 1; }

.acceso { position: relative; z-index: 1; max-width: 30rem; margin: clamp(3rem, 9vw, 6rem) auto; padding-inline: var(--margen); }
.acceso .tarjeta { background: var(--papel); padding: clamp(1.8rem, 5vw, 2.8rem); box-shadow: 0 20px 50px -25px rgba(29,34,43,.45); }
.acceso h1 { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); color: var(--marino); }
.acceso .subtitulo { color: var(--tinta-suave); }
.campo { display: grid; gap: 0.45rem; margin-top: 1.8rem; }
.campo label { font-family: var(--f-titular); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--marino); }
.campo input { font: inherit; font-size: 1.15rem; padding: 0.8rem 0.9rem; border: 1px solid #b9bec9; background: var(--papel); color: var(--tinta); width: 100%; }
.campo input:focus { outline: 2px solid var(--marino); outline-offset: 0; border-color: var(--marino); }
.acceso .boton { margin-top: 1.4rem; width: 100%; justify-content: center; cursor: pointer; font-size: 0.95rem; }
.error { margin-top: 1.1rem; padding: 0.75rem 0.9rem; background: #fbe8ed; color: var(--rojo); border-left: 3px solid var(--rojo); font-size: 1rem; }
.ayuda { margin-top: 1.4rem; font-size: 0.98rem; font-style: italic; color: var(--tinta-suave); }

.documentos-zona { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 4rem); }
.documentos-zona .saludo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.documentos-zona h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); color: var(--marino); }
.salir { font-family: var(--f-titular); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); text-decoration: none; border-bottom: 1px solid currentColor; }
.documentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.documento { background: var(--papel); display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); box-shadow: 0 1px 2px rgba(29,34,43,.1); transition: transform .2s, box-shadow .2s; }
.documento:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(29,34,43,.5); }
.documento .banda { color: var(--papel); padding: 1.1rem 1.1rem 1rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; min-height: 7.5rem; }
.documento .banda strong { font-family: var(--f-titular); font-weight: 600; text-transform: uppercase; font-size: 1.55rem; line-height: 1; }
.documento .banda .num { font-family: var(--f-titular); font-size: 1.6rem; line-height: 1; }
.documento .info { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.documento .info p { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.documento .descarga { margin-top: auto; font-family: var(--f-titular); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); display: flex; justify-content: space-between; }
.documento .descarga small { color: var(--tinta-suave); letter-spacing: 0.06em; }
.confidencial { margin-top: 2.5rem; font-style: italic; color: var(--tinta-suave); max-width: 40rem; }

/* Móvil: agenda, acuerdos y prensa a dos columnas para acortar la página */
@media (max-width: 560px) {
  .agenda, .acuerdos, .recortes { grid-template-columns: 1fr 1fr; gap: 1.4rem 0.8rem; }
  .evento h4 { font-size: 1.05rem; }
  .evento p { display: none; }
  .evento .cuando { font-size: 0.88rem; }
  .acuerdo h4 { font-size: 0.92rem; }
  .acuerdo p { font-size: 0.88rem; }
  .recorte span { font-size: 0.68rem; padding: 0.5rem 0.6rem; }
}

/* ---------- Tarifas 2026 (estilo del documento "Membership & Partnerships") ---------- */
.tarifas { position: relative; overflow: hidden; background: var(--papel); border-top: 6px solid var(--rojo); }
.tarifas-diana { width: 420px; height: 420px; right: -140px; top: -120px; }
.tarifas .contenedor { position: relative; z-index: 1; }
.tarifas-titulo { margin-top: 0.6rem; color: var(--marino); }
.tarifas-titulo span { color: var(--rojo); }
.tarifas-intro { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px solid var(--rojo); max-width: 34rem; }
.tarifas-sub { display: flex; align-items: baseline; gap: 0.8rem; color: var(--marino); margin-top: clamp(2.8rem, 6vw, 4rem); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.tarifas-sub span { color: var(--rojo); font-size: 0.8em; }
.nota-tarifa { color: var(--tinta-suave); font-size: 1.02rem; margin: 0.6rem 0 0; max-width: 40rem; }

.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.plan { border: 1px solid var(--linea); border-top: 4px solid var(--marino); padding: 1.5rem 1.4rem 1.6rem; background: var(--papel); display: flex; flex-direction: column; }
.plan.destacado { border-top-color: var(--rojo); }
.plan h4 { font-family: var(--f-titular); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; color: var(--marino); }
.precio { margin: 0.7rem 0 1rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.precio b { font-family: var(--f-titular); font-weight: 600; font-size: clamp(2.6rem, 2rem + 1.8vw, 3.4rem); line-height: 1; color: var(--rojo); font-variant-numeric: tabular-nums; }
.precio span { font-style: italic; color: var(--tinta-suave); font-size: 1rem; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.plan li { position: relative; padding-left: 1.2rem; font-size: 1.02rem; line-height: 1.4; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--marino); }
@media (max-width: 900px) { .planes { grid-template-columns: 1fr; } }

.condiciones { margin-top: 1.4rem; background: var(--marino); color: var(--papel); padding: 1.3rem 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 2rem; align-items: baseline; }
.condiciones h4 { font-family: var(--f-titular); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; white-space: nowrap; }
.condiciones p { margin: 0; font-size: 1.02rem; }
@media (max-width: 700px) { .condiciones { grid-template-columns: 1fr; } }

.ventajas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem 3rem; margin-top: clamp(3rem, 6vw, 4rem); padding: clamp(1.6rem, 4vw, 2.4rem); background: var(--niebla); }
.ventajas ol { list-style: none; counter-reset: v; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.ventajas li { counter-increment: v; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); font-size: 1.02rem; line-height: 1.35; }
.ventajas li::before { content: counter(v, decimal-leading-zero); font-family: var(--f-titular); font-weight: 600; color: var(--rojo); }
@media (max-width: 860px) { .ventajas { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ventajas ol { grid-template-columns: 1fr; } }

.tarifas-tablas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .tarifas-tablas { grid-template-columns: 1fr; } }
.tabla-scroll { overflow-x: auto; margin-top: 1.2rem; }
.tabla { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.tabla thead th { font-family: var(--f-titular); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--papel); background: var(--marino); text-align: right; padding: 0.7rem 0.8rem; white-space: nowrap; }
.tabla thead th:first-child { text-align: left; }
.tabla tbody th { text-align: left; font-weight: 400; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--linea); line-height: 1.3; }
.tabla tbody th small { display: block; font-style: italic; color: var(--tinta-suave); font-size: 0.88rem; }
.tabla td { text-align: right; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--linea); font-family: var(--f-titular); font-weight: 500; color: var(--rojo); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tabla tbody tr:nth-child(even) { background: #f4f4f6; }

.tarifas-cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 2px solid var(--rojo); padding-top: 1.4rem; }
.tarifas-cta p { margin: 0; font-style: italic; font-size: 1.2rem; }
@media (max-width: 700px) {
  .tarifas-diana { width: 190px; height: 190px; right: -80px; top: -70px; }
  .tabla thead th { letter-spacing: 0.06em; padding-inline: 0.5rem; }
}
@media (max-width: 700px) {
}