/* Destio — librería de componentes (EVO-09).
   Clases globales con prefijo d- usadas por Components/Ui/*.razor y por las páginas. */

/* ===================== Iconos ===================== */
.d-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===================== Botones ===================== */
.d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--d-sp-2);
    min-height: var(--d-tap);
    padding: 0 var(--d-sp-5);
    border-radius: var(--d-rs);
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--d-ff-ui);
    font-size: var(--d-fs-16);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--d-dur-fast), border-color var(--d-dur-fast), color var(--d-dur-fast);
}

.d-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.d-btn:disabled,
.d-btn[aria-disabled="true"] {
    cursor: not-allowed;
    background: var(--d-ln);
    border-color: var(--d-ln);
    color: var(--d-ink3);
}

.d-btn--primary {
    background: var(--d-ac);
    color: var(--d-oac);
}

.d-btn--primary:hover:not(:disabled) {
    background: var(--d-ach);
    color: var(--d-oac);
}

.d-btn--primary:active:not(:disabled) {
    background: var(--d-acp);
}

.d-btn--secondary {
    background: var(--d-bg);
    border-color: var(--d-ln);
    color: var(--d-ink);
}

.d-btn--secondary:hover:not(:disabled) {
    border-color: var(--d-ink);
    color: var(--d-ink);
}

.d-btn--ghost {
    color: var(--d-ink);
    padding: 0 var(--d-sp-3);
}

.d-btn--ghost:hover {
    background: var(--d-alt);
    color: var(--d-ink);
}

.d-btn--lg {
    min-height: 52px;
    padding: 0 var(--d-sp-6);
    font-size: var(--d-fs-18);
}

.d-btn--block {
    width: 100%;
}

.d-btn--icon {
    width: var(--d-tap);
    padding: 0;
}

.d-link {
    display: inline-flex;
    align-items: center;
    gap: var(--d-sp-1);
    min-height: var(--d-tap);
    padding: 0;
    border: 0;
    background: none;
    color: var(--d-ac);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.d-link:hover {
    color: var(--d-ach);
}

.d-link--ink {
    color: var(--d-ink);
    text-decoration: none;
    font-weight: 600;
}

.d-link--ink:hover {
    color: var(--d-ac);
}

/* ===================== Chips / pills ===================== */
.d-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--d-sp-2);
}

.d-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
    margin: -2px;
}

.d-chips--scroll::-webkit-scrollbar {
    display: none;
}

.d-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--d-sp-2);
    flex: none;
    min-height: var(--d-tap);
    padding: 0 var(--d-sp-4);
    border-radius: var(--d-rs);
    border: 1px solid var(--d-ln);
    background: var(--d-bg);
    color: var(--d-ink);
    font-size: var(--d-fs-14);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color var(--d-dur-fast), background-color var(--d-dur-fast), color var(--d-dur-fast);
}

.d-chip:hover:not(:disabled) {
    border-color: var(--d-ink);
    color: var(--d-ink);
}

.d-chip:active:not(:disabled) {
    transform: translateY(1px);
}

.d-chip.is-on,
.d-chip[aria-pressed="true"] {
    background: var(--d-acs);
    border-color: var(--d-acp);
    color: var(--d-chon-fg);
}

.d-chip:disabled {
    color: var(--d-ink3);
    text-decoration: line-through;
    cursor: not-allowed;
}

.d-chip--sm {
    font-size: var(--d-fs-14);
    color: var(--d-ink2);
}

/* Familias con icono */
.d-fam {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--d-sp-2);
    flex: none;
    min-width: 104px;
    min-height: 88px;
    padding: var(--d-sp-3) var(--d-sp-4);
    border: 1px solid transparent;
    border-radius: var(--d-rk);
    background: none;
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
    font-weight: 500;
    text-align: center;
    transition: color var(--d-dur-fast), border-color var(--d-dur-fast), background-color var(--d-dur-fast);
}

.d-fam:hover {
    color: var(--d-ink);
    border-color: var(--d-ln);
}

.d-fam.is-on {
    color: var(--d-chon-fg);
    background: var(--d-acs);
    border-color: var(--d-acp);
}

/* ===================== Cabecera de sección ===================== */
.d-sh {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--d-sp-4);
    margin-bottom: var(--d-sp-6);
}

