/* ============================================================
   GT Sport Cars — piel sobre la web de HCC   (maqueta v1 · 14/10/2026 · v18: 18/10/2026)
   v18: en reposo, sombras grises (sin brillos de color); el brillo solo al
        pasar el ratón o en lo seleccionado. Único brillo fijo: la barra de
        estrellas (.resenas). Coches y sedes se encienden como las experiencias.
   Se carga DESPUÉS de style.css. Misma web, mismo código; solo cambia:
   - Colores: grafito y naranja (los rojos de style.css ya pasados a naranja).
   - Botones y selecciones con el estilo del programa (GUIA_ESTILO v2):
     semirredondeados, borde del color, degradado translúcido y brillo.
   - Paneles con 3 niveles de altura (sombras y luz superior = efecto 3D).
   - Pie con foto casi apagada (volante), como la web antigua de GT.
   ============================================================ */
:root {
  --radius: 10px;
  --or: #D9530E; --or-claro: #F7A56B; --or-glow: rgba(217,83,14,.55);
  /* Niveles: 0 fondo · 1 panel · 2 bloque dentro del panel (hundido) · 3 flotante */
  --n1: linear-gradient(180deg, #2B2F34 0%, #24272B 100%);
  --n1-sombra: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.35), 0 22px 40px -20px rgba(0,0,0,.85);
  --n2: linear-gradient(180deg, #1D2023 0%, #212428 100%);
  --n2-sombra: inset 0 2px 7px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);
  --n3-sombra: inset 0 1px 0 rgba(255,255,255,.09), 0 28px 60px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
}
.ck-bar { display: none !important; }      /* maqueta: sin aviso de cookies */
.hero-fx { display: none !important; }     /* los destellos iban sobre los faros de la foto de HCC */

