/* ==========================================================================
   Gimnasia Acrobática Madrid — hoja de estilos principal
   Sistema de diseño con variables, tarjetas con profundidad 3D en CSS puro
   (sin librerías), animaciones ligeras y diseño responsive.
   ========================================================================== */

/* --------------------------------------------------------------------- */
/* Tipografías alojadas en el propio servidor.                            */
/* No se llama a Google Fonts: eso ahorra dos conexiones externas (DNS +  */
/* TLS), que en 4G con poca cobertura son fácilmente medio segundo o más  */
/* antes de que se pinte el primer texto. Inter es variable: un solo      */
/* archivo cubre todos los grosores.                                      */
/* --------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/poppins-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Paleta: índigo profundo (confianza, deporte serio) + oro de medalla
     (podio, logro). Sin rosa en ninguna parte. */
  --color-primary: #4338ca;
  --color-primary-light: #6d5cf5;
  --color-primary-dark: #2a2183;
  --color-accent: #f5a524;
  --color-accent-dark: #d98600;
  --color-secondary: var(--color-accent); /* alias heredado */
  --color-ink: #0e1030;
  --color-ink-soft: #1b1d46;
  --color-text: #3b3a4d;
  --color-text-muted: #6b6a80;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f6fb;
  --color-border: #e6e5f0;
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  /* Sombras en capas: una sombra sola se ve plana; tres capas con distinto
     desenfoque imitan cómo cae la luz real y es lo que da el aspecto caro.
     Cuestan lo mismo de pintar que una sola. */
  --shadow-sm: 0 1px 2px rgba(14,16,48,.05), 0 3px 10px rgba(14,16,48,.05);
  --shadow-md: 0 2px 4px rgba(14,16,48,.04), 0 8px 20px rgba(14,16,48,.07), 0 18px 44px rgba(14,16,48,.07);
  --shadow-lg: 0 4px 8px rgba(14,16,48,.05), 0 16px 36px rgba(14,16,48,.10), 0 36px 80px rgba(14,16,48,.13);
  --shadow-glow: 0 10px 24px -8px rgba(67,56,202,.45), 0 22px 48px -18px rgba(67,56,202,.5);
  --shadow-gold: 0 10px 24px -8px rgba(245,165,36,.45);
  --container: 1220px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

/* -------------------------------------------------------------------- */
/* Reset ligero                                                          */
/* -------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-heading); color: var(--color-ink); line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; }
button{ font-family: inherit; cursor:pointer; }
.gam-container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute !important; width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); }
.gam-skip-link{ position:fixed; top:-100px; left:12px; background:var(--color-ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:9999; transition: top .2s; }
.gam-skip-link:focus{ top:12px; }

/* -------------------------------------------------------------------- */
/* Botones                                                                */
/* -------------------------------------------------------------------- */
.gam-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:.98rem;
  border:2px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.gam-btn-lg{ padding:17px 32px; font-size:1.05rem; }
.gam-btn-sm{ padding:10px 18px; font-size:.88rem; }
.gam-btn-primary{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary) 55%, var(--color-primary-dark));
  color:#fff; box-shadow: var(--shadow-glow);
}
/* Destello que cruza el botón al pasar el ratón. Es un pseudo-elemento que se
   mueve con transform, así que lo anima la GPU: no repinta nada de la página. */
.gam-btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events:none;
}
.gam-btn-primary:hover::after{ left:130%; }
.gam-btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px -8px rgba(67,56,202,.5), 0 30px 60px -18px rgba(67,56,202,.55); }
.gam-btn-gold{ background: linear-gradient(135deg,#ffc24d, var(--color-accent) 55%, var(--color-accent-dark)); color:#3a2500; box-shadow: var(--shadow-gold); }
.gam-btn-gold:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px -8px rgba(245,165,36,.55); }
.gam-btn-light{ background:#fff; color: var(--color-primary); box-shadow: var(--shadow-md); }
.gam-btn-light:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gam-btn-ghost{ background: rgba(255,255,255,.7); border-color: var(--color-border); color: var(--color-ink); }
.gam-btn-ghost:hover{ border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.gam-btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.55); color:#fff; }
.gam-btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color:#fff; transform: translateY(-2px); }
.gam-link-arrow{ font-weight:600; color: var(--color-primary); display:inline-flex; gap:6px; transition: gap .2s var(--ease); }
.gam-link-arrow:hover{ gap:12px; }

.gam-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color: var(--color-primary); background: rgba(67,56,202,.07); border:1px solid rgba(67,56,202,.12);
  padding:6px 15px; border-radius:999px; margin-bottom:16px;
}
.gam-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--color-accent); flex:none; }
.gam-eyebrow-light{ color:#fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
.gam-eyebrow-gold{ color: var(--color-accent-dark); background: rgba(245,165,36,.12); border-color: rgba(245,165,36,.28); }
.gam-eyebrow-gold::before{ background: var(--color-accent-dark); }

/* -------------------------------------------------------------------- */
/* Header                                                                 */
/* -------------------------------------------------------------------- */
.gam-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.gam-header.is-scrolled{ border-color: var(--color-border); box-shadow: 0 6px 24px rgba(14,16,48,.06); }
.gam-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px; }
.gam-logo{ display:flex; align-items:center; flex-shrink:0; }
/* Cubrimos tanto el <img> directo como el que envuelve the_custom_logo(). */
.gam-logo img,
.gam-logo .custom-logo,
.gam-logo .custom-logo-link img{ max-height:68px; width:auto; height:auto; display:block; }
.gam-logo .custom-logo-link{ display:flex; align-items:center; line-height:0; }
.gam-logo-text{ font-family: var(--font-heading); font-weight:700; font-size:1.3rem; color: var(--color-ink); }

.gam-menu{ display:flex; align-items:center; gap:18px; }
.gam-menu a{ font-weight:600; font-size:.92rem; color: var(--color-text); position:relative; padding:6px 0; white-space:nowrap; }
.gam-menu a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--color-primary);
  transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease);
}
.gam-menu a:hover{ color: var(--color-ink); }
.gam-menu a:hover::after{ transform: scaleX(1); transform-origin: left; }
.gam-menu .current-menu-item > a{ color: var(--color-primary); }

.gam-header-actions{ display:flex; align-items:center; gap:16px; }
.gam-header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; color: var(--color-ink); }
.gam-header-phone svg{ color: var(--color-primary); }

.gam-nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:0; padding:0; }
.gam-nav-toggle span{ display:block; height:2px; width:24px; background: var(--color-ink); border-radius:2px; transition: transform .3s var(--ease), opacity .2s; }
.gam-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.gam-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.gam-nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.gam-nav-overlay{ position:fixed; inset:0; background: rgba(14,16,48,.4); opacity:0; pointer-events:none; transition:opacity .3s; z-index:98; }
.gam-nav-overlay.is-visible{ opacity:1; pointer-events:auto; }

