/* ==========================================================================
   Reserva Directa — superficie de venta.
   Hereda el sistema visual de ../../css/style-2.css. Aquí sólo vive lo que
   esta página añade: la galería de demos, la banda de dolor, la escalera de
   módulos y el cierre. Escrito mobile-first (min-width), al revés que la hoja
   madre, porque aquí el 85% del tráfico llega por teléfono y el caso estrecho
   es el que manda.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera simplificada: sin navegación. Cada enlace del menú corporativo es
   una fuga hacia contenido que no le habla al hotelero, así que la cabecera
   se reduce a marca y acción.
   -------------------------------------------------------------------------- */

.rd-header .container {
    gap: 1rem;
}

.rd-header-cta {
    margin-left: auto;
}

/* Lockup de servicio: Travisafe respalda, Reserva Directa es lo que se lee.
   El hotelero llega aquí desde un WhatsApp que le dijo "Reserva Directa"; si
   arriba solo dice "travisafe · connect & discover" —una bajada escrita para
   viajeros— tiene que adivinar que está en el sitio correcto. La marca no se
   quita: el servicio vive bajo la identidad de Travisafe, no al lado. Por eso
   el logotipo baja a escala de aval y el nombre del producto toma el peso. */
.rd-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.rd-header .brand img {
    width: 104px;
}

.rd-brand-sep {
    flex: none;
    width: 1px;
    height: 26px;
    background: var(--border-strong);
}

.rd-brand-name {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .rd-brand { gap: 0.7rem; }
    .rd-header .brand img { width: 88px; }
    .rd-brand-sep { height: 22px; }
    .rd-brand-name { font-size: 0.92rem; }
}

/* La acción lleva dos etiquetas y el ancho decide cuál se usa. Acortarla es
   preferible a encoger la marca: en un teléfono de 360 px, "Consultar tarifas"
   parte en dos líneas y se monta sobre el nombre del producto. */
.rd-cta-corta { display: none; }

@media (max-width: 420px) {
    .rd-header .container { gap: 0.6rem; }
    .rd-brand { gap: 0.5rem; }
    .rd-header .brand img { width: 68px; }
    .rd-brand-sep { height: 18px; }
    .rd-brand-name { font-size: 0.82rem; }

    .rd-cta-larga { display: none; }
    .rd-cta-corta { display: inline; }

    .site-header .rd-header-cta {
        padding: 0.55rem 0.9rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Hero: el titular presenta y la galería prueba. No hay promesa que preceda
   a la evidencia.
   -------------------------------------------------------------------------- */

.rd-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--header-h) + 4rem) 6rem;
    overflow: hidden;
    isolation: isolate;
}

/* La fotografía va a sangre: de un extremo a otro, recortada por cover, nunca
   deformada. Es el mismo patrón del hero de la home. */
.rd-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Dos velos: uno vertical que asienta el pie del bloque y otro lateral que
   despeja la columna de texto sin apagar la fotografía entera. El lateral es
   fuerte porque la izquierda de esta foto tiene la ventana iluminada, que es
   justo donde cae el titular. */
.rd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(10, 10, 15, 0.48) 0%, rgba(10, 10, 15, 0.16) 42%, rgba(10, 10, 15, 0.92) 100%),
        linear-gradient(90deg, rgba(10, 10, 15, 0.86) 0%, rgba(10, 10, 15, 0.60) 32%, rgba(10, 10, 15, 0.14) 58%, rgba(10, 10, 15, 0) 74%);
}

.rd-hero > .container {
    position: relative;
    z-index: 1;
}

.rd-hero-head {
    max-width: 38rem;
}

