/* EnjoyVIP · capa visual de los hubs (fútbol, F1, entradas VIP).
   Paleta y tipografía del sitio: --ink/--gold/--cream · Cormorant Garamond (títulos) + Manrope (texto).
   Se carga al final del <body>, así que sobrescribe los estilos inline de la plantilla sin tocar el HTML.
   Sin JS el contenido se ve completo: los estados ocultos solo existen con html.evh-ready. */

@property --evh-a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{interpolate-size:allow-keywords}

/* ---------- Fondo vivo del cuerpo ---------- */
.pillar{position:relative;isolation:isolate;overflow:clip}
.pillar::before{
  content:"";position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 26% at 12% 8%,rgba(201,162,74,.10),transparent 70%),
    radial-gradient(30% 22% at 88% 34%,rgba(227,196,120,.07),transparent 70%),
    radial-gradient(40% 30% at 18% 72%,rgba(201,162,74,.06),transparent 70%);
  animation:evhAura 28s ease-in-out infinite alternate;
}
@keyframes evhAura{to{transform:translate3d(3%,-2%,0) scale(1.05)}}

/* ---------- Tipografía ---------- */
.prose{max-width:800px;counter-reset:evh}
.prose p,.prose li{font-size:1.07rem;line-height:1.85;color:#e4e0d8}
.prose strong{color:var(--cream);font-weight:600}
.prose a:not(.btn){color:var(--gold-2);background:linear-gradient(var(--gold-2),var(--gold-2)) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.prose a:not(.btn):hover{background-size:100% 1px}
.prose > h2{
  position:relative;counter-increment:evh;
  font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:500;letter-spacing:-.6px;line-height:1.08;
  margin:110px 0 22px;padding-top:34px;
  background:linear-gradient(180deg,var(--cream) 30%,#d8c597);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.prose > h2::before{
  content:counter(evh,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:"Manrope",sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.3em;
  color:var(--gold);-webkit-text-fill-color:var(--gold);
}
.prose > h2::after{
  content:"";position:absolute;top:8px;left:44px;width:min(180px,40%);height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);transform-origin:0 50%;
  transition:transform 1.1s var(--ease) .15s;
}
html.evh-ready .prose > h2::after{transform:scaleX(0)}
html.evh-ready .prose > h2.evh-line::after{transform:scaleX(1)}
.prose > h3{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:1.6rem;color:var(--gold-2);margin:40px 0 12px}


/* ---------- Listas de datos («Etiqueta: valor») en tarjetas ---------- */
.prose > ul.evh-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 30px}
.prose > ul.evh-facts > li{
  padding:16px 18px 16px 44px;border:1px solid rgba(255,255,255,.06);border-radius:14px;
  background:linear-gradient(160deg,rgba(28,27,24,.7),rgba(14,14,16,.5));font-size:.98rem;line-height:1.6;
  transition:border-color .3s,transform .4s var(--ease);
}
.prose > ul.evh-facts > li:hover{border-color:rgba(201,162,74,.45);transform:translateY(-3px)}
.prose > ul.evh-facts > li::before{left:18px;top:17px}
.prose > ul.evh-facts > li > strong:first-child{display:block;color:var(--gold-2);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
@media (max-width:760px){.prose > ul.evh-facts{grid-template-columns:1fr}}

/* ---------- Respuesta directa: cristal con foco ---------- */
.answer{
  position:relative;overflow:hidden;
  padding:28px 30px 28px 34px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px 18px 18px 4px;
  background:linear-gradient(135deg,rgba(23,23,27,.92),rgba(16,16,19,.6));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);
}
.answer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(227,196,120,.14),transparent 60%);
}
.answer:hover::before{opacity:1}
.answer::after{content:"\201C";position:absolute;right:18px;top:-18px;font-family:"Cormorant Garamond",serif;font-size:9rem;line-height:1;color:rgba(201,162,74,.12);pointer-events:none}
.updated{background:rgba(201,162,74,.06)}
.updated::before{animation:evhPulse 2.4s ease-in-out infinite}
@keyframes evhPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,74,.55)}50%{box-shadow:0 0 0 6px rgba(201,162,74,0)}}

