/* ============================================================================
   Portada moderna (index.php). Va despues de moderno-sitio.css (cabecera, menu,
   pie, botones y campos). Los formularios de reserva (step1..step333) y sus ids
   siguen siendo los mismos que usa js/amdViva.js.
   Prioridad al formulario: hero compacto, tarjeta de reserva a la vista al entrar,
   indicador de pasos y columna derecha para los vehiculos (sin carrusel).
   ============================================================================ */

/* ---------- Hero compacto ---------- */
.ol-hero { background: url(../images/miami_skyline.jpg) center 35% / cover no-repeat; box-shadow: inset 0 0 0 2000px rgba(15, 42, 74, .85); color: #fff; }
.ol-hero-in { padding-top: 28px; padding-bottom: 112px; }
.ol-eyebrow { margin: 0 0 6px; color: var(--ol-accent); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.ol-hero-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.4px; color: #fff; }

/* ---------- Contenido principal ---------- */
.wrapper.ol-main { width: auto; max-width: var(--ol-max); margin: -92px auto 0; padding: 0 16px; box-sizing: border-box; position: relative; }
.ol-cart { display: flex; justify-content: flex-end; gap: 12px; min-height: 0; }
.ol-cart > div:not([style*="none"]) { margin-bottom: 6px; }
.ol-cart .letraSessionVinculo, .ol-cart .letraSessionVinculoRed { color: #fff !important; font-weight: 600; cursor: pointer; }

/* ---------- Tarjeta de reserva (envuelve los pasos 1 a 4) ---------- */
.ol-home #contenidos { width: auto !important; box-sizing: border-box; background: var(--ol-card); border-top: 3px solid var(--ol-accent); box-shadow: var(--ol-shadow); padding: 0 28px 28px; overflow-x: auto; }
.ol-booking-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 -28px 24px; padding: 18px 28px; border-bottom: 1px solid var(--ol-border); }
.ol-booking-head h2 { margin: 0; color: var(--ol-navy); font-size: 21px; font-weight: 700; letter-spacing: -.3px; }

/* Indicador de pasos */
.ol-steps { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ol-steps li { display: flex; align-items: center; gap: 8px; color: var(--ol-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ol-steps li + li::before { content: ""; width: 28px; height: 1px; margin: 0 12px; background: var(--ol-border); }
.ol-steps b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #c5cfdb; background: #fff; color: var(--ol-muted); font-size: 12px; font-weight: 700; }
.ol-steps li.ol-on { color: var(--ol-navy); }
.ol-steps li.ol-on b { border-color: var(--ol-accent); background: var(--ol-accent); color: #fff; }
.ol-steps li.ol-done { color: var(--ol-navy); }
.ol-steps li.ol-done b { border-color: var(--ol-navy); background: var(--ol-navy); color: #fff; }
.ol-steps li.ol-done + li::before, .ol-steps li.ol-done + li.ol-on::before { background: var(--ol-navy); }

/* Tabla del paso 1: formulario a la izquierda, vehiculos / aviso a la derecha */
.ol-home #contenidos .contentGradiente { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.ol-home #contenidos .contentGradiente > tbody > tr > td:first-child { width: 430px; padding-right: 28px; border-right: 1px solid var(--ol-border); }
.ol-home #contenidos .contentGradiente > tbody > tr > td + td { width: auto !important; padding-left: 28px; }

/* Sin carrusel: la columna derecha es para los vehiculos */
#banerInicial, #banerCruise, #banerHourly, #banerTours { display: none !important; }
.ol-home #contenidos .ol-side { display: block !important; max-width: 460px; padding-top: 4px; }
.ol-home #contenidos #tiposvehicles[style*="block"] ~ .ol-side { display: none !important; }
.ol-side-hint { position: relative; margin: 0 0 22px; padding: 16px 16px 16px 46px; border: 1px dashed #c5cfdb; background: #f8fafc; color: var(--ol-muted); font-size: 14px; line-height: 1.5; }
.ol-side-hint::before { content: "i"; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border: 1.5px solid var(--ol-muted); color: var(--ol-muted); font: 700 11px/18px Georgia, serif; text-align: center; }
.ol-side-call { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--ol-navy); color: rgba(255, 255, 255, .75); font-size: 13px; }
.ol-side-call span { color: #fff; font-size: 15px; font-weight: 600; }
.ol-side-call a { color: var(--ol-accent); font-size: 24px; font-weight: 700; letter-spacing: .3px; text-decoration: none; }
.ol-side-call a:hover { color: #fff; }
.ol-home #contenidos #tiposvehicles { padding-top: 4px; }

/* Pestanas de servicio */
.ol-home #contenidos .TabbedPanels { margin: 0 !important; float: none; }
.ol-home #contenidos .TabbedPanelsTabGroup { display: flex; gap: 0; padding: 0 !important; margin: 0 0 18px !important; background: none; border-bottom: 1px solid var(--ol-border); border-radius: 0; width: auto; }
.ol-home #contenidos .TabbedPanelsTab { float: none; position: static; width: auto; height: auto; margin: 0 0 -1px !important; padding: 10px 16px !important; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0; color: var(--ol-muted); font-size: 13.5px !important; font-weight: 600; transition: color .15s, border-color .15s; }
.ol-home #contenidos .TabbedPanelsTabHover { color: var(--ol-navy); }
.ol-home #contenidos .TabbedPanelsTabSelected { color: var(--ol-navy) !important; border-bottom-color: var(--ol-accent) !important; }
.ol-home #contenidos .TabbedPanelsContentGroup { margin-bottom: 0; }
.ol-home #contenidos .TabbedPanelsContent { padding: 0 !important; }

/* Etiquetas del formulario */
.ol-home #contenidos td { font-size: 12.5px; color: #334155; padding-top: 2px; padding-bottom: 2px; }
.ol-home #contenidos td strong, .ol-home #contenidos .titulosFormVehicles { color: var(--ol-navy); font-size: 12.5px; font-weight: 700; }

/* Boton principal del paso 1: grande y a todo el ancho del formulario */
.ol-home #contenidos #step1 .buttonM { display: block; width: 100% !important; margin-top: 10px; padding: 14px 22px !important; font-size: 15px !important; }
.ol-home #contenidos #step1 td[style*="padding-right:22px"] { padding-right: 0 !important; }

/* La caja de bodas se sustituye por la tarjeta "Weddings" de la seccion de servicios */
.ol-home #contenidos #wedDiv { display: none !important; }

#paginasMostrar { max-width: 100%; }

/* Pasos 2 a 4: ya estan dentro de la tarjeta */
.ol-step { padding: 0; overflow-x: auto; }
.ol-step .textoSeccion { margin: 0 0 14px; color: var(--ol-navy); font-size: 20px; font-weight: 700; }

/* A partir del paso 2 solo queda la reserva */
.ol-paso-2 .ol-extra-home, .ol-paso-3 .ol-extra-home, .ol-paso-4 .ol-extra-home { display: none; }

/* ---------- Servicios ---------- */
.ol-services { margin-top: 56px; }
.ol-section-title { margin: 0 0 18px; color: var(--ol-navy); font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.ol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ol-card { display: block; overflow: hidden; background: var(--ol-card); border-radius: 0; box-shadow: 0 1px 3px rgba(15, 42, 74, .08); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ol-card:hover { transform: translateY(-3px); box-shadow: var(--ol-shadow); }
.ol-card-img { display: block; height: 160px; background-size: cover; background-position: center; transition: transform .4s; }
.ol-card:hover .ol-card-img { transform: scale(1.04); }
.ol-card-body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--ol-card); color: var(--ol-navy); font-size: 15px; font-weight: 600; }
.ol-card-body i { font-style: normal; color: var(--ol-accent); transition: transform .2s; }
.ol-card:hover .ol-card-body i { transform: translateX(4px); }

/* ---------- Llamada a la accion ---------- */
.ol-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 48px 0 56px; padding: 28px 32px; border-radius: 0; background: var(--ol-navy); color: #fff; }
.ol-cta h2 { margin: 0 0 4px; color: #fff; font-size: 22px; font-weight: 700; }
.ol-cta p { margin: 0; color: rgba(255, 255, 255, .75); font-size: 14px; }
.ol-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.ol-grid { grid-template-columns: repeat(2, 1fr); }
	.ol-steps li span { display: none; }
	.ol-steps li.ol-on span { display: inline; }
	.ol-steps li + li::before { width: 16px; margin: 0 8px; }
}
@media (max-width: 760px) {
	/* En movil el formulario va justo debajo de la cabecera */
	.ol-hero-in { padding-top: 16px; padding-bottom: 72px; }
	.ol-eyebrow { display: none; }
	.ol-hero-title { font-size: 20px; }
	.wrapper.ol-main { margin-top: -60px; padding: 0 10px; }
	.ol-home #contenidos { padding: 0 16px 20px; }
	.ol-booking-head { margin: 0 -16px 18px; padding: 14px 16px; gap: 12px; }
	.ol-booking-head h2 { font-size: 18px; }
	/* Formulario y columna derecha (vehiculos) uno debajo del otro */
	.ol-home #contenidos .contentGradiente, .ol-home #contenidos .contentGradiente > tbody, .ol-home #contenidos .contentGradiente > tbody > tr { display: block; }
	.ol-home #contenidos .contentGradiente > tbody > tr > td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; }
	.ol-home #contenidos .contentGradiente > tbody > tr > td + td { margin-top: 20px; }
	.ol-home #contenidos .ol-side-hint { display: none; }
	/* Tablas del formulario (ancho fijo de 400px) al ancho de la pantalla */
	.ol-home #contenidos #step1 .TabbedPanelsContent table { width: 100% !important; }
	.ol-home #contenidos #step1 .TabbedPanelsContent td { width: auto !important; }
	.ol-home #contenidos #step1 .TabbedPanelsContent select,
	.ol-home #contenidos #step1 .TabbedPanelsContent input[type="text"] { max-width: 100%; }
	.ol-home #contenidos #step1 select.selectLista, .ol-home #contenidos #step1 #cmx_airport, .ol-home #contenidos #step1 #cmx_port, .ol-home #contenidos #step1 [id^="location"] { width: 100% !important; }
	.ol-home #contenidos .TabbedPanelsTab { padding: 9px 10px !important; font-size: 12.5px !important; }
	.ol-grid { grid-template-columns: 1fr; }
	.ol-cta { padding: 22px; }
}

/* ---------- Seleccion de vehiculos (#tbVehicles, lo genera respMostrarOpcionesVehiculos en amdViva.js) ----------
   Cada vehiculo es una table.areaVehicles con: titulo + pasajeros + maletas / foto / casilla.
   Con grid se recolocan como tarjeta: foto arriba, nombre, y debajo capacidad y casilla. */
.ol-home #contenidos #tiposvehicles > table { width: 100%; border-spacing: 0; }
.ol-home #contenidos #tiposvehicles thead th { padding: 0 0 14px; color: var(--ol-navy); font-size: 14px; font-weight: 700; text-align: left; }
.ol-home #contenidos #tbVehicles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ol-home #contenidos #tbVehicles > tr { display: contents; }
.ol-home #contenidos #tbVehicles > tr > td { display: block; width: auto !important; height: auto !important; padding: 0; }
.ol-home #contenidos #tbVehicles > tr > td:empty { display: none; }

.ol-home #contenidos #tbVehicles .areaVehicles { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 10px; width: 100% !important; height: 100%; margin: 0; padding: 12px 12px 10px; box-sizing: border-box; border: 1px solid var(--ol-border); background: #fff; box-shadow: none; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.ol-home #contenidos #tbVehicles .areaVehicles > tbody, .ol-home #contenidos #tbVehicles .areaVehicles tr { display: contents; }
.ol-home #contenidos #tbVehicles .areaVehicles td { display: block; width: auto !important; height: auto !important; padding: 0; }
.ol-home #contenidos #tbVehicles .areaVehicles:hover { border-color: #9fb0c4; box-shadow: 0 4px 14px rgba(15, 42, 74, .08); }

/* Foto */
.ol-home #contenidos #tbVehicles .areaVehicles td[colspan="3"]:not(.checkVehicles) { order: 1; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: 72px !important; margin-bottom: 10px; background: #f6f8fa; }
.ol-home #contenidos #tbVehicles .areaVehicles img { width: 117px; height: 55px; mix-blend-mode: multiply; }
/* Nombre */
.ol-home #contenidos #tbVehicles .resaltaTextoVehicles { order: 2; grid-column: 1 / -1; margin-bottom: 8px; color: var(--ol-navy); font-size: 13.5px; font-weight: 700; line-height: 1.25; text-align: left; }
/* Capacidad: pasajeros y maletas con icono */
.ol-home #contenidos #tbVehicles .fondoPasajeros, .ol-home #contenidos #tbVehicles .fondoMaletas { order: 3; display: inline-flex !important; align-items: center; gap: 4px; padding: 0; background: none; color: var(--ol-muted); font-size: 12.5px; font-weight: 600; }
.ol-home #contenidos #tbVehicles .fondoPasajeros::before, .ol-home #contenidos #tbVehicles .fondoMaletas::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ol-home #contenidos #tbVehicles .fondoPasajeros { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2 15c.4-3.3 2.9-5.2 6-5.2s5.6 1.9 6 5.2z'/%3E%3C/svg%3E"); }
.ol-home #contenidos #tbVehicles .fondoMaletas { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 1.5h5v3h-1.4V3h-2.2v1.5H5.5z'/%3E%3Crect x='2' y='4.5' width='12' height='10'/%3E%3C/svg%3E"); }
/* Casilla a la derecha */
.ol-home #contenidos #tbVehicles .checkVehicles { order: 4; justify-self: end; grid-column: 3; grid-row: 3; }
.ol-home #contenidos #tbVehicles .checkVehicles input { width: 18px; height: 18px; margin: 0; accent-color: var(--ol-accent); cursor: pointer; }

/* Vehiculo elegido */
.ol-home #contenidos #tbVehicles .areaVehicles:has(input:checked) { border-color: var(--ol-accent); background: #fff8f2; box-shadow: inset 0 0 0 1px var(--ol-accent); }
.ol-home #contenidos #tbVehicles .areaVehicles:has(input:checked) td[colspan="3"]:not(.checkVehicles) { background: #fff; }

@media (max-width: 1100px) {
	.ol-home #contenidos #tbVehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Pasos 2 a 4 (tablas que generan admViva1.js, admVivaCruceros.js y admHourly.js) ----------
   Mismas clases de siempre (fondoCeldaTitulo, fondoTabla, fondoCelda, fondoCeldaBlanco/Gris...),
   reestilizadas: cabeceras de ida/vuelta claras, cada vehiculo como fila con su franja de total
   y el vehiculo elegido resaltado. */
.ol-home #contenidos .ol-step table[width="970"] { width: 100% !important; border-spacing: 0; }
/* Columnas de ida y vuelta alineadas arriba (antes se centraban y dejaban hueco cuando una lista era mas corta) */
.ol-home #contenidos .ol-step table[width="970"] > tbody > tr > td { vertical-align: top; }
.ol-home #contenidos #serviceOption > tbody > tr > td:first-child,
.ol-home #contenidos .ol-step table[width="970"] > tbody > tr > td:first-child { padding-right: 18px; }
.ol-home #contenidos #serviceOption > tbody > tr > td + td,
.ol-home #contenidos .ol-step table[width="970"] > tbody > tr > td + td { padding-left: 18px; }

/* Cabecera "Your Departure / Your Arrival" */
.ol-home #contenidos .fondoCeldaTitulo { height: auto; padding: 12px 14px; border-radius: 0; background: var(--ol-bg); box-shadow: inset 3px 0 0 var(--ol-accent); color: var(--ol-navy); font-size: 16px; font-weight: 700; }
/* "Vehicle Selection", "Pick-up Time"... */
.ol-home #contenidos .ol-step .tituloEnTabla { padding-top: 18px; color: var(--ol-navy) !important; font-size: 15px !important; font-weight: 700; text-decoration: none !important; }
.ol-home #contenidos .textoPasos { color: var(--ol-muted); font-size: 13px; line-height: 1.5; }
.ol-home #contenidos .textoPasosBold { color: var(--ol-text); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.ol-home #contenidos .separadorTotal { width: auto; height: 0; padding: 0; border-top: 1px solid var(--ol-border); }

/* Lista de vehiculos */
.ol-home #contenidos .fondoTabla { border-collapse: separate; border-spacing: 0; color: var(--ol-text); font-size: 14px; font-weight: 400; }
.ol-home #contenidos td.fondoCeldaBlanco, .ol-home #contenidos td.fondoCeldaGris,
.ol-home #contenidos td.fondoCeldaRojo, .ol-home #contenidos td.fondoCeldaRojoGris { padding: 12px 8px; background: #fff; color: var(--ol-navy); font-size: 13.5px; font-weight: 600; transition: background .15s; }
/* Las mismas clases en etiquetas (importes de Meet & Greet): sin relleno ni fondo para que no se pisen */
.ol-home #contenidos label.fondoCeldaBlanco, .ol-home #contenidos label.fondoCeldaGris { padding: 0; background: none; color: var(--ol-navy); font-size: 13.5px; font-weight: 700; }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input[type="radio"]) { cursor: pointer; }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input[type="radio"]) > td { padding-top: 16px; border-top: 1px solid var(--ol-border); }
.ol-home #contenidos .fondoTabla img { mix-blend-mode: multiply; vertical-align: middle; }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input[type="radio"]) > td:nth-child(4) { color: var(--ol-muted); font-size: 12.5px; }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input[type="radio"]) > td:nth-child(5) { color: var(--ol-navy); font-size: 17px; font-weight: 700; }
.ol-home #contenidos .fondoCeldaRojoGris, .ol-home #contenidos .fondoCeldaRojo { color: var(--ol-accent-dark) !important; }
.ol-home #contenidos .fondoTabla input[type="radio"] { width: 18px; height: 18px; }

/* Franja de total bajo cada vehiculo (antes barra azul) */
.ol-home #contenidos td.fondoCelda[colspan="5"] { padding: 0; border: 0; background: var(--ol-bg); }
.ol-home #contenidos .fondoTabla .fondoTabla td.fondoCelda { padding: 9px 8px; background: none; color: var(--ol-navy); font-size: 13px; font-weight: 600; }
.ol-home #contenidos .fondoTabla .fondoTabla td.fondoCelda:nth-last-child(2) { color: var(--ol-muted); font-weight: 500; }
.ol-home #contenidos .fondoTabla .fondoTabla td.fondoCelda:last-child { color: var(--ol-navy); font-size: 14.5px; font-weight: 700; }

/* Vehiculo elegido */
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input:checked) > td { background: #fff8f2; }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input:checked) > td:first-child,
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input:checked) + tr > td.fondoCelda[colspan="5"] { box-shadow: inset 3px 0 0 var(--ol-accent); }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input:checked) + tr > td.fondoCelda[colspan="5"] { background: #fdeee1; }
.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input:checked) + tr .fondoTabla td.fondoCelda:last-child { color: var(--ol-accent-dark); }

/* Meet & Greet opcional */
.ol-home #contenidos .labelOpcional { color: var(--ol-text); font-size: 12.5px; font-weight: 500; line-height: 1.6; }

/* Botones de los pasos: "Back" secundario, el otro principal */
.ol-home #contenidos .ol-step table[align="right"] { margin-top: 24px; border-spacing: 10px 0; }
.ol-home #contenidos .ol-step table[align="right"] td:first-child .buttonP { background: #fff !important; border: 1px solid var(--ol-border) !important; color: var(--ol-navy) !important; box-shadow: none; }
.ol-home #contenidos .ol-step table[align="right"] td:first-child .buttonP:hover { border-color: var(--ol-navy) !important; background: var(--ol-bg) !important; }
.ol-home #contenidos .ol-step .spacer1 { display: none; }
/* Las tablas de Meet & Greet que el JS oculta con visibility:hidden no reservan hueco */
.ol-home #contenidos .ol-step table[style*="visibility: hidden"] { display: none; }
/* ...ni la fila de 80px que las contiene mientras estan ocultas */
.ol-home #contenidos .ol-step tr:has(> td > table[style*="visibility: hidden"]) { display: none; }

/* ---------- Paso 4: carrito (#shoping, lo genera amdViva.js) y checkout (#checkoutdiv) ---------- */
.ol-home #step4 table[width="970"], .ol-home #step4 #shoping { width: 100% !important; }
.ol-home #step4 > table, .ol-home #step4 #checkoutdiv > table { width: 100%; }

/* Carrito: cabecera de cada reserva, etiquetas pequenas y valores legibles */
.ol-home #step4 #shoping { border-collapse: collapse; border: 1px solid var(--ol-border); }
.ol-home #step4 #shoping td.fondoCeldaTitulo { padding: 12px 16px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ol-home #step4 .labelPaso4titulo { padding: 14px 10px 2px; color: var(--ol-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ol-home #step4 .labelPaso4 { padding: 2px 10px 14px; color: var(--ol-navy); font-size: 14px; font-weight: 500; line-height: 1.45; }
.ol-home #step4 #shoping tr > td:first-child { padding-left: 16px; }
.ol-home #step4 #shoping tr > td:last-child { padding-right: 16px; }
.ol-home #step4 .labelPaso4 img { width: 92px; height: auto; mix-blend-mode: multiply; }
.ol-home #step4 .imgVinculo { cursor: pointer; opacity: .6; }
.ol-home #step4 .imgVinculo:hover { opacity: 1; }
.ol-home #step4 #shoping tr > td.labelPaso4:last-child { color: var(--ol-navy); font-size: 15px; font-weight: 700; text-align: right; }
/* Desglose (Vehicles 1 $173.50...) */
.ol-home #step4 #shoping table[id$="_izq"] td, .ol-home #step4 #shoping table[id$="_der"] td { padding: 3px 0; color: var(--ol-muted); font-size: 13px; }
.ol-home #step4 #shoping td.separadorTotal { padding: 0; border-top: 1px solid var(--ol-border); }
/* Fila del total del carrito */
.ol-home #step4 #shoping tr:last-child td.fondoCeldaTitulo { padding: 16px; background: var(--ol-navy); box-shadow: none; color: #fff; font-size: 18px; letter-spacing: 0; text-transform: none; text-align: right; }

/* Aviso bajo el carrito */
.ol-home #step4 #Pleasenote:not(:empty) { padding: 14px 16px; border-left: 3px solid var(--ol-border); background: var(--ol-bg); color: var(--ol-muted); font-size: 13.5px; line-height: 1.5; }

/* Botones del carrito: Back y Add Another secundarios, Book Now principal, en una fila */
.ol-home #step4 tr:has(> td > #boocknow) { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 4px; }
.ol-home #step4 tr:has(> td > #boocknow) > td { display: block; width: auto !important; padding: 0; }
.ol-home #step4 tr:has(> td > #boocknow) > td:empty, .ol-home #step4 tr:has(> td > #boocknow) > td:not(:has(button)) { display: none; }
.ol-home #step4 #backPaso4, .ol-home #step4 #addAnotherReservation { width: auto !important; background: #fff !important; border: 1px solid var(--ol-border) !important; color: var(--ol-navy) !important; box-shadow: none; white-space: nowrap; }
.ol-home #step4 #backPaso4:hover, .ol-home #step4 #addAnotherReservation:hover { background: var(--ol-bg) !important; border-color: var(--ol-navy) !important; }
.ol-home #step4 #boocknow { min-width: 160px; white-space: nowrap; }

/* Checkout: cada bloque (pasajero, pago, terminos) como panel con cabecera */
.ol-home #step4 #checkoutdiv .tituloEnTabla { padding-top: 8px; color: var(--ol-navy) !important; font-size: 20px !important; font-weight: 700; text-decoration: none !important; }
.ol-home #step4 #checkoutdiv table[width="970"]:has(> tbody > tr > td.fondoCeldaTitulo) { margin-bottom: 22px; border: 1px solid var(--ol-border); border-collapse: collapse; }
.ol-home #step4 #checkoutdiv td.fondoCeldaTitulo { height: auto; padding: 14px 18px; font-size: 15px !important; }
.ol-home #step4 #checkoutdiv td { color: var(--ol-text); font-size: 13.5px; }
.ol-home #step4 #checkoutdiv table[width="970"] table[width="970"] { width: 100% !important; padding: 8px 12px; border-spacing: 8px 6px; }
.ol-home #step4 #checkoutdiv input[type="text"], .ol-home #step4 #checkoutdiv input[type="password"] { width: 100%; max-width: 300px; }
.ol-home #step4 #checkoutdiv select { min-width: 120px; }
.ol-home #step4 #checkoutdiv .titulosShoping, .ol-home #step4 #checkoutdiv .tituloCajas { color: var(--ol-navy); font-size: 13.5px; font-weight: 700; }
/* "Access your OneLimo Alliance account": enlace, no barra azul */
.ol-home #step4 .vinculoCheckAcces { padding: 0; background: none; color: var(--ol-accent-dark); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ol-home #step4 .vinculoCheckAcces:hover { color: var(--ol-navy); }
.ol-home #step4 #accesDivCheck { margin-top: 12px; padding: 12px; background: #fff; border: 1px solid var(--ol-border); }
.ol-home #step4 .vinculoAzul { color: var(--ol-accent-dark); font-size: 12px !important; text-decoration: underline; cursor: pointer; }
/* Terminos */
.ol-home #step4 #tablaTerminos td { padding: 6px 12px; }
.ol-home #step4 #tablaTerminos input[type="checkbox"] { width: 18px; height: 18px; }
/* La cabecera de los paneles tiene menos celdas que el resto de la tabla: el fondo va en la fila entera */
.ol-home #step4 #checkoutdiv tr:has(> td.fondoCeldaTitulo) { background: var(--ol-bg); box-shadow: inset 3px 0 0 var(--ol-accent); }
.ol-home #step4 #checkoutdiv td.fondoCeldaTitulo { background: none; box-shadow: none; }
/* El JS muestra estos paneles con display:block (no table) y sus filas no llegaban al ancho total */
.ol-home #step4 #checkoutdiv table[width="970"]:not([style*="none"]) { display: table !important; float: none; }
.ol-home #step4 #tablaTerminos a, .ol-home #step4 #tablaTerminos label { font-size: 13.5px !important; color: var(--ol-accent-dark); }
.ol-home #step4 #shoping tr > td:nth-child(2), .ol-home #step4 #shoping tr > td:nth-child(3) { white-space: nowrap; }

/* ---------- Movil (iPhone 16: 393x852): reserva ---------- */
@media (max-width: 760px) {
	/* Paso 1: filas unidas por js/moderno-movil.js en dos columnas; aeropuerto y direcciones a todo el ancho */
	.ol-home #step1 tr.ol-unida { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
	.ol-home #step1 tr.ol-unida > td { min-width: 0; }
	.ol-home #step1 tr.ol-unida > td.ol-ancha { grid-column: 1 / -1; }
	/* Hora + AM/PM juntos */
	.ol-home #step1 td:has(> select[id^="pmam"]) { display: flex !important; flex-wrap: wrap; gap: 6px; }
	.ol-home #step1 td:has(> select[id^="pmam"]) > .ol-lbl { flex: 0 0 100%; }
	.ol-home #step1 td:has(> select[id^="pmam"]) > select { flex: 1 1 0; width: auto !important; min-width: 0; }
	/* Tipo de servicio / sentido / pasajeros: radios con mas aire para el dedo */
	.ol-home #step1 input.radio { width: 20px; height: 20px; margin-right: 4px; }
	.ol-home #step1 .TabbedPanelsContent td { font-size: 13.5px; }
	.ol-home #step1 .TabbedPanelsContent td strong { font-size: 13px; }
	.ol-home #step1 .buttonM { min-height: 50px; font-size: 16px !important; }

	/* Pasos 2 a 4: ida y vuelta una debajo de otra (primero toda la columna izquierda, luego la derecha) */
	.ol-home #contenidos table[id^="serviceOption"] { display: block; width: 100% !important; }
	.ol-home #contenidos table[id^="serviceOption"] > tbody { display: flex; flex-direction: column; }
	.ol-home #contenidos table[id^="serviceOption"] > tbody > tr { display: contents; }
	.ol-home #contenidos table[id^="serviceOption"] > tbody > tr > td { display: block; width: auto !important; padding: 0 !important; }
	.ol-home #contenidos table[id^="serviceOption"] > tbody > tr > td:first-child { order: 1; }
	.ol-home #contenidos table[id^="serviceOption"] > tbody > tr > td:nth-child(2) { order: 2; }
	.ol-home #contenidos table[id^="serviceOption"] > tbody > tr > td:nth-child(2).fondoCeldaTitulo { margin-top: 24px; }
	.ol-home #contenidos .fondoTabla td { width: auto !important; }
	.ol-home #contenidos .fondoTabla img { width: 84px; height: auto; }
	.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input[type="radio"]) > td:nth-child(3) { display: none; }
	.ol-home #contenidos .fondoTabla > tbody > tr:has(> td > input[type="radio"]) > td:nth-child(5) { font-size: 16px; white-space: nowrap; }
	.ol-home #contenidos .ol-step table[align="right"] { float: none; width: 100%; margin-top: 20px; border-spacing: 0; }
	.ol-home #contenidos .ol-step table[align="right"] td { width: 50% !important; padding: 0 4px; }
	.ol-home #contenidos .ol-step table[align="right"] .buttonP, .ol-home #contenidos .ol-step table[align="right"] .buttonG { width: 100% !important; }

	/* Carrito: cada trayecto como tarjeta en dos columnas; recogida y destino a todo el ancho */
	.ol-home #step4 #shoping, .ol-home #step4 #shoping > tbody { display: block; }
	.ol-home #step4 #shoping > tbody > tr { display: block; }
	.ol-home #step4 #shoping > tbody > tr > td { display: block; }
	.ol-home #step4 #shoping tr.ol-unida { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 14px 14px 4px; }
	.ol-home #step4 #shoping tr.ol-unida > td { padding: 0 !important; white-space: normal !important; text-align: left !important; }
	.ol-home #step4 #shoping tr.ol-unida > td:nth-child(4), .ol-home #step4 #shoping tr.ol-unida > td:nth-child(5) { grid-column: 1 / -1; }
	.ol-home #step4 #shoping tr.ol-unida > td:last-child { grid-column: 1 / -1; padding-top: 8px !important; border-top: 1px solid var(--ol-border); font-size: 17px; text-align: right !important; }
	.ol-home #step4 #shoping tr.ol-unida .ol-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
	.ol-home #step4 #shoping td.fondoCeldaTitulo { padding: 12px 14px !important; }
	.ol-home #step4 tr:has(> td > #boocknow) { flex-wrap: wrap; }
	.ol-home #step4 tr:has(> td > #boocknow) > td { flex: 1 1 100%; }
	.ol-home #step4 tr:has(> td > #boocknow) button { width: 100% !important; }

	/* Checkout: etiqueta encima de cada campo, una columna */
	.ol-home #step4 #checkoutdiv table, .ol-home #step4 #checkoutdiv tbody, .ol-home #step4 #checkoutdiv tr { display: block !important; width: 100% !important; }
	.ol-home #step4 #checkoutdiv td { display: block; width: auto !important; height: auto !important; }
	.ol-home #step4 #checkoutdiv table[width="970"] table[width="970"] { padding: 6px 14px 10px; }
	.ol-home #step4 #checkoutdiv input[type="text"], .ol-home #step4 #checkoutdiv input[type="password"], .ol-home #step4 #checkoutdiv select { width: 100% !important; max-width: none; }
	.ol-home #step4 #checkoutdiv td:empty { display: none; }
}
@media (max-width: 760px) {
	/* Filas solo con espacios (las marca js/moderno-movil.js) */
	.ol-site tr.ol-vacia { display: none !important; }
	/* Tipo de servicio / sentido / pasajeros (aeropuerto y crucero): rejilla de 2 columnas */
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip, > tbody > tr > td > #RoundtripCruise) { display: block; width: 100% !important; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip, > tbody > tr > td > #RoundtripCruise) > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "st sd" "rt ta" "ow fa" "px px" "al as" "cl cs"; gap: 8px 12px; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip, > tbody > tr > td > #RoundtripCruise) > tbody > tr { display: contents; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip, > tbody > tr > td > #RoundtripCruise) td { display: flex; align-items: center; gap: 8px; width: auto !important; padding: 0 !important; font-size: 14.5px; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(1) > td:nth-child(1), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(1) > td:nth-child(1) { grid-area: st; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(1) > td:nth-child(2), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(1) > td:nth-child(2) { grid-area: sd; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(1) > td:nth-child(3), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(1) > td:nth-child(3) { grid-area: px; margin-top: 8px; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(2) > td:nth-child(1), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(2) > td:nth-child(1) { grid-area: rt; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(2) > td:nth-child(2), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(2) > td:nth-child(2) { grid-area: ta; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(2) > td:nth-child(3), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(2) > td:nth-child(3) { grid-area: al; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(2) > td:nth-child(4), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(2) > td:nth-child(4) { grid-area: as; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(3) > td:nth-child(1), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(3) > td:nth-child(1) { grid-area: ow; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(3) > td:nth-child(2), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(3) > td:nth-child(2) { grid-area: fa; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(3) > td:nth-child(3), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(3) > td:nth-child(3) { grid-area: cl; }
	.ol-home #step1 table:has(> tbody > tr > td > #Roundtrip) > tbody > tr:nth-child(3) > td:nth-child(4), .ol-home #step1 table:has(> tbody > tr > td > #RoundtripCruise) > tbody > tr:nth-child(3) > td:nth-child(4) { grid-area: cs; }
	.ol-home #step1 #passenAdult, .ol-home #step1 #passenChil, .ol-home #step1 #passenAdultCruise, .ol-home #step1 #passenChilCruise { width: 100% !important; }
}
@media (max-width: 760px) {
	/* Las filas del carrito traen height="11": como rejilla ese alto se aplicaba y el texto se montaba */
	.ol-home #step4 #shoping tr, .ol-home #step4 #shoping td { height: auto !important; }
	/* Meet & Greet: sin la figura del chofer para que el texto respire */
	.ol-home #contenidos .fondoTabla tr:has(.labelOpcional) > td:first-child:has(> img) { display: none; }
	.ol-home #contenidos .fondoTabla tr:has(.labelOpcional) > td { vertical-align: top; }
}
@media (max-width: 760px) {
	.ol-home #step4 #shoping tr.ol-unida { box-sizing: border-box; width: 100%; }
	/* Checkout: sin la sangria alterna que ponen las reglas de los pasos 2-4 */
	.ol-home #step4 #checkoutdiv td { padding-left: 0 !important; padding-right: 0 !important; }
	.ol-home #step4 #checkoutdiv table[width="970"] table[width="970"] { padding: 8px 14px 12px !important; border-spacing: 0 !important; }
	.ol-home #step4 #checkoutdiv td.fondoCeldaTitulo { padding: 14px 16px !important; }
	.ol-home #step4 #checkoutdiv table[width="970"] table[width="970"] td { padding-top: 6px !important; }
}