:root {
    --color-primary: #345448;
    --color-primary-dark: #263f36;

    --color-background: #f7f6f2;
    --color-surface: #ffffff;

    --color-text: #202522;
    --color-muted: #6c746f;

    --color-border: #dedfd9;

    --color-error: #a72d2d;

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;

    --shadow:
        0 12px 40px rgba(25, 35, 30, 0.08);

    --container: 1180px;
}


* {
    box-sizing: border-box;
}


html {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


body {
    margin: 0;

    background:
        var(--color-background);

    color:
        var(--color-text);
}


button,
input,
select,
textarea {
    font: inherit;
}


.container {
    width:
        min(
            calc(100% - 32px),
            var(--container)
        );

    margin-inline: auto;
}


.site-header {
    background: var(--color-surface);

    border-bottom:
        1px solid var(--color-border);
}


.site-header .container {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.brand {
    color: var(--color-primary);

    font-weight: 700;

    text-decoration: none;

    letter-spacing: 0.04em;
}


.powered {
    color: var(--color-muted);

    font-size: 0.85rem;
}


.booking-hero {
    padding:
        28px 0 16px;
}


.eyebrow {
    margin: 0 0 8px;

    color: var(--color-primary);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


h1,
h2,
h3,
p {
    margin-top: 0;
}


h1 {
    margin-bottom: 6px;

    font-size:
        clamp(
            1.65rem,
            3.4vw,
            2rem
        );

    line-height: 1.12;
}


h2 {
    font-size:
        clamp(
            1.6rem,
            3vw,
            2.3rem
        );
}


.hero-description {
    max-width: 580px;
    margin-bottom: 0;

    color: var(--color-muted);

    font-size: 1rem;
}


.availability-form {
    margin-top: 16px;

    padding: 16px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr))
        auto;

    gap: 14px;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);
}


.field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.field label {
    font-size: 0.85rem;

    font-weight: 600;
}


.field input,
.field select,
.field textarea {
    width: 100%;

    min-height: 48px;

    padding:
        11px 13px;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-small);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    outline: none;
}


.field textarea {
    min-height: 88px;

    resize: vertical;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px
        rgba(52, 84, 72, 0.12);
}


.field-action {
    justify-content: end;
}

.field-error {
    margin: 0;

    color: var(--color-error);

    font-size: 0.85rem;
}

.field-error[hidden] {
    display: none;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}

[tabindex="-1"]:focus {
    outline: none;
}

.checkout-section,
.confirmation-section,
#resultsSection,
#checkoutTitle {
    scroll-margin-top: 24px;
}


.button {
    min-height: 48px;

    padding:
        0 20px;

    border: 0;

    border-radius:
        var(--radius-small);

    cursor: pointer;

    font-weight: 700;
}


.button-primary {
    background:
        var(--color-primary);

    color: white;
}


.button-primary:hover {
    background:
        var(--color-primary-dark);
}


.button:focus-visible,
.summary-policy-link:focus-visible {
    outline: 3px solid rgba(52, 84, 72, 0.35);
    outline-offset: 2px;
}

.button:disabled {
    opacity: 0.55;

    cursor: wait;
}


.button-large {
    min-height: 52px;

    margin-top: 12px;

    padding-inline: 28px;
}


.booking-policy-section {
    padding: 0 0 24px;
}

.booking-policy-heading {
    margin-bottom: 18px;
}

.booking-policy-heading h2 {
    margin-bottom: 0;
}

.booking-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.booking-policy-grid article {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.booking-policy-grid h3 {
    margin-bottom: 10px;
    font-size: 1rem;
}

.booking-policy-grid p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: .9rem;
    line-height: 1.65;
}

.section {
    padding:
        8px 0 28px;
}


.section-header {
    margin-bottom: 14px;

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 20px;
}


.section-header p {
    margin-bottom: 0;

    color: var(--color-muted);
}

.section-header h2,
.checkout-layout h2 {
    margin-bottom: 0;

    font-size:
        clamp(
            1.35rem,
            2.6vw,
            1.6rem
        );

    line-height: 1.2;
}

.reservation-form {
    margin-top: 14px;
}

.section .eyebrow {
    margin-bottom: 4px;
}


.room-results {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 16px;
}


.room-results-empty {
    padding: 22px;

    background: var(--color-surface);

    border: 1px dashed var(--color-border);

    border-radius: var(--radius-medium);

    color: var(--color-muted);
}


.room-card {
    display: grid;

    grid-template-columns:
        minmax(0, 230px)
        minmax(0, 1fr)
        minmax(0, 220px);

    gap: 18px;
    align-items: center;

    padding: 12px;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-medium);

    box-shadow:
        0 5px 22px
        rgba(25, 35, 30, 0.05);
}


/* Sin fotografía no se reserva columna: el texto ocupa el espacio. */
.room-card-no-photo {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 220px);

    padding: 16px;
}