.d-sh__label {
    display: block;
    margin-bottom: var(--d-sp-3);
    color: var(--d-ink2);
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: var(--d-track-label);
    text-transform: uppercase;
}

.d-sh__more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--d-sp-1);
    min-height: var(--d-tap);
    color: var(--d-ink);
    font-weight: 600;
    font-size: var(--d-fs-14);
    text-decoration: none;
}

.d-sh__more:hover {
    color: var(--d-ac);
}

.d-eyebrow {
    color: var(--d-ink2);
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: var(--d-track-label);
    text-transform: uppercase;
}

/* ===================== Imagen ===================== */
.d-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--d-rk);
    background: var(--d-alt);
    aspect-ratio: 4 / 3;
}

.d-img--169 { aspect-ratio: 16 / 9; }
.d-img--219 { aspect-ratio: 21 / 9; }
.d-img--11 { aspect-ratio: 1 / 1; }
.d-img--34 { aspect-ratio: 3 / 4; }

.d-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--d-ease);
}

.d-img__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-ac);
    opacity: .55;
}

/* ===================== Rejillas y raíles ===================== */
.d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--d-sp-6) var(--d-sp-5);
}

.d-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 300px);
    gap: var(--d-sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.d-rail::-webkit-scrollbar {
    display: none;
}

.d-rail > * {
    scroll-snap-align: start;
}

@media (max-width: 767px) {
    .d-grid {
        grid-template-columns: 1fr;
        gap: var(--d-sp-5);
    }

    .d-rail {
        margin: 0 calc(var(--d-gutter) * -1);
        padding: 0 var(--d-gutter) 4px;
        scroll-padding: 0 var(--d-gutter);
        grid-auto-columns: 78%;
    }
}

/* ===================== Tarjetas de catálogo ===================== */
.d-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-3);
    color: var(--d-ink);
    text-decoration: none;
}

.d-card:hover {
    color: var(--d-ink);
}

.d-card:hover .d-img img {
    transform: scale(1.03);
}

.d-card:hover .d-card__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.d-card--boxed {
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rk);
    padding: var(--d-sp-2) var(--d-sp-2) var(--d-sp-4);
    background: var(--d-bg);
}

.d-card--boxed .d-card__body {
    padding: 0 var(--d-sp-2);
}

.d-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-1);
}

.d-card__tag {
    color: var(--d-ink2);
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: var(--d-track-label);
    text-transform: uppercase;
}

.d-card__title {
    font-family: var(--d-ff-head);
    font-weight: 500;
    font-size: var(--d-fs-22);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.d-card__meta {
    display: flex;
    align-items: center;
    gap: var(--d-sp-1);
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.d-card__overlay-tag {
    position: absolute;
    top: var(--d-sp-3);
    left: var(--d-sp-3);
    z-index: 1;
}

/* Bloque de fecha (eventos) */
.d-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: var(--d-sp-2) var(--d-sp-3);
    border-radius: var(--d-rc);
    background: var(--d-bg);
    color: var(--d-ink);
    line-height: 1;
    text-align: center;
}

.d-date__dow,
.d-date__mon {
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d-ink2);
}

.d-date__day {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-28);
    font-weight: 500;
    margin: 2px 0;
}

.d-card .d-date {
    position: absolute;
    top: var(--d-sp-3);
    left: var(--d-sp-3);
    z-index: 1;
}

/* Tarjeta de destino / municipio: foto con nombre superpuesto */
.d-dcard {
    position: relative;
    display: block;
    border-radius: var(--d-rk);
    overflow: hidden;
    color: var(--d-oac);
    text-decoration: none;
}

.d-dcard:hover {
    color: var(--d-oac);
}

button.d-dcard {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
}

.d-dcard[aria-pressed="true"] {
    outline: 2px solid var(--d-ac);
    outline-offset: 2px;
}

.d-dcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--d-scrim);
    pointer-events: none;
}

.d-dcard:hover .d-img img {
    transform: scale(1.03);
}

.d-dcard__txt {
    position: absolute;
    left: var(--d-sp-4);
    right: var(--d-sp-4);
    bottom: var(--d-sp-4);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.d-dcard__name {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-28);
    font-weight: 500;
    line-height: 1.05;
}

