/* ============================================================
   Judo Club Avilés · landing de captación
   Paleta y tipografía extraídas de las piezas de Instagram
   ============================================================ */

:root{
  --cream:#EFE8E0;
  --cream-2:#E7DFD5;
  --navy:#14293C;
  --navy-d:#0E1E2C;
  --red:#A01A16;
  --red-btn:#B71F19;
  --red-btn-h:#8E1712;
  --maxw:1560px;
  --pad:clamp(22px,5vw,96px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--navy);color:#fff;padding:12px 18px;
}
.skip:focus{left:8px;top:8px}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--red-btn);outline-offset:3px;
}

/* ---------- tipografía ---------- */
.display{
  font-family:"Anton",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.004em;
  margin:0;
  font-size:clamp(36px,5.4vw,94px);
  text-wrap:balance;
}
.display--md{font-size:clamp(27px,3.35vw,58px)}
.eyebrow{
  margin:0 0 clamp(14px,1.6vw,22px);
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  font-size:clamp(11px,.82vw,13px);
  color:var(--red);
}
.lede{
  margin:clamp(18px,2vw,28px) 0 0;
  max-width:46ch;
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.6;
  opacity:.88;
}
.center{text-align:center}
.center .lede,.lede.center{margin-inline:auto}

/* claim en rojo + trazo de pincel */
.claim{
  margin:clamp(12px,1.4vw,20px) 0 0;
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;
  text-transform:uppercase;
  line-height:1;
  color:var(--red);
  font-size:clamp(30px,4.1vw,72px);
  display:inline-block;
  max-width:100%;
}
.claim--md{font-size:clamp(22px,2.65vw,44px)}
.claim--xl{font-size:clamp(34px,4.8vw,84px)}
.claim__t{display:inline-block;transform:skewX(-9deg);transform-origin:left bottom}
.center .claim__t{transform-origin:center bottom}
.brush{
  display:block;
  width:calc(100% + .3em);
  height:.19em;
  margin:.1em 0 0 -.15em;
  background:var(--red);
  -webkit-mask:url("img/brush-underline.png") no-repeat left center/100% 100%;
  mask:url("img/brush-underline.png") no-repeat left center/100% 100%;
}
.center .brush{margin-inline:auto;-webkit-mask-position:center;mask-position:center}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-btn);color:#fff;text-decoration:none;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  font-size:clamp(13px,.85vw,15px);
  padding:16px 34px;border:0;border-radius:2px;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--red-btn-h);transform:translateY(-1px)}
.btn--sm{padding:10px 20px;font-size:12px}
.btn--block{width:100%;padding:18px 24px;font-size:15px}
.link-arrow{
  text-decoration:none;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:13px;opacity:.75;
}
.link-arrow:hover{opacity:1}

