/* ═══════════════════════════════════════════════════════════════════
   Club Paramotor Águilas y Mazarrón
   Paleta muestreada de sus propias fotos: el azul del Mediterráneo
   abierto, el turquesa de la cala, la piedra fría de la costa y el
   naranja REAL del chasis de su paratrike.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tinta:      #0A1820;
  --tinta-2:    #10242F;
  --cuerpo:     #33454E;
  --apagado:    #556770;
  --mar:        #14587C;
  --cala:       #2E9AA4;
  --piedra:     #D9DDDC;
  --papel:      #F1F4F4;
  --papel-2:    #E7ECEC;
  --trike:      #E8571C;
  --trike-deep: #BF3708;
  --linea:      #C7D0D2;
  --linea-dark: rgba(255,255,255,.14);
  --sobre-osc:  #C3D0D4;
  --apag-osc:   #8FA3AA;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 9vw, 132px);
  --ease: cubic-bezier(.22,.61,.36,1);

  --disp: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  color:var(--cuerpo);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--trike); color:#fff }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--tinta); color:#fff; padding:12px 18px }
.skip:focus{ left:8px; top:8px }
:focus-visible{ outline:2px solid var(--trike); outline-offset:3px }

/* ── Tipografía ─────────────────────────────────────────────────── */
.h2{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(1.85rem, 1.2rem + 2.4vw, 3.1rem);
  line-height:1.04; letter-spacing:-.035em; color:var(--tinta);
  text-wrap:balance;
}
.h3{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(1.18rem, 1.05rem + .5vw, 1.5rem);
  line-height:1.14; letter-spacing:-.025em; color:var(--tinta);
}
.lead{ font-size:clamp(1.06rem, 1rem + .35vw, 1.24rem); line-height:1.55; color:var(--cuerpo); text-wrap:pretty; max-width:62ch }
p{ text-wrap:pretty }
.eyebrow{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mar);
  display:flex; align-items:center; gap:.7em; margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--trike); flex:none }
.ilink{ color:var(--mar); font-weight:600; border-bottom:1px solid rgba(20,88,124,.34); padding-bottom:1px }
.note{ margin-top:clamp(28px,4vw,44px); font-size:.98rem; color:var(--apagado); border-top:1px solid var(--linea); padding-top:20px }

/* ── Botones ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  padding:13px 22px; border-radius:0; border:1.5px solid transparent;
  transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .18s var(--ease);
}
.btn--lg{ padding:16px 28px; font-size:1rem }
.btn--solid{ background:var(--trike-deep); color:#fff }
.btn--ghost{ border-color:currentColor; color:#fff }
.btn--tel{ border-color:var(--linea); color:var(--tinta); font-family:var(--mono); font-size:.85rem; padding:9px 16px; font-weight:500 }
.btn__dot{ width:7px; height:7px; border-radius:50%; background:var(--trike); flex:none }
.btn:active{ transform:scale(.975) }
@media (hover:hover){
  .btn--solid:hover{ background:var(--tinta) }
  .btn--ghost:hover{ background:#fff; color:var(--tinta); border-color:#fff }
  .btn--tel:hover{ border-color:var(--trike) }
  .ilink:hover{ border-bottom-color:var(--mar) }
}

/* ── Header ─────────────────────────────────────────────────────── */
.site{ position:fixed; inset:0 0 auto; z-index:90; color:#fff }
.site__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding:16px var(--gutter);
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.site.scrolled{ background:rgba(241,244,244,.94); box-shadow:0 1px 0 var(--linea); color:var(--tinta) }
.site.scrolled .site__nav a{ color:var(--cuerpo) }
.site.scrolled .btn--tel{ border-color:var(--linea); color:var(--tinta) }

.brand{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:600; letter-spacing:-.03em; font-size:1.05rem; margin-right:auto }
.brand__mark{ display:block; color:var(--trike) }
.brand__mark svg{ display:block; width:34px; height:22px }
.brand__txt b{ font-weight:800 }

.site__nav{ display:flex; gap:clamp(14px,2vw,26px); font-size:.9rem; font-weight:500 }
.site__nav a{ color:rgba(255,255,255,.88); padding:4px 0; border-bottom:1.5px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease) }
.site__nav a.active{ border-bottom-color:var(--trike) }
@media (hover:hover){ .site__nav a:hover{ color:#fff } .site.scrolled .site__nav a:hover{ color:var(--tinta) } }

.burger{ display:none; width:40px; height:34px; flex-direction:column; justify-content:center; gap:5px }
.burger span{ display:block; height:2px; background:currentColor; transition:transform .25s var(--ease), opacity .2s var(--ease) }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ── PORTADA: su foto a sangre, con el mapa encima ──────────────── */
.hero{
  --fh: max(100svh, 640px);
  position:relative; height:var(--fh); overflow:hidden;
  background:var(--tinta); isolation:isolate;
}
.hero__frame{
  position:absolute; left:var(--hx,50%); top:50%;
  width:max(100%, calc(var(--fh) * .75));
  aspect-ratio:3 / 4;
  transform:translate(-50%,-50%);
}
.hero__frame > img{ width:100%; height:100%; object-fit:cover }

.hero__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,17,23,.90) 0%, rgba(6,17,23,.62) 26%, rgba(6,17,23,.10) 55%, rgba(6,17,23,.34) 100%),
    linear-gradient(to right, rgba(6,17,23,.48) 0%, rgba(6,17,23,0) 58%);
}
.hero__grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Las anotaciones — la firma. Visibles sin JS, sobre la foto. */
.ann{ position:absolute; inset:0; z-index:4; pointer-events:none }
.ann__svg{ position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--trike); stroke-width:1.25px }
.ann__dot{
  position:absolute; left:var(--x); top:var(--y); width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:var(--trike); box-shadow:0 0 0 3px rgba(232,87,28,.28);
}
.ann__t{
  position:absolute; left:var(--x); top:var(--y); transform:translateY(-50%);
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; white-space:nowrap;
  text-shadow:0 1px 10px rgba(6,17,23,.85), 0 0 2px rgba(6,17,23,.9);
  padding-bottom:5px;
}
.ann__t--end{ transform:translate(-100%,-50%) }
.ann__t--start{ transform:translate(0,-50%) }

