/* Istmo Adventure · cuerpo de la página: Servicios y Vehículos, Experiencias, Agencias, Reservar y pie.
   Hereda las variables de index.html y sitio.css. */

:root {
  --sale: cubic-bezier(.23, 1, .32, 1);          /* entrada y respuesta a la mano */
  --mueve: cubic-bezier(.77, 0, .175, 1);         /* algo que se desplaza en pantalla */
}

/* Lo que el navegador pinta por su cuenta también es de la marca */
::selection { background: var(--ambar); color: var(--tinta-fija); }
html { scrollbar-color: var(--marcador) var(--noche); caret-color: var(--ambar-texto); }
a { text-underline-offset: .22em; }

.bloque { border-radius: 28px; scroll-margin-top: var(--marco); }
.bloque :is(h1, h2) {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* ---------- Servicios y Vehículos: el único bloque de color pleno ---------- */
.flota { padding: clamp(72px, 9vw, 132px) var(--borde) clamp(56px, 7vw, 96px); background: var(--banda); color: var(--tinta); overflow: hidden; }
.flota-cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px clamp(24px, 6vw, 90px); align-items: end; }
.flota :is(h1, h2) { font-size: clamp(2.2rem, 3.9vw, 3.7rem); text-wrap: wrap; }
.flota-cab p { margin: 0 0 .5em; max-width: 34ch; color: var(--tinta-suave); line-height: 1.5; }
.servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 34px); margin: clamp(44px, 6vw, 84px) 0 0; padding: 0; list-style: none; }
.servicios li { padding: 20px 0 6px; box-shadow: inset 0 1px 0 var(--tinta-linea); }
.servicios h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: -.02em; }
.servicios p { margin: 6px 0 0; max-width: 46ch; color: var(--tinta-suave); line-height: 1.5; }
.servicio-pedir { display: inline-block; margin-top: 2px; padding: 11px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.servicio-pedir:active { transform: scale(.97); }

/* La flota en 3D: los vehículos giran en un anillo y el elegido se acerca. cuerpo.js mueve cada uno. */
.garaje { min-width: 0; margin-top: clamp(6px, 1.6vw, 22px); }
.escenario { position: relative; max-width: 1120px; margin-inline: auto; aspect-ratio: 100 / 42; perspective-origin: 50% 24%; }
.escenario.vivo { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.escenario.vivo.agarra { cursor: grabbing; }
/* El piso: una mancha suave que asienta la escena */
.escenario::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 27, 40, .16), rgba(16, 27, 40, 0)); pointer-events: none; }
.coche-fijo { position: absolute; left: 50%; bottom: 7%; width: 46%; height: auto; transform: translateX(-50%); }
.coche { position: absolute; left: 50%; bottom: 7%; width: calc(var(--ancho) * var(--escala, 1) * 1%); margin: 0 0 0 calc(var(--ancho) * var(--escala, 1) * -.5%); padding: 0; border: 0; background: none; cursor: pointer; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.coche img { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.coche::before { content: ""; position: absolute; left: 8%; right: 6%; bottom: -3%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 27, 40, .44), rgba(16, 27, 40, 0)); }
/* El del frente no recibe clics: su caja es grande y taparía a los de atrás, que son los que se eligen */
.coche.frente { pointer-events: none; }
.agarra .coche { cursor: inherit; }

.garaje-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px clamp(20px, 4vw, 56px); margin-top: 20px; }
.garaje-pie .selector { grid-column: 1 / -1; justify-self: center; }

/* Pestañas: la capa activa es un duplicado recortado, así el color cambia sin parpadeos */
.selector { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tinta-linea); }
.selector button, .selector-activa span { padding: 11px 22px; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.selector button { border: 0; border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; }
.selector-activa {
  position: absolute;
  inset: 5px;
  display: flex;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  pointer-events: none;
  clip-path: inset(0 var(--der, 50%) 0 var(--izq, 0%) round 999px);
  transition: clip-path .28s var(--sale);
}
.veh-ficha { min-width: 0; }
.veh-datos { display: flex; flex-wrap: wrap; gap: 12px clamp(22px, 4.4vw, 64px); margin: 0; }
.veh-datos dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.veh-datos dd { margin: 3px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.5vw, 2.2rem); line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; }
.veh-ficha p { margin: 14px 0 0; max-width: 52ch; color: var(--tinta-suave); line-height: 1.45; }
.veh-datos, #veh-texto { transition: opacity .14s ease, filter .14s ease; }
.veh-ficha.cambia .veh-datos, .veh-ficha.cambia #veh-texto { opacity: 0; filter: blur(3px); }
.aviso-obra.tinta { color: var(--tinta); font-weight: 600; }
.boton.oscuro { background: var(--tinta); color: var(--papel); }
.boton.oscuro .flecha { background: var(--papel); color: var(--tinta); }