/* ---------- Tarjetas de datos clave / subnavegación / relacionados ---------- */
.keyfacts > *,.subnav a,.related-grid a,.hub > *,.venue{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(32,30,26,.85),rgba(14,14,16,.9));
  border:1px solid var(--line);border-radius:16px;
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s;
}
.keyfacts > *::before,.subnav a::before,.related-grid a::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  transform:translateX(-100%);transition:transform .9s var(--ease);
}
.keyfacts > *:hover::before,.subnav a:hover::before,.related-grid a:hover::before{transform:translateX(100%)}
.keyfacts > *::after,.subnav a::after,.related-grid a::after,.venue::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(227,196,120,.12),transparent 65%);
}
.keyfacts > *:hover::after,.subnav a:hover::after,.related-grid a:hover::after,.venue:hover::after{opacity:1}
.keyfacts > *:hover,.subnav a:hover,.related-grid a:hover,.venue:hover{
  transform:translateY(-5px);border-color:rgba(201,162,74,.6);
  box-shadow:0 26px 60px -30px rgba(201,162,74,.35);
}
.keyfacts strong{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:600;font-variant-numeric:tabular-nums}
.related-grid a,.subnav a{padding:22px 54px 22px 22px;font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.25}
.related-grid a span,.subnav a span{font-family:"Manrope",sans-serif}
.related-grid a::before{z-index:1}
.related-grid a .evh-arrow,.subnav a .evh-arrow{
  position:absolute;right:20px;top:50%;transform:translate(-6px,-50%);opacity:.5;color:var(--gold-2);
  font-family:"Manrope",sans-serif;font-size:1.1rem;transition:transform .35s var(--ease),opacity .35s;
}
.related-grid a:hover .evh-arrow,.subnav a:hover .evh-arrow{transform:translate(0,-50%);opacity:1}
.related h3{font-size:2rem}