.d-dcard__sub {
    font-size: var(--d-fs-14);
    opacity: .9;
}

.d-dcard--plain {
    color: var(--d-ink);
}

.d-dcard--plain::after {
    display: none;
}

.d-dcard--plain:hover {
    color: var(--d-ink);
}

.d-dcard--soon {
    cursor: default;
}

.d-dcard--soon .d-img img {
    filter: grayscale(1);
    opacity: .7;
}

/* ===================== Etiquetas / badges ===================== */
.d-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px var(--d-sp-3);
    border-radius: var(--d-rc);
    background: var(--d-bg);
    border: 1px solid var(--d-ln);
    color: var(--d-ink);
    font-size: var(--d-fs-12);
    font-weight: 600;
    line-height: 1.3;
}

.d-badge--wa {
    background: var(--d-wab);
    border-color: transparent;
    color: var(--d-wa);
}

.d-badge--ok {
    background: var(--d-okb);
    border-color: transparent;
    color: var(--d-ok);
}

.d-badge--soft {
    background: var(--d-alt);
    border-color: transparent;
    color: var(--d-ink);
}

.d-badge--on-photo {
    background: rgba(255, 255, 255, .94);
    border-color: transparent;
}

/* ===================== Avisos ===================== */
.d-alert {
    display: flex;
    gap: var(--d-sp-3);
    align-items: flex-start;
    padding: var(--d-sp-3) var(--d-sp-4);
    border-radius: var(--d-rc);
    background: var(--d-alt);
    color: var(--d-ink);
    font-size: var(--d-fs-14);
}

.d-alert--er { background: var(--d-erb); color: var(--d-er); }
.d-alert--ok { background: var(--d-okb); color: var(--d-ok); }
.d-alert--wa { background: var(--d-wab); color: var(--d-wa); }

/* ===================== Estados vacío / error ===================== */
.d-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--d-sp-3);
    padding: var(--d-sp-7) var(--d-sp-5);
    border-radius: var(--d-rk);
    background: var(--d-alt);
}

.d-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--d-bg);
    color: var(--d-ac);
    margin-bottom: var(--d-sp-2);
}

.d-state--error .d-state__icon {
    color: var(--d-er);
}

.d-state__title {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-22);
    font-weight: 500;
}

.d-state__text {
    color: var(--d-ink2);
    max-width: 44ch;
}

.d-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--d-sp-2);
    justify-content: center;
    margin-top: var(--d-sp-3);
}

/* ===================== Formularios ===================== */
.d-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.d-label {
    font-size: var(--d-fs-14);
    font-weight: 500;
    color: var(--d-ink);
}

.d-hint {
    font-size: var(--d-fs-12);
    color: var(--d-ink2);
}

.d-input,
.d-select {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--d-sp-4);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rc);
    background: var(--d-bg);
    color: var(--d-ink);
    font-size: var(--d-fs-16);
    transition: border-color var(--d-dur-fast);
}

.d-input::placeholder {
    color: var(--d-ink3);
}

.d-input:hover,
.d-select:hover {
    border-color: var(--d-ink3);
}

.d-input:focus-visible,
.d-select:focus-visible {
    border-color: var(--d-ac);
    outline-offset: 0;
}

textarea.d-input {
    min-height: 96px;
    padding: var(--d-sp-3) var(--d-sp-4);
    resize: vertical;
}

.d-select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.d-check {
    display: flex;
    gap: var(--d-sp-3);
    align-items: flex-start;
    min-height: var(--d-tap);
    padding-top: 10px;
    font-size: var(--d-fs-14);
    cursor: pointer;
}

.d-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--d-ac);
}

/* ===================== Buscador ===================== */
.d-search {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 920px;
    padding: 6px;
    border-radius: var(--d-rs);
    border: 1px solid var(--d-ln);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-card);
}

.d-search.is-open {
    z-index: var(--d-z-panel);
}

.d-search-out {
    position: fixed;
    inset: 0;
    z-index: calc(var(--d-z-panel) - 1);
}

.d-search__seg {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 0 var(--d-sp-5);
    border: 0;
    border-radius: var(--d-rs);
    background: none;
    text-align: left;
    transition: background-color var(--d-dur-fast);
}