/* ---------- Experiencias: fotos reales en una tira que se arrastra ---------- */
.exp { padding: clamp(72px, 9vw, 132px) 0 clamp(48px, 6vw, 84px); background: var(--tinta); color: var(--papel); overflow: hidden; }
.exp-cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px clamp(24px, 6vw, 90px); align-items: end; padding-inline: var(--borde); }
.exp-cab p { margin: 0 0 .5em; max-width: 34ch; color: var(--papel-suave); line-height: 1.5; }
.tira {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(34px, 5vw, 64px);
  padding: 8px var(--borde) 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--borde);
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.tira::-webkit-scrollbar { display: none; }
.tira.agarra { cursor: grabbing; scroll-snap-type: none; }
.tira figure { flex: none; margin: 0; scroll-snap-align: start; }
.tira .marco { height: clamp(300px, 46vh, 470px); border-radius: 22px; overflow: hidden; background: var(--noche); }
.tira img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .7s var(--sale); }
.tira video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--noche); }
.tira figcaption { width: 0; min-width: 100%; margin-top: 12px; font-size: .9rem; color: var(--papel-suave); }
.tira-pie { display: flex; align-items: center; gap: 12px; padding-inline: var(--borde); }
.tira-pie[hidden] { display: none; }
.tira-n { margin-right: auto; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--papel-suave); }
.tira-n b { font-weight: 600; color: var(--papel); }

/* ---------- Para agencias y hoteles: un bloque callado ---------- */
.aliados {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  padding: clamp(64px, 8vw, 116px) var(--borde);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--papel);
}
.aliados p { margin: 22px 0 0; max-width: 44ch; color: var(--papel-suave); font-size: 1.05rem; line-height: 1.55; }
.aliados ul { margin: 0 0 28px; padding: 0; list-style: none; }
.aliados li { padding: 15px 0; box-shadow: inset 0 -1px 0 var(--linea); font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -.015em; }

/* ---------- Reservar ---------- */
.reservar {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
  padding: clamp(72px, 9vw, 132px) var(--borde);
  background: var(--tinta);
  color: var(--papel);
}
.reservar-txt p { margin: 22px 0 0; max-width: 40ch; color: var(--papel-suave); font-size: 1.05rem; line-height: 1.55; }
.wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #25d366;
  color: #06230f;
  font-weight: 600;
  transition: transform .16s var(--sale), filter .2s ease;
}
.wa svg { width: 20px; height: 20px; }
.wa:active { transform: scale(.97); }
.wa[aria-disabled="true"] { background: var(--vidrio); color: var(--papel-suave); box-shadow: inset 0 0 0 1px var(--linea); cursor: default; }
.aviso-obra { margin: 12px 0 0; font-size: .85rem; color: var(--ambar-texto); }