/* ---------- Tablas: ancho completo, cabecera dorada, primera columna fija ---------- */
.prose .tbl-wrap,.prose .cmp-wrap{
  width:min(1120px,calc(100vw - 48px));margin-left:calc(50% - min(560px,50vw - 24px));
  border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(23,23,27,.9),rgba(12,12,14,.9));
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
}
.cmp{min-width:760px}
.cmp th{background:linear-gradient(180deg,rgba(201,162,74,.16),rgba(201,162,74,.05));border-bottom:1px solid rgba(201,162,74,.45);padding:16px 18px;position:sticky;top:0}
.cmp td{padding:16px 18px;transition:background .25s}
.cmp tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.cmp tbody tr:hover td{background:rgba(201,162,74,.07)}
.cmp td:first-child,.cmp th:first-child{position:sticky;left:0;z-index:1;background:#141417;box-shadow:1px 0 0 var(--line)}
.cmp th:first-child{background:#1d1a14;z-index:2}
.cmp td:first-child{font-family:"Cormorant Garamond",serif;font-size:1.1rem;color:var(--gold-2)}

/* ---------- Galería ---------- */
.prose .gallery{
  width:min(1120px,calc(100vw - 48px));margin-left:calc(50% - min(560px,50vw - 24px));
  gap:14px;
}
.prose .gallery:has(> img:nth-child(3):last-child){grid-template-columns:1.5fr 1fr}
.prose .gallery img{border-radius:16px;aspect-ratio:auto;height:100%;min-height:220px;filter:brightness(.8) saturate(.85) contrast(1.05);transition:filter .5s,transform .8s var(--ease),clip-path .9s var(--ease)}
.prose .gallery:has(> img:nth-child(3):last-child) img:first-child{grid-row:span 2;min-height:460px}
.prose .gallery img:hover{filter:brightness(1) saturate(1);transform:scale(1.02)}
html.evh-ready .prose .gallery img{clip-path:inset(0 0 100% 0 round 16px)}
html.evh-ready .prose .gallery img.evh-in{clip-path:inset(0 0 0 0 round 16px)}

/* ---------- Pasos ---------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:linear-gradient(var(--gold),transparent)}
.steps li::before{background:#141417;box-shadow:0 0 0 6px var(--ink),0 0 24px rgba(201,162,74,.35)}

/* ---------- FAQ en tarjetas con apertura suave ---------- */
.pfaq details{
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:0 22px;margin:0 0 12px;
  background:linear-gradient(160deg,rgba(23,23,27,.8),rgba(14,14,16,.6));
  transition:border-color .35s,box-shadow .35s,background .35s;
}
.pfaq details:hover{border-color:rgba(201,162,74,.35)}
.pfaq details[open]{border-color:rgba(201,162,74,.6);box-shadow:0 20px 60px -35px rgba(201,162,74,.4)}
.pfaq summary{transition:color .25s}
.pfaq summary:hover{color:var(--gold-2)}
.pfaq summary::after{content:"+";transition:transform .4s var(--ease)}
.pfaq details[open] summary::after{content:"+";transform:translateY(-50%) rotate(45deg)}
.pfaq details::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.pfaq details[open]::details-content{height:auto}
.pfaq details p{color:#bdb7ab}

/* ---------- Llamada a la acción: borde dorado giratorio ---------- */
.callout{
  position:relative;border:1px solid transparent;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(201,162,74,.16),transparent 60%) padding-box,
    linear-gradient(#111114,#111114) padding-box,
    conic-gradient(from var(--evh-a),rgba(201,162,74,.15),var(--gold-2),rgba(201,162,74,.15) 30%,rgba(201,162,74,.15) 70%,var(--gold),rgba(201,162,74,.15)) border-box;
  animation:evhSpin 7s linear infinite;
  box-shadow:0 40px 100px -50px rgba(201,162,74,.45);
}
@keyframes evhSpin{to{--evh-a:360deg}}
.callout h2{background:none;color:var(--cream);-webkit-text-fill-color:var(--cream)}

/* ---------- Botones: el enlace de .prose de la plantilla los pintaba oro sobre oro ---------- */
.prose a.btn-gold,.callout a.btn-gold,main a.btn-gold{color:var(--ink);-webkit-text-fill-color:var(--ink);background-size:auto}
.prose a.btn-ghost,.callout a.btn-ghost{color:var(--cream)}

/* ---------- Cifras alineadas en Cormorant (evita «2o27» y «F1» con números antiguos) ---------- */
h1,h2,h3,.pfaq summary,.keyfacts strong,.cmp td:first-child,.related-grid a,.subnav a{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

/* ---------- Botones: barrido de brillo ---------- */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .7s var(--ease);
}
.btn-gold:hover::after{left:120%}

/* ---------- Hero: velo con contraste suficiente aunque la foto sea clara ---------- */
.page-hero__overlay{background:
  radial-gradient(90% 70% at 18% 62%,rgba(6,6,8,.72),transparent 70%),
  linear-gradient(to top,rgba(6,6,8,.97) 0%,rgba(6,6,8,.6) 48%,rgba(6,6,8,.42) 100%)}
.page-hero h1{text-shadow:0 2px 34px rgba(0,0,0,.55)}
.page-hero .lead{color:rgba(255,255,255,.82);text-shadow:0 1px 18px rgba(0,0,0,.5)}

/* ---------- Hero: titular por palabras, parallax y respiración ---------- */
.page-hero__bg{transform-origin:50% 40%;animation:evhKen 18s var(--ease) both}
@keyframes evhKen{from{transform:scale(1.12)}to{transform:scale(1)}}
.page-hero .eyebrow{position:relative}
html.evh-ready .page-hero h1 .evh-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
html.evh-ready .page-hero h1 .evh-w > span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
html.evh-ready .page-hero h1.evh-go .evh-w > span{transform:none}
html.evh-ready .page-hero .lead,html.evh-ready .page-hero .hero-actions,html.evh-ready .page-hero .trust-bar,html.evh-ready .page-hero .eyebrow{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.evh-ready .page-hero.evh-go .eyebrow{opacity:1;transform:none;transition-delay:.05s}
html.evh-ready .page-hero.evh-go .lead{opacity:1;transform:none;transition-delay:.55s}
html.evh-ready .page-hero.evh-go .hero-actions{opacity:1;transform:none;transition-delay:.7s}
html.evh-ready .page-hero.evh-go .trust-bar{opacity:1;transform:none;transition-delay:.85s}

/* ---------- Entrada escalonada de bloques ---------- */
html.evh-ready .evh-r{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--evh-d,0s)}
html.evh-ready .evh-r.evh-in{opacity:1;transform:none}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .prose > h2{margin-top:80px;padding-top:28px}
  .prose .gallery{grid-template-columns:1fr 1fr}
  .prose .gallery:has(> img:nth-child(3):last-child) img:first-child{grid-column:span 2;grid-row:auto;min-height:240px}
  .answer{padding:22px 20px 22px 22px}
  .answer::after{font-size:6rem}
}

/* ---------- Movimiento reducido: todo estático y visible ---------- */
@media (prefers-reduced-motion:reduce){
  .pillar::before,.callout,.page-hero__bg,.updated::before{animation:none!important}
  html.evh-ready .evh-r,html.evh-ready .page-hero *,html.evh-ready .prose .gallery img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html.evh-ready .prose > h2::after{transform:none}
}