/* Variante B - Comunidad de barrio (café de Chamberí x fanzine recortado)
   Emoción: "aquí cabe cualquiera". Verde protagonista, papel cálido, texturas, sellos. */

:root {
  --bg: #f6f3ec;          /* papel cálido */
  --bg-alt: #ffffff;
  --fg: #15140f;
  --accent: var(--green);
  --spark: var(--red);
  --on-accent: #ffffff;
  --paper-edge: #e7e2d4;
}

body { background: var(--bg); }

/* Compensa la nav fija al saltar a un ancla */
:target { scroll-margin-top: 96px; }

/* Sellos / chips de cinta (fanzine) */
.tape {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--spark); color: #fff; padding: 0.35em 0.7em;
  transform: rotate(-2deg); box-shadow: 3px 3px 0 rgba(0,0,0,.18);
}
.tape--green { background: var(--accent); }
.tape--ink { background: var(--ink); }

.stamp {
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent-ink); border: var(--rule) solid var(--accent-ink);
  padding: 0.5em 0.8em; transform: rotate(4deg); display: inline-block; font-size: 0.8rem;
}

/* --- HERO compacto: marca + álbum de recuerdos. Hero + barra de niveles entran en la 1ª pantalla. --- */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5) var(--space-4); align-items: center; }
.hero__slogan { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-size: var(--fs-eyebrow); line-height: 1.6; max-width: 40ch; margin-bottom: var(--space-2); }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4rem); line-height: 0.95; }
.hero h1 .dot { color: var(--accent); }
.hero__sub { margin-top: var(--space-3); font-size: var(--fs-lg); max-width: 40ch; color: var(--ink-soft); }
.hero__cta { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hero__note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-700); letter-spacing: 0.04em; margin-top: var(--space-3); }

/* Decoración del título y subtítulo de marca */
.hero h1 .mark { background: linear-gradient(transparent 69%, var(--green-light) 69% 88%, transparent 88%); padding-inline: 0.04em; }
.hero h1 .dot { color: var(--accent); }
.hero__subtitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.9rem); line-height: 1.12; letter-spacing: -0.01em; margin-top: var(--space-2); }
.hero__subtitle .g { color: var(--accent); }

/* Títulos de sección más grandes y legibles (solo variante B) */
.section h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); line-height: 1.04; text-wrap: balance; }

/* Enlace de ubicación con pin (abre Google Maps / app en móvil) */
.hero__map { display: block; color: var(--gray-700); max-width: 100%; }
.hero__map svg { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: 0.35em; color: var(--accent); }
.hero__map:hover { color: var(--ink); text-decoration: underline; }

/* Flechita de scroll del hero */
.hero__scroll { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto var(--space-3); color: var(--accent); border: var(--rule) solid currentColor; border-radius: 50%; }
.hero__scroll svg { width: 22px; height: 22px; }
.hero__scroll:hover { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .hero__scroll { animation: nudge 1.8s ease-in-out infinite; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Modal "Únete al club" */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gutter); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(13,13,13,.6); }
.modal__panel { position: relative; width: min(460px, 100%); background: #fff; border: var(--rule) solid var(--ink); box-shadow: var(--shadow-hard); padding: clamp(1.5rem, 4vw, var(--space-5)); animation: pop .2s ease; }
@keyframes pop { from { transform: scale(.96) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--ink); }
.modal__x:hover { color: var(--spark); }
.modal__panel h2 { font-size: var(--fs-h3); margin: 0.2rem 0 0.4rem; }
.join-form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.join-form label { display: grid; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700); }
.join-form input, .join-form select { padding: 0.8em 0.9em; border: var(--rule) solid var(--ink); font-family: var(--font-body); font-size: var(--fs-base); background: #fff; }
.join-form .hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-500); text-transform: none; letter-spacing: 0; }

