/* ============================================================
   AUTOS COSTA DEL SOL — Rediseño "Lujo refinado"
   Re-skin condicional. Todo scopeado bajo body.redesign-on.
   No modifica markup ni lógica; solo presentación.
   ============================================================ */

body.redesign-on{
  --ink:#0F1822; --slate:#1A2430; --slate-2:#242C32;
  --gold:#D3AD66; --gold-soft:#E4C98A;
  --mist:#DBE3EE; --paper:#F6F4EF; --white:#fff;
  --line:rgba(211,173,102,.25);
  --line-strong:rgba(211,173,102,.55);
  --shadow:0 18px 50px -20px rgba(0,0,0,.6);
  --radius:14px;
  --ease:cubic-bezier(.4,.0,.2,1);
}

/* ---------- Base ---------- */
body.redesign-on{
  background:var(--ink);
  color:var(--mist);
  font-family:'gotham',-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.redesign-on .container{max-width:1200px;}
body.redesign-on a{color:var(--gold); transition:color .2s var(--ease);}
body.redesign-on a:hover{color:var(--gold-soft);}
body.redesign-on img{max-width:100%;}

/* ---------- Tipografía ---------- */
body.redesign-on h1{
  font-weight:600; line-height:1.05; letter-spacing:-1px; color:var(--white);
  font-size:clamp(2.4rem,5vw,4.5rem); margin:0 0 .4em;
}
body.redesign-on h2{
  font-weight:600; line-height:1.15; color:var(--white);
  font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 .6em;
}
body.redesign-on h3{font-weight:600; color:var(--white);}
body.redesign-on .eyebrow,
body.redesign-on .box-content .content-before > span,
body.redesign-on .eyebrow-auto{
  display:inline-block; font-size:.8rem; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem;
}
body.redesign-on p{color:var(--mist); font-size:1.05rem;}

/* ---------- Botones ---------- */
body.redesign-on .btn-gold,
body.redesign-on button[type="submit"].btn-gold,
body.redesign-on .btn-gold:link{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--gold); color:var(--ink)!important; border:0;
  font-weight:600; letter-spacing:.3px; text-transform:none;
  padding:.95em 1.8em; border-radius:999px; cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(211,173,102,.8);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
body.redesign-on .btn-gold:hover{
  background:var(--gold-soft); transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(211,173,102,.9);
}
body.redesign-on .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--gold)!important;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:.85em 1.6em; font-weight:600; transition:.2s var(--ease);
}
body.redesign-on .btn-outline:hover{border-color:var(--gold); background:rgba(211,173,102,.08);}

/* ---------- Header / nav ---------- */
body.redesign-on .header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0; background:transparent;
  transition:background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
body.redesign-on .header.scrolled{
  background:var(--slate); padding:.55rem 0;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
}
body.redesign-on .header .logo{max-height:46px; width:auto;}
body.redesign-on .header .navbar,
body.redesign-on .header .navbar-default{background:transparent!important; border:0!important; margin:0;}
body.redesign-on .header .nav > li > a{
  color:var(--mist)!important; font-weight:500; letter-spacing:.3px;
  background:transparent!important; transition:color .2s var(--ease);
}
body.redesign-on .header .nav > li > a:hover{color:var(--gold)!important;}
body.redesign-on .header .language{
  display:inline-flex; align-items:center; gap:.4em;
  border:1px solid var(--line); border-radius:999px; padding:.35em .8em!important;
}
body.redesign-on .header .language img{height:14px; border-radius:2px;}
body.redesign-on .menu-toggle .icon-bar,
body.redesign-on .menu-toggle span{background:var(--gold)!important;}