.hero__copy{
  position:absolute; z-index:5; left:0; right:0; bottom:clamp(84px, 11vh, 132px);
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  color:#fff;
}
.hero__h1{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(3.1rem, 11.4vw, 9.6rem);
  line-height:.86; letter-spacing:-.05em; margin-bottom:clamp(18px,2.4vw,28px);
}
.hero__h1 em{ font-style:normal; color:var(--trike); display:inline-block }
.hero__sub{ max-width:44ch; font-size:clamp(1.02rem, .96rem + .38vw, 1.24rem); color:rgba(255,255,255,.92); line-height:1.5 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3vw,32px) }
.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:clamp(20px,2.6vw,28px); color:rgba(255,255,255,.9) }
.hero__meta-sep{ width:22px; height:1px; background:rgba(255,255,255,.4) }
.hero__meta .mono{ color:rgba(255,255,255,.82) }

.gscore{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem }
.gscore b{ font-weight:700; font-size:1.02rem }
.gscore__n{ color:rgba(255,255,255,.78); font-size:.86rem }
.glogo{ display:block }
.stars{ color:#FBBC05; letter-spacing:.06em }
.stars--lg{ font-size:1.3rem }

.hero__cue{ position:absolute; z-index:5; bottom:26px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8); display:flex; align-items:center; gap:9px }
.hero__cue i{ display:block; width:1px; height:26px; background:linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)); animation:cue 2.2s var(--ease) infinite }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }

