/* ——— Imagen hero accesible para crawlers ——— */
.db-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

/* ——— H1 de página ——— */
.db-page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 1.25rem 0 .75rem;
    line-height: 1.15;
}

@media (max-width: 600px) {
    .db-page-title { font-size: 1.1rem; margin: 0.65rem 0 0.45rem; }
}

/* ——— Bento hero ——— */
.db-hero {
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
}

/* Sin previos: card primaria ocupa todo el ancho */
.db-bento {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Con previos: grid 3 columnas, altura auto */
.db-bento--prev {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "prev1 prev2 new";
}

/* 1 solo previo: prev1 ocupa las dos primeras celdas en desktop */
.db-bento--prev1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "prev1 new";
}

/* Grid area assignments (solo usados en --prev) */
.db-area-prev1  { grid-area: prev1; }
.db-area-prev2  { grid-area: prev2; }
.db-area-new    { grid-area: new; }

/* ——— Card base ——— */
.db-card {
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    color: var(--text-main);
    overflow: hidden;
}

.db-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}

/* ——— Card: planifica (columna izquierda, se extiende a toda la altura del grid row) ——— */
.db-card--primary {
    position: relative;
    color: #fff;
    min-height: 320px;
    justify-content: flex-end;
}

.db-card--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.08) 100%);
}

/* ——— Card: planifica nuevo (con previos, fila inferior cols 1-2) ——— */
.db-card--new {
    position: relative;
    color: #fff;
    min-height: 140px;
    justify-content: flex-end;
}

.db-card--new .db-hero-img {
    object-position: center 35%;
}

.db-card--new::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.05) 100%);
}

.db-hero-body {
    position: relative;
    z-index: 2;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}

.db-hero-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .75;
}

.db-hero-title {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.db-hero-text {
    font-size: .83rem;
    opacity: .85;
    margin: .1rem 0 0;
    line-height: 1.45;
}

.db-hero-btn {
    display: inline-block;
    margin-top: .55rem;
    align-self: flex-start;
    background: var(--primary-color);
    color: #fff;
    padding: .45rem 1.15rem;
    border-radius: var(--radius-pill);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .01em;
}

/* ——— Card: itinerario previo ——— */
.db-card--prev {
    background: var(--bg-card);
    border-top: 3px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.25rem;
    gap: .3rem;
}

.db-prev-eyebrow {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.db-prev-name {
    font-size: .95rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-prev-dates {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.db-prev-cta {
    font-size: .79rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: auto;
    padding-top: .6rem;
}

/* ——— Card: hub (mismo patrón que las cards de /ciudades-japon) ——— */
.hub-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-main);
    background: var(--bg-card);
    border-top: 3px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}
.hub-card-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}
.hub-card-body {
    padding: .8rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    flex: 1;
}
.hub-card-name {
    font-weight: 700;
    font-size: .95rem;
}
.hub-card-desc {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1;
}
.hub-card-cta {
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    margin-top: .2rem;
}

/* ——— Responsive ——— */
@media (max-width: 900px) {
    .db-bento--prev {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prev1 prev2"
            "new   new";
    }
}

@media (max-width: 600px) {
    .db-card--primary {
        min-height: 200px;
    }
    /* 1 previo: prev a ancho completo, new debajo */
    .db-bento--prev1 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "prev1"
            "new";
    }
    /* 2 previos: dos cuadrados en la misma fila, new debajo */
    .db-bento--prev2 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prev1 prev2"
            "new   new";
    }
    .db-bento--prev2 .db-card--prev {
        aspect-ratio: 1;
    }
}

/* ——— Herramientas: 2 cols ——— */
.tool-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* ——— FAQ: normaliza tamaño en listas ——— */
.faq-section ul,
.faq-section ol {
    margin: .5rem 0 .25rem 1.1rem;
    padding: 0;
}
.faq-section li {
    font-size: .9rem;
    color: #4b4741;
    line-height: 1.5;
    margin-bottom: .2rem;
}

/* ——— Guías de ciudad ——— */
.db-city-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (max-width: 600px) {
    .db-city-grid { grid-template-columns: 1fr; }
}

/* ——— Cómo funciona (3 pasos) ——— */
.how-eyebrow {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary-color);
    margin-bottom: 1.4rem;
}
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
.how-step { text-align: center; }
.how-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: #8a4f73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}
.how-step-title { font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: .3rem; }
.how-step-text  { font-size: .88rem; color: var(--text-muted); line-height: 1.55; max-width: 16rem; margin: 0 auto; }

@media (max-width: 900px) {
    .how-steps { grid-template-columns: 1fr; gap: 1.1rem; }
    .how-step { display: flex; align-items: center; gap: .9rem; text-align: left; }
    .how-step-icon { margin-bottom: 0; flex-shrink: 0; }
    .how-step-text { margin: 0; max-width: none; }
}