.d-search__seg + .d-search__seg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: var(--d-ln);
}

.d-search__seg:hover,
.d-search__seg.is-open {
    background: var(--d-alt);
}

.d-search__seg:hover::before,
.d-search__seg.is-open::before,
.d-search__seg:hover + .d-search__seg::before,
.d-search__seg.is-open + .d-search__seg::before {
    opacity: 0;
}

.d-search__k {
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: var(--d-track-label);
    text-transform: uppercase;
    color: var(--d-ink);
}

.d-search__v {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.d-search__v.is-set {
    color: var(--d-ink);
    font-weight: 500;
}

.d-search__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--d-sp-2);
    align-self: center;
    min-height: 56px;
    padding: 0 var(--d-sp-5);
    border: 0;
    border-radius: var(--d-rs);
    background: var(--d-ac);
    color: var(--d-oac);
    font-weight: 600;
    transition: background-color var(--d-dur-fast);
}

.d-search__btn:hover {
    background: var(--d-ach);
}

.d-search__btn:active {
    background: var(--d-acp);
    transform: translateY(1px);
}

.d-pop {
    position: absolute;
    top: calc(100% + 10px);
    z-index: var(--d-z-panel);
    width: min(420px, 92vw);
    max-height: 440px;
    overflow: auto;
    padding: var(--d-sp-4);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rk);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-card);
    animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
}

.d-pop__group + .d-pop__group {
    margin-top: var(--d-sp-4);
}

.d-pop__title {
    display: block;
    margin-bottom: var(--d-sp-2);
}

.d-opt-list {
    display: flex;
    flex-direction: column;
}

.d-opt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-3);
    width: 100%;
    min-height: var(--d-tap);
    padding: 0 var(--d-sp-3);
    border: 0;
    border-radius: var(--d-rc);
    background: none;
    text-align: left;
    color: var(--d-ink);
}

.d-opt-row:hover {
    background: var(--d-alt);
}

.d-opt-row.is-on {
    color: var(--d-chon-fg);
    font-weight: 600;
}

.d-opt-row.is-sub {
    padding-left: var(--d-sp-6);
    color: var(--d-ink2);
}

.d-opt-row.is-sub.is-on {
    color: var(--d-chon-fg);
}

.d-opt-row:disabled {
    color: var(--d-ink3);
    cursor: default;
    background: none;
}

/* Pie del panel «Cuándo»: ayuda y «Quitar fecha» */
.d-search__cuando-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-2) var(--d-sp-4);
    margin-top: var(--d-sp-3);
}

.d-search__cuando-pie .d-hint {
    flex: 1 1 200px;
}

/* Desplegable propio (DSelect): cerrado se ve como .d-select, abierto como el selector de destino */
.d-sel {
    position: relative;
}

.d-sel__btn {
    display: block;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.d-sel__btn[aria-expanded="true"] {
    border-color: var(--d-ink);
}

.d-sel__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--d-z-panel) - 1);
}

.d-sel__pop {
    left: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(360px, 92vw);
    padding: var(--d-sp-2);
}

/* Píldora compacta (móvil) */
.d-search-compact {
    display: none;
    align-items: center;
    gap: var(--d-sp-3);
    width: 100%;
    min-height: 60px;
    padding: 6px 6px 6px var(--d-sp-5);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rs);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-card);
    text-align: left;
}

.d-search-compact__txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.d-search-compact__txt strong {
    font-size: var(--d-fs-16);
    font-weight: 600;
}

.d-search-compact__txt span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.d-search-compact__go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--d-ac);
    color: var(--d-oac);
}

@media (max-width: 899px) {
    .d-search {
        display: none;
    }

    .d-search-compact {
        display: flex;
    }
}

/* Buscador integrado en la cabecera (Home, al pasar el del hero): versión compacta en una
   segunda fila bajo el menú. Las etiquetas y el texto del botón quedan solo para lectores. */
/* Va superpuesta bajo la cabecera, fuera del flujo: si empujara el contenido, el buscador del
   hero volvería a verse y se integraría y desintegraría en bucle. */
.hdr__sub {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
}

.hdr__sub:has(.hdr__search > *) {
    border-bottom: 1px solid var(--d-ln);
}

