/* ============================================================
   Club Cedral — el CSS del mockup aprobado mockups/club-cedral.html (v2), celular primero.
   Es el del mockup, regla por regla, con tres cambios para vivir dentro del sitio:
   · todo va bajo .club (el contenedor de la página), para que sus reglas de h1, h2, p, img y
     .btn no toquen el header, el pie ni la verificación de edad;
   · sin la barra de arriba ni la etiqueta «Mockup» (el header y el pie son los del sitio), y
     las curvas y el isotipo salen de los archivos del sitio (img/), no incrustados;
   · la familia de letra es la del sitio (--f de cedral.css).
   Lo que no viene del mockup va aparte, al final.

   Concepto (del mockup): la tarjeta de socio es el objeto central. Verde profundo de noche
   (montaña) arriba, hueso de día para armar la caja, y la caja se ve desde arriba como chapas
   por estilo. Paleta del mockup + un dorado de etiqueta solo para la tarjeta.
   ============================================================ */
.club{
  --hueso:#EFEBE1; --hueso-2:#E5DFD1; --tinta:#1F2420; --tinta-2:#525a53;
  --verde:#1B2A20; --verde-2:#24382B; --verde-txt:#EEF0E9; --verde-txt-2:#B7C2B5;
  --boton:#2C5E3A; --boton-h:#244E30; --oro:#C9A35A; --linea:rgba(31,36,32,.12); --linea-n:rgba(238,240,233,.16);
  color-scheme:light;
}
.club *{box-sizing:border-box}

.club{background:var(--hueso);color:var(--tinta);font-family:var(--f);-webkit-font-smoothing:antialiased;font-size:16px}
.club img{display:block;max-width:100%}
.club .w{max-width:1080px;margin:0 auto;padding-inline:22px}
.club .ceja{font:600 11px/1 var(--f);letter-spacing:.3em;text-transform:uppercase;margin:0 0 16px;color:var(--tinta-2)}
.club h1,.club h2,.club h3{text-wrap:balance;margin:0}
.club h2{font-weight:300;font-size:clamp(30px,7.6vw,52px);line-height:1.04;letter-spacing:-.02em}
.club h2 b,.club h1 b{font-weight:800}
.club p{margin:0}
.club .lead{font-size:17px;line-height:1.6;color:var(--tinta-2);max-width:56ch}
.club .oscuro{background:var(--verde);color:var(--verde-txt)}
.club .oscuro .ceja{color:var(--verde-txt-2)}
.club .oscuro .lead{color:var(--verde-txt-2)}
.club .curvas{position:absolute;inset:0;background:currentColor;-webkit-mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat;mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat;pointer-events:none}
.club .iso{width:26px;height:21px;background:currentColor;-webkit-mask:url(../../img/cedral-isotipo.svg?v=638b6b81) center/contain no-repeat;mask:url(../../img/cedral-isotipo.svg?v=638b6b81) center/contain no-repeat}

/* HERO */
.club .hero{position:relative;overflow:hidden;padding:46px 0 64px;color:var(--verde-txt)}
.club .hero .curvas{color:rgba(238,240,233,.07)}
.club .hero .w{position:relative;display:grid;gap:34px}
.club .hero h1{font-weight:300;font-size:clamp(40px,11.5vw,76px);line-height:.98;letter-spacing:-.025em}
.club .hero .lead{margin-top:18px}
@media (min-width:900px){.club .hero .w{grid-template-columns:1.05fr .95fr;align-items:center}.club .hero{padding:90px 0 110px}}

