/* ============================================================================
   PAGE.CSS · componentes shared para páginas interiores
   Reutiliza variables y utilidades de base.css y home.css
   ============================================================================ */

/* ========== PAGE HERO (compacto, con gradient violeta) ========== */
.page-hero{
    position:relative;
    background:linear-gradient(180deg,#faf5ff 0%,#ffffff 100%);
    padding:96px 0 80px;
    overflow:hidden;
}
.page-hero::before{
    content:"";position:absolute;top:-180px;right:-160px;
    width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(168,85,247,.22),transparent 60%);
    pointer-events:none;
}
.page-hero::after{
    content:"";position:absolute;bottom:-200px;left:-200px;
    width:480px;height:480px;border-radius:50%;
    background:radial-gradient(circle,rgba(192,132,252,.15),transparent 60%);
    pointer-events:none;
}
.page-hero .container{position:relative;z-index:1}
.page-hero .breadcrumb{
    display:flex;gap:8px;align-items:center;
    color:var(--muted);font-size:.82rem;font-weight:500;
    text-transform:uppercase;letter-spacing:.08em;
    margin-bottom:22px;
}
.page-hero .breadcrumb a{color:var(--muted);transition:color var(--transition)}
.page-hero .breadcrumb a:hover{color:var(--accent-strong)}
.page-hero .breadcrumb span.sep{opacity:.4}
.page-hero .breadcrumb span.curr{color:var(--ink-soft)}
.page-hero .tag{margin-bottom:18px}
.page-hero h1{
    font-size:clamp(2.25rem,4.5vw,3.5rem);
    color:var(--ink);max-width:24ch;margin-bottom:18px;
}
.page-hero p.lede{
    color:var(--ink-soft);font-size:1.15rem;
    max-width:62ch;margin-bottom:28px;line-height:1.55;
}
.page-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* Variant: hero con grid imagen + texto */
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.page-hero-grid .page-hero-media{
    border-radius:var(--radius-lg);overflow:hidden;
    aspect-ratio:4/5;background:linear-gradient(135deg,#18181b,#3f3f46);
    box-shadow:var(--shadow-lg);
}
.page-hero-grid .page-hero-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
    .page-hero-grid{grid-template-columns:1fr;gap:32px}
    .page-hero-grid .page-hero-media{aspect-ratio:4/3;max-width:520px;margin:0 auto}
}

