/* marca.css · Códigos Eventos «Tu Transporte VIP»: negro + amarillo #EBC818, titulares en itálica condensada (como su logo)
   y sus franjas diagonales (piezas de marketing). Brújula visual: Blacklane (reserva en el hero, clases de unidad, calma).
   Va el último: manda sobre la base y el nicho. Nace oscuro (Sprinter negras); también tiene claro. */
:root[data-nicho] {
  --lienzo: #f4f3ee; --superficie: #ffffff; --superficie-2: #ebe9e1; --tinta: #0b0b0c; --suave: #55565c; --linea: #dcd9cf;
  --acento: #ebc818; --acento-texto: #6e5a00; --acento-2: #0b0b0c; --exito: #1f7a46; --sobre-acento: #0b0b0c;
  --panel-checkout: #0b0b0c; --sobre-checkout: #f6f6f4;
  --boton-fondo: #ebc818; --boton-texto: #0b0b0c; --boton-hover: #f4d63c;
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif; --f-texto: "Geist", ui-sans-serif, system-ui, sans-serif; --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --peso-display: 800; --track-display: -.005em; --alto-display: .95;
  --radio: 10px; --radio-boton: 10px; --radio-foto: 10px;
  --franjas: repeating-linear-gradient(-55deg, transparent 0 22px, rgb(11 11 12 / .045) 22px 44px);
  --mapa-linea: rgb(11 11 12 / .16); --mapa-texto: #55565c; --mapa-rejilla: rgb(11 11 12 / .14);
}
:root[data-nicho][data-tema="oscuro"] {
  --lienzo: #0b0b0c; --superficie: #161618; --superficie-2: #111113; --tinta: #f6f6f4; --suave: #a9abb3; --linea: #2a2a30;
  --acento: #ebc818; --acento-texto: #ebc818; --exito: #3ddc84;
  --panel-checkout: #1c1c20; --sobre-checkout: #f6f6f4;
  --boton-fondo: #ebc818; --boton-texto: #0b0b0c; --boton-hover: #f4d63c;
  --franjas: repeating-linear-gradient(-55deg, transparent 0 22px, rgb(255 255 255 / .028) 22px 44px);
  --mapa-linea: rgb(246 246 244 / .16); --mapa-texto: #a9abb3; --mapa-rejilla: rgb(246 246 244 / .1);
}
h1, h2 { font-style: italic; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 6.4vw, 5.8rem); }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: .98; }
h1 em, h2 em { color: var(--acento-texto); }
.seccion.oscura { --acento-texto: #ebc818; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.mono { font-family: var(--f-mono); }

/* Barra: logo real (blanco; en claro se invierte) */
.marca-logo img { height: 40px; width: auto; }
.barra nav a { min-width: 44px; justify-content: center; text-align: center; }
:root[data-tema="claro"] .barra .marca-logo img, :root[data-tema="claro"] .pie .marca-logo img { filter: invert(1) hue-rotate(180deg); }

/* ── Hero: texto + reserva a la izquierda; mapa de rutas y pase a la derecha, sobre las franjas de su marca */
.hero-ce { padding-block: clamp(36px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.hero-ce::before { content: ""; position: absolute; inset: 0 0 0 46%; background: var(--franjas); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.hero-ce > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
.hero-ce .texto { display: grid; gap: 24px; justify-items: start; }
.hero-ce h1 { max-width: 12ch; }

.ruta-rapida { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) auto; width: 100%; max-width: 640px; border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--brillo), var(--sombra-3); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); }
.ruta-rapida label { display: grid; gap: 4px; padding: 12px 16px; border-inline-end: 1px solid var(--linea); min-width: 0; }
.ruta-rapida span { font: 500 .72rem/1 var(--f-mono); color: var(--suave); }
.ruta-rapida b { font-weight: 600; line-height: 1.6; }
.ruta-rapida select { appearance: none; border: 0; background: transparent; padding: 0 18px 0 0; min-height: 28px; font-weight: 600; cursor: pointer; width: 100%; color: var(--tinta);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 1px center; background-size: 5px 5px; background-repeat: no-repeat; }
.ruta-rapida select option { background: var(--superficie); color: var(--tinta); }
.ruta-rapida .btn { margin: 8px; }
.ruta-rapida select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.hero-ce .prueba { display: flex; list-style: none; margin: 0; padding: 20px 0 0; }
.hero-ce .prueba li { min-width: 0; }

/* Mapa de rutas (SVG generado en codigos.js) */
.viaje-ce { position: relative; padding-bottom: 170px; }
.mapa-ce { margin: 0; position: relative; }
.mapa-ce svg { display: block; width: 100%; height: auto; overflow: visible; }
.mapa-ce figcaption { position: absolute; left: 0; bottom: -4px; font-size: .7rem; color: var(--suave); }
#rejilla circle { fill: var(--mapa-rejilla); }
.m-costa { fill: none; stroke: var(--mapa-linea); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.m-mar { fill: var(--mapa-texto); font: italic 600 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.m-ruta { fill: none; stroke: var(--mapa-linea); stroke-width: 1.3; transition: stroke .4s var(--curva); }
.m-ruta.sel { stroke: color-mix(in oklab, var(--acento) 35%, transparent); }
.m-activa { fill: none; stroke: var(--acento); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s var(--curva); }
.m-ciudad circle { fill: var(--lienzo); stroke: var(--mapa-texto); stroke-width: 1.4; transition: fill .3s, stroke .3s; }
.m-ciudad text, .m-base text { fill: var(--mapa-texto); font: 500 11px var(--f-texto); }
.m-ciudad.sel circle { fill: var(--acento); stroke: var(--acento); }
.m-ciudad.sel text { fill: var(--tinta); font-weight: 700; font-size: 12.5px; }
.m-base circle { fill: var(--acento); }
.m-base text { fill: var(--tinta); font: italic 800 15px var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.m-pulso { fill: none !important; stroke: var(--acento); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: m-pulso 2.4s var(--curva) infinite; }
@keyframes m-pulso { from { transform: scale(1); opacity: .9 } to { transform: scale(3.2); opacity: 0 } }
.m-unidad { opacity: 0; transition: opacity .3s; } .m-unidad.vis { opacity: 1; }
.m-unidad circle { fill: var(--tinta); stroke: var(--acento); stroke-width: 2; }
.m-unidad .m-unidad-c { fill: var(--acento); stroke: none; }

/* Pase del traslado: boleto de la marca con su perforación y código de barras */
.pase { position: absolute; right: 0; bottom: 0; width: min(320px, 80%); display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid rgb(255 255 255 / .07); border-radius: 14px; color: #f6f6f4;
  background: linear-gradient(160deg, #1f1f23, #121214); box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 30px 60px -20px rgb(0 0 0 / .55), 0 10px 22px -10px rgb(0 0 0 / .4);
  --sobre: #121214; }
:root[data-tema="claro"] .pase { --sobre: #f4f3ee; }
.pase > * { padding-inline: 20px; }
.pase-cab { display: flex; align-items: center; gap: 10px; padding-block: 14px 10px; font: 600 .82rem/1 var(--f-texto); }
.pase-cab img { width: 26px; height: 26px; }
.pase-cab .mono { margin-inline-start: auto; font-size: .72rem; color: #c9cad0; letter-spacing: .04em; }
.pase-ruta { display: grid; grid-template-columns: auto minmax(24px, 1fr) minmax(0, auto); align-items: end; gap: 12px; padding-block: 6px 14px; }
.pase-ruta div:last-child { text-align: end; }
.pase-ruta small, .pase-datos dt, .pase-pie small { display: block; font: 500 .68rem/1.2 var(--f-mono); color: #a9abb3; text-transform: uppercase; letter-spacing: .06em; }
.pase-ruta b { display: block; margin-top: 4px; font: italic 800 1.4rem/1 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; }
.pase-ruta div:last-child b { color: #ebc818; }
.pase-linea { width: 100%; height: 12px; margin-bottom: 6px; }
.pase-linea path { stroke: #ebc818; stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.pase-linea circle { fill: #ebc818; }
.pase-datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; margin: 0; padding-block: 12px 16px; border-top: 1px solid rgb(255 255 255 / .1); }
.pase-datos dd { margin: 4px 0 0; font-weight: 600; font-size: .9rem; }
.pase-pie { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 16px; border-top: 1.5px dashed rgb(255 255 255 / .22); }
.pase-pie::before, .pase-pie::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--sobre); }
.pase-pie::before { left: -10px; } .pase-pie::after { right: -10px; }
.pase-pie b { display: block; margin-top: 2px; font: italic 800 2rem/1 var(--f-display); color: #ebc818; font-variant-numeric: tabular-nums; }
.pase-pie .mono { font-size: .72rem; color: #c9cad0; }
.pase-barras { width: 96px; height: 34px; fill: #f6f6f4; flex: none; }
#p-precio, #p-destino { transition: opacity .3s; }

/* ── Servicios: 4 fotos a su tamaño real con el icono y el nombre encima (sin números) */
.servicios-ce { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); list-style: none; padding: 0; }
.servicios-ce figure { position: relative; margin: 0; background: #111113; border-radius: var(--radio-foto); overflow: hidden; box-shadow: var(--sombra-2); aspect-ratio: 3 / 4; max-width: 300px; }
.servicios-ce img { width: 100%; height: 100%; object-fit: cover; }
.servicios-ce figure::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgb(8 8 9 / .86)); }
.servicios-ce figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff;
  font: italic 800 1.4rem/1 var(--f-display); text-transform: uppercase; }
.servicios-ce figcaption .icono { width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: #0b0b0c; background: #ebc818; }
.servicios-ce p { margin-top: 14px; color: var(--suave); font-size: .96rem; max-width: 34ch; }

/* ── Flota por clases: foto, puestos y uso, y botón al cotizador */
.flota-ce { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.unidad-ce { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radio); overflow: hidden; background: var(--superficie); box-shadow: var(--brillo), var(--sombra-2);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.unidad-foto { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; background: var(--superficie-2); }
.unidad-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.unidad-foto .etiqueta-foto { position: absolute; top: 12px; left: 12px; }
.unidad-foto.dibujo { display: grid; place-items: center; background: var(--franjas), linear-gradient(160deg, #1f1f23, #0d0d0f); }
.unidad-foto.dibujo svg { width: 84%; }
.unidad-foto .carro { fill: none; stroke: #f6f6f4; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.unidad-foto .rueda { fill: #0d0d0f; stroke: #ebc818; stroke-width: 2.4; }
.unidad-foto .brillo-l { stroke: #ebc818; stroke-width: 3; stroke-linecap: round; }
.unidad-ce .cuerpo { display: grid; gap: 14px; align-content: start; padding: 18px 18px 20px; }
.unidad-ce h3 { font: italic 800 1.7rem/1 var(--f-display); text-transform: uppercase; }
.specs { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--suave); }
.specs li { display: flex; align-items: center; gap: 9px; }
.specs .icono { color: var(--acento-texto); }
.unidad-ce .btn-cargar { justify-self: start; margin-top: 4px; min-height: 44px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .unidad-ce:hover { transform: translateY(-4px); box-shadow: var(--brillo), var(--sombra-3); }
  .unidad-ce:hover .unidad-foto img { transform: scale(1.04); }
}

/* ── Rutas */
.rutas-ce { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.tabla-rutas { padding: 6px 22px; }
.ruta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--linea); }
.ruta:last-child { border-bottom: 0; }
.ruta .mono { font-size: .85rem; color: var(--suave); }
.ruta .btn-cargar { min-height: 44px; padding: 0 12px; font-size: .86rem; }

/* ── Verificador (seguridad, no miedo): el resultado válido se ve como el talón de un boleto */
.verificar-ce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.seccion.oscura { background-image: var(--franjas); }
.oficiales { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font: 500 .98rem/1 var(--f-mono); list-style: none; padding: 0; }
.oficiales li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.oficiales .icono { color: var(--acento-texto); }
.form-verificar { display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); }
.form-verificar label { font-weight: 600; }
.form-verificar .fila { display: flex; gap: 10px; }
.form-verificar .entrada { min-height: 50px; text-transform: uppercase; font-family: var(--f-mono); }
.resultado { display: none; gap: 6px; padding: 16px 18px; border-radius: var(--radio); font-size: .95rem; position: relative; }
.resultado.si, .resultado.no { display: grid; }
.resultado b { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.resultado.si { background: color-mix(in oklab, var(--exito) 16%, transparent); border-inline-start: 4px solid var(--exito); }
.resultado.si b { color: var(--exito); }
.resultado-cod { margin-top: 6px; padding-top: 10px; border-top: 1.5px dashed color-mix(in oklab, var(--exito) 45%, transparent); font-size: .8rem; letter-spacing: .08em; color: var(--suave); }
.resultado.no { background: color-mix(in oklab, #ff6b5e 16%, transparent); border-inline-start: 4px solid #ff8a7f; }
.resultado.no b { color: #ff8a7f; }
:root[data-tema="claro"] .seccion:not(.oscura) .resultado.no b { color: #b42318; }

/* ── Organizadores: beneficios con icono (sin pasos numerados) */
.aliados-ce { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.beneficios-ce { display: grid; gap: 16px; margin: 28px 0; padding: 0; list-style: none; }
.beneficios-ce li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.beneficios-ce .icono { width: 44px; height: 44px; padding: 11px; border-radius: 12px; color: var(--acento-texto); background: color-mix(in oklab, var(--acento) 14%, var(--superficie)); }
.beneficios-ce span { padding-top: 3px; color: var(--suave); }
.beneficios-ce b { color: var(--tinta); }
.aliados-ce .portal { width: min(100%, 300px); height: auto; justify-self: center; border-radius: 22px; box-shadow: var(--sombra-3); }

/* ── Galería: fotos del feed a su tamaño (recortes de 280 px; no se estiran) */
.galeria-ce { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.galeria-ce .foto { aspect-ratio: 3 / 4; height: auto; box-shadow: var(--sombra-2); }
.galeria-ce .foto:nth-child(even) { margin-top: 28px; }

/* ── Contacto: banda amarilla en diagonal de sus piezas */
#contacto { position: relative; overflow: hidden; }
#contacto::after { content: ""; position: absolute; left: -6%; bottom: 46px; width: 40%; height: 22px; background: var(--acento); transform: rotate(-9deg); pointer-events: none;
  box-shadow: 0 34px 0 -6px color-mix(in oklab, var(--acento) 45%, transparent); }
#contacto .wrap { position: relative; z-index: 1; }
.horario dd a + a { margin-inline-start: 0; }

/* Cotizador (página aparte) */
.volver-landing { padding-top: 8px; }

/* ── Modo Empresa: símbolo blanco del autobús sobre el menú oscuro; sin heredar textos grises de la web */
.modo-empresa p, .app p, .modal p { max-width: none; }

@media (max-width: 1100px) {
  .servicios-ce, .flota-ce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicios-ce figure { max-width: none; aspect-ratio: 4 / 3.6; }
}
@media (max-width: 980px) {
  .hero-ce > .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-ce::before { inset: 52% 0 0 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
  .viaje-ce { padding-bottom: 0; display: grid; justify-items: center; }
  .mapa-ce { width: 100%; }
  .mapa-ce figcaption { position: static; margin-top: 4px; }
  .pase { position: relative; right: auto; bottom: auto; width: min(380px, 100%); margin-top: 18px; }
  .rutas-ce, .verificar-ce, .aliados-ce { grid-template-columns: minmax(0, 1fr); }
  .galeria-ce { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria-ce .foto:nth-child(even) { margin-top: 0; }
  .galeria-ce .foto:nth-child(n+4) { display: none; }
}
@media (max-width: 720px) {
  .marca-logo img { height: 34px; }
  .ruta-rapida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ruta-rapida label:first-child { grid-column: 1 / -1; border-inline-end: 0; border-bottom: 1px solid var(--linea); }
  .ruta-rapida label:nth-child(3) { border-inline-end: 0; }
  .ruta-rapida .btn { grid-column: 1 / -1; }
  .ruta-rapida select { min-height: 44px; }
  .hero-ce .prueba { gap: 10px 20px; }
  .hero-ce .prueba b { font-size: 1.2rem; }
  .viaje-ce { margin-inline: -8px; }
  .m-ciudad text { font-size: 13px; } .m-ciudad:not(.sel) text { display: none; }
  .ruta { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-block: 10px; }
  .ruta .mono { grid-column: 1; font-size: .8rem; }
  .ruta .mono + .mono { display: none; }
  .ruta .btn-cargar { grid-row: 1 / 3; grid-column: 2; }
  .tabla-rutas { padding: 4px 16px; }
  .servicios-ce { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .servicios-ce figure { aspect-ratio: 3 / 4; }
  .servicios-ce figcaption { font-size: 1.05rem; left: 10px; right: 10px; bottom: 10px; gap: 7px; }
  .servicios-ce figcaption .icono { width: 28px; height: 28px; padding: 6px; }
  .servicios-ce p { font-size: .88rem; margin-top: 10px; }
  .flota-ce { grid-template-columns: minmax(0, 1fr); }
  .unidad-ce { grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: none; }
  .unidad-foto { aspect-ratio: auto; min-height: 100%; }
  .unidad-foto .etiqueta-foto { top: auto; bottom: 8px; left: 8px; font-size: .7rem; padding: 6px 9px; }
  .unidad-ce .cuerpo { padding: 14px; gap: 10px; }
  .unidad-ce .largo { display: none; }
  .unidad-ce h3 { font-size: 1.4rem; }
  .specs { font-size: .84rem; gap: 6px; }
  .form-verificar .fila { flex-direction: column; }
  .oficiales { font-size: .92rem; gap: 4px 18px; }
  #app-cotizador fieldset.paso:nth-of-type(2) .opciones-app { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-cotizador fieldset.paso:nth-of-type(2) .opcion span { flex-direction: column; align-items: flex-start; gap: 2px; }
  #contacto::after { width: 62%; height: 16px; bottom: 30px; }
}
@media (max-width: 380px) {
  .pase-ruta b { font-size: 1.3rem; }
  .pase-pie b { font-size: 1.7rem; }
  .pase-barras { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-pulso { animation: none; opacity: 0; }
  .m-activa { transition: none; stroke-dashoffset: 0; }
}