.forma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.campo { display: grid; gap: 7px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label, .campo .rotulo { font-size: .9rem; font-weight: 500; }
/* Campos de varias piezas: teléfono (código + número) y fecha de llegada (día, mes, año, calendario) */
.campo-fila { display: grid; gap: 8px; min-width: 0; }
.campo-fila.tel { grid-template-columns: auto minmax(0, 1fr); }
/* Listas desplegables propias (país del teléfono y "¿Qué te interesa?"). Las banderas son una tira, img/banderas.webp */
.desple { position: relative; min-width: 0; }
.bandera { flex: none; display: block; width: 28px; height: 21px; border-radius: 4px; background: url(/img/banderas.webp) 0 calc(var(--n, 0) * -21px) / 28px auto no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.bandera.mundo { background: currentColor; box-shadow: none; -webkit-mask: var(--globo) center / 28px 21px no-repeat; mask: var(--globo) center / 28px 21px no-repeat; --globo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 21' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='14' cy='10.5' r='7'/%3E%3Cpath d='M7 10.500h14M14 3.500c2.600 2 2.600 12 0 14M14 3.500c-2.600 2-2.600 12 0 14'/%3E%3C/svg%3E"); }
.desple-boton {
  display: flex; align-items: center; gap: 10px; height: 100%; min-height: 49px; padding: 0 38px 0 14px;
  border: 0; border-radius: 14px; background-color: var(--vidrio); box-shadow: inset 0 0 0 1px var(--linea);
  background-image: linear-gradient(45deg, transparent 50%, var(--papel) 50%), linear-gradient(135deg, var(--papel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
  color: var(--papel); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.desple-boton:focus-visible { outline: none; background-color: var(--vidrio-fuerte); box-shadow: inset 0 0 0 2px var(--ambar-texto); }
.campo.mal .desple-boton { box-shadow: inset 0 0 0 2px var(--error); }
.desple-lista {
  position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; width: min(19rem, calc(100vw - 36px)); max-height: 264px; margin: 0; padding: 6px;
  overflow-y: auto; overscroll-behavior: contain; list-style: none; border-radius: 16px; background: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linea), 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: 24px 0; transition: opacity .15s var(--sale), transform .15s var(--sale);
}
.desple-lista.abierta { opacity: 1; transform: none; }
.desple-lista:focus { outline: none; }
.desple-op { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; }
.pais-nombre { flex: 1; min-width: 0; }
.pais-prefijo { color: var(--papel-suave); font-variant-numeric: tabular-nums; }
.desple-op.activa { background: var(--vidrio-fuerte); }
.desple-op[aria-selected="true"] .pais-nombre { font-weight: 600; }
/* La de "¿Qué te interesa?" ocupa todo el ancho y lleva rótulos de grupo */
.desple.ancho .desple-boton { width: 100%; text-align: left; }
.desple.ancho .desple-lista { width: 100%; max-height: 318px; }
.desple-grupo { padding: 14px 10px 6px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar-texto); }
.desple-grupo:first-child { padding-top: 8px; }
@media (hover: hover) and (pointer: fine) { .desple-op:hover { background: var(--vidrio); } .desple-op.activa:hover { background: var(--vidrio-fuerte); } }
.campo-fila.fecha { grid-template-columns: 5.5rem 9.5rem 6.5rem auto; justify-content: start; align-items: center; }
.campo-fila.fecha select { padding-inline: 14px 32px; background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; }
.fila-llegada { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; align-items: start; }
.fila-grupo { grid-column: 1 / -1; display: grid; grid-template-columns: 7rem 7rem minmax(0, 1fr); gap: 18px 16px; align-items: start; }
.fila-grupo .campo[hidden] { display: none; }
@media (max-width: 700px) { .fila-grupo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fila-grupo #f-edades-campo { grid-column: 1 / -1; } }
.calendario { position: relative; display: block; }
.calendario[hidden] { display: none; }
.campo .calendario input { position: absolute; inset: 0; height: 100%; padding: 0; opacity: 0; pointer-events: none; }
.cal-texto { display: none; }
/* En pantallas angostas las tres listas ocupan la fila y el calendario baja como botón con texto */
@media (max-width: 520px) {
  .campo-fila.fecha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.3fr); }
  .campo-fila.fecha select { padding-inline: 12px 26px; background-position: calc(100% - 15px) 50%, calc(100% - 9px) 50%; }
  .calendario { grid-column: 1 / -1; justify-self: start; }
  .calendario .redondo { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 44px; padding-inline: 14px 18px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 500; }
  .cal-texto { display: inline; }
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--vidrio);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--papel);
  font: inherit;
  font-size: 1rem;
  transition: box-shadow .2s ease, background .2s ease;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--papel) 50%), linear-gradient(135deg, var(--papel) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
/* Fondo sólido (el mismo tono que el vidrio sobre la tinta): con uno translúcido, la lista del navegador sale clara */
.campo select { background-color: var(--campo-solido); }
.campo option, .campo optgroup { background: var(--tinta); color: var(--papel); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--marcador); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; background-color: var(--vidrio-fuerte); box-shadow: inset 0 0 0 2px var(--ambar-texto); }
.campo select:focus-visible { background-color: var(--campo-solido-foco); }
.campo .falla { display: none; margin: 0; font-size: .85rem; color: var(--error); }
.campo.mal input, .campo.mal select { box-shadow: inset 0 0 0 2px var(--error); }
.campo.mal .falla { display: block; }
.forma-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.forma-pie small { color: var(--papel-suave); font-size: .85rem; }
.forma button.boton { border: 0; cursor: pointer; }

