/* ══════════════════════════════════════════════════════════════════════
   CN SPORTS TOURISM — Torneos de fútbol base 2027
   VERSIÓN "NOCTURNA" · v1.0 — diseño alternativo, oscuro y animado.

   Misma información, mismas fotos, mismas páginas.
   Lo único que cambia es el ASPECTO y el MOVIMIENTO.

   Idea: el negro deja que manden las fotos. La marca aparece solo
   como luz (el degradado del escudo: teja → naranja → ámbar).
   Todo se sirve desde el propio dominio: ni Google Fonts ni librerías.
   ══════════════════════════════════════════════════════════════════════ */

/* ── La letra del logo ── */
@font-face{font-family:'Circular Std';src:url('fonts/CircularStd-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Circular Std';src:url('fonts/CircularStd-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Circular Std';src:url('fonts/CircularStd-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Circular Std';src:url('fonts/CircularStd-Black.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* marca */
  --teja:   #E55935;
  --naranja:#ED8B26;
  --ambar:  #F2A642;
  --cn:     #ED8B26;
  --cn-dark:#F2A642;          /* acento legible sobre negro */
  --escudo: linear-gradient(115deg,var(--teja) 0%,var(--naranja) 52%,var(--ambar) 100%);

  /* fondo y texto (mismos nombres que la versión clara: el HTML no cambia) */
  --paper:  #07080B;
  --paper-2:#0C0E13;
  --ink:    #F4F1EB;
  --ink-2:  #B4AFBC;
  --ink-3:  #837E8D;
  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.20);
  --dark:   #07080B;

  /* superficies de cristal */
  --glass:  rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --blur:   blur(20px) saturate(1.25);

  --font:'Circular Std','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --r:18px;
  --r-lg:26px;
  --shadow:0 30px 90px rgba(0,0,0,.55);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
body.menu-abierto,body.sin-scroll{overflow:hidden}

h1,h2,h3,h4{font-family:var(--font);line-height:1.02;margin:0;letter-spacing:-.035em;font-weight:800}
h3{font-weight:700;letter-spacing:-.02em;line-height:1.16}
h4{font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
strong,b{font-weight:700;color:#fff}
::selection{background:var(--teja);color:#fff}

/* Si el HTML marca algo como oculto, se oculta SIEMPRE. Sin esto, cualquier
   regla nuestra con display:flex/grid volvería a enseñarlo (le pasaba al
   contador de resultados del buscador). */
[hidden]{display:none !important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.wrap-sm{max-width:900px}
:focus-visible{outline:2px solid var(--ambar);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ══════════════════════════════════════════════════════════
   1 · FONDO VIVO — auroras lentas + grano
   ══════════════════════════════════════════════════════════ */
body::before{
  content:'';position:fixed;inset:-20vmax;z-index:0;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  rgba(229,89,53,.20), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 22%, rgba(242,166,66,.14), transparent 62%),
    radial-gradient(42vmax 42vmax at 60% 96%, rgba(237,139,38,.13), transparent 62%);
  filter:blur(30px);
  animation:aurora 34s ease-in-out infinite alternate;
}
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  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='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@keyframes aurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(-4%,3%,0) scale(1.12)}
  100%{transform:translate3d(4%,-3%,0) scale(1.05)}
}
body>*{position:relative;z-index:2}

/* ══════════════════════════════════════════════════════════
   2 · CORTINA DE ENTRADA
   Se quita sola con CSS: aunque fallara el JavaScript, la web
   siempre aparece. Nunca puede quedarse la pantalla en negro.
   ══════════════════════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:200;background:#07080B;display:grid;place-items:center;
  animation:introFuera 1s var(--ease) 1.15s forwards;
}
.intro-marca{display:flex;flex-direction:column;align-items:center;gap:20px;
  animation:introDentro .8s var(--ease) both}
.intro-marca img{width:min(280px,60vw);opacity:.96}
.intro-barra{width:min(280px,60vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.intro-barra i{display:block;height:100%;width:0;background:var(--escudo);
  animation:introCarga 1.15s var(--ease) forwards}
.intro-txt{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3)}
@keyframes introFuera{to{transform:translateY(-101%);visibility:hidden}}
@keyframes introDentro{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes introCarga{to{width:100%}}

/* ══════════════════════════════════════════════════════════
   3 · CURSOR PROPIO (solo ratón)
   ══════════════════════════════════════════════════════════ */
.cursor,.cursor-anillo{position:fixed;top:0;left:0;z-index:190;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cursor{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-anillo{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(255,255,255,.55);
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
             background .3s var(--ease),opacity .3s}
/* no se ven hasta que el usuario mueve el ratón por primera vez */
.cursor,.cursor-anillo{opacity:0}
body.hay-raton .cursor,body.hay-raton .cursor-anillo{opacity:1}
.cursor-anillo.grande{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(255,255,255,.12)}

/* ══════════════════════════════════════════════════════════
   4 · BARRA DE LECTURA
   ══════════════════════════════════════════════════════════ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--escudo);z-index:120;
  box-shadow:0 0 18px rgba(242,166,66,.8)}

/* ══════════════════════════════════════════════════════════
   5 · CINTA Y AVISO DE MAQUETA
   ══════════════════════════════════════════════════════════ */
.ribbon{height:3px;background:var(--escudo)}
.mockup-bar{background:#0B0D12;border-bottom:1px solid var(--line);
  color:var(--ink-2);font-size:12.5px;padding:9px 20px;text-align:center;
  letter-spacing:.01em;position:relative;z-index:3}
.mockup-bar strong{color:var(--ambar)}
.mockup-bar a{color:var(--ambar);text-decoration:none;border-bottom:1px solid rgba(242,166,66,.4)}

/* ══════════════════════════════════════════════════════════
   6 · CABECERA FLOTANTE (pastilla de cristal)
   ══════════════════════════════════════════════════════════ */
/* margin-bottom negativo = exactamente el alto de la pastilla, para que la foto
   quede justo debajo de la cabecera y no se coma el aviso de maqueta */
.site-header{position:sticky;top:14px;z-index:100;margin-bottom:-64px;padding:0 14px;
  transition:transform .45s var(--ease)}
.site-header.oculta{transform:translateY(-170%)}
.site-header .wrap{display:flex;align-items:center;gap:26px;min-height:64px;
  padding:0 10px 0 22px;border-radius:100px;
  background:rgba(10,11,15,.55);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:background .3s,border-color .3s,box-shadow .3s}
.site-header.scrolled .wrap{background:rgba(10,11,15,.82);border-color:rgba(255,255,255,.13);
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.site-header .logo{display:flex;align-items:center;flex:0 0 auto}
.site-header .logo img{height:30px;width:auto}
.site-header .lg-c{display:none}          /* la versión oscura usa siempre el logo blanco */
.site-header .lg-w{display:block}

.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:9px 15px;border-radius:100px;position:relative;transition:color .2s,background .25s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current]{color:#fff}
.nav a[aria-current]::after{content:'';position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:var(--escudo);border-radius:2px}
/* El botón del menú NO debe heredar el color de los enlaces del menú:
   si lo hereda, «Reservar plaza» sale en gris claro sobre naranja y no se lee. */
.nav a.btn{margin-left:8px;color:#1A0E06}
.nav a.btn:hover{color:#12080B;background:var(--escudo)}
.nav a.btn[aria-current]::after{display:none}

.navtoggle{display:none;margin-left:auto;background:rgba(255,255,255,.06);color:#fff;
  border:1px solid var(--line);width:44px;height:44px;border-radius:50%;font-size:17px;cursor:pointer}

/* ══════════════════════════════════════════════════════════
   7 · BOTONES
   ══════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font);
  font-weight:500;font-size:16px;text-decoration:none;padding:15px 30px;border-radius:100px;
  border:0;cursor:pointer;line-height:1.2;position:relative;overflow:hidden;isolation:isolate;
  transition:color .25s,transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--escudo);
  transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}

.btn-grad,.btn-primary{background:var(--escudo);color:#1A0E06;font-weight:700;
  box-shadow:0 12px 34px rgba(229,89,53,.28)}
.btn-grad::before,.btn-primary::before{background:#fff}
.btn-grad:hover,.btn-primary:hover{color:#12080B;box-shadow:0 18px 46px rgba(242,166,66,.42);transform:translateY(-2px)}

.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-outline:hover{color:#1A0E06;box-shadow:inset 0 0 0 1px transparent;transform:translateY(-2px)}

.btn-ghost{background:rgba(255,255,255,.05);color:#fff;backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn-ghost:hover{color:#1A0E06;transform:translateY(-2px)}

.btn-light{background:#fff;color:#12131A;font-weight:700}
.btn-light:hover{color:#1A0E06;transform:translateY(-2px)}

.btn-wa{background:#25D366;color:#06210F;font-weight:700}
.btn-wa::before{background:#fff}
.btn-wa svg{width:20px;height:20px;fill:currentColor}
.btn-wa:hover{transform:translateY(-2px)}

.btn-sm{padding:10px 20px;font-size:14.5px}

/* ══════════════════════════════════════════════════════════
   8 · PORTADAS CON FOTO
   ══════════════════════════════════════════════════════════ */
.heroF{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(560px,94vh,1000px);display:flex;align-items:flex-end;
  padding:170px 0 96px;background:#07080B}
.heroF--faq{min-height:clamp(440px,66vh,680px);padding:170px 0 70px}
.heroF .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  transform:scale(1.14);filter:saturate(.72) contrast(1.06) brightness(.72)}
.heroF .scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(to top,#07080B 2%,rgba(7,8,11,.72) 34%,rgba(7,8,11,.28) 62%,rgba(7,8,11,.55) 100%),
    radial-gradient(70% 80% at 20% 70%,rgba(229,89,53,.24),transparent 70%)}
.heroF::after{content:'';position:absolute;left:0;right:0;bottom:0;height:180px;z-index:-1;
  background:linear-gradient(to top,var(--paper),transparent)}

/* orbes de luz que respiran */
.hero-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-decor i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  animation:flotar 18s ease-in-out infinite alternate}
.hero-decor i:nth-child(1){width:46vmin;height:46vmin;left:-8vmin;top:8vmin;background:rgba(229,89,53,.55)}
.hero-decor i:nth-child(2){width:36vmin;height:36vmin;right:4vmin;top:-6vmin;background:rgba(242,166,66,.42);animation-delay:-6s}
.hero-decor i:nth-child(3){width:52vmin;height:52vmin;right:16vmin;bottom:-18vmin;background:rgba(237,139,38,.34);animation-delay:-11s}
@keyframes flotar{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(6vmin,-5vmin,0) scale(1.22)}
}

.heroF-inner{width:100%}
.hero-copy{max-width:min(980px,100%)}
.overline{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ambar);
  font-weight:700;margin:0 0 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.overline::before{content:'';width:26px;height:1px;background:var(--escudo);flex:0 0 auto}
.heroF h1{font-size:clamp(46px,8.4vw,116px);letter-spacing:-.045em;margin:0 0 26px;
  text-wrap:balance;text-shadow:0 20px 60px rgba(0,0,0,.6)}
.heroF h1 .y{background:var(--escudo);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.lead{font-size:clamp(17px,1.6vw,21px);color:#DCD7D2;max-width:66ch;margin:0 0 30px;line-height:1.55}
.lead strong{color:#fff}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.trust{margin:30px 0 0;font-size:13.5px;color:var(--ink-3);letter-spacing:.03em}

/* migas y chip */
.crumbs{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);margin-bottom:18px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ambar)}
.crumbs .sep{opacity:.4}
.crumbs .here{color:var(--ink-3)}
.chip-live{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  padding:8px 16px;border-radius:100px;margin-bottom:20px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.chip-live i{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:latido 2s infinite}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}
  70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

/* cuenta atrás */
.countdown{display:flex;gap:10px;margin:0 0 30px;flex-wrap:wrap}
.cdbox{min-width:88px;padding:14px 8px;text-align:center;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.cdbox b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;background:var(--escudo);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cdbox span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ══════════════════════════════════════════════════════════
   8b · VÍDEO DE FONDO DE LA PORTADA
   La foto se queda debajo: es lo que se ve mientras el vídeo
   arranca, y lo único que se ve en móvil.
   ══════════════════════════════════════════════════════════ */
.video-fondo{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease}
.video-fondo.listo{opacity:1}
.heroF--video .bg{z-index:-4}
/* el truco de siempre para que un 16:9 cubra cualquier hueco sin deformarse */
.video-fondo iframe,.video-fondo video{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);border:0;pointer-events:none;
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;object-fit:cover}
/* Velo oscuro sobre el vídeo. Es el equilibrio entre "se ve el vídeo" y
   "se lee el titular". Si algún día lo quieres MÁS claro, baja los números
   de abajo; si lo quieres más oscuro, súbelos. Van de 0 (nada) a 1 (negro). */
.heroF--video .scrim{background:
    linear-gradient(to top,#07080B 2%,rgba(7,8,11,.72) 30%,rgba(7,8,11,.34) 62%,rgba(7,8,11,.52) 100%),
    linear-gradient(to right,rgba(7,8,11,.58) 0%,rgba(7,8,11,.34) 52%,rgba(7,8,11,.04) 86%),
    radial-gradient(70% 80% at 20% 70%,rgba(229,89,53,.18),transparent 70%)}
/* al aclarar el velo, el titular necesita su propia sombra para no perderse */
.heroF--video h1{text-shadow:0 6px 30px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.6)}
/* OJO: al "2027" no se le puede poner NINGUNA sombra. Como la letra va en
   degradado recortado sobre la caja, tanto text-shadow como drop-shadow se
   dibujan sobre el rectángulo entero y sale un recuadro negro detrás. */
.heroF--video h1 .y{text-shadow:none;filter:none}
.heroF--video .lead{text-shadow:0 2px 14px rgba(0,0,0,.8)}
.heroF--video .trust{text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* Aviso "esto lo estás viendo desde el disco". Solo aparece al abrir el
   archivo con doble clic; en la web publicada no puede salir nunca. */
.aviso-disco{position:fixed;left:20px;bottom:20px;z-index:115;max-width:390px;
  padding:18px 44px 18px 20px;border-radius:16px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2);background:rgba(12,14,19,.94);border:1px solid rgba(242,166,66,.34);
  backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:introDentro .6s var(--ease) .8s both}
.aviso-disco>b{display:block;color:var(--ambar);font-size:14.5px;margin-bottom:6px}
.aviso-disco span b{color:#fff}
.aviso-disco button{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  border:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:12px;line-height:1}
.aviso-disco button:hover{background:rgba(255,255,255,.18)}
@media (max-width:860px){.aviso-disco{display:none}}

/* botón para parar el vídeo de fondo (obligatorio por accesibilidad:
   todo lo que se mueve solo más de 5 segundos tiene que poder pararse) */
.video-stop{position:absolute;right:22px;bottom:22px;z-index:4;display:inline-flex;align-items:center;
  gap:9px;padding:9px 18px;border-radius:100px;cursor:pointer;font-family:var(--font);
  font-size:12.5px;letter-spacing:.04em;color:#fff;
  background:rgba(10,11,15,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);
  transition:background .3s,border-color .3s}
.video-stop:hover{background:rgba(10,11,15,.85);border-color:rgba(255,255,255,.32)}
.video-stop b{display:inline-block;width:9px;height:11px;border-left:3px solid var(--ambar);
  border-right:3px solid var(--ambar)}
.video-stop.parado b{width:0;height:0;border:0;border-left:10px solid var(--ambar);
  border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ── Botón de vídeo de la portada ──
   Es una fachada: hasta que no se pulsa, de YouTube no se pide nada. */
.play-video{display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  padding:8px 24px 8px 8px;border-radius:100px;font-family:var(--font);text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);color:#fff;
  transition:background .3s,border-color .3s,transform .4s var(--ease)}
.play-video:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.play-circulo{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--escudo);display:grid;place-items:center}
/* el triángulo de "play", dibujado con bordes: ni imagen ni icono que cargar */
.play-circulo i{width:0;height:0;margin-left:3px;
  border-left:13px solid #12080B;border-top:8px solid transparent;border-bottom:8px solid transparent}
.play-circulo::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--ambar);animation:onda 2.4s ease-out infinite}
@keyframes onda{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.play-txt{font-size:15.5px;font-weight:600;line-height:1.2}
.play-txt small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:3px}

/* Reproductor a pantalla completa */
.videobox{position:fixed;inset:0;z-index:185;display:none;place-items:center;padding:24px;
  background:rgba(4,5,8,.95);backdrop-filter:blur(16px);opacity:0;transition:opacity .3s}
.videobox.on{display:grid}
.videobox.visible{opacity:1}
.videobox .marco{position:relative;width:min(1180px,100%);aspect-ratio:16/9;border-radius:16px;
  overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.8);
  animation:zoomIn .45s var(--ease)}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videobox .vb-cerrar{position:absolute;top:-58px;right:0;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid var(--line);color:#fff;font-size:20px;cursor:pointer;
  transition:background .3s,transform .3s var(--ease)}
.videobox .vb-cerrar:hover{background:var(--escudo);color:#12080B;transform:scale(1.08)}
.videobox .vb-pie{position:absolute;left:0;bottom:-42px;margin:0;color:var(--ink-3);font-size:13.5px}

/* pista de scroll */
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.scrollcue i{width:1px;height:46px;background:linear-gradient(to bottom,transparent,var(--ambar));
  animation:cae 2.2s ease-in-out infinite}
@keyframes cae{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ══════════════════════════════════════════════════════════
   9 · TARJETA DE DATOS RÁPIDOS
   ══════════════════════════════════════════════════════════ */
.rail{position:relative;margin-top:-58px;z-index:5}
.qfcard{border-radius:var(--r-lg);padding:8px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);backdrop-filter:var(--blur);
  box-shadow:var(--shadow)}
.quickfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;
  background:var(--line);border-radius:calc(var(--r-lg) - 8px);overflow:hidden}
.quickfacts>div{background:#0A0C11;padding:24px 22px}
.quickfacts dt{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ambar);
  font-weight:700;margin-bottom:9px}
.quickfacts dd{margin:0;font-size:17.5px;font-weight:700;color:#fff;line-height:1.25;letter-spacing:-.02em}
.quickfacts dd small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:5px;letter-spacing:0}

/* ══════════════════════════════════════════════════════════
   10 · CINTA DE ESCUDOS
   ══════════════════════════════════════════════════════════ */
.marquee-wrap{overflow:hidden;padding:34px 0;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.marquee-wrap.marquee-grande{padding:52px 0}
.mq-strip{margin-top:44px}
.marquee-rotulo{text-align:center;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 26px}
.marquee{display:flex;gap:20px;width:max-content;animation:cinta 68s linear infinite}
.marquee-wrap:hover .marquee{animation-play-state:paused}
.marquee img{width:74px;height:74px;object-fit:contain;padding:12px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.055);border:1px solid var(--line);
  filter:grayscale(1) brightness(1.35) contrast(.9);opacity:.5;
  transition:filter .4s,opacity .4s,transform .4s var(--ease),background .4s}
.marquee img:hover{filter:none;opacity:1;transform:translateY(-6px) scale(1.08);background:rgba(255,255,255,.1)}
.marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:16vw;z-index:2;pointer-events:none}
.marquee-wrap::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.marquee-wrap::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════
   11 · SUBMENÚ PEGAJOSO DE TORNEO
   ══════════════════════════════════════════════════════════ */
.subnav{position:sticky;top:88px;z-index:50;padding:14px 0;pointer-events:none}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;
  padding:6px;border-radius:100px;max-width:fit-content;
  background:rgba(10,11,15,.72);border:1px solid var(--line);backdrop-filter:var(--blur);
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink-2);
  padding:9px 16px;border-radius:100px;transition:color .2s,background .3s}
.subnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.subnav a.on{color:#12080B;background:var(--escudo);font-weight:700}

/* ══════════════════════════════════════════════════════════
   12 · SECCIONES
   ══════════════════════════════════════════════════════════ */
section{padding:clamp(70px,9vw,128px) 0;position:relative}
section.alt{background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012) 40%,transparent);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.section-head{max-width:80ch;margin:0 0 clamp(34px,4vw,58px);position:relative}
.section-head h2{font-size:clamp(30px,4.6vw,62px);margin:0 0 18px;text-wrap:balance}
.section-head>p{font-size:17.5px;color:var(--ink-2);margin:0;max-width:70ch}
.morelink{color:var(--ambar);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(242,166,66,.35);transition:border-color .25s}
.morelink:hover{border-color:var(--ambar)}

/* ══════════════════════════════════════════════════════════
   13 · TARJETAS DE TORNEO
   ══════════════════════════════════════════════════════════ */
.tournaments{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.tournaments.dos{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}

.tcard{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:border-color .4s,box-shadow .4s,transform .5s var(--ease);will-change:transform}
.tcard:hover{border-color:rgba(242,166,66,.35);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.tcard-photo{display:block;aspect-ratio:16/10;overflow:hidden;position:relative}
.tcard-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,8,11,.92),rgba(7,8,11,.15) 55%,transparent)}
.tcard-photo img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.85);transition:transform 1.2s var(--ease),filter .6s}
.tcard:hover .tcard-photo img{transform:scale(1.08);filter:saturate(1) brightness(.95)}
.tcard-body{padding:30px 30px 34px;position:relative;margin-top:-52px}
.tcard-date{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--ambar);margin:0 0 10px}
/* con tres tarjetas en fila, el título tiene que caber en UNA línea:
   si "Estepona Summer Cup" parte en dos, las tres tarjetas se descuadran */
.tcard h3{font-size:clamp(24px,2.1vw,30px);margin:0 0 6px}
@media (min-width:861px){
  .tcard h3{min-height:1.02em}
  .tcard-place{min-height:2.9em}      /* la sede de Estepona es más larga */
}
.tcard h3 a{text-decoration:none}
.tcard h3 a::after{content:'';position:absolute;inset:0;z-index:3}
.tcard-place{color:var(--ink-3);font-size:14.5px;margin:0 0 22px}
.facts{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:1px;background:var(--line);
  border-radius:14px;overflow:hidden}
.facts li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 16px;background:#0A0C11;font-size:14.5px}
.facts span{color:var(--ink-3)}
.facts b{color:#fff;text-align:right;font-weight:700}
.tcard .btn{position:relative;z-index:4}
/* brillo que sigue al ratón */
.tcard .brillo{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .4s;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(242,166,66,.16),transparent 62%)}
.tcard.activo .brillo{opacity:1}

/* catálogos en PDF */
.cat-descargas{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cat-card{display:flex;flex-direction:column;gap:7px;text-decoration:none;padding:30px 28px;
  border-radius:var(--r);background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .3s,background .3s}
.cat-card:hover{transform:translateY(-6px);border-color:rgba(242,166,66,.4);background:rgba(255,255,255,.06)}
.cat-fechas{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);font-weight:700}
.cat-card b{font-size:22px;letter-spacing:-.02em}
.cat-sede{color:var(--ink-3);font-size:14px}
.cat-btn{margin-top:12px;font-size:14.5px;font-weight:600;color:#fff;display:inline-flex;gap:8px;align-items:center}
.cat-btn .ar{transition:transform .3s var(--ease)}
.cat-card:hover .ar{transform:translateY(3px)}

/* ══════════════════════════════════════════════════════════
   14 · CIFRAS Y RESEÑAS
   ══════════════════════════════════════════════════════════ */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cifras>div{background:#0A0C11;padding:38px 24px;text-align:center;transition:background .4s}
.cifras>div:hover{background:#0E1118}
.cifras b{display:block;font-size:clamp(38px,5vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--escudo);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cifras span{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quote{margin:0;padding:30px;border-radius:var(--r);background:rgba(255,255,255,.035);
  border:1px solid var(--line);transition:transform .45s var(--ease),border-color .3s}
.quote:hover{transform:translateY(-5px);border-color:var(--line-2)}
.quote .stars{color:var(--ambar);letter-spacing:3px;margin-bottom:14px;font-size:15px}
.quote p{font-size:16px;color:var(--ink-2);margin:0 0 16px;line-height:1.6}
.quote cite{font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════
   15 · BLOQUE DE IMPACTO
   ══════════════════════════════════════════════════════════ */
.impact{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,rgba(229,89,53,.13),rgba(242,166,66,.05) 60%,transparent)}
.impact .text{padding:clamp(50px,6vw,96px) clamp(26px,5vw,80px)}
.impact h2{font-size:clamp(30px,4.2vw,56px);margin:0 0 20px}
.impact p{font-size:17.5px;color:var(--ink-2);max-width:56ch}
.impact .media{margin:0;height:100%;min-height:340px;overflow:hidden;border-radius:0}
.impact .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.85)}

/* ══════════════════════════════════════════════════════════
   16 · LISTAS CON CHECK
   ══════════════════════════════════════════════════════════ */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.checklist-2col{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:13px 34px}
.checklist li{position:relative;padding-left:36px;color:var(--ink-2);font-size:16px;line-height:1.55}
.checklist li::before{content:'';position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;
  background:rgba(242,166,66,.14);border:1px solid rgba(242,166,66,.3)}
.checklist li::after{content:'';position:absolute;left:8px;top:9px;width:6px;height:10px;
  border:solid var(--ambar);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checklist.cruz li::before{background:rgba(255,255,255,.05);border-color:var(--line-2)}
.checklist.cruz li::after{left:6px;top:11px;width:11px;height:0;border:0;
  border-top:1.8px solid var(--ink-3);transform:rotate(45deg);
  box-shadow:0 0 0 0 transparent}
.checklist.cruz li{padding-left:36px}
.checklist.cruz li::before{content:'✕';display:grid;place-items:center;font-size:11px;
  color:var(--ink-3);line-height:1}
.checklist.cruz li::after{display:none}

/* ══════════════════════════════════════════════════════════
   17 · SECCIONES DE TEXTO + FOTO
   ══════════════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.split h2{font-size:clamp(28px,3.6vw,48px);margin:0 0 18px}
.split p{color:var(--ink-2);font-size:17px}
.split ul{color:var(--ink-2);padding-left:20px}
.split ul li{margin-bottom:8px}
.media{margin:0;border-radius:var(--r-lg);overflow:hidden;position:relative;background:#0A0C11}
.media img{width:100%;transition:transform 1.4s var(--ease)}
.media:hover img{transform:scale(1.05)}

/* ══════════════════════════════════════════════════════════
   18 · TABLAS
   ══════════════════════════════════════════════════════════ */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-borde{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.02)}
.tabla{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.tabla th{text-align:left;padding:16px 20px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ambar);font-weight:700;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.tabla td{padding:16px 20px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .25s}
.tabla tbody tr:hover{background:rgba(255,255,255,.035)}
.tabla td b{color:#fff}
.tabla .num{font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap;
  background:var(--escudo);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.tabla .nota{color:var(--ink-3);font-size:13.5px}
.distancias{width:100%;border-collapse:collapse;font-size:16px}
.distancias th{text-align:left;padding:12px 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line)}
.distancias td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.distancias .km{text-align:right;color:#fff;font-weight:700}

/* ══════════════════════════════════════════════════════════
   19 · PROGRAMA POR DÍAS
   ══════════════════════════════════════════════════════════ */
.program{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.day{border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .3s}
.day:hover{transform:translateY(-5px);border-color:rgba(242,166,66,.32)}
.day-head{padding:24px 26px;background:linear-gradient(120deg,rgba(229,89,53,.2),rgba(242,166,66,.06));
  border-bottom:1px solid var(--line)}
.day-head .d{display:block;font-size:44px;font-weight:800;line-height:1;letter-spacing:-.05em;color:#fff}
.day-head .wd{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);
  font-weight:700;margin-top:8px}
.day-head .t{display:block;font-size:15px;color:var(--ink-2);margin-top:4px}
.day ul{list-style:none;margin:0;padding:22px 26px 26px;display:grid;gap:12px}
.day li{position:relative;padding-left:20px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.day li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--escudo)}

/* ══════════════════════════════════════════════════════════
   20 · REJILLA DE INFORMACIÓN
   ══════════════════════════════════════════════════════════ */
.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.infogrid>div{background:#0A0C11;padding:30px 28px;transition:background .35s}
.infogrid>div:hover{background:#0E1118}
.infogrid h3{font-size:18.5px;margin:0 0 12px;color:#fff}
.infogrid p{color:var(--ink-2);font-size:15.5px;margin:0 0 .8em}
.infogrid p:last-child{margin-bottom:0}

/* frase grande */
.claim{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;padding:36px 0;margin:0 0 26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.claim b{font-size:clamp(52px,8vw,110px);font-weight:800;line-height:.92;letter-spacing:-.05em;
  background:var(--escudo);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.claim span{font-size:clamp(17px,1.9vw,22px);color:var(--ink-2);max-width:40ch;line-height:1.4}

.esc-nota{padding:22px 26px;border-radius:var(--r);background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-left:3px solid var(--ambar);color:var(--ink-2);font-size:15.5px}
.nota-honesta{padding:26px 28px;border-radius:var(--r);background:rgba(242,166,66,.07);
  border:1px solid rgba(242,166,66,.22);color:var(--ink-2);font-size:15.5px}
.dosColumnas{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.dosColumnas .no h3{font-size:19px;margin:0 0 16px;display:flex;align-items:center;gap:10px;color:#fff}
.dosColumnas .mk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.pricing{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:start}
.pricing h3{color:#fff}

/* ══════════════════════════════════════════════════════════
   21 · PASOS
   ══════════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{position:relative;padding:32px 28px;border-radius:var(--r);background:rgba(255,255,255,.035);
  border:1px solid var(--line);overflow:hidden;transition:transform .45s var(--ease),border-color .3s}
.step:hover{transform:translateY(-6px);border-color:rgba(242,166,66,.32)}
.step::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--escudo);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.step:hover::after{transform:scaleX(1)}
.step .n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font-size:16px;font-weight:800;color:#12080B;background:var(--escudo);margin-bottom:18px}
.step h3{font-size:19px;margin:0 0 10px;color:#fff}
.step p{color:var(--ink-2);font-size:15.5px;margin:0}

/* ══════════════════════════════════════════════════════════
   22 · DOS FECHAS
   ══════════════════════════════════════════════════════════ */
.dos-fechas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.fecha-card{padding:36px 32px;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:transform .5s var(--ease),border-color .35s,box-shadow .35s}
.fecha-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(90% 70% at 10% 0%,rgba(242,166,66,.16),transparent 65%)}
.fecha-card:hover{transform:translateY(-7px);border-color:rgba(242,166,66,.4);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.fecha-card:hover::before{opacity:1}
.fecha-card>*{position:relative}
.fecha-orden{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ambar);font-weight:700;margin:0 0 14px}
.fecha-orden i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  font-style:normal;font-size:14px;letter-spacing:0;color:#12080B;background:var(--escudo)}
.fecha-foto{margin:0 0 24px;border-radius:14px;overflow:hidden;background:#0A0C11}
.fecha-foto img{width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.85) brightness(.9);transition:transform 1.1s var(--ease),filter .5s}
.fecha-card:hover .fecha-foto img{transform:scale(1.05);filter:saturate(1) brightness(1)}
/* al llegar desde la portada, se resalta un momento el torneo elegido */
.fecha-card:target{border-color:var(--ambar);box-shadow:0 0 0 1px var(--ambar),0 40px 90px rgba(0,0,0,.5)}
.fecha-card:target::before{opacity:1}
.fecha-card h3{font-size:clamp(26px,3vw,36px);margin:0 0 10px}
.fecha-dias{font-size:17px;color:var(--ink-2);margin:0 0 24px}
.fecha-dias b{font-size:23px;color:#fff}
.fecha-datos{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.fecha-datos li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.fecha-datos span{color:var(--ink-3)}
.fecha-datos b{color:#fff}
.fecha-acciones{display:flex;gap:12px;flex-wrap:wrap}

/* botón de descarga del catálogo, dentro de cada ficha de torneo */
.btn-pdf{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 22px 12px 48px;
  text-align:left;font-weight:600}
.btn-pdf::after{content:'\2193';position:absolute;left:22px;top:50%;margin-top:-11px;
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  font-size:13px;line-height:1;color:#12080B;background:var(--escudo);
  transition:transform .3s var(--ease)}
.btn-pdf:hover::after{transform:translateY(3px);background:#12080B;color:#fff}
.btn-pdf span{font-size:15px}
.btn-pdf small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;transition:color .25s}
.btn-pdf:hover small{color:rgba(26,14,6,.62)}
.descarga-libre{flex:0 0 100%;margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.descarga-libre::before{content:'\2713';margin-right:7px;color:var(--ambar);font-weight:700}
@media (max-width:820px){
  .fecha-acciones .btn-pdf{align-items:center;text-align:center;padding:12px 22px 12px 48px}
}

/* ══════════════════════════════════════════════════════════
   23 · MAPA
   ══════════════════════════════════════════════════════════ */
.logi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,58px);align-items:center}
.mapa{border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.03);
  border:1px solid var(--line);padding:18px}
.mapa svg{width:100%;height:auto;display:block}
.mapa .sea{fill:rgba(255,255,255,.02)}
.mapa .land{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.16);stroke-width:1}
.mapa .pin circle{fill:var(--ambar)}
.mapa .pin .halo{fill:rgba(242,166,66,.2);transform-box:fill-box;transform-origin:center;
  animation:pulso 2.6s ease-out infinite}
.mapa .pin text{fill:#fff;font-size:12px;font-weight:700;font-family:var(--font)}
.mapa .pin text.sub{fill:var(--ink-3);font-size:10px;font-weight:400}
@keyframes pulso{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* ══════════════════════════════════════════════════════════
   24 · GALERÍA / CARRUSEL
   ══════════════════════════════════════════════════════════ */
.galwrap{position:relative;margin:0 -26px;padding:0 26px}
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{margin:0;flex:0 0 min(430px,78vw);scroll-snap-align:start;cursor:pointer;
  border-radius:var(--r);overflow:hidden;position:relative;background:#0A0C11;border:1px solid var(--line)}
.gallery figure img{width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.8) brightness(.86);transition:transform 1.1s var(--ease),filter .5s}
.gallery figure:hover img{transform:scale(1.07);filter:saturate(1) brightness(1)}
.gallery figure::after{content:'⤢';position:absolute;right:14px;bottom:14px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;font-size:15px;color:#fff;opacity:0;
  background:rgba(10,11,15,.7);border:1px solid var(--line);backdrop-filter:blur(8px);
  transition:opacity .3s,transform .4s var(--ease);transform:translateY(8px)}
.gallery figure:hover::after{opacity:1;transform:none}

.car-btn{position:absolute;top:calc(50% - 40px);z-index:6;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line);background:rgba(10,11,15,.75);color:#fff;font-size:22px;cursor:pointer;
  backdrop-filter:blur(10px);transition:background .3s,transform .3s var(--ease),opacity .3s}
.car-btn:hover{background:var(--escudo);color:#12080B;transform:scale(1.08)}
.car-btn:disabled{opacity:.2;cursor:default;transform:none}
.car-prev{left:6px}
.car-next{right:6px}
.car-pie{display:flex;align-items:center;gap:16px;margin-top:18px}
.car-barra{position:relative;flex:1;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.car-barra i{position:absolute;left:0;top:0;height:100%;background:var(--escudo);border-radius:2px;
  transition:transform .25s ease,width .25s ease}
.car-txt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}

/* visor grande */
.lightbox{position:fixed;inset:0;z-index:180;display:none;place-items:center;
  background:rgba(4,5,8,.94);backdrop-filter:blur(14px);opacity:0;transition:opacity .3s}
.lightbox.on{display:grid}
.lightbox.visible{opacity:1}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:14px;box-shadow:0 40px 120px rgba(0,0,0,.8);
  animation:zoomIn .45s var(--ease)}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lb-cerrar,.lb-ant,.lb-sig{position:absolute;background:rgba(255,255,255,.07);border:1px solid var(--line);
  color:#fff;width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;
  backdrop-filter:blur(10px);transition:background .3s,transform .3s var(--ease)}
.lb-cerrar:hover,.lb-ant:hover,.lb-sig:hover{background:var(--escudo);color:#12080B;transform:scale(1.08)}
.lb-cerrar{top:24px;right:24px}
.lb-ant{left:24px;top:50%;margin-top:-26px}
.lb-sig{right:24px;top:50%;margin-top:-26px}
.lb-pie{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--ink-3);font-size:13.5px;margin:0}

/* ══════════════════════════════════════════════════════════
   25 · CALCULADORA
   ══════════════════════════════════════════════════════════ */
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.calc-in{background:#0A0C11;padding:clamp(26px,3vw,42px)}
.calc-out{background:linear-gradient(160deg,rgba(229,89,53,.14),rgba(12,14,19,.9) 60%);
  padding:clamp(26px,3vw,42px)}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.calc-row label{font-size:16px;font-weight:600;color:#fff;display:block}
.calc-row label small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:3px}
.stepper{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:100px;padding:4px;flex:0 0 auto}
.stepper button{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:#fff;
  font-size:19px;cursor:pointer;transition:background .25s,color .25s}
.stepper button:hover{background:var(--escudo);color:#12080B}
.stepper input{width:56px;border:0;background:transparent;color:#fff;text-align:center;
  font-family:var(--font);font-size:17px;font-weight:700;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-check{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;
  color:var(--ink-2);cursor:pointer}
.calc-check input{margin-top:4px;accent-color:var(--naranja);width:18px;height:18px}
.calc-total span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambar);font-weight:700}
.calc-total b{display:block;font-size:clamp(40px,5.6vw,66px);font-weight:800;letter-spacing:-.045em;
  line-height:1.05;margin:8px 0 4px;color:#fff;font-variant-numeric:tabular-nums}
.calc-total i{font-style:normal;font-size:14.5px;color:var(--ink-2)}
.calc-lines{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.calc-lines li{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--ink-2)}
.calc-lines li b{color:#fff;white-space:nowrap}
.calc-lines li.sep{margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.sepmark{color:var(--ambar);font-weight:700}
.calc-note{margin:22px 0 0;font-size:14.5px;color:var(--ink-2);padding:16px 18px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.calc-note b{color:var(--ambar)}
.calc-legal{margin:12px 0 0;font-size:13px;color:var(--ink-3)}
.calc-cta{margin-top:24px}

/* ══════════════════════════════════════════════════════════
   26 · PREGUNTAS (acordeón)
   ══════════════════════════════════════════════════════════ */
.faq{display:grid;gap:12px}
.faq details{border-radius:var(--r);background:rgba(255,255,255,.032);border:1px solid var(--line);
  overflow:hidden;transition:border-color .3s,background .3s}
.faq details:hover{border-color:var(--line-2)}
.faq details[open]{background:rgba(255,255,255,.055);border-color:rgba(242,166,66,.28)}
.faq summary{cursor:pointer;list-style:none;padding:22px 60px 22px 26px;position:relative;
  font-size:17.5px;font-weight:600;color:#fff;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:26px;top:50%;width:13px;height:13px;margin-top:-9px;
  border:solid var(--ambar);border-width:0 2px 2px 0;transform:rotate(45deg);
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details>*:not(summary){padding:0 26px;color:var(--ink-2);font-size:16px;
  animation:abre .4s var(--ease)}
.faq details>p:last-of-type{padding-bottom:24px}
.faq details ul{margin:0 0 20px;padding:0 26px 0 46px;color:var(--ink-2)}
.faq details li{margin-bottom:8px}
.faq mark{background:rgba(242,166,66,.28);color:#fff;border-radius:3px;padding:0 3px}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faqgroup{font-size:clamp(24px,3vw,36px);margin:44px 0 8px}
.faqgroup:first-child{margin-top:0}

/* etiqueta "A confirmar" */
.revisar{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:3px 10px;border-radius:100px;background:rgba(242,166,66,.16);color:var(--ambar);
  border:1px solid rgba(242,166,66,.3);margin:0 0 10px}

/* ══════════════════════════════════════════════════════════
   27 · BUSCADOR DE PREGUNTAS
   ══════════════════════════════════════════════════════════ */
.faqhead{position:relative;overflow:hidden;padding:200px 0 84px;
  background:linear-gradient(160deg,rgba(229,89,53,.18),rgba(7,8,11,0) 55%)}
.franjas{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.5}
.franjas i{position:absolute;top:-40%;width:150px;height:180%;transform:rotate(18deg);
  background:linear-gradient(180deg,transparent,rgba(242,166,66,.14),transparent);
  animation:barre 9s ease-in-out infinite}
.franjas i:nth-child(1){left:8%}
.franjas i:nth-child(2){left:44%;animation-delay:-3s}
.franjas i:nth-child(3){left:78%;animation-delay:-6s}
@keyframes barre{0%,100%{transform:rotate(18deg) translateY(-6%)}50%{transform:rotate(18deg) translateY(6%)}}
.faqhead h1{font-size:clamp(38px,6.4vw,86px);margin:0 0 22px}

.buscaHero{margin-top:34px;max-width:760px}
.buscaBox{position:relative;display:flex;align-items:center;gap:14px;padding:6px 6px 6px 22px;
  border-radius:100px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  backdrop-filter:var(--blur);transition:border-color .3s,box-shadow .3s}
.buscaBox:focus-within{border-color:rgba(242,166,66,.55);box-shadow:0 0 0 5px rgba(242,166,66,.1)}
.buscaBox svg{width:21px;height:21px;fill:none;stroke:var(--ambar);stroke-width:2;
  stroke-linecap:round;flex:0 0 auto}
.buscaBox input{flex:1;border:0;background:transparent;color:#fff;font-family:var(--font);font-size:17px;
  padding:16px 0;outline:none;min-width:0}
.buscaBox input::placeholder{color:var(--ink-3)}
.limpiarX{display:none;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;flex:0 0 auto}
.limpiarX.on{display:block}
.sugerencias{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;padding:8px;
  border-radius:20px;background:rgba(12,14,19,.96);border:1px solid var(--line-2);
  backdrop-filter:var(--blur);box-shadow:var(--shadow);max-height:60vh;overflow-y:auto;
  animation:abre .3s var(--ease)}
.sug-cab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px}
.sug{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;cursor:pointer;
  padding:12px 14px;border-radius:12px;font-family:var(--font);font-size:15.5px;line-height:1.35;
  transition:background .2s}
.sug span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.sug:hover,.sug.sel{background:rgba(255,255,255,.08)}
.sug mark{background:rgba(242,166,66,.3);color:#fff;border-radius:3px}
.chips{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}
.chips b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.chips button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink-2);
  border-radius:100px;padding:9px 16px;font-family:var(--font);font-size:14px;cursor:pointer;
  transition:background .25s,color .25s,transform .3s var(--ease),border-color .25s}
.chips button:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateY(-2px);border-color:var(--line-2)}
.faq-pista{margin:16px 0 0;font-size:13.5px;color:var(--ink-3)}

.temas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tema{text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:var(--r);
  padding:24px 24px 26px;cursor:pointer;font-family:var(--font);color:var(--ink-2);
  transition:transform .4s var(--ease),border-color .3s,background .3s}
.tema:hover{transform:translateY(-5px);border-color:rgba(242,166,66,.35);background:rgba(255,255,255,.06)}
.tema[aria-pressed="true"]{border-color:var(--ambar);background:rgba(242,166,66,.1)}
.tema .n{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);
  font-weight:700;margin-bottom:10px}
.tema b{display:block;font-size:20px;color:#fff;margin-bottom:8px;letter-spacing:-.02em}
.tema>span:last-child{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.45}

.faqcount{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px;border-radius:100px;
  background:rgba(242,166,66,.1);border:1px solid rgba(242,166,66,.24);margin:0 0 26px;font-size:15px}
.faqcount b{color:#fff}
.faqcount span{color:var(--ink-2)}
.faqcount button{margin-left:auto;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:100px;
  padding:8px 16px;font-family:var(--font);font-size:13.5px;cursor:pointer;transition:background .25s}
.faqcount button:hover{background:rgba(255,255,255,.18)}
.vacio{padding:40px 34px;border-radius:var(--r-lg);text-align:center;
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.vacio b{display:block;font-size:22px;color:#fff;margin-bottom:12px}
.vacio p{color:var(--ink-2);max-width:56ch;margin:0 auto 22px}

.relacionadas{padding:20px 26px 0 !important;border-top:1px solid var(--line);margin-top:20px}
.relacionadas p{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.chipsrel{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:6px}
.chipsrel button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink-2);
  border-radius:100px;padding:8px 15px;font-family:var(--font);font-size:13.5px;cursor:pointer;
  text-align:left;transition:background .25s,color .25s}
.chipsrel button:hover{background:rgba(255,255,255,.09);color:#fff}
.util{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 26px 24px !important}
.util p{margin:0;font-size:14px;color:var(--ink-3)}
.util button{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:100px;
  padding:8px 18px;font-family:var(--font);font-size:14px;cursor:pointer;transition:background .25s}
.util button:hover{background:rgba(255,255,255,.12)}
.util-ok{color:var(--ambar) !important}
.util-no{padding:18px 26px 24px !important}
.util-no p{margin:0 0 14px;font-size:14.5px;color:var(--ink-2)}

/* ══════════════════════════════════════════════════════════
   28 · FORMULARIO
   ══════════════════════════════════════════════════════════ */
.aviso-form{padding:22px 26px;border-radius:var(--r);background:rgba(242,166,66,.08);
  border:1px solid rgba(242,166,66,.22);color:var(--ink-2);font-size:15.5px;margin-bottom:34px}
.form fieldset{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;margin:0 0 22px;
  background:rgba(255,255,255,.028)}
.form legend{padding:0 14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambar);
  font-weight:700}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fgrid.tres{grid-template-columns:repeat(3,1fr)}
.fgrid.cuatro{grid-template-columns:repeat(4,1fr)}
.campo.ancho{grid-column:1/-1}
.campo label{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.campo label i{font-style:normal;color:var(--ink-3);font-weight:400}
.campo input,.campo textarea{width:100%;padding:15px 18px;border-radius:14px;font-family:var(--font);
  font-size:16px;color:#fff;background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:border-color .25s,box-shadow .25s,background .25s}
.campo textarea{min-height:130px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-3)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:rgba(242,166,66,.55);
  background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(242,166,66,.1)}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.opcion{position:relative;cursor:pointer}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion span{display:block;padding:18px 20px;border-radius:14px;font-size:15.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:background .3s,border-color .3s,transform .35s var(--ease),box-shadow .3s}
.opcion span small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:4px}
.opcion:hover span{background:rgba(255,255,255,.07);transform:translateY(-2px)}
.opcion input:checked+span{border-color:var(--ambar);background:rgba(242,166,66,.12);
  box-shadow:0 0 0 1px rgba(242,166,66,.4)}
.cats-check{display:flex;gap:10px;flex-wrap:wrap}
.checkbox{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:15px;color:var(--ink-2)}
.checkbox input{accent-color:var(--naranja);width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.cats-check .checkbox{padding:11px 18px;border-radius:100px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);transition:background .25s,border-color .25s}
.cats-check .checkbox:hover{background:rgba(255,255,255,.08);border-color:var(--line-2)}
.form-envio{padding:30px;border-radius:var(--r-lg);background:rgba(255,255,255,.045);border:1px solid var(--line)}
.botones{display:flex;gap:14px;flex-wrap:wrap}
.form-nota{margin:18px 0 0;font-size:14px;color:var(--ink-3)}

.canales{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.canal{display:flex;align-items:center;gap:18px;padding:26px 28px;border-radius:var(--r-lg);
  text-decoration:none;background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .3s,background .3s}
.canal:hover{transform:translateY(-5px);background:rgba(255,255,255,.07);border-color:var(--line-2)}
.canal svg{width:34px;height:34px;flex:0 0 auto}
.canal-wa svg{fill:#25D366}
.canal-mail svg{fill:none;stroke:var(--ambar);stroke-width:1.6}
.canal b{display:block;font-size:18px;color:#fff;margin-bottom:3px}
.canal span span{font-size:14px;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════
   29 · LLAMADA FINAL
   ══════════════════════════════════════════════════════════ */
.cta{position:relative;overflow:hidden;padding:clamp(72px,9vw,130px) 0;text-align:center;
  background:linear-gradient(140deg,rgba(229,89,53,.24),rgba(242,166,66,.1) 45%,rgba(7,8,11,0) 78%);
  border-top:1px solid var(--line)}
.cta::before{content:'';position:absolute;width:70vmax;height:70vmax;left:50%;top:100%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(242,166,66,.16),transparent 62%)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(32px,5.4vw,74px);margin:0 0 20px;text-wrap:balance}
.cta>.wrap>p{font-size:18px;color:var(--ink-2);max-width:60ch;margin:0 auto 32px}
.cta .tel{font-size:14.5px;color:var(--ink-3);margin-top:26px}
.cta .tel a{color:var(--ambar);text-decoration:none;border-bottom:1px solid rgba(242,166,66,.35)}

/* ══════════════════════════════════════════════════════════
   30 · PIE
   ══════════════════════════════════════════════════════════ */
.site-footer{background:#05060A;border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) 0 30px;
  color:var(--ink-3);font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.site-footer .logo img{height:34px;width:auto}
.site-footer h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambar);margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.site-footer a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:#fff}
.copiar{border:0;background:transparent;color:var(--ink-3);font-family:var(--font);font-size:12px;
  cursor:pointer;padding:2px 0;border-bottom:1px dashed var(--line-2);margin-top:4px}
.copiar:hover{color:var(--ambar)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line);font-size:13px}
.footer-bottom a{color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════
   31 · FLOTANTES
   ══════════════════════════════════════════════════════════ */
.floaters{position:fixed;right:20px;bottom:20px;z-index:110;display:grid;gap:12px;justify-items:center}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s,opacity .3s}
.fab:hover{transform:scale(1.08) translateY(-2px)}
.fab-wa{background:#25D366;border-color:transparent;box-shadow:0 14px 34px rgba(37,211,102,.35)}
.fab-wa svg{width:27px;height:27px;fill:#06210F}
.fab-top{background:rgba(12,14,19,.85);color:#fff;font-size:19px;backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.fab-top.show{opacity:1;pointer-events:auto}

.barraFija{position:fixed;left:12px;right:12px;bottom:12px;z-index:105;display:none;gap:10px;
  padding:10px;border-radius:100px;background:rgba(10,11,15,.86);border:1px solid var(--line);
  backdrop-filter:var(--blur);box-shadow:0 -10px 40px rgba(0,0,0,.5);
  transform:translateY(140%);transition:transform .5s var(--ease)}
.barraFija.on{transform:none}
.barraFija .btn{flex:1;padding:14px 18px;font-size:15px}
.barraFija .btn-wa{flex:0 0 54px;padding:0}

.aviso-copia{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:170;
  padding:13px 24px;border-radius:100px;background:rgba(12,14,19,.94);border:1px solid var(--line);
  color:#fff;font-size:14px;backdrop-filter:blur(10px);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .4s var(--ease)}
.aviso-copia.on{opacity:1;transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════════════
   32 · ANIMACIONES DE APARICIÓN
   ══════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(34px);filter:blur(7px);
  transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}

/* fotos: cortina + zoom (el recorte va en la IMG, nunca en la figura:
   si se recorta la figura, el navegador la da por invisible y no aparece jamás) */
.rv-img>img{clip-path:inset(0 0 100% 0);transform:scale(1.12);
  transition:clip-path 1.15s var(--ease),transform 1.5s var(--ease)}
.rv-img.in>img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* titulares: palabra a palabra desde abajo */
/* el hueco de abajo evita que la máscara corte las colas de la j, la g o la p */
.palabra{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.16em;margin-bottom:-.16em}
.palabra>i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 42ms)}
.rv-txt.in .palabra>i{transform:none}

/* ══════════════════════════════════════════════════════════
   33 · PANTALLAS MEDIANAS Y MÓVIL
   ══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .impact{grid-template-columns:1fr}
  .impact .media{min-height:300px;order:-1}
  .pricing,.logi,.dosColumnas,.calc,.split{grid-template-columns:1fr}
  .quickfacts{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  html{scroll-padding-top:90px}
  .site-header{top:10px;margin-bottom:-58px;padding:0 10px}
  .site-header .wrap{min-height:58px;padding:0 8px 0 18px;gap:14px}
  .site-header .logo img{height:26px}
  .navtoggle{display:block}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:stretch;
    gap:8px;padding:88px 22px 34px;margin:0;background:rgba(7,8,11,.97);backdrop-filter:blur(24px);
    transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .55s var(--ease),opacity .4s;overflow-y:auto}
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav a{font-size:26px;font-weight:700;letter-spacing:-.03em;color:#fff;padding:16px 20px;
    border-bottom:1px solid var(--line);border-radius:0}
  .nav a[aria-current]::after{display:none}
  .nav a[aria-current]{color:var(--ambar)}
  .nav .btn{margin:20px 0 0;font-size:17px;justify-content:center;border-bottom:0}

  .heroF{min-height:auto;padding:132px 0 66px}
  .heroF--faq{padding:132px 0 50px}
  .faqhead{padding:140px 0 60px}
  .rail{margin-top:-34px}
  .quickfacts{grid-template-columns:1fr}
  .subnav{top:76px;padding:12px 16px}
  .subnav .wrap{max-width:100%}        /* si no, la pastilla se sale de la pantalla */
  .scrollcue{display:none}             /* en móvil chocaba con el texto de la portada */
  .fgrid,.fgrid.tres,.fgrid.cuatro{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .barraFija{display:flex}
  .floaters{bottom:88px;right:14px}
  .fab{width:50px;height:50px}
  /* cuando sale la barra fija de abajo ya lleva su WhatsApp: el flotante
     sobraba, se repetía en pantalla y tapaba el texto */
  .barraFija.on ~ .floaters .fab-wa{opacity:0;pointer-events:none;transform:scale(.7)}
  .car-btn{display:none}
  .galwrap{margin:0 -22px;padding:0 22px}
  .claim{gap:14px}
  .lb-ant,.lb-sig{width:44px;height:44px;font-size:19px}
  .lb-ant{left:10px}.lb-sig{right:10px}
  .impact .text{padding:44px 26px}
  .cta{text-align:left}
  .cta>.wrap>p{margin-left:0}
}

@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .cdbox{min-width:0;flex:1;padding:12px 4px}
  .cdbox b{font-size:24px}
  .tcard-body{padding:24px 22px 28px}
  .hero-actions .btn,.fecha-acciones .btn,.botones .btn{width:100%}
  .play-video{width:100%}
  .videobox{padding:16px}
  .videobox .vb-cerrar{top:-52px;right:0}
  .videobox .vb-pie{display:none}
  .barraFija .btn{width:auto}
  .marquee img{width:58px;height:58px;padding:9px}
}

/* ══════════════════════════════════════════════════════════
   34 · SI EL SISTEMA PIDE MENOS MOVIMIENTO, SE QUITA TODO
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none;filter:none}
  .rv-img>img{clip-path:none;transform:none}
  .palabra>i{transform:none}
  .intro{display:none}
  .cursor,.cursor-anillo{display:none}
}

/* ══════════════════════════════════════════════════════════
   35 · IMPRESIÓN
   ══════════════════════════════════════════════════════════ */
@media print{
  body{background:#fff;color:#000}
  body::before,body::after,.floaters,.barraFija,.progress,.intro,.cursor,.cursor-anillo,
  .subnav,.site-header,.mockup-bar,.marquee-wrap,.car-btn,.car-pie{display:none !important}
  .rv,.rv-img>img,.palabra>i{opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important}
  section{padding:20px 0;break-inside:avoid}
  h1,h2,h3{color:#000}
  .faq details{border:1px solid #ccc}
}

/* ══════════════════════════════════════════════════════════════════
   AÑADIDOS DE LA WEB DE PETANCA
   Lo de arriba es el diseño de la web de fútbol, sin tocar.
   Aquí abajo solo lo que la petanca necesita y el fútbol no tenía.
   ══════════════════════════════════════════════════════════════════ */

/* Selector de idioma en el menú (ES · EN · FR · IT) */
.idiomas{display:inline-flex;align-items:center;gap:2px;margin-left:10px;padding:3px;
  border-radius:100px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.idiomas a{padding:5px 9px;font-size:12px;font-weight:700;letter-spacing:.06em;
  border-radius:100px;color:var(--ink-3)}
.idiomas a:hover{color:#fff;background:rgba(255,255,255,.08)}
.idiomas a[aria-current]{color:#12080B;background:var(--escudo)}
.idiomas a[aria-current]::after{display:none}

/* Calendario de cuatro torneos */
.dos-fechas.cuatro{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.dos-fechas.cuatro .fecha-card{padding:30px 26px}
.dos-fechas.cuatro h3{font-size:clamp(21px,2.2vw,27px)}
.dos-fechas.cuatro .fecha-dias{font-size:15.5px;margin-bottom:20px}
.dos-fechas.cuatro .fecha-dias b{font-size:19px}

/* Marco del vídeo de YouTube */
.video-marco{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0A0C11;
  border:1px solid var(--line);aspect-ratio:16/9;display:grid;place-items:center}
.video-marco>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) brightness(.5);transition:filter .5s,transform 1.2s var(--ease)}
.video-marco:hover>img{filter:saturate(.85) brightness(.6);transform:scale(1.04)}
.video-marco .play-video{position:relative;z-index:2}
.video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

@media (max-width:860px){
  .idiomas{margin:18px 0 0;justify-content:center;width:100%}
  .idiomas a{flex:1;text-align:center;font-size:15px;padding:12px 0}
}

/* Premio del primer clasificado, en las fichas de torneo */
.premio-1{display:flex;flex-direction:column;gap:3px;margin:0 0 22px;padding:14px 16px;
  border-radius:12px;background:rgba(242,166,66,.09);border:1px solid rgba(242,166,66,.22);
  font-size:14px;color:#fff;line-height:1.4}
.premio-1 span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);font-weight:700}
.fecha-datos b small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:2px}
.dos-fechas.cuatro .fecha-foto{margin-bottom:18px}
.dos-fechas.cuatro .fecha-foto img{aspect-ratio:16/10}
/* que las 6 fichas queden alineadas aunque el título o la fecha ocupen dos líneas */
@media (min-width:861px){
  .dos-fechas.cuatro .fecha-card h3{min-height:2.05em}
  .dos-fechas.cuatro .fecha-dias{min-height:2.6em}
  .dos-fechas.cuatro .premio-1{min-height:5.2em}
}

/* ══════════════════════════════════════════════════════════════════
   CALENDARIO EN LISTA
   Un calendario se lee en vertical y por fechas. Una fila por torneo,
   a todo lo ancho: mes grande, foto, datos, precio y botón.
   ══════════════════════════════════════════════════════════════════ */
.calendario-lista{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cal-fila{display:grid;grid-template-columns:92px 132px 1fr auto auto;align-items:center;
  gap:26px;padding:20px 26px;background:#0A0C11;text-decoration:none;
  transition:background .3s var(--ease)}
.cal-fila:hover{background:#11141b}

.cal-fecha{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.cal-fecha b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.cal-fecha i{font-style:normal;font-size:11px;letter-spacing:.24em;color:var(--ambar);
  font-weight:700;margin-top:6px}

.cal-foto{display:block;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.cal-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  filter:saturate(.85) brightness(.9);transition:transform 1s var(--ease),filter .4s}
.cal-fila:hover .cal-foto img{transform:scale(1.06);filter:saturate(1) brightness(1)}

.cal-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-ocasion{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ambar);font-weight:700}
.cal-nombre{font-size:21px;font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.1}
.cal-meta{font-size:13.5px;color:var(--ink-3);line-height:1.45}

.cal-precio{text-align:right;font-size:23px;font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;background:var(--escudo);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.cal-precio i{display:block;font-style:normal;font-size:11px;font-weight:400;
  letter-spacing:0;color:var(--ink-3);-webkit-text-fill-color:var(--ink-3);margin-top:3px}

.cal-ir{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:100px;
  font-size:14px;font-weight:600;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  transition:background .3s,color .3s,border-color .3s}
.cal-ir b{transition:transform .3s var(--ease)}
.cal-fila:hover .cal-ir{background:var(--escudo);color:#12080B;border-color:transparent}
.cal-fila:hover .cal-ir b{transform:translateX(4px)}

@media (max-width:1100px){
  .cal-fila{grid-template-columns:80px 1fr auto;gap:18px;padding:18px 20px}
  .cal-foto{display:none}
  .cal-ir{display:none}
}
@media (max-width:640px){
  .cal-fila{grid-template-columns:1fr;gap:12px;padding:22px 20px}
  .cal-fecha{flex-direction:row;align-items:baseline;gap:10px}
  .cal-fecha i{margin-top:0}
  .cal-precio{text-align:left}
  .cal-precio i{display:inline;margin-left:6px}
}

/* Cuenta atrás de la portada */
.cuenta-rotulo{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;font-weight:700}

/* El submenú de secciones necesita hueco bajo la cabecera flotante */
.subnav+section,.subnav+div{scroll-margin-top:120px}
section[id]{scroll-margin-top:110px}


/* ══════════════════════════════════════════════════════════
   CINTA DE FOTOS DE LA PORTADA
   Las mismas reglas que la cinta de escudos del fútbol, pero
   con fotos apaisadas en vez de escudos redondos.
   ══════════════════════════════════════════════════════════ */
.marquee-fotos{padding:44px 0}
.marquee-fotos .marquee{gap:16px;animation-duration:78s}
.marquee-fotos img{width:230px;height:150px;padding:0;border-radius:16px;object-fit:cover;
  filter:saturate(.8) brightness(.82);opacity:.9;border:1px solid var(--line);background:#0A0C11}
.marquee-fotos img:hover{filter:saturate(1) brightness(1);opacity:1;
  transform:translateY(-6px) scale(1.03);border-color:rgba(242,166,66,.4)}
.cifras-band{padding-top:clamp(38px,5vw,60px) !important}
.cifras-band .marquee-rotulo{margin-bottom:22px}
@media (max-width:700px){
  .marquee-fotos img{width:168px;height:112px}
  .marquee-fotos{padding:32px 0}
}
/* ══════════════════════════════════════════════════════════
   TARJETAS GRANDES DE TORNEO
   Foto grande en blanco y negro que se colorea al pasar el
   ratón, con los datos que importan encima de la foto.
   ══════════════════════════════════════════════════════════ */
.torneos-grid{display:grid;gap:clamp(16px,2vw,26px)}
.torneos-grid.tres{grid-template-columns:repeat(3,1fr)}
.torneos-grid.dos{grid-template-columns:repeat(2,1fr)}
.torneos-grid.uno{grid-template-columns:1fr}

/* cuando el torneo es uno solo (Peñíscola, Bochas) no hay nada que elegir:
   la foto y la información se ponen una al lado de la otra, a lo ancho */
.tgrande.tg-ancho{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(22px,3vw,42px);align-items:center}
.tg-ancho .tg-foto{aspect-ratio:4/3}
.tg-ancho .tg-pie{padding:0}
.tg-ancho .tg-fecha{font-size:clamp(20px,2vw,27px)}
@media (max-width:900px){
  .tgrande.tg-ancho{grid-template-columns:1fr}
  .tg-ancho .tg-foto{aspect-ratio:5/4}
}

.tgrande{display:block;text-decoration:none;color:inherit;position:relative}
.tg-foto{display:block;position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:4/5;background:#0A0C11;border:1px solid var(--line);
  transition:border-color .45s,box-shadow .45s var(--ease),transform .55s var(--ease)}
.tg-detalle .tg-foto{aspect-ratio:16/11}
.tg-foto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.68) contrast(1.06);transform:scale(1.02);
  transition:filter .75s var(--ease),transform 1.3s var(--ease)}
.tgrande:hover .tg-foto img,.tgrande:focus-within .tg-foto img{filter:none;transform:scale(1.07)}
.tgrande:hover .tg-foto,.tgrande:focus-within .tg-foto{border-color:rgba(242,166,66,.5);
  box-shadow:0 34px 80px rgba(0,0,0,.55);transform:translateY(-6px)}
.tgrande:target .tg-foto{border-color:var(--ambar);box-shadow:0 0 0 1px var(--ambar)}

/* el velo oscuro: sin él, sobre una foto clara no se leería nada */
.tg-velo{position:absolute;inset:0;pointer-events:none;transition:opacity .6s;
  background:linear-gradient(to top,rgba(4,5,8,.94) 0%,rgba(4,5,8,.66) 26%,
    rgba(4,5,8,.06) 58%,rgba(4,5,8,.42) 100%)}
.tgrande:hover .tg-velo{opacity:.86}

.tg-orden{position:absolute;top:clamp(16px,1.6vw,22px);left:clamp(18px,1.8vw,26px);
  right:clamp(18px,1.8vw,26px);z-index:2;display:flex;align-items:center;gap:11px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:#fff}
.tg-orden i{font-style:normal;color:#12080B;background:var(--escudo);flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;letter-spacing:0}

.tg-sobre{position:absolute;z-index:2;left:clamp(18px,1.8vw,26px);right:clamp(18px,1.8vw,26px);
  bottom:clamp(16px,1.7vw,24px)}
.tg-fecha{display:block;font-size:clamp(23px,2.5vw,34px);font-weight:800;line-height:1.06;
  letter-spacing:-.038em;color:#fff}
.tg-fecha i{font-style:normal;color:var(--ambar);font-size:.6em;letter-spacing:.08em}
.tg-detalle .tg-fecha{font-size:clamp(19px,1.9vw,25px)}
.tg-nombre{display:block;margin:6px 0 0;font-size:clamp(16px,1.35vw,20px);font-weight:700;
  color:rgba(255,255,255,.9);letter-spacing:-.01em;line-height:1.2}
.tg-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.tg-precio i{font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
.tg-precio b{font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-.035em;
  background:var(--escudo);-webkit-background-clip:text;background-clip:text;color:transparent}
.tg-precio small{flex:0 0 100%;font-size:12px;color:var(--ink-3)}

.tg-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 4px 0}
.tg-meta{font-size:13px;color:var(--ink-3);line-height:1.45;margin:0}
.tg-ir{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:600;color:#fff;transition:color .3s}
.tg-ir b{font-size:15px;color:var(--ambar);transition:transform .3s var(--ease)}
.tgrande:hover .tg-ir b{transform:translate(3px,-3px)}

/* en la página de sede, debajo de la foto va el detalle completo */
.tg-detalle .tg-pie{display:block;padding:22px 0 0}
.tg-detalle .fecha-datos{margin-bottom:20px}
.tg-detalle .premio-1{margin-bottom:20px}
.tg-detalle .fecha-acciones{margin:0}

@media (max-width:1000px){
  .torneos-grid.tres{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .torneos-grid.tres,.torneos-grid.dos{grid-template-columns:1fr}
  .tg-foto{aspect-ratio:5/4}
  .tg-detalle .tg-foto{aspect-ratio:5/4}
  .tg-pie{flex-direction:column;align-items:flex-start;gap:8px}
}

/* el de descargar catálogo es el que más se tiene que ver: va relleno */
.btn-grad.btn-pdf::after{background:#12080B;color:#fff}
.btn-grad.btn-pdf small{color:rgba(26,14,6,.66)}
.btn-grad.btn-pdf:hover::after{background:#fff;color:#12080B;transform:translateY(3px)}
.btn-grad.btn-pdf:hover small{color:rgba(18,8,11,.6)}
.fecha-acciones .btn-outline{font-weight:600}

/* los enlaces que antes eran botones y ahora no compiten */
.enlace-sede{margin:26px 0 0}
.enlace-sede a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:16px;font-weight:600;color:#fff;padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.22);transition:border-color .3s,color .3s}
.enlace-sede a:hover{border-color:var(--ambar);color:var(--ambar)}
.enlace-sede b{color:var(--ambar);font-size:15px;transition:transform .3s var(--ease)}
.enlace-sede a:hover b{transform:translate(3px,-3px)}
/* ══════════════════════════════════════════════════════════
   COMPOSICIONES CON FOTO
   Tres maneras distintas de meter foto en una sección, para
   que no parezcan todas la misma caja repetida.
   ══════════════════════════════════════════════════════════ */

/* A · ESCENA — texto a un lado, dos fotos al otro, desfasadas */
.escena{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.escena.der{grid-template-columns:1.05fr 1fr}
.escena.der .escena-fotos{order:-1}
.escena-txt .section-head{margin-bottom:20px}
.escena-txt p{color:var(--ink-2);max-width:52ch}
.escena-fotos{position:relative;padding-bottom:14%}
.escena-fotos figure{margin:0;overflow:hidden;border-radius:var(--r-lg);background:#0A0C11;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.escena-fotos img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) brightness(.86);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.escena-fotos figure:hover img{filter:none;transform:scale(1.05)}
.ef-1{aspect-ratio:4/3}
.ef-2{position:absolute;right:-4%;bottom:0;width:46%;aspect-ratio:1/1;
  border-width:3px !important;border-color:var(--paper) !important}
.escena.der .ef-2{right:auto;left:-4%}

/* B · FRANJA — la foto de lado a lado de la pantalla, con la frase encima */
.franja{position:relative;margin:clamp(38px,5vw,70px) 0 0;
  width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.franja img{width:100%;height:clamp(260px,42vh,460px);object-fit:cover;display:block;
  filter:saturate(.8) brightness(.6);transition:filter 1s var(--ease),transform 1.6s var(--ease)}
.franja:hover img{filter:saturate(1) brightness(.72);transform:scale(1.04)}
.franja::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,5,8,.9),rgba(4,5,8,.12) 55%,rgba(4,5,8,.5))}
.franja-frase{position:absolute;z-index:2;left:0;right:0;bottom:clamp(24px,4vw,48px)}
.franja-frase span{display:block;max-width:var(--wrap);margin:0 auto;padding:0 26px;
  font-size:clamp(22px,3.2vw,44px);font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1.1}
.franja-frase i{font-style:normal;background:var(--escudo);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* C · MOSAICO — tres fotos encajadas, una grande y dos pequeñas */
.mosaico{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:repeat(2,1fr);
  gap:14px;margin-top:clamp(26px,3.4vw,44px);aspect-ratio:16/8.5}
.mosaico figure{margin:0;overflow:hidden;border-radius:var(--r);background:#0A0C11;
  border:1px solid var(--line)}
.mosaico figure:first-child{grid-row:1/3}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) brightness(.84);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.mosaico figure:hover img{filter:none;transform:scale(1.06)}

@media (max-width:900px){
  .escena,.escena.der{grid-template-columns:1fr;gap:26px}
  .escena.der .escena-fotos{order:0}
  .escena-fotos{padding-bottom:18%}
  .mosaico{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .mosaico figure{aspect-ratio:4/3}
  .mosaico figure:first-child{grid-row:auto;grid-column:1/3;aspect-ratio:16/9}
}

/* ═══════════════════════════════════════════════════════════
   LAS DOS SEDES EN LA PORTADA (3 sept 2026)
   Antes había seis torneos sueltos y el visitante tenía que
   elegir entre seis cosas casi iguales. Ahora elige DÓNDE:
   Santa Susanna o Peñíscola, con sus fechas en lista debajo.
   ═══════════════════════════════════════════════════════════ */
.sedes-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}

.sede{display:flex;flex-direction:column;background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .45s,box-shadow .45s var(--ease),transform .55s var(--ease)}
.sede:hover,.sede:focus-within{border-color:rgba(242,166,66,.5);
  box-shadow:0 34px 80px rgba(0,0,0,.55);transform:translateY(-6px)}

/* la foto: en blanco y negro hasta que pasas el ratón */
/* La foto NO crece: las dos sedes enseñan la misma altura de foto,
   aunque una tenga cinco torneos y la otra uno. El hueco que sobra lo
   reparte la lista, que va centrada. */
.sede-foto{display:block;position:relative;flex:0 0 auto;overflow:hidden;
  height:clamp(230px,26vw,340px);text-decoration:none}
.sede-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.66) contrast(1.06);transform:scale(1.02);
  transition:filter .75s var(--ease),transform 1.3s var(--ease)}
.sede:hover .sede-foto img,.sede:focus-within .sede-foto img{filter:none;transform:scale(1.06)}
.sede-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,5,8,.95) 0%,rgba(4,5,8,.6) 36%,
    rgba(4,5,8,.05) 72%,rgba(4,5,8,.4) 100%)}

.sede-sobre{position:absolute;z-index:2;left:clamp(18px,1.8vw,28px);
  right:clamp(18px,1.8vw,28px);bottom:clamp(16px,1.7vw,24px)}
.sede-zona{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--ambar);margin-bottom:8px}
.sede-nombre{display:block;font-size:clamp(30px,3.3vw,46px);font-weight:800;
  letter-spacing:-.04em;line-height:1.02;color:#fff}
.sede-cuenta{display:inline-block;margin-top:12px;padding:5px 13px;border-radius:99px;
  font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px)}

/* las fechas, en lista */
.sede-lista{list-style:none;margin:0;padding:clamp(8px,1vw,14px) clamp(8px,1vw,14px) 0;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.sede-lista li+li{border-top:1px solid var(--line)}
.sede-lista a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(10px,1.2vw,18px);padding:13px clamp(8px,.9vw,12px);
  text-decoration:none;color:inherit;border-radius:14px;transition:background .3s}
.sede-lista a:hover,.sede-lista a:focus-visible{background:var(--glass-2)}
.sl-fecha{font-size:15px;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:-.02em}
.sl-fecha i{font-style:normal;color:var(--ambar);font-size:.78em;letter-spacing:.06em;margin-left:4px}
.sl-txt b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.sl-txt small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:3px}
.sl-precio{white-space:nowrap;font-size:16px;font-weight:800;letter-spacing:-.03em;
  background:var(--escudo);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-precio i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);-webkit-text-fill-color:var(--ink-3);
  font-weight:700;margin-bottom:2px}
.sl-ir{color:var(--ambar);font-size:15px;transition:transform .3s var(--ease)}
.sede-lista a:hover .sl-ir{transform:translate(3px,-3px)}

.sede-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:clamp(6px,.8vw,10px) clamp(14px,1.6vw,22px) clamp(16px,1.8vw,22px);
  padding:13px 18px;border-radius:99px;text-decoration:none;
  font-size:14px;font-weight:700;color:#12080B;background:var(--escudo);
  transition:transform .3s var(--ease),box-shadow .3s}
.sede-cta b{font-size:16px;transition:transform .3s var(--ease)}
.sede:hover .sede-cta{box-shadow:0 14px 34px rgba(229,89,53,.32)}
.sede-cta:hover b{transform:translate(3px,-3px)}

@media (max-width:900px){
  .sedes-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sede-lista a{grid-template-columns:auto 1fr;row-gap:6px;padding:12px 8px}
  .sl-precio{grid-column:2;justify-self:start;font-size:15px}
  .sl-precio i{display:inline;margin-right:6px}
  .sl-ir{display:none}
}

/* ─── 20-09-2026 · LA FOTO, A LA ALTURA DEL TEXTO ────────────────
   En los bloques de foto + texto, la foto se quedaba con su tamaño
   natural y centrada: al lado de un texto largo parecía pequeña.
   Ahora la foto ocupa exactamente la altura de su texto.          */
.split{align-items:stretch}
.split .media{height:100%;min-height:clamp(240px,26vw,420px)}
.split .media img{height:100%;object-fit:cover;display:block}
@media (max-width:1080px){
  .split .media,.split .media img{height:auto}
  .split .media{min-height:0}
}

/* ─── 20-09-2026 · LEGIBILIDAD ───────────────────────────────────
   La letra era pequeña al 100 % de zoom. Se sube el cuerpo del texto
   y todo lo que se leía justo: listas, pasos, formularios, fichas y
   pies. No se toca el tamaño de los titulares.                     */
body{font-size:18.5px;line-height:1.66}
.section-head>p{font-size:19px}
.split p,.escena-txt p,.impact p{font-size:18.5px}
.checklist li{font-size:17.5px}
.faq summary{font-size:17.5px}
.faq p,.faq li{font-size:17px}
.step p{font-size:16.5px;line-height:1.5}
.tcard-place{font-size:15.5px}
.ficha-datos li,.ficha-datos b,.ficha-datos span{font-size:15.5px}
.quickfacts dt{font-size:11.5px}
.quickfacts dd small{font-size:14px}
.cifras span{font-size:13.5px}
.overline{font-size:12.5px}
.nav a{font-size:15.5px}
.btn{font-size:16.5px}
.btn-sm{font-size:15px}
.subnav a{font-size:14.5px}
.crumbs{font-size:14px}
.trust{font-size:14.5px}
.sl-fecha{font-size:16px}
.sl-txt b{font-size:16.5px}
.sl-txt small{font-size:14px}
.sl-precio{font-size:17px}
.sede-cta{font-size:17px}
.campo label{font-size:15.5px}
.campo input,.campo textarea{font-size:17px}
.form-nota{font-size:15px}
.opcion span{font-size:16px}
.opcion small{font-size:14px}
.aviso-form{font-size:17px}
.site-footer,.site-footer a,.footer-bottom{font-size:15.5px}
.canal span b{font-size:17px}

/* Cabecera sin foto (contacto e inscripción): solo el título, con
   aire suficiente para que no lo tape la barra de arriba. */
.cabecera-simple{padding:clamp(120px,13vw,175px) 0 clamp(26px,3.2vw,46px);
  border-bottom:1px solid var(--line);background:
  radial-gradient(90% 140% at 12% 0%,rgba(229,89,53,.14) 0%,rgba(229,89,53,0) 60%),var(--paper)}
.cabecera-simple h1{font-size:clamp(34px,5vw,62px);margin:10px 0 0;letter-spacing:-.03em}
.cabecera-simple .overline{display:block}

/* Un titular que viene detrás de una lista o de un texto necesita aire:
   antes se pegaba al bloque de arriba y parecía un fallo. */
section .wrap > .section-head:not(:first-child){margin-top:clamp(40px,5vw,72px)}
section .wrap > .checklist + .section-head{margin-top:clamp(40px,5vw,72px)}

/* Letras pequeñas que quedaban sueltas por las fichas de torneo */
.tg-orden{font-size:12px}
.tg-precio small{font-size:13.5px}
.fecha-datos li{font-size:16px}
.premio-1{font-size:15.5px}
.premio-1 span{font-size:11.5px}
.btn-pdf span{font-size:16px}
.btn-pdf small{font-size:12px}
.descarga-libre{font-size:15px}
.car-txt{font-size:13.5px}
.pie-foto,.wrap > p.credito,.gallery + p{font-size:14.5px}

/* La galería se salía 8 px y dejaba mover la página de lado */
body{overflow-x:clip}

/* La animación de los titulares (cada palabra aparece subiendo) llevaba
   una máscara demasiado justa: cortaba las colas de la g, la p y la j,
   y los acentos. Se le da aire arriba y abajo; la maquetación no cambia
   porque se compensa con márgenes negativos. */
.palabra{padding-bottom:.3em;margin-bottom:-.3em;padding-top:.14em;margin-top:-.14em}

/* La franja a todo lo ancho medía 100vw, que INCLUYE la barra de
   desplazamiento: por eso la página se podía mover 8 px de lado.
   Ahora se le descuenta el ancho real de esa barra. */
:root{--barra:0px}
.franja{width:calc(100vw - var(--barra));margin-left:calc(50% - ((100vw - var(--barra)) / 2))}
.marquee-rotulo{font-size:12.5px}

/* ═══════════════════════════════════════════════════════════════
   20-09-2026 · UN SOLO CALENDARIO PARA LAS DOS SEDES
   ---------------------------------------------------------------
   Antes cada sede era una tarjeta con su lista de fechas dentro.
   Como Santa Susanna tiene cinco torneos y Peñíscola uno, la
   tarjeta de la derecha quedaba medio vacía: un agujero enorme
   entre la fecha y el botón.
   Ahora arriba van las DOS FOTOS (exactamente del mismo tamaño) y
   debajo UN SOLO calendario con los seis torneos por orden de
   fecha, cada fila con la sede a la que pertenece. Así no hay
   huecos y además se lee como lo que es: un calendario.
   (Lo de arriba, .sede / .sede-lista / .sede-cta, ya no se usa en
   la portada; se deja por si algún día se quiere volver.)
   ═══════════════════════════════════════════════════════════════ */
.sedes-grid{align-items:start}

/* las dos fotos de cabecera */
.sede-banner{position:relative;display:block;overflow:hidden;text-decoration:none;
  border-radius:var(--r-lg);border:1px solid var(--line);
  height:clamp(190px,19vw,270px);
  transition:transform .55s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.sede-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.3s var(--ease)}
.sede-banner:hover,.sede-banner:focus-visible{transform:translateY(-5px);
  border-color:rgba(242,166,66,.5);box-shadow:0 26px 60px rgba(0,0,0,.35)}
.sede-banner:hover img,.sede-banner:focus-visible img{transform:scale(1.08)}

/* el calendario */
.cal-lista{list-style:none;margin:clamp(18px,2.2vw,30px) 0 0;
  padding:clamp(6px,.8vw,12px) clamp(10px,1.2vw,18px);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg)}
.cal-lista li+li{border-top:1px solid var(--line)}
.cal-lista a{display:grid;grid-template-columns:clamp(104px,9vw,138px) 1fr clamp(150px,14vw,196px) auto;align-items:center;
  gap:clamp(12px,1.5vw,24px);padding:15px clamp(8px,.9vw,14px);
  text-decoration:none;color:inherit;border-radius:14px;transition:background .3s}
.cal-lista a:hover,.cal-lista a:focus-visible{background:var(--glass-2)}

/* la etiqueta de la sede, con un punto de color por sede */
.sl-sede{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;justify-self:start;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:7px 14px;border-radius:99px;
  border:1px solid var(--line);background:var(--glass-2)}
.sl-sede::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--ambar);flex:0 0 auto}
.sl-sede.s2::before{background:#3E8E92}

/* los dos botones, del mismo tamaño */
.cal-botones{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(14px,1.8vw,22px)}
.cal-btn{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 22px;border-radius:99px;text-decoration:none;
  font-size:15px;font-weight:600;color:#12080B;background:var(--escudo);
  transition:transform .3s var(--ease),box-shadow .3s}
.cal-btn b{font-weight:800;letter-spacing:-.01em}
.cal-btn b::after{content:'·';margin-left:10px;opacity:.55;font-weight:400}
.cal-btn i{font-style:normal;font-size:16px;transition:transform .3s var(--ease)}
.cal-btn:hover{box-shadow:0 14px 34px rgba(229,89,53,.32);transform:translateY(-2px)}
.cal-btn:hover i{transform:translate(3px,-3px)}

@media (max-width:900px){
  .cal-botones{grid-template-columns:1fr}
  .sede-banner{height:clamp(170px,34vw,230px)}
}
@media (max-width:640px){
  .cal-lista a{grid-template-columns:auto 1fr;row-gap:10px;padding:14px 8px}
  .cal-lista .sl-sede{grid-column:2;justify-self:start}
  .cal-lista .sl-precio{grid-column:2;justify-self:start;font-size:15px}
  .cal-lista .sl-precio i{display:inline;margin-right:6px}
}

/* ─── 20-09-2026 · EL MENÚ EN PANTALLAS MEDIANAS ─────────────────
   Entre 861 y 1080 px de ancho (portátil pequeño o ventana a
   media pantalla) el menú aún es horizontal y se quedaba sin
   sitio: «Santa Susanna» y «¡Reservar mi plaza!» se partían en
   dos líneas. Ahora se aprieta un poco y nunca parte palabras. */
@media (min-width:861px) and (max-width:1080px){
  .site-header .wrap{gap:10px;padding:0 8px 0 16px}
  .site-header .logo img{height:26px}
  .nav{gap:1px}
  .nav a{font-size:13.5px;padding:8px 9px;white-space:nowrap}
  .nav a.btn{margin-left:4px;padding:10px 15px;font-size:13.5px}
  .idiomas{margin-left:4px}
  .idiomas a{padding:5px 7px;font-size:12px}
}

/* ══════════════════════════════════════════════════════════
   ARREGLO 20-09-2026 · EL MENÚ DEL MÓVIL SE QUEDABA ENCERRADO
   ----------------------------------------------------------
   La pastilla de la cabecera lleva "backdrop-filter" (efecto
   cristal). Un elemento con ese efecto encierra dentro de sí
   todo lo que esté en "position:fixed", y el panel del menú
   está dentro de la pastilla: al pulsar el botón del menú en
   el móvil salía una cajita recortada en vez de la pantalla
   entera. Se quita el efecto mientras el menú está abierto, y
   el botón de cerrar se pone por encima del panel.
   ══════════════════════════════════════════════════════════ */
body.menu-abierto .site-header .wrap{
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-abierto .nav{z-index:120}
body.menu-abierto .navtoggle{position:relative;z-index:130}

/* ─── 20-09-2026 · EL AMBIENTE, A DOS COLUMNAS ──────────────────
   La franja negra (foto ancha con la frase encima) desaparece: esa
   foto pasa a la derecha del texto. Aquí solo se retocan detalles
   para que la lista de ventajas se vea bien en media columna.   */
.split .checklist{padding-left:0}
.split .section-head{margin-bottom:18px}
.split .section-head h2{margin-bottom:0}
.split .checklist li{font-size:16.5px}

/* ─── 20-09-2026 · EL SELLO DE GOOGLE EN LAS RESEÑAS ──────────── */
.sello-google{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,2vw,26px);
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-md,16px);
  background:var(--glass);width:max-content;max-width:100%}
.sello-google img{width:30px;height:30px;flex:0 0 auto}
.sello-google b{display:block;font-size:16px;line-height:1.2}
.sg-estrellas{display:inline-block;color:#FBBC05;font-size:14px;letter-spacing:.06em;margin-top:2px}
.sello-google small{display:block;color:var(--ink-3);font-size:13.5px;margin-top:2px}
@media (max-width:560px){
  .sello-google{width:auto}
  .sello-google small{font-size:13px}
}

/* ─── 20-09-2026 · ARREGLO DE LA FOTO EN LOS BLOQUES DE DOS COLUMNAS
   Por debajo de 1080 px la caja de la foto se quedaba con altura
   cero y, como la foto es de carga diferida, el navegador no llegaba
   a cargarla nunca: se veía un hueco blanco. Ahora la caja reserva
   su sitio (proporción 16:10) y la foto entra siempre.            */
@media (max-width:1080px){
  .split .media{aspect-ratio:16/10;min-height:0;height:auto}
  .split .media img{height:100%;width:100%;object-fit:cover;display:block}
}

/* ── 22-09-2026 ─────────────────────────────────────────────── */
/* Portada: los 5 pasos de la inscripción en una sola fila en pantallas grandes */
@media (min-width:1100px){ .steps{grid-template-columns:repeat(5,1fr)} .step{padding:28px 22px} }
@media (min-width:700px) and (max-width:1099px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Inscripción: la explicación va encima del recuadro, pegada a su rótulo */
.form-nota.nota-arriba{margin:2px 0 10px}
.form textarea::placeholder{color:var(--ink-3);opacity:.75;line-height:1.55}
/* Páginas legales (privacidad y cookies) */
.texto-legal{padding:8px 0 40px}
.texto-legal h2{font-size:clamp(20px,2.2vw,26px);margin:38px 0 12px}
.texto-legal h3{font-size:18px;margin:26px 0 8px}
.texto-legal p,.texto-legal li{color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.texto-legal ul,.texto-legal ol{padding-left:22px;margin:0 0 16px}
.texto-legal a{color:inherit;text-decoration:underline}