/* ==========================================================================
   Mi Invitación · invitaciones en escritorio (≥ 900px)
   Fondos de sección a todo el ancho; contenido centrado en un ancho cómodo.
   ========================================================================== */
@media (min-width: 900px) {
    body { padding-bottom: 0; }

    /* ---------- Portada editorial: foto y texto, centrados ---------- */
    .editorial {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: 2rem;
        width: min(760px, 100%);
        padding: 6rem 3rem 4rem;
    }
    .ed-media { order: -1; width: min(100%, 480px); display: flex; justify-content: center; }
    .ed-media img {
        width: auto;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: min(74vh, 720px);
        object-fit: contain;
    }
    .ed-mono { width: 100%; height: min(42vh, 380px); min-height: 240px; }
    .theme-olivo .ed-media img, .theme-olivo .ed-mono { height: auto; min-height: 0; max-width: 560px; }
    .ed-text { gap: 1.4rem; }
    .editorial .names { font-size: clamp(5rem, 8.4vw, 9rem); }
    .style-kids .editorial .names { font-size: clamp(4.4rem, 7vw, 7.5rem); }
    .ed-date strong { font-size: 5rem; }
    .ed-date span { font-size: 1.1rem; }

    /* ---------- Portada póster ---------- */
    .poster { padding: 8rem 3rem 4rem; gap: 2rem; }
    .poster-bg { background-size: contain; background-repeat: no-repeat; background-color: var(--hero-bg); }
    .hero-still { width: min(460px, 42vw); }
    .hero-still img { width: 100%; height: auto; max-height: min(72vh, 680px); aspect-ratio: auto; object-fit: contain; }
    .poster-date { font-size: clamp(6rem, 10vw, 10rem); gap: 1.2rem; }
    .poster .names { font-size: clamp(4.5rem, 7vw, 7.5rem); }
    .poster-foot { flex-direction: row; gap: .5rem 1.6rem; font-size: .85rem; }
    .poster-foot span + span::before { display: inline; content: '·'; margin-right: 1.6rem; opacity: .5; }

    /* ---------- Portada lúdica (infantiles) ---------- */
    .play { padding: 7rem 3rem 7rem; gap: 1.6rem; }
    .play-badge { width: 200px; height: 200px; }
    .play-badge span { font-size: 6rem; }
    .play .names { font-size: clamp(5rem, 9vw, 9.5rem); }
    .play-date { padding: .8rem 1.8rem .8rem .9rem; }
    .pd-day { width: 64px; height: 64px; font-size: 1.8rem; }
    .play-wave { height: 110px; }
    .decor span { font-size: clamp(2.8rem, 4.5vw, 4.6rem); }
    .decor span:nth-child(1) { top: 14%; left: 12%; }
    .decor span:nth-child(2) { top: 16%; right: 12%; }
    .decor span:nth-child(3) { bottom: 26%; left: 14%; }
    .decor span:nth-child(4) { bottom: 30%; right: 14%; }
    .decor span:nth-child(5) { top: 46%; left: 6%; }
    .decor span:nth-child(6) { top: 50%; right: 6%; }

    .ticker { padding: 1.1rem 0; }
    .ticker-track { font-size: 1.5rem; gap: 2.4rem; }

    /* ---------- Secciones: títulos y textos centrados ---------- */
    .sec { padding: 8rem 3rem; }
    .sec-head { flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding-bottom: 1.6rem; margin-bottom: 3.5rem; }
    .sec-head::after { left: calc(50% - 50px); right: calc(50% - 50px); background: var(--accent); opacity: .55; }
    .sec-title { font-size: clamp(3rem, 4.4vw, 4.4rem); }
    .sec-count { margin-left: 0; }
    .sec-text { text-align: center; max-width: 680px; font-size: 1.05rem; }

    .welcome { text-align: center; max-width: 900px; margin-inline: auto; font-size: clamp(1.9rem, 2.6vw, 2.7rem); }
    .quote { max-width: 760px; margin: 3.5rem auto 0; padding: 2.4rem 3rem; justify-items: center; text-align: center; }
    .quote p { font-size: 1.45rem; }

    /* ---------- Cuenta regresiva ---------- */
    .countdown { max-width: 880px; margin-inline: auto; }
    .countdown div { text-align: center; padding: .6rem 1rem; }
    .countdown div:first-child { padding-left: 1rem; }
    .countdown strong { font-size: clamp(4.2rem, 6.5vw, 6.5rem); }
    .countdown-circulos,
    .countdown-anillos,
    .countdown-tarjetas,
    .countdown-bloques,
    .countdown-linea { gap: 1.25rem; }
    .countdown-circulos div,
    .countdown-anillos div,
    .countdown-tarjetas div,
    .countdown-bloques div,
    .countdown-linea div { padding: 0; border: 0; }
    .countdown-circulos strong,
    .countdown-anillos strong { width: 6.5rem; height: 6.5rem; font-size: 2.2rem; }
    .countdown-tarjetas strong,
    .countdown-bloques strong { min-height: 6.2rem; font-size: 2.7rem; }
    .countdown-linea strong { font-size: clamp(3rem, 4vw, 4.2rem); }
    .style-kids .countdown-circulos strong,
    .style-kids .countdown-anillos strong { font-size: 2.1rem; }
    .style-kids .countdown-tarjetas strong,
    .style-kids .countdown-bloques strong,
    .style-kids .countdown-linea strong { font-size: 2.5rem; }
    .countdown span { font-size: .72rem; }
    .cd-actions { text-align: center; margin-top: 3rem; }

    /* ---------- Dónde y cuándo ---------- */
    .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; max-width: 1140px; }
    .tile { min-height: 260px; padding: 1.8rem; }
    .tile-event, .tile-date, .bento:not(:has(.tile-dress)) .tile-date { grid-column: span 1; }
    .tile-family { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center; gap: 3rem; min-height: 0; padding: 2.2rem; text-align: center; }
    .tile-family:has(.kin-grid) { flex-direction: column; align-items: center; }
    .tile-family .kin-grid { width: min(100%, 760px); }
    .tile-family .family { margin: 0; gap: 4rem; }
    .tile-family .family p { font-size: 1.35rem; }
    .dress-cinta .tile-k { width: calc(100% + 3.6rem); margin-left: -1.8rem; margin-right: -1.8rem; }
    .big-day { font-size: 6rem; }
    .tile-hour { font-size: 3rem; }
    .tile-big { font-size: 2.1rem; }

    /* ---------- Agenda ---------- */
    .agenda.agenda-carrusel { width: min(100%, 440px); max-width: 440px; overflow: hidden; }
    .agenda-carrusel li { width: 100%; min-width: 0; max-width: 100%; min-height: 210px; padding: 1.8rem 1.6rem; }
    .agenda-carrusel time { font-size: 2.4rem; }
    .ag-dots { width: min(100%, 440px); }
    .agenda-escalera { position: relative; max-width: 860px; gap: 1.15rem; }
    .agenda-escalera::before { content: ''; position: absolute; left: 50%; top: .4rem; bottom: .4rem; width: 2px; background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
    .agenda-escalera li { width: min(100%, calc(50% - 1.6rem)); border-left-width: 1px; min-width: 0; }
    .agenda-escalera .ag-title { overflow-wrap: anywhere; }
    .agenda-escalera li:nth-child(odd) { justify-self: start; border-right: 4px solid var(--accent); }
    .agenda-escalera li:nth-child(even) { justify-self: end; text-align: right; border-left: 4px solid var(--accent); }
    .agenda-escalera li:nth-child(even) .ag-step { justify-self: end; }
    .agenda-editorial time { font-size: clamp(3rem, 4.5vw, 4.4rem); }
    .agenda.agenda-lados { width: min(100%, 980px); max-width: 980px; }
    .agenda-lados li { grid-template-columns: minmax(0, 1fr) 6.75rem minmax(0, 1fr); padding: 1.5rem 0; }
    .agenda-lados .ag-step { width: 5.15rem; height: 5.15rem; font-size: 1.35rem; }
    .agenda-lados .ag-step .ico { width: 2rem; height: 2rem; }
    .agenda-lados time { font-size: 2.45rem; padding-right: 1.6rem; }
    .agenda-lados li:nth-child(even) time { padding: 0 0 0 1.6rem; }
    .agenda-lados .ag-title { font-size: 1.4rem; padding-right: 1.6rem; }
    .agenda-lados li:nth-child(even) .ag-title { padding: 0 0 0 1.6rem; }

    /* ---------- Galería: cuadrícula ---------- */
    .carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; gap: 1rem; max-width: 1140px; }
    .gallery-item { flex: none; }
    .carousel:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }

    /* ---------- Regalos ---------- */
    .gift { margin-inline: auto; justify-items: center; text-align: center; max-width: 680px; padding: 2.6rem; }
    .gift-account { text-align: left; }

    /* ---------- Confirmación: pase + formulario lado a lado ---------- */
    .rsvp-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; max-width: 1000px; margin-inline: auto; align-items: center; }
    .rsvp-wrap:not(:has(.ticket)) { grid-template-columns: minmax(0, 620px); justify-content: center; }
    .ticket { padding: 2rem 2rem 1.6rem; }
    .tk-main strong { font-size: 2.6rem; }
    .tk-cut { margin: 1.6rem -2rem 1.3rem; }
    .rsvp-box { padding: 2rem; }

    /* ---------- Cierre ---------- */
    .sec-closing { padding: 9rem 3rem 5rem; }
    .closing { font-size: 1.7rem; }
    .closing-names { font-size: clamp(5rem, 9vw, 9.5rem); }

    .dock { bottom: 24px; }
    .dock a, .dock button { padding: .55rem 1rem; font-size: .62rem; }
}

@media (min-width: 1500px) {
    .editorial { width: min(760px, 100%); }
    .bento, .carousel, .agenda { max-width: 1240px; }
    .agenda.agenda-carrusel, .ag-dots { max-width: 440px; }
}