.rd-hero h1 {
    font-size: clamp(2.1rem, 8.5vw, 4rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.rd-hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.rd-hero-sub {
    /* Más claro que --text-dim: este párrafo va sobre fotografía, no sobre
       fondo sólido, y el gris del sistema no alcanza el 4.5:1 donde asoma la
       pantalla clara del portátil. */
    color: #c3c3cd;
    font-size: clamp(1rem, 4vw, 1.18rem);
    max-width: 44ch;
    margin-bottom: 1.85rem;
}

.rd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.rd-hero-actions .btn {
    flex: 1 1 100%;
}

@media (min-width: 560px) {
    .rd-hero-actions .btn {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .rd-hero-head > * {
        animation: rise 0.9s var(--ease-out) backwards;
    }

    .rd-hero-sub {
        animation-delay: 0.08s;
    }

    .rd-hero-actions {
        animation-delay: 0.15s;
    }

    .rd-hero-bg {
        animation: settle 1.6s var(--ease-out) backwards;
    }
}

/* --------------------------------------------------------------------------
   Galería de demos. El marco de navegador es el contenedor honesto: el
   visitante reconoce que está viendo un sitio, no una ilustración.
   -------------------------------------------------------------------------- */

/* En el teléfono no se superponen texto e imagen. El velo que exige el
   contraste AA sobre 390px apaga la fotografía hasta volverla un rectángulo
   negro: son objetivos incompatibles. La foto pasa a ocupar su propia banda
   superior, casi sin velo, y el texto va debajo sobre fondo sólido. Mismo
   criterio que el hero de la home. */
@media (max-width: 760px) {
    .rd-hero {
        display: block;
        min-height: auto;
        padding-block: 0 3.5rem;
    }

    .rd-hero-bg {
        position: relative;
        height: 46svh;
        z-index: 0;
        object-position: 58% center;
    }

    .rd-hero::before {
        inset: 0 0 auto 0;
        height: 46svh;
        z-index: 1;
        background: linear-gradient(180deg,
            rgba(10, 10, 15, 0.70) 0%,
            rgba(10, 10, 15, 0.12) 38%,
            rgba(10, 10, 15, 0.80) 88%,
            rgba(10, 10, 15, 1) 100%);
    }

    .rd-hero .container {
        position: relative;
        z-index: 2;
        padding-top: 2.25rem;
    }
}

.demo {
    display: block;
    text-decoration: none;
    color: inherit;
}

.demo-frame {
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 62%);
    box-shadow:
        0 22px 44px -26px rgba(0, 0, 0, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    overflow: hidden;
    transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
        box-shadow 0.45s var(--ease-out);
}

.demo:hover .demo-frame,
.demo:focus-visible .demo-frame {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent-cool) 45%, transparent);
    box-shadow:
        0 34px 60px -28px rgba(0, 0, 0, 0.98),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.demo-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.28);
}

.demo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.demo-url {
    margin-left: 0.6rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

/* La pantalla: la captura real de cada demo. Sustituye a la miniatura dibujada
   que hizo de marcador mientras los cuatro sitios no existían. La proporción
   se fija en el contenedor para que la tarjeta no salte al cargar la imagen. */
.demo-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #0d0d14;
}

.demo-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}

.demo:hover .demo-media img,
.demo:focus-visible .demo-media img {
    transform: scale(1.03);
    filter: saturate(1.08);
}

.demo-meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.85rem 0.25rem 0;
}

.demo-kind {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-cool);
}

/* El nombre del hospedaje pesa más que su categoría: es lo que el hotelero
   reconoce como un negocio real y no como un rótulo de ejemplo. */
.demo-kind b {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}

.demo-go {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    transition: color 0.25s var(--ease-out);
}

/* Ahora los cuatro demos están publicados y la tarjeta vuelve a ser un enlace:
   la etiqueta dejó de anunciar un estado y anuncia la acción, así que lleva
   flecha en vez de punto y se enciende con el resto de la tarjeta. */
.demo-soon {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-dim);
    transition: color 0.25s var(--ease-out);
}

.demo-soon::after {
    content: '';
    width: 0.85rem;
    height: 0.5rem;
    background: currentColor;
    clip-path: polygon(0 36%, 62% 36%, 62% 0, 100% 50%, 62% 100%, 62% 64%, 0 64%);
    transition: transform 0.25s var(--ease-out);
}

.demo:hover .demo-soon,
.demo:focus-visible .demo-soon {
    color: var(--accent);
}

.demo:hover .demo-soon::after,
.demo:focus-visible .demo-soon::after {
    transform: translateX(3px);
}

.demo:hover .demo-go,
.demo:focus-visible .demo-go {
    color: var(--accent);
}

/* La galería: cuatro demos de igual peso. En el teléfono se deslizan en
   horizontal —deja ver que hay más sin estirar la página— y a partir de
   tablet se reparten en rejilla. */
.rd-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Sin esto el ajuste de scroll alinea la primera tarjeta con el borde del
       scrollport y se come el padding: la tarjeta queda pegada al filo de la
       pantalla, fuera de la columna de texto que respeta todo lo demás. */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}

.rd-gallery::-webkit-scrollbar {
    display: none;
}

.rd-gallery > .demo {
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .rd-gallery {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.25rem, 3vw, 2rem);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }
}

/* Se quedan en dos por fila también en escritorio: a cuatro por fila el marco
   baja de 300px y la miniatura deja de leerse como un sitio — cuatro
   rectángulos grises no prueban nada. */

/* --------------------------------------------------------------------------
   El dolor, comprimido a una banda. Quien llega por WhatsApp ya lo escuchó;
   quien llega por buscador lo necesita una vez, no durante un viewport.
   -------------------------------------------------------------------------- */