/* TARJETA */
.club .escena{perspective:1100px;display:grid;justify-items:center;gap:18px}
.club .tarjeta{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;width:min(100%,380px);aspect-ratio:1.586;border-radius:18px;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#2f4a37 0%,#1d3024 45%,#14211a 100%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(201,163,90,.35) inset;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  animation:club-flota 6s ease-in-out infinite;touch-action:none;cursor:grab;color:var(--verde-txt)}
.club .tarjeta.activa{animation:none;transition:transform .08s linear}
@keyframes club-flota{0%,100%{transform:rotateX(6deg) rotateY(-10deg) translateY(0)}50%{transform:rotateX(-2deg) rotateY(8deg) translateY(-6px)}}
.club .tarjeta .curvas{color:rgba(201,163,90,.22)}
.club .tarjeta .brillo{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.22),rgba(255,255,255,0) 45%);mix-blend-mode:screen;pointer-events:none}
.club .tarjeta .t-in{position:absolute;inset:0;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between}
.club .t-fila{display:flex;justify-content:space-between;align-items:flex-start}
.club .t-club{font:800 13px/1.15 var(--f);letter-spacing:.26em;text-transform:uppercase}
.club .t-club span{display:block;font-weight:500;font-size:9.5px;letter-spacing:.3em;color:var(--oro);margin-top:6px}
.club .tarjeta .iso{width:42px;height:34px;background:var(--oro)}
.club .t-chip{width:38px;height:28px;border-radius:5px;background:linear-gradient(135deg,#e3c98f,#a9853f);opacity:.85}
.club .t-nombre{font:600 clamp(16px,4.6vw,20px)/1.1 var(--f);letter-spacing:.04em;min-height:1.1em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.club .t-pie{margin-top:10px;display:flex;justify-content:space-between;font:500 9.5px/1.4 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--verde-txt-2);font-variant-numeric:tabular-nums}
.club .t-pie b{display:block;color:var(--verde-txt);font-weight:700;font-size:11px}
.club .nombre-campo{display:flex;flex-direction:column;gap:6px;width:min(100%,380px)}
.club .nombre-campo label{font:600 10px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:var(--verde-txt-2)}
.club .nombre-campo input{font:500 16px/1 var(--f);padding:13px 14px;background:rgba(255,255,255,.06);border:1px solid var(--linea-n);color:var(--verde-txt);border-radius:0}
.club .nombre-campo input:focus{outline:2px solid var(--oro);outline-offset:1px}
.club .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--f);letter-spacing:.05em;padding:17px 22px;text-decoration:none;border:0;cursor:pointer}
.club .btn.lleno{background:var(--boton);color:#fff}
.club .btn.lleno:hover{background:var(--boton-h)}
.club .btn.claro{background:var(--hueso);color:var(--tinta)}
.club .btn.borde{border:1px solid currentColor;background:transparent;color:inherit}
.club .btn:focus-visible,.club .op:focus-visible,.club .paso button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.club .hero .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.club .sellos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font:500 12px/1.4 var(--f);color:var(--verde-txt-2)}
.club .sellos span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--oro);margin-right:8px;vertical-align:middle}