/* Mismo fondo desenfocado que la cabecera, en capa aparte por el mismo motivo (paneles fixed). */
.hdr__sub:has(.hdr__search > *)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.hdr__search {
    display: flex;
    justify-content: center;
}

.hdr__search:has(> *) {
    padding-top: 8px;
    padding-bottom: 10px;
}

.hdr__search .d-search {
    max-width: 720px;
    padding: 4px;
    box-shadow: none;
    animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
}

.hdr__search .d-search__seg {
    min-height: 44px;
    padding: 0 var(--d-sp-4);
}

.hdr__search .d-search__seg + .d-search__seg::before {
    top: 12px;
    bottom: 12px;
}

.hdr__search .d-search__k,
.hdr__search .d-search__btn-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hdr__search .d-search__btn {
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
}

.hdr__search .d-search-compact {
    min-height: 48px;
    padding: 4px 4px 4px var(--d-sp-4);
    box-shadow: none;
    animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
}

.hdr__search .d-search-compact__txt {
    line-height: 1.25;
}

.hdr__search .d-search-compact__txt strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--d-fs-14);
}

.hdr__search .d-search-compact__txt span {
    font-size: var(--d-fs-12);
}

.hdr__search .d-search-compact__go {
    width: 38px;
    height: 38px;
}

/* ===================== Panel a pantalla completa (móvil) ===================== */
.d-full {
    position: fixed;
    inset: 0;
    z-index: var(--d-z-modal);
    display: flex;
    flex-direction: column;
    background: var(--d-bg);
    animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
}

.d-full__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-3);
    min-height: 64px;
    padding: 0 var(--d-sp-2) 0 var(--d-gutter);
    border-bottom: 1px solid var(--d-ln);
}

.d-full__title {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-22);
    font-weight: 500;
}

.d-full__body {
    flex: 1;
    overflow: auto;
    padding: var(--d-sp-5) var(--d-gutter);
}

.d-full__foot {
    display: flex;
    gap: var(--d-sp-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--d-sp-3) var(--d-gutter) calc(var(--d-sp-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--d-ln);
    background: var(--d-bg);
}

.d-acc {
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rk);
    padding: var(--d-sp-4);
}

.d-acc + .d-acc {
    margin-top: var(--d-sp-3);
}

.d-acc__k {
    display: block;
    margin-bottom: var(--d-sp-3);
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-22);
    font-weight: 500;
}

/* ===================== Bottom sheet ===================== */
.d-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--d-z-sheet);
    background: rgba(10, 10, 10, .4);
    animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
}

.d-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--d-z-sheet) + 1);
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    border-radius: var(--d-rb) var(--d-rb) 0 0;
    background: var(--d-bg);
    box-shadow: var(--d-shadow-sheet);
    animation: d-sheet-in var(--d-dur-base) var(--d-ease) both;
}

@keyframes d-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.d-sheet__handle {
    width: 40px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: var(--d-rs);
    background: var(--d-ln);
}

.d-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-3);
    padding: var(--d-sp-2) var(--d-sp-2) var(--d-sp-2) var(--d-sp-5);
}

.d-sheet__title {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-22);
    font-weight: 500;
}

.d-sheet__body {
    flex: 1;
    overflow: auto;
    padding: var(--d-sp-2) var(--d-sp-5) var(--d-sp-5);
}

.d-sheet__foot {
    display: flex;
    gap: var(--d-sp-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--d-sp-3) var(--d-sp-5) calc(var(--d-sp-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--d-ln);
}

@media (min-width: 768px) {
    .d-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(560px, 92vw);
        max-height: 80vh;
        transform: translate(-50%, -50%);
        border-radius: var(--d-rb);
        box-shadow: var(--d-shadow-card);
        animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
    }

    .d-sheet__handle {
        display: none;
    }

    .d-sheet__head {
        padding-top: var(--d-sp-4);
    }
}

.d-filter-group + .d-filter-group {
    margin-top: var(--d-sp-5);
}

.d-filter-group > .d-eyebrow {
    display: block;
    margin-bottom: var(--d-sp-3);
}

