/* Críptico Club: estilos compartidos por el popup de index.html y la página club.html.
   Requiere las variables --serif, --sans, --ink, --criptico, --sudoku, --red de la página. */
.club-brand{font-family:var(--serif);font-weight:700;font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:-.01em;line-height:1.05;margin:0}
.club-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#FBF3DC 0%,#F7F2EA 55%,#EFE7D8 100%)}
.cf-item{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * var(--k,1));height:calc(var(--s) * var(--k,1));margin:calc(var(--s) * var(--k,1) / -2) 0 0 calc(var(--s) * var(--k,1) / -2);pointer-events:none}
.cf-in{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cf-item.game .cf-in{border-radius:30%}
.cf-item.game img{width:100%;height:100%;display:block;border-radius:30%;filter:drop-shadow(0 6px 10px rgba(60,40,10,.22))}
.cf-item.perk .cf-in{background:var(--pc,#fff);color:var(--ink);box-shadow:0 6px 16px rgba(60,40,10,.14)}
.cf-item.perk svg{width:46%;height:46%}
.cf-item.gem .cf-in{background:#D9A633;color:var(--ink);box-shadow:0 10px 30px rgba(217,166,51,.55),0 0 0 14px rgba(217,166,51,.16),0 0 0 30px rgba(217,166,51,.08)}
.cf-item.gem svg{width:48%;height:48%}
@keyframes cfin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes cfloat{0%,100%{transform:translate(0,0) rotate(var(--r0,-3deg))}50%{transform:translate(var(--dx,4px),var(--dy,-10px)) rotate(var(--r1,3deg))}}
@media (prefers-reduced-motion:no-preference){.cf-item .cf-in{animation:cfloat var(--t,6s) ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}}

.club-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.9em;align-items:start;margin-bottom:.5em}
.club-col{display:flex;flex-direction:column;gap:.6em}
.club-gitem{display:flex;gap:.86em;align-items:flex-start;min-width:0;height:3.86em;overflow:hidden}
.club-gicon{flex:none;width:2.86em;height:2.86em;border-radius:50%;background:rgba(0,0,0,.05);color:var(--ink);display:flex;align-items:center;justify-content:center}
.club-gicon.tint{background:var(--pc)}
.club-gicon svg{width:1.36em;height:1.36em}
.club-gitem strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.14em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.club-gitem span.club-gtxt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;line-height:1.35;color:rgba(0,0,0,.6)}
.club-tagapp{display:inline-block;margin-left:6px;padding:1px 6px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(0,0,0,.6);background:rgba(0,0,0,.06);vertical-align:2px}
.club-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.club-cta .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;width:14em;height:3.6em;padding:.6em 1em;font-size:1.07em;line-height:1.2;text-align:center}
.club-cta .btn small{font-size:.78em;font-weight:400;opacity:.8}
.club-cta .btn-solid small{opacity:.85}
.club-cta .btn-best{position:relative}
.club-best-tag{position:absolute;top:-.85em;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.15em .7em;background:#D9A633;color:var(--ink);font-size:.72em;font-weight:700;letter-spacing:.03em}
.club-cta-note{font-size:.9em;color:rgba(0,0,0,.55)}
.club-link{background:none;border:none;padding:0;font:inherit;font-size:14px;color:rgba(0,0,0,.7);text-decoration:underline;cursor:pointer}
@media (hover:hover){.club-link:hover{color:var(--ink)}}

/* Página club.html: ocupa el ancho disponible; todo escala con la ventana (ancho y alto) */
.club-screen{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(320px,36%) 1fr;gap:clamp(32px,4vw,96px);align-items:center;padding:64px 0 6px}
.club-info{font-size:clamp(14px,min(1.05vw,1.75vh),22px)}
.club-stage.club-stage-page{height:min(820px,84vh);border-radius:28px}
@media (min-width:1500px){.club-stage-page{--k:1.2}}
@media (min-width:1800px){.club-stage-page{--k:1.4}}
.club-info .club-brand{font-size:3.3em;margin:0 0 .17em}
.club-page-tag{font-family:var(--serif);font-weight:500;font-size:1.86em;line-height:1.2;margin:0 0 .46em}
.club-info .club-cta{margin-top:1.2em}
.club-why{padding:56px 0 8px;border-top:1px solid rgba(0,0,0,.1);max-width:640px}
.club-why-title{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;margin:0 0 14px}
.club-why p{font-size:16px;line-height:1.6;color:rgba(0,0,0,.75);margin:0 0 14px}
.club-why ul{margin:0 0 26px;padding-left:20px;font-size:16px;line-height:1.7;color:rgba(0,0,0,.75)}
.club-why-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.club-why-note{font-size:14px;color:rgba(0,0,0,.55)}
@media (max-width:880px){
  .club-screen{grid-template-columns:1fr;gap:28px;min-height:0;padding:84px 0 8px}
  .club-stage.club-stage-page{height:340px;--k:.7;border-radius:22px}
  .club-info{font-size:14px}
  .club-info .club-brand{font-size:32px}
  .club-page-tag{font-size:20px}
  .club-grid{grid-template-columns:1fr;gap:14px}
}

/* Movimiento de club.html: una entrada escalonada y poco más. Sin bucles ni efectos que no expliquen nada. */
.club-gicon{transition:transform .2s ease-out}
@media (hover:hover){.club-gitem:hover .club-gicon{transform:scale(1.08)}}
.club-tag-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.club-tag-w > span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .club-screen .club-brand{animation:cfrise .6s cubic-bezier(.2,.7,.2,1) both}
  .club-tag-w > span{animation:cfword .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--w) * .07s)}
  .club-screen .club-gitem{animation:cfrise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--i) * .045s)}
  .club-screen .club-cta{animation:cfrise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:1s}
  .club-stage-page .cf-item{animation:cfin .7s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(.1s + var(--d,0s))}
  /* cl-reveal y no reveal: este archivo también lo carga index.html, donde .reveal es el giro de las fichas de Palabra */
  .cl-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .cl-reveal.in{opacity:1;transform:none}
}
@keyframes cfrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cfword{from{transform:translateY(105%)}to{transform:none}}