/* Álbum de recuerdos: fotos tiradas en la mesa. Móvil = apiladas en cuadrícula; escritorio = desparramadas. */
.album { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-2); max-width: 460px; margin-inline: auto; }
.snap { --rot: 0deg; background: #fff; padding: 8px 8px 36px; border: 1px solid var(--paper-edge); box-shadow: 4px 6px 16px rgba(0,0,0,.22); position: relative; opacity: 0; transform: translateY(-24px) rotate(0deg) scale(.94); transition: opacity .45s ease, transform .6s cubic-bezier(.18,.75,.25,1); }
.snap.in { opacity: 1; transform: rotate(var(--rot)); }
.snap img { display: block; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: var(--gray-200); }
.snap.port img { aspect-ratio: 3 / 4; }
.snap figcaption { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; text-transform: lowercase; color: var(--ink-soft); }
.snap.r1 { --rot: -5deg; }
.snap.r2 { --rot: 3deg; }
.snap.r3 { --rot: 2.5deg; }
.snap.r4 { --rot: -4deg; }
.snap.r5 { --rot: 2deg; grid-column: span 2; max-width: 62%; justify-self: center; }
.snap.r6 { --rot: -3deg; grid-column: span 2; max-width: 74%; justify-self: center; }
.snap:hover { transform: rotate(0deg) scale(1.04); z-index: 9; }
@media (prefers-reduced-motion: reduce) { .snap { opacity: 1; transform: rotate(var(--rot)); transition: none; } }

/* Barra de niveles + captura: el formulario y la visión de niveles, juntos, bajo el hero */
.levelbar { background: var(--accent); color: #fff; border-block: var(--rule-thick) solid var(--ink); }
.levelbar__inner { padding-block: var(--space-4); display: grid; gap: var(--space-3); }
.levelbar h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); line-height: 1.0; }
.levelbar h2 small { display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #fff; margin-top: var(--space-2); max-width: 34ch; }
.levels-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.lvl { display: flex; flex-direction: column; gap: 2px; padding: 0.8rem 1rem; border: var(--rule) solid var(--ink); background: #fff; color: var(--fg); cursor: pointer; text-align: left; transition: transform .1s ease, box-shadow .1s ease; }
.lvl:hover, .lvl.sel { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.lvl.sel { background: var(--green-tint); }
.lvl b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.lvl span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.capture { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.capture input { flex: 1 1 220px; padding: 0.9em 1.1em; border: var(--rule) solid var(--ink); font-family: var(--font-body); font-size: var(--fs-base); }
.capture .hint { flex-basis: 100%; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--green-tint); }

/* --- QUIZ (gancho captura email por nivel) --- */
.quiz { background: var(--accent); color: #fff; border-block: var(--rule-thick) solid var(--ink); }
.quiz__card { background: #fff; color: var(--fg); border: var(--rule) solid var(--ink); box-shadow: var(--shadow-hard); padding: clamp(1.4rem, 4vw, var(--space-5)); }
.quiz__steps { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.quiz__steps i { height: 8px; flex: 1; background: var(--gray-200); border: 2px solid var(--ink); }
.quiz__steps i.on { background: var(--accent); }
.quiz__options { display: grid; gap: var(--space-2); margin-top: var(--space-3); grid-template-columns: 1fr; }
.quiz__opt { display: flex; align-items: center; gap: var(--space-2); padding: 1rem 1.2rem; border: var(--rule) solid var(--ink); background: var(--bg); font-weight: 600; cursor: pointer; transition: transform .1s ease, box-shadow .1s ease, background .1s; }
.quiz__opt:hover { background: #fff; transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.quiz__opt b { font-family: var(--font-mono); color: var(--accent); }

/* --- Bloques con borde brutalista --- */
.card { background: #fff; border: var(--rule) solid var(--ink); }
.card--shadow { box-shadow: var(--shadow-hard); }

/* Puertas de nivel */
.doors { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.door { position: relative; overflow: hidden; padding: var(--space-3); border: var(--rule) solid var(--ink); background: #fff; transition: transform .12s ease, box-shadow .12s ease; }
.door:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }
.door > * { position: relative; z-index: 1; }
.door__icon { display: block; width: 50px; height: 58px; background-color: var(--accent); -webkit-mask: var(--pza) center / contain no-repeat; mask: var(--pza) center / contain no-repeat; margin-bottom: var(--space-2); }
.pza--knight { --pza: url("../img/piezas2/chess-knight.svg"); }
.pza--pawn   { --pza: url("../img/piezas2/chess-pawn.svg"); }
.pza--bishop { --pza: url("../img/piezas2/chess-bishop.svg"); }
.pza--queen  { --pza: url("../img/piezas2/chess-queen.svg"); }
.door__k { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.door h3 { margin: 0.3rem 0 0.5rem; }

/* Infantil con protagonismo: cuadraditos voladores + caballo grande (sin tocar el fondo) */
.door--kids { background: var(--green-tint); border-color: var(--ink); }
.door--kids .door__k { color: var(--green-dark); }
.door--kids .door__icon { width: 60px; height: 74px; }
.door__squares { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.door__squares .sq { position: absolute; width: 13px; height: 13px; transform: rotate(var(--r, 0deg)); }
.sq--g { background: var(--green); }
.sq--k { background: var(--ink); }
.sq--r { background: var(--spark); }
.sq--w { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .door__squares .sq { animation: floaty 4.5s ease-in-out infinite; }
  .door__squares .sq:nth-child(2n) { animation-delay: -1.2s; }
  .door__squares .sq:nth-child(3n) { animation-delay: -2.4s; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-7px) rotate(var(--r, 0deg)); } }

/* Jorge - autoridad */
.jorge { display: grid; gap: var(--space-4); align-items: center; }
.jorge__photo { aspect-ratio: 4 / 5; border: var(--rule) solid var(--ink); box-shadow: var(--shadow-hard); overflow: hidden; }
.jorge__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; }
.jorge__bio { display: grid; gap: var(--space-2); margin-top: var(--space-3); max-width: 54ch; }
.jorge__bio p { font-size: var(--fs-base); }
.jorge__creds { margin-top: var(--space-2); }
.jorge__creds .stamp { transform: none; }
.jorge__creds { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-3); }

/* Club / comunidad */
.club { background: var(--ink); color: #fff; }
.club .eyebrow { color: var(--green-light); }
.club .eyebrow::before { background: var(--green-light); }
.teams { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-4); }
.team { border: var(--rule) solid #fff; padding: var(--space-3) var(--space-2); text-align: center; }
.team b { display: block; font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.team span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-light); }

/* Club: tres pilares como tarjetas en fila (foto B&N + texto) */
.club__intro { color: var(--on-dark-soft); margin-top: var(--space-2); max-width: 56ch; font-size: var(--fs-lg); }
.club__cards { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-5); }
.ccard { display: flex; flex-direction: column; background: var(--surface-dark); border: var(--rule) solid #fff; transition: transform .12s ease, box-shadow .12s ease; }
.ccard:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--green); }
.ccard__img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--rule) solid #fff; }
.ccard__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.03); }
.ccard__n { position: absolute; top: 0; left: 0; background: var(--green); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; padding: 0.4em 0.7em; border-right: var(--rule) solid #fff; border-bottom: var(--rule) solid #fff; }
.ccard__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.ccard__body h3 { color: #fff; }
.ccard__body p { color: var(--on-dark-soft); }
.ccard__stat { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--spark); margin-top: 0.3rem; }
/* Tarjeta meetup = CTA en sí misma (rosa, foto a color para destacar) */
.ccard--cta { border-color: var(--spark); background: linear-gradient(180deg, rgba(255,45,85,.09), transparent 38%), var(--surface-dark); }
.ccard--cta:hover { box-shadow: 8px 8px 0 var(--spark); }
.ccard--cta .ccard__img { border-bottom-color: var(--spark); }
.ccard--cta .ccard__img img { filter: none; }
.ccard--cta .ccard__body { gap: var(--space-2); }
.ccard__free { align-self: flex-start; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--spark-ink); padding: 0.35em 0.7em; }
.ccard__btn { margin-top: auto; width: 100%; justify-content: center; }
@media (min-width: 760px) { .club__cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

/* Stats */
.stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 4.5rem); line-height: 0.9; display: block; color: var(--accent); }
.stat span { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-700); }

/* Testimonios */
.quotes { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.quote { padding: var(--space-3); border-left: var(--rule-thick) solid var(--accent); background: #fff; border-top: var(--rule) solid var(--ink); }
.quote p { font-size: var(--fs-lg); }
.quote cite { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700); font-style: normal; }

/* Pack / curso */
.pack { background: var(--spark); color: #fff; border: var(--rule) solid var(--ink); box-shadow: var(--shadow-hard); padding: clamp(1.5rem, 4vw, var(--space-5)); }
.pack .tape { font-size: 1rem; padding: 0.4em 0.8em; }
.pack__grid { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.pack .price { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; }
.pack__left h3 { color: #fff; }
.pack__list { display: grid; gap: 0.6rem; margin-top: var(--space-3); }
.pack__list li { position: relative; padding-left: 1.6em; font-size: var(--fs-lg); }
.pack__list li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.pack__right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.pack__note { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; margin-top: 0.3rem; }
@media (min-width: 760px) {
  .pack__grid { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
  /* Columna derecha: precio + CTA agrupados y centrados (evita el hueco de space-between);
     el botón ocupa el ancho de su columna para no quedar pequeño y descolgado a la izquierda. */
  .pack__right { justify-content: center; align-items: stretch; border-left: var(--rule) solid rgba(255,255,255,.45); padding-left: var(--space-5); }
  .pack__right .btn { width: 100%; justify-content: center; }
}

/* Newsletter */
.news { background: var(--accent); color: #fff; border-block: var(--rule-thick) solid var(--ink); }
.news__form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.news__form input { flex: 1 1 240px; padding: 1em 1.1em; border: var(--rule) solid var(--ink); font-family: var(--font-body); font-size: var(--fs-base); }

/* Secciones con banda (fondo alterno + filete arriba/abajo). Global: la usa la home (jorge y cursos). */
.section.is-band { background: var(--bg-alt); border-block: var(--rule) solid var(--ink); }

/* Cierre: banda CTA final compartida por las páginas (cada página añade sus h2/p/__note). */
.cierre { background: var(--accent); color: #fff; border-block: var(--rule-thick) solid var(--ink); text-align: center; }
.cierre__cta { margin-top: var(--space-3); display: inline-flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* Agenda / eventos (opción A: con tira en home) */
.agenda { display: grid; gap: var(--space-2); }
.event { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: var(--rule) solid var(--ink); }
.event__date { font-family: var(--font-mono); font-weight: 700; text-align: center; line-height: 1; }
.event__date b { display: block; font-size: 1.8rem; color: var(--accent); }
.event__date span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* --- Breakpoints variante --- */
@media (min-width: 720px) {
  .doors { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .quiz__options { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .levels-quick { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); }
  .hero h1 { white-space: nowrap; }
  .jorge { grid-template-columns: 0.9fr 1.1fr; }
  .doors { grid-template-columns: repeat(4, 1fr); }
  /* Barra de niveles compacta: titular + 4 niveles + captura en una franja baja */
  .levelbar__inner { grid-template-columns: minmax(240px, 0.9fr) 2fr; column-gap: var(--space-5); row-gap: var(--space-3); align-items: center; }
  .levelbar h2 { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .levels-quick { grid-column: 2; }
  .capture { grid-column: 2; }

  /* Álbum tipo "fotos tiradas sobre la mesa": scatter absoluto COMPACTO y solapado (como el
     prototipo), pero con fotos pequeñas (~24-38%) y cluster diagonal para que los 6 PIES queden
     siempre visibles en los huecos. Alto fijo + max-width 505: en columnas más estrechas las fotos
     encogen pero el alto se mantiene, así los pies nunca se tapan (solo sobra un poco de aire). */
  .album { position: relative; display: block; height: 590px; max-width: 505px; margin-inline: 0; }
  .snap { position: absolute; margin: 0; max-width: none; }
  .snap.r1 { width: 34%; top: 0;   left: 2%;  --rot: -6deg; z-index: 1; }
  .snap.r2 { width: 35%; top: 5%;  left: 45%; --rot: 5deg;  z-index: 2; }
  .snap.r3 { width: 27%; top: 30%; left: 13%; --rot: 4deg;  z-index: 3; }
  .snap.r4 { width: 28%; top: 34%; left: 42%; --rot: -5deg; z-index: 2; }
  .snap.r5 { width: 32%; top: 62%; left: 1%;  --rot: 3deg;  z-index: 4; }
  .snap.r6 { width: 38%; top: 68%; left: 45%; --rot: -3deg; z-index: 6; }
  .snap:hover { transform: rotate(0deg) scale(1.04); z-index: 9; }
}

/* --- MÓVIL --- */
/* Álbum del hero como slider: una polaroid a la vez, deslizable */
@media (max-width: 939px) {
  .hero__grid > * { min-width: 0; }
  .album { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-3); min-width: 0; max-width: 100%; margin-inline: 0; padding-bottom: var(--space-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .album::-webkit-scrollbar { display: none; }
  .album .snap { flex: 0 0 76vw; width: 76vw; max-width: 340px; scroll-snap-align: center; --rot: 0deg; }
  .album .snap img { aspect-ratio: 4 / 3; }
}
/* Pack de bienvenida en móvil: tamaños ajustados + botón a ancho completo */
@media (max-width: 759px) {
  .pack { padding: var(--space-3); }
  .pack .tape { font-size: 0.9rem; }
  .pack__grid { margin-top: var(--space-3); gap: var(--space-4); }
  .pack__left h3 { font-size: 1.5rem; }
  .pack__list li { font-size: var(--fs-base); }
  .pack__right { gap: var(--space-3); }
  .pack .price { font-size: 3.6rem; }
  .pack__right .btn { width: 100%; justify-content: center; }
}

/* === Hero: botón "Únete al club" + redes sociales en verde, misma fila === */
.hero__actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.hero__actions .hero__cta { margin-top: 0; }
.hero__social { gap: 0.25rem; align-items: center; }
.hero__social li { margin: 0; }
.hero__social .wp-social-link, .hero__social .wp-block-social-link { padding: 5px; background-color: transparent; }
.hero__social .wp-social-link svg, .hero__social .wp-block-social-link svg { width: 36px; height: 36px; fill: var(--green); color: var(--green); }
.hero__social .wp-social-link:hover svg, .hero__social .wp-block-social-link:hover svg { fill: var(--green-dark); transform: translateY(-1px); }

/* === Polaroids: pie de foto centrado dentro de cada polaroid, sin desbordar === */
.snap figcaption.wp-block-image__caption,
.snap figcaption {
  position: absolute; margin: 0; bottom: 9px; left: 6px; right: 6px; width: auto;
  text-align: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.01em; text-transform: lowercase; color: var(--ink-soft); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Refinos: iconos hero en verde (forzar sobre color de marca de WP) --- */
.hero__social .wp-social-link svg, .hero__social .wp-block-social-link svg { fill: var(--green) !important; color: var(--green) !important; }
.hero__social .wp-social-link:hover svg, .hero__social .wp-block-social-link:hover svg { fill: var(--green-dark) !important; }
/* caption polaroid un pelín más pequeño para que quepan los largos */
.snap figcaption.wp-block-image__caption, .snap figcaption { font-size: 0.74rem; }

/* === Página de Jorge Castellanos: foto + texto completo aprovechando el ancho === */
.jorge--page { align-items: start; }
.jorge__text { display: grid; gap: var(--space-2); }
.jorge__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.2rem); line-height: 0.98; letter-spacing: -0.01em; }
.jorge__name .dot { color: var(--accent); }
.jorge--page .lead { margin-top: 0; max-width: none; }
.jorge--page .jorge__bio { max-width: none; margin-top: var(--space-1); }

/* enlace "Conoce a Jorge" (bio reducida en home/academia) */
.jorge__more { margin-top: var(--space-2); }
.jorge__more a { font-family: var(--font-mono); font-weight: 600; color: var(--accent-ink); text-decoration: none; letter-spacing: 0.02em; }
.jorge__more a:hover { text-decoration: underline; }

/* nota "en pausa" de meetups (verano) */
.ccard__pause { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; margin-top: var(--space-2); }

/* === Home/Academia: sección de Jorge con foto más contenida (bio reducida) === */
#jorge .jorge { align-items: center; }
@media (min-width: 880px) {
  #jorge .jorge { grid-template-columns: 0.72fr 1.28fr; }
  #jorge .jorge__photo { max-width: 320px; justify-self: start; }
}
/* "Conoce a Jorge" pasa a botón ghost visible */
.jorge__more { margin-top: var(--space-3); }
.jorge__more a { display: inline-block; font-family: var(--font-mono); font-weight: 700; color: var(--accent-ink); text-decoration: none; letter-spacing: 0.04em; padding: 0.7em 1.15em; border: var(--rule) solid var(--accent-ink); transition: transform .1s ease, box-shadow .1s ease; }
.jorge__more a:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--accent-ink); }

/* === Footer: iconos de redes bajo el claim de marca === */
.footer__social { display: flex; gap: 0.6rem; margin-top: var(--space-3); }
.footer__social a { color: var(--green-light); display: inline-flex; line-height: 0; transition: color .12s ease, transform .12s ease; }
.footer__social a:hover { color: #fff; transform: translateY(-2px); }

/* === Infantil: info del cierre en 3 columnas (Precio · Horario · Edad), aprovecha el ancho === */
.cierre--info .cierre__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) auto; max-width: 920px; text-align: left; }
.cinfo { display: grid; gap: 0.4rem; align-content: start; padding-left: var(--space-3); border-left: var(--rule) solid rgba(255,255,255,.35); }
.cinfo__k { font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.cinfo__v { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.cinfo__v span { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; opacity: 0.85; margin-left: 0.15em; }
.cinfo__d { font-size: var(--fs-sm); line-height: 1.45; opacity: 0.92; max-width: 32ch; }
@media (max-width: 719px) { .cierre--info .cierre__info { grid-template-columns: 1fr; gap: var(--space-3); } }