/* ── Banda oscura: cuándo se vuela ──────────────────────────────── */
.band{ background:var(--tinta); color:var(--sobre-osc); padding-block:var(--sec) }
.band .h2{ color:#fff }
.band .lead{ color:var(--sobre-osc) }
.band .eyebrow{ color:var(--cala) }
.band__head{ margin-bottom:clamp(38px,5vw,58px) }
.band__head .h2{ max-width:19ch }

.clock{ position:relative; border-top:1px solid var(--linea-dark) }
.clock__scale{ display:grid; grid-template-columns:88px 1fr 116px; color:var(--apag-osc); font-size:.75rem; padding:10px 0 34px }
.clock__scale span{ grid-column:2; grid-row:1; justify-self:start; transform:translateX(-50%); margin-left:calc(var(--h) / 24 * 100%) }
.clock__scale span:first-child{ transform:none }
.clock__scale span:nth-child(5){ transform:translateX(-100%) }

.clock__days{ list-style:none }
.clock__day{ display:grid; grid-template-columns:88px 1fr 116px; align-items:center; gap:14px; padding:11px 0; border-top:1px solid var(--linea-dark) }
.clock__name{ color:var(--apag-osc); font-size:.75rem; letter-spacing:.18em }
.clock__h{ color:var(--apag-osc); font-size:.75rem; text-align:right }
.clock__bar{ position:relative; display:block; height:9px; background:rgba(255,255,255,.07) }
.clock__bar i{
  position:absolute; top:0; bottom:0; display:block;
  left:calc(var(--a) / 24 * 100%); width:calc((var(--b) - var(--a)) / 24 * 100%);
  background:linear-gradient(90deg, var(--mar), var(--cala));
}
.clock__day.today .clock__name,
.clock__day.today .clock__h{ color:#fff }
.clock__day.today .clock__bar i{ background:linear-gradient(90deg, var(--trike), #F5913F) }

.clock__now{ position:absolute; top:58px; bottom:0; width:1px; background:var(--trike); z-index:2 }
.clock__now span{
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  background:var(--trike-deep); color:#fff; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 7px; white-space:nowrap;
}
.clock__status{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; color:var(--sobre-osc); font-size:.98rem }
.clock__status .ilink{ color:var(--cala); border-bottom-color:rgba(46,154,164,.4) }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--apag-osc); flex:none; display:inline-block }
.dot.open{ background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.2) }
.dot.closed{ background:#F5913F; box-shadow:0 0 0 4px rgba(245,145,63,.18) }

/* ── Secciones claras ───────────────────────────────────────────── */
.sec{ padding-block:var(--sec) }
.sec--flat{ background:var(--papel-2) }
.sec__head{ margin-bottom:clamp(40px,5vw,64px); max-width:66ch }
.sec__head .h2{ max-width:17ch }

/* Pasos: rejilla rota, la foto cambia de lado */
.steps{ list-style:none; display:grid; gap:clamp(2px,.4vw,4px); grid-template-columns:repeat(2,1fr) }
.step{ position:relative; display:flex; flex-direction:column; background:#fff }
.step__img{ overflow:hidden; aspect-ratio:4/3 }
.step__img img{ width:100%; height:100%; object-fit:cover }
.step__txt{ padding:clamp(20px,2.6vw,32px) }
.step__n{ display:block; color:var(--trike-deep); font-size:.78rem; letter-spacing:.2em; margin-bottom:.7rem }
.step__txt p{ margin-top:.65rem; color:var(--apagado); font-size:.98rem }
.step__txt i{ font-style:italic }
.step:nth-child(1){ grid-column:1 / span 2 }
.step:nth-child(1) .step__img{ aspect-ratio:16/7 }
.step:nth-child(4){ grid-column:1 / span 2 }
.step:nth-child(4){ flex-direction:row-reverse }
.step:nth-child(4) .step__img{ flex:1 1 54%; aspect-ratio:5 / 6 }
.step:nth-child(4) .step__txt{ flex:1 1 45%; align-self:center }

/* Split: la foto aérea a sangre por la izquierda */
.sec--split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:center; padding-block:0 }
.split__media{ position:relative }
.split__frame{ position:relative; overflow:hidden }
.split__frame > img{ width:100%; height:auto; display:block }
.split__txt{ padding:var(--sec) var(--gutter) var(--sec) 0; max-width:640px }
.split__txt > p + p{ margin-top:1rem }
.ann--fig .ann__t{ letter-spacing:.13em; text-shadow:0 1px 3px rgba(6,17,23,.95), 0 0 10px rgba(6,17,23,.8), 0 0 2px rgba(6,17,23,1) }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:clamp(26px,3.4vw,38px) }
.shot{ display:block; padding:0; overflow:hidden; aspect-ratio:3/4; background:var(--papel-2) }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease) }
@media (hover:hover){ .shot:hover img{ transform:scale(1.05) } }