/* ===================== Panel lateral (asistente de reserva) ===================== */
.d-side {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--d-z-sheet) + 1);
    display: flex;
    flex-direction: column;
    width: min(520px, 100vw);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-sheet);
    animation: d-side-in var(--d-dur-base) var(--d-ease) both;
}

@keyframes d-side-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 1023px) {
    .d-side {
        width: 100vw;
        box-shadow: none;
    }
}

/* ===================== Stepper ===================== */
.d-stepper {
    display: flex;
    gap: var(--d-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.d-step {
    flex: 1 1 0;
    min-width: 0;
}

.d-step__btn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-height: var(--d-tap);
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: var(--d-ink3);
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: .04em;
}

.d-step__btn::before {
    content: "";
    display: block;
    height: 3px;
    border-radius: var(--d-rs);
    background: var(--d-ln);
}

.d-step__btn:disabled {
    cursor: default;
}

.d-step__lbl {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.d-step.is-done .d-step__btn {
    color: var(--d-ink);
}

.d-step.is-done .d-step__btn::before {
    background: var(--d-ink);
}

.d-step.is-current .d-step__btn {
    color: var(--d-ac);
}

.d-step.is-current .d-step__btn::before {
    background: var(--d-ac);
}

/* ===================== Calendario ===================== */
.d-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-3);
    margin-bottom: var(--d-sp-4);
}

.d-cal__month {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-40);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.d-cal__month em {
    color: var(--d-ac);
    font-weight: 400;
}

.d-cal__month::first-letter {
    text-transform: uppercase;
}

.d-cal__nav {
    display: flex;
    gap: var(--d-sp-2);
}

.d-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.d-cal__dow {
    padding-bottom: var(--d-sp-2);
    color: var(--d-ink2);
    font-size: var(--d-fs-12);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.d-cal__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-height: var(--d-tap);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rk);
    background: var(--d-bg);
    color: var(--d-ink);
    font-size: var(--d-fs-16);
    font-weight: 500;
    transition: border-color var(--d-dur-fast), background-color var(--d-dur-fast);
}

.d-cal__day:hover:not(:disabled) {
    border-color: var(--d-ink);
}

.d-cal__day.is-today::after {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.d-cal__day:disabled,
.d-cal__day.is-off {
    border-color: transparent;
    background: none;
    color: var(--d-ink3);
    text-decoration: line-through;
    cursor: not-allowed;
}

.d-cal__day.is-out {
    visibility: hidden;
}

.d-cal__day.is-range {
    background: var(--d-acs);
    border-color: var(--d-acs);
    color: var(--d-chon-fg);
}

.d-cal__day.is-sel {
    background: var(--d-ac);
    border-color: var(--d-ac);
    color: var(--d-oac);
    text-decoration: none;
}

.d-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--d-sp-4);
    margin-top: var(--d-sp-4);
    color: var(--d-ink2);
    font-size: var(--d-fs-12);
}

.d-cal__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.d-cal__sw {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    border: 1px solid var(--d-ln);
}

.d-cal__sw--sel {
    background: var(--d-ac);
    border-color: var(--d-ac);
}

.d-cal__sw--off {
    border-color: transparent;
    background: linear-gradient(135deg, transparent 45%, var(--d-ink3) 45%, var(--d-ink3) 55%, transparent 55%);
}

@media (max-width: 767px) {
    .d-cal__month {
        font-size: var(--d-fs-28);
    }

    .d-cal__grid {
        gap: 4px;
    }

    .d-cal__day {
        border-radius: var(--d-rc);
    }
}

/* Variante compacta: cabe en el popover del buscador sin scroll */
.d-cal--sm .d-cal__head {
    margin-bottom: var(--d-sp-3);
}

.d-cal--sm .d-cal__month {
    font-size: var(--d-fs-28);
}

.d-cal--sm .d-cal__grid {
    gap: 4px;
}

.d-cal--sm .d-cal__day {
    aspect-ratio: auto;
    height: 40px;
    min-height: 40px;
    border-radius: var(--d-rc);
    font-size: var(--d-fs-14);
}

.d-cal--sm .d-cal__day.is-today::after {
    bottom: 4px;
}

/* ===================== Contador +/- ===================== */
.d-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-4);
    padding: var(--d-sp-4) 0;
    border-bottom: 1px solid var(--d-ln);
}

