/* ==========================================================================
   SPN Riders Academy · Web 2.0 — área de piloto y ficha de pago (lo usan la portada y las páginas acceder, mi-cuenta,
   reserva y pagar). Mismo lenguaje que la portada: fondo azul noche, las dos voces, el brochazo amarillo, filetes finos y
   los sectores de la vuelta (S1 · S2 · META); la ficha de pago, en una tarjeta blanca. La lógica, en area.js.
   ========================================================================== */
:root{--ok:#4ADE80;--err:#FF7A6B;--gris:rgba(236,238,244,.42)}

/* el aviso flotante de abajo (area.js, nota): la cuenta eliminada, el enlace a un stage que ya no está (22-10-2026) */
.w2-nota{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:200;width:max-content;max-width:min(460px,calc(100vw - 32px));
  margin:0;padding:14px 18px;border:1px solid rgba(236,238,244,.16);border-left:3px solid var(--y,#F8EA1B);border-radius:12px;background:#0A0F28;
  box-shadow:0 18px 50px rgba(0,0,0,.45);color:#ECEEF4;font:500 14.5px/1.45 var(--f,system-ui,sans-serif);
  opacity:0;transform:translate(-50%,14px);transition:opacity .35s,transform .35s;pointer-events:none}
.w2-nota.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.w2-nota{transition:none}}

/* ---------------------------------------------------------------- formularios */
.f-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.f-campos--uno{grid-template-columns:minmax(0,1fr)}
@media (max-width:639px){.f-campos{grid-template-columns:minmax(0,1fr)}}
.f-campo{display:grid;gap:7px;min-width:0}
.f-campo--ancho{grid-column:1/-1}
.f-campo > label{font:700 10px/1.1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:rgba(236,238,244,.82)}
.f-campo > label b{color:var(--y)}
.f-campo input,.f-campo select{width:100%;height:46px;padding:0 14px;border:1px solid rgba(236,238,244,.18);border-radius:8px;background:rgba(236,238,244,.04);
  color:var(--tx);font:500 16px/1 var(--f);transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none}
.f-campo select{padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--y) 50%),linear-gradient(135deg,var(--y) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px;background-repeat:no-repeat}
.f-campo select option{background:var(--panel);color:var(--tx)}
.f-campo input::placeholder{color:var(--tx3)}
.f-campo input:hover,.f-campo select:hover{border-color:rgba(236,238,244,.32)}
.f-campo input:focus,.f-campo select:focus{outline:0;border-color:var(--y);background:rgba(248,234,27,.04)}
.f-campo.is-error input,.f-campo.is-error select{border-color:var(--err)}
.f-error{font:600 12.5px/1.3 var(--f);color:var(--err)}
.f-oblig{font:600 11px/1 var(--f);letter-spacing:.04em;color:var(--tx3)}
.f-oblig b{color:var(--y)}
.f-casillas{display:grid;gap:12px}
.f-casilla{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:14px;line-height:1.45;color:rgba(236,238,244,.86);cursor:pointer}
.f-casilla input{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:1px solid rgba(236,238,244,.32);border-radius:5px;background:rgba(236,238,244,.04);cursor:pointer;transition:background .2s,border-color .2s}
.f-casilla input:checked{border-color:var(--y);background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23070A1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.f-casilla b{color:var(--y)}
.f-casilla .f-error{grid-column:2}
.f-nota{font-size:13px;line-height:1.5;color:var(--tx2)}
.f-nota a,.f-link{color:var(--y);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s}
.f-link{font:inherit;cursor:pointer}
.f-link--mute{color:var(--tx2)}
.f-nota a:hover,.f-link:hover{color:var(--tx)}
.f-link:disabled{opacity:.5;cursor:default}
.f-botones{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 18px}
.f-botones--fin{justify-content:flex-end}
.pincel--btn:disabled,.pincel--btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.pincel--btn:disabled::before{transform:none}
.act:disabled{opacity:.45;cursor:not-allowed}
.act--osc{border-color:rgba(236,238,244,.35);color:var(--tx2)}
.act--osc:hover{background:none;color:var(--tx);border-color:var(--tx)}
.act--peligro{border-color:var(--err);color:var(--err)}
.act--peligro:hover{background:var(--err);color:var(--bg)}

/* avisos */
.av{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid rgba(63,182,255,.35);border-left:3px solid var(--c);border-radius:8px;background:rgba(63,182,255,.07);font-size:14px;line-height:1.5}
.av::before{content:'i';flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c);color:var(--bg);font:italic 800 12px/1 var(--f)}
.av--error{border-color:rgba(255,122,107,.4);border-left-color:var(--err);background:rgba(255,122,107,.08)}
.av--error::before{content:'!';background:var(--err)}
.av--ok{border-color:rgba(74,222,128,.35);border-left-color:var(--ok);background:rgba(74,222,128,.07)}
.av--ok::before{content:'✓';background:var(--ok);font-style:normal}
.av--y{border-color:rgba(248,234,27,.35);border-left-color:var(--y);background:rgba(248,234,27,.06)}
.av--y::before{content:'!';background:var(--y)}

