/* ═════════ Club (suscripción mensual de vinos, 26/10/2026) ═════════
   La página #/club, la banda de la portada, el botón de baja y el precio de socio en los productos.
   Misma idea que el resto: la caja y sus marcas estarcidas. Acá la caja es sorpresa: se ven las botellas
   asomando, nunca cuáles son. Bordó (vino) y dorado; sin sombras ni esquinas redondeadas.
   Va después de estiba-semana.css. */

/* Precio de socio en tarjetas, filas y ficha */
.precio-socio { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--borravino); text-decoration: none; }
.precio-socio b { font-weight: 800; }
a.precio-socio { text-decoration: underline; text-decoration-color: var(--borravino-claro); text-underline-offset: 3px; }
@media (hover: hover) { a.precio-socio:hover { text-decoration-color: var(--borravino); } }
.precio-socio--activo { padding: 4px 8px; background: var(--borravino-claro); }
.fila__precio .precio-socio { display: flex; }

/* Banda de la portada */
.club-teaser { background: var(--borravino); color: #fff; padding: clamp(64px, 8vw, 120px) 0; }
.club-teaser__grilla { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.club-teaser__grilla > div { display: grid; gap: 18px; }
.club-teaser h2 { margin: 0; font-weight: 800; font-size: clamp(48px, 6.4vw, 104px); line-height: 0.92; letter-spacing: -0.03em; }
.club-teaser .lectura { margin: 0; font-size: 20px; line-height: 1.45; max-width: 34ch; }
.club-teaser p { margin: 0; }
.club-teaser__datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.club-teaser__datos li { display: grid; gap: 4px; padding: 20px; background: var(--borravino-hondo); }
.club-teaser__datos b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--dorado-claro); }
.club-teaser__datos span { font-size: 15px; color: #f1dfe3; }
.club-cabeza__ante { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado-claro); }

/* Página del club */
.vista:has(.club-pagina) { padding: 0; }
.club-pagina { padding-bottom: clamp(64px, 8vw, 120px); }
.club-cabeza { background: var(--borravino); color: #fff; padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 88px); }
.club-cabeza .volver { color: var(--dorado-claro); }
.club-cabeza__grilla { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.club-cabeza__grilla > div { display: grid; gap: 18px; justify-items: start; }
.club-cabeza h1 { margin: 0; font-weight: 800; font-size: clamp(52px, 8vw, 132px); line-height: 0.9; letter-spacing: -0.035em; max-width: 12ch; }
.club-cabeza__bajada { margin: 0; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; max-width: 34ch; }
.club-cabeza__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.club-enlace { border: 0; padding: 8px 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--dorado); text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; }

/* La caja sorpresa */
.club-caja { width: 100%; max-width: 420px; height: auto; justify-self: end; overflow: visible; }
.club-caja__botella { color: #120509; }
/* La tapa queda abierta (estado final, también con "reducir movimiento"); la animación parte de cerrada. */
.club-caja__tapa { transform-box: fill-box; transform-origin: 50% 50%; transform: translate(0, -74px) rotate(-4deg); }
.club-caja__signo { font-family: var(--f-letra); font-weight: 800; font-size: 96px; fill: var(--borravino-hondo); transform-box: fill-box; transform-origin: center; }
.club-caja__marca { font-family: var(--f-letra); font-weight: 800; font-size: 15px; letter-spacing: 0.12em; fill: var(--borravino-hondo); }

/* Secciones */
.club-pagina h2 { margin: 0 0 clamp(18px, 2vw, 28px); font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--borravino); }
.club-pista, .club-beneficios, .club-pasos, .club-anteriores, .club-alta, .club-socio { padding-top: clamp(48px, 6vw, 88px); }
.club-pista blockquote { margin: 0; max-width: 40ch; font-size: clamp(22px, 2.6vw, 34px); font-style: italic; line-height: 1.35; }
.club-pista blockquote + blockquote { margin-top: 20px; }
.club-pista blockquote small { display: block; margin-top: 8px; font-family: var(--f-texto); font-style: normal; font-size: 14px; color: var(--tinta-3); }
.club-pista__nota { margin: 18px 0 0; color: var(--tinta-3); }

.club-beneficios ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; }
.club-beneficios li { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--blanco); }
.club-beneficios b { font-size: 20px; font-weight: 800; line-height: 1.15; }
.club-beneficios .lectura { font-size: 17px; line-height: 1.45; color: var(--tinta-2); }

.club-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: paso; }
.club-pasos li { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--fondo-2); counter-increment: paso; }
.club-pasos li::before { content: counter(paso, decimal-leading-zero); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; color: var(--borravino); }
.club-pasos b { font-size: 19px; font-weight: 800; }
.club-pasos span { font-size: 16px; line-height: 1.45; color: var(--tinta-2); }
.club-pasos__baja { margin: 18px 0 0; }
.club-pasos__baja a, .club-baja a { color: var(--borravino); }