.rd-pain {
    border-block: 1px solid var(--border);
    background: var(--surface);
    padding-block: clamp(2.5rem, 7vw, 4rem);
}

.rd-pain-text {
    max-width: 30ch;
    font-size: clamp(1.4rem, 5.5vw, 2.15rem);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.02em;
    color: var(--text-dim);
    text-wrap: balance;
}

.rd-pain-text strong {
    color: var(--text);
    font-weight: 700;
}

.rd-pain-text em {
    display: block;
    margin-top: 0.4em;
    font-style: normal;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Lo que incluye: una lista con nodo, no una parrilla de tarjetas iguales.
   -------------------------------------------------------------------------- */

.rd-includes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border);
}

.rd-includes li {
    position: relative;
    padding: 1.1rem 0 1.1rem 1.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.97rem;
    line-height: 1.55;
}

.rd-includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
}

.rd-inc-name {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 0.18rem;
}

@media (min-width: 860px) {
    .rd-includes {
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(2rem, 5vw, 4rem);
    }

    .rd-includes li:nth-child(2) {
        border-top: 0;
    }
}

.rd-note {
    margin-top: 1.75rem;
    padding-left: 1.6rem;
    border-left: 1px solid var(--border-strong);
    color: var(--text-dim);
    font-size: 0.95rem;
    max-width: 52ch;
}

/* --------------------------------------------------------------------------
   La escalera. Hereda el rail de capacidades: un nodo por módulo, el primero
   marcado como ya incluido.
   -------------------------------------------------------------------------- */

.rd-ladder .capability.is-base {
    background: rgba(255, 201, 74, 0.05);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.rd-ladder .capability.is-base .cap-tag {
    color: var(--accent);
}

.rd-ladder .capability:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025);
}

.rd-ladder .capability.is-base:nth-child(odd) {
    background: rgba(255, 201, 74, 0.05);
}

/* --------------------------------------------------------------------------
   Respaldo y referencia de mercado.
   -------------------------------------------------------------------------- */

.rd-readout {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.rd-readout .readout-item {
    padding-block: 1.35rem;
    padding-inline: 0;
    border-inline-start: 0;
}

.rd-readout .readout-item + .readout-item {
    border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
    .rd-readout {
        grid-template-columns: repeat(3, 1fr);
    }

    .rd-readout .readout-item {
        padding-block: clamp(1.75rem, 3vw, 2.5rem);
        padding-inline-end: 1.5rem;
    }

    .rd-readout .readout-item + .readout-item {
        border-top: 0;
        border-inline-start: 1px solid var(--border);
        padding-inline-start: clamp(1rem, 2.5vw, 2rem);
    }
}

.rd-market {
    margin-top: clamp(2rem, 5vw, 3rem);
    max-width: 58ch;
    color: var(--text-dim);
    font-size: clamp(1rem, 1.3vw, 1.1rem);
}

.rd-market strong {
    color: var(--text);
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.rd-market-note {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.8rem;
    /* 0.7 dejaba este texto en 4.46:1 sobre el fondo, por debajo del mínimo
       de 4.5:1 para cuerpo. */
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Preguntas: acordeón nativo, tipografía del sistema.
   -------------------------------------------------------------------------- */

.rd-faq {
    border-top: 1px solid var(--border);
}

.rd-faq details {
    border-bottom: 1px solid var(--border);
}

.rd-faq summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1rem, 3.6vw, 1.1rem);
    font-weight: 600;
    color: var(--text);
    transition: color 0.25s var(--ease-out);
}

.rd-faq summary::-webkit-details-marker {
    display: none;
}

.rd-faq summary::after {
    content: '';
    flex-shrink: 0;
    margin-left: auto;
    width: 11px;
    height: 11px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.3s var(--ease-out);
}

.rd-faq details[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.rd-faq summary:hover {
    color: var(--accent);
}

.rd-faq details p {
    padding-bottom: 1.3rem;
    max-width: 62ch;
    color: var(--text-dim);
    font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   Cierre.
   -------------------------------------------------------------------------- */

.rd-close-inner {
    max-width: 44rem;
}

.rd-close h2 {
    font-size: clamp(1.9rem, 7vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.rd-close-inner > p:first-of-type {
    color: var(--text-dim);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    max-width: 48ch;
    margin-bottom: 2rem;
}

.rd-close-cta {
    width: 100%;
}

@media (min-width: 560px) {
    .rd-close-cta {
        width: auto;
    }
}

.rd-close-alt {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-dim);
}

.rd-close-alt a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 0.1rem;
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.rd-close-alt a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}