/* caja (bloque con filete) */
.cj{display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:12px;background:rgba(236,238,244,.025)}
.cj > h4{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:800 11px/1.1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--tx)}
.cj > h4 .cifra{font-size:15px;letter-spacing:0;color:var(--y)}
.cj__texto{font-size:14px;line-height:1.5;color:var(--tx2)}

/* líneas de importes */
.ln{display:grid}
.ln > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.ln > div:first-child{border-top:0;padding-top:0}
.ln dt,.ln > div > span:first-child{color:rgba(236,238,244,.82)}
.ln dt small,.ln > div > span:first-child small{display:block;margin-top:3px;font-size:12px;color:var(--tx3)}
.ln dd,.ln > div > span:last-child{font-style:italic;font-weight:800;font-stretch:80%;font-size:18px;white-space:nowrap;text-align:right}
.ln .ln-total{padding-top:14px;border-top:1px solid rgba(236,238,244,.3)}
.ln .ln-total > *:first-child{font-weight:700;color:var(--tx);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.ln .ln-total > *:last-child{font-size:24px}
.ln .ln-ahora > *:last-child{color:var(--y);font-size:28px}
.ln .ln-ahora > *:first-child{color:var(--y);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.ln .menos{color:var(--ok)}
.ln .si{color:var(--ok)}

/* ---------------------------------------------------------------- ficha de pago (pago directo con tarjeta, 20-10-2026)
   Al pulsar «Reservar»: una tarjeta centrada sobre la web en penumbra (o dentro de la ficha del stage). Arriba el logo,
   «pago seguro» y cerrar; el pase con las fechas, el stage y lo que se paga ahora; debajo, el email, el nombre, la tarjeta
   y el botón amarillo. 21-10-2026: oscura, con los colores de la ficha (antes era blanca); los campos de tarjeta de Stripe
   toman sus colores de ESTILO_TARJETA (area.js) */
.fp{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;visibility:hidden;pointer-events:none}
.fp.open{visibility:visible;pointer-events:auto}
.fp__velo{position:absolute;inset:0;background:rgba(4,6,16,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s var(--ease2)}
.fp.open .fp__velo{opacity:1}
.fp__caja{--fp-t:#ECEEF4;--fp-t2:rgba(236,238,244,.7);--fp-t3:rgba(236,238,244,.48);--fp-l:rgba(236,238,244,.16);--fp-l2:rgba(236,238,244,.32);--fp-err:#FF7A7E;
  --fp-campo:rgba(4,6,18,.55);--fp-campo2:rgba(236,238,244,.05);--fp-boton:rgba(236,238,244,.07);--fp-tinta:#0A0F28;
  position:relative;display:flex;flex-direction:column;width:min(520px,100%);max-height:calc(100svh - 32px);border-radius:24px;color:var(--fp-t);
  background:radial-gradient(110% 45% at 100% 0%,rgba(37,84,199,.4),transparent 62%),linear-gradient(180deg,#101A48,#0A0F28 60%);
  box-shadow:inset 0 0 0 1px rgba(236,238,244,.12),0 50px 120px -30px rgba(0,0,0,.7);overflow:hidden;opacity:0;transform:translateY(22px) scale(.98);transition:opacity .4s var(--ease2),transform .55s var(--ease2)}
.fp.open .fp__caja{opacity:1;transform:none}
.fp__cab{display:flex;align-items:center;gap:12px;padding:16px 18px 4px 26px}
.fp__logo{width:auto;height:40px}
.fp__seguro{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 13px/1 var(--f);color:var(--fp-t2)}
.fp__seguro svg{width:13px;height:13px}
.fp__cerrar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--fp-boton);transition:background .25s}
.fp__cerrar:hover{background:rgba(236,238,244,.15)}
.fp__cerrar svg{width:14px;height:14px;fill:none;stroke:var(--fp-t);stroke-width:2.2;stroke-linecap:round}
.fp__cuerpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px 32px 28px;scrollbar-width:thin;scrollbar-color:rgba(236,238,244,.25) transparent}
/* lo que se compra */
.fp__prod{display:grid;justify-items:center;gap:5px;padding:6px 0 22px;border-bottom:1px solid var(--fp-l);text-align:center}
.fp__pase{position:relative;display:grid;place-content:center;justify-items:center;width:80px;height:54px;margin-bottom:8px;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#0F1638 0%,#1D3C9C 100%);box-shadow:0 10px 22px -10px rgba(10,15,40,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.fp__pase::before{content:'';position:absolute;left:-10%;right:-10%;top:58%;height:30%;background:var(--y);opacity:.95;transform:rotate(-8deg);
  -webkit-mask:url(/img/web/pincel-stages.webp) center/100% 100% no-repeat;mask:url(/img/web/pincel-stages.webp) center/100% 100% no-repeat}
.fp__pase b{position:relative;font:italic 800 22px/1 var(--f);font-stretch:75%;color:#fff;letter-spacing:.01em}
.fp__pase small{position:relative;margin-top:2px;font:italic 800 12px/1 var(--f);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;color:var(--fp-tinta)}
.fp__tipo{font:600 13px/1.2 var(--f);color:var(--fp-t2)}
.fp__tit{font:italic 900 clamp(22px,4.4vw,28px)/1.02 var(--f);font-stretch:100%;text-transform:uppercase;letter-spacing:-.01em;max-width:22ch}
.fp__precio{display:flex;align-items:baseline;justify-content:center;gap:7px;margin-top:6px}
.fp__precio b{font:italic 800 56px/.86 var(--f);font-stretch:75%;letter-spacing:-.01em}
.fp__precio span{font:600 16px/1 var(--f);color:var(--fp-t2)}
.fp__nota{max-width:40ch;margin-top:6px;font-size:14px;line-height:1.45;color:var(--fp-t2)}
.fp-carga{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 0 6px;font-size:14px;color:var(--fp-t2)}
.fp-carga::before,.fp-gira{content:'';flex:none;width:17px;height:17px;border-radius:50%;border:2px solid rgba(236,238,244,.18);border-top-color:var(--fp-t);animation:rvgira .8s linear infinite}
/* el formulario */
.fp__form{display:grid;gap:16px;padding-top:22px}
/* una sola columna que puede encoger: sin minmax(0,1fr), la columna crece hasta el ancho propio del campo de texto
   (unos 200 px) y, en el móvil, caducidad y CVC se salían de su mitad (auditoría del 22-10-2026) */
.fp-campo{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;min-width:0}
.fp-campo > label{justify-self:start;font:600 13.5px/1.2 var(--f);color:var(--fp-t);cursor:pointer}
.fp-in{position:relative;display:flex;align-items:center;gap:10px;min-width:0;height:54px;padding:0 15px;border:1px solid var(--fp-l);border-radius:12px;background:var(--fp-campo);transition:border-color .2s,box-shadow .2s}
.fp-in:hover{border-color:var(--fp-l2)}
.fp-in:focus-within,.fp-in.is-foco{border-color:var(--y);box-shadow:0 0 0 3px rgba(248,234,27,.28)}
.fp-in input{flex:1;min-width:0;width:100%;height:100%;padding:0;border:0;outline:0;background:none;color:var(--fp-t);font:400 16px/1 system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-appearance:none;appearance:none}
.fp-in input::placeholder{color:rgba(236,238,244,.4);opacity:1}
/* el autorrelleno del navegador pinta el campo de claro: se deja del color de la ficha */
.fp-in input:-webkit-autofill{-webkit-text-fill-color:var(--fp-t);caret-color:var(--fp-t);-webkit-box-shadow:0 0 0 40px #080C22 inset;transition:background-color 9999s}
.fp-in input[readonly]{color:var(--fp-t2)}
.fp-in:has(input[readonly]){background:var(--fp-campo2)}
.fp-in:has(input[readonly]):focus-within{border-color:var(--fp-l);box-shadow:none}
.fp-stripe{flex:1;min-width:0}
.fp-marcas{display:flex;gap:4px;flex:none}
.fp-marcas i{display:block;width:34px;height:22px;transition:opacity .25s,filter .25s}
.fp-marcas i.is-apagada{opacity:.25;filter:grayscale(1)}
.fp-marcas svg,.fp-cvc{display:block;width:100%;height:100%}
.fp-cvc{flex:none;width:30px;height:20px}
.fp-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* las plazas: − número + (una por piloto) */
.fp-plazas{display:flex;align-items:center;gap:6px;width:100%}
.fp-plazas output{flex:1;text-align:center;font:700 20px/1 var(--f);color:var(--fp-t);font-variant-numeric:tabular-nums}
.fp-plazas button{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--fp-l);border-radius:10px;background:var(--fp-boton);color:var(--fp-t);font:600 22px/1 var(--f);cursor:pointer;transition:background .2s,border-color .2s}
.fp-plazas button:hover:not([disabled]){border-color:var(--fp-l2);background:rgba(236,238,244,.14)}
.fp-plazas button[disabled]{opacity:.35;cursor:default}
.fp-plazas button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
/* con moto de alquiler o con moto propia (22-10-2026): una fila para cada una, con su precio y su contador */
.fp-in:has(.fp-motos){display:block;height:auto;padding:0}
.fp-moto{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 10px 10px 15px}
.fp-moto + .fp-moto{border-top:1px solid var(--fp-l)}
.fp-moto__t{display:grid;flex:1;gap:4px;min-width:0}
.fp-moto__t b{font:600 15px/1.2 var(--f);color:var(--fp-t)}
.fp-moto__t small{font:500 13px/1.2 var(--f);color:var(--fp-t2)}
.fp-moto .fp-plazas{width:auto;flex:none}
.fp-moto .fp-plazas output{flex:none;width:30px}
.fp-campo.is-error .fp-in{border-color:var(--fp-err);box-shadow:0 0 0 3px rgba(255,122,126,.18)}
.fp-error{font:500 13px/1.35 var(--f);color:var(--fp-err)}
.fp-nota{font-size:12.5px;line-height:1.4;color:var(--fp-t3)}
.fp-autoriza{font-size:15px;line-height:1.5;color:var(--fp-t2)}
.fp-prueba{padding:11px 14px;border:1px dashed rgba(248,234,27,.6);border-radius:10px;background:rgba(248,234,27,.07);font-size:13px;line-height:1.5;color:var(--fp-t2)}
.fp-prueba b{color:var(--fp-t)}
.fp-prueba button{font:600 13px/1.5 var(--f);color:var(--fp-t);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:2px;cursor:pointer}
.fp-aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.45}
.fp-aviso::before{content:'!';flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:800 12px/1 var(--f);color:var(--fp-tinta)}
.fp-aviso--error{background:rgba(255,122,126,.12);color:#FFB8BA}
.fp-aviso--error::before{background:var(--fp-err)}
.fp-aviso--ok{background:rgba(74,222,128,.12);color:#A7F3C4}
.fp-aviso--ok::before{content:'✓';background:#4ADE80}
/* el botón de pagar: la píldora amarilla de la marca */
.fp-pagar{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin-top:4px;padding:0 22px;border-radius:999px;background:var(--y);color:var(--fp-tinta);
  font:italic 850 19px/1.1 var(--f);font-stretch:100%;text-align:center;box-shadow:0 12px 26px -14px rgba(160,148,0,.9);transition:background .25s,transform .25s,box-shadow .25s}
.fp-pagar:hover:not(:disabled){background:#FFF04A;transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(160,148,0,.95)}
.fp-pagar:active:not(:disabled){transform:none}
.fp-pagar:disabled{opacity:.6;cursor:not-allowed}
.fp-pagar .fp-gira{border-color:rgba(10,15,40,.2);border-top-color:var(--fp-tinta)}
.fp-pagar--osc{background:var(--fp-boton);color:var(--fp-t);box-shadow:inset 0 0 0 1px var(--fp-l)}
.fp-pagar--osc:hover:not(:disabled){background:rgba(236,238,244,.14)}
.fp__form.is-pagando .fp-in{opacity:.7;pointer-events:none}
.fp-legal{font-size:13px;line-height:1.5;text-align:center;color:var(--fp-t2)}
.fp-legal a{color:var(--fp-t);font-weight:600;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:3px}
.fp-legal a:hover{text-decoration-color:var(--fp-t)}
.fp :focus-visible{outline:2px solid var(--fp-t);outline-offset:2px}
.fp__caja:focus{outline:0}
.fp__cerrar:focus-visible{border-radius:50%}
/* la ficha dentro de una página (pago de una plaza apartada): sin velo ni animación */
.fp__caja--pagina{width:100%;height:auto;max-height:none;opacity:1;transform:none;box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
/* que crezca con lo que lleva: en Safari, con flex:1 y min-height:0, el cuerpo se encogía y la tarjeta lo recortaba */
.fp__caja--pagina .fp__cuerpo{flex:none;overflow:visible}
html.rv-on{overflow:hidden}
html.rv-on .chip{opacity:0!important;visibility:hidden!important}
@media (max-width:519px){
  .fp{padding:10px}
  /* el alto, limitado solo en la ventana sobre la página: dentro de la ficha o en una página crece con lo que lleva */
  .fp__caja{border-radius:20px}
  .fp .fp__caja{max-height:calc(100svh - 20px)}
  .fp__cab{padding:12px 12px 2px 18px}
  .fp__logo{height:34px}
  .fp__cuerpo{padding:4px 18px 22px}
  .fp__precio b{font-size:50px}
  .fp-marcas i{width:28px;height:18px}
  .fp-marcas i:nth-child(n+3){display:none}
  .fp-dos{gap:10px}
  .fp-pagar{min-height:56px;font-size:18px}
}

/* «Cargando…» de las páginas del área */
.rv__carga{display:flex;align-items:center;gap:12px;color:var(--tx2);font-size:14px}
.rv__carga::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid rgba(236,238,244,.2);border-top-color:var(--y);animation:rvgira .8s linear infinite}
@keyframes rvgira{to{transform:rotate(360deg)}}

/* diálogo de confirmación (¿salir sin pagar?, ¿eliminar la cuenta?…) */
.dlg{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(4,6,16,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:dlgv .3s var(--ease2)}
.dlg__caja{display:grid;gap:16px;width:min(440px,100%);padding:26px;border:1px solid var(--line);border-top:3px solid var(--y);border-radius:12px;background:var(--panel);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:dlgc .4s var(--ease2)}
.dlg__caja h3{font-size:26px}
.dlg__caja p{font-size:14.5px;line-height:1.5;color:var(--tx2)}
/* la de llamar o escribir desde el ordenador (area.js, ventanaContacto; 22-10-2026): el número o el email en grande */
.dlg--ct .dlg__caja{position:relative;gap:14px;padding:30px 28px 24px}
.dlg__x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--tx2);transition:color .25s,background .25s}
.dlg__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dlg__x:hover{color:var(--tx);background:rgba(236,238,244,.08)}
.dlg__dato{font-size:clamp(34px,3.4vw,42px);color:var(--tx);user-select:all;overflow-wrap:anywhere}
.dlg__dato.dlg__dato--email{font-size:clamp(24px,2.3vw,30px);text-transform:none}
.dlg__mas{justify-self:start;font-size:13px;color:var(--tx2);text-decoration:underline;text-underline-offset:3px;transition:color .25s}
.dlg__mas:hover{color:var(--y)}
@keyframes dlgv{from{opacity:0}}
@keyframes dlgc{from{opacity:0;transform:translateY(14px) scale(.98)}}

/* ---------------------------------------------------------------- páginas del área (acceder, mi cuenta, reserva) */
.ar{position:relative;min-height:100vh;padding:calc(var(--hd) + 24px) var(--g) 90px;overflow:clip}
/* fondo: la meta de El Templo del Motor oscura a la derecha, metida en el fondo con el brochazo, y la retícula fina */
.ar__fondo{position:absolute;top:0;right:0;width:min(62%,1040px);height:min(90vh,840px);margin:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(180deg,#000 50%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%),linear-gradient(180deg,#000 50%,transparent 100%);mask-composite:intersect}
/* el color (saturate .8, contrast 1,12, brightness .42) va dentro de la foto: meta-arco-fondo.webp (23-10-2026) */
.ar__fondo img{width:100%;height:100%;object-fit:cover;object-position:40% 28%}
/* las pinceladas de la portada, del color del fondo, sobre el borde izquierdo de la foto */
.ar__fondo::before{content:'';position:absolute;inset:0;z-index:1;background:var(--bg);
  -webkit-mask:url(/web-2/img/brochazo-diagonal.webp) 0 0/100% 100% no-repeat;mask:url(/web-2/img/brochazo-diagonal.webp) 0 0/100% 100% no-repeat}
.ar__fondo::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(9,16,48,.35)}
.ar::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(236,238,244,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(236,238,244,.03) 1px,transparent 1px);background-size:88px 88px}
.ar__in{position:relative;z-index:1;width:min(1240px,100%);margin:0 auto}
.ar__cab{display:grid;gap:18px;padding:clamp(24px,5vh,64px) 0 clamp(26px,4vh,46px)}
.ar__tit{font-size:clamp(40px,6vw,92px);line-height:.9}
.cf .ar__tit{font-size:clamp(36px,4.4vw,68px)}
.ar__tit .pincel{display:block;width:max-content;font-size:.52em;margin:.14em 0 0 -.04em;transform:rotate(-2deg);transform-origin:0 50%}
.ar__lead{max-width:42ch;font-size:17px;line-height:1.45;color:rgba(236,238,244,.84)}
.ar__carga{padding:60px 0}
.ar-pie{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px var(--g);border-top:1px solid var(--line);font-size:12.5px;color:var(--tx3)}
.ar-pie nav{display:flex;flex-wrap:wrap;gap:16px}
.ar-pie a:hover{color:var(--y)}
/* 22-10-2026: el crédito de quien ha hecho la web, en el centro, entre el © y los enlaces legales */
.ar-hecho a{font-weight:700;color:var(--tx2)}
@media (max-width:899px){.ar__fondo{width:100%;height:56vh;opacity:.7}}

/* acceder: el formulario en una tarjeta */
.ac{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(30px,6vw,110px);align-items:start}
.ac__caja{display:grid;gap:18px;padding:28px;border:1px solid var(--line);border-radius:14px;background:rgba(10,15,40,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.ac__caja h2{font-size:26px}
.ac__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ac__pie{padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--tx2)}
.ac__datos{display:grid;gap:12px;margin-top:8px}
.ac__datos li{display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(236,238,244,.86)}
.ac__datos .cifra{min-width:48px;font-size:22px;color:var(--y)}
@media (max-width:899px){.ac{grid-template-columns:minmax(0,1fr)}}

/* mi cuenta */
.mc-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.mc-acciones{display:flex;flex-wrap:wrap;gap:10px}
.mc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 26px}
.mc-tabs button{display:grid;gap:9px;padding:0 0 4px;text-align:left}
.mc-tabs button span{display:flex;align-items:baseline;gap:10px;font:700 11px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);transition:color .3s}
.mc-tabs button span b{font:italic 800 22px/1 var(--f);font-stretch:75%;letter-spacing:0;color:var(--tx3);transition:color .3s}
.mc-tabs button span em{min-width:24px;padding:3px 7px;border-radius:20px;background:rgba(236,238,244,.1);font:700 11px/1 var(--f);font-style:normal;text-align:center;color:var(--tx)}
.mc-tabs button i{position:relative;display:block;height:6px;background:rgba(236,238,244,.12);transform:skewX(-24deg);overflow:hidden}
.mc-tabs button i::after{content:'';position:absolute;inset:0;background:var(--y);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease2)}
.mc-tabs button[aria-pressed="true"] span{color:var(--tx)}
.mc-tabs button[aria-pressed="true"] span b{color:var(--y)}
.mc-tabs button[aria-pressed="true"] i::after{transform:scaleX(1)}
.mc-tabs button[aria-pressed="true"] em{background:var(--y);color:var(--bg)}
.mc-tabs button:hover span{color:var(--tx)}
.mc-lista{display:grid;gap:16px}
.mc-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mc-dos > :last-child:nth-child(odd){grid-column:1/-1}
.mc-caja{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:14px;background:rgba(10,15,40,.86)}
.mc-caja h3{font-size:22px}
.mc-caja--peligro{border-color:rgba(255,122,107,.3)}
.mc-vacio{display:grid;gap:12px;justify-items:start;padding:34px 28px;border:1px dashed rgba(236,238,244,.22);border-radius:14px;background:rgba(10,15,40,.6)}
.mc-vacio b{font-style:italic;font-weight:850;font-stretch:95%;font-size:22px;text-transform:uppercase}
.mc-vacio p{max-width:60ch;color:var(--tx2);line-height:1.5}
@media (max-width:899px){.mc-dos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639px){
  .mc-tabs{gap:8px}
  .mc-tabs button span{font-size:9.5px;letter-spacing:.06em;flex-wrap:wrap;gap:4px 8px}
  .mc-tabs button span b{font-size:18px}
  .mc-tabs .l-largo{display:none}
}
@media (min-width:640px){.mc-tabs .l-corto{display:none}}

/* una reserva (o una lista de espera / un aviso) */
.it{position:relative;display:grid;gap:16px;padding:24px 24px 22px 28px;border:1px solid var(--line);border-radius:14px;background:rgba(10,15,40,.86);overflow:hidden}
.it::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ce,var(--c))}
.it--apagado{opacity:.62}
.it__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.it__estado{display:inline-flex;align-items:center;gap:9px;font:700 10.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--tx)}
.it__estado i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ce,var(--c))}
.it__ref{font:italic 800 15px/1 var(--f);font-stretch:75%;letter-spacing:.04em;color:var(--tx3)}
.it__tit{font-size:clamp(24px,2.6vw,34px)}
.it__cuando{margin-top:-6px;font:italic 800 20px/1.1 var(--f);font-stretch:75%;text-transform:uppercase;color:var(--y)}
.it__datos{display:flex;flex-wrap:wrap;gap:10px 28px}
.it__datos li{display:grid;gap:5px;font-size:14.5px}
.it__datos li span{font:700 9.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.it__bloques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.it__incluye{display:grid;gap:8px}
.it__incluye li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(236,238,244,.86)}
.it__incluye li::before{content:'';flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23070A1C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.it__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding-top:4px}
@media (max-width:899px){.it__bloques{grid-template-columns:minmax(0,1fr)}}