/* -------------------------------------------------------------------- */
/* Hero — con capas 3D (paralaje ligero por CSS + un poco de JS nativo)  */
/* -------------------------------------------------------------------- */
.gam-hero{ position:relative; padding: 84px 0 64px; overflow:hidden; }
.gam-hero-bg{
  position:absolute; inset:-10% -10% auto -10%; height:130%;
  background:
    radial-gradient(55% 50% at 88% 6%, rgba(245,165,36,.16), transparent 62%),
    radial-gradient(55% 55% at 2% 14%, rgba(67,56,202,.16), transparent 62%),
    radial-gradient(70% 45% at 50% 100%, rgba(109,92,245,.08), transparent 70%);
  z-index:-1;
}
.gam-hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
.gam-hero-lead{ font-size:1.15rem; color: var(--color-text-muted); max-width:520px; }
.gam-hero h1{ font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight:700; max-width:620px; letter-spacing:-.02em; }
.gam-hero h1 .gam-hl{ position:relative; white-space:nowrap; }
/* Subrayado de trazo grueso bajo la palabra clave: color de acento sin
   invadir el texto, que sigue leyéndose en negro. */
.gam-hero h1 .gam-hl::after{
  content:''; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.32em;
  background: linear-gradient(90deg, rgba(245,165,36,.45), rgba(245,165,36,.18));
  border-radius:4px; z-index:-1;
}
.gam-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin: 28px 0 24px; }
.gam-hero-badges{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.gam-hero-badges li{ font-size:.86rem; font-weight:600; color: var(--color-text-muted); display:flex; align-items:center; gap:8px; }
.gam-hero-badges li::before{
  content:''; width:16px; height:16px; flex:none; border-radius:50%;
  background: var(--color-accent);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* Visual con perspectiva 3D real: perspective + rotate en hover/movimiento */
.gam-hero-visual{
  position:relative; perspective: 1400px;
}
.gam-hero-visual-img{
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transform: rotateY(-9deg) rotateX(5deg);
  position:relative; z-index:1;
}
/* Dos marcos por detrás, desplazados y girados igual: es lo que da la
   sensación de profundidad de verdad, como una foto sobre otras dos. */
.gam-hero-visual-layer--back{
  position:absolute; inset: 7% -7% -7% 7%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary) 60%, var(--color-accent));
  border-radius: var(--radius-xl);
  opacity:.22;
  transform: rotateY(-9deg) rotateX(5deg) translateZ(-60px);
  z-index:-1;
}
.gam-hero-visual-layer--mid{
  position:absolute; inset: 3.5% -3.5% -3.5% 3.5%;
  border:1.5px solid rgba(67,56,202,.22); border-radius: var(--radius-xl);
  transform: rotateY(-9deg) rotateX(5deg) translateZ(-30px);
  z-index:0;
}
.gam-hero-visual-glow{
  position:absolute; width:62%; height:62%; right:-12%; bottom:-14%;
  background: radial-gradient(circle, rgba(245,165,36,.30), transparent 70%);
  filter: blur(12px); z-index:-1;
}
/* Chapa flotante sobre la foto: refuerza la oferta justo donde mira el ojo. */
.gam-hero-chip{
  position:absolute; left:-26px; bottom:26px; z-index:2;
  display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:18px; padding:12px 18px 12px 14px;
  box-shadow: var(--shadow-lg); border:1px solid var(--color-border);
}
.gam-hero-chip-icon{
  width:38px; height:38px; border-radius:12px; flex:none;
  background: linear-gradient(135deg,#ffc24d, var(--color-accent-dark));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
}
.gam-hero-chip b{ display:block; font-family: var(--font-heading); color: var(--color-ink); font-size:.95rem; line-height:1.2; }
.gam-hero-chip span{ font-size:.78rem; color: var(--color-text-muted); }

/* Efecto "tilt" al mover el ratón: la clase la controla assets/js/main.js
   fijando --rx / --ry; en móvil no se activa (no hay mousemove) así que
   no penaliza rendimiento ni batería. */
.gam-tilt{ --rx: 0deg; --ry: 0deg; }
.gam-tilt .gam-hero-visual-img,
.gam-hero-visual.gam-tilt-active .gam-hero-visual-img{
  transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(-8deg + var(--ry)));
}

/* -------------------------------------------------------------------- */
/* Barra de estadísticas                                                  */
/* -------------------------------------------------------------------- */
.gam-stats-bar{ padding: 8px 0 46px; }
.gam-stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:20px;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(245,165,36,.20), transparent 55%),
    linear-gradient(135deg, var(--color-ink-soft), var(--color-ink) 65%);
  border-radius: var(--radius-lg); padding: 34px 24px; box-shadow: var(--shadow-lg);
  position:relative; overflow:hidden;
}
/* Borde superior luminoso de 1px: el detalle que separa una caja oscura
   normal de una que parece de cristal. */