.club-anteriores__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px; }
.club-anteriores article { padding: 24px; background: var(--blanco); }
.club-anteriores h3 { margin: 0 0 12px; font-size: 20px; text-transform: capitalize; }
.club-anteriores ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.club-anteriores li { display: grid; gap: 4px; }
.club-anteriores li small { color: var(--tinta-3); }

/* Alta: planes y formulario */
.club-alta { scroll-margin-top: calc(var(--alto-barra) + 16px); }
.club-alta:focus, .club-socio:focus { outline: none; }
.club-alta__grilla { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.club-planes { display: grid; gap: 4px; }
.club-plan { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 22px 22px 22px 56px; background: var(--blanco); cursor: pointer; transition: background-color 160ms var(--ease-out); }
.club-plan input { position: absolute; left: 22px; top: 26px; width: 20px; height: 20px; margin: 0; accent-color: var(--borravino); }
.club-plan:has(input:checked) { background: var(--borravino-claro); }
.club-plan:has(input:focus-visible) { outline: 2px solid var(--borravino); outline-offset: 2px; }
.club-plan__nombre { font-size: 20px; font-weight: 800; }
.club-plan__precio { font-size: 22px; font-weight: 800; text-align: right; color: var(--borravino); }
.club-plan__precio small { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.club-plan__detalle { color: var(--tinta-2); }
.club-plan--pronto { cursor: default; color: var(--tinta-3); }
.club-plan--pronto .club-plan__precio { font-size: 15px; color: var(--tinta-3); }
.club-planes .aviso-promo { margin-top: 12px; }
.club-alta__form { padding: clamp(20px, 3vw, 36px); background: var(--blanco); }
.club-alta__form h3 { margin: 0 0 18px; font-size: 22px; font-weight: 800; }
#form-club .boton-primario { margin-top: 22px; }
.club-alta__ok { margin-top: 18px; }
.club-plazo { border: 0; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.club-plazo legend { padding: 0; margin-bottom: 10px; font-size: 22px; font-weight: 800; }
.club-plazo label { display: flex; gap: 8px; align-items: center; font-weight: 700; min-height: 44px; }
.club-plazo input { width: 20px; height: 20px; margin: 0; accent-color: var(--borravino); }
.club-plazo .campo__ayuda { flex-basis: 100%; }
.club-alta__ok label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.4; }
.club-alta__ok input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--borravino); }
.club-alta__ok a { color: var(--borravino); }

/* Paso 2 y código de baja */
.club-pago { display: grid; gap: 14px; justify-items: start; }
.club-pago__paso { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--borravino); }
.club-pago h3 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; outline: none; }
.club-pago .lectura { margin: 0; font-size: 18px; line-height: 1.5; max-width: 52ch; }
.club-pago__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.club-pago .nota { margin: 0; }

/* Ya soy socio */
.club-socio { scroll-margin-top: calc(var(--alto-barra) + 16px); }
.club-socio .lectura { margin: 0 0 16px; max-width: 52ch; font-size: 18px; line-height: 1.45; }
.club-socio__fila { display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; }
.club-socio__fila input { flex: 1 1 220px; min-height: 52px; padding: 0 16px; border: 1px solid var(--linea-2); background: var(--blanco); font: inherit; font-size: 17px; text-transform: uppercase; }
.club-socio .campo__ayuda { display: block; margin-top: 10px; }

/* Botón de baja */
.club-baja .vista__bajada { max-width: 60ch; }
.club-baja .bloque-form { max-width: 820px; }
.club-baja .bloque-form .boton-primario { margin-top: 20px; }
.club-pago--baja { max-width: 820px; padding: clamp(20px, 3vw, 36px); background: var(--blanco); }

@media (max-width: 900px) {
  .club-teaser__grilla, .club-cabeza__grilla, .club-alta__grilla { grid-template-columns: 1fr; }
  .club-caja { justify-self: center; max-width: 320px; }
  .club-pasos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .club-pasos ol, .club-teaser__datos { grid-template-columns: 1fr; }
  .club-plan { grid-template-columns: 1fr; }
  .club-plan__precio { text-align: left; }
  .club-cabeza__acciones .boton-papel { width: 100%; }
}

/* Entrar como socio (29/10/2026) */
.club-enlace--oscuro { color: var(--borravino); text-decoration-color: var(--borravino-claro); }
.club-entrar { max-width: 720px; }
.club-socio .club-pago { margin-top: 4px; }
.club-socio .club-pago .club-socio__fila { margin-top: 6px; }