/* ---------- Secciones genéricas ---------- */
body.redesign-on .box-content{padding:6rem 0; position:relative;}
body.redesign-on .box-content.box-services{background:var(--paper);}
body.redesign-on .box-content.box-services h2,
body.redesign-on .box-content.box-services h3{color:var(--slate);}
body.redesign-on .box-content.box-services p{color:#4D5F75;}

/* ---------- Hero ---------- */
body.redesign-on .box-header{
  min-height:88vh; display:flex; align-items:center;
  padding:8rem 0 4rem; background-size:cover!important; background-position:center!important;
  position:relative; color:var(--white);
}
body.redesign-on .box-header::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(15,24,34,.92) 0%, rgba(15,24,34,.72) 45%, rgba(15,24,34,.25) 100%);
}
body.redesign-on .box-header .overlay_black{display:none;}
body.redesign-on .box-header .container{position:relative; z-index:2;}
body.redesign-on .box-header h1{
  font-size:clamp(1.85rem,3.2vw,3rem); max-width:22ch; letter-spacing:-.4px;
}
body.redesign-on .box-header h2{
  color:var(--mist); font-weight:400; font-size:clamp(1.05rem,2vw,1.4rem);
  max-width:46ch; margin-bottom:2.2rem;
}

/* Widget de reserva (form-location) elevado */
body.redesign-on .destination-form{
  background:var(--slate-2); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow);
  max-width:760px;
}
body.redesign-on .destination-form .box-form{
  display:flex; gap:.8rem; flex-wrap:wrap; align-items:stretch;
}
body.redesign-on .destination-form .form-control{
  flex:1 1 200px; min-width:160px; margin:0;
}
body.redesign-on .destination-form .btn-gold{flex:0 0 auto; white-space:nowrap;}

/* ---------- Inputs / selects ---------- */
body.redesign-on .form-control{
  background:var(--ink); color:var(--white);
  border:1px solid var(--line); border-radius:10px;
  height:auto; padding:.85em 1em; box-shadow:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.redesign-on select.form-control{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.4em;
}
body.redesign-on .form-control::placeholder{color:rgba(219,227,238,.5);}
body.redesign-on .form-control:focus{
  border-color:var(--gold); outline:none;
  box-shadow:0 0 0 3px rgba(211,173,102,.18);
}

/* ---------- Cards de vehículo / tarifa ---------- */
body.redesign-on .box-vehicle,
body.redesign-on .select-vehicle-card,
body.redesign-on .box-fare,
body.redesign-on .box-car{
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 12px 34px -22px rgba(0,0,0,.7);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  overflow:hidden;
}
body.redesign-on .box-fare{background:var(--white); border-color:rgba(26,36,48,.1);}
body.redesign-on .box-vehicle:hover,
body.redesign-on .select-vehicle-card:hover,
body.redesign-on .box-car:hover,
body.redesign-on .box-fare:hover{
  transform:translateY(-4px); border-color:var(--line-strong);
  box-shadow:var(--shadow);
}
body.redesign-on .select-vehicle-card{padding:1.4rem; cursor:pointer;}
body.redesign-on .title-vehicle p,
body.redesign-on .box-vehicle .title-vehicle{color:var(--white); font-weight:600; font-size:1.25rem;}
body.redesign-on .vehicle-price,
body.redesign-on .price-box h3,
body.redesign-on .box-fare .price,
body.redesign-on .list-price span{
  color:var(--gold)!important; font-weight:600;
  font-size:clamp(1.8rem,3vw,2.4rem); line-height:1;
}
body.redesign-on .box-fare h4{color:var(--slate);}
body.redesign-on .box-fare .list-price strong{color:var(--slate);}
body.redesign-on .box-vehicle ul li,
body.redesign-on .select-vehicle-card ul li{color:var(--mist);}
body.redesign-on .box-vehicle ul li img,
body.redesign-on .select-vehicle-card ul li img{filter:brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(450%) hue-rotate(2deg);}

/* ---------- Precios (sección oscura cohesiva) ---------- */
body.redesign-on .box-prices{
  position:relative; background:var(--slate)!important;
  background-size:cover!important; background-position:center!important;
  padding-bottom:7rem!important;
}
body.redesign-on .box-prices::before{
  content:""; position:absolute; inset:0; background:rgba(15,24,34,.88); z-index:0;
}
body.redesign-on .box-prices > .container{position:relative; z-index:1;}
body.redesign-on .box-prices h3{color:var(--white)!important;}
body.redesign-on .box-prices h4{color:var(--gold)!important; font-weight:600;}
body.redesign-on .box-fare{
  background:var(--slate-2)!important;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.7)!important;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem 1.8rem 3rem!important; text-align:center;
  overflow:visible!important; margin-bottom:30px;
}
body.redesign-on .box-fare h4{color:var(--white)!important; font-weight:700; font-size:1.15rem;}
body.redesign-on .box-fare h5{color:var(--mist)!important;}
body.redesign-on .box-fare .list-price:before{background:var(--line-strong)!important;}
body.redesign-on .box-fare .list-price li{color:var(--mist)!important; font-size:1rem; line-height:2.1;}
body.redesign-on .box-fare .list-price li strong{color:var(--white)!important; float:left;}
body.redesign-on .box-fare .list-price li span{
  color:var(--gold)!important; font-weight:600; font-size:1.15rem!important;
  float:right; line-height:inherit;
}
body.redesign-on .box-fare .list-price li small{color:var(--mist)!important; display:block; clear:both; text-align:right;}
/* botón de tarifa: centrar correctamente el pill (legacy asumía ancho fijo) */
body.redesign-on .box-fare .btn-gold{
  left:50%!important; right:auto!important; margin-left:0!important;
  transform:translateX(-50%); bottom:-22px!important; min-width:160px;
}
body.redesign-on .box-fare .btn-gold:hover{transform:translateX(-50%) translateY(-2px);}