.d-counter:last-child {
    border-bottom: 0;
}

.d-counter__lbl {
    display: flex;
    flex-direction: column;
}

.d-counter__lbl strong {
    font-weight: 600;
}

.d-counter__lbl span {
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.d-counter__ctl {
    display: flex;
    align-items: center;
    gap: var(--d-sp-3);
}

.d-counter__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--d-tap);
    height: var(--d-tap);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rs);
    background: var(--d-bg);
    color: var(--d-ink);
    transition: border-color var(--d-dur-fast);
}

.d-counter__btn:hover:not(:disabled) {
    border-color: var(--d-ink);
}

.d-counter__btn:active:not(:disabled) {
    transform: translateY(1px);
}

.d-counter__btn:disabled {
    color: var(--d-ink3);
    border-color: var(--d-ln);
    cursor: not-allowed;
}

.d-counter__val {
    min-width: 2ch;
    font-size: var(--d-fs-18);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ===================== Tarjeta de opción (tarifa / espacio / servicio) ===================== */
.d-opts {
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-3);
}

.d-opt {
    display: flex;
    align-items: flex-start;
    gap: var(--d-sp-4);
    width: 100%;
    padding: var(--d-sp-4) var(--d-sp-5);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rk);
    background: var(--d-bg);
    color: var(--d-ink);
    text-align: left;
    transition: border-color var(--d-dur-fast), background-color var(--d-dur-fast);
}

.d-opt:hover:not(:disabled) {
    border-color: var(--d-ink);
}

.d-opt:active:not(:disabled) {
    transform: translateY(1px);
}

.d-opt.is-on {
    border-color: var(--d-acp);
    background: var(--d-acs);
}

.d-opt:disabled {
    color: var(--d-ink3);
    cursor: not-allowed;
}

.d-opt__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d-opt__name {
    font-weight: 600;
    font-size: var(--d-fs-16);
}

.d-opt__desc {
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.d-opt__desc p {
    margin: 0;
}

.d-opt__price {
    flex: none;
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-22);
    font-weight: 500;
    white-space: nowrap;
}

.d-opt__radio {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--d-ink3);
    border-radius: 50%;
}

.d-opt.is-on .d-opt__radio {
    border: 6px solid var(--d-ac);
}

/* ===================== Resumen de reserva ===================== */
.d-summary {
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-2);
    padding: var(--d-sp-5);
    border-radius: var(--d-rk);
    background: var(--d-alt);
}

.d-summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--d-sp-4);
    font-size: var(--d-fs-14);
}

.d-summary__row > span:first-child {
    color: var(--d-ink2);
}

.d-summary__row > span:last-child {
    text-align: right;
    font-weight: 500;
}

.d-summary__sub {
    margin-top: var(--d-sp-2);
    font-size: var(--d-fs-12);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d-ink2);
}

.d-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--d-sp-4);
    margin-top: var(--d-sp-2);
    padding-top: var(--d-sp-3);
    border-top: 1px solid var(--d-ln);
}

.d-summary__total strong {
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-28);
    font-weight: 500;
}

.d-summary__row.is-discount > span:last-child {
    color: var(--d-ok);
}

/* ===================== Tarjeta de reserva sticky / barra inferior ===================== */
.d-bookcard {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-4);
    padding: var(--d-sp-5);
    border: 1px solid var(--d-ln);
    border-radius: var(--d-rk);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-card);
}

.d-bookbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--d-z-sticky);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-sp-3);
    padding: var(--d-sp-3) var(--d-gutter) calc(var(--d-sp-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--d-ln);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-sheet);
}

.d-bookbar__txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.d-bookbar__txt strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.d-bookbar__txt span {
    color: var(--d-ink2);
    font-size: var(--d-fs-12);
}

@media (max-width: 1023px) {
    .d-bookbar {
        display: flex;
    }
}

/* ===================== Migas de pan ===================== */
.d-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--d-sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.d-crumbs a {
    color: var(--d-ink2);
    text-decoration: none;
}

.d-crumbs a:hover {
    color: var(--d-ac);
    text-decoration: underline;
}

.d-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--d-sp-1);
}

.d-crumbs [aria-current] {
    color: var(--d-ink);
    font-weight: 500;
}

