@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(/recursos/fuentes/playfair-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(/recursos/fuentes/playfair-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(/recursos/fuentes/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(/recursos/fuentes/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(/recursos/fuentes/montserrat-latin-600-normal.woff2) format("woff2")}

:root{
  --marron:#3b2116;
  --marron-suave:#6a4a3c;
  --crema:#f6eee7;
  --tarjeta:#efe3d8;
  --linea:#5c3f33;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--marron);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
[hidden]{display:none!important}
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.portada{
  position:relative;
  padding:clamp(56px,9vw,88px) 20px clamp(140px,30vw,240px);
  text-align:center;
  background:
    linear-gradient(180deg,rgba(246,238,231,.94) 0%,rgba(246,238,231,.78) 24%,rgba(246,238,231,.30) 46%,rgba(246,238,231,0) 64%),
    url(/recursos/img/fondo-club.webp) center 60%/cover no-repeat,
    #b9a08a;
}
.marca{display:flex;flex-direction:column;align-items:center}
.marca-fila{display:flex;align-items:flex-end;gap:clamp(22px,7vw,52px)}
.logo{width:clamp(64px,14vw,104px);height:auto}
.raya{display:block;width:clamp(42px,11vw,92px);height:2px;background:var(--marron);margin-bottom:9%}
.marca-club{margin-top:clamp(8px,1.6vw,14px);font-weight:500;font-size:clamp(.82rem,2.9vw,1.2rem);letter-spacing:.55em;padding-left:.55em;text-transform:uppercase;line-height:1}

h1{
  margin:clamp(34px,7vw,64px) 0 0;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3.4rem,15.2vw,7.6rem);
  line-height:.9;letter-spacing:-.015em;
  color:var(--marron);
}
.lema{margin:clamp(18px,3.6vw,30px) 0 0;font-weight:500;font-size:clamp(.74rem,2.7vw,1.15rem);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase}

.espera{display:flex;flex-direction:column;align-items:center;margin-top:clamp(56px,13vw,120px);color:#fff}
.rueda{position:relative;display:block;width:clamp(64px,18vw,92px);aspect-ratio:1}
.rueda i{position:absolute;left:44%;top:0;width:12%;height:29%;border-radius:999px;background:#fff;transform-origin:50% 172%;opacity:.25;animation:rueda 1.2s linear infinite}
.rueda i:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}
.rueda i:nth-child(2){transform:rotate(30deg);animation-delay:-1s}
.rueda i:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}
.rueda i:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}
.rueda i:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}
.rueda i:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}
.rueda i:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}
.rueda i:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}
.rueda i:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}
.rueda i:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}
.rueda i:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}
.rueda i:nth-child(12){transform:rotate(330deg);animation-delay:0s}
@keyframes rueda{0%{opacity:1}100%{opacity:.25}}
.espera-texto{margin-top:clamp(14px,3vw,24px);font-size:clamp(.82rem,2.9vw,1.15rem);letter-spacing:.42em;padding-left:.42em;text-shadow:0 1px 8px rgba(59,33,22,.25)}

.contenido{position:relative;width:min(620px,100% - 32px);margin:0 auto}
@media (min-width:400px){.contenido{width:min(620px,80vw)}}
.oferta,.gracias{
  margin-top:clamp(-170px,-20vw,-84px);
  background:var(--tarjeta);
  padding:clamp(22px,5vw,38px) clamp(14px,4vw,36px) clamp(22px,5vw,34px);
  text-align:center;
  box-shadow:0 1px 0 rgba(59,33,22,.04);
}
.oferta-antes{margin:0;font-weight:500;font-size:clamp(.66rem,2.4vw,.95rem);letter-spacing:.2em;text-transform:uppercase;text-wrap:balance}
.oferta h2,.gracias h2{margin:clamp(10px,2.2vw,16px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.85rem,8.2vw,3.5rem);line-height:1.08;text-transform:uppercase;letter-spacing:.01em}
.rayita{display:block;width:clamp(48px,10vw,80px);height:1px;background:var(--marron);margin:clamp(18px,4vw,28px) auto 0}