/* ---------- cabecera ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:40;
  transition:background .3s ease,box-shadow .3s ease;
}
.hdr__in{
  max-width:var(--maxw);margin:0 auto;
  padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.hdr__logo{position:relative;display:block;line-height:0}
.hdr__logo img{height:clamp(42px,3.6vw,56px);width:auto;transition:opacity .3s ease}
.hdr__logo-b{position:absolute;inset:0;opacity:0}
.hdr__nav{display:flex;align-items:center;gap:clamp(8px,1vw,16px)}
.hdr__social{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--navy);transition:color .3s ease,background .2s ease;
}
.hdr__social svg{width:20px;height:20px;fill:currentColor}
.hdr__social:hover{background:rgba(20,41,60,.08)}
.hdr.is-stuck{background:rgba(20,41,60,.96);box-shadow:0 2px 24px rgba(0,0,0,.25)}
.hdr.is-stuck .hdr__logo-a{opacity:0}
.hdr.is-stuck .hdr__logo-b{opacity:1}
.hdr.is-stuck .hdr__social{color:var(--cream)}
.hdr.is-stuck .hdr__social:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){.hdr__cta{display:none}}

/* ---------- bandas ---------- */
.band{position:relative;background:var(--bg);color:var(--fg)}
.band--cream{--bg:var(--cream);--fg:var(--navy);--red:#A01A16}
.band--cream2{--bg:var(--cream-2);--fg:var(--navy);--red:#A01A16}
.band--navy{--bg:var(--navy);--fg:var(--cream);--red:#DE3A2D}

.band__media{position:relative;line-height:0}
.band__media picture{display:block}
.band__media img{display:block;width:100%;height:auto;aspect-ratio:2600/1462}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ---------- escritorio: toda banda es foto a un lado, texto al otro ---------- */
@media (min-width:900px){
  .band--split{
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
    /* la altura se acota también con el ancho para que el recorte de la
       foto nunca se coma al sujeto en pantallas altas y estrechas */
    min-height:min(84vh,820px,56vw);
  }
  .band--split .band__media{grid-row:1;grid-column:1;overflow:hidden}
  .band--split .band__text{
    grid-row:1;grid-column:2;
    display:flex;align-items:center;
    padding:clamp(48px,4.5vw,90px) var(--pad);
  }
  .band--photo-right .band__media{grid-column:2}
  .band--photo-right .band__text{grid-column:1}
  .band--split .band__inner{width:100%;max-width:620px}

  /* foto que llena la columna, anclada al lado donde está el sujeto */
  .band--split .band__media img{
    position:absolute;inset:0;
    width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:var(--pos,center) center;
  }

  /* composiciones cuyo recorte de pincel ocupa todo el ancho: no se pueden
     partir, así que van enteras y centradas sobre el color de la banda */
  .band--fit{min-height:min(62vh,600px)}
  .band--fit .band__media{display:flex;align-items:center;overflow:visible}
  .band--fit .band__media img{
    position:static;width:100%;height:auto;aspect-ratio:2600/1462;object-fit:contain;
  }
}

/* móvil / tablet: foto entera arriba o abajo, texto en el otro hueco.
   En este tramo se sirven las fotos originales (BARC…) ya recortadas
   a vertical, no las composiciones con máscara. */
@media (max-width:899px){
  .band{display:flex;flex-direction:column}
  .band__media{width:100%;height:auto}
  .band__media img{height:auto;object-fit:cover;aspect-ratio:var(--ar,4/5)}
  .band__text{padding:clamp(30px,7vw,52px) var(--pad) clamp(44px,10vw,70px)}
  .band__inner{width:100%;max-width:640px}
  .display br,.claim br{display:none}
}

/* hero */
#s1{padding-top:0}
.hero__cta{
  display:flex;align-items:center;gap:clamp(16px,2vw,30px);
  flex-wrap:wrap;margin-top:clamp(24px,2.6vw,40px);
}
@media (max-width:899px){
  #s1 .band__text{padding-top:clamp(26px,6vw,40px)}
}

/* ---------- bloque cita / pasos ---------- */
.quote{padding:clamp(64px,8vw,130px) 0}
.quote .wrap{text-align:center}
.steps{
  list-style:none;margin:clamp(38px,4.4vw,66px) 0 0;padding:0;
  display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:1fr;
  max-width:1100px;margin-inline:auto;
}
.steps li{
  display:flex;align-items:baseline;gap:14px;text-align:left;
  border-top:2px solid rgba(20,41,60,.16);
  padding-top:16px;
  font-size:clamp(17px,1.35vw,23px);
  font-weight:600;
}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps__n{
  font-family:"Anton",Impact,sans-serif;font-size:1.5em;color:var(--red);
  line-height:1;
}

/* ---------- CTA + formulario ---------- */
.cta{padding:clamp(60px,7vw,120px) 0 clamp(70px,7vw,120px)}
.cta__grid{
  display:grid;gap:clamp(40px,5vw,86px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){
  .cta__grid{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,110px)}
}
.cta__logo{height:clamp(70px,6vw,104px);width:auto;margin-bottom:clamp(20px,2vw,30px)}
.cta .dot{color:var(--red);padding:0 .18em}
.cta__sub{margin:18px 0 0;max-width:44ch;opacity:.8;font-size:clamp(15px,1vw,17px)}
.contact{
  list-style:none;margin:clamp(28px,3vw,42px) 0 0;padding:0;
  display:grid;gap:12px;font-size:clamp(15px,1.05vw,17px);
}
.contact li{display:flex;align-items:center;gap:12px}
.contact a{text-decoration:none;border-bottom:1px solid rgba(239,232,224,.35)}
.contact a:hover{border-color:currentColor}
.contact__i{color:var(--red);font-size:.6em;line-height:1}
.contact__sep{opacity:.45;padding:0 2px}

.cta__form{background:rgba(255,255,255,.05);padding:clamp(24px,2.6vw,38px);border-radius:3px}
.band--navy .cta__form{background:rgba(255,255,255,.06);border:1px solid rgba(239,232,224,.14)}
.f-row{margin:0 0 14px}
.f-two{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:520px){.f-two{grid-template-columns:1fr 1fr;gap:14px}}
.f-row label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.cta__form input,.cta__form select,.cta__form textarea{
  width:100%;font:inherit;font-size:16px;color:inherit;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(239,232,224,.28);
  border-radius:2px;padding:15px 16px;
  transition:border-color .2s ease,background .2s ease;
}
.cta__form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.cta__form select option{color:#14293C;background:#fff}
.cta__form textarea{resize:vertical;min-height:96px}
.cta__form ::placeholder{color:inherit;opacity:.62}
.cta__form input:focus,.cta__form select:focus,.cta__form textarea:focus{
  background:rgba(255,255,255,.12);border-color:rgba(239,232,224,.6);
}
.cta__form input[aria-invalid="true"],.cta__form select[aria-invalid="true"]{
  border-color:#DE3A2D;background:rgba(222,58,45,.12);
}
.f-check{display:flex;gap:12px;align-items:flex-start;margin:18px 0 22px;font-size:14px;line-height:1.45;opacity:.86}
.f-check input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--red-btn)}
.f-check label{position:static;width:auto;height:auto;clip:auto}
.f-msg{margin:16px 0 0;font-size:15px;min-height:1.4em}
.f-msg.ok{color:#7ED9A8;font-weight:600}
.f-msg.err{color:#FF9C90;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- pie ---------- */
.foot{background:var(--navy-d);color:rgba(239,232,224,.72);padding:clamp(36px,4vw,58px) 0}
.foot__in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.foot__logo{height:56px;width:auto;opacity:.9}
.foot__txt,.foot__legal{margin:0;font-size:14px}
.foot__legal a{color:inherit}

/* ---------- CTA flotante ---------- */
.sticky-cta{
  position:fixed;z-index:35;right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);
  background:var(--red-btn);color:#fff;text-decoration:none;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;
  padding:15px 26px;border-radius:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.sticky-cta.show{opacity:1;visibility:visible;transform:none}
.sticky-cta:hover{background:var(--red-btn-h)}
@media (max-width:640px){
  .sticky-cta{left:12px;right:12px;bottom:12px;text-align:center;padding:16px}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.22,.8,.28,1),transform .75s cubic-bezier(.22,.8,.28,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}