.listo { grid-column: 1 / -1; padding: 22px; border-radius: 20px; background: var(--vidrio); box-shadow: inset 0 0 0 1px var(--linea); }
.listo h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; }
.listo pre { margin: 14px 0 0; padding: 16px; border-radius: 14px; background: var(--noche); color: var(--papel-suave); font: inherit; font-size: .95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.listo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.enlace-btn { padding: 6px 0; border: 0; background: none; color: var(--papel); font-weight: 500; text-decoration: underline; cursor: pointer; }

/* ---------- Pie ---------- */
.pie-sitio { padding: clamp(40px, 6vw, 72px) var(--borde) 26px; color: var(--papel); }
.pie-nombre { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 10.5vw, 6rem); line-height: .9; letter-spacing: -.04em; color: var(--ambar-texto); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 28px; margin-top: clamp(24px, 4vw, 44px); padding-top: 20px; box-shadow: inset 0 1px 0 var(--linea); color: var(--papel-suave); font-size: .9rem; }
.pie-fila nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-fila a { color: var(--papel); transition: color .2s ease; }
.pie-fila p { margin: 0; }

/* ---------- Respuesta a la mano ---------- */
.boton, .redondo, .selector button, .pastilla { -webkit-tap-highlight-color: transparent; }
.selector button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tira figure:hover img { transform: scale(1.04); }
  .wa:not([aria-disabled="true"]):hover { filter: brightness(1.08); }
  .pie-fila a:hover { color: var(--ambar-texto); }
  .enlace-btn:hover { color: var(--ambar-texto); }
}

/* ---------- Teléfono ---------- */
@media (max-width: 860px) {
  .bloque { border-radius: 22px; }
  .flota-cab, .exp-cab, .aliados, .reservar { grid-template-columns: minmax(0, 1fr); }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .escenario { aspect-ratio: 100 / 62; }
  .coche { --escala: 1.5; }
  .coche-fijo { width: 70%; }
  .garaje-pie { grid-template-columns: minmax(0, 1fr); }
  .flota, .aliados, .reservar { padding-inline: 18px; }
  .flota, .aliados, .reservar, .exp { padding-top: 100px; }
  .exp-cab, .tira-pie { padding-inline: 18px; }
  .tira { padding-inline: 18px; scroll-padding-inline: 18px; }
  .tira .marco { height: 320px; }
  .forma, .fila-llegada { grid-template-columns: minmax(0, 1fr); }
  .pie-sitio { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .selector-activa, .tira img { transition: none; }
}

/* ---------- Inicio: las puertas a cada página ---------- */
.portico { padding: clamp(34px, 5vw, 70px) var(--borde) clamp(20px, 3vw, 40px); color: var(--papel); }
.puerta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto;
  align-items: center;
  gap: 10px 28px;
  padding: clamp(18px, 2.4vw, 30px) clamp(8px, 1.4vw, 22px);
  box-shadow: inset 0 -1px 0 var(--linea);
  isolation: isolate;
  transition: color .22s ease, transform .16s var(--sale);
}
.puerta:first-child { box-shadow: inset 0 1px 0 var(--linea), inset 0 -1px 0 var(--linea); }
.puerta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 18px;
  background: var(--papel);
  clip-path: inset(100% 0 0 0 round 18px);
  opacity: 0;
  transition: clip-path .32s var(--sale), opacity 0s .32s;
}
.puerta-n { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.035em; }
.puerta-d { color: var(--papel-suave); line-height: 1.45; transition: color .22s ease; }
.puerta-f { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea); transition: transform .32s var(--sale), background .22s ease, color .22s ease; }
.puerta-f svg { width: 16px; height: 16px; }
.puerta:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .puerta:hover { color: var(--tinta); }
  .puerta:hover::before { clip-path: inset(0 0 0 0 round 18px); opacity: 1; transition: clip-path .32s var(--sale), opacity 0s; }
  .puerta:hover .puerta-d { color: var(--tinta-suave); }
  .puerta:hover .puerta-f { background: var(--tinta); color: var(--papel); transform: translateX(6px); box-shadow: none; }
}

/* ---------- Páginas interiores ---------- */
.interior .nav .entra { animation: none; }
.interior main > .bloque:first-child { padding-top: clamp(124px, 12vw, 164px); }