.formulario{width:min(500px,100% - 36px);margin:clamp(16px,3.4vw,26px) auto 0;display:flex;flex-direction:column;gap:12px}
.formulario input[type=text],.formulario input[type=email]{
  width:100%;height:52px;padding:0 18px;
  font:400 1rem var(--sans);color:var(--marron);
  background:rgba(255,255,255,.35);border:1px solid var(--linea);border-radius:2px;
  -webkit-appearance:none;appearance:none;
}
.formulario input::placeholder{color:#8a7468;opacity:1}
.formulario input:focus-visible,.formulario button:focus-visible,.acepto input:focus-visible,a:focus-visible{outline:2px solid var(--marron);outline-offset:2px}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--marron-suave);text-align:left;cursor:pointer;margin-top:2px}
.acepto input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--marron);cursor:pointer}
.acepto a{color:var(--marron);text-underline-offset:2px}
.formulario button{
  display:flex;align-items:center;justify-content:center;gap:18px;
  height:58px;margin-top:4px;border:0;border-radius:2px;
  background:var(--marron);color:#fff;cursor:pointer;
  font:500 clamp(.86rem,3vw,1rem) var(--sans);letter-spacing:.24em;text-transform:uppercase;
  transition:background .2s;
}
.formulario button span{padding-left:.24em}
.formulario button:hover{background:#4d2c1f}
.formulario button:disabled{opacity:.7;cursor:wait}
.formulario button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.estado{margin:0;min-height:1.2em;font-size:.88rem;text-align:center}
.estado.mal{color:#9b2c1c}
.fallo{margin:-4px 0 0;font-size:.85rem;text-align:center}
.capa{margin:4px 0 0;font-size:.7rem;line-height:1.5;color:var(--marron-suave);text-align:left}
.capa a{color:var(--marron)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.gracias p{margin:clamp(12px,2.6vw,18px) auto 0;max-width:30em;font-size:clamp(.92rem,3vw,1.05rem)}
.gracias:focus{outline:none}

.actividades{list-style:none;position:relative;left:50%;transform:translateX(-50%);width:min(760px,100vw - 16px);margin:clamp(40px,8vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.actividades li{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 4px;text-align:center;border-left:1px solid rgba(59,33,22,.55)}
.actividades li:first-child{border-left:0}
.actividades svg{width:clamp(44px,12vw,60px);height:auto;fill:none;stroke:var(--marron);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.actividades svg .relleno{fill:var(--crema)}
.actividades span{font-weight:500;font-size:clamp(.56rem,2.35vw,.8rem);letter-spacing:.12em;line-height:1.5;text-transform:uppercase}

.pie{margin-top:clamp(48px,9vw,72px);padding:22px 20px 30px;border-top:1px solid rgba(59,33,22,.15);text-align:center;font-size:.78rem;color:var(--marron-suave)}
.pie p{margin:.2em 0}
.pie a{text-underline-offset:2px}

.legal{width:min(720px,100% - 40px);margin:0 auto;padding:40px 0 20px}
.legal .volver{display:inline-block;font-size:.85rem;margin-bottom:22px}
.legal h1{margin:0;font-size:clamp(2rem,7vw,3rem);line-height:1.1;text-align:left}
.legal h2{margin:2em 0 .5em;font-family:var(--serif);font-weight:500;font-size:1.3rem}
.legal p,.legal li{font-size:.95rem;color:#4a2e22}
.legal ul{padding-left:1.2em}
.legal .fecha{margin-top:2.5em;font-size:.85rem;color:var(--marron-suave)}

.aviso-pagina{width:min(560px,100% - 40px);margin:0 auto;padding:64px 0 24px;text-align:center}
.aviso-pagina .logo{margin:0 auto 28px}
.aviso-pagina h1{font-size:clamp(2.2rem,9vw,3.4rem);margin:0}
.aviso-pagina p{margin:1.2em auto 0;max-width:28em}
.aviso-pagina .boton{display:inline-block;margin-top:28px;padding:16px 26px;background:var(--marron);color:#fff;text-decoration:none;font-weight:500;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;border-radius:2px}

@media (max-width:360px){
  .actividades{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .actividades li:nth-child(3){border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .rueda i{animation:none}
  .rueda i:nth-child(n){opacity:.35}
  .rueda i:nth-child(12){opacity:1}
  .rueda i:nth-child(11){opacity:.85}
  .rueda i:nth-child(10){opacity:.7}
  .rueda i:nth-child(9){opacity:.55}
}