
:root{--navy:#071322;--gold:#e4bd68;--red:#b82031;--cream:#f5f0e7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#15202c;line-height:1.6}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.site-header{position:fixed;z-index:99;top:0;left:0;right:0;height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:rgba(5,14,26,.9);backdrop-filter:blur(10px)}.brand img{height:58px;width:auto}.site-header nav{display:flex;align-items:center;gap:18px;color:#fff;font-size:.85rem;font-weight:700}.book,.primary{background:linear-gradient(135deg,#cf3344,#941522);color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;display:inline-block}.menu-toggle{display:none}.lang{position:relative}.lang button{background:none;border:1px solid #ffffff55;border-radius:999px;color:#fff;padding:8px 12px}.lang>div{display:none;position:absolute;right:0;top:40px;background:#fff;color:#111;min-width:160px;padding:8px;border-radius:10px;box-shadow:0 15px 40px #0005}.lang:hover>div{display:grid}.lang a{padding:7px 10px}.hero{height:100vh;min-height:720px;position:relative;display:flex;align-items:center;overflow:hidden;color:#fff}.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#04101aee 0%,#04101aaa 48%,#04101a33),linear-gradient(0deg,#04101abb,transparent 50%)}.hero-content{position:relative;z-index:2;max-width:780px;margin-left:7vw;margin-right:7vw;padding-top:70px}.eyebrow{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem}.hero h1,.page-hero h1{font-size:clamp(3.5rem,8vw,7.4rem);line-height:.92;margin:15px 0 25px;letter-spacing:-.05em}.hero h1 span{color:var(--gold)}.hero-content>p:not(.eyebrow){font-size:1.2rem;max-width:720px}.actions{display:flex;gap:12px;margin-top:28px}.secondary{border:1px solid #ffffff88;color:#fff;padding:11px 20px;border-radius:999px;font-weight:800;display:inline-block}.secondary.dark{color:#111;border-color:#bbb;margin-top:10px}.benefits{display:grid;grid-template-columns:repeat(5,1fr);background:var(--navy);color:#fff}.benefits div{text-align:center;padding:22px 12px;border-right:1px solid #ffffff22}.section{padding:90px 7vw}.intro{text-align:center;max-width:1050px;margin:auto}.intro h2,.promos h2,.cta h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.05}.intro>p:last-child{font-size:1.15rem;color:#596572}.cards{padding:0 7vw 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.link-card{border:1px solid #e2e6ea;border-radius:18px;padding:28px;background:#fff;box-shadow:0 10px 30px #0c1b2d12}.link-card h3{margin-top:0;font-size:1.45rem}.link-card p{color:#64707c}.link-card span{color:var(--red);font-size:1.5rem}.promos{background:var(--cream);text-align:center}.poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:35px auto}.poster-grid img{width:100%;aspect-ratio:4/5;object-fit:contain;background:#071322;border-radius:16px}.note{color:#66717c}.cta{padding:90px 7vw;text-align:center;background:linear-gradient(135deg,#0b203a,#071322);color:#fff}.page-hero{min-height:68vh;background-position:center;background-size:cover;color:#fff;display:flex;align-items:center;padding:130px 7vw 70px}.page-hero>div{max-width:900px}.page-hero h1{font-size:clamp(3rem,7vw,6rem)}.page-hero p:not(.eyebrow){font-size:1.2rem;max-width:780px}.content{padding:80px 7vw;display:grid;grid-template-columns:1fr 360px;gap:60px;max-width:1400px;margin:auto}.content h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1.05}.content li{padding:9px 0}.content aside{background:var(--cream);padding:30px;border-radius:18px;height:max-content;position:sticky;top:100px}.placeholder{margin-top:45px;padding:28px;border:2px dashed #c8ced5;border-radius:16px;color:#66717c}footer{background:#040b14;color:#b7c1cc;text-align:center;padding:50px 20px}footer img{width:150px;margin:0 auto 20px}.small{font-size:.8rem;color:#798696}[dir=rtl] .hero-content{margin-right:7vw;margin-left:auto}[dir=rtl] .lang>div{right:auto;left:0}
@media(max-width:1100px){.site-header nav>a:not(.book){display:none}.cards{grid-template-columns:repeat(2,1fr)}.content{grid-template-columns:1fr}.content aside{position:static}.benefits{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.site-header{height:70px;padding:0 18px}.brand img{height:48px}.menu-toggle{display:block;background:none;border:1px solid #ffffff55;color:#fff;border-radius:8px;padding:8px 12px}.site-header nav{display:none;position:absolute;top:70px;left:0;right:0;background:#071322;padding:20px;flex-direction:column}.site-header.open nav{display:flex}.site-header nav>a{display:block!important}.hero{min-height:680px}.hero-content{margin:0 22px}.hero h1{font-size:3.4rem}.actions{flex-direction:column}.benefits{grid-template-columns:1fr 1fr}.cards,.poster-grid{grid-template-columns:1fr}.section,.content{padding:65px 22px}.page-hero{padding:120px 22px 60px}.page-hero h1{font-size:3rem}}

/* Enlaces táctiles: en móvil algunos quedaban en 23-26 px de alto. La guía de
   Apple son 44. Por debajo de eso el dedo falla y el visitante piensa que la
   web está rota, no que ha fallado él. Crece el área de toque, no la letra. */
@media (max-width: 760px){
  footer a, .content a, .lang a, .lang button, nav a, a[href^="mailto"], a[href^="tel"]{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .menu-toggle{min-height:44px; min-width:44px}
}

/* ============================================================================
   TEMA OSCURO PREMIUM
   Una sala de póker de noche no es blanca. El sitio tenía el hero oscuro y
   luego caía a blanco en cuanto bajabas, que es el corte que hace que una web
   de resort parezca un folleto de oficina.

   Tres profundidades, no una: azul marino casi negro para el fondo, un tono
   por encima para las bandas y otro más claro para las tarjetas. Así hay
   relieve sin usar bordes duros. El dorado se reserva para lo que importa
   -titulares, cifras, llamadas a la acción- porque un dorado que está en todo
   deja de valer para nada.
   ========================================================================= */
:root{
  --bg:#050d18;          /* negro azulado: el suelo */
  --bg-2:#08131f;        /* bandas alternas */
  --surface:#0e1c2c;     /* tarjetas */
  --surface-2:#122335;   /* tarjeta elevada / hover */
  --ink:#eef4fa;
  --muted:#9aabbd;
  --line:rgba(228,189,104,.16);   /* el borde lleva una gota de dorado */
  --line-soft:rgba(255,255,255,.07);
}

body{background:var(--bg);color:var(--ink)}

/* Un degradado muy largo evita que 4.000 px de página se lean como un bloque
   plano de color. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 12% -10%,rgba(228,189,104,.06),transparent 60%),
    radial-gradient(1000px 500px at 88% 4%,rgba(184,32,49,.05),transparent 60%),
    linear-gradient(180deg,#050d18 0%,#071322 45%,#040a13 100%);
}

/* Cabecera: más alta al inicio y compacta al bajar la daría un JS que no hay,
   así que se queda fija con un filo dorado que la separa del contenido sin
   dibujar una línea gris de navegador. */
.site-header{
  background:rgba(5,13,24,.82);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Las cuatro superficies claras que quedaban. */
.promos,.content aside{background:var(--bg-2)!important;color:var(--ink)}
.link-card,.lang>div{
  background:var(--surface)!important;color:var(--ink);
  border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:0 16px 34px rgba(0,0,0,.38);
}
.link-card:hover{background:var(--surface-2);border-color:var(--line)}

/* Tarjetas: fondo propio, filo dorado apenas visible y una sombra larga. Es lo
   que separa "caja con borde" de "tarjeta". */
.cards>*,.benefits>*,.poster-grid>*,.section>article,.content>div>section{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line-soft);border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* Texto. Los grises se mezclaron para papel blanco y sobre negro desaparecen. */
.intro,.section,.content,.promos,.cta,footer{color:var(--ink)}
.small,.note,.eyebrow+p,p.small{color:var(--muted)}
h1,h2,h3{color:var(--ink)}
.eyebrow{color:var(--gold);letter-spacing:.14em}

/* El dorado, solo donde manda. */
h2{position:relative}
.section h2::after,.intro h2::after,.promos h2::after{
  content:'';display:block;width:54px;height:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* Llamadas a la acción: la principal en dorado sólido con texto oscuro -el
   contraste más alto de la página, que es donde debe estar-, la secundaria en
   contorno para que no compitan. */
.primary,.book{
  background:linear-gradient(135deg,var(--gold),#f0d089)!important;
  color:#0a1220!important;border:0;font-weight:800;
  box-shadow:0 10px 26px rgba(228,189,104,.22);
}
.primary:hover,.book:hover{filter:brightness(1.06)}
.secondary{
  background:rgba(255,255,255,.05)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;
}
.secondary:hover{background:rgba(228,189,104,.12)!important}

/* Galería y fotos: un velo frío muy leve iguala fotos hechas a distintas horas
   y las asienta sobre el fondo nocturno en vez de recortarlas contra él. */
.poster-grid img,.cards img,.link-card img{border-radius:12px}
.placeholder{background:var(--surface);border:1px dashed var(--line)}

/* Pie */
footer{background:#030a12;border-top:1px solid var(--line);color:var(--muted)}
footer a{color:var(--gold)}
footer img{opacity:.9}

/* Selector de idioma desplegado */
.lang>div a{color:var(--ink)}
.lang>div a:hover{background:rgba(228,189,104,.14)}

/* Menú móvil */
@media(max-width:700px){
  .site-header nav{background:#071322;border-bottom:1px solid var(--line)}
  .menu-toggle{border-color:var(--line);color:var(--gold)}
}

/* Imprimir en negro gasta el cartucho y se lee peor. */
@media print{
  body{background:#fff!important;color:#000!important}
  body::before{display:none}
  .promos,.content aside,.link-card,.cards>*,.benefits>*{background:#fff!important;color:#000!important}
}
/* Los seis grises que quedaban se mezclaron contra papel blanco: sobre el fondo
   nocturno caen entre 3,28 y 3,4 de contraste, por debajo del mínimo legible.
   Suben al gris del tema, que da 7,4 sobre la tarjeta. */
.intro>p:last-child,.link-card p,.note,.placeholder,.small,footer,.secondary.dark{color:var(--muted)!important}
.link-card h3,.link-card strong{color:var(--ink)!important}