/* ---------- Partners ---------- */
body.redesign-on .box-partners img{filter:grayscale(1) brightness(1.6) opacity(.6); transition:.3s var(--ease);}
body.redesign-on .box-partners img:hover{filter:none; opacity:1;}

/* ---------- Footer ---------- */
body.redesign-on footer,
body.redesign-on .footer{background:var(--ink); color:var(--mist); padding:4rem 0 2rem;}
body.redesign-on footer a{color:var(--mist);}
body.redesign-on footer a:hover{color:var(--gold);}

/* ============================================================
   WIZARD
   ============================================================ */
body.redesign-on .page-steps{background:var(--ink);}
body.redesign-on .page-steps .box-header{min-height:auto; padding:7rem 0 3rem;}
body.redesign-on .page-steps .box-header::before{display:none;}

/* Barra de pasos — alta especificidad para vencer el CSS legacy */
body.redesign-on .page-steps .box-content .nav-steps{
  border:0!important; background:transparent!important;
  display:flex!important; justify-content:center; gap:0;
  list-style:none; padding:0!important; margin:0 auto 3rem!important;
  max-width:820px; position:relative; flex-wrap:nowrap;
}
body.redesign-on .page-steps .nav-steps > li{
  width:auto!important; flex:1 1 0; position:relative;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0;
}
/* matar el divisor vertical legacy (las líneas que disparaban) */
body.redesign-on .page-steps .nav-steps > li:after{
  display:none!important; border:0!important;
}
/* conector horizontal fino entre pasos */
body.redesign-on .page-steps .nav-steps > li:not(:last-child)::before{
  content:""!important; position:absolute; z-index:0;
  top:50%; left:calc(50% + 16px); right:calc(-50% + 16px); height:1px;
  background:var(--line); display:block;
}
body.redesign-on .page-steps .nav-steps > li > a{
  color:var(--mist)!important; opacity:.5; font-weight:600;
  font-size:.95rem; letter-spacing:.3px; line-height:1.3;
  display:inline-flex; align-items:center; gap:.55em;
  position:relative; z-index:1; background:none!important; border:0!important;
}
/* restilar el círculo legacy (a:before) como dot fino */
body.redesign-on .page-steps .nav-steps > li > a:before{
  width:12px!important; height:12px!important;
  left:0!important; top:0!important; margin:0!important;
  border:1.5px solid var(--line-strong)!important;
  background:var(--ink)!important; box-shadow:none;
}
body.redesign-on .page-steps .nav-steps > li.active > a,
body.redesign-on .page-steps .nav-steps > li.current > a{
  opacity:1; color:var(--white)!important;
}
body.redesign-on .page-steps .nav-steps > li.active > a:before,
body.redesign-on .page-steps .nav-steps > li.current > a:before{
  background:var(--gold)!important; border-color:var(--gold)!important;
  box-shadow:0 0 0 4px rgba(211,173,102,.18)!important;
}
/* matar el check-icon legacy que se superponía */
body.redesign-on .page-steps .nav-steps > li.active > a:after{display:none!important;}