/* ---------- Paso entre páginas ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: barra; }
::view-transition-old(root) { animation: 160ms ease-out both pagina-sale; }
::view-transition-new(root) { animation: 380ms var(--sale) both pagina-entra; }
@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 860px) {
  .portico { padding-inline: 12px; }
  .puerta { grid-template-columns: minmax(0, 1fr) auto; }
  .puerta-d { grid-column: 1; grid-row: 2; }
  .puerta-f { grid-row: 1 / span 2; grid-column: 2; }
  .interior main > .bloque:first-child { padding-top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .puerta::before { transition: none; }
}

/* ---------- Lugares aliados ---------- */
.lugares, .muestra { padding: clamp(72px, 9vw, 132px) var(--borde); background: var(--tinta); color: var(--papel); }
.lugares-cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px clamp(24px, 6vw, 90px); align-items: end; }
.lugares-cab p { margin: 0 0 .5em; max-width: 36ch; color: var(--papel-suave); line-height: 1.5; }
.sitios { display: grid; gap: clamp(34px, 5vw, 72px); margin: clamp(34px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.sitio { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.sitio:nth-child(even) .sitio-foto { order: 2; }
.sitio-foto { position: relative; aspect-ratio: 3 / 2; border-radius: 24px; overflow: hidden; background: var(--noche); }
.sitio-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sale); }
.sitio-ejemplo { position: absolute; top: 14px; left: 14px; padding: 7px 13px; border-radius: 999px; background: var(--ambar); color: var(--tinta-fija); font-size: .82rem; font-weight: 600; }
.sitio h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.sitio-tipo { margin: 8px 0 0; color: var(--ambar-texto); font-weight: 500; }
.sitio-texto { margin: 14px 0 0; max-width: 46ch; color: var(--papel-suave); line-height: 1.55; }
.sitio-beneficio { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--vidrio); box-shadow: inset 0 0 0 1px var(--linea); line-height: 1.45; }
.sitio-beneficio b { font-weight: 600; }
.sitio-meta { margin: 14px 0 0; color: var(--papel-suave); font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .sitio:hover .sitio-foto img { transform: scale(1.04); } }

.convoca { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 6vw, 96px); align-items: end; padding: clamp(56px, 7vw, 100px) var(--borde); background: var(--banda); color: var(--tinta); }
.convoca p { margin: 0 0 22px; max-width: 38ch; color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.5; }

/* ---------- Suma tu negocio ---------- */
.negocios { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: start; padding: clamp(72px, 9vw, 132px) var(--borde); box-shadow: inset 0 0 0 1px var(--linea); color: var(--papel); }
.negocios-cab p { margin: 22px 0 0; max-width: 46ch; color: var(--papel-suave); font-size: 1.05rem; line-height: 1.55; }
.ventajas { margin: 0; padding: 0; list-style: none; }
.ventajas li { padding: 20px 0; box-shadow: inset 0 -1px 0 var(--linea); }
.ventajas li:first-child { padding-top: 0; }
.ventajas h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.02em; }
.ventajas p { margin: 6px 0 0; max-width: 44ch; color: var(--papel-suave); line-height: 1.5; }
.pasos { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--linea); counter-increment: paso; line-height: 1.45; }
.pasos li::before { content: counter(paso); font-family: var(--display); font-weight: 700; color: var(--ambar-texto); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .lugares, .muestra, .convoca, .negocios { padding-inline: 18px; }
  .lugares-cab, .sitio, .convoca, .negocios { grid-template-columns: minmax(0, 1fr); }
  .sitio:nth-child(even) .sitio-foto { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .sitio-foto img { transition: none; } }

/* ---------- Página de un tour ---------- */
.tour-cab { position: relative; flex: none; height: min(80svh, 780px); min-height: 520px; border-radius: 28px; overflow: hidden; isolation: isolate; color: var(--papel); }
.tour-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tour-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 17, .5) 0%, rgba(5, 10, 17, 0) 24%), linear-gradient(0deg, rgba(5, 10, 17, .84) 0%, rgba(5, 10, 17, .3) 46%, rgba(5, 10, 17, 0) 70%); }
.tour-txt { position: absolute; inset: auto var(--borde) clamp(26px, 5vh, 54px); }
.tour-ruta { margin: 0; font-size: .9rem; color: var(--papel-suave); }
.tour-ruta a { color: var(--papel); text-decoration: underline; }
.tour-txt h1 { margin: 10px 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 8.4vw, 6rem); line-height: .92; letter-spacing: -.04em; }
.tour-bajada { margin: 0; max-width: 46ch; color: var(--papel-suave); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; }
.t1-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.paradas-cab { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.paradas-cab .pasos { margin: 0; }
.pasos b { font-weight: 600; color: var(--papel); }
.pasos span { color: var(--papel-suave); }
.creditos { margin: 22px 0 0; padding-inline: var(--borde); font-size: .85rem; color: var(--papel-suave); }
@media (max-width: 860px) {
  .tour-cab { border-radius: 22px; }
  .tour-txt { inset-inline: 18px; }
  .paradas-cab { grid-template-columns: minmax(0, 1fr); }
  .creditos { padding-inline: 18px; }
}

/* ---------- Página de un tour: listas y foto única ---------- */
.lista-t { margin: 26px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.lista-t:first-child { margin-top: 0; }
.paradas-cab .pasos + .lista-t { margin-top: 30px; }
.paradas-cab .lista-t + .pasos { margin-top: 6px; }
.pasos.lista li::before { content: ""; width: 7px; height: 7px; margin-top: .52em; border-radius: 50%; background: var(--ambar); }
.tour-aviso { margin: 18px 0 0; max-width: 52ch; color: var(--ambar-texto); line-height: 1.5; }
.foto-unica { margin: clamp(34px, 5vw, 64px) var(--borde) 0; }
.foto-unica img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; border-radius: 22px; }
.foto-unica figcaption { margin-top: 12px; font-size: .9rem; color: var(--papel-suave); }
@media (max-width: 860px) { .foto-unica { margin-inline: 18px; } }

/* ---------- Página de un tour: efectos al bajar ---------- */
/* Solo valen con la clase .tour-mov, que pone cuerpo.js cuando el visitante permite movimiento. */
.tour-mov .tour-foto, .tour-mov .tour-txt { will-change: transform; }
.tour-mov .convoca { transform-origin: 50% 100%; }

/* Paradas: apagadas hasta que llegan a la vista; se enciende el texto, crece el número y se traza la línea */
.tour-mov .paradas-cab .pasos li { position: relative; box-shadow: none; opacity: .34; transition: opacity .5s var(--sale) var(--espera, 0ms); }
.tour-mov .paradas-cab .pasos li::before { transform: scale(.7); transform-origin: 0 50%; transition: transform .45s var(--sale) var(--espera, 0ms); }
.tour-mov .paradas-cab .pasos li::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--linea); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--sale) var(--espera, 0ms); }
.tour-mov .paradas-cab .pasos li.encendido { opacity: 1; }
.tour-mov .paradas-cab .pasos li.encendido::before { transform: none; }
.tour-mov .paradas-cab .pasos li.encendido::after { transform: scaleX(1); }