.room-card.is-selected {
    background: #f6faf8;
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 2px rgba(52, 84, 72, 0.25),
        0 5px 22px rgba(25, 35, 30, 0.08);
}


.room-photo {
    display: block;

    width: 100%;
    aspect-ratio: 3 / 2;

    object-fit: cover;

    background: #eef3f0;

    border-radius: var(--radius-small);
}

.summary-photo {
    display: block;

    width: 100%;
    max-height: 140px;
    aspect-ratio: 16 / 9;

    margin-bottom: 14px;

    object-fit: cover;

    background: #eef3f0;

    border-radius: var(--radius-small);
}

.summary-photo[hidden],
.confirmation-photo[hidden] {
    display: none;
}

.confirmation-photo {
    display: block;

    width: 100%;
    height: 140px;

    margin: 0 0 16px;

    object-fit: cover;

    background: #eef3f0;

    border-radius: var(--radius-medium);
}

.confirmation-thanks {
    margin-bottom: 14px;

    color: var(--color-muted);

    font-size: 1rem;
}


.room-body {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.room-title {
    margin-bottom: 4px;

    font-size: 1.1rem;
    line-height: 1.25;
}


.room-description,
.room-capacity {
    margin: 0 0 6px;

    color: var(--color-muted);

    font-size: 0.92rem;
    line-height: 1.5;
}


.room-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 4px 0 6px;
    padding: 0;

    list-style: none;
}


.room-amenities li {
    padding: 3px 9px;

    background: #eef3f0;

    border-radius: 999px;

    color: var(--color-primary);

    font-size: 0.8rem;
}


.room-tags {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-top: 2px;
}


.room-breakfast,
.room-availability {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 0.88rem;
}


/* Iconos pequeños y discretos, tomados del color del texto. */
.room-breakfast::before,
.room-availability::before {
    content: "";

    flex: 0 0 15px;
    width: 15px;
    height: 15px;

    background: currentColor;

    -webkit-mask: var(--room-line-icon) center / contain no-repeat;
    mask: var(--room-line-icon) center / contain no-repeat;
}


.room-breakfast {
    --room-line-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4ZM6 2v2M10 2v2M14 2v2'/%3E%3C/svg%3E");

    color: var(--color-primary);

    font-weight: 700;
}


.room-availability {
    --room-line-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4v16M2 8h18a2 2 0 0 1 2 2v10M2 17h20M6 8v9'/%3E%3C/svg%3E");

    color: var(--color-muted);

    font-weight: 500;
}


.room-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;

    padding-left: 20px;

    border-left: 1px solid var(--color-border);
}


.room-price-label {
    color: var(--color-muted);

    font-size: 0.82rem;
}


.room-price-amount {
    font-size: 1.7rem;
    line-height: 1.1;
}


.room-select {
    width: 100%;

    margin-top: 8px;
}


.room-card.is-selected .room-select {
    background: var(--color-primary-dark);
}

.checkout-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    gap: 32px;
}


.form-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;

    margin-bottom: 14px;
}


.stay-summary {
    align-self: start;

    position: sticky;

    top: 24px;

    padding: 18px;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-medium);

    box-shadow:
        var(--shadow);
}


.summary-title {
    color:
        var(--color-muted);

    font-size: 0.85rem;

    font-weight: 700;

    text-transform: uppercase;
}


.summary-hotel {
    margin: -6px 0 12px;

    color: var(--color-muted);

    font-size: 0.9rem;
}

.summary-row[hidden] {
    display: none;
}

.summary-policy-link {
    display: inline-block;

    margin-top: 12px;

    color: var(--color-primary);

    font-size: 0.9rem;
    font-weight: 600;
}

.summary-row,
.summary-total {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding:
        9px 0;

    border-top:
        1px solid var(--color-border);
}


.summary-total {
    margin-top: 4px;

    font-size: 1.15rem;
}


.message {
    margin-top: 12px;

    padding: 13px 15px;

    border-radius:
        var(--radius-small);
}


.message-error {
    background:
        #fff0f0;

    color:
        var(--color-error);
}


.confirmation-section {
    padding:
        20px 16px 36px;
}


.confirmation-card {
    max-width: 780px;

    margin: auto;

    padding:
        20px 28px 22px;

    text-align: center;

    background:
        linear-gradient(180deg, #f1f6f3 0, var(--color-surface) 180px);

    border-top: 4px solid var(--color-primary);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);
}


.confirmation-card h2 {
    margin-bottom: 4px;

    font-size:
        clamp(
            1.4rem,
            2.8vw,
            1.7rem
        );

    line-height: 1.2;
}


.confirmation-code-label {
    margin-bottom: 0;

    color: var(--color-muted);

    font-size: 0.9rem;
}


.booking-code {
    display: block;

    margin:
        2px 0 14px;

    color:
        var(--color-primary);

    font-size: clamp(1.5rem, 4vw, 1.9rem);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}