/* Toggle ida / ida-vuelta como pills */
body.redesign-on .trip-type{display:inline-flex; gap:.4rem; background:var(--slate-2); border:1px solid var(--line); border-radius:999px; padding:.3rem; margin:1.2rem 0 2rem;}
body.redesign-on .trip-type label{
  margin:0; padding:.55em 1.3em; border-radius:999px; cursor:pointer;
  color:var(--mist); font-weight:600; transition:.2s var(--ease); display:flex; align-items:center; gap:.4em;
}
body.redesign-on .trip-type input{position:absolute; opacity:0; width:0; height:0;}
body.redesign-on .trip-type label:has(input:checked){background:var(--gold); color:var(--ink);}

/* Selección de vehículo (paso 1) */
body.redesign-on .wizard-route{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:.5rem;}
body.redesign-on .route-summary{color:var(--mist);}
body.redesign-on .price-box{padding:1rem 1.2rem; text-align:center;}
body.redesign-on .price-box h4{color:var(--mist); font-size:.85rem; text-transform:uppercase; letter-spacing:1.5px;}

/* Paso 2: detalles + resumen */
body.redesign-on #details, body.redesign-on #payment{animation:ac-fade .4s var(--ease);}
body.redesign-on .box-form{background:var(--slate-2); border:1px solid var(--line); border-radius:var(--radius); padding:2rem;}
body.redesign-on .sidebar-details{
  background:var(--slate-2); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:1.6rem; position:sticky; top:90px;
}
/* matar las decoraciones legacy: tarjeta blanca (:before) y esquina gradiente (:after) */
body.redesign-on .page-steps .sidebar-details:before{
  background-color:var(--slate-2)!important; box-shadow:none!important; border-radius:var(--radius);
}
body.redesign-on .page-steps .sidebar-details:after{display:none!important;}
body.redesign-on .page-steps .sidebar-details .content h2,
body.redesign-on .page-steps .sidebar-details .content{color:var(--mist)!important;}
body.redesign-on .page-steps .sidebar-details .content h2{color:var(--white)!important;}
body.redesign-on .sidebar-details .price{color:var(--gold); font-size:2rem; font-weight:600;}
body.redesign-on .sidebar-details .details li{color:var(--mist); border-bottom:1px solid var(--line); padding:.5em 0;}
body.redesign-on .sidebar-details .details strong{color:var(--white);}

/* Extras como chips */
body.redesign-on .checkbox.form-control,
body.redesign-on .extra-seat .checkbox,
body.redesign-on .extra-disabled .checkbox{
  background:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:.5em 1em; display:inline-flex; align-items:center; gap:.5em; color:var(--mist);
}

/* Paso 3: métodos de pago como cards */
body.redesign-on .radio.form-control{
  background:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:1em 1.2em; cursor:pointer; color:var(--mist); transition:.2s var(--ease);
  display:flex; align-items:center; gap:.6em; margin:0;
}
body.redesign-on .radio.form-control:has(input:checked){border-color:var(--gold); background:rgba(211,173,102,.08); color:var(--white);}
body.redesign-on .checkbox.terms{color:var(--mist);}
body.redesign-on .checkbox.terms a{color:var(--gold); text-decoration:underline;}