/* Galería: cada foto se destapa de abajo hacia arriba y se asienta. Va con animación (no transición)
   para no frenar después el acercamiento al pasar el cursor. */
.tour-mov .tira-caja:not(.revelada) .marco, .tour-mov .foto-unica:not(.revelada) img { clip-path: inset(100% 0 0 0); }
.tour-mov .tira-caja:not(.revelada) figcaption, .tour-mov .foto-unica:not(.revelada) figcaption { opacity: 0; }
.tour-mov .tira-caja.revelada .marco, .tour-mov .foto-unica.revelada img { animation: foto-abre .9s var(--sale) calc(var(--i, 0) * 80ms) backwards; }
.tour-mov .tira-caja.revelada .marco img { animation: foto-asienta 1.3s var(--sale) calc(var(--i, 0) * 80ms) backwards; }
.tour-mov .tira-caja.revelada figcaption, .tour-mov .foto-unica.revelada figcaption { animation: pie-entra .6s var(--sale) calc(var(--i, 0) * 80ms + 350ms) backwards; }
@keyframes foto-abre { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes foto-asienta { from { transform: scale(1.18); } to { transform: none; } }
@keyframes pie-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .servicios { grid-template-columns: minmax(0, 1fr); }
  .veh-datos { gap: 12px 22px; }
}

/* ---------- Página de un tour: qué se paga aparte ---------- */
.tour-pagos { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--vidrio); box-shadow: inset 0 0 0 1px var(--linea); }
.tour-pagos h3 { margin: 0 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar-texto); }
.tour-pagos p { margin: 0; max-width: 56ch; line-height: 1.5; }
.tour-pagos .tour-pagos-pie { margin-top: 8px; font-size: .88rem; color: var(--papel-suave); }