/* textos legales */
.lg{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.lg__indice{position:sticky;top:calc(var(--hd) + 20px);display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:14px;background:rgba(10,15,40,.86)}
.lg__indice h2{font:800 10.5px/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.lg__indice ol{display:grid;gap:2px;counter-reset:lg}
.lg__indice ol a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;padding:7px 0;font-size:13.5px;line-height:1.35;color:rgba(236,238,244,.82);border-top:1px solid var(--line);transition:color .25s}
.lg__indice ol li:first-child a{border-top:0}
.lg__indice ol a b{font:italic 800 15px/1.2 var(--f);font-stretch:75%;color:var(--y)}
.lg__indice ol a:hover,.lg__otros a:hover{color:var(--y)}
.lg__otros{display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(236,238,244,.22)}
.lg__otros a{font-size:13.5px;color:var(--tx2);transition:color .25s}
.lg__doc{display:grid;gap:12px;padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:14px;background:rgba(10,15,40,.9)}
.lg__ap{display:grid;gap:14px;padding:22px 0 26px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hd) + 20px)}
.lg__ap:first-child{border-top:0;padding-top:0}
.lg__ap h2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;font-size:clamp(20px,2vw,28px)}
.lg__ap h2 .cifra{font-size:1.3em;color:var(--y)}
.lg__ap p,.lg__ap li{font-size:15.5px;line-height:1.62;color:rgba(236,238,244,.86)}
.lg__ap ul{display:grid;gap:8px}
.lg__ap li{position:relative;padding-left:20px}
.lg__ap li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--y)}
.lg__ap a{color:var(--y);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.lg__ap strong{color:var(--tx)}
.lg__tabla{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.lg__tabla table{width:100%;border-collapse:collapse;font-size:14px}
.lg__tabla th{padding:12px 14px;text-align:left;font:800 10.5px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--tx);background:rgba(236,238,244,.05)}
.lg__tabla td{padding:12px 14px;border-top:1px solid var(--line);line-height:1.5;color:rgba(236,238,244,.86);vertical-align:top}
.lg__fecha{font:700 11px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
@media (max-width:899px){
  .lg{grid-template-columns:minmax(0,1fr)}
  .lg__indice{position:static}
  .lg__tabla thead{display:none}
  .lg__tabla tr{display:grid;padding:10px 0;border-top:1px solid var(--line)}
  .lg__tabla td{border:0;padding:4px 14px}
  .lg__tabla td::before{content:attr(data-th);display:block;font:800 9.5px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
}

/* reserva confirmada */
.cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,5vw,90px);align-items:start}
.cf__ref{display:inline-block;margin-top:6px;padding:10px 16px;border:1px dashed rgba(248,234,27,.5);border-radius:8px;font:italic 800 28px/1 var(--f);font-stretch:75%;letter-spacing:.06em;color:var(--y)}
.cf__caja{display:grid;gap:18px;padding:26px;border:1px solid var(--line);border-radius:14px;background:rgba(10,15,40,.86)}
.cf__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.cf__stage{display:grid;gap:12px;padding:22px;border:1px solid var(--line);border-radius:14px;background:rgba(236,238,244,.025)}
@media (max-width:899px){.cf{grid-template-columns:minmax(0,1fr)}}