/* ---------- Nivel 0: fondo con un poco de luz arriba ---------- */
body { background: radial-gradient(1400px 700px at 50% -260px, #2A2E33 0%, rgba(27,29,32,0) 70%), #1B1D20; }

/* ---------- Nivel 1: paneles y tarjetas ---------- */
.panel, .card, .sede, .summary, .ticket, .dudas, .faq-tema {
  background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); }
.site-header { box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }

/* ---------- Nivel 2: bloques dentro de un panel (hundidos) ---------- */
#cRes .res-card, .com-cupon, .res-panel, .regalo-box, .desc-box, .imagen-box, .pp-box {
  background: var(--n2); border: 1px solid #33373C; box-shadow: var(--n2-sombra); }
.panel .opt { background: var(--n2); box-shadow: var(--n2-sombra); border-width: 1px; border-color: #3A3F45; }

/* ---------- Nivel 3: lo que flota (resumen lateral, barra móvil) ---------- */
.sticky-side, .summary.sticky-side, .mbar { box-shadow: var(--n3-sombra); }

/* ---------- Experiencias: sombra gris; brillo naranja solo al pasar el ratón ---------- */
.card { box-shadow: var(--n1-sombra); }
.card:hover { border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(217,83,14,.35), 0 18px 44px -14px rgba(217,83,14,.7); }
.price { color: var(--or-claro); }
.card h3 { color: var(--fg); }

/* ---------- Botones (estilo del programa) ---------- */
.btn { border-radius: 10px; border: 1px solid rgba(255,170,110,.45); color: #FFF3EA;
  background: linear-gradient(180deg, #D9530E 0%, #9E3A08 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -12px rgba(0,0,0,.85); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn:hover { color: #fff; background: linear-gradient(180deg, #EE6A1F 0%, #B8450B 100%); border-color: #FFB27A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(217,83,14,.35), 0 12px 28px -10px rgba(217,83,14,.85); }
.btn.ghost, .btn.neutro { color: #E7E8E9; border-color: rgba(255,255,255,.2); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); text-shadow: none; }
.btn.ghost:hover, .btn.neutro:hover { color: #fff; border-color: var(--or); background: linear-gradient(180deg, rgba(217,83,14,.32), rgba(217,83,14,.14)); box-shadow: 0 0 0 1px rgba(217,83,14,.25), 0 10px 24px -12px var(--or-glow); }
.btn.azul, .btn.verde, .btn.salir, .btn.anular { text-shadow: none; }
.nav .btn.nav-res { color: #FFF3EA; }
.btnres, .faq-a .btnres { border-radius: 10px; background: linear-gradient(180deg, #D9530E, #9E3A08); }

/* ---------- Selecciones: degradado translúcido + borde + brillo (nunca sólido) ---------- */
.opt { border-radius: 10px; }
.opt[aria-pressed="true"], .panel .opt[aria-pressed="true"] { border-color: var(--or); color: var(--fg);
  background: linear-gradient(180deg, rgba(217,83,14,.32), rgba(217,83,14,.13));
  box-shadow: 0 0 0 1px rgba(217,83,14,.3), 0 8px 20px -10px rgba(217,83,14,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.opt:hover { border-color: rgba(217,83,14,.7); }

/* ---------- Píldoras (sedes, coches): chip del programa, no redonda ni mate ---------- */
.pill { border-radius: 6px; color: #FFD9BE; border-color: rgba(217,83,14,.55);
  background: linear-gradient(180deg, rgba(217,83,14,.26), rgba(217,83,14,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px -2px rgba(0,0,0,.5); }
.sede .row .pill + .pill { color: #CFE0FF; border-color: rgba(96,150,255,.5); background: linear-gradient(180deg, rgba(59,130,246,.24), rgba(30,64,175,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px -2px rgba(0,0,0,.5); }
.pill.ok { border-radius: 6px; }
.tag { border-radius: 6px; background: linear-gradient(180deg, #D9530E, #9E3A08); box-shadow: 0 4px 14px -4px rgba(0,0,0,.6); }
.chip-fecha { border-radius: 8px; }

/* ---------- Sedes en grande: próxima fecha destacada ---------- */
.prox-grande b.prox, b.prox { color: var(--or-claro); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.sede img { filter: saturate(1.05) contrast(1.05); }

/* ---------- Pie con foto apagada (motor V8; 15/10: antes el volante, que era la misma foto que HCC) ---------- */
.site-footer { position: relative; isolation: isolate; border-top: 1px solid #383C42;
  background: linear-gradient(180deg, rgba(12,13,14,.82), rgba(12,13,14,.94)), url(../../img/motor_v8.jpg) center 45% / cover no-repeat, #0C0D0E; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--or), transparent); opacity: .8; }
/* 15/10: reseñas de Sport Cars GT (data.js resenas, 4,8) en la portada; ya no se ocultan */
.g-blk .resenas { margin-top: 0; }
.res-aviso .res-aviso-t { color: #FF6B5E; }   /* «en rojo» también en GT (aquí --red-text es naranja) */

/* ============================================================
   v2 (15/10/2026) — GT con identidad propia: tipografía Saira Condensed,
   PORTADA y EXPERIENCIAS distintas (gt_paginas.js, clases g-). El resto de
   páginas son las de la web de HCC con esta piel.
   ============================================================ */
:root { --display: 'Saira Condensed', 'Barlow Condensed', 'Arial Narrow', sans-serif; }
h1, h2, h3, .h-xl, .h-l, .h-m { letter-spacing: .015em; }
/* 15/10: títulos de sección en naranja suave (Elige tu ruta, Tu hoja de ruta, Los coches,
   paneles de Reservar / Mi cuenta / pago...). Los h1 de cabecera siguen en blanco sobre la foto. */
h2, .h-m, .cuenta-grid > .panel > h2.h-m { color: var(--or-claro); }
/* 15/10: degradado metálico + sombra interior (filtro SVG #gtTitulo, en cada .html) + sombra exterior.
   El degradado se repite en cada línea (background-size = alto de línea). Sin soporte de
   background-clip: text se queda el naranja liso de arriba. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h2, .h-m, .cuenta-grid > .panel > h2.h-m {
    color: transparent; line-height: 1.05;
    background-image: linear-gradient(180deg, #FFE3CB 0%, #FBBE8C 32%, #F7A56B 55%, #E5823E 78%, #C25A1E 100%);
    background-size: 100% 1.05em; background-repeat: repeat-y;
    -webkit-background-clip: text; background-clip: text;
    filter: url(#gtTitulo) drop-shadow(0 3px 4px rgba(0,0,0,.55));
  }
}

/* Portada: foto a pantalla completa */
.g-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(88vh, 880px); display: grid; align-items: start; background: #0C0D0E; color: #F4F4F2; }
.g-hfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; z-index: -2; max-width: none; }
/* 15/10: foto de noche sin rebajar el color: solo una sombra suave detrás del texto (arriba a la
   izquierda) y un fundido corto abajo para el buscador; el centro de la foto queda limpio. */
.g-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 62% at 14% 22%, rgba(8,8,9,.55) 0%, rgba(8,8,9,0) 70%), linear-gradient(180deg, rgba(8,8,9,0) 82%, rgba(8,8,9,.55) 100%); }
.g-hcont { width: 100%; padding-block: 56px 150px; display: grid; gap: 18px; justify-items: start; }
.g-hero h1 { font-size: clamp(40px, 5.4vw, 74px); line-height: .98; max-width: 15ch; text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 2px 30px rgba(0,0,0,.6); }
.g-hero .g-lead, .g-hero .g-eye { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.75); }
@media (min-width: 1400px) {   /* el texto empieza más a la derecha: la sombra lo sigue */
  .g-hero::after { background: radial-gradient(42% 58% at 30% 30%, rgba(8,8,9,.55) 0%, rgba(8,8,9,0) 72%), linear-gradient(180deg, rgba(8,8,9,0) 82%, rgba(8,8,9,.55) 100%); }
}
.g-lead { font-size: 19px; max-width: 44ch; color: #D6D8DA; }
.g-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.g-eye { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--or-claro); }
.g-hero .g-eye { color: #D6D8DA; }
@media (max-width: 760px) { .g-hero { min-height: 80vh; } .g-hcont { padding-block: 40px 120px; } }

/* Buscador sobre la foto + cifras */
.g-blk { padding-block: 72px; }
.g-sinpad { padding-block: 0 24px; }
.g-alt { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); border-block: 1px solid #2E3237; }
.g-busca { position: relative; z-index: 2; margin-top: -64px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; padding: 16px; border-radius: 12px; background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n3-sombra); }
.g-fld { display: grid; gap: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); min-width: 0; }
.g-fld select { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--fg); background: var(--n2); box-shadow: var(--n2-sombra); border: 1px solid #3A3F45; border-radius: 10px; padding: 11px 12px; min-width: 0; }
.g-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 30px; }
.g-datos b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; color: var(--fg); margin-bottom: 4px; }
.g-datos span { font-size: 13px; color: var(--muted); }
.g-datos b .g-estrella { font-size: inherit; color: #F2C46D; }
@media (max-width: 760px) { .g-busca { grid-template-columns: 1fr 1fr; } .g-busca .btn { grid-column: 1 / -1; } .g-datos { grid-template-columns: 1fr 1fr; } }

/* Cabeceras de sección */
.g-shead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 30px; }
.g-shead h2 { font-size: clamp(32px, 4.4vw, 54px); }
.g-shead p { max-width: 52ch; color: var(--muted); }

/* Mosaico de experiencias (se enciende al pasar el ratón) */
.g-exps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.g-exp { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden; color: var(--fg);
  background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); transition: transform .25s, box-shadow .25s, border-color .25s; }
.g-exp:hover { color: var(--fg); transform: translateY(-3px); border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(217,83,14,.35), 0 18px 44px -14px rgba(217,83,14,.7); }
.g-exp.big { grid-column: span 4; grid-row: span 2; }
.g-exp.mid { grid-column: span 3; }
.g-exp .ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.g-exp.big .ph { aspect-ratio: auto; flex: 1; min-height: 280px; }
.g-exp .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g-exp:hover .ph img { transform: scale(1.04); }
.g-tag { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; color: #FFF3EA; background: linear-gradient(180deg, #D9530E, #9E3A08); box-shadow: 0 4px 14px -4px rgba(0,0,0,.6); }
.g-exp .bd { padding: 18px 20px 20px; display: grid; gap: 8px; }
.g-exp h3 { font-size: 28px; }
.g-exp.big h3 { font-size: clamp(32px, 3.4vw, 44px); }
.g-exp p { color: var(--muted); font-size: 15px; }
.g-exp .pr { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px dashed #3A3F45; color: var(--muted); font-size: 14px; }
.g-exp .pr b { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--or-claro); }
@media (max-width: 900px) { .g-exps { grid-template-columns: 1fr 1fr; } .g-exp, .g-exp.mid { grid-column: span 1; } .g-exp.big { grid-column: 1 / -1; grid-row: auto; } .g-exp.big .ph { aspect-ratio: 16 / 10; flex: none; min-height: 0; } }
@media (max-width: 560px) { .g-exps { grid-template-columns: 1fr; } }

/* Panel con foto apagada */
.g-apagado { position: relative; isolation: isolate; overflow: hidden; background: #0C0D0E; color: #ECEDEE; }
.g-fondo { position: absolute; inset: 0; z-index: -1; }
.g-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.45) contrast(1.1); max-width: none; }
.g-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,14,.35), rgba(12,13,14,.78)); }
.g-phead { padding-block: 64px 48px; }
.g-phead h1 { font-size: clamp(40px, 6vw, 76px); margin-top: 10px; }
.g-phead p { max-width: 60ch; color: var(--muted); font-size: 18px; margin-top: 14px; }

/* Hoja de ruta: hitos PK */
.g-ruta { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.g-ruta::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; border-top: 3px dashed #4A5057; }
.g-paso { position: relative; padding-right: 28px; display: grid; gap: 10px; align-content: start; }
.g-hito { width: 46px; height: 56px; border-radius: 23px 23px 6px 6px; background: linear-gradient(180deg, #2B2F34, #1B1D20); border: 2px solid var(--or); display: grid; place-content: center; text-align: center; line-height: 1; z-index: 1; box-shadow: 0 6px 14px -6px rgba(0,0,0,.8); }
.g-hito small { font-size: 9px; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.g-hito b { font-family: var(--display); font-weight: 800; font-size: 20px; }
.g-paso h3 { font-size: 26px; margin-top: 6px; }
.g-paso p { color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .g-ruta { grid-template-columns: 1fr; gap: 26px; } .g-ruta::before { left: 22px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 3px dashed #4A5057; } .g-paso { grid-template-columns: 46px 1fr; column-gap: 16px; padding-right: 0; } .g-paso > :not(.g-hito) { grid-column: 2; } .g-paso .g-hito { grid-row: span 2; } }

/* Coches: ficha técnica */
.g-coches { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.g-coche { display: grid; border-radius: 12px; overflow: hidden; color: var(--fg); background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); min-width: 0; transition: transform .25s, box-shadow .25s, border-color .25s; }
.g-coche:hover { color: var(--fg); transform: translateY(-3px); border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(217,83,14,.35), 0 18px 44px -14px rgba(217,83,14,.7); }
.g-coche .ph { aspect-ratio: 16 / 9; overflow: hidden; }
.g-coche .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g-coche:hover .ph img { transform: scale(1.04); }
.g-coche .bd { padding: 20px 22px 22px; }
.g-coche h3 { font-size: 32px; margin-top: 4px; }
.g-spec { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.g-spec th { text-align: left; font-weight: 500; color: var(--muted); padding: 8px 0; border-top: 1px solid #33373C; width: 46%; }
.g-spec td { padding: 8px 0; border-top: 1px solid #33373C; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .g-coches { grid-template-columns: 1fr; } }

/* Sedes con la próxima fecha en grande */
.g-sedes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.g-sede { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 12px; color: var(--fg); background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); min-width: 0; transition: transform .25s, box-shadow .25s, border-color .25s; }
.g-sede:hover { color: var(--fg); transform: translateY(-3px); border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(217,83,14,.35), 0 18px 44px -14px rgba(217,83,14,.7); }
.g-sede h3 { font-size: 28px; }
.g-lugar { font-size: 14px; color: var(--muted); }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.g-chip { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; color: #CFE0FF; border: 1px solid rgba(96,150,255,.5); background: linear-gradient(180deg, rgba(59,130,246,.24), rgba(30,64,175,.12)); box-shadow: 0 2px 6px -2px rgba(0,0,0,.5); }
.g-chip.f { color: #FFD9BE; border-color: rgba(217,83,14,.55); background: linear-gradient(180deg, rgba(217,83,14,.26), rgba(217,83,14,.10)); box-shadow: 0 2px 6px -2px rgba(0,0,0,.5); }
.g-prox-t { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 10px; border-top: 1px dashed #3A3F45; }
b.g-prox { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.05; }
@media (max-width: 1000px) { .g-sedes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } }

/* Banner cupón regalo */
.g-banner { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #2B2F34, #1D2023); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); }
.g-banner .bd { padding: 44px 40px; display: grid; gap: 16px; align-content: center; justify-items: start; }
.g-banner h2 { font-size: clamp(34px, 4.4vw, 56px); }
.g-banner p { color: var(--muted); max-width: 42ch; }
.g-banner .ph { min-height: 300px; }
.g-banner .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .g-banner { grid-template-columns: 1fr; } .g-banner .ph { min-height: 220px; order: -1; } .g-banner .bd { padding: 28px 22px; } }

/* Preguntas frecuentes (portada) */
.g-faq { max-width: 860px; border-top: 1px solid #33373C; }
.g-faq details { border-bottom: 1px solid #33373C; }
.g-faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; gap: 16px; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--or); }
.g-faq details[open] summary::after { content: "−"; }
.g-faq details p { padding-bottom: 18px; color: var(--muted); max-width: 70ch; }

/* Experiencias: filtro y pie */
.g-filtro { margin-bottom: 24px; }
.g-mas { margin-top: 24px; }

/* ============================================================
   v3 · 15/10/2026 — FICHA GT (selector de producto propio)
   Configurador por pasos + ticket flotante. Nada de la rejilla de HCC.
   ============================================================ */
.g-tag-s { position: static; display: inline-block; margin-top: 14px; }
.g-fhead { padding-block: 52px 40px; }
.g-fhead h1 { margin-top: 10px; }
/* 20/10/2026: los 3 datos (desde · sedes · validez) en paneles iguales y alineados */
.g-fdatos { display: grid; grid-template-columns: repeat(3, minmax(0, 168px)); gap: 12px; margin-top: 26px; }
.g-fdatos > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 13px; border-radius: 12px;
  background: rgba(20,22,25,.62); border: 1px solid rgba(255,255,255,.09); border-top: 2px solid var(--or);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); }
.g-fdatos b { display: block; font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--or-claro); }
.g-fdatos span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #B9BCC2; }

.g-cfg { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
.g-cfg-main { display: grid; gap: 22px; min-width: 0; }
.g-pasot { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.g-pasot h2 { font-size: clamp(26px, 3vw, 36px); }
.g-pasot .g-hito small { font-size: 8px; }

/* Paso 1: coches con foto */
.g-autos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g-auto { position: relative; display: grid; text-align: left; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; color: var(--fg); font: inherit;
  background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); transition: border-color .2s, box-shadow .2s, transform .2s; }
.g-auto:hover { border-color: rgba(217,83,14,.7); transform: translateY(-2px); }
.g-auto .ph { aspect-ratio: 16 / 9; overflow: hidden; }
.g-auto .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.7); transition: filter .3s; }
.g-auto .bd { display: grid; gap: 4px; padding: 14px 16px 16px; }
.g-auto .bd > b { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.05; }
.g-auto .sp { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.g-auto .ok { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #FFF3EA;
  background: linear-gradient(180deg, #D9530E, #9E3A08); box-shadow: 0 0 18px -2px var(--or-glow); opacity: 0; transform: scale(.6); transition: all .2s; }
.g-auto[aria-pressed="true"] { border-color: var(--or); box-shadow: var(--n1-sombra), 0 0 0 1px rgba(217,83,14,.45), 0 16px 40px -14px rgba(217,83,14,.75); }
.g-auto[aria-pressed="true"] .ph img { filter: none; }
.g-auto[aria-pressed="true"] .ok { opacity: 1; transform: none; }

/* Paso 2: carretera de km */
.g-rkm-box { padding: 18px 16px 6px; border-radius: 12px; background: var(--n2); border: 1px solid #33373C; box-shadow: var(--n2-sombra); }
.g-rkm { display: block; width: 100%; height: auto; overflow: visible; }
.g-rkm .asf { fill: none; stroke: #33373C; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.g-rkm .lin { fill: none; stroke: #8C9298; stroke-width: 2; stroke-dasharray: 10 12; opacity: .5; }
.g-rkm .prog { fill: none; stroke: var(--or); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .35s ease; filter: drop-shadow(0 0 6px rgba(217,83,14,.8)); }
.g-rkm .zona { fill: #8C9298; font-size: 14px; letter-spacing: .16em; font-weight: 700; }
.g-rkm .kmp { cursor: pointer; outline: none; }
.g-rkm .kmp .hit { fill: transparent; stroke: none; }
.g-rkm .kmp .u { font-size: 16px; font-weight: 600; }
.g-rkm .kmp circle:not(.hit) { fill: #24272B; stroke: #4A5057; stroke-width: 4; transition: all .2s; }
.g-rkm .kmp:hover circle:not(.hit), .g-rkm .kmp.pas circle:not(.hit) { stroke: var(--or); }
.g-rkm .kmp.on circle:not(.hit) { fill: var(--or); stroke: #FFB27A; filter: drop-shadow(0 0 8px rgba(217,83,14,.9)); }
.g-rkm .kmp:focus-visible circle:not(.hit) { stroke: #fff; }
.g-rkm .kmp .k { fill: var(--fg); font-family: var(--display); font-weight: 700; font-size: 32px; text-anchor: middle; }
.g-rkm .kmp .p { fill: #8C9298; font-size: 20px; font-weight: 600; text-anchor: middle; }
.g-rkm .kmp.on .p { fill: var(--or-claro); font-weight: 800; }
.g-rkm-ayuda { font-size: 14px; color: var(--muted); }
.g-rkm.denso .kmp .k { font-size: 27px; } .g-rkm.denso .kmp .p { font-size: 18px; }

/* Opciones DÚO / pareja: tramos con barra Corvette + Ferrari */
.g-tramos { display: grid; gap: 10px; }
.g-tramo { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-areas: "n bar p" "n s p"; align-items: center; gap: 6px 18px; text-align: left; cursor: pointer; font: inherit; color: var(--fg);
  padding: 14px 18px; border-radius: 12px; background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); transition: border-color .2s, box-shadow .2s; }
.g-tramo:hover { border-color: rgba(217,83,14,.7); }
.g-tramo .n { grid-area: n; font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.05; }
.g-tramo .bar { grid-area: bar; display: flex; gap: 3px; height: 8px; }
.g-tramo .bar i, .g-leyenda i { display: block; border-radius: 4px; }
.g-tramo .bar .c, .g-leyenda .c { background: linear-gradient(90deg, #3B82F6, #1E40AF); }
.g-tramo .bar .f, .g-leyenda .f { background: linear-gradient(90deg, #D9530E, #F7A56B); }
.g-tramo .s { grid-area: s; font-size: 13.5px; color: var(--muted); }
.g-tramo b { grid-area: p; font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--or-claro); }
.g-tramo[aria-pressed="true"] { border-color: var(--or); background: linear-gradient(180deg, rgba(217,83,14,.22), rgba(217,83,14,.06)), var(--n1); box-shadow: var(--n1-sombra), 0 0 0 1px rgba(217,83,14,.4), 0 14px 36px -16px rgba(217,83,14,.75); }
.g-leyenda { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.g-leyenda i { width: 22px; height: 6px; margin-left: 8px; }

/* Cupón por valor: vales */
.g-vales { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.g-ticket .btn { white-space: nowrap; }
.g-vale { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; cursor: pointer; font: inherit; color: var(--fg); padding: 16px 16px 14px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120px 80px at 100% 0%, rgba(217,83,14,.18), transparent 70%), var(--n1); border: 1px dashed #4A5057; box-shadow: var(--n1-sombra); transition: all .2s; }
.g-vale .m { position: absolute; right: 12px; top: 8px; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 30px; color: rgba(255,255,255,.07); }
.g-vale b { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: 1; }
.g-vale b small { font-size: 22px; margin-left: 3px; color: var(--muted); }
.g-vale .s { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-vale:hover { border-color: rgba(217,83,14,.7); }
.g-vale[aria-pressed="true"] { border-style: solid; border-color: var(--or); box-shadow: var(--n1-sombra), 0 0 0 1px rgba(217,83,14,.4), 0 14px 32px -14px rgba(217,83,14,.8); }
.g-vale[aria-pressed="true"] b { color: var(--or-claro); }
.g-otro { display: grid; gap: 6px; max-width: 320px; font-size: 14px; color: var(--muted); }
.g-otro input { font-size: 16px; color: var(--fg); background: var(--n2); box-shadow: var(--n2-sombra); border: 1px solid #3A3F45; border-radius: 10px; padding: 11px 12px; }

.g-notas { display: grid; gap: 8px; padding: 14px 18px; border-left: 3px solid var(--or); border-radius: 0 10px 10px 0; background: rgba(217,83,14,.06); font-size: 14.5px; color: var(--fg-soft, #C9CCCF); }
.g-notas li { list-style: none; }

/* Ticket flotante (nivel 3) */
.g-ticket { position: sticky; top: 96px; border-radius: 14px; overflow: hidden; background: var(--n1); border: 1px solid #3D4248; border-top-color: #555B62; box-shadow: var(--n3-sombra); }
.g-tk-ph { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.g-tk-ph img { width: 100%; height: 100%; object-fit: cover; }
.g-tk-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,14,0) 40%, rgba(36,39,43,1) 100%); }
.g-tk-ph .g-eye { position: absolute; left: 20px; bottom: 10px; z-index: 1; }
.g-tk-bd { display: grid; gap: 14px; padding: 6px 20px 20px; }
.g-tk-filas .fila { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed #3A3F45; font-size: 14.5px; }
.g-tk-filas .fila span { color: var(--muted); }
.g-tk-filas .fila b { text-align: right; font-weight: 600; }
.g-tk-tot { display: flex; justify-content: space-between; align-items: baseline; }
.g-tk-tot span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.g-tk-tot b { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1; color: var(--or-claro); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.g-tk-pago { font-size: 12.5px; color: var(--muted); text-align: center; }

/* Incluye · Dónde y cuándo */
.g-info3 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.g-info { padding: 26px; border-radius: 12px; background: var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra); min-width: 0; }
.g-info h2 { font-size: 30px; margin-bottom: 14px; }
.g-inc { display: grid; gap: 12px; }
.g-inc li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.g-inc svg { color: var(--or); margin-top: 2px; }
.g-donde { display: grid; }
.g-donde a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #3A3F45; color: var(--fg); }
.g-donde a:hover { color: var(--or-claro); }
.g-donde a > span { display: grid; }
.g-donde small { font-size: 13px; color: var(--muted); }
.g-donde b.prox { font-family: var(--display); font-size: 22px; font-weight: 700; white-space: nowrap; color: var(--or-claro); }

@media (max-width: 960px) {
  .g-cfg { grid-template-columns: 1fr; }
  .g-vales { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .g-ticket { position: static; }
  .g-info3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .g-autos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .g-auto .bd > b { font-size: 20px; }
  .g-auto .sp span:nth-child(2) { display: none; }
  .g-rkm-box { padding: 12px 6px 2px; }
  .g-rkm .zona { display: none; }
  .g-rkm .kmp .k { font-size: 46px; } .g-rkm .kmp .u { font-size: 24px; } .g-rkm .kmp .p { font-size: 31px; }
  .g-rkm .kmp .k { transform: translateY(-8px); } .g-rkm .kmp .p { transform: translateY(12px); }
  .g-rkm.denso .kmp .k { font-size: 34px; } .g-rkm.denso .kmp .u { font-size: 18px; } .g-rkm.denso .kmp .p { font-size: 24px; }
  .g-rkm .kmp circle:not(.hit) { stroke-width: 6; }
  .g-vales { grid-template-columns: 1fr 1fr; }
  .g-tramo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "bar bar" "s s"; padding: 14px; }
  .g-fdatos { gap: 8px; } .g-fdatos > div { padding: 12px 12px 11px; } .g-fdatos b { font-size: 26px; } .g-fdatos span { font-size: 10.5px; letter-spacing: .05em; }
}

/* 18/10/2026 — Contacto: el teléfono grande conserva el degradado del título (.h-m) */
.h-m .tel-link { color: inherit; }
/* 18/10/2026 — Calendario: ciudades en verde suave (elegida: verde intenso), como HCC v92 */
[data-page="calendario"] #cSede .opt {
  background: linear-gradient(180deg, rgba(30,122,69,.16), rgba(30,122,69,.05)), var(--n2);
  border-color: rgba(46,139,87,.45); box-shadow: var(--n2-sombra); }
[data-page="calendario"] #cSede .opt .s { color: #A7C9B3; }
[data-page="calendario"] #cSede .opt:hover { border-color: #2E8B57;
  background: linear-gradient(135deg, rgba(46,139,87,.38), rgba(46,139,87,.08)), var(--n2); }
[data-page="calendario"] #cSede .opt[aria-pressed="true"] { border-color: #3FAF6E;
  background: linear-gradient(180deg, rgba(46,139,87,.42), rgba(30,122,69,.16));
  box-shadow: 0 0 0 1px rgba(63,175,110,.35), 0 8px 20px -10px rgba(63,175,110,.9), inset 0 1px 0 rgba(255,255,255,.08); }

/* 18/10/2026 — WhatsApp: al pasar el ratón se enciende en verde (no en naranja) */
.btn.wa-btn:hover, .dudas-b .btn.ghost.wa-btn:hover { color: #fff; border-color: #2E8B57;
  background: linear-gradient(180deg, rgba(46,139,87,.40), rgba(46,139,87,.14));
  box-shadow: 0 0 0 1px rgba(46,139,87,.30), 0 10px 24px -12px rgba(46,139,87,.85); }
.site-footer .pie-ct.wa:hover, .mail-link.wa:hover { color: #3FAF6E; }
.site-footer .pie-ct.wa:hover svg, .mail-link.wa:hover svg { color: #3FAF6E; }
.mail-link.wa span { border-bottom-color: rgba(63,175,110,.35); }
.mail-link.wa:hover span { border-bottom-color: #3FAF6E; }
.mbar .wa:hover { box-shadow: 0 0 0 1px rgba(46,139,87,.35), 0 8px 20px -10px rgba(46,139,87,.85); }
/* 18/10/2026 — Regala kilómetros: la carretera muy oscura, solo como textura detrás del texto */
.g-banner .bd { background: linear-gradient(135deg, rgba(27,29,32,.84), rgba(20,22,25,.90)), url(../../img/textura_carretera.jpg) center 60% / cover no-repeat; }

/* 18/10/2026 — Portada: «Ver toda la flota» (desplegable con mosaico de 3 columnas) */
.g-flota { margin-top: 22px; }
.g-flota > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; border-radius: 10px;
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: #E7E8E9;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--n1); border: 1px solid #383C42; border-top-color: #4B5158; box-shadow: var(--n1-sombra);
  transition: border-color .25s, box-shadow .25s, color .25s; }
.g-flota > summary::-webkit-details-marker { display: none; }
.g-flota > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.g-flota[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.g-flota > summary:hover, .g-flota[open] > summary { color: #fff; border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(217,83,14,.3), 0 12px 30px -14px rgba(217,83,14,.7); }
.g-flota-n { font-family: var(--body, inherit); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.g-flota-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.g-flota-c { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; color: #fff; background: #111; border: 1px solid #383C42; box-shadow: var(--n1-sombra);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.g-flota-c img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g-flota-t { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 8px; padding: 26px 14px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.g-flota-t b { font-family: var(--display); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.g-flota-t small { font-size: 12px; color: var(--or-claro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.g-flota-c:hover { color: #fff; transform: translateY(-3px); border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(217,83,14,.35), 0 18px 44px -14px rgba(217,83,14,.7); }
.g-flota-c:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .g-flota-grid { grid-template-columns: 1fr 1fr; } .g-flota-t b { font-size: 15px; } }
@media (max-width: 440px) { .g-flota-grid { grid-template-columns: 1fr; } }

/* 19/10/2026 — Ruta DÚO a medida: dos barras de km (Ferrari naranja arriba, Corvette azul abajo) y total en vivo */
.g-barras { display: grid; gap: 18px; padding: 22px 22px 18px; border-radius: 12px; background: var(--n2); border: 1px solid #33373C; box-shadow: var(--n2-sombra); }
.g-barra { --col: linear-gradient(90deg, #D9530E, #F7A56B); --pulgar: #F7A56B; display: grid; gap: 8px; }
.g-barra-c { --col: linear-gradient(90deg, #1E40AF, #3B82F6); --pulgar: #60A5FA; }
.g-barra-cab { display: flex; justify-content: space-between; align-items: baseline; }
.g-barra-cab b { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; }
.g-barra-f .g-barra-cab b { color: var(--or-claro); } .g-barra-c .g-barra-cab b { color: #93C5FD; }
.g-barra input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 6px 0; border-radius: 7px; cursor: pointer; outline: none;
  background: var(--col) 0 0 / var(--p, 0%) 100% no-repeat, #33373C; box-shadow: inset 0 2px 5px rgba(0,0,0,.55); }
.g-barra input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pulgar); border: 3px solid #1B1D20; box-shadow: 0 2px 6px rgba(0,0,0,.6); transition: box-shadow .2s; }
.g-barra input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pulgar); border: 3px solid #1B1D20; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.g-barra input[type=range]:hover::-webkit-slider-thumb, .g-barra input[type=range]:active::-webkit-slider-thumb, .g-barra input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 16px var(--pulgar); }
.g-barra input[type=range]:hover::-moz-range-thumb, .g-barra input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 16px var(--pulgar); }
.g-barra-marcas { display: flex; justify-content: space-between; }
.g-barra-marcas button { width: 28px; padding: 2px 0; background: none; border: 0; color: #8C9298; font: 600 14px/1 var(--body, inherit); text-align: center; cursor: pointer; }
.g-barra-marcas button:hover { color: var(--fg); }
.g-barra-marcas button.on { color: var(--fg); font-weight: 800; }
.g-barras-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px dashed #3A3F45; }
.g-barras-tot span { color: var(--muted); font-size: 15px; }
.g-barras-tot b { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--or-claro); white-space: nowrap; }
@media (max-width: 480px) { .g-barras { padding: 18px 16px 14px; } .g-barras-tot b { font-size: 34px; } }
/* 19/10/2026 — Reservar: botón «Ambos (DÚO)» con las dos fotos y aviso de las 2 reservas */
.opt-grid.cars .opt.media.duo-btn .duo-ims { display: flex; }
.opt-grid.cars .opt.media.duo-btn .duo-ims img { width: 50%; min-width: 0; aspect-ratio: 8 / 9; object-fit: cover; }
.duo-nota { margin-top: 12px; }
.panel.duo-falta { border-color: var(--or); box-shadow: var(--n1-sombra), 0 0 0 1px rgba(217,83,14,.35); }

/* 19/10/2026 — Ticket: precio normal tachado en campaña (precio_tachado) */
.g-tk-tot .g-tk-precio { display: inline-flex; align-items: baseline; gap: 12px; letter-spacing: normal; text-transform: none; }
.g-tk-antes { font-family: var(--display); font-size: 26px; font-weight: 700; color: #8C9298; text-decoration: line-through; text-decoration-thickness: 2px; }

/* 19/10/2026 — Sedes: dibujo de la ciudad a la derecha del panel, desvaneciéndose hasta la mitad (Localizaciones y portada) */
.sede, .g-sede { position: relative; isolation: isolate; }
.sede .body, .g-sede > :not(.sede-sky) { position: relative; z-index: 1; }
.sede-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-repeat: no-repeat; background-position: right 24px bottom 18px; background-size: auto 82%;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 12%, transparent 50%); mask-image: linear-gradient(to left, #000 0%, #000 12%, transparent 50%);
  transition: opacity .3s; }
.sede:hover .sede-sky { opacity: .7; }
.g-sede { padding-bottom: 92px; }
.g-sede .sede-sky { opacity: .45; background-position: right 10px bottom 12px; background-size: auto 72px; -webkit-mask-image: linear-gradient(to left, #000 0%, #000 25%, transparent 75%); mask-image: linear-gradient(to left, #000 0%, #000 25%, transparent 75%); }
.g-sede:hover .sede-sky { opacity: .55; }
@media (max-width: 760px) { .sede .sede-sky { top: auto; height: 46%; background-size: auto 100%; background-position: right 12px bottom 10px; opacity: .35; } }

/* v109 HCC: la fila Coche / Ruta-Bautizo del calendario no era flex (los dos grupos se tocaban al apilarse) */
[data-page="calendario"] .cal-sede > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }

/* Reservar (19/10/2026): cabecera «Reserva tu experiencia» con la foto aérea del bosque (girada 90°: la carretera va de lado a lado).
   Antes: carretera de montaña (reservar_carretera.jpg).
   Escritorio: texto a la izquierda y foto a la derecha fundida con el fondo (los coches no quedan bajo el texto).
   Móvil: la foto de fondo, oscurecida. */
[data-page="reservar"] .page-head {
  position: relative; margin-top: 24px; padding: 44px 40px 40px; border-radius: 16px; overflow: hidden;
  background: #17191C; border: 1px solid rgba(255,255,255,.06);
}
[data-page="reservar"] .page-head::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 54%;
  background: url('../../img/reservar_bosque.jpg') 50% 48% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
[data-page="reservar"] .page-head > * { position: relative; z-index: 1; max-width: 56%; }
[data-page="reservar"] .page-head .lead { text-shadow: 0 1px 10px rgba(0,0,0,.6); }
@media (max-width: 760px) {
  [data-page="reservar"] .page-head { padding: 32px 22px 28px; }
  [data-page="reservar"] .page-head::after {
    width: 100%; opacity: .35;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 100%);
  }
  [data-page="reservar"] .page-head > * { max-width: none; }
}

/* Mi cuenta · Tus compras (20/10/2026): tarjeta de cupón con «ticket» del código (grande, en amarillo) */
.com-cupon { gap: 12px; padding: 16px 18px 16px 20px; border-radius: 12px; border-left: 4px solid var(--or);
  background: linear-gradient(135deg, #272A2F 0%, #1D1F23 100%); }
.com-fila { align-items: center; gap: 12px 20px; }
.com-tit { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.com-tit b { font-size: 19px; letter-spacing: .01em; }
.com-ticket { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 16px;
  border: 1px dashed rgba(255,210,74,.5); border-radius: 10px; background: rgba(255,210,74,.07); }
.com-et { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #B9BCC2; }
.com-cod { font-size: 24px; font-weight: 700; letter-spacing: .07em; color: #FFD24A; line-height: 1.2; }
.com-regalo { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 8px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.com-cupon .res-acciones { flex-wrap: wrap; }
@media (max-width: 600px) { .com-ticket { align-items: flex-start; width: 100%; } .com-cod { font-size: 22px; } }

/* Reservar · DÚO con las dos horas a la vez (20/10/2026): panel del Corvette (azul) y del Ferrari (naranja) */
.km-duo-tit { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #B9BCC2; }
.km-duo-tit b { color: var(--fg); }
.km-duo-f { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(217,83,14,.07); border: 1px solid rgba(217,83,14,.28); }
.duo-cal.duo-on, .duo-cal.duo-f { margin-top: 14px; padding: 16px 18px; border-radius: 14px; }
.duo-cal.duo-c.duo-on { background: rgba(86,140,235,.07); border: 1px solid rgba(86,140,235,.32); border-left: 4px solid #5B8DEF; }
.duo-cal.duo-f { background: rgba(217,83,14,.07); border: 1px solid rgba(217,83,14,.30); border-left: 4px solid var(--or); }
.duo-cal-t { margin: 0 0 12px; font-family: var(--display); font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }
.duo-c .duo-cal-t span { color: #8FB3F5; }
.duo-f .duo-cal-t span { color: var(--or-claro); }
.duo-conv { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--or-claro); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.duo-res { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px dashed rgba(255,255,255,.14); }
.duo-sal { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.duo-sal span { color: #B9BCC2; font-size: 14px; }
.duo-sal b { font-size: 17px; }
.duo-sal.c b { color: #8FB3F5; }
.duo-sal.f b { color: var(--or-claro); }
.duo-res p { margin: 0; }
.ticket.ticket-2 { margin-top: 16px; }

/* Mi cuenta (20/10/2026, como HCC v113): chip de estado del cupón y caducados en gris · Reservar: aviso «Hemos rellenado tu cupón» */
.com-chip { margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.com-chip.lib { color: #FFD24A; background: rgba(255,210,74,.12); border: 1px solid rgba(255,210,74,.35); }
.com-chip.res { color: #6EE7A0; background: rgba(46,160,90,.14); border: 1px solid rgba(46,160,90,.4); }
.com-chip.cad { color: #A1A1AA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.com-cupon.caducado { border-left-color: #52525B; filter: grayscale(.9); opacity: .75; }
.com-cupon.caducado .com-cod { color: #A1A1AA; }
.panel.cupon-previo { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-left: 4px solid #2E8B57; background: rgba(46,139,87,.10); }
.panel.cupon-previo p { margin: 0; }
.panel.cupon-previo svg { flex: 0 0 auto; width: 22px; height: 22px; color: #6EE7A0; }

/* Mi cuenta · Cambiar fecha a OTRA CIUDAD (20/10/2026): sedes con el color del programa, calendario TODAS y aviso de cambio de lugar */
/* 20/10/2026 (como HCC v118, en el naranja de GT): «Quiero cambiar de ciudad» bien visible, se enciende al marcarlo */
.cambio-ciudad { margin: 6px 0 12px; padding: 12px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(217,83,14,.6); border-left: 4px solid var(--or);
  background: linear-gradient(90deg, rgba(217,83,14,.22), rgba(217,83,14,.05) 75%); transition: box-shadow .2s, background .2s; }
.cambio-ciudad:hover { background: linear-gradient(90deg, rgba(217,83,14,.32), rgba(217,83,14,.08) 75%); }
.cambio-ciudad b { color: var(--or-claro); font-size: 16px; letter-spacing: .02em; }
.cambio-ciudad .muted { color: #E9C2A8; }
.cambio-ciudad input { accent-color: var(--or); width: 20px; height: 20px; }
.cambio-ciudad:has(input:checked) { border-color: var(--or); box-shadow: 0 0 0 1px rgba(217,83,14,.35), 0 8px 22px -12px rgba(217,83,14,.9); }
.ciu-sel { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0 0 14px; }
.ciu-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--n2, #24272B); color: var(--fg); border: 1px solid #3A3F45; border-left: 5px solid var(--ciu, #6B7280); text-align: left; font: inherit; }
.ciu-btn b { font-family: var(--display); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.ciu-btn span { font-size: 11px; color: #B9BCC2; letter-spacing: .04em; }
.ciu-btn.todas { --ciu: var(--or); }
.ciu-btn[aria-pressed="true"] { border-color: var(--or); box-shadow: 0 0 0 2px rgba(217,83,14,.45); background: rgba(217,83,14,.14); }
.ciu-btn.no, .ciu-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.8); }
.cal-ciudades .day.ciu { color: #111 !important; font-weight: 700; border: 0; }
.cal-ciudades .day.ciu.sel { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.ciu-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 4px; font-size: 13px; color: #D4D4D8; }
.ciu-leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.dia-ciudades { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.dia-ciudades p { margin: 0; width: 100%; font-weight: 600; }
.dia-ciudades .ciu-btn { padding: 8px 14px; }
.aviso-lugar { margin: 12px 0; padding: 12px 16px; border-radius: 10px; background: rgba(217,83,14,.10); border: 1px solid rgba(217,83,14,.35); border-left: 4px solid var(--or); }
.aviso-lugar > b { color: var(--or-claro); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.aviso-lugar p { margin: 6px 0 0; }

/* 20/10/2026 (como HCC v118): nueva ciudad destacada con su color y leyenda que se enciende con el día elegido */
.aviso-lugar-de { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px !important; }
.ciu-vieja { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.ciu-flecha { color: var(--or-claro); font-weight: 800; }
.ciu-nueva { display: inline-block; padding: 3px 10px; border-radius: 6px; font-weight: 800; color: #141414; background: var(--ciu, #3FAF6E);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 6px 16px -8px var(--ciu, #3FAF6E); }
.ciu-leyenda span { transition: opacity .25s, color .25s, text-shadow .25s; }
.ciu-leyenda.con-dia span { opacity: .4; }
.ciu-leyenda.con-dia span.on { opacity: 1; color: var(--ciu); text-shadow: 0 0 12px var(--ciu); }
.ciu-leyenda span.on i { box-shadow: 0 0 10px var(--ciu); }

/* 20/10/2026 · Reservar paso 3: primero el vehículo y debajo los km. En el DÚO, km del Corvette (azul) y del Ferrari (naranja) en dos paneles iguales */
.paso-sub { margin: 18px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B9BCC2; display: flex; align-items: center; gap: 10px; }
.paso-sub b { color: var(--fg); }
.paso-sub img { width: 46px; height: 30px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.km-box { margin-top: 6px; }
.km-box.km-duo-c, .km-box.km-duo-f { margin-top: 16px; padding: 4px 18px 18px; border-radius: 14px; }
.km-box.km-duo-c { background: rgba(86,140,235,.07); border: 1px solid rgba(86,140,235,.32); border-left: 4px solid #5B8DEF; }
.km-box.km-duo-f { background: rgba(217,83,14,.07); border: 1px solid rgba(217,83,14,.30); border-left: 4px solid var(--or); }
.km-duo-c .paso-sub { color: #8FB3F5; font-family: var(--display); font-size: 18px; letter-spacing: .03em; }
.km-duo-f .paso-sub { color: var(--or-claro); font-family: var(--display); font-size: 18px; letter-spacing: .03em; }
.km-duo-c .paso-sub b, .km-duo-f .paso-sub b { color: inherit; }
.km-duo-c .opt[aria-pressed="true"] { border-color: #5B8DEF; background: rgba(86,140,235,.22); box-shadow: 0 0 0 1px #5B8DEF inset; }

/* 20/10/2026 · «Resumen de tu reserva» del final: panel propio (base cálida), título amarillo con sombra, ciudad en amarillo y cada coche con su color.
   Colores de coche iguales que en los km y calendarios del DÚO: Corvette azul, Ferrari naranja (cambiar aquí si se quieren al revés) */
.resumen-final { --rf-c: #8FB3F5; --rf-c-bg: rgba(86,140,235,.14); --rf-f: #F7A56B; --rf-f-bg: rgba(217,83,14,.16); --rf-ciu: #FFD24A;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,210,74,.10), transparent 55%), linear-gradient(160deg, #2A2318 0%, #1E1D1F 60%, #1A1A1D 100%);
  border: 1px solid rgba(255,210,74,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 24px 50px -28px rgba(255,170,40,.45); }
.resumen-final .rf-tit { color: var(--rf-ciu); font-size: 30px; letter-spacing: .03em; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 22px rgba(255,190,40,.45); margin-bottom: 6px; }
.rf-datos { display: flex; flex-direction: column; margin: 4px 0 14px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); }
.rf-fila { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.rf-fila:last-child { border-bottom: 0; }
.rf-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A9A196; }
.rf-v { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; text-align: right; font-size: 16px; color: var(--fg); }
.rf-ciu { color: var(--rf-ciu); font-size: 19px; letter-spacing: .02em; text-shadow: 0 0 14px rgba(255,200,60,.35); }
.rf-sub { color: var(--muted); font-size: 14px; }
.rf-coche { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 8px; }
.rf-coche.rf-c { background: var(--rf-c-bg); box-shadow: inset 3px 0 0 var(--rf-c); }
.rf-coche.rf-f { background: var(--rf-f-bg); box-shadow: inset 3px 0 0 var(--rf-f); }
.rf-coche.rf-c > b:first-child, .rf-c-txt { color: var(--rf-c); }
.rf-coche.rf-f > b:first-child, .rf-f-txt { color: var(--rf-f); }
.rf-v .rf-c-txt, .rf-v .rf-f-txt { font-size: 18px; }
.rf-falta { color: #8E8A84; font-style: italic; font-weight: 400; }
@media (max-width: 560px) {
  .resumen-final .rf-tit { font-size: 24px; }
  .rf-fila { grid-template-columns: 1fr; gap: 6px; padding: 11px 14px; }
  .rf-v { justify-content: flex-start; text-align: left; }
}

/* 20/10/2026 · Franja horaria «Completa» (Mañana/Tarde sin horas): en rojo con un ligero brillo (antes gris apagado que casi no se veía) */
.tramo-full { display: inline-block; color: #FF6B6B; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid rgba(255,77,77,.65); background: rgba(229,57,53,.12);
  text-shadow: 0 0 10px rgba(255,77,77,.55); box-shadow: 0 0 14px -4px rgba(255,60,60,.6), inset 0 0 12px -6px rgba(255,60,60,.5); }

/* 20/10/2026 · Reservar paso 5 (Piloto): foto del box en modo textura arriba a la derecha; se funde hacia la izquierda (como «Reserva tu experiencia») y por abajo, un poco por debajo de «Es un regalo» */
.panel-piloto { position: relative; overflow: hidden; }
.panel-piloto::before {
  content: ""; position: absolute; top: 0; right: 0; width: 62%; height: 200px; pointer-events: none; opacity: .85;
  background: url('../../img/reservar_piloto_box.jpg?v=4') 100% 50% / cover no-repeat;   /* invertida: cascos a la derecha, coche a la izquierda (se funde) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 70%), linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 70%), linear-gradient(180deg, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.panel-piloto > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .panel-piloto::before { width: 100%; height: 190px; opacity: .3; } }

/* 20/10/2026 · Ficha de experiencia: textura en todo el panel «Incluye» con la misma atenuación en todo el panel.
   Foto y atenuación por producto en data.js (imgIncluye) → --inc-img y --inc-velo (0 = foto tal cual, 1 = negro) */
.panel-incluye { position: relative; overflow: hidden; }
.panel-incluye::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--inc-img) 50% 50% / cover no-repeat;
}
.panel-incluye::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: #111214; opacity: var(--inc-velo, .55);
}
.panel-incluye > * { position: relative; z-index: 1; }
.panel-incluye .g-inc li { text-shadow: 0 1px 6px rgba(0,0,0,.8); }

/* 20/10/2026 · Portada nueva (portada_noche_sucios.jpg): encuadre más a la derecha para que el texto
   quede sobre el edificio y la trasera del amarillo, y un poco más de sombra detrás del texto */
.g-hfondo { object-position: 82% 62%; }
.g-hero::after { background: radial-gradient(70% 62% at 14% 26%, rgba(8,8,9,.68) 0%, rgba(8,8,9,0) 72%), linear-gradient(180deg, rgba(8,8,9,0) 82%, rgba(8,8,9,.55) 100%); }
@media (min-width: 1400px) {
  .g-hero::after { background: radial-gradient(46% 62% at 28% 32%, rgba(8,8,9,.68) 0%, rgba(8,8,9,0) 74%), linear-gradient(180deg, rgba(8,8,9,0) 82%, rgba(8,8,9,.55) 100%); }
}
@media (max-width: 760px) { .g-hfondo { object-position: 70% 62%; } }