/* ---------- Vehículos: traslados a resorts del Pacífico ---------- */
.playas { padding: clamp(72px, 9vw, 132px) var(--borde) clamp(48px, 6vw, 80px); background: var(--tinta); color: var(--papel); }
.playas-cab { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 6vw, 90px); align-items: end; }
.playas-cab h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 3.9vw, 3.7rem); line-height: .98; letter-spacing: -.035em; }
.playas-cab p { margin: 0 0 22px; max-width: 46ch; color: var(--papel-suave); line-height: 1.55; }
.resorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.resorts img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; background: var(--noche); }
.resorts h3 { margin: 16px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.resorts p { margin: 4px 0 0; color: var(--papel-suave); font-size: .95rem; }
.resorts-otros { margin: 28px 0 0; max-width: 60ch; color: var(--papel-suave); line-height: 1.5; }
.playas .creditos { padding-inline: 0; }
@media (max-width: 860px) {
  .playas { padding-inline: 18px; }
  .playas-cab { grid-template-columns: minmax(0, 1fr); }
  .resorts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Recomendados: filtros Comer / Brindar / Comprar ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }
.filtros button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--vidrio); box-shadow: inset 0 0 0 1px var(--linea); color: var(--papel); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s ease, color .2s ease, transform .16s ease-out; }
.filtros button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: none; }
.filtros button:active { transform: scale(.97); }
.filtro-n { font-size: .8rem; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .filtros button[aria-pressed="false"]:hover { background: var(--vidrio-fuerte); } }
.lugares .sitios { margin-top: clamp(28px, 4vw, 48px); }
.sitio[hidden] { display: none; }
.sitio.aparece { animation: sitio-aparece .45s var(--sale) both; }
@keyframes sitio-aparece { from { opacity: 0; transform: translateY(12px); } }
.sitios-vacio { margin: 28px 0 0; padding: 22px; border-radius: 18px; background: var(--vidrio); color: var(--papel-suave); text-align: center; }