.gam-stats-grid::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}
.gam-stat{ text-align:center; color:#fff; display:flex; flex-direction:column; gap:6px; position:relative; }
.gam-stat + .gam-stat::before{ content:''; position:absolute; left:-10px; top:14%; bottom:14%; width:1px; background: rgba(255,255,255,.10); }
.gam-stat-num{ font-family: var(--font-heading); font-weight:700; font-size:2.25rem; background: linear-gradient(120deg,#fff 35%,#ffd68a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gam-stat span:last-child{ font-size:.85rem; color:#b9b8d4; }

/* -------------------------------------------------------------------- */
/* Sección "Quiénes somos"                                               */
/* -------------------------------------------------------------------- */
.gam-about{ padding: 70px 0; }
.gam-about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center; }
.gam-about-visual{ perspective:1400px; }
.gam-about-visual img{ border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transform: rotateY(7deg) rotateX(-2deg); transition: transform .5s var(--ease); }
.gam-about-copy p{ color: var(--color-text-muted); font-size:1.03rem; }

/* Título de sección con una barra de acento encima */
.gam-section-head h2::after,
.gam-about-copy h2::after{
  content:''; display:block; width:56px; height:4px; border-radius:99px; margin:18px 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}
.gam-section-head h2::after{ margin:18px auto 0; }

/* -------------------------------------------------------------------- */
/* Tarjetas (por qué elegirnos, blog, sedes) con profundidad 3D          */
/* -------------------------------------------------------------------- */
.gam-section-head{ text-align:center; max-width:640px; margin: 0 auto 42px; }
.gam-section-head h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }

.gam-cards-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.gam-cards-grid--3{ grid-template-columns: repeat(3,1fr); }

.gam-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transform-style: preserve-3d; perspective: 900px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
/* Luz que entra por la esquina superior al acercarse: aparece con opacidad,
   no con un repintado del fondo. */
.gam-card::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(70% 60% at 100% 0%, rgba(245,165,36,.16), transparent 60%);
  transition: opacity .35s var(--ease);
}
.gam-card:hover::before{ opacity:1; }
.gam-card:hover{ box-shadow: var(--shadow-lg); border-color: rgba(67,56,202,.28); transform: translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.gam-card-icon{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius: 17px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary) 60%, var(--color-primary-dark)); margin-bottom:18px;
  box-shadow: 0 8px 18px -6px rgba(67,56,202,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.gam-card-icon::before{ content:''; width:24px; height:24px; background:#fff; display:block; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.gam-icon-shield::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Z'/></svg>"); }
.gam-icon-heart::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.9-10-9.4C.4 8 2 4.5 5.6 4c2-.3 3.7.6 4.9 2.2C11.7 4.6 13.4 3.7 15.4 4 19 4.5 20.6 8 19 11.6 16.5 16.1 12 21 12 21Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.9-10-9.4C.4 8 2 4.5 5.6 4c2-.3 3.7.6 4.9 2.2C11.7 4.6 13.4 3.7 15.4 4 19 4.5 20.6 8 19 11.6 16.5 16.1 12 21 12 21Z'/></svg>"); }
.gam-icon-bolt::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 3 14h7l-1 8 11-14h-7l1-6Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 3 14h7l-1 8 11-14h-7l1-6Z'/></svg>"); }
.gam-icon-smile::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm-3 4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Zm6 0a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Zm-6.3 4.6h6.6c-.5 1.6-1.8 2.6-3.3 2.6s-2.8-1-3.3-2.6Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm-3 4.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Zm6 0a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Zm-6.3 4.6h6.6c-.5 1.6-1.8 2.6-3.3 2.6s-2.8-1-3.3-2.6Z'/></svg>"); }
.gam-icon-users::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4.2a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Zm8 1a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2ZM9 12.4c3.6 0 6.4 2.2 6.4 5.1V20H2.6v-2.5c0-2.9 2.8-5.1 6.4-5.1Zm8 .4c2.8 0 4.4 1.7 4.4 3.8V20h-4.2v-2.5c0-1.7-.5-3.2-1.5-4.4.4-.2.8-.3 1.3-.3Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4.2a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Zm8 1a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2ZM9 12.4c3.6 0 6.4 2.2 6.4 5.1V20H2.6v-2.5c0-2.9 2.8-5.1 6.4-5.1Zm8 .4c2.8 0 4.4 1.7 4.4 3.8V20h-4.2v-2.5c0-1.7-.5-3.2-1.5-4.4.4-.2.8-.3 1.3-.3Z'/></svg>"); }
.gam-icon-medal::before{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.4 2h3.1l2.2 4.3a7 7 0 0 0-1.9.2L7.4 2Zm6.1 0h3.1l-3.3 4.5c-.4-.1-.8-.2-1.2-.2h-.4L13.5 2ZM12 8.2a6.4 6.4 0 1 1 0 12.8 6.4 6.4 0 0 1 0-12.8Zm0 2.3-1.2 2.5-2.7.4 2 1.9-.5 2.7 2.4-1.3 2.4 1.3-.5-2.7 2-1.9-2.7-.4L12 10.5Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.4 2h3.1l2.2 4.3a7 7 0 0 0-1.9.2L7.4 2Zm6.1 0h3.1l-3.3 4.5c-.4-.1-.8-.2-1.2-.2h-.4L13.5 2ZM12 8.2a6.4 6.4 0 1 1 0 12.8 6.4 6.4 0 0 1 0-12.8Zm0 2.3-1.2 2.5-2.7.4 2 1.9-.5 2.7 2.4-1.3 2.4 1.3-.5-2.7 2-1.9-2.7-.4L12 10.5Z'/></svg>"); }
.gam-card h3{ font-size:1.12rem; margin-bottom:8px; position:relative; z-index:1; }
.gam-card p{ color: var(--color-text-muted); font-size:.94rem; margin:0; position:relative; z-index:1; }

/* -------------------------------------------------------------------- */
/* Sedes                                                                  */
/* -------------------------------------------------------------------- */
.gam-sedes{ padding: 70px 0; background: var(--color-bg-soft); }
.gam-sedes-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; }
.gam-sede-card{ background:#fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gam-sede-card:hover{ transform: translateY(-8px) scale(1.01); box-shadow: var(--shadow-lg); }
.gam-sede-card img{ aspect-ratio: 3/2; object-fit:cover; }
.gam-sede-card-body{ padding:24px 26px; }
.gam-sede-card-body p{ color: var(--color-text-muted); font-size:.94rem; }

/* -------------------------------------------------------------------- */
/* CTA inscripción                                                        */
/* -------------------------------------------------------------------- */
.gam-cta-join{ padding: 30px 0 90px; }
.gam-cta-join-inner{
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(245,165,36,.35), transparent 55%),
    linear-gradient(120deg, var(--color-primary-dark), var(--color-primary) 45%, var(--color-primary-light));
  border-radius: var(--radius-xl); padding: 54px 48px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  box-shadow: var(--shadow-glow); position:relative; overflow:hidden;
}
.gam-cta-join-inner::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background: rgba(255,255,255,.08); right:-100px; top:-120px;
}
.gam-cta-join-inner > *{ position:relative; z-index:1; }
.gam-cta-join-inner h2{ color:#fff; max-width:480px; }
.gam-cta-join-inner p{ color: rgba(255,255,255,.85); max-width:480px; }

/* -------------------------------------------------------------------- */
/* Blog preview / listado                                                */
/* -------------------------------------------------------------------- */
.gam-blog-preview{ padding: 30px 0 90px; }
.gam-blog-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; display:block; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: var(--shadow-sm); }
.gam-blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gam-blog-card-img img{ aspect-ratio: 4/3; object-fit:cover; }
.gam-blog-card-body{ padding:22px 22px 26px; }
.gam-blog-card-body h3{ font-size:1.05rem; }
.gam-blog-card-body p{ color: var(--color-text-muted); font-size:.9rem; margin:0; }

/* -------------------------------------------------------------------- */
/* Páginas internas                                                       */
/* -------------------------------------------------------------------- */
.gam-page-header{ padding: 56px 0 30px; }
.gam-page-header h1{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top:10px; }
.gam-breadcrumbs{ font-size:.85rem; color: var(--color-text-muted); }
.gam-breadcrumbs a{ color: var(--color-primary); font-weight:600; }
.gam-page-content{ padding-bottom: 70px; }
.gam-content-narrow{ max-width: 820px; }
.gam-page-thumb{ border-radius: var(--radius-lg); overflow:hidden; margin-bottom:30px; box-shadow: var(--shadow-md); }
.gam-entry-content{ font-size:1.05rem; line-height:1.75; color: var(--color-text); }
.gam-entry-content h2{ margin-top:1.6em; }
.gam-entry-content h3{ margin-top:1.3em; }
.gam-entry-content img{ border-radius: var(--radius-md); }
.gam-entry-content p{ margin:0 0 1em; }
.gam-entry-content ul, .gam-entry-content ol{ list-style:revert; margin:0 0 1.2em; padding-left:1.4em; }
.gam-entry-content ul li, .gam-entry-content ol li{ margin-bottom:.5em; }
.gam-entry-content table{ width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:.95rem; }
.gam-entry-content table th, .gam-entry-content table td{ border:1px solid var(--color-border, #e3e3ec); padding:.6em .8em; text-align:left; vertical-align:top; }
.gam-entry-content table th{ background:var(--color-bg-alt, #f5f5fa); }
.gam-entry-content a:not(.gam-btn){ color:var(--color-primary); text-decoration:underline; }
.gam-entry-content .gam-btn-primary{ color:#fff; }
.gam-entry-content .gam-btn-light{ color:var(--color-primary); }
.gam-post-meta{ color: var(--color-text-muted); font-size:.9rem; }
.gam-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.gam-tag{ background: var(--color-bg-soft); border-radius:999px; padding:6px 14px; font-size:.82rem; font-weight:600; }
.gam-cta-inline{ margin-top:50px; padding:34px; border-radius: var(--radius-lg); background: var(--color-bg-soft); text-align:center; }
.gam-cta-inline h3{ margin-bottom:16px; }

/* -------------------------------------------------------------------- */
/* Footer                                                                  */
/* -------------------------------------------------------------------- */
.gam-footer{ background: var(--color-ink); color: #c7c6dc; padding: 64px 0 0; }
.gam-footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.gam-footer-brand img{ max-height:44px; margin-bottom:14px; }
.gam-footer-logo-text{ font-family: var(--font-heading); font-weight:700; color:#fff; font-size:1.2rem; }
.gam-footer-brand p{ font-size:.92rem; max-width:300px; }
.gam-social-row{ display:flex; gap:12px; margin-top:16px; }
.gam-social-link{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition: background .25s, transform .25s; }
.gam-social-link:hover{ background: var(--color-primary); transform: translateY(-3px); }
.footer-widget-title{ color:#fff; font-size:1rem; margin-bottom:18px; }
.gam-footer-list li{ margin-bottom:12px; font-size:.92rem; display:flex; flex-direction:column; gap:2px; }
.gam-footer-list a{ font-size:.92rem; }
.gam-footer-list a:hover{ color:#fff; }
.gam-footer-menu li{ margin-bottom:10px; }
.gam-footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 24px; font-size:.82rem; color:#8f8ea8; }
.gam-footer-legal-links a{ color:#8f8ea8; }
.gam-footer-legal-links a:hover{ color:#fff; }

/* -------------------------------------------------------------------- */
/* WhatsApp flotante                                                      */
/* -------------------------------------------------------------------- */
.gam-whatsapp-float{
  position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.6); z-index:90; transition: transform .25s var(--ease);
}
.gam-whatsapp-float:hover{ transform: scale(1.08) translateY(-2px); }

/* -------------------------------------------------------------------- */
/* Barra de cookies                                                       */
/* -------------------------------------------------------------------- */
.gam-cookie-bar{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:640px; margin:0 auto;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding:20px 22px; z-index:200; display:flex; flex-direction:column; gap:14px;
}
.gam-cookie-bar p{ margin:0; font-size:.88rem; color: var(--color-text-muted); }
.gam-cookie-bar a{ color: var(--color-primary); font-weight:600; }
.gam-cookie-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* -------------------------------------------------------------------- */
/* Animación de aparición al hacer scroll (IntersectionObserver en JS)   */
/* -------------------------------------------------------------------- */
/* Solo se esconde si hay JavaScript (clase .gam-js puesta en <head>). Sin JS
   —bloqueador, error de red, móvil con mala cobertura— el contenido se ve
   igualmente: nunca una página en blanco. */
.gam-js .gam-reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--gam-delay, 0ms); }
.gam-js .gam-reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .gam-js .gam-reveal, .gam-reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .gam-hero-visual-img, .gam-about-visual img, .gam-card, .gam-sede-card, .gam-blog-card{ transition:none !important; }
}

/* -------------------------------------------------------------------- */
/* Responsive                                                             */
/* -------------------------------------------------------------------- */
/* En escritorio el número escrito no cabe junto a un menú de 9 enlaces, así que
   solo se deja el icono. En móvil el menú es hamburguesa y hay sitio de sobra,
   y además es donde más se usa: ahí sí se muestra el número. */
.gam-header-phone-txt{ display:none; }
@media (max-width: 1200px){
  .gam-header-phone-txt{ display:inline; font-size:.95rem; }
  .gam-header-phone{ gap:6px; }
}
@media (max-width: 400px){
  .gam-header-phone-txt{ font-size:.85rem; }
}

@media (max-width: 980px){
  .gam-hero-inner{ grid-template-columns:1fr; }
  .gam-hero-visual{ order:-1; max-width:480px; margin:0 auto; }
  .gam-about-grid{ grid-template-columns:1fr; }
  .gam-about-visual{ max-width:480px; margin: 0 auto; }
  .gam-cards-grid{ grid-template-columns: repeat(2,1fr); }
  .gam-cards-grid--3{ grid-template-columns: repeat(2,1fr); }
  .gam-sedes-grid{ grid-template-columns:1fr; }
  .gam-stats-grid{ grid-template-columns: repeat(2,1fr); }
  .gam-footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1200px){
  .gam-main-nav{
    position: fixed; top:0; right:0; height:100vh; width:min(340px,86vw);
    background:#fff; padding: 110px 30px 40px; transform: translateX(100%);
    transition: transform .35s var(--ease); box-shadow: -20px 0 50px rgba(14,16,48,.2); z-index:99;
    overflow-y:auto;
  }
  .gam-main-nav.is-open{ transform: translateX(0); }
  .gam-menu{ flex-direction:column; align-items:flex-start; gap:22px; }
  .gam-menu a{ font-size:1.05rem; }
  .gam-nav-toggle{ display:flex; }
  .gam-header-actions .gam-btn-sm{ display:none; }
}

@media (max-width: 640px){
  .gam-cards-grid, .gam-cards-grid--3{ grid-template-columns:1fr; }
  .gam-stats-grid{ grid-template-columns: repeat(2,1fr); }
  .gam-cta-join-inner{ flex-direction:column; align-items:flex-start; padding:38px 26px; }
  .gam-footer-grid{ grid-template-columns:1fr; }
  .gam-hero{ padding: 60px 0 40px; }
}

/* -------------------------------------------------------------------- */
/* Rendimiento en móvil                                                   */
/* -------------------------------------------------------------------- */
/* El desenfoque de fondo (backdrop-filter) de la cabecera es caro para la
   GPU de los móviles de gama media/baja y se nota al hacer scroll. En
   pantallas pequeñas usamos un fondo sólido: se ve igual de bien y el
   scroll va suave. */
@media (max-width: 900px){
  .gam-header{
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Las sombras muy grandes también cuestan al pintar en móvil. */
@media (max-width: 600px){
  .gam-btn-primary{ box-shadow: 0 8px 20px -6px rgba(67,56,202,.45); }
  .gam-card, .gam-sede-card{ box-shadow: var(--shadow-sm); }
}

/* Si el usuario pide menos animación, la quitamos por completo. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .gam-reveal{ opacity:1 !important; transform:none !important; }
}

.gam-contact-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.gam-contact-actions .gam-btn{ flex:1 1 auto; }
.gam-admin-note{
  margin-top:20px; padding:12px 14px; border-radius:var(--radius-sm);
  background:#fff8e1; border:1px solid #f0d78a; font-size:.85rem; color:#6b5a1e;
}

/* El teléfono de la cabecera nunca debe partirse en varias líneas. */
.gam-header-phone{ white-space: nowrap; }
.gam-header-phone span{ white-space: nowrap; }

/* En móvil el logo se reduce un poco para dejar sitio al teléfono y al menú. */
@media (max-width: 600px){
  .gam-logo img,
  .gam-logo .custom-logo,
  .gam-logo .custom-logo-link img{ max-height:40px; }
}


/* -------------------------------------------------------------------- */
/* Separación entre secciones                                            */
/* -------------------------------------------------------------------- */
/* Las tarjetas con inclinación 3D sobresalen unos píxeles de su caja; sin
   este colchón invadían visualmente la sección siguiente. */
/* .gam-why no tenía padding definido: la sección se ajustaba al alto exacto de
   las tarjetas y, como estas sobresalen unos píxeles por el efecto 3D, se
   metían dentro de 'Dónde entrenamos'. */
.gam-why{ padding: 40px 0 90px; }
.gam-cards-grid{ padding-bottom: 8px; }
.gam-sedes{ padding-top: 80px; }

/* ==================================================================== */
/* Galería                                                              */
/* ==================================================================== */
.gam-galeria{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
  margin: 30px 0 46px;
}
.gam-galeria-item{
  display:block; position:relative; overflow:hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 5;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gam-galeria-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s var(--ease);
}
.gam-galeria-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(14,16,48,.28), rgba(14,16,48,0) 45%);
  opacity:0; transition:opacity .3s;
}
.gam-galeria-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gam-galeria-item:hover img{ transform: scale(1.05); }
.gam-galeria-item:hover::after{ opacity:1; }
.gam-galeria-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:22px 26px; border-radius: var(--radius-md);
  background: var(--color-bg-soft); font-weight:600;
}
@media (max-width: 600px){
  .gam-galeria{ grid-template-columns: repeat(2, 1fr); gap:10px; }
  .gam-galeria-cta{ flex-direction:column; align-items:flex-start; }
}

/* Foto de cabecera de las subpáginas */
.gam-page-foto{ margin: 0 0 32px; }
.gam-page-foto img{
  width:100%; height:auto; display:block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height:440px; object-fit:cover;
}

/* ==================================================================== */
/* Página de contacto                                                   */
/* ==================================================================== */
.gam-contacto{ padding: 10px 0 80px; }
.gam-contacto-grid{
  display:grid; grid-template-columns: 1.25fr .85fr; gap:34px; align-items:start;
}
.gam-form-card{
  background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding:32px;
  box-shadow: var(--shadow-md);
}
.gam-form-card h2{ margin:0 0 6px; font-size:1.5rem; }
.gam-form-intro{ color: var(--color-text-muted); margin-bottom:22px; }
.gam-form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gam-form-campo{ display:block; margin-bottom:14px; }
.gam-form-campo > span{
  display:block; font-size:.86rem; font-weight:600;
  color: var(--color-ink); margin-bottom:6px;
}
.gam-form-campo b{ color: var(--color-primary); }
.gam-form-campo input,
.gam-form-campo select,
.gam-form-campo textarea{
  width:100%; font:inherit; font-size:.98rem; color: var(--color-text);
  padding:13px 15px; border:1.5px solid var(--color-border);
  border-radius: var(--radius-sm); background:#fff;
  transition: border-color .2s, box-shadow .2s;
}
.gam-form-campo input:focus,
.gam-form-campo select:focus,
.gam-form-campo textarea:focus{
  outline:none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(67,56,202,.14);
}
.gam-form-campo textarea{ resize:vertical; }
.gam-form-consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.88rem; color: var(--color-text-muted);
  margin:6px 0 20px;
}
.gam-form-consent input{ margin-top:3px; flex-shrink:0; width:17px; height:17px; accent-color: var(--color-primary); }
.gam-form-consent a{ color: var(--color-primary); text-decoration:underline; }
.gam-form-enviar{ width:100%; }
.gam-form-nota{ font-size:.82rem; color: var(--color-text-muted); margin:14px 0 0; text-align:center; }
.gam-form-trampa{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.gam-form-aviso{ padding:13px 16px; border-radius: var(--radius-sm); font-size:.92rem; margin-bottom:18px; }
.gam-form-ok{ background:#e7f7ed; border:1px solid #9fdcb6; color:#1d6b3a; }
.gam-form-error{ background:#fdecec; border:1px solid #f3b6b6; color:#8f2020; }

.gam-contacto-aside{ display:flex; flex-direction:column; gap:22px; }
.gam-contacto-directo, .gam-contacto-sedes{
  background: var(--color-bg-soft); border-radius: var(--radius-lg); padding:24px;
}
.gam-contacto-directo h2, .gam-contacto-sedes h2{ font-size:1.15rem; margin:0 0 16px; }
.gam-contacto-via{
  display:flex; align-items:center; gap:14px;
  padding:13px 14px; border-radius: var(--radius-md); background:#fff;
  margin-bottom:10px; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gam-contacto-via:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gam-contacto-via-icono{
  width:42px; height:42px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(67,56,202,.1); color: var(--color-primary);
}
.gam-contacto-via--wa .gam-contacto-via-icono{ background: rgba(37,211,102,.14); color:#1faa53; }
.gam-contacto-via strong{ display:block; font-size:.96rem; color: var(--color-ink); }
.gam-contacto-via em{ display:block; font-style:normal; font-size:.86rem; color: var(--color-text-muted); }
.gam-contacto-sede{ margin-bottom:16px; }
.gam-contacto-sede h3{ font-size:1rem; margin:0 0 4px; }
.gam-contacto-sede p{ font-size:.9rem; color: var(--color-text-muted); margin:0 0 6px; }
.gam-contacto-foto img{
  width:100%; height:auto; display:block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  aspect-ratio: 4/3; object-fit:cover;
}

@media (max-width: 900px){
  .gam-contacto-grid{ grid-template-columns:1fr; }
  .gam-form-card{ padding:24px 20px; }
  .gam-form-fila{ grid-template-columns:1fr; gap:0; }
  .gam-contacto-foto{ display:none; }
}

/* ==================================================================== */
/* PÁGINAS DE SEDE — estructura propia                                  */
/* ==================================================================== */
/* Antes la sede era una sola rejilla de dos columnas: una foto enorme a la
   izquierda y TODO el texto apretado a la derecha. Con más de tres párrafos
   quedaba una columna larguísima al lado de un hueco. Ahora la página tiene
   secciones de verdad: portada, datos, contenido en columna legible,
   pasos, fotos y llamada a la acción. */

.gam-sede-hero{
  position:relative; overflow:hidden;
  padding: 44px 0 64px;
  background:
    radial-gradient(48% 60% at 92% 0%, rgba(245,165,36,.16), transparent 62%),
    radial-gradient(52% 60% at 0% 10%, rgba(67,56,202,.14), transparent 62%),
    linear-gradient(180deg, #fbfbfe, #ffffff 70%);
}
.gam-sede-hero-inner{ display:grid; grid-template-columns: 1.02fr .98fr; gap:56px; align-items:center; }
.gam-sede-hero h1{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing:-.02em; margin-top:14px; }
.gam-sede-hero-lead{ font-size:1.08rem; color: var(--color-text-muted); max-width:520px; margin-bottom:24px; }
.gam-sede-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }

/* Pila de fotos en 3D: la imagen delante y dos planos detrás girados igual. */
.gam-photo-stack{ position:relative; perspective:1400px; }
.gam-photo-stack img{
  position:relative; z-index:1;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3; object-fit:cover; width:100%;
  transform: rotateY(-8deg) rotateX(4deg);
  transition: transform .5s var(--ease);
  will-change: transform;
}
.gam-photo-stack::before{
  content:''; position:absolute; inset: 7% -7% -7% 7%; z-index:0;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary) 60%, var(--color-accent));
  opacity:.20; border-radius: var(--radius-xl);
  transform: rotateY(-8deg) rotateX(4deg) translateZ(-60px);
}
.gam-photo-stack::after{
  content:''; position:absolute; inset: 3.5% -3.5% -3.5% 3.5%; z-index:0;
  border:1.5px solid rgba(67,56,202,.20); border-radius: var(--radius-xl);
  transform: rotateY(-8deg) rotateX(4deg) translateZ(-30px);
}
.gam-tilt .gam-photo-stack img,
.gam-photo-stack.gam-tilt-active img{
  transform: rotateX(calc(4deg + var(--rx,0deg))) rotateY(calc(-8deg + var(--ry,0deg)));
}

/* Tarjetas de datos rápidos */
.gam-facts{ margin-top:-34px; position:relative; z-index:2; }
.gam-facts-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.gam-fact{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding:20px 20px 18px; box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gam-fact:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.gam-fact-icon{
  width:40px; height:40px; border-radius:13px; margin-bottom:12px;
  background: linear-gradient(135deg, rgba(67,56,202,.12), rgba(245,165,36,.18));
  display:flex; align-items:center; justify-content:center; color: var(--color-primary);
}
.gam-fact b{ display:block; font-family: var(--font-heading); font-size:.95rem; color: var(--color-ink); margin-bottom:4px; }
.gam-fact span{ font-size:.88rem; color: var(--color-text-muted); line-height:1.5; }

/* Cuerpo de la sede */
.gam-sede-body{ padding: 66px 0 10px; }
.gam-sede-body .gam-entry-content{ max-width:760px; }
.gam-sede-body .gam-entry-content h2{
  font-size:1.5rem; margin-top:1.9em; padding-top:.2em;
}
.gam-sede-body .gam-entry-content h2:first-child{ margin-top:0; }

/* Pasos numerados */
.gam-steps{ padding: 18px 0 20px; }
.gam-steps-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; counter-reset: paso; }
.gam-step{
  position:relative; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 30px 24px 24px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gam-step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gam-step::before{
  counter-increment: paso; content: counter(paso);
  position:absolute; top:-18px; left:24px;
  width:40px; height:40px; border-radius:14px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  color:#fff; font-family: var(--font-heading); font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px -6px rgba(67,56,202,.55);
}
.gam-step h3{ font-size:1.05rem; margin:10px 0 8px; }
.gam-step p{ font-size:.93rem; color: var(--color-text-muted); margin:0; }

/* Tira de fotos */
.gam-strip{ padding: 46px 0 10px; }
.gam-strip-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.gam-strip-grid a{
  display:block; overflow:hidden; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); aspect-ratio: 4/3;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gam-strip-grid a:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gam-strip-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.gam-strip-grid a:hover img{ transform: scale(1.06); }

/* Bloque de ubicación */
.gam-ubicacion{ padding: 46px 0 10px; }
.gam-ubicacion-card{
  display:grid; grid-template-columns: 1fr auto; gap:28px; align-items:center;
  background: var(--color-bg-soft); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 30px 32px;
}
.gam-ubicacion-card h2{ font-size:1.3rem; margin:0 0 8px; }
.gam-ubicacion-card p{ margin:0; color: var(--color-text-muted); }

/* ==================================================================== */
/* Enlaces internos relacionados                                        */
/* ==================================================================== */
/* Enlazar las páginas entre sí ayuda a Google a entender de qué va el sitio
   y, sobre todo, mantiene al visitante dentro en vez de volver a la
   búsqueda. */
.gam-related{ padding: 60px 0 76px; }
.gam-related-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.gam-related-card{
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding:22px 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.gam-related-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(67,56,202,.3); }
.gam-related-card strong{ font-family: var(--font-heading); color: var(--color-ink); font-size:1rem; }
.gam-related-card span{ font-size:.87rem; color: var(--color-text-muted); line-height:1.5; }
.gam-related-card em{ font-style:normal; font-weight:600; font-size:.87rem; color: var(--color-primary); margin-top:6px; }

/* ==================================================================== */
/* Barra fija de contacto en móvil                                      */
/* ==================================================================== */
/* En el móvil el botón de la cabecera desaparece al bajar. Esta barra deja
   llamar, escribir por WhatsApp o pedir la clase de prueba desde cualquier
   punto de la página, que es donde se pierden la mayoría de las visitas. */
.gam-mobile-cta{ display:none; }
@media (max-width: 900px){
  .gam-mobile-cta{
    display:grid; grid-template-columns: auto auto 1fr; gap:10px; align-items:center;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    background: rgba(255,255,255,.97); border-top:1px solid var(--color-border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(14,16,48,.10);
  }
  .gam-mobile-cta-icon{
    width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background: var(--color-bg-soft); color: var(--color-primary); border:1px solid var(--color-border);
  }
  .gam-mobile-cta-icon--wa{ background: rgba(37,211,102,.12); color:#128C4B; border-color: rgba(37,211,102,.3); }
  .gam-mobile-cta .gam-btn{ width:100%; padding:14px 18px; }
  /* El botón flotante de WhatsApp sobra si la barra ya lo lleva. */
  .gam-whatsapp-float{ display:none; }
  body{ padding-bottom: 78px; }
  .gam-cookie-bar{ bottom: 86px; }
}

/* ==================================================================== */
/* Rendimiento: el 3D se apaga en pantallas pequeñas                    */
/* ==================================================================== */
/* Las rotaciones y las sombras grandes crean capas extra que la GPU de un
   móvil de gama media tiene que componer en cada scroll. En el escritorio
   aportan; en el móvil solo restan fluidez, así que ahí se ven planas y
   perfectamente bien. */
@media (max-width: 900px){
  .gam-hero-visual-img,
  .gam-about-visual img,
  .gam-photo-stack img{ transform:none !important; }
  .gam-hero-visual-layer--back,
  .gam-hero-visual-layer--mid,
  .gam-photo-stack::before,
  .gam-photo-stack::after{ display:none; }
  .gam-hero-visual-glow{ display:none; }
  .gam-hero-chip{ position:static; margin-top:16px; }
  .gam-card, .gam-step, .gam-fact, .gam-related-card{ will-change:auto; }
}
@media (max-width: 900px){
  .gam-sede-hero-inner{ grid-template-columns:1fr; gap:30px; }
  .gam-facts-grid{ grid-template-columns: repeat(2,1fr); }
  .gam-steps-grid{ grid-template-columns:1fr; gap:34px; }
  .gam-related-grid{ grid-template-columns: repeat(2,1fr); }
  .gam-ubicacion-card{ grid-template-columns:1fr; gap:18px; }
  .gam-strip-grid{ grid-template-columns: repeat(3,1fr); gap:8px; }
}
@media (max-width: 560px){
  .gam-facts-grid{ grid-template-columns:1fr; }
  .gam-related-grid{ grid-template-columns:1fr; }
  .gam-facts{ margin-top:-20px; }
}

/* Columna de lectura + tarjeta que la acompaña */
.gam-sede-layout{ display:grid; grid-template-columns: minmax(0,1fr) 330px; gap:52px; align-items:start; }
.gam-sede-layout .gam-entry-content{ max-width:none; }
.gam-sede-aside{ position:sticky; top:96px; }
.gam-aside-card{
  background: linear-gradient(180deg,#fff,#fbfbff);
  border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding:26px 24px; box-shadow: var(--shadow-md);
}
.gam-aside-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color: var(--color-accent-dark); background: rgba(245,165,36,.13);
  border-radius:999px; padding:5px 12px; margin-bottom:14px;
}
.gam-aside-tag::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--color-accent); }
.gam-aside-card h2{ font-size:1.18rem; margin:0 0 10px; }
.gam-aside-card p{ font-size:.92rem; color: var(--color-text-muted); margin:0 0 18px; }
.gam-aside-card .gam-btn{ width:100%; }
.gam-aside-list{ margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--color-border); display:flex; flex-direction:column; gap:10px; }
.gam-aside-list a{ font-size:.92rem; font-weight:600; color: var(--color-primary); }
.gam-aside-list a:hover{ text-decoration:underline; }

@media (max-width: 1000px){
  .gam-sede-layout{ grid-template-columns:1fr; gap:34px; }
  .gam-sede-aside{ position:static; }
}

/* ==================================================================== */
/* Correcciones de logos y barra de cookies                             */
/* ==================================================================== */

/* BARRA DE COOKIES — el botón "Aceptar" no hacía nada.
   El JavaScript sí funcionaba: ponía el atributo hidden en la barra. Lo que
   fallaba era el CSS. El atributo hidden solo esconde un elemento mientras
   nadie le declare un display propio, y aquí .gam-cookie-bar tenía
   display:flex, que gana al hidden del navegador. Resultado: se aceptaba, se
   guardaba la decisión... y la barra seguía ahí, como si el botón estuviera
   roto. Con esta regla el atributo vuelve a mandar. */
.gam-cookie-bar[hidden]{ display:none !important; }

/* LOGO DEL PIE — nunca se deforma.
   El ancho tiene que poder moverse libremente; si se fija el ancho y se limita
   el alto, la imagen se aplasta. */
.gam-footer-brand img,
.gam-footer-logo img{
  max-height:52px; width:auto; height:auto; max-width:200px;
}

/* LOGO DE LA CABECERA
   Los archivos llevaban casi un 50% de margen transparente alrededor, así que
   de los 68px de caja solo 34 eran logo de verdad: por eso se veía pequeño por
   mucho que subiéramos el alto. Ya van recortados al ras, y aquí se ajusta la
   altura a la nueva proporción. */
.gam-logo img,
.gam-logo .custom-logo,
.gam-logo .custom-logo-link img{ max-height:54px; width:auto; }
@media (max-width: 600px){
  .gam-logo img,
  .gam-logo .custom-logo,
  .gam-logo .custom-logo-link img{ max-height:36px; }
}

/* Botón que queda oculto en el aviso de cookies (ver footer.php): el atributo
   hidden por sí solo no basta porque .gam-cookie-actions usa flex. */
.gam-cookie-bar [hidden]{ display:none !important; }

/* ==================================================================== */
/* Rendimiento de pintado                                               */
/* ==================================================================== */
/* content-visibility le dice al navegador que no se moleste en calcular ni
   pintar una sección hasta que esté cerca de la pantalla. En una página larga
   como la de sede eso recorta bastante el trabajo del primer pintado, que es
   justo lo que penaliza en un móvil de gama media.

   contain-intrinsic-size reserva un alto aproximado para que la barra de
   scroll no dé saltos mientras se van pintando las secciones. */
.gam-steps,
.gam-strip,
.gam-ubicacion,
.gam-related,
.gam-blog-preview{
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* ==================================================================== */
/* Galería: fotos arriba, texto debajo                                  */
/* ==================================================================== */
/* La entradilla va pegada al H1 y tiene que leerse de una pasada: dos
   líneas, no un párrafo de nueve. Se limita el ancho en caracteres para
   que en pantallas grandes no se estire en renglones larguísimos. */
.gam-galeria-lead{
  margin-top: 14px;
  max-width: 62ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-text);
}
.gam-galeria-lead p{ margin: 0; }

/* Las fotos empiezan justo aquí, sin esperar a que nadie termine de leer. */
.gam-galeria-fotos{ padding-top: 4px; }
.gam-galeria-fotos .gam-galeria{ margin: 22px 0 0; }

/* El texto largo baja a un bloque propio con fondo suave. Al separarlo del
   blanco de las fotos deja de parecer un muro y se lee como lo que es: una
   nota al pie para quien quiera saber más. */
.gam-galeria-texto{
  margin-top: 52px;
  padding: 50px 0 44px;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  /* Aquí NO se usa content-visibility, a diferencia de otras secciones del
     tema, y es a propósito. Esa técnica aplaza el pintado de lo que aún no se
     ve y reserva mientras tanto un hueco estimado; si la estimación se queda
     corta o larga, el contenido de debajo da un salto al aparecer. En bloques
     grandes compensa, pero en cuatro párrafos lo que se ahorra no llega ni a
     un milisegundo, y justo debajo de las fotos un salto se nota mucho. */
}
.gam-galeria-texto .gam-entry-content > h2:first-child{ margin-top: 0; }
.gam-galeria-texto .gam-entry-content p:last-child{ margin-bottom: 0; }

.gam-galeria-cierre{ padding: 40px 0 0; }

@media (max-width: 600px){
  .gam-galeria-texto{ margin-top: 36px; padding: 36px 0 32px; }
  .gam-galeria-cierre{ padding-top: 28px; }
}

/* ==================================================================== */
/* Puertas abiertas                                                     */
/* ==================================================================== */
/* Franja superior. Va antes que la cabecera y empuja todo hacia abajo,
   así que tiene que ser baja: en un móvil cada píxel de aquí es un píxel
   menos de la foto que tiene que enamorar. */
.gam-pa-franja{
  display:flex; align-items:center; justify-content:center; gap:10px 16px;
  flex-wrap:wrap; text-align:center;
  padding:9px 16px;
  background: linear-gradient(100deg, var(--color-primary-dark), var(--color-primary));
  color:#fff; text-decoration:none;
  font-size:.92rem; line-height:1.35;
}
.gam-pa-franja strong{ font-weight:700; }
.gam-pa-franja span{ opacity:.92; }
.gam-pa-franja-cta{
  border:1px solid rgba(255,255,255,.55); border-radius:999px;
  padding:3px 13px; font-weight:600; opacity:1;
}
.gam-pa-franja:hover .gam-pa-franja-cta{ background:#fff; color:var(--color-primary-dark); }

/* Portada de la página */
.gam-pa-hero{
  padding:52px 0 44px;
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(109,92,245,.14), transparent 62%),
    radial-gradient(900px 340px at 92% 0%, rgba(245,165,36,.14), transparent 60%),
    var(--color-bg);
}
.gam-pa-eyebrow{
  text-transform:uppercase; letter-spacing:.09em; font-size:.76rem; font-weight:700;
  color:var(--color-primary); margin:14px 0 6px;
}
.gam-pa-hero h1{ font-size:clamp(1.9rem, 4vw, 3rem); margin:0 0 14px; max-width:20ch; }
.gam-pa-lead{ font-size:1.09rem; line-height:1.7; max-width:62ch; color:var(--color-text); }

/* Las fechas como dos tarjetas de calendario: es lo primero que busca
   quien llega desde una publicación, y tiene que leerse sin leer. */
.gam-pa-fechas{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 24px; }
.gam-pa-fecha{
  display:flex; flex-direction:column; align-items:center;
  min-width:132px; padding:16px 20px;
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
}
.gam-pa-fecha-num{ font-size:2.5rem; font-weight:800; line-height:1; color:var(--color-primary); font-family:var(--font-display, inherit); }
.gam-pa-fecha-mes{ text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; color:var(--color-text-muted); margin-top:4px; }
.gam-pa-fecha-dia{ margin-top:8px; font-weight:600; text-transform:capitalize; }
.gam-pa-fecha-hora{ font-size:.92rem; color:var(--color-text-muted); }

.gam-pa-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.gam-pa-plazas{ margin-top:16px; font-size:.95rem; color:var(--color-text-muted); }

/* Cómo es la clase */
.gam-pa-pasos{ padding:56px 0 10px; }
.gam-pa-pasos h2, .gam-pa-datos h2, .gam-pa-donde h2, .gam-pa-dudas h2{ font-size:clamp(1.45rem,2.4vw,2rem); margin:0 0 8px; }
.gam-pa-sub{ color:var(--color-text-muted); max-width:60ch; margin:0 0 26px; }
.gam-pa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.gam-pa-paso{
  position:relative; padding:24px 22px 22px;
  background:var(--color-bg-soft); border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gam-pa-paso:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.gam-pa-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color:#fff; font-weight:700; margin-bottom:12px;
  box-shadow:var(--shadow-glow);
}
.gam-pa-paso h3{ font-size:1.08rem; margin:0 0 8px; }
.gam-pa-paso p{ margin:0; font-size:.97rem; line-height:1.65; color:var(--color-text); }

/* Para quién es / qué traer */
.gam-pa-datos{ padding:52px 0 8px; }
.gam-pa-datos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:34px; }
.gam-pa-lista{ margin:0 0 12px; padding-left:20px; }
.gam-pa-lista li{ margin-bottom:8px; line-height:1.6; }
.gam-pa-nota{ font-size:.93rem; color:var(--color-text-muted); }

.gam-pa-form{ padding:50px 0 10px; }

.gam-pa-donde{ padding:44px 0 8px; }
.gam-pa-dir{ font-size:1.05rem; font-weight:600; }

/* Dudas: <details> nativo, sin una línea de JavaScript. */
.gam-pa-dudas{ padding:46px 0 10px; }
.gam-pa-duda{
  border-bottom:1px solid var(--color-border);
  padding:14px 0;
}
.gam-pa-duda summary{
  cursor:pointer; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.gam-pa-duda summary::-webkit-details-marker{ display:none; }
.gam-pa-duda summary::after{
  content:'+'; font-size:1.35rem; line-height:1; color:var(--color-primary); flex:none;
}
.gam-pa-duda[open] summary::after{ content:'–'; }
.gam-pa-duda p{ margin:12px 0 4px; color:var(--color-text); line-height:1.7; }

.gam-pa-cierre{ padding:46px 0 70px; text-align:center; }
.gam-pa-cierre p{ font-size:1.15rem; font-weight:600; margin:0 0 16px; }

@media (max-width:600px){
  .gam-pa-franja{ font-size:.85rem; padding:8px 14px; gap:6px 12px; }
  .gam-pa-hero{ padding:34px 0 34px; }
  .gam-pa-fechas{ gap:10px; }
  .gam-pa-fecha{ flex:1 1 calc(50% - 5px); min-width:0; padding:14px 10px; }
  .gam-pa-cta .gam-btn{ width:100%; justify-content:center; }
}