/* Validación */
body.redesign-on .has-error,
body.redesign-on .form-control.has-error{
  border-color:#E2725B!important; box-shadow:0 0 0 3px rgba(226,114,91,.15)!important;
}

/* Modal Redsys */
body.redesign-on #modalPayment .modal-content,
body.redesign-on #modal-other .modal-content{
  background:var(--slate); border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--mist);
}
body.redesign-on #modalPayment .modal-title,
body.redesign-on #modal-other .modal-title{color:var(--white);}
body.redesign-on .modal-price{color:var(--gold); font-size:2.2rem; font-weight:600; text-align:center; margin:1rem 0;}

/* ---------- Animación fade-up ---------- */
@keyframes ac-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
body.redesign-on .ac-reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
body.redesign-on .ac-reveal.in-view{opacity:1; transform:none;}

/* ---------- Scroll-down indicador ---------- */
body.redesign-on .ac-scrolldown{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:2px solid var(--line-strong); border-radius:14px; cursor:pointer;
}
body.redesign-on .ac-scrolldown::after{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:var(--gold); border-radius:2px; animation:ac-scroll 1.6s infinite;
}
@keyframes ac-scroll{0%{opacity:0; top:8px;}40%{opacity:1;}80%{opacity:0; top:20px;}100%{opacity:0;}}

/* ============================================================
   PÁGINA "Elegí tu ruta" (order-route.php / .page-calculate)
   Reusa .box-header pero con layout CENTRADO (no el hero del home).
   ============================================================ */
body.redesign-on .page-calculate .box-header{
  min-height:78vh; text-align:center; padding:9rem 0 5rem;
}
/* overlay simétrico/vertical (no lateral) para contenido centrado */
body.redesign-on .page-calculate .box-header::before{
  background:linear-gradient(180deg, rgba(15,24,34,.86) 0%, rgba(15,24,34,.6) 50%, rgba(15,24,34,.86) 100%);
}
body.redesign-on .page-calculate .box-header h1{
  margin-left:auto; margin-right:auto; max-width:18ch;
}
body.redesign-on .page-calculate .box-header h2{
  margin-left:auto; margin-right:auto; color:var(--mist); font-weight:400;
}
body.redesign-on .page-calculate .content-before{margin-bottom:2.2rem;}
/* widget de ruta centrado y protagonista */
body.redesign-on .page-calculate .form-header{
  display:flex; justify-content:center; margin-top:.5rem;
}
body.redesign-on .page-calculate .destination-form{
  margin:0 auto; width:100%; max-width:760px;
}
/* texto inferior */
body.redesign-on .page-calculate .content h2{
  color:var(--mist); font-weight:400; font-size:clamp(1.05rem,2vw,1.35rem);
  margin-top:2.5rem;
}
/* sin indicador scroll-down en esta página (una sola sección) */
body.redesign-on .page-calculate .ac-scrolldown{display:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  body.redesign-on .box-content{padding:4rem 0;}
  body.redesign-on .box-header{min-height:auto; padding:7rem 0 3rem;}
  body.redesign-on .destination-form .box-form{flex-direction:column;}
  body.redesign-on .destination-form .form-control,
  body.redesign-on .destination-form .btn-gold{width:100%; flex:1 1 auto;}
  body.redesign-on .nav-steps li{padding:0 1rem;}
  body.redesign-on .sidebar-details{position:static; margin-top:1.5rem;}
}
@media (max-width:480px){
  body.redesign-on{font-size:15px;}
  body.redesign-on .box-form{padding:1.2rem;}
  body.redesign-on .nav-steps{gap:0;}
  body.redesign-on .nav-steps li a span,
  body.redesign-on .nav-steps li a{font-size:.85rem;}
}