/* ---------- Agencias ---------- */
.agencia-cab .tour-ruta { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; color: var(--ambar); }
.agencia-cab h1 { max-width: 14ch; }
.agencia-que { padding: clamp(72px, 9vw, 132px) var(--borde) clamp(56px, 7vw, 96px); background: var(--tinta); color: var(--papel); }
.agencia-servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agencia-servicios p { line-height: 1.45; }
.agencia-como { padding: clamp(64px, 8vw, 112px) var(--borde); background: var(--tinta); color: var(--papel); }
.agencia-como h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 3.9vw, 3.7rem); line-height: .98; letter-spacing: -.035em; }
.agencia-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.agencia-pasos li { padding: 26px 24px 28px; border-radius: 22px; background: var(--vidrio); box-shadow: inset 0 0 0 1px var(--linea); }
.agencia-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ambar); color: var(--tinta-fija); font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.agencia-pasos h3 { margin: 20px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; }
.agencia-pasos p { margin: 8px 0 0; color: var(--papel-suave); line-height: 1.5; }
.agencia-coches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin: clamp(34px, 5vw, 60px) 0 0; padding: 0; list-style: none; align-items: end; }
.agencia-coches img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(16, 27, 40, .28)); }
.agencia-coches li:nth-child(1) img { width: 82%; }
.agencia-coches li:nth-child(2) img { width: 92%; }
.agencia-coches h3 { margin: 16px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; }
.agencia-coches p { margin: 2px 0 0; color: var(--tinta-suave); }
.agencia-razones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .agencia-que, .agencia-como { padding-inline: 18px; }
  .agencia-servicios, .agencia-pasos, .agencia-razones { grid-template-columns: minmax(0, 1fr); }
  .agencia-coches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .agencia-coches h3 { font-size: 1.05rem; }
  .agencia-coches p { font-size: .85rem; }
}
@media (min-width: 861px) and (max-width: 1100px) { .agencia-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Paleta azul marino y dorado (2026-10-15): las franjas que eran ámbar ahora son azul marino. Dentro de ellas
   --tinta (el texto) pasa a crema y --papel al azul, así sus piezas se invierten solas. */
:root :is(.flota, .convoca), :root[data-tema] :is(.flota, .convoca) {
  --tinta: #f4eee0;
  --tinta-suave: rgba(244, 238, 224, .76);
  --tinta-linea: rgba(244, 238, 224, .2);
  --papel: #101b28;
}
.flota .escenario::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)); }
.flota .coche::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.agencia-coches img { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .4)); }
.listo-nota { margin: 14px 0 0; font-size: .9rem; color: var(--papel-suave); }
.listo-num { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.listo-num a { color: var(--ambar-texto); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.filtros[hidden] { display: none; }

/* ---------- Visor de fotos: la foto crece desde su miniatura y se ve completa ---------- */
.tira .ampliable .marco { cursor: zoom-in; }
.tira .ampliable .marco:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
html.visor-abierto { overflow: hidden; }
.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #f4eee0; overflow: hidden; }
.visor::backdrop { background: transparent; }
.visor-fondo { position: absolute; inset: 0; background: rgba(5, 10, 17, .97); opacity: 0; transition: opacity .32s ease; }
.visor.abierto .visor-fondo { opacity: 1; }
.visor-img { position: absolute; display: block; object-fit: contain; border-radius: 14px; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.visor .redondo { position: absolute; z-index: 2; color: #f4eee0; background: rgba(244, 238, 224, .12); box-shadow: inset 0 0 0 1px rgba(244, 238, 224, .22); opacity: 0; transition: opacity .25s ease .12s, background .2s ease; }
.visor.abierto .redondo { opacity: 1; }
.visor .redondo:hover { background: #f4eee0; color: #101b28; }
.visor .redondo[hidden] { display: none; }
.visor-cerrar { top: 18px; right: 18px; }
.visor-ant, .visor-sig { top: 50%; margin-top: -22px; }
.visor-ant { left: 22px; }
.visor-sig { right: 22px; }
.visor-barra { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 16px; padding: 18px 24px 22px; opacity: 0; transition: opacity .25s ease .12s; }
.visor.abierto .visor-barra { opacity: 1; }
.visor-cuenta { margin: 0; font-size: .85rem; font-variant-numeric: tabular-nums; color: rgba(244, 238, 224, .7); white-space: nowrap; }
.visor-pie { margin: 0; font-size: .95rem; line-height: 1.4; }
@media (max-width: 700px) {
  .visor-ant, .visor-sig { top: auto; bottom: 18px; margin-top: 0; }
  .visor-ant { left: auto; right: 74px; }
  .visor-sig { right: 18px; }
  .visor-barra { flex-direction: column; gap: 4px; padding: 0 140px 22px 18px; }
}
.visor-img { cursor: zoom-in; transform-origin: 50% 50%; }
.visor.cerca .visor-img { cursor: grab; }
.visor.cerca .visor-img.arrastra { cursor: grabbing; }
.visor.cerca .visor-barra, .visor.cerca .visor-ant, .visor.cerca .visor-sig { opacity: 0; pointer-events: none; }
.visor-ayuda { margin: 0 0 0 auto; font-size: .82rem; color: rgba(244, 238, 224, .6); white-space: nowrap; }
@media (max-width: 700px) { .visor-ayuda { margin: 4px 0 0; } }

/* ---------- Portada: "Ellos ya viajaron con nosotros", un cintillo con fotos de clientes que cambian solas ---------- */
.confianza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 3.4vw, 48px) var(--borde); background: var(--tinta); color: var(--papel); overflow: hidden; }
.confianza-cab { display: grid; gap: 18px; justify-items: start; }
.confianza h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.ventana { position: relative; width: 100%; max-width: 560px; aspect-ratio: 2000 / 625; justify-self: end; margin: 0; border-radius: 18px; overflow: hidden; background: var(--noche); }
.ventana-foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.ventana-foto.activa { opacity: 1; z-index: 1; }
.ventana-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ventana-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; background: linear-gradient(0deg, rgba(5, 10, 17, .75), rgba(5, 10, 17, 0)); color: #f4eee0; font-size: .8rem; }
.ventana-puntos { position: absolute; z-index: 2; right: 14px; bottom: 15px; display: flex; gap: 6px; }
.ventana-puntos button { position: relative; width: 20px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(244, 238, 224, .35); cursor: pointer; overflow: hidden; }
.ventana-puntos button::before { content: ''; position: absolute; inset: -10px -2px; }
.ventana-puntos button[aria-current='true']::after { content: ''; position: absolute; inset: 0; background: var(--ambar); transform-origin: 0 50%; animation: ventana-avance 5s linear forwards; }
.ventana.quieta .ventana-puntos button[aria-current='true']::after { animation-play-state: paused; }
@keyframes ventana-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 860px) { .confianza { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .ventana { justify-self: stretch; } .ventana-foto figcaption { padding-right: 110px; } .ventana-puntos { gap: 4px; } .ventana-puntos button { width: 12px; } }
@media (prefers-reduced-motion: reduce) { .ventana-foto, .ventana-foto img { transition: none; transform: none; } .ventana-puntos button[aria-current='true']::after { animation: none; } }
@media (max-width: 700px) { .ventana-foto figcaption { display: none; } }

/* "¿Qué te interesa?" con varios: cada opción lleva su casilla */
.rotulo-pista { margin-left: 6px; font-weight: 400; color: var(--papel-suave); }
.desple-lista.varios .desple-op { display: flex; align-items: center; gap: 12px; }
.desple-lista.varios .desple-op::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.desple-lista.varios .desple-op[aria-selected="true"]::before { background: var(--ambar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23101b28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
#f-interes-boton { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 46px; }