/* =====================================================================
   CARIBEXUS - Renta de vehículos (/renta-de-vehiculos y /renta-de-vehiculos/<modelo>)
   Se carga DESPUÉS de styles.css, home.css, transfer.css y galeria.css. Todo lleva el prefijo .rn-
   ===================================================================== */

/* ---------- Hero ---------- */
.home #hero.rn-hero {
    min-height: 0; padding: 64px 0 70px;
    background:
        radial-gradient(circle at 85% 18%, rgba(0, 168, 107, .40), transparent 55%),
        radial-gradient(circle at 8% 100%, rgba(255, 193, 7, .10), transparent 45%),
        linear-gradient(135deg, #04251b 0%, #07603f 100%);
}
.home #hero.rn-hero-det { padding: 46px 0 52px; }
.rn-hero .hero-shade { display: none; }
.rn-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
.rn-hero .container { padding-left: 16px; padding-right: 16px; }
.rn-hero .hero-title { max-width: 820px; font-size: clamp(2.1rem, 5vw, 3.5rem); }
.rn-hero-det .hero-title { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.rn-hero .hero-sub { max-width: 640px; }
.rn-hero .tf-link-claro { align-self: center; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; padding: 10px 6px; }
.rn-hero .tf-bread { margin: 0 0 12px; font-size: .85rem; color: #d3ece0; }
.rn-hero .tf-bread a { color: #fff; text-decoration: underline; }
.rn-puntos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: #e6f6ee; font-size: .92rem; font-weight: 600; }

/* ---------- Filtro por pasajeros ---------- */
.rn-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; }
.rn-filtro {
    padding: 8px 20px; font: inherit; font-size: .92rem; font-weight: 700; color: var(--g3);
    background: #fff; border: 2px solid #bfe3d0; border-radius: 999px; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.rn-filtro:hover { border-color: var(--g1); }
.rn-filtro.is-on { color: #fff; background: var(--g2); border-color: var(--g2); }

/* ---------- Tarjetas del catálogo ---------- */
.rn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rn-card {
    display: flex; flex-direction: column; overflow: hidden; background: #fff;
    border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 24px rgba(11, 61, 46, .07);
    transition: transform .3s, box-shadow .3s;
}
.rn-card[hidden] { display: none; }
.rn-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(11, 61, 46, .15); }
.rn-media { position: relative; background: #0b1511; overflow: hidden; }
.rn-media-link { display: block; }
.rn-foto-img { display: block; width: 100%; height: 230px; object-fit: cover; transition: transform .5s; }
.rn-card:hover .rn-foto-img { transform: scale(1.04); }
.rn-sinfoto {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 230px; color: #9fb8ad; background: linear-gradient(135deg, #12251d, #1b3a2e);
}
.rn-sinfoto span { font-size: 3rem; line-height: 1; }
.rn-sinfoto small { font-size: .82rem; letter-spacing: .04em; }
.rn-tipo {
    position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px;
    background: rgba(4, 37, 27, .82); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}
.rn-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.rn-body h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.rn-body h3 a { color: var(--ink); text-decoration: none; }
.rn-body h3 a:hover { color: var(--g2); }
.rn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.rn-chips li { padding: 3px 10px; font-size: .78rem; font-weight: 700; color: var(--g3); background: #e9f7f0; border-radius: 999px; }
.rn-desc { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--txt); }
.rn-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.rn-precio { margin: 0; font-size: .82rem; color: var(--mut); line-height: 1.1; }
.rn-precio strong, .rn-precio .pnum { font-size: 1.6rem; font-weight: 800; color: var(--g2); }
.rn-consulta strong { font-size: 1.05rem; }
.rn-pie .tf-btn { white-space: nowrap; }

/* ---------- Por qué Caribexus ---------- */
.rn-porque { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 24px; }
.rn-porque > div { padding: 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.rn-porque span { font-size: 1.9rem; }
.rn-porque h3 { margin: 8px 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.rn-porque p { margin: 0; font-size: .92rem; color: var(--mut); }

/* ---------- Página del vehículo ---------- */
.rn-det { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; padding-top: 34px; padding-bottom: 40px; }
.rn-det-main { min-width: 0; }
.rn-det-media { border-radius: 20px; overflow: hidden; background: #0b1511; box-shadow: 0 14px 34px rgba(11, 61, 46, .14); }
.rn-det-media .rn-foto img, .rn-det-media .tg-principal { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.rn-det-media .rn-sinfoto { height: 340px; }
.rn-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; padding: 0; list-style: none; }
.rn-resumen li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.rn-resumen li span { font-size: 1.3rem; }
.rn-resumen b { font-size: .98rem; color: var(--ink); line-height: 1.2; }
.rn-resumen small { font-size: .76rem; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }

.rn-art h2, .rn-faq-v h2 { margin: 34px 0 12px; font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.rn-art p { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.7; color: var(--txt); }
.rn-checks { margin: 12px 0 4px; padding: 0; list-style: none; }
.rn-checks li { position: relative; margin: 0 0 8px; padding-left: 28px; font-size: 1rem; line-height: 1.5; color: var(--txt); }
.rn-checks li::before { content: "\F272"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: .8rem; font-weight: 800; color: #fff; background: var(--g1); border-radius: 50%; }
.rn-ficha { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.rn-ficha > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.rn-ficha > div:nth-child(odd) { background: #f5fbf8; }
.rn-ficha > div:last-child { border-bottom: 0; }
.rn-ficha dt { margin: 0; font-size: .86rem; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.rn-ficha dd { margin: 0; font-size: .98rem; font-weight: 600; color: var(--ink); }
.rn-nota { margin: 10px 0 0 !important; font-size: .84rem !important; color: var(--mut) !important; }
.rn-aeros { margin: 8px 0 12px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rn-aeros li { padding: 9px 12px; font-size: .9rem; font-weight: 600; color: var(--g3); background: #e9f7f0; border-radius: 12px; }
.rn-pasos { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.rn-pasos li { position: relative; margin: 0 0 12px; padding: 4px 0 4px 46px; font-size: 1rem; line-height: 1.55; color: var(--txt); counter-increment: paso; }
.rn-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 32px; height: 32px; line-height: 32px; text-align: center; font-weight: 800; color: #fff; background: var(--g2); border-radius: 50%; }

/* ---------- Tarjeta de reserva ---------- */
.rn-det-side { position: sticky; top: 84px; scroll-margin-top: 84px; }
.rn-book { padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 44px rgba(11, 61, 46, .14); }
.rn-book-precio { margin: 0; font-size: .9rem; color: var(--mut); }
.rn-book-precio strong { font-size: 2.1rem; font-weight: 800; color: var(--g2); }
.rn-book-t { margin: 6px 0 4px; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.rn-book-sub { margin: 0 0 16px; font-size: .88rem; color: var(--mut); }
.rn-campo { margin: 0 0 12px; flex: 1 1 0; min-width: 0; }
.rn-campo label { display: block; margin: 0 0 5px; font-size: .84rem; font-weight: 700; color: var(--ink); }
.rn-campo label small { font-weight: 500; color: var(--mut); }
.rn-campo input, .rn-campo select {
    width: 100%; min-height: 46px; padding: 0 12px; font: inherit; font-size: .98rem; color: var(--txt);
    background: #fff; border: 1.5px solid #cfdcd5; border-radius: 12px;
}
.rn-campo input:focus, .rn-campo select:focus { outline: 0; border-color: var(--g1); box-shadow: 0 0 0 3px rgba(0, 168, 107, .18); }
.rn-fila { display: flex; gap: 10px; }
.rn-total { margin: -2px 0 12px; padding: 10px 14px; font-size: .88rem; font-weight: 700; color: var(--g3); background: #e9f7f0; border-radius: 12px; }
.rn-total[hidden] { display: none; }
.rn-legal { margin: 12px 0 0; font-size: .78rem; color: var(--mut); text-align: center; }
.rn-gracias { margin: 6px 0 0; text-align: center; color: var(--mut); }
.rn-wa { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: .92rem; font-weight: 700; color: var(--g3); text-decoration: none; }
.rn-wa:hover { color: var(--g2); text-decoration: underline; }
.rn-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Evita que los campos se salgan de la tarjeta */
.rn-book, .rn-book *, .rn-card, .rn-ficha { box-sizing: border-box; }

/* Barra fija "Book now" (solo celular) */
.rn-barra { display: none; }

@media (max-width: 991px) {
    .rn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-det { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .rn-det-side { position: static; }
    .rn-porque { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .home #hero.rn-hero { padding: 42px 0 48px; }
    .home #hero.rn-hero-det { padding: 32px 0 38px; }
    .rn-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .rn-foto-img, .rn-sinfoto { height: 210px; }
    .rn-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-ficha > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .rn-aeros { grid-template-columns: minmax(0, 1fr); }
    .rn-fila { flex-direction: column; gap: 0; }
    .rn-book { padding: 20px 16px; }
    .rn-hero .hero-cta .hbtn-gold { flex: 1 1 100%; }
    .rn-barra {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11, 61, 46, .14); transition: transform .3s;
    }
    .rn-barra.is-off { transform: translateY(110%); }
    .rn-barra b { font-size: 1.3rem; color: var(--g2); }
    .rn-barra small { color: var(--mut); }
    .page-renta .to-top { bottom: 84px; }
    .page-renta .site-footer { padding-bottom: 70px; }
}
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* Portada de /renta-de-vehiculos con foto de fondo (10-nov-2026) */
.rn-hero-portada { position: relative; overflow: hidden; }
.rn-hero-portada .rn-hero-img { position: absolute; top: 0; bottom: 0; left: 32%; width: 68%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: 0; }
.rn-hero-portada .hero-shade { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #04251b 0%, #04251b 32%, rgba(4, 37, 27, .55) 52%, rgba(4, 37, 27, .05) 100%); }
.rn-hero-portada .hero-grid { position: relative; z-index: 2; }
@media (max-width: 767px) {
    .rn-hero-portada .rn-hero-img { left: 0; width: 100%; }
    .rn-hero-portada .hero-shade { background: linear-gradient(180deg, rgba(4, 37, 27, .6) 0%, rgba(4, 37, 27, .92) 100%); }
}

/* Portada de cada vehículo: playa de fondo + foto del vehículo a la derecha */
.rn-hero-veh .rn-hero-img { left: 0; width: 100%; object-position: 50% 60%; }
.rn-hero-veh .hero-shade { background: linear-gradient(90deg, rgba(4, 37, 27, .94) 0%, rgba(4, 37, 27, .82) 50%, rgba(4, 37, 27, .55) 100%); }
.rn-hero-veh .hero-grid { display: flex; align-items: center; gap: 36px; }
.rn-hero-veh .hero-copy { flex: 1 1 55%; min-width: 0; }
.rn-hero-auto { flex: 0 0 40%; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.rn-hero-auto img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
    .rn-hero-veh .hero-grid { display: block; }
    .rn-hero-auto { display: none; }
}