.confirmation-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;

    text-align: left;
}


.confirmation-details dl {
    margin: 0;

    border-top: 1px solid var(--color-border);
}


.confirmation-details dl > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    padding: 8px 0;

    border-bottom: 1px solid var(--color-border);
}


.confirmation-details dl > div[hidden] {
    display: none;
}


.confirmation-details dt {
    color: var(--color-muted);
}


.confirmation-details dd {
    margin: 0;

    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}


.confirmation-total {
    font-size: 1.05rem;
}


.confirmation-note {
    margin: 12px 0 0;

    color: var(--color-muted);

    font-size: 0.9rem;
}


.confirmation-email,
.confirmation-payment-conditions,
.confirmation-contact {
    margin: 16px 0 0;
    padding: 14px 16px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-background);

    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

.confirmation-email[hidden] {
    display: none;
}

.confirmation-email,
.confirmation-payment-conditions p,
.confirmation-contact ul {
    margin-top: 0;
    margin-bottom: 0;
}

.confirmation-subtitle {
    margin: 0 0 6px;

    color: var(--color-primary-dark);

    font-weight: 700;
}

.confirmation-contact ul {
    padding: 0;

    list-style: none;
}

.confirmation-contact li + li {
    margin-top: 4px;
}

.confirmation-contact a {
    color: var(--color-primary);

    font-weight: 600;
}

.payment-note {
    margin: 4px 0 16px;
    padding: 14px 16px;

    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-small);

    background: var(--color-surface);

    font-size: 0.95rem;
    line-height: 1.5;
}

.payment-note p {
    margin: 0 0 6px;
}

.payment-note p:last-child {
    margin-bottom: 0;
}

.payment-note-title {
    color: var(--color-primary-dark);

    font-weight: 700;
}

.payment-note-text {
    color: var(--color-muted);
}

@media (max-width: 900px) {

    .availability-form {
        grid-template-columns:
            1fr 1fr;
    }


    .field-action {
        grid-column:
            1 / -1;
    }


    .checkout-layout {
        grid-template-columns:
            1fr;

        gap: 20px;
    }

    .room-card,
    .room-card-no-photo {
        grid-template-columns: minmax(0, 1fr);
    }

    .room-photo {
        aspect-ratio: 16 / 10;
    }

    .room-price {
        padding: 14px 0 0;

        border-top: 1px solid var(--color-border);
        border-left: 0;
    }


    .stay-summary {
        position: static;

        order: -1;
    }
}


@media (max-width: 600px) {

    .site-header .container {
        min-height: 60px;
    }


    .powered {
        display: none;
    }


    .booking-hero {
        padding-top: 20px;
    }

    .confirmation-card {
        padding: 16px 16px 18px;
    }

    .confirmation-photo {
        height: 120px;
    }

    .confirmation-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .confirmation-details dl + dl {
        border-top: 0;
    }

    .booking-policy-grid {
        grid-template-columns: 1fr;
    }


    .availability-form {
        grid-template-columns:
            1fr;

        padding: 16px;
    }


    .field-action {
        grid-column:
            auto;
    }


    .form-grid {
        grid-template-columns:
            1fr;
    }


    .button {
        width: 100%;
    }


    .section-header {
        display: block;
    }

}


#preferredRoomNotice {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-weight: 600;
}

.room-card-preferred {
    border-color: var(--color-primary);
    border-width: 2px;
}

.room-badge {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
}



/* ---- Recorrido directo: cabecera, buscador y condiciones compactos ---- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    flex: none;
}

.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-hero {
    padding: 18px 0 12px;
}

.booking-hero h1 {
    margin-bottom: 0;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.preferred-room-banner {
    display: inline-block;
    margin: 8px 0 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: #edf4f0;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.availability-form {
    margin-top: 12px;
}

.room-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.booking-policy-section {
    padding: 0 0 20px;
}

.booking-policy {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.booking-policy > summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    color: var(--color-primary);
}

.booking-policy > summary:focus-visible {
    outline: 3px solid rgba(52, 84, 72, 0.35);
    outline-offset: 2px;
}

.booking-policy .booking-policy-grid {
    padding: 0 18px 18px;
}

.policy-before-confirm {
    margin: 0 0 12px;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.policy-before-confirm a {
    color: var(--color-primary);
}

.link-button {
    margin: 0 0 12px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.92rem;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:focus-visible {
    outline: 3px solid rgba(52, 84, 72, 0.35);
    outline-offset: 2px;
}

#searchSection,
#resultsSection,
#checkoutSection,
#confirmationSection,
#bookingPolicy {
    scroll-margin-top: 8px;
}

@media (max-width: 640px) {
    .site-header .container {
        min-height: 52px;
    }

    .booking-hero {
        padding: 12px 0 8px;
    }

    .availability-form {
        padding: 12px;
    }
}