/* Club (oscuro) */
.sec--dark{ background:var(--tinta-2); color:var(--sobre-osc) }
.sec--dark .h2{ color:#fff }
.sec--dark .lead{ color:var(--sobre-osc) }
.sec--dark .eyebrow{ color:var(--cala) }
.sec--dark .ilink{ color:var(--cala); border-bottom-color:rgba(46,154,164,.4) }
.club{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,72px); align-items:center }
.club__txt > * + *{ margin-top:1.1rem }
.quote{ border-left:2px solid var(--trike); padding-left:clamp(18px,2.4vw,28px) }
.quote p{ font-size:clamp(1.02rem, .98rem + .3vw, 1.16rem); color:#fff; font-style:italic; line-height:1.55 }
.quote cite{ display:block; margin-top:.9rem; font-style:normal; color:var(--apag-osc); font-size:.75rem; letter-spacing:.02em }
.club__img img{ width:100%; height:100%; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 30% }
.club__img figcaption{ margin-top:.7rem; color:var(--apag-osc); font-size:.75rem; letter-spacing:.02em }

/* Reseñas */
.rev__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:clamp(34px,4.4vw,52px) }
.rev__head .h2{ max-width:20ch }
.rev__score{ display:flex; flex-direction:column; gap:4px; align-items:flex-start }
.rev__num{ font-family:var(--disp); font-weight:800; font-size:clamp(3rem, 2rem + 3vw, 4.6rem); line-height:.9; letter-spacing:-.05em; color:var(--tinta) }
.rev__score .mono{ color:var(--apagado); font-size:.78rem }
.rev__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea); background-clip:content-box }
.rev{ background:var(--papel); padding:clamp(22px,2.8vw,34px) }
.rev p{ color:var(--cuerpo); font-size:1rem }
.rev cite{ display:flex; align-items:center; gap:11px; margin-top:1.2rem; font-style:normal; font-size:.9rem; font-weight:600; color:var(--tinta) }
.rev cite i{ display:block; font-style:normal; font-family:var(--mono); font-size:.75rem; font-weight:400; color:var(--apagado); letter-spacing:.05em }
.av{ width:36px; height:36px; border-radius:50%; background:var(--mar); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.95rem; flex:none }

/* Dónde */
.donde{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,5vw,68px); align-items:center }
.donde__txt > * + *{ margin-top:1.1rem }
.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea); background-clip:content-box; border-top:1px solid var(--linea) }
.facts > div{ background:var(--papel-2); padding:16px 18px }
.facts dt{ color:var(--apagado); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px }
.facts dd{ font-weight:600; color:var(--tinta) }
.facts a{ color:var(--mar) }
.donde__map{ height:clamp(320px,46vh,520px); background:var(--linea) }
.donde__map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.32) contrast(1.04) }