/* Página de socios (club.html cuando hay Club activo) */
:root{--bh:clamp(120px,19vh,260px)}
.club-banner-wrap{padding-top:60px}
.club-hub{min-height:calc(100vh - 60px - var(--bh));min-height:calc(100svh - 60px - var(--bh));display:flex;flex-direction:column;justify-content:center;padding:12px 0 8px;font-size:clamp(13px,min(1.05vw,1.7vh),19px)}
.club-stage.club-stage-banner{height:var(--bh);border-radius:0;margin:0;width:100%}
@media (min-width:1500px){.club-stage-banner{--k:1.15}}
.club-hub-head{text-align:center;margin-bottom:1em}
.club-hub-head .club-brand{font-size:clamp(30px,min(4vw,7vh),64px);margin:0 0 .12em}
.club-hub-head .club-page-tag{margin:0 0 .3em}
.club-hub-estado{font-size:.95em;color:rgba(0,0,0,.55)}
.club-hub-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:clamp(24px,3vw,64px);align-items:start;padding-bottom:0}
.club-hub .club-col{gap:.7em}
.club-hub .club-grid{margin-bottom:0}
.hub-cards{display:flex;flex-direction:column;gap:.75em}
.hub-card-head{display:flex;align-items:center;justify-content:space-between;gap:1em}
.hub-card-head .btn{margin:0;padding:.55em 1.1em}
.hub-card{border:1px solid rgba(0,0,0,.12);padding:.9em 1.15em}
.hub-card h3{display:flex;align-items:center;gap:.65em;font-family:var(--serif);font-weight:600;font-size:1.2em;line-height:1.2;margin:0}
.hub-ico{flex:none;width:2.1em;height:2.1em;border-radius:50%;background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center}
.hub-ico svg{width:1.05em;height:1.05em}
.hub-card p{font-size:.9em;line-height:1.4;color:rgba(0,0,0,.65);margin:.4em 0 0}
.hub-card .btn{margin-top:.9em;font-size:.95em}
.hub-vacio{background:rgba(217,166,51,.09);border-color:rgba(217,166,51,.35)}
.hub-nota{display:block;font-size:.85em;color:rgba(0,0,0,.55);margin-top:.6em;min-height:1.2em}
.hub-links{margin-top:.7em}
.hub-links a{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.5em 0;border-top:1px solid rgba(0,0,0,.09);color:var(--ink);text-decoration:none;font-size:.95em}
@media (hover:hover){.hub-links a:hover .hub-l{text-decoration:underline}}
.hub-l,.hub-r{display:flex;align-items:center;gap:.7em;min-width:0}
.hub-r{font-size:.82em;color:rgba(0,0,0,.5);white-space:nowrap}
.hub-links svg{width:1.05em;height:1.05em;flex:none}
@media (prefers-reduced-motion:no-preference){
  .club-hub .club-brand{animation:cfrise .6s cubic-bezier(.2,.7,.2,1) both}
  .club-hub-head .club-page-tag{animation:cfrise .6s .12s cubic-bezier(.2,.7,.2,1) both}
  .club-hub-head .club-hub-estado{animation:cfrise .6s .2s cubic-bezier(.2,.7,.2,1) both}
  .club-stage-banner .cf-item{animation:cfin .7s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(.1s + var(--d,0s))}
  .club-hub .club-gitem{animation:cfrise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.3s + var(--i) * .04s)}
  .hub-card{animation:cfrise .5s cubic-bezier(.2,.7,.2,1) both}
  .hub-cards .hub-card:nth-child(1){animation-delay:.35s}.hub-cards .hub-card:nth-child(2){animation-delay:.45s}.hub-cards .hub-card:nth-child(3){animation-delay:.55s}
}
@media (max-width:880px){
  :root{--bh:210px}
  .club-hub{padding-top:18px}
  .club-stage.club-stage-banner{--k:.74}
  .club-hub{min-height:0;display:block}
  .club-hub .club-grid{grid-template-columns:1fr}
  .club-hub-grid{grid-template-columns:1fr}
}
.club-chk .club-screen{visibility:hidden}

/* Detalles de interfaz */
.club-brand,.club-page-tag,.hub-card h3{text-wrap:balance}
.club-gtxt,.hub-card p{text-wrap:pretty}
.club-cta .btn,.club-modal-price{font-variant-numeric:tabular-nums}
.hub-card,.club-gitem>div{overflow-wrap:break-word}

.hub-proximos{display:flex;gap:1.6em;list-style:none;margin:.8em 0 0;padding:0}
.hub-proximos li{display:flex;align-items:center;gap:.7em;font-family:var(--serif);font-weight:600;font-size:1.05em}
.hub-proximos img{width:44px;height:44px;display:block}