/* Hero variant: dark con foto cinemática (para coach pages tipo Álex+Ibai) */
.page-hero-dark{
    background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);
    color:#fff;
}
.page-hero-dark::before{background:radial-gradient(circle,rgba(168,85,247,.35),transparent 60%);opacity:.7}
.page-hero-dark::after{background:radial-gradient(circle,rgba(192,132,252,.22),transparent 60%);opacity:.7}
.page-hero-dark h1{color:#fff}
.page-hero-dark p.lede{color:rgba(255,255,255,.85)}
.page-hero-dark .breadcrumb,
.page-hero-dark .breadcrumb a,
.page-hero-dark .breadcrumb span.curr{color:rgba(255,255,255,.6)}
.page-hero-dark .breadcrumb a:hover{color:#fff}
.page-hero-dark .tag{background:rgba(168,85,247,.22);color:#e9d5ff}

/* ========== CONTENT BLOCK (prose con buen ancho de lectura) ========== */
.prose-block{max-width:780px;margin:0 auto}
.prose-block h2{margin-top:1.6em;margin-bottom:.5em}
.prose-block h3{margin-top:1.4em;margin-bottom:.4em;font-size:1.2rem}
.prose-block p{color:var(--ink-soft);font-size:1.05rem;line-height:1.75;margin-bottom:1em}
.prose-block ul,.prose-block ol{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;padding-left:24px;margin-bottom:1em}
.prose-block li{margin-bottom:8px}
.prose-block strong{color:var(--ink)}
.prose-block a{color:var(--accent-strong);font-weight:600;border-bottom:1px solid currentColor}
.prose-block a:hover{opacity:.75}
.prose-block blockquote{
    margin:32px 0;padding:20px 28px;
    border-left:4px solid var(--accent);
    background:var(--accent-soft);
    border-radius:0 12px 12px 0;
    font-family:var(--font-display);font-size:1.2rem;
    color:var(--ink);font-style:italic;
}
.prose-block blockquote p{margin:0;color:var(--ink)}

/* ========== SIDE-BY-SIDE (texto + imagen alternable) ========== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.split-reverse > *:first-child{order:2}
.split.split-reverse > *:last-child{order:1}
.split-text h2{margin-bottom:14px}
.split-text p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin-bottom:14px}
.split-text ul{padding-left:0;list-style:none;margin:18px 0 0}
.split-text ul li{
    padding:10px 0 10px 30px;position:relative;
    color:var(--ink-soft);font-size:1rem;line-height:1.55;
    border-bottom:1px solid var(--line);
}
.split-text ul li:last-child{border-bottom:none}
.split-text ul li::before{
    content:"";position:absolute;left:0;top:14px;
    width:18px;height:18px;border-radius:50%;
    background:var(--accent-soft);
}
.split-text ul li::after{
    content:"";position:absolute;left:5px;top:18px;
    width:8px;height:5px;border-left:2px solid var(--accent-strong);border-bottom:2px solid var(--accent-strong);
    transform:rotate(-45deg);
}
.split-media{
    border-radius:var(--radius-lg);overflow:hidden;
    aspect-ratio:4/3;background:linear-gradient(135deg,#ede9fe,#c084fc);
    box-shadow:var(--shadow-md);
}
.split-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
    .split{grid-template-columns:1fr;gap:32px}
    .split.split-reverse > *:first-child{order:0}
    .split.split-reverse > *:last-child{order:0}
    .split-media{aspect-ratio:16/10}
}

/* ========== BIG NUMBERS / STATS STRIP ========== */
.stats-strip{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    overflow:hidden;
}
.stats-strip .stat{
    padding:32px 24px;text-align:center;border-right:1px solid var(--line);
}
.stats-strip .stat:last-child{border-right:none}
.stats-strip .stat-num{
    display:block;font-family:var(--font-display);
    font-size:clamp(2rem,3.6vw,2.75rem);font-weight:800;
    color:var(--accent-strong);line-height:1;margin-bottom:6px;
    letter-spacing:-.02em;
}
.stats-strip .stat-label{color:var(--muted);font-size:.88rem;font-weight:500}
@media (max-width:820px){.stats-strip{grid-template-columns:repeat(2,1fr)}.stats-strip .stat{border-bottom:1px solid var(--line)}.stats-strip .stat:nth-child(2n){border-right:none}.stats-strip .stat:nth-last-child(-n+2){border-bottom:none}}
@media (max-width:480px){.stats-strip{grid-template-columns:1fr}.stats-strip .stat{border-right:none;border-bottom:1px solid var(--line)}.stats-strip .stat:last-child{border-bottom:none}}

/* ========== CALLOUT (caja destacada con CTA inline) ========== */
.callout{
    background:linear-gradient(135deg,#faf5ff,#fff);
    border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:36px 40px;display:flex;justify-content:space-between;align-items:center;
    gap:24px;flex-wrap:wrap;
}
.callout-text{flex:1;min-width:260px}
.callout-text h3{margin:0 0 6px;font-size:1.35rem}
.callout-text p{margin:0;color:var(--ink-soft);font-size:.98rem}
.callout .btn{flex-shrink:0}

/* ========== BENEFITS GRID (lista de beneficios con icono) ========== */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.benefit{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:28px;transition:transform var(--transition),box-shadow var(--transition);
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.benefit-icon{
    width:64px;height:64px;border-radius:14px;
    background:var(--accent-soft);color:var(--accent-strong);
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:16px;font-size:1.4rem;font-weight:800;
    overflow:hidden;
}
.benefit-icon img{
    width:100%;height:100%;object-fit:contain;padding:8px;display:block;
}
.benefit h4{margin-bottom:8px;font-size:1.05rem}
.benefit p{color:var(--muted);font-size:.95rem;margin:0;line-height:1.6}
@media (max-width:900px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.benefits-grid{grid-template-columns:1fr}}

/* ========== STEPS LIST (vertical, con número grande) ========== */
.steps-vertical{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:24px;width:100%}
.steps-vertical .step{
    display:grid;grid-template-columns:80px 1fr;gap:24px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:32px;align-items:start;
    transition:transform var(--transition),box-shadow var(--transition);
}
.steps-vertical .step:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.steps-vertical .step-num{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:1.6rem;font-weight:800;
    box-shadow:0 10px 22px -8px rgba(168,85,247,.5);
}
.steps-vertical .step-body h4{font-size:1.25rem;margin:0 0 8px}
.steps-vertical .step-body p{color:var(--muted);font-size:.98rem;margin:0;line-height:1.6}
@media (max-width:600px){
    .steps-vertical .step{grid-template-columns:1fr;gap:14px;padding:24px}
    .steps-vertical .step-num{width:54px;height:54px;font-size:1.35rem}
}

/* ========== COACH SPECS (badges grandes para fichas de coach) ========== */
.specs-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.specs-list .spec{
    background:var(--accent-soft);color:var(--accent-strong);
    padding:.6rem 1.1rem;border-radius:999px;
    font-size:.88rem;font-weight:600;
}

/* ========== COACH BIG QUOTE (frase del coach) ========== */
.coach-quote{
    background:linear-gradient(135deg,#0a0a0a,#1f1f22);
    color:#fff;border-radius:var(--radius-lg);
    padding:48px;text-align:center;
    position:relative;overflow:hidden;
}
.coach-quote::before{
    content:"\201C";position:absolute;top:-20px;left:32px;
    font-family:var(--font-display);font-size:10rem;
    color:rgba(168,85,247,.25);line-height:1;pointer-events:none;
}
.coach-quote p{
    position:relative;z-index:1;
    font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.75rem);
    font-weight:600;color:#fff;line-height:1.4;
    margin:0 auto;max-width:760px;
}
.coach-quote cite{
    display:block;margin-top:18px;font-style:normal;
    color:var(--accent);font-size:.85rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
}

/* ========== IBAI HERO BLOCK (claim premium con foto) ========== */
.ibai-block{
    display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
    background:linear-gradient(135deg,#0a0a0a,#1f1f22);
    color:#fff;border-radius:var(--radius-lg);
    padding:56px;overflow:hidden;position:relative;
}
.ibai-block::after{
    content:"";position:absolute;top:-100px;right:-100px;
    width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(168,85,247,.3),transparent 60%);
    pointer-events:none;
}
.ibai-block .ibai-text{position:relative;z-index:1}
.ibai-block .ibai-text .tag{background:rgba(168,85,247,.22);color:#e9d5ff;margin-bottom:14px}
.ibai-block .ibai-text h3{
    color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);
    line-height:1.25;margin-bottom:14px;
}
.ibai-block .ibai-text p{color:rgba(255,255,255,.78);font-size:1rem;margin-bottom:14px}
.ibai-block .ibai-media{
    position:relative;z-index:1;
    border-radius:var(--radius-lg);overflow:hidden;
    aspect-ratio:4/5;
    background:#0a0a0a;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.ibai-block .ibai-media img{
    width:100%;height:100%;
    object-fit:contain;       /* imagen entera, sin recortar */
    object-position:center;
    display:block;
}
@media (max-width:820px){
    .ibai-block{grid-template-columns:1fr;gap:28px;padding:32px 24px}
    .ibai-block .ibai-media{aspect-ratio:4/5;max-width:380px;margin:0 auto}
}
@media (max-width:480px){
    .ibai-block{padding:24px 18px;border-radius:14px}
    .ibai-block::after{width:200px;height:200px;top:-60px;right:-60px}
    .ibai-block .ibai-text h3{font-size:1.4rem}
}

/* ========== INFO LIST (tabla simple sin grid) ========== */
.info-list{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:0;overflow:hidden;
}
.info-list .row{
    display:grid;grid-template-columns:200px 1fr;gap:24px;
    padding:18px 28px;border-bottom:1px solid var(--line);
    align-items:start;
}
.info-list .row:last-child{border-bottom:none}
.info-list .row strong{color:var(--ink);font-weight:600;font-size:.95rem}
.info-list .row span,
.info-list .row p{color:var(--ink-soft);font-size:.98rem;margin:0}
.info-list .row a{color:var(--accent-strong);font-weight:600}
@media (max-width:600px){
    .info-list .row{grid-template-columns:1fr;gap:6px;padding:16px 20px}
}

/* ========== MINI CTA (final de página simple) ========== */
.mini-cta{
    background:linear-gradient(135deg,#a855f7,#7c3aed);
    color:#fff;border-radius:var(--radius-lg);
    padding:56px 40px;text-align:center;
}
.mini-cta h3{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px}
.mini-cta p{color:rgba(255,255,255,.9);font-size:1.05rem;margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto}
.mini-cta .btn-light{background:#fff;color:var(--accent-strong);font-weight:700}

/* ========== TEAM INDEX GRID (6 cards apilables) ========== */
.team-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.team-index-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    overflow:hidden;display:flex;flex-direction:column;
    transition:transform var(--transition),box-shadow var(--transition);
}
.team-index-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.team-index-card .photo{
    aspect-ratio:4/5;
    background:linear-gradient(135deg,#18181b,#3f3f46);
    overflow:hidden;position:relative;
}
.team-index-card .photo::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
    background:linear-gradient(180deg, transparent, rgba(10,10,10,.32));
    pointer-events:none;z-index:1;
}
.team-index-card .photo img{
    width:100%;height:100%;object-fit:cover;object-position:50% 18%;
    filter:saturate(.96) contrast(1.03);
    transition:transform .55s ease, filter .35s ease;
}
.team-index-card:hover .photo img{transform:scale(1.04);filter:saturate(1) contrast(1.04)}
.team-index-card .photo-fallback{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:4rem;font-weight:800;
    color:rgba(255,255,255,.7);letter-spacing:-.04em;
    background:linear-gradient(135deg,#1e1b4b,#7c3aed);
}
.team-index-card .body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.team-index-card .role{color:var(--accent-strong);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.team-index-card h3{margin:0;font-size:1.25rem}
.team-index-card p{color:var(--muted);font-size:.93rem;margin:0;flex:1}
.team-index-card .more{
    color:var(--accent-strong);font-weight:700;font-size:.9rem;
    margin-top:8px;display:inline-flex;align-items:center;gap:6px;
}
@media (max-width:900px){.team-index-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-index-grid{grid-template-columns:1fr}}

/* ========== EQUIPMENT GRID (para /el-club/) ========== */
.equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.equipment-grid .item{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:18px 14px;text-align:center;
}
.equipment-grid .item-icon{
    width:72px;height:72px;border-radius:14px;
    background:var(--accent-soft);
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:12px;overflow:hidden;
}
.equipment-grid .item-icon img{
    width:100%;height:100%;object-fit:contain;display:block;
    padding:8px;
}
.equipment-grid .item span{display:block;font-size:.88rem;color:var(--ink-soft);font-weight:500}
@media (max-width:680px){.equipment-grid{grid-template-columns:repeat(2,1fr)}}

/* ========== BLOG INDEX (variante de blog-card más rica) ========== */
.blog-empty{
    text-align:center;padding:80px 20px;color:var(--muted);
    background:var(--surface-alt);border-radius:var(--radius-lg);
}
.blog-empty h3{color:var(--ink);margin-bottom:8px}
.blog-empty p{margin:0 auto;max-width:480px}

/* ========== LEGAL PROSE (políticas) ========== */
.legal-prose{max-width:760px;margin:0 auto}
.legal-prose h2{margin-top:2em;margin-bottom:.5em;font-size:1.5rem}
.legal-prose h3{margin-top:1.5em;margin-bottom:.4em;font-size:1.15rem;color:var(--ink-soft)}
.legal-prose p{color:var(--ink-soft);font-size:1rem;line-height:1.75;margin-bottom:14px}
.legal-prose ul{padding-left:22px;color:var(--ink-soft);font-size:1rem;line-height:1.7;margin-bottom:14px}
.legal-prose li{margin-bottom:6px}
.legal-prose strong{color:var(--ink)}
.legal-prose a{color:var(--accent-strong);font-weight:600}
.legal-prose a:hover{text-decoration:underline}
.legal-prose .legal-meta{
    background:var(--surface-alt);border-radius:12px;padding:14px 18px;
    color:var(--muted);font-size:.9rem;margin-bottom:24px;
}
.legal-prose table{
    width:100%;border-collapse:collapse;margin:18px 0;
    font-size:.92rem;
}
.legal-prose table th,.legal-prose table td{
    text-align:left;padding:12px 14px;
    border-bottom:1px solid var(--line);vertical-align:top;
}
.legal-prose table th{background:var(--surface-alt);color:var(--ink);font-weight:700}

/* ========== /GRACIAS — página de confirmación ========== */
.gracias-hero{padding-top:80px;padding-bottom:64px}
.gracias-hero .lede{max-width:64ch}
.gracias-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:72px;height:72px;border-radius:50%;
    background:linear-gradient(135deg,#a855f7,#7c3aed);
    color:#fff;margin-bottom:22px;
    box-shadow:0 16px 36px -10px rgba(168,85,247,.55);
}
.gracias-hero h1 strong{color:var(--accent-strong)}

.gracias-steps{max-width:920px;margin:0 auto}
.gracias-steps h2{text-align:center;margin-bottom:32px}
.gracias-steps ol{
    list-style:none;padding:0;margin:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.gracias-steps li{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:26px;position:relative;box-shadow:var(--shadow-sm);
}
.gracias-steps .num{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;
    font-weight:800;font-family:var(--font-display);margin-bottom:14px;font-size:1rem;
}
.gracias-steps h3{margin:0 0 6px;font-size:1.1rem}
.gracias-steps p{color:var(--muted);margin:0;line-height:1.55}
@media (max-width:820px){
    .gracias-steps ol{grid-template-columns:1fr;gap:14px}
}

.gracias-meanwhile{text-align:center}
.gracias-meanwhile h2{margin-bottom:8px}
.gracias-meanwhile > p{color:var(--muted);margin:0 0 32px}
.gracias-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;
}
.gracias-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:24px 22px;display:block;color:var(--ink);
    transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.gracias-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.gracias-card h3{margin:0 0 8px;font-size:1.1rem}
.gracias-card p{color:var(--muted);margin:0 0 14px;font-size:.95rem;line-height:1.55}
.gracias-card .more{color:var(--accent-strong);font-weight:700;font-size:.9rem}
@media (max-width:820px){
    .gracias-cards{grid-template-columns:1fr}
}

.gracias-note-section{padding-top:0}
.gracias-note{
    max-width:760px;margin:0 auto;text-align:center;
    background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:22px 24px;
}
.gracias-note p{color:var(--muted);margin:0;font-size:.95rem;line-height:1.6}
.gracias-note a{color:var(--accent-strong);font-weight:600}

/* === HubSpot inline form block (partial _hs-form.php) === */
.hs-form-section{background:var(--surface-alt)}
.hs-form-card{
    max-width:760px;margin:0 auto;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:36px 32px;box-shadow:var(--shadow-sm);
}
.hs-form-head{text-align:center;margin-bottom:22px}
.hs-form-head .tag{display:inline-block;margin-bottom:10px}
.hs-form-head h2{margin:0 0 8px;font-size:1.55rem;line-height:1.2}
.hs-form-head p{color:var(--muted);margin:0;font-size:.98rem;line-height:1.55;max-width:54ch;margin-inline:auto}
@media (max-width:640px){
    .hs-form-card{padding:26px 20px}
    .hs-form-head h2{font-size:1.3rem}
}

/* === Action block (perfiles de coach con foto de acción) === */
.action-block{
    display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;
    max-width:1080px;margin:0 auto;
}
.action-block-reverse{grid-template-columns:1fr 1.05fr}
.action-block-reverse .action-text{order:2}
.action-block-reverse .action-media{order:1}
.action-text h2{margin:8px 0 14px}
.action-text p{color:var(--muted);line-height:1.7;margin:0}
.action-media{position:relative}
.action-media img{
    width:100%;height:auto;border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);display:block;
}
@media (max-width:780px){
    .action-block,.action-block-reverse{grid-template-columns:1fr;gap:24px}
    .action-block-reverse .action-text{order:1}
    .action-block-reverse .action-media{order:2}
}

/* === Club gallery (espacio interior · grid 3 columnas) === */
.club-gallery{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    margin-top:28px;
}
.club-gallery figure{margin:0}
.club-gallery img{
    width:100%;height:280px;object-fit:cover;display:block;
    border-radius:var(--radius);
}
@media (max-width:780px){
    .club-gallery{grid-template-columns:1fr;gap:12px}
    .club-gallery img{height:auto;aspect-ratio:4/3}
}

/* === /el-club/ · grid card + mapa lateral con responsive correcto === */
.locales-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:stretch;
}
.locales-row .card{margin:0}
.locales-map{
    border-radius:14px;
    overflow:hidden;
    min-height:340px;
    background:#f1f4f7;
}
.locales-map iframe{
    width:100%;
    height:100%;
    min-height:340px;
    border:0;
    display:block;
}
@media (max-width:880px){
    .locales-row{
        grid-template-columns:1fr;
        gap:18px;
    }
    .locales-map{min-height:260px}
    .locales-map iframe{min-height:260px}
}
@media (max-width:480px){
    .locales-map{min-height:220px}
    .locales-map iframe{min-height:220px}
}