/* PROPUESTA «Regreso al pasado» (solo local, carpeta regreso/): fondo negro, título «Black Friday» y cards oscuras con borde degradado */
:root { --bf-bg: #000; }
body { background: #000; }
.hero__title, .world-hero__title { height: auto; }
.hero__title { width: min(760px, 100%); }
.world-hero__title { width: min(640px, 100%); }
/* sin el carrusel del mapa (sigue en el HTML, oculto) */
.hero__stripwrap { display: none; }
/* cards oscuras: gris muy oscuro con borde degradado amarillo-naranja */
.perk, .deal__box { border: 1.5px solid transparent; box-shadow: none;
  background: linear-gradient(#141414, #141414) padding-box, linear-gradient(135deg, #FFD23F 0%, #FFA41A 45%, #FB4A1A 100%) border-box; color: #e9e9e9; }
.perk h3, .deal__box h4 { color: #FFC81A; }
/* Ventajas: mismo «mordisco» y degradado de acero que «Más motivos», con su borde dorado siguiendo el contorno.
   La card pinta el dorado recortado con la forma; ::before pinta el acero 1,5 px hacia dentro con la misma forma. */
.perk { --bite: 12px; --c: 6px; position: relative; isolation: isolate; border: 0; border-radius: 0; padding-bottom: calc(var(--pad-card) + 10px);
  background: linear-gradient(135deg, #FFD23F 0%, #FFA41A 45%, #FB4A1A 100%); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 80% 100%, calc(80% - var(--bite)) calc(100% - var(--bite)), calc(30% + var(--bite)) calc(100% - var(--bite)), 30% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.perk::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(160deg, #303338 0%, #1d1f23 42%, #282b30 68%, #17191c 100%);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 80% 100%, calc(80% - var(--bite)) calc(100% - var(--bite)), calc(30% + var(--bite)) calc(100% - var(--bite)), 30% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.deal__box .deal__quote, .deal__box .deal__hotel, .deal__box .deal__dates { color: #e9e9e9; }
.deal__box .deal__buy { border-top-color: #333; }
.deal__box .chollo__price small, .deal__box .chollo__price span { color: #bbb; }
.deal__box .chollo__tags li { color: #e9e9e9; background: #2a2e34; border-color: #3a3f46; }
.deal__hero { border-width: 1.5px; border-color: #FFA41A; box-shadow: none; }
/* módulos de captación de la newsletter: banner «Apuntarme gratis» y formulario, mismo estilo dorado por fuera y gris oscuro dentro */
.form { border: 1.5px solid transparent;
  background: linear-gradient(#141414, #141414) padding-box, linear-gradient(135deg, #FFD23F 0%, #FFA41A 45%, #FB4A1A 100%) border-box; }
/* Banner «Apuntarme gratis» de la home: fondo azul noche con un destello suave y pocos rayos muy tenues (salto en el tiempo),
   oscurecido a la izquierda para leer el texto, y botón rojo. Sin borde ni panel, distinto de las tarjetas de ventajas. */
.cta { position: relative; isolation: isolate; overflow: hidden; min-height: 150px; padding: 24px var(--pad-card) 24px 32px; border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(2, 6, 18, .92) 0%, rgba(2, 6, 18, .75) 45%, rgba(2, 6, 18, .2) 80%),
    radial-gradient(circle at 78% 50%, rgba(220, 240, 255, .55) 0, rgba(120, 190, 255, .22) 8%, rgba(40, 110, 230, 0) 28%),
    repeating-conic-gradient(from 0deg at 78% 50%, rgba(150, 205, 255, .12) 0deg 1deg, rgba(150, 205, 255, 0) 1deg 14deg),
    radial-gradient(ellipse 70% 120% at 78% 50%, #1d4f9e 0%, #0b2559 38%, #051030 68%, #02050f 100%);
  border: 1px solid rgba(120, 170, 255, .3); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 2%, rgba(255, 140, 30, .85) 35%, rgba(255, 230, 120, .95) 52%, rgba(255, 90, 20, .7) 75%, transparent 98%);
  box-shadow: 0 0 12px rgba(255, 140, 30, .7); }
.cta .cta__text { margin-right: auto; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.2; max-width: 30ch; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.cta__text { color: #fff; }
.cta__gold { color: #FFC81A; }
/* Personaje dentro del banner, a la izquierda, sobresaliendo por arriba; mismo espacio arriba y abajo del banner */
.cta { overflow: visible; margin-top: 30px; padding-left: 262px; }
.cta__guia { position: absolute; left: 22px; bottom: 0; width: 220px; height: auto; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
@media (max-width: 768px) { .cta__guia { position: static; width: 130px; margin: -78px auto 0; } .cta { margin-top: 60px; padding: 0 18px 22px; min-height: 0; background: linear-gradient(180deg, rgba(2, 6, 18, .4), rgba(2, 6, 18, .88) 70%), radial-gradient(circle at 50% 22%, rgba(220, 240, 255, .5) 0, rgba(120, 190, 255, .2) 10%, rgba(40, 110, 230, 0) 32%), repeating-conic-gradient(from 0deg at 50% 22%, rgba(150, 205, 255, .12) 0deg 1deg, rgba(150, 205, 255, 0) 1deg 14deg), radial-gradient(ellipse 120% 90% at 50% 22%, #1d4f9e 0%, #0b2559 38%, #051030 68%, #02050f 100%); } }
.btn-light.cta__btn { flex: none; background: #FB243F; color: #fff; font-weight: 700; border: 3px solid #0b0f1e; border-radius: 8px;
  box-shadow: inset 0 -5px 0 #C0002B, 0 4px 0 #0b0f1e; text-shadow: 0 2px 0 #C0002B; }
.btn-light.cta__btn:hover { transform: translateY(-2px); background: #e8173a; }
.btn-light.cta__btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 #C0002B, 0 1px 0 #0b0f1e; }
.btn-light.cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.form .field label { color: #FFC81A; }
.form .field small, .form .form__legal { color: #b5b5b5; }
.form .field input { background: #1f1f1f; color: #fff; border-color: #444; }
.form .field input::placeholder { color: #8a8a8a; }
.form .field input:focus { outline-color: #FFA41A; }
.form .form__ok { color: #e9e9e9; }
/* Personaje que presenta los mundos: maleta científica + bocadillo; entra al llegar al módulo */
.guia { display: flex; align-items: center; gap: clamp(12px, 3vw, 40px); margin-bottom: 8px; }
.guia__img { width: clamp(150px, 22vw, 290px); height: auto; flex: none; filter: drop-shadow(0 10px 18px rgba(255, 140, 26, .25));
  transform: translateX(-60px) rotate(-8deg); opacity: 0; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .5s; }
.guia__bocadillo { position: relative; flex: 1; padding: 20px 24px; border-radius: 18px; color: #e9e9e9; font-size: 18px; line-height: 1.45; background: #1c1c1c;
  transform: scale(.85); transform-origin: left center; opacity: 0; transition: transform .45s .35s cubic-bezier(.2, 1.4, .4, 1), opacity .3s .35s; }
.guia__bocadillo::before { content: ""; position: absolute; left: -12px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%) rotate(45deg); background: #1c1c1c; }
.guia__bocadillo .section-title { margin: 0 0 6px; color: #FFC81A; }
.guia__bocadillo b { color: #fff; }
.guia.is-visible .guia__img { transform: none; opacity: 1; }
.guia.is-visible .guia__bocadillo { transform: none; opacity: 1; }
@media (max-width: 768px) {
  .guia { flex-direction: column; text-align: center; }
  .guia__bocadillo { transform-origin: center top; font-size: 16px; padding: 16px; }
  .guia__bocadillo::before { left: 50%; top: -11px; transform: translateX(-50%) rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) { .guia__img, .guia__bocadillo { transition: none; } }
/* fondo de la cabecera de la home: carretera nocturna con estelas de fuego, fundida a negro abajo */
.hero { position: relative; isolation: isolate; padding-bottom: 60px; }
.hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%, #000 100%), url(hero_regreso_bg.webp) center bottom / cover no-repeat; }
html, body { overflow-x: clip; }
/* Pastillas de los circuitos del tiempo del DeLorean: marco de acero y display con letras luminosas.
   Dos pastillas separadas: fechas de la campaña (verde, sin etiqueta, debajo del título) y destino del mundo (rojo).
   Sustituyen a la etiqueta del mundo y a la insignia pixel de las fechas. */
.tc { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; border-radius: 6px; max-width: 100%; margin-top: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .035) 1px 2px, rgba(255, 255, 255, 0) 2px 4px),
    linear-gradient(165deg, #f1f3f5 0%, #c5cad0 34%, #e3e6ea 52%, #8f969e 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .35); }
.tc__cell { --tc-led: #44ff86; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 7px 12px 8px; border-radius: 3px;
  background: #050607; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.tc__cell--destino { --tc-led: #ff4a3d; }
.tc--fechas .tc__cell { align-items: center; padding: 9px 14px; }
.tc--destino { margin-top: 10px; }
.tc__label { font: 700 10px/1 "Outfit", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #8f969e; }
.tc__value { font: 700 clamp(15px, 1.8vw, 20px)/1 "Orbitron", "Outfit", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--tc-led); text-shadow: 0 0 8px color-mix(in srgb, var(--tc-led) 70%, transparent); }
/* Cards de los mundos («Descubre el resto de mundos»): foto entera de la temática, sin mordisco ni neón;
   abajo un degradado oscuro con el nombre y los viajes en blanco. Al pasar el ratón la foto se acerca un poco. */
.world { border-radius: 10px; overflow: hidden; justify-content: flex-end; gap: 0; padding: 0; box-shadow: none; }
.world::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .8) 100%); }
.world img { transition: transform .4s ease; }
.world:hover img { transform: scale(1.05); }
.world:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.world__plate { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0 12px 14px; background: none; color: #fff; text-align: center; }
.world b.world__name { max-width: 100%; font: 700 clamp(13px, 1.3vw, 17px)/1.1 "Orbitron", "Outfit", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.world .world__trips { background: none; border: 0; padding: 0; border-radius: 0; font: 500 13px/1 "Outfit", system-ui, sans-serif; color: #fff; }
@media (max-width: 600px) {
  .world__plate { padding: 0 6px 10px; }
  .world b.world__name { font-size: 10px; letter-spacing: 0; }
  .world .world__trips { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .world img { transition: none; } }
/* Texto de la cabecera de los mundos: el mismo de la home («Volvemos del pasado... / con precios de hace años.») con su contorno */
.world-hero__lead { margin-bottom: 4px; margin-top: 10px; max-width: 34ch; text-wrap: balance; font-size: clamp(24px, 3.2vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: var(--color-basic-light);
  /* contorno con sombras en círculo (sin picos en las esquinas) + relieve inferior */
  text-shadow: 3px 0px 0 #0b1433, 2.77px 1.15px 0 #0b1433, 2.12px 2.12px 0 #0b1433, 1.15px 2.77px 0 #0b1433, 0px 3px 0 #0b1433, -1.15px 2.77px 0 #0b1433, -2.12px 2.12px 0 #0b1433, -2.77px 1.15px 0 #0b1433, -3px 0px 0 #0b1433, -2.77px -1.15px 0 #0b1433, -2.12px -2.12px 0 #0b1433, -1.15px -2.77px 0 #0b1433, 0px -3px 0 #0b1433, 1.15px -2.77px 0 #0b1433, 2.12px -2.12px 0 #0b1433, 2.77px -1.15px 0 #0b1433, 3px 3px 0 #0b1433, 2.77px 4.15px 0 #0b1433, 2.12px 5.12px 0 #0b1433, 1.15px 5.77px 0 #0b1433, 0px 6px 0 #0b1433, -1.15px 5.77px 0 #0b1433, -2.12px 5.12px 0 #0b1433, -2.77px 4.15px 0 #0b1433, -3px 3px 0 #0b1433, -2.77px 1.85px 0 #0b1433, -2.12px 0.88px 0 #0b1433, -1.15px 0.23px 0 #0b1433, 0px 0px 0 #0b1433, 1.15px 0.23px 0 #0b1433, 2.12px 0.88px 0 #0b1433, 2.77px 1.85px 0 #0b1433; }
.world-hero__lead .hero__gold { color: #FFC81A; white-space: nowrap; }
@media (max-width: 768px) { .world-hero__lead { text-shadow: 2.25px 0px 0 #0b1433, 2.08px 0.86px 0 #0b1433, 1.59px 1.59px 0 #0b1433, 0.86px 2.08px 0 #0b1433, 0px 2.25px 0 #0b1433, -0.86px 2.08px 0 #0b1433, -1.59px 1.59px 0 #0b1433, -2.08px 0.86px 0 #0b1433, -2.25px 0px 0 #0b1433, -2.08px -0.86px 0 #0b1433, -1.59px -1.59px 0 #0b1433, -0.86px -2.08px 0 #0b1433, 0px -2.25px 0 #0b1433, 0.86px -2.08px 0 #0b1433, 1.59px -1.59px 0 #0b1433, 2.08px -0.86px 0 #0b1433, 2.25px 2.25px 0 #0b1433, 2.08px 3.11px 0 #0b1433, 1.59px 3.84px 0 #0b1433, 0.86px 4.33px 0 #0b1433, 0px 4.5px 0 #0b1433, -0.86px 4.33px 0 #0b1433, -1.59px 3.84px 0 #0b1433, -2.08px 3.11px 0 #0b1433, -2.25px 2.25px 0 #0b1433, -2.08px 1.39px 0 #0b1433, -1.59px 0.66px 0 #0b1433, -0.86px 0.17px 0 #0b1433, 0px 0px 0 #0b1433, 0.86px 0.17px 0 #0b1433, 1.59px 0.66px 0 #0b1433, 2.08px 1.39px 0 #0b1433; } }
/* Carrusel de destacados: flechas de acero sobre las cards, una a cada extremo, solo en escritorio (en táctil se desliza con el dedo).
   En el extremo donde ya no hay más cards, la flecha se oculta. */
.featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.featured__wrap { position: relative; }
.featured__strip { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
.featured__arrow { position: absolute; z-index: 5; top: calc(50% - 7px); transform: translateY(-50%); width: 50px; height: 50px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; cursor: pointer; color: #121417; border: 2px solid #0b0d10; box-shadow: 0 4px 0 #0b0d10, 0 8px 22px rgba(0, 0, 0, .6);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, rgba(0, 0, 0, .03) 1px 2px, rgba(255, 255, 255, 0) 2px 4px), linear-gradient(165deg, #ffffff, #c9ced3);
  transition: opacity .2s, box-shadow .15s, filter .15s; }
.featured__arrow--prev { left: -25px; }
.featured__arrow--next { right: -25px; }
.featured__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.featured__arrow:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 4px 0 #0b0d10, 0 0 22px rgba(89, 216, 255, .55); }
.featured__arrow:active:not(:disabled) { box-shadow: 0 1px 0 #0b0d10; }
.featured__arrow:focus-visible { outline: 3px solid #59d8ff; outline-offset: 3px; }
.featured__arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: none), (max-width: 768px) { .featured__arrow { display: none; } }
/* Pastilla de fechas: panel oscuro con borde de neón azul y letras verde agua (sin marco de acero) */
.tc--fechas { padding: 0; border-radius: 8px; border: 1.5px solid #59d8ff; background: linear-gradient(180deg, #0c111b, #05070c);
  box-shadow: 0 0 12px rgba(89, 216, 255, .55), inset 0 0 12px rgba(89, 216, 255, .18); }
.tc--fechas .tc__cell { --tc-led: #66f7cf; background: none; box-shadow: none; padding: 8px 18px; }
.tc--fechas .tc__value { letter-spacing: .08em; }

/* Módulo «Descubre mundos donde viajar» (home): título estilo película a la izquierda y carrusel de cards inclinadas
   con foto y placa (nombre, viajes y flecha) sobre una cuadrícula de neón en perspectiva. */
.wnav { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); align-items: center; gap: 36px; padding-block: 30px 64px; }
.wnav::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); bottom: 0; height: 60%; pointer-events: none;
  background: radial-gradient(60% 80% at 60% 100%, rgba(255, 60, 200, .22), transparent 70%); }
.wnav::after { content: ""; position: absolute; z-index: -1; left: 50%; width: 140vw; bottom: -20px; height: 46%; pointer-events: none;
  transform: translateX(-50%) perspective(420px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(255, 70, 210, .55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 70, 210, .55) 1.5px, transparent 1.5px);
  background-size: 56px 56px; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
.wnav__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.wnav__title { margin: 0; font: italic 800 clamp(32px, 3.6vw, 52px)/1 var(--f-body, "Outfit"), system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance;
  background: linear-gradient(180deg, #fff3a8 0%, #FFD23F 30%, #FFA41A 60%, #FB4A1A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 #0b1d4d) drop-shadow(-1px 0 0 #0b1d4d) drop-shadow(0 1px 0 #0b1d4d) drop-shadow(0 -1px 0 #0b1d4d) drop-shadow(0 2px 0 rgba(31, 182, 255, .8)) drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.wnav__text { margin: 0; color: #e3e5e8; font-size: 18px; line-height: 1.45; max-width: 30ch; }
.wnav__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 14px 22px; border-radius: 8px; color: #fff; font: 700 17px/1.2 var(--f-body, "Outfit"), system-ui, sans-serif; text-decoration: none;
  background: #FB243F; border: 3px solid #0b0f1e; box-shadow: inset 0 -5px 0 #C0002B, 0 4px 0 #0b0f1e; text-shadow: 0 2px 0 #C0002B; transition: transform .12s, background .12s; }
.wnav__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wnav__cta:hover { transform: translateY(-2px); background: #e8173a; }
.wnav__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wnav__wrap { position: relative; min-width: 0; }
.wnav__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 26px 18px; scroll-padding-inline: 26px; scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.wnav__track::-webkit-scrollbar { display: none; }
.wnav__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wnav__track:focus-visible { outline: 3px solid #59d8ff; outline-offset: 2px; }
.wcard { --sk: -8deg; position: relative; flex: 0 0 clamp(200px, 19vw, 250px); aspect-ratio: 3 / 4.2; scroll-snap-align: start; display: flex; align-items: flex-end; text-decoration: none; color: #fff;
  transform: skewX(var(--sk)); border-radius: 14px; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 1px rgba(255, 70, 210, .25), 0 0 22px rgba(255, 70, 210, .22), 0 14px 26px rgba(0, 0, 0, .55); transition: transform .2s ease, box-shadow .25s, border-color .25s; }
.wcard__img { position: absolute; inset: 0; overflow: hidden; }
.wcard__img img { position: absolute; inset: -2px -16%; width: 132%; max-width: none; height: calc(100% + 4px); object-fit: cover; transform: skewX(calc(-1 * var(--sk))); }
.wcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
.wcard__plate { position: relative; z-index: 1; margin: 12px; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(10, 12, 20, .78); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wcard__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; transform: skewX(calc(-1 * var(--sk))); }
.wcard__txt b { font: 800 16px/1.1 var(--f-body, "Outfit"), system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard__txt small { font: 500 13px/1 var(--f-body, "Outfit"), system-ui, sans-serif; color: #c9ccd1; }
.wcard__go { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); transform: skewX(calc(-1 * var(--sk))); }
.wcard__go svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wcard:hover { border-color: rgba(89, 216, 255, .9); box-shadow: 0 0 0 1px rgba(89, 216, 255, .6), 0 0 26px rgba(89, 216, 255, .35), 0 14px 26px rgba(0, 0, 0, .55); }
.wcard:hover .wcard__go { background: #FB243F; border-color: #FB243F; }
.wcard:focus-visible { outline: 3px solid #59d8ff; outline-offset: 3px; }
.wnav__arrow { top: calc(50% - 2px); }
.wnav__arrow.featured__arrow--prev { left: -25px; }
.wnav__arrow.featured__arrow--next { right: -25px; }
@media (max-width: 900px) {
  .wnav { grid-template-columns: 1fr; gap: 22px; padding-block: 24px 48px; }
  .wnav__intro { align-items: center; text-align: center; }
  .wnav__text { max-width: 36ch; }
  .wnav__track { padding-inline: 16px; scroll-padding-inline: 16px; margin-inline: -8px; }
  .wcard { flex-basis: 58%; }
  /* En móvil y tablet las cards van rectas (sin la inclinación) */
  .wcard { --sk: 0deg; }
  .wcard__img img { inset: 0; width: 100%; height: 100%; }
}
/* «Descubre el resto de mundos» (páginas de mundo): las mismas cards del módulo de la home, rectas, en cuadrícula de 4 + 3 y sin halo azul */
.wcard--recta { --sk: 0deg; flex: 0 0 calc((100% - 3 * var(--gap-l, 24px)) / 4); aspect-ratio: 4 / 3.6; }
.wcard--recta .wcard__img img { inset: 0; width: 100%; height: 100%; transition: transform .4s ease; }
.wcard--recta:hover { border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(255, 70, 210, .35), 0 0 26px rgba(255, 70, 210, .3), 0 14px 26px rgba(0, 0, 0, .55); }
.wcard--recta:hover .wcard__img img { transform: scale(1.05); }
.wcard--recta:focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .wcard--recta { flex-basis: calc((100% - var(--gap-m, 16px)) / 2); } }
@media (max-width: 600px) { .wcard--recta { aspect-ratio: 3 / 3.4; } .wcard--recta .wcard__plate { margin: 8px; padding: 8px 9px; } .wcard--recta .wcard__txt b { font-size: 12px; letter-spacing: .01em; } .wcard--recta .wcard__plate { min-width: 0; } .wcard--recta .wcard__go { display: none; } }
@media (prefers-reduced-motion: reduce) { .wcard, .wnav__cta { transition: none; } }

/* «Más motivos para reservar»: card de acero oscuro con degradado sutil y un «mordisco» en el borde inferior
   (hueco en trapecio entre el 30 % y el 80 % del ancho, con los lados en diagonal). Títulos en blanco y texto en gris. */
.reason { --bite: 12px; --c: 5px; position: relative; border: 0; border-radius: 0; padding: 22px 24px 34px; gap: 10px; box-shadow: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(160deg, #303338 0%, #1d1f23 42%, #282b30 68%, #17191c 100%);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    80% 100%, calc(80% - var(--bite)) calc(100% - var(--bite)), calc(30% + var(--bite)) calc(100% - var(--bite)), 30% 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.reason h3 { font: 700 20px/1.3 var(--f-body, "Outfit"), system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-shadow: none; color: #fff; }
.reason p { color: #b9bcc2; }
/* Cabeceras (home y mundos): foto de fondo más suave (60 % sobre el negro) y, en escritorio, 600 px de alto con el contenido centrado */
.hero::before, .world-hero__bg { opacity: .6; }
@media (min-width: 769px) {
  .hero, .world-hero { box-sizing: border-box; height: 600px; justify-content: center; padding-block: 24px 40px; }
  .hero__title { width: min(600px, 100%); }
  .world-hero__title { width: min(560px, 100%); }
  .world-hero h1 > a { width: min(560px, 100%); }
  .world-hero__title { margin-block: 8px 0; }
}
/* Cabecera de las páginas de mundo: el mismo fondo que la home (carretera nocturna con fuego), fundido a negro abajo */
.world-hero__bg { object-position: center bottom; }
.world-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%, #000 100%); }

/* Todos los CTA con el mismo redondeo (botones rojos, de las cards, del banner, de cookies y de gracias) */
:root { --cta-radius: 10px; }
:root :is(.chollo__btn, .chollo--all em, .ck__btn, .btn-red, .btn-light.cta__btn, .btn-light.hero__cta, .wnav__cta, .thanks__btn) { border-radius: var(--cta-radius); }