/* CTA */
.sec--cta{ background:var(--tinta); color:var(--sobre-osc) }
.sec--cta .h2{ color:#fff }
.sec--cta .lead{ color:var(--sobre-osc) }
.cta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center }
.cta__tel{ font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing:-.02em }
.cta__tel a{ color:var(--trike) }
.form{ display:grid; gap:14px }
.form label{ display:grid; gap:6px }
.form label > span{ font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--apag-osc) }
.form input, .form select, .form textarea{
  font:inherit; font-size:.98rem; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid var(--linea-dark); padding:12px 14px; border-radius:0;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.form input::placeholder, .form textarea::placeholder{ color:#7E9099 }
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--trike); background:rgba(255,255,255,.09); outline:none }
.form select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,#8FA3AA 50%),linear-gradient(135deg,#8FA3AA 50%,transparent 50%); background-position:calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size:6px 6px; background-repeat:no-repeat }
.form select option{ color:var(--tinta) }
.check{ display:flex !important; flex-direction:row; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--apag-osc) }
.check input{ width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--trike) }
.form label.check > span{ font-family:var(--body); font-size:.9rem; letter-spacing:0; text-transform:none; color:var(--apag-osc) }
.form__msg{ font-size:.9rem; color:var(--cala); min-height:1.3em }

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{ background:#060F14; color:var(--apag-osc); padding-top:clamp(56px,7vw,88px) }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(26px,3.4vw,48px); padding-bottom:clamp(40px,5vw,64px) }
.foot__brand p{ margin-top:14px; font-size:.94rem; max-width:38ch }
.brand--foot{ color:#fff; font-size:1.1rem }
.foot h3{ font-weight:500; color:#fff; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px }
.foot__nav, .foot__col{ display:flex; flex-direction:column; gap:9px; font-size:.94rem }
.foot__state{ display:flex; align-items:center; gap:9px; margin-top:4px }
@media (hover:hover){ .foot__nav a:hover, .foot__col a:hover{ color:#fff } }

.foot__bar{ border-top:1px solid rgba(255,255,255,.1); padding-block:22px 30px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px }
.foot__legal{ display:flex; gap:18px; font-size:.84rem; order:1 }
.foot__copy{ font-size:.84rem; order:2; margin-left:auto }
.demo-aviso{ order:3; flex-basis:100%; font-size:.76rem; color:#6E828A; letter-spacing:.01em }

/* ── Barra móvil ────────────────────────────────────────────────── */
.callbar{ display:none; position:fixed; z-index:95; inset:auto 0 0; background:var(--tinta); border-top:1px solid var(--linea-dark) }
.callbar__a{ flex:1; text-align:center; padding:15px 8px; color:#fff; font-weight:700; font-size:.95rem }
.callbar__a--wa{ background:var(--trike-deep) }

/* ── Lightbox ───────────────────────────────────────────────────── */
.lb img{ max-width:min(94vw,1100px); max-height:88vh; width:auto; height:auto; object-fit:contain }
.lb__close{ position:absolute; top:14px; right:18px; font-size:2.4rem; line-height:1; color:#fff; width:48px; height:48px }

/* ═══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width:1000px){
  .sec--split{ grid-template-columns:1fr; gap:0 }
  .split__txt{ padding:clamp(40px,7vw,64px) var(--gutter) var(--sec) }
  .split__media{ order:-1 }
  .club, .donde, .cta{ grid-template-columns:1fr }
  .club__img{ max-width:420px }
  .foot__grid{ grid-template-columns:1fr 1fr }
}

@media (max-width:820px){
  .site__nav{
    position:fixed; inset:0 0 auto; top:0; padding:88px var(--gutter) 34px;
    background:var(--tinta); flex-direction:column; gap:2px;
    transform:translateY(-102%); transition:transform .34s var(--ease);
    font-size:1.16rem;
  }
  .site__nav.open{ transform:none }
  .site__nav a{ color:#fff; padding:12px 0; border-bottom:1px solid var(--linea-dark) }
  .burger{ display:flex }
  .site .btn--tel{ display:none }
  .callbar{ display:flex }
  body{ padding-bottom:52px }

  /* En movil la foto se ve entera de arriba abajo, asi que las anotaciones caian
     justo encima del titular. Se amplia el encuadre y se ancla abajo: los dos
     accidentes quedan en el tercio de arriba y el titular manda en la mitad baja.
     La tercera ("Tus pies") se retira: su ancla vive detras del texto. */
  .hero{ --hx:44% }
  .hero__frame{ width:max(100%, calc(var(--fh) * .975)); top:auto; bottom:0; transform:translate(-50%,0) }
  .hero .ann__svg path:last-child,
  .hero .ann__dot:nth-of-type(3),
  .hero .ann__t--start{ display:none }
  /* en movil el parrafo cae sobre la roca clara: se sube el velo de la mitad baja */
  .hero__veil{
    background:
      linear-gradient(to top, rgba(6,17,23,.94) 0%, rgba(6,17,23,.86) 30%, rgba(6,17,23,.46) 58%, rgba(6,17,23,.18) 80%, rgba(6,17,23,.42) 100%);
  }
  .hero__copy{ bottom:clamp(92px,13vh,128px) }
  .hero__cue{ display:none }
  .ann__t{ letter-spacing:.12em }

  .steps{ grid-template-columns:1fr }
  .step:nth-child(1), .step:nth-child(4){ grid-column:1 }
  .step:nth-child(1) .step__img{ aspect-ratio:4/3 }
  .step:nth-child(4){ flex-direction:column }
  .step:nth-child(4) .step__img{ aspect-ratio:4/3 }

  .rev__grid{ grid-template-columns:1fr }
  .clock__scale, .clock__day{ grid-template-columns:56px 1fr }
  .clock__h{ grid-column:2; text-align:left; padding-top:2px }
  .clock__day{ row-gap:4px }
  .clock__now{ display:none }
  .foot__grid{ grid-template-columns:1fr }
  .foot__copy{ margin-left:0 }
}

@media (max-width:520px){
  .tiles{ grid-template-columns:repeat(3,1fr); gap:4px }
  .facts{ grid-template-columns:1fr }
  .hero__cta .btn{ flex:1 1 100% }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .hero__cue i{ animation:none }
}