/* ============================================================
   ViVIP — /renta/ (renta por día con chofer)
   Solo lo propio de esta página; tokens, header, hero, secciones,
   FAQ y footer vienen de main.css.
   ============================================================ */

/* Sin banner del acceso directo en esta página. */
.sin-acceso { --acceso-h: 0px; }

#cotizar, #usos, #destinos, #van, #preguntas {
  scroll-margin-top: calc(var(--header-h) + 22px);
}

/* La van va a la derecha de la foto para no quedar bajo el texto. En móvil el
   encuadre se corre hacia ella y el monolito. */
.hero--renta .hero__img { object-position: 50% 60%; }
@media (max-width: 720px) { .hero--renta .hero__img { object-position: 74% 60%; } }
.hero--renta h1 { max-width: 13ch; }

/* ============ Cotizador ============ */
/* Reusa .booking__card (tarjeta blanca que se monta sobre el hero); aquí se
   anula su grid de 4 columnas: encabezado, motivo y campos van apilados. */
.cotizador { display: grid; gap: 16px; }
@media (min-width: 900px) { .cotizador { grid-template-columns: 1fr; } }

.cotizador__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cotizador__title { font-size: clamp(24px, 2.8vw, 30px); }
.cotizador__sub { font-size: 15.5px; color: var(--text-muted); }

.cotizador__motivo {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px;
  background: var(--sand-50); border-radius: var(--radius-lg);
}
@media (min-width: 560px) {
  .cotizador__motivo { grid-template-columns: repeat(4, 1fr); border-radius: var(--radius-pill); justify-self: start; width: min(100%, 520px); }
}
.cotizador__motivo label { position: relative; cursor: pointer; }
.cotizador__motivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cotizador__motivo span {
  display: block; text-align: center; padding: 11px 14px; border-radius: var(--radius-pill);
  font: 600 15.5px/1 var(--font-ui); color: var(--text-muted); transition: background .15s, color .15s;
}
.cotizador__motivo input:checked + span { background: var(--navy-900); color: var(--text-on-dark); }
.cotizador__motivo input:focus-visible + span { box-shadow: var(--shadow-focus); }

/* Móvil: destino y fecha a todo lo ancho; días y personas comparten renglón.
   Con los tres en uno, el campo de fecha no cabía a 390 px y desbordaba. */
.cotizador__grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: end; }
.cotizador__grid > * { min-width: 0; }
.cotizador__grid .field--destino,
.cotizador__grid .field--fecha,
.cotizador__grid > .btn { grid-column: 1 / -1; }
.cotizador__grid > .btn { height: 54px; }
/* Escritorio: un renglón de campos y el botón abajo, como el buscador de la
   ruta. La fila va fija para que el orden del DOM no mueva nada. */
@media (min-width: 760px) {
  .cotizador__grid { grid-template-columns: 1.7fr 1fr 0.7fr 0.8fr; }
  .cotizador__grid .field--destino { grid-column: 1; grid-row: 1; }
  .cotizador__grid .field--fecha { grid-column: 2; grid-row: 1; }
  .cotizador__grid > .btn { grid-row: 2; }
}
.cotizador .notice { margin-top: 0; }

/* ============ Usos ============ */
.usos { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .usos { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); } }
.uso {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 28px 26px;
}
.uso svg { color: var(--text-accent); }
.uso h3 { font-size: 24px; margin: 16px 0 10px; }
.uso p { font-size: 16px; color: var(--text-muted); }

/* ============ Destinos ============ */
.destinos__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .destinos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .destinos__grid { grid-template-columns: repeat(3, 1fr); } }

/* Grid y no flex dentro del botón: el nombre y la leyenda van en renglones
   distintos y la flecha se queda centrada a la derecha. */
.destino {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 5px;
  align-items: center; text-align: left; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 18px 20px; font-family: var(--font-ui);
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
}
.destino b { grid-column: 1; grid-row: 1; font: 500 22px/1.15 var(--font-display); color: var(--navy-900); }
.destino span { grid-column: 1; grid-row: 2; font-size: 14.5px; color: var(--text-muted); }
.destino::after {
  content: ""; grid-column: 2; grid-row: 1 / 3; width: 20px; height: 20px;
  background-color: var(--text-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center/contain no-repeat;
  transition: transform .18s var(--ease-out);
}
.destino:hover { border-color: var(--navy-600); box-shadow: var(--shadow-md); }
.destino:hover::after { transform: translateX(3px); }
.destino:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.destinos__otro { margin-top: 26px; font-size: 15.5px; color: var(--text-muted); }
.destinos__otro a { color: var(--navy-900); font-weight: 600; text-underline-offset: 4px; }
.destinos__otro a:hover { color: var(--navy-600); }

@media (prefers-reduced-motion: reduce) {
  .destino, .destino::after { transition: none; }
}