/* ===================== Modal ===================== */
.d-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: calc(var(--d-z-modal) + 1);
    width: min(480px, calc(100vw - 32px));
    max-height: 80vh;
    overflow: auto;
    padding: var(--d-sp-5);
    border-radius: var(--d-rk);
    background: var(--d-bg);
    box-shadow: var(--d-shadow-card);
    transform: translate(-50%, -50%);
    animation: d-fade-in var(--d-dur-base) var(--d-ease) both;
}

.d-modal__title {
    margin-bottom: var(--d-sp-4);
    font-family: var(--d-ff-head);
    font-size: var(--d-fs-22);
    font-weight: 500;
}

.d-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--d-sp-2);
    margin-top: var(--d-sp-5);
}

.d-scrim--modal {
    z-index: var(--d-z-modal);
}

/* ===================== Cabecera de listados (eventos, promociones) ===================== */
.lst-hero {
    padding: var(--d-sp-8) var(--d-gutter) var(--d-sp-6);
}

.lst-hero h1 {
    margin-top: 0;
    font-size: clamp(var(--d-fs-40), 7vw, var(--d-fs-80));
    line-height: .98;
    letter-spacing: -0.03em;
}

.lst-hero p {
    max-width: 56ch;
    margin-top: var(--d-sp-4);
    color: var(--d-ink2);
    font-size: var(--d-fs-18);
}

@media (max-width: 767px) {
    .lst-hero {
        padding-top: var(--d-sp-6);
    }

    .lst-hero p {
        font-size: var(--d-fs-16);
    }
}

/* ===================== Ficha de evento / promoción ===================== */
.det {
    padding-bottom: var(--d-sp-6);
}

.det__crumbs {
    padding: var(--d-sp-5) 0 var(--d-sp-4);
}

.det__title {
    max-width: 20ch;
    font-size: clamp(var(--d-fs-40), 5vw, var(--d-fs-56));
    line-height: 1.02;
}

.det__sub {
    max-width: 60ch;
    margin-top: var(--d-sp-3);
    color: var(--d-ink2);
    font-size: var(--d-fs-18);
}

.det__img {
    margin-top: var(--d-sp-5);
}

.det__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--d-sp-8);
    margin-top: var(--d-sp-7);
}

.det__h {
    margin-bottom: var(--d-sp-4);
    font-size: var(--d-fs-28);
}

.det__facts {
    display: flex;
    flex-direction: column;
    gap: var(--d-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.det__facts li {
    display: flex;
    gap: var(--d-sp-3);
    align-items: flex-start;
}

.det__facts li > .d-icon {
    margin-top: 2px;
    color: var(--d-ac);
}

.det__facts strong {
    display: block;
    font-weight: 600;
}

.det__facts span {
    color: var(--d-ink2);
    font-size: var(--d-fs-14);
}

.det__card .d-date {
    align-self: flex-start;
    background: var(--d-alt);
    min-width: 80px;
    padding: var(--d-sp-3);
}

.det__card .d-date__day {
    font-size: var(--d-fs-40);
}

.det__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--d-sp-2);
}

@media (max-width: 1023px) {
    .det__layout {
        grid-template-columns: 1fr;
        gap: var(--d-sp-6);
    }

    .det__card.d-bookcard {
        position: static;
        box-shadow: none;
    }
}

@media (max-width: 767px) {
    .det__img.d-img--219 {
        aspect-ratio: 4 / 3;
        margin-left: calc(var(--d-gutter) * -1);
        margin-right: calc(var(--d-gutter) * -1);
        border-radius: 0;
    }

    .det__sub {
        font-size: var(--d-fs-16);
    }
}

/* ===================== Contenido enriquecido (HTML del proveedor) ===================== */
.d-prose {
    color: var(--d-ink);
    font-size: var(--d-fs-16);
    line-height: 1.65;
    max-width: 68ch;
    overflow-wrap: anywhere;
}

.d-prose p + p {
    margin-top: var(--d-sp-3);
}

.d-prose ul,
.d-prose ol {
    padding-left: 1.2em;
}

.d-prose img {
    border-radius: var(--d-rc);
    height: auto;
}

.d-prose a {
    color: var(--d-ac);
}