/* ARMADOR */
.club .armar{padding:68px 0 76px}
.club .armar .w{display:grid;gap:34px}
@media (min-width:900px){.club .armar .w{grid-template-columns:1fr 1fr;align-items:start}.club .caja-col{position:sticky;top:90px}}
.club .pasos{display:grid;gap:26px}
.club .paso h3{font:700 12px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:12px;display:flex;gap:10px;align-items:center}
.club .paso h3 i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tinta);color:var(--hueso);font-size:11px;letter-spacing:0}
.club .ops{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.club .op{appearance:none;border:1px solid var(--linea);background:#F6F3EC;color:var(--tinta);padding:14px 12px;text-align:left;font:500 14px/1.25 var(--f);cursor:pointer;min-width:0}
.club .op small{display:block;font-size:11.5px;color:var(--tinta-2);margin-top:4px;line-height:1.35}
.club .op b{font-weight:800;font-size:22px;letter-spacing:-.02em;display:block}
.club .op[aria-pressed="true"]{background:var(--verde);color:var(--verde-txt);border-color:var(--verde)}
.club .op[aria-pressed="true"] small{color:var(--verde-txt-2)}
.club .mi-caja{display:grid;gap:6px;margin-top:12px}
.club .mi-caja[hidden]{display:none}
.club .fila-est{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:8px 10px;background:#F6F3EC;border:1px solid var(--linea)}
.club .punto{width:18px;height:18px;border-radius:50%}
.club .stp{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--f);font-variant-numeric:tabular-nums}
.club .stp button{width:32px;height:32px;border:1px solid var(--linea);background:#fff;font:600 18px/1 var(--f);cursor:pointer;color:var(--tinta)}
.club .resta{font:600 12px/1.4 var(--f);color:var(--tinta-2)}
.club .resta.ok{color:var(--boton)}
.club .caja-col{display:grid;gap:16px}
.club .caja{background:linear-gradient(180deg,#7a5634,#5b3e24);padding:16px;border-radius:4px;box-shadow:inset 0 0 0 6px rgba(0,0,0,.18),0 18px 40px -18px rgba(0,0,0,.45);position:relative}
.club .caja::before{content:attr(data-rotulo);text-transform:uppercase;position:absolute;top:-9px;left:16px;background:var(--hueso);padding:2px 8px;font:700 9px/1.2 var(--f);letter-spacing:.24em;color:var(--tinta-2)}
.club .rejilla{display:grid;gap:6px;background:rgba(0,0,0,.25);padding:8px;border-radius:2px}
/* La caja de chapas (10.10.2026, mockup aprobado «Caja de chapas Cedral»): cada hueco es una
   chapa con dos caras. El frente es la chapa Cedral real (img/chapa-cedral.webp?v=fe0676f9) y es el estado
   de todo espacio vacío; el dorso es su silueta (img/chapa-cedral-mascara.png?v=1c3e63f3) rellena con el
   color de la etiqueta, con el nombre completo y un brillo suave. La sombra vive en el hueco
   (::before), nunca en la chapa que gira: una sombra o un filtro ahí aplana el 3D y el frente
   se vería al revés. El nombre se mide contra el hueco (cqw) para caber en todos los tamaños. */
.club .hueco{aspect-ratio:1;position:relative;perspective:600px;container-type:inline-size}
.club .hueco::before{content:"";position:absolute;inset:6% 4% 2%;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.club .chapa{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.35,.5,1)}
.club .chapa.vuelta{transform:rotateY(180deg)}
.club .cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.club .frente{background:url(../../img/chapa-cedral.webp?v=fe0676f9) center/contain no-repeat}
.club .dorso{transform:rotateY(180deg);background:var(--c,#888);
  -webkit-mask:url(../../img/chapa-cedral-mascara.png?v=1c3e63f3) center/contain no-repeat;
          mask:url(../../img/chapa-cedral-mascara.png?v=1c3e63f3) center/contain no-repeat;
  display:grid;place-items:center;text-align:center;color:var(--t,var(--tinta))}
.club .dorso::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),transparent 46%),radial-gradient(circle,transparent 58%,rgba(0,0,0,.22) 76%)}
.club .dorso b{position:relative;z-index:1;width:70%;font:800 15cqw/1.02 var(--f);text-wrap:balance;overflow-wrap:anywhere}
.club .dorso b.largo{font-size:12cqw}
.club .leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12.5px/1.4 var(--f);color:var(--tinta-2)}
.club .leyenda span{display:inline-flex;align-items:center;gap:6px}
.club .leyenda i{width:10px;height:10px;border-radius:50%;display:inline-block}
.club .precio{border-top:1px solid var(--linea);padding-top:16px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.club .precio .antes{font-size:14px;color:var(--tinta-2);text-decoration:line-through}
.club .precio .club-precio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.club .precio .club-precio b{font-weight:800;font-size:clamp(34px,9vw,44px);letter-spacing:-.03em}
.club .precio .club-precio span{font-size:14px;color:var(--tinta-2)}
.club .ahorro{display:inline-block;background:var(--verde);color:var(--verde-txt);font:600 13px/1.3 var(--f);padding:8px 12px;width:fit-content}
.club .nota{font-size:11.5px;color:var(--tinta-2)}

/* KEG */
.club .keg-vis{background:linear-gradient(180deg,#24382B,#1B2A20);border-radius:6px;padding:22px 18px 18px;display:grid;justify-items:center;gap:12px;color:var(--verde-txt);position:relative;overflow:hidden}
.club .keg-vis .curvas{color:rgba(201,163,90,.12)}
.club .keg-vis svg{width:min(220px,70%);height:auto;position:relative}
.club .keg-vis .k-et{font:700 11px/1.2 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--oro);position:relative}
.club .keg-vis .k-n{font:300 15px/1.3 var(--f);position:relative;text-align:center}
.club .lineas{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.club .linea{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;border-bottom:1px dashed var(--linea);padding-bottom:6px}
.club .linea b{font-weight:700}
.club .linea.unico{color:var(--tinta-2)}
.club .pasos-g{display:grid;gap:26px}
.club .vis-caja{display:grid;gap:16px}
.club .kegband{padding:72px 0;position:relative;overflow:hidden}
.club .kegband .curvas{color:rgba(238,240,233,.05)}
.club .kegband .w{position:relative}
.club .ktres{display:grid;gap:10px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.club .kp{border:1px solid var(--linea-n);padding:18px;display:grid;gap:6px}
.club .kp i{font:800 12px/1 var(--f);font-style:normal;color:var(--oro);letter-spacing:.2em}
.club .kp b{font-weight:700;font-size:17px}
.club .kp span{font-size:14px;line-height:1.5;color:var(--verde-txt-2)}
.club .gym{margin-top:24px;border-left:2px solid var(--oro);padding:6px 0 6px 16px;color:var(--verde-txt-2);font-size:15px;line-height:1.55;max-width:58ch}
/* AÑO EN EL CLUB */
.club .anio{padding:72px 0}
.club .sendero{position:relative;margin-top:36px;display:grid;gap:0}
.club .sendero::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(to bottom,var(--tinta) 0 6px,transparent 6px 12px);opacity:.35}
.club .hito{position:relative;display:grid;grid-template-columns:32px 1fr;gap:16px;padding:0 0 30px}
.club .hito::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--hueso);border:2px solid var(--tinta);margin:6px 0 0 9px;position:relative;z-index:1}
.club .hito.oro::before{background:var(--oro);border-color:var(--oro);box-shadow:0 0 0 5px rgba(201,163,90,.25)}
.club .hito .cuando{font:700 11px/1 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:8px}
.club .hito h3{font-weight:700;font-size:20px;line-height:1.25;margin-bottom:6px}
.club .hito p{font-size:15.5px;line-height:1.55;color:var(--tinta-2);max-width:52ch}
@media (min-width:900px){.club .anio .w{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}.club .sendero{margin-top:0}}

/* CERVEZA DEL CLUB */
.club .voto{position:relative;overflow:hidden;padding:76px 0}
.club .voto .curvas{color:rgba(238,240,233,.06)}
.club .voto .w{position:relative}
.club .tanda{display:inline-block;border:1px solid var(--oro);color:var(--oro);font:700 11px/1 var(--f);letter-spacing:.24em;padding:9px 12px;margin-bottom:20px;text-transform:uppercase}
.club .vasos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px;max-width:640px}
.club .vaso{appearance:none;background:transparent;border:1px solid var(--linea-n);color:var(--verde-txt);padding:16px 8px 14px;cursor:pointer;display:grid;justify-items:center;gap:10px;font:inherit;min-width:0}
.club .vaso[aria-pressed="true"]{border-color:var(--oro);background:rgba(201,163,90,.08)}
.club .copa{width:44px;height:86px;position:relative;clip-path:polygon(4% 0,96% 0,82% 100%,18% 100%);background:rgba(255,255,255,.08)}
.club .copa i{position:absolute;left:0;right:0;bottom:0;height:var(--h,0%);background:var(--c);transition:height 1s cubic-bezier(.2,.8,.2,1)}
.club .copa i::before{content:"";position:absolute;left:0;right:0;top:-8px;height:10px;background:#f5efe2;border-radius:6px 6px 0 0}
.club .vaso .let{font:800 18px/1 var(--f)}
.club .vaso small{font:500 11.5px/1.35 var(--f);color:var(--verde-txt-2);text-align:center}
.club .vaso .pct{font:700 14px/1 var(--f);color:var(--oro);min-height:14px;font-variant-numeric:tabular-nums}
.club .gracias{margin-top:16px;font-size:14px;color:var(--verde-txt-2);min-height:20px}

/* MONTAÑA */
.club .montana{padding:72px 0}
.club .casas{display:grid;gap:12px;margin-top:30px}
@media (min-width:900px){.club .casas{grid-template-columns:repeat(3,1fr)}}
.club .casa{border:1px solid var(--linea);padding:22px;background:#F6F3EC;display:grid;gap:10px;align-content:start}
.club .casa .quien{font:700 11px/1 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-2)}
.club .casa h3{font-weight:700;font-size:20px;line-height:1.25}
.club .casa ul{margin:0;padding-left:18px;color:var(--tinta-2);line-height:1.6;font-size:15px}
.club .casa .def{font:500 11.5px/1.3 var(--f);color:var(--tinta-2);border-top:1px solid var(--linea);padding-top:10px;margin-top:4px}

/* CONTROL */
.club .control{padding:0 0 72px}
.club .mandos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:26px}
@media (min-width:900px){.club .mandos{grid-template-columns:repeat(4,1fr)}}
.club .mando{border:1px solid var(--linea);padding:18px 16px;display:grid;gap:8px}
.club .mando svg{width:24px;height:24px;stroke:var(--tinta);fill:none;stroke-width:1.6}
.club .mando b{font-weight:700;font-size:16px}
.club .mando span{font-size:13.5px;line-height:1.45;color:var(--tinta-2)}

/* EMPRESAS */
.club .empresas{padding:76px 0;position:relative;overflow:hidden}
.club .empresas .curvas{color:rgba(238,240,233,.05)}
.club .empresas .w{position:relative}
.club .usos{display:grid;gap:8px;margin:28px 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.club .uso{border:1px solid var(--linea-n);padding:16px;display:grid;gap:4px}
.club .uso b{font-weight:700;font-size:16px}
.club .uso span{font-size:13.5px;color:var(--verde-txt-2);line-height:1.45}
.club .ejemplo{border-left:2px solid var(--oro);padding:6px 0 6px 16px;font-size:15px;line-height:1.55;color:var(--verde-txt-2);margin-bottom:26px;max-width:56ch}

/* FAQ */
.club .faq{padding:72px 0}
.club .faq details{border-bottom:1px solid var(--linea);padding:16px 0}
.club .faq summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.club .faq summary::after{content:"+";font-weight:300;font-size:22px;line-height:1}
.club .faq details[open] summary::after{content:"–"}
.club .faq details p{margin-top:10px;color:var(--tinta-2);line-height:1.6;max-width:62ch}

/* BARRA FIJA */
.club .barra{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(27,42,32,.97);color:var(--verde-txt);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .35s ease;font-variant-numeric:tabular-nums}
.club .barra.ver{transform:none}
.club .barra .txt{font:500 12px/1.3 var(--f);color:var(--verde-txt-2);min-width:0}
.club .barra .txt b{display:block;color:var(--verde-txt);font-size:17px;font-weight:800}
.club .barra .btn{padding:14px 18px;white-space:nowrap}
/* con «reducir movimiento» las chapas cambian de cara sin girar (sin transición) */
@media (prefers-reduced-motion:reduce){.club .tarjeta{animation:none}.club .chapa{transition:none}.club .copa i{transition:none}}

/* ================================================================
   Lo que no viene del mockup.
   ================================================================ */
/* la tarjeta es digital (Diego, 04.10.2026): la frase va debajo de la tarjeta, con la letra de
   los sellos de la portada */
.club .t-digital{width:min(100%,380px);margin-top:-4px;text-align:center;font:500 12px/1.4 var(--f);color:var(--verde-txt-2)}
/* lo que cubre cada línea del precio del keg, debajo de su rótulo (textos de Diego, 04.10.2026),
   con la letra chica de las opciones del armador */
.club .linea small{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--tinta-2)}
/* 05.10.2026 (Diego): las líneas con enlace que llevan a otra página (debajo del armador, a
   Comprar; al final de Empresas, a Para su negocio), con la letra de las notas */
.club .nota-enlace{font-size:14px;line-height:1.5;color:var(--tinta-2)}
.club .oscuro .nota-enlace{color:var(--verde-txt-2);margin-top:26px}
.club .nota-enlace a{color:inherit;font-weight:700;text-underline-offset:3px}
/* «Keg para su evento», dentro de Empresas: una tarjeta como las de «Keg en casa», con la
   etiqueta dorada, su título y su botón */
.club .evento{border:1px solid var(--linea-n);border-left:2px solid var(--oro);padding:20px 18px;margin-top:34px;
  display:grid;gap:10px;justify-items:start;max-width:640px}
.club .evento .cuando{font:700 11px/1.3 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.club .evento h3{font-weight:700;font-size:20px;line-height:1.25}
.club .evento p:not(.cuando){font-size:15px;line-height:1.55;color:var(--verde-txt-2);max-width:52ch}
.club .evento .btn{margin-top:6px}
/* la lista de preguntas (en el mockup, un style suelto) */
.club .preguntas{margin-top:22px}
/* «Unirme al Club» es un botón y abre el paso de datos; en el mockup era un enlace sin destino */
.club button.btn{font-family:var(--f);width:100%}
/* El paso de datos de la solicitud (nombre, WhatsApp, correo y consentimiento, Ley 8968): con
   las piezas del mockup —el rótulo de los pasos y el campo del nombre de la tarjeta—, sobre
   el hueso. */
.club .solicitud{display:grid;gap:12px;border-top:1px solid var(--linea);padding-top:18px}
.club .solicitud h3{font:700 12px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2)}
.club .campo{display:grid;gap:6px}
.club .campo label{font:600 10px/1.3 var(--f);letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2)}
.club .campo input{font:500 16px/1 var(--f);padding:13px 14px;width:100%;background:#F6F3EC;
  border:1px solid var(--linea);color:var(--tinta);border-radius:0}
.club .campo input:focus{outline:2px solid var(--oro);outline-offset:1px}
.club .campo.chk{grid-template-columns:22px 1fr;align-items:start;gap:10px}
.club .campo.chk input{width:22px;height:22px;margin:0;padding:0;accent-color:var(--boton)}
.club .campo.chk label{font:400 13px/1.45 var(--f);letter-spacing:0;text-transform:none}
.club .campo.chk a,.club .enviada a{color:inherit}
.club .enviada{font:600 14px/1.5 var(--f);color:var(--boton)}
/* los lugares que faltan llenar ya no llevan estilo propio: un hueco vacío muestra la chapa
   Cedral de frente (10.10.2026) */

/* ================================================================
   05.10.2026 (Diego) · fase 1 del Club: los datos para unirse y las Chapas.
   ================================================================ */
/* El paso de datos pide más: cédula, fecha de nacimiento, dirección de entrega y redes. Los
   campos cortos van de a dos (de a tres, los de la dirección) cuando hay ancho; en celular, uno
   debajo del otro. */
.club .campos-2,.club .campos-3{display:grid;gap:12px}
@media (min-width:520px){.club .campos-2{grid-template-columns:1fr 1fr}.club .campos-3{grid-template-columns:repeat(3,1fr)}}
.club .campo select{font:500 16px/1.2 var(--f);padding:13px 14px;width:100%;background:#F6F3EC;border:1px solid var(--linea);
  color:var(--tinta);border-radius:0;min-width:0}
.club .campo select:focus{outline:2px solid var(--oro);outline-offset:1px}
.club .campo select:disabled{opacity:.55}
.club .entrega{border:0;border-top:1px solid var(--linea);margin:6px 0 0;padding:16px 0 0;display:grid;gap:12px;min-width:0}
.club .entrega legend{padding:0 10px 0 0;font:700 12px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2)}
.club .campo [aria-invalid="true"]{border-color:#9B2C1F;outline:2px solid #9B2C1F;outline-offset:1px}
.club .solicitud .error{font:600 14px/1.45 var(--f);color:#9B2C1F}

/* «Así funcionan las Chapas»: tres pasos con las tarjetas de «Keg en casa»; el tercero lleva la
   tabla del catálogo y ocupa todo el ancho. */
.club .chapas{padding:76px 0;position:relative;overflow:hidden}
.club .chapas .curvas{color:rgba(238,240,233,.05)}
.club .chapas .w{position:relative}
.club .ch-pasos{display:grid;gap:10px;margin-top:28px}
@media (min-width:900px){.club .ch-pasos{grid-template-columns:1fr 1fr}.club .ch-cambie{grid-column:1 / -1}}
.club .ch-junte{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.club .ch-junte li{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.5;color:var(--verde-txt-2);
  border-bottom:1px dashed var(--linea-n);padding-bottom:6px}
.club .ch-junte b{font-size:14px;font-weight:700;color:var(--oro);font-variant-numeric:tabular-nums}
.club .ch-tabla{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.club .ch-tabla th,.club .ch-tabla td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--linea-n);vertical-align:top}
.club .ch-tabla thead th{font:700 10.5px/1.3 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--verde-txt-2)}
.club .ch-tabla tbody th{font-weight:600;color:var(--verde-txt)}
.club .ch-tabla td{color:var(--verde-txt-2)}
.club .ch-tabla td:nth-child(2){color:var(--oro);font-weight:700;white-space:nowrap}
.club .ch-tabla th:last-child,.club .ch-tabla td:last-child{padding-right:0}

/* ================================================================
   06.10.2026 (Diego) · «Lo que trae su membresía» reemplaza a las tres casas: los tres grupos
   usan las tarjetas de las casas; el enlace a las cabinas (solo con SECRET_HIDE_URL) y las dos
   notas van debajo, con la letra de las notas.
   ================================================================ */
.club .cabinas{grid-column:1 / -1;font:600 14px/1.5 var(--f)}
.club .cabinas a{color:var(--boton);text-underline-offset:3px}
.club .montana .nota-enlace{margin-top:14px;max-width:62ch}

/* ============================================================
   (09.10.2026) Regla del sitio (CLAUDE.md, «Fundidos»): la página no se ve por secciones.
   · Las curvas de cada bloque aparecen y se desvanecen arriba y abajo: la misma máscara combinada
     de cedral.css (dibujo + degradado, mask-composite). Las de la tarjeta, el keg y la votación
     son recuadros dentro del bloque y quedan como estaban.
   · Cada bloque oscuro aparece desde el hueso y se va en el hueso dentro de su propio relleno
     (.funde-entra / .funde-sale de cedral.css), sin el corte recto contra los bloques claros.
   ============================================================ */
.club section:not(.voto) > .curvas{
  -webkit-mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat,
    linear-gradient(180deg,transparent 0,#000 min(160px,30%),#000 calc(100% - min(220px,35%)),transparent 100%);
          mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat,
    linear-gradient(180deg,transparent 0,#000 min(160px,30%),#000 calc(100% - min(220px,35%)),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.club .oscuro{--funde-entra:var(--hueso);--funde-sale:var(--hueso);
  --funde-entra-alto:64px;--funde-sale-alto:64px}
.club .hero.oscuro{--funde-sale-alto:56px}
@media (min-width:900px){.club .hero.oscuro{--funde-sale-alto:96px}}

/* ================================================================
   14.10.2026 · el Club gratis: el registro, su «Listo», las promociones y «Próximamente».
   ================================================================ */
.club .registro{border-top:0;padding-top:0}
/* el registro de /club: el «Listo» que reemplaza al formulario */
.club .listo{display:grid;gap:14px;border-top:1px solid var(--linea);padding-top:22px}
.club .listo:focus{outline:none}
.club .listo h3{font-weight:300;font-size:clamp(26px,6vw,38px);line-height:1.1;letter-spacing:-.015em}
.club .listo h3 b{font-weight:800}
.club .listo .btn{justify-self:start;width:auto}
.club .ktres.pronto{display:grid;gap:12px;margin-top:24px}
@media (min-width:700px){.club .ktres.pronto{grid-template-columns:1fr 1fr}}
/* las promociones de /club (solo si hay una vigente) */
.club .promos-g{display:grid;gap:12px;margin-top:26px}
@media (min-width:700px){.club .promos-g{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.club .promo{background:#F6F3EC;border:1px solid var(--linea);padding:20px 22px;display:grid;gap:8px}
.club .promo i{font:600 11px/1.3 var(--f);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2)}
.club .promo b{font-size:19px;line-height:1.25}
.club .promo span{font-size:15px;line-height:1.5;color:var(--tinta-2)}
.club .promo .premio{color:var(--boton);font-weight:700}
.club .promo small{font-size:12.5px;color:var(--tinta-2)}
.club .promo[hidden],.club .promos[hidden]{display:none}

/* (16.10.2026) Los enlaces dentro del texto (registro, Para empresas, preguntas, la casilla de
   la caja) salían con el azul del navegador, y violeta una vez visitados: el color del texto que
   los rodea, subrayados, en claro y en oscuro. */
.club p a:not(.btn),.club details a:not(.btn){color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.club p a:not(.btn):hover,.club details a:not(.btn):hover{text-decoration-thickness:2px}

/* La caja del Club (16.10.2026): el armador de a05f5d6, sin precios. La caja y la leyenda van
   juntas; el formulario de «Avíseme» se abre debajo del botón. */
.club .vis-caja{display:grid;gap:12px}
.club .caja-mensual .solicitud{display:grid;gap:12px;border-top:1px solid var(--linea);padding-top:18px}
.club .caja-mensual .solicitud[hidden]{display:none}

/* ================================================================
   17.10.2026 · la parte de abajo del Club, según el mockup aprobado mockups/club-proximamente.html:
   «Próximamente» oscura con aire, curvas que se dibujan (js/club-viene.js) y un filo de cerro con
   línea dorada en vez del degradado; el armador como continuación, con la ola de chapas; la banda
   de empresas. Con «reducir movimiento», todo quieto y visible.
   ================================================================ */
/* 1 · Próximamente */
.club .viene{position:relative;overflow:hidden;color:var(--verde-txt)}
.club .viene .w{position:relative;z-index:1;padding-block:clamp(110px,13vw,160px) clamp(150px,18vw,210px)}
.club .viene .ceja{color:var(--oro)}
.club .viene h2{font-size:clamp(32px,6.4vw,56px)}
/* las curvas, quietas (sin JavaScript o con «reducir movimiento») y sin desvanecerse: la sección
   termina en el filo del cerro */
.club .viene > .curvas{color:rgba(238,240,233,.10);
  -webkit-mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat;mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat}
.club .viene.trazando > .curvas{display:none}
.club .topo{position:absolute;inset:0;width:100%;height:100%;color:rgba(238,240,233,.10);pointer-events:none}
.club .topo path{fill:none;stroke:currentColor;stroke-width:.9;vector-effect:non-scaling-stroke}
.club .topo path.m{stroke-width:1.4;color:rgba(201,163,90,.35)}
.club .tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(40px,6vw,64px)}
.club .tj{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;padding:28px;
  border:1px solid var(--linea-n);background:rgba(27,42,32,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;min-width:0}
.club .tj:hover{transform:translateY(-4px);border-color:rgba(201,163,90,.55);background:rgba(36,56,43,.75)}
.club .tj .pr{font:700 10.5px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin-bottom:12px}
.club .tj h3{font-size:22px;font-weight:700;margin-bottom:8px}
.club .tj p:not(.pr){color:var(--verde-txt-2);font-size:15px;line-height:1.55}
.club .tj .ir{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font:700 14px/1 var(--f);color:var(--verde-txt);
  text-decoration:none;border-bottom:1.5px solid var(--oro);padding-bottom:6px}
.club .tj .ir span{transition:transform .3s ease}
.club .tj .ir:hover span{transform:translateY(3px)}
.club .tj .ir:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.club .mini{display:grid;grid-template-columns:repeat(3,26px);gap:5px;padding:8px;background:linear-gradient(180deg,#7a5634,#5b3e24);
  border-radius:3px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.2)}
.club .mini i{width:26px;height:26px;display:block;background:var(--c);
  -webkit-mask:url(../../img/chapa-cedral-mascara.png?v=1c3e63f3) center/contain no-repeat;mask:url(../../img/chapa-cedral-mascara.png?v=1c3e63f3) center/contain no-repeat}
.club .keg{width:62px;height:auto;color:var(--verde-txt-2)}
/* el filo del cerro: abajo, con la línea dorada; arriba, el mismo filo dado vuelta (sin corte recto) */
.club .cerro{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,9vw,120px);display:block;z-index:1}
.club .cerro.arriba{top:-1px;bottom:auto}
.club .cerro .fondo{fill:var(--hueso)}
.club .cerro .linea{fill:none;stroke:var(--oro);stroke-width:1.2;opacity:.55;vector-effect:non-scaling-stroke}
@media (max-width:700px){
  .club .tarjetas{grid-template-columns:1fr}
  .club .tj{grid-template-columns:minmax(0,1fr)}
  .club .tj .mini,.club .tj .keg{grid-row:1;justify-self:start}
}

/* 2 · el armador: cada chapa es un botón (con «Usted» se toca para cambiarla) */
.club .hueco{appearance:none;border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;cursor:default;display:block;width:100%}
.club .caja.mia .hueco{cursor:pointer}
.club .hueco:focus-visible{outline:2px solid var(--oro);outline-offset:2px;border-radius:50%}
.club .pista{font-size:13px;color:var(--tinta-2);margin-top:10px}
.club .pista[hidden]{display:none}

/* 3 · Para empresas: banda propia, tarjeta blanca con curvas suaves, dos columnas en escritorio */
.club .empresas-banda .w{padding-block:clamp(24px,4vw,40px) clamp(72px,9vw,112px)}
.club .banda{position:relative;overflow:hidden;background:#fff;border:1px solid var(--linea);display:grid;gap:28px;padding:clamp(28px,5vw,56px)}
.club .banda > *{position:relative}
.club .banda > .curvas-banda{position:absolute;inset:0;background:rgba(31,36,32,.05);pointer-events:none;
  -webkit-mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat;mask:url(../../img/curvas-cedral.svg?v=7e03484b) center/cover no-repeat}
.club .banda h2{font-size:clamp(28px,4.6vw,44px)}
.club .banda .der{display:grid;gap:20px;align-content:center;min-width:0}
.club .banda .der p{font-size:16.5px;line-height:1.6;color:var(--tinta-2)}
.club .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.club .chips li{font:600 12.5px/1 var(--f);padding:9px 12px;background:var(--hueso);border:1px solid var(--linea)}
.club .btn-borde{justify-self:start;display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--f);color:var(--boton);
  text-decoration:none;border:1.5px solid var(--boton);padding:17px 24px;transition:background .2s,color .2s}
.club .btn-borde:hover{background:var(--boton);color:#fff}
.club .btn-borde:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
/* (17.10.2026, Diego) el título con más ancho, para que quede en dos o tres líneas y no en cuatro */
@media (min-width:900px){.club .banda{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:center}}

/* con «reducir movimiento»: sin trazo, sin ola, sin levantarse */
@media (prefers-reduced-motion:reduce){
  .club .tj,.club .tj .ir span{transition:none}
  .club .tj:hover{transform:none}
  .club .topo path{transition:none!important;stroke-dashoffset:0!important}
}