/*==============================================================
  J & M · INVITACIÓN DE BODA
  RESPONSIVE.CSS
  Cargar después de style.css y animations.css

  Objetivo:
  - Mantener el diseño floral y elegante.
  - Adaptar sobre, carta y escenas a escritorio, portátil,
    tablet, móvil vertical/horizontal y pantallas bajas.
  - Evitar desbordamientos y textos cortados.
==============================================================*/

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --responsive-gutter: clamp(14px, 3vw, 64px);
}

html {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
main,
#intro {
    min-height: 100vh;
    min-height: 100svh;
}

body {
    overflow-x: hidden;
}

img,
iframe,
svg {
    max-width: 100%;
}

/* Mantener los estados de scroll controlados por JavaScript. */
body.scroll-enabled,
body.invitation-unfolded {
    overflow-x: hidden;
    overflow-y: auto;
}

/*==============================================================
  SOBRE Y PORTADA · BASE FLUIDA
==============================================================*/

#intro {
    width: 100%;
    padding:
        max(12px, var(--safe-top))
        max(14px, var(--safe-right))
        max(18px, var(--safe-bottom))
        max(14px, var(--safe-left));
}

#envelope {
    width: min(520px, 92vw);
    max-width: 100%;
}

#envelope > #letter:not(.is-unfolded) {
    max-width: 100%;
}

.letter-cover {
    min-width: 0;
    padding: clamp(16px, 3vw, 30px) clamp(18px, 4vw, 42px);
}

.cover-announcement,
.cover-name {
    max-width: 100%;
}

.cover-name {
    font-size: clamp(32px, 4vw, 55px);
}

.open-text {
    max-width: 100%;
    font-size: clamp(34px, 4vw, 52px);
}

.unfold-hint-text {
    max-width: 100%;
    font-size: clamp(32px, 3.6vw, 46px);
}

.unfold-arrow {
    width: clamp(26px, 3.2vw, 42px);
}

body > #letter.is-unfolded {
    width: min(calc(100vw - 20px), 1440px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100svh - 20px);
}

/* Las escenas deben poder encogerse dentro de la carta. */
.letter-details,
.invitation-scene,
.scene-content,
.split-content,
.split-text {
    min-width: 0;
    min-height: 0;
}

.invitation-scene {
    padding: clamp(24px, 4vh, 54px) clamp(22px, 5vw, 74px);
}

.scene-content {
    max-width: 100%;
}

.split-content {
    gap: clamp(18px, 3vw, 46px);
}

.split-image,
.announcement-photo,
.family-photo {
    min-width: 0;
}

.split-image img,
.announcement-photo img,
.family-photo img {
    display: block;
    max-width: 100%;
}

/*==============================================================
  ESCENA 1 · ANUNCIO
==============================================================*/

.scene-announcement {
    padding: clamp(22px, 3.5vh, 42px) clamp(22px, 3.5vw, 48px);
}

.scene-announcement .split-content {
    gap: clamp(18px, 2.4vw, 30px);
}

.scene-announcement .announcement-text {
    min-width: 0;
    padding: clamp(10px, 2vw, 30px) clamp(8px, 1.8vw, 24px);
}

.scene-announcement .announcement-intro {
    font-size: clamp(23px, 2.5vw, 36px) !important;
    overflow-wrap: anywhere;
}

.scene-announcement .announcement-main {
    max-width: 100%;
    font-size: clamp(44px, 5.8vw, 86px) !important;
    white-space: normal;
    transform: translateX(clamp(-38px, -2.4vw, -8px));
}

.scene-announcement .announcement-closing {
    font-size: clamp(20px, 2.25vw, 32px) !important;
}

.scene-announcement .announcement-photo {
    height: min(91%, 72vh);
    min-height: 0;
}

/*==============================================================
  ESCENA 2 · HISTORIA
==============================================================*/

.scene-story {
    padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 58px);
}

.scene-story .split-content {
    gap: clamp(18px, 3vw, 42px);
}

.scene-story .story-content {
    width: 100%;
    max-width: 420px;
}

.scene-story .section-eyebrow {
    font-size: clamp(13px, 1.45vw, 20px) !important;
    line-height: 1.12 !important;
}

.scene-story .story-opening {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.03 !important;
}

.scene-story p {
    font-size: clamp(17px, 1.95vw, 27px) !important;
    line-height: 1.18 !important;
}

.scene-story .story-highlight {
    font-size: clamp(27px, 3vw, 42px) !important;
    line-height: 1 !important;
}

.scene-story .story-closing {
    font-size: clamp(19px, 2.05vw, 28px) !important;
    line-height: 1.12 !important;
}

.scene-story .split-image {
    height: min(91%, 72vh);
    min-height: 0;
}

/*==============================================================
  ESCENA 3 · GALERÍA FAMILIAR
==============================================================*/

.scene-family {
    padding: clamp(22px, 4vh, 50px) clamp(22px, 4vw, 62px);
}

.family-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2.5vw, 34px);
    min-height: 0;
}

.family-photo {
    min-height: 0;
    height: min(72vh, 620px);
}

/*==============================================================
  ESCENA 4 · CALENDARIO Y CONTADOR
==============================================================*/

.scene-save-the-date {
    padding: clamp(20px, 3vh, 36px) clamp(22px, 3.5vw, 54px);
}

.save-the-date-content {
    gap: clamp(12px, 2.4vh, 24px);
    max-width: 1050px;
}

.scene-save-the-date .section-eyebrow {
    font-size: clamp(30px, 4.1vw, 80px) !important;
    line-height: 1 !important;
    letter-spacing: clamp(2px, .35vw, 5px);
}

.wedding-calendar {
    width: 100%;
    padding: clamp(8px, 1.3vw, 14px) clamp(10px, 2vw, 30px) clamp(9px, 1.5vw, 16px);
}

.calendar-header {
    gap: clamp(8px, 1.5vw, 18px);
}

.calendar-month,
.calendar-year {
    font-size: clamp(28px, 3.1vw, 44px);
}

.calendar-weekdays {
    gap: clamp(2px, .55vw, 8px);
}

.calendar-weekdays span {
    font-size: clamp(12px, 1.6vw, 23px);
}

.calendar-days {
    gap: 2px clamp(2px, .55vw, 8px);
}

.calendar-days span,
.calendar-days time {
    min-height: clamp(23px, 3.2vh, 39px);
    font-size: clamp(18px, 2.6vw, 38px);
}

.calendar-wedding-day::before {
    font-size: clamp(35px, 4.3vw, 61px) !important;
}

.wedding-countdown {
    gap: clamp(5px, 1vw, 14px);
}

.countdown-unit {
    padding: clamp(5px, .8vw, 7px) clamp(3px, .6vw, 8px);
}

.countdown-number {
    font-size: clamp(18px, 2vw, 28px);
}

.countdown-label {
    font-size: clamp(7px, .65vw, 9px);
    letter-spacing: clamp(.3px, .08vw, 1px);
}

.countdown-date {
    font-size: clamp(24px, 2.6vw, 36px);
}

/*==============================================================
  ESCENA 5 · CEREMONIA
==============================================================*/

.scene-ceremony {
    padding: clamp(22px, 4vh, 54px) clamp(24px, 4vw, 64px);
}

.scene-ceremony .split-content {
    gap: clamp(18px, 3vw, 44px);
}

.ceremony-content {
    min-width: 0;
    padding: clamp(8px, 1.5vh, 20px) 0;
}

.scene-ceremony .scene-title {
    font-size: clamp(38px, 4.5vw, 64px);
    line-height: 1;
    overflow-wrap: anywhere;
}

.ceremony-time-row {
    gap: 8px;
}

.ceremony-time {
    font-size: clamp(16px, 1.7vw, 24px);
}

.ceremony-map {
    width: min(100%, 360px);
}

.ceremony-map-frame {
    width: 100%;
    max-width: 100%;
}

/*==============================================================
  ESCENA 6 · CONFIRMACIÓN
==============================================================*/

.scene-confirmation {
    padding: clamp(16px, 3vh, 28px) clamp(16px, 3.5vw, 48px) !important;
    overflow: hidden;
}

.scene-confirmation .confirmation-content {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

.scene-confirmation .section-eyebrow {
    margin-bottom: clamp(6px, 1.1vh, 14px);
    font-size: clamp(20px, 2.1vw, 30px) !important;
    line-height: 1 !important;
    letter-spacing: clamp(2px, .35vw, 5px);
}

.scene-confirmation .confirmation-title {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(32px, 4.1vw, 60px) !important;
    line-height: .98 !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.scene-confirmation .confirmation-deadline {
    margin-top: clamp(8px, 1.5vh, 16px);
    font-size: clamp(15px, 1.55vw, 23px) !important;
    line-height: 1.2;
}

.scene-confirmation .confirmation-deadline strong {
    display: inline-block;
    font-size: clamp(16px, 1.6vw, 23px) !important;
}

.scene-confirmation .confirmation-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.3vw, 20px);
    margin-top: clamp(14px, 2.2vh, 26px);
}

.scene-confirmation .whatsapp-card {
    min-width: 0;
    min-height: clamp(78px, 12vh, 100px);
    padding: clamp(8px, 1.2vw, 12px);
}

.scene-confirmation .whatsapp-card-label {
    font-size: clamp(13px, 1.2vw, 17px) !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.scene-confirmation .whatsapp-card strong {
    margin: 3px 0;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1;
}

.scene-confirmation .whatsapp-card-action {
    font-size: clamp(10px, .95vw, 13px) !important;
    letter-spacing: clamp(.5px, .1vw, 1.2px);
}

.scene-confirmation .confirmation-allergies {
    width: 100%;
    max-width: 720px;
    margin: clamp(14px, 2vh, 24px) auto 0;
}

.scene-confirmation .confirmation-allergies-label {
    display: block;
    font-size: clamp(15px, 1.45vw, 21px) !important;
    line-height: 1.25;
    text-wrap: balance;
}

.scene-confirmation .confirmation-allergies-input {
    width: 100%;
    min-height: clamp(58px, 8vh, 80px);
    padding: clamp(9px, 1vw, 14px);
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.35;
}

.scene-confirmation .confirmation-allergies-help {
    font-size: clamp(11px, .95vw, 13px);
    line-height: 1.3;
}

/*==============================================================
  ESCENA 7 · DESPEDIDA
==============================================================*/

.scene-farewell-final {
    padding: clamp(22px, 4vh, 54px) clamp(20px, 5vw, 74px);
}

.farewell-final-content {
    width: 100%;
    max-width: 850px;
}

.farewell-opening,
.farewell-couple {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.05;
    text-wrap: balance;
}

.farewell-secondary {
    font-size: clamp(16px, 1.6vw, 23px);
    line-height: 1.35;
}

.farewell-big {
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1;
}

.farewell-date,
.farewell-heart {
    font-size: clamp(12px, 1vw, 16px);
}

/*==============================================================
  TABLET Y ESCRITORIO PEQUEÑO · 601–900 PX
==============================================================*/

@media (min-width: 601px) and (max-width: 900px) {
    #intro {
        transform: translateY(clamp(24px, 5vh, 64px));
    }

    #envelope {
        width: min(72vw, 460px);
    }

    .seal {
        width: clamp(68px, 9vw, 82px);
        height: clamp(68px, 9vw, 82px);
    }

    .open-text {
        margin-top: clamp(24px, 4vh, 40px);
        font-size: clamp(38px, 5vw, 46px);
    }

    .unfold-hint {
        margin-top: clamp(14px, 2.5vh, 24px);
    }

    .invitation-scene {
        padding: clamp(22px, 4vh, 38px) clamp(22px, 5vw, 42px);
    }

    .scene-announcement .split-content,
    .scene-story .split-content,
    .scene-ceremony .split-content {
        gap: clamp(16px, 2.6vw, 24px);
    }

    .scene-announcement .announcement-main {
        font-size: clamp(48px, 7.5vw, 68px) !important;
    }

    .scene-announcement .announcement-intro {
        font-size: clamp(23px, 3.5vw, 30px) !important;
    }

    .scene-announcement .announcement-closing {
        font-size: clamp(20px, 3vw, 26px) !important;
    }

    .scene-story .story-opening {
        font-size: clamp(28px, 4vw, 36px) !important;
    }

    .scene-story p {
        font-size: clamp(17px, 2.5vw, 22px) !important;
    }

    .scene-story .story-highlight {
        font-size: clamp(27px, 3.8vw, 34px) !important;
    }

    .scene-story .story-closing {
        font-size: clamp(18px, 2.7vw, 23px) !important;
    }

    .family-photo {
        height: min(65vh, 500px);
    }

    .scene-confirmation .confirmation-title {
        font-size: clamp(34px, 5vw, 46px) !important;
    }

    .scene-confirmation .confirmation-allergies {
        margin-top: 14px;
    }
}

/*==============================================================
  MÓVIL · 600 PX O MENOS
==============================================================*/

@media (max-width: 600px) {
    #intro {
        justify-content: center;
        padding:
            max(10px, var(--safe-top))
            max(10px, var(--safe-right))
            max(14px, var(--safe-bottom))
            max(10px, var(--safe-left));
        transform: translateY(clamp(8px, 2.5vh, 26px));
    }

    #envelope {
        width: min(92vw, 390px);
    }

    .seal {
        width: clamp(58px, 16vw, 72px);
        height: clamp(58px, 16vw, 72px);
    }

    .letter-cover {
        padding: 15px clamp(14px, 5vw, 24px);
    }

    .cover-announcement {
        font-size: clamp(15px, 4.6vw, 19px);
        white-space: normal;
    }

    .cover-name {
        font-size: clamp(30px, 10vw, 43px);
    }

    .cover-names .cover-name:first-of-type {
        transform: translateX(clamp(8px, 4vw, 18px));
    }

    .cover-names .cover-name:last-of-type {
        transform: translateX(clamp(-18px, -4vw, -8px));
    }

    .cover-ampersand {
        margin: 4px 0 6px;
        font-size: clamp(22px, 7vw, 29px);
    }

    .open-text {
        margin-top: clamp(20px, 4vh, 32px);
        font-size: clamp(31px, 9vw, 42px);
    }

    .unfold-hint {
        gap: 5px;
        margin-top: clamp(12px, 2.5vh, 20px);
    }

    .unfold-hint-text {
        font-size: clamp(29px, 8.5vw, 38px);
    }

    .unfold-arrow {
        width: clamp(24px, 7vw, 32px);
    }

    body > #letter.is-unfolded {
        max-width: calc(100vw - 10px);
        max-height: calc(100vh - 10px);
        max-height: calc(100svh - 10px);
        border-radius: 10px;
    }

    .invitation-scene {
        padding: clamp(14px, 3vh, 24px) clamp(12px, 4vw, 20px);
    }

    .scene-content {
        width: 100%;
        max-width: 100%;
    }

    .invitation-divider {
        width: 76px;
        margin: 12px auto 10px;
    }

    /* Escena 1 */
    .scene-announcement {
        padding: 15px 12px;
    }

    .scene-announcement .split-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: clamp(8px, 1.8vh, 13px);
    }

    .scene-announcement .announcement-text {
        padding: 0 4px;
    }

    .scene-announcement .announcement-intro {
        max-width: 100%;
        font-size: clamp(20px, 5.5vw, 26px) !important;
        line-height: 1.06 !important;
    }

    .scene-announcement .announcement-decoration {
        width: min(150px, 45vw);
        gap: 7px;
        margin: 6px auto 4px;
    }

    .scene-announcement .announcement-decoration > span:not(.announcement-heart) {
        width: 44px;
    }

    .scene-announcement .announcement-heart {
        font-size: 15px;
    }

    .scene-announcement .announcement-main {
        font-size: clamp(42px, 12vw, 60px) !important;
        line-height: .86 !important;
        transform: translateX(-8px);
    }

    .scene-announcement .announcement-decoration-bottom {
        margin: 4px auto 5px;
    }

    .scene-announcement .announcement-closing {
        max-width: 100%;
        font-size: clamp(18px, 5vw, 23px) !important;
        line-height: 1.08 !important;
    }

    .scene-announcement .announcement-rings {
        margin-top: 5px;
        transform: scale(.72);
        transform-origin: top center;
    }

    .scene-announcement .announcement-photo {
        height: 100%;
        min-height: 0;
        border-radius: 14px;
    }

    .scene-announcement .announcement-photo img {
        border-radius: 14px;
    }

    /* Escena 2 */
    .scene-story {
        padding: 14px 12px;
    }

    .scene-story .split-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, .9fr) minmax(0, 1fr);
        gap: clamp(8px, 1.8vh, 12px);
        height: 100%;
    }

    .scene-story .story-content {
        max-width: 100%;
    }

    .scene-story .section-eyebrow {
        margin-bottom: 5px !important;
        font-size: clamp(11px, 3.2vw, 14px) !important;
        letter-spacing: 2px;
    }

    .scene-story .story-opening {
        margin-bottom: 6px !important;
        font-size: clamp(23px, 6.6vw, 29px) !important;
        line-height: 1 !important;
    }

    .scene-story p {
        margin-bottom: 4px !important;
        font-size: clamp(13px, 3.6vw, 16px) !important;
        line-height: 1.13 !important;
    }

    .scene-story .story-highlight {
        margin: 4px auto 5px !important;
        font-size: clamp(23px, 6.4vw, 28px) !important;
        line-height: .98 !important;
    }

    .scene-story .story-closing {
        margin-top: 4px !important;
        font-size: clamp(15px, 4.2vw, 18px) !important;
        line-height: 1.08 !important;
    }

    .scene-story .split-image {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 14px;
    }

    .scene-story .split-image img {
        border-radius: 14px;
    }

    /* Escena 3 */
    .scene-family {
        padding: 14px 12px;
    }

    .family-gallery {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: clamp(8px, 1.6vh, 12px);
    }

    .family-photo {
        height: 100%;
        min-height: 0;
        border-radius: 14px;
    }

    .family-photo img {
        border-radius: 14px;
    }

    /* Escena 4 */
    .scene-save-the-date {
        padding: 12px 10px;
    }

    .save-the-date-content {
        gap: clamp(7px, 1.4vh, 12px);
        height: 100%;
    }

    .scene-save-the-date .section-eyebrow {
        margin-bottom: 2px;
        font-size: clamp(24px, 7vw, 34px) !important;
        letter-spacing: 2px;
    }

    .wedding-calendar {
        padding: 7px 7px 8px;
        border-radius: 10px;
    }

    .calendar-header {
        gap: 8px;
        padding-bottom: 4px;
    }

    .calendar-month,
    .calendar-year {
        font-size: clamp(24px, 7vw, 31px) !important;
        line-height: 1 !important;
    }

    .calendar-weekdays {
        gap: 1px;
        margin: 4px 0 2px;
    }

    .calendar-weekdays span {
        font-size: clamp(10px, 3vw, 13px) !important;
    }

    .calendar-days {
        gap: 0 1px;
    }

    .calendar-days span,
    .calendar-days time {
        min-height: clamp(20px, 3.2vh, 27px);
        font-size: clamp(15px, 4.5vw, 20px) !important;
    }

    .calendar-wedding-day::before {
        font-size: clamp(29px, 8.5vw, 37px) !important;
    }

    .countdown-heading {
        margin-bottom: 4px;
        font-size: clamp(20px, 5.6vw, 25px);
    }

    .wedding-countdown {
        gap: 4px;
    }

    .countdown-unit {
        padding: 4px 2px;
        border-radius: 7px;
    }

    .countdown-number {
        font-size: clamp(15px, 4.3vw, 19px);
    }

    .countdown-label {
        margin-top: 2px;
        font-size: clamp(6px, 1.8vw, 8px);
        letter-spacing: 0;
    }

    .countdown-date {
        margin-top: 3px;
        font-size: clamp(20px, 6vw, 26px);
    }

    /* Escena 5 */
    .scene-ceremony {
        padding: 14px 12px;
    }

    .scene-ceremony .split-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 8px;
    }

    .ceremony-content {
        padding: 0;
    }

    .scene-ceremony .scene-title {
        font-size: clamp(32px, 9vw, 44px) !important;
    }

    .ceremony-time {
        font-size: clamp(15px, 4.5vw, 19px);
    }

    .ceremony-map {
        width: min(100%, 300px);
    }

    .ceremony-map-frame {
        height: clamp(70px, 12vh, 110px);
    }

    .scene-ceremony .split-image {
        height: 100%;
        min-height: 0;
        border-radius: 14px;
    }

    .scene-ceremony .split-image img {
        border-radius: 14px;
    }

    /* Escena 6 */
    .scene-confirmation {
        padding: 12px 11px !important;
    }

    .scene-confirmation .section-eyebrow {
        margin-bottom: 5px;
        font-size: clamp(17px, 5vw, 21px) !important;
        letter-spacing: 2px;
    }

    .scene-confirmation .confirmation-title {
        font-size: clamp(27px, 7.8vw, 39px) !important;
        line-height: .98 !important;
    }

    .scene-confirmation .confirmation-deadline {
        margin-top: 7px;
        font-size: clamp(12px, 3.7vw, 16px) !important;
    }

    .scene-confirmation .confirmation-deadline strong {
        font-size: clamp(13px, 3.9vw, 17px) !important;
    }

    .scene-confirmation .confirmation-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 10px;
    }

    .scene-confirmation .whatsapp-card {
        min-height: 66px;
        padding: 6px 5px;
        border-radius: 12px;
    }

    .scene-confirmation .whatsapp-card-label {
        font-size: clamp(10px, 2.9vw, 13px) !important;
    }

    .scene-confirmation .whatsapp-card strong {
        font-size: clamp(23px, 6.8vw, 31px) !important;
    }

    .scene-confirmation .whatsapp-card-action {
        font-size: clamp(8px, 2.3vw, 10px) !important;
        letter-spacing: .4px;
    }

    .scene-confirmation .confirmation-allergies {
        margin-top: 10px;
    }

    .scene-confirmation .confirmation-allergies-label {
        font-size: clamp(13px, 3.7vw, 16px) !important;
        line-height: 1.15;
    }

    .scene-confirmation .confirmation-allergies-input {
        min-height: 52px;
        padding: 8px 9px;
        font-size: 13px;
    }

    .scene-confirmation .confirmation-allergies-help {
        font-size: 10px;
    }

    /* Escena 7 */
    .scene-farewell-final {
        padding: 18px 14px;
    }

    .farewell-opening,
    .farewell-couple {
        font-size: clamp(30px, 8vw, 42px);
    }

    .farewell-secondary {
        font-size: clamp(14px, 4vw, 17px);
    }

    .farewell-big {
        font-size: clamp(40px, 11vw, 55px);
    }
}

/*==============================================================
  MÓVIL MUY ESTRECHO · 360 PX O MENOS
==============================================================*/

@media (max-width: 360px) {
    #intro {
        padding-left: max(8px, var(--safe-left));
        padding-right: max(8px, var(--safe-right));
    }

    #envelope {
        width: 94vw;
    }

    .cover-announcement {
        font-size: 14px;
    }

    .cover-name {
        font-size: clamp(27px, 9.5vw, 33px);
    }

    .cover-ampersand {
        font-size: 21px;
    }

    .scene-announcement .announcement-main {
        font-size: clamp(39px, 11.5vw, 44px) !important;
    }

    .scene-story .story-opening {
        font-size: 22px !important;
    }

    .scene-story p {
        font-size: 12px !important;
    }

    .scene-story .story-highlight {
        font-size: 22px !important;
    }

    .scene-story .story-closing {
        font-size: 13px !important;
    }

    .scene-confirmation .confirmation-title {
        font-size: clamp(24px, 7.5vw, 28px) !important;
    }

    .scene-confirmation .confirmation-options {
        gap: 5px;
    }

    .scene-confirmation .whatsapp-card-label {
        font-size: 9px !important;
    }

    .scene-confirmation .whatsapp-card strong {
        font-size: 22px !important;
    }

    .scene-confirmation .whatsapp-card-action {
        font-size: 7px !important;
    }
}

/*==============================================================
  PANTALLAS BAJAS Y MÓVIL EN HORIZONTAL
==============================================================*/

@media (max-height: 700px) {
    #intro {
        transform: translateY(clamp(8px, 3vh, 36px));
    }

    #envelope {
        width: min(430px, 68vw, 58vh);
    }

    .open-text {
        margin-top: clamp(10px, 2.8vh, 28px);
        font-size: clamp(30px, 3.5vw, 42px);
    }

    .unfold-hint {
        margin-top: clamp(6px, 1.8vh, 16px);
        gap: 3px;
    }

    .unfold-hint-text {
        font-size: clamp(27px, 3.2vw, 38px);
    }

    .unfold-arrow {
        width: clamp(22px, 2.8vw, 30px);
    }

    .invitation-scene {
        padding-top: clamp(10px, 2.5vh, 22px);
        padding-bottom: clamp(10px, 2.5vh, 22px);
    }

    .scene-confirmation .confirmation-options {
        margin-top: 10px;
    }

    .scene-confirmation .whatsapp-card {
        min-height: 62px;
    }

    .scene-confirmation .confirmation-allergies {
        margin-top: 9px;
    }

    .scene-confirmation .confirmation-allergies-input {
        min-height: 48px;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    #intro {
        transform: translateY(8px);
    }

    #envelope {
        width: min(48vw, 390px, 56vh);
    }

    .seal {
        width: clamp(48px, 8vh, 60px);
        height: clamp(48px, 8vh, 60px);
    }

    .open-text {
        margin-top: 10px;
        font-size: clamp(28px, 5vw, 35px);
    }

    .unfold-hint {
        margin-top: 7px;
    }

    .unfold-hint-text {
        font-size: clamp(25px, 4.5vw, 31px);
    }

    .unfold-arrow {
        width: 22px;
    }

    .invitation-scene {
        padding: 12px clamp(22px, 5vw, 48px);
    }

    .scene-announcement .announcement-main {
        font-size: clamp(38px, 5vw, 54px) !important;
    }

    .scene-story .story-opening {
        font-size: clamp(23px, 3.5vw, 30px) !important;
    }

    .scene-story p {
        font-size: clamp(12px, 1.7vw, 15px) !important;
    }

    .scene-story .story-highlight {
        font-size: clamp(22px, 3vw, 28px) !important;
    }

    .scene-story .story-closing {
        font-size: clamp(13px, 2vw, 17px) !important;
    }

    .scene-confirmation .confirmation-title {
        font-size: clamp(25px, 4vw, 36px) !important;
    }

    .scene-confirmation .confirmation-options {
        margin-top: 8px;
    }

    .scene-confirmation .whatsapp-card {
        min-height: 55px;
        padding: 5px;
    }

    .scene-confirmation .whatsapp-card strong {
        font-size: clamp(22px, 3vw, 29px) !important;
    }

    .scene-confirmation .confirmation-allergies {
        margin-top: 7px;
    }

    .scene-confirmation .confirmation-allergies-input {
        min-height: 42px;
        padding: 6px 8px;
    }
}

/*==============================================================
  ESCRITORIOS GRANDES
==============================================================*/

@media (min-width: 1440px) and (min-height: 800px) {
    #envelope {
        width: 560px;
    }

    #intro {
        transform: translateY(clamp(65px, 10vh, 115px));
    }

    .open-text {
        font-size: 56px;
    }

    .unfold-hint-text {
        font-size: 50px;
    }

    .scene-confirmation .confirmation-content {
        max-width: 980px;
    }
}

/*==============================================================
  ACCESIBILIDAD Y PANTALLAS TÁCTILES
==============================================================*/

@media (hover: none) and (pointer: coarse) {
    .seal {
        min-width: 58px;
        min-height: 58px;
    }

    .seal::before {
        inset: -18px;
    }

    .seal:hover img,
    .whatsapp-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    #envelope,
    .unfold-arrow {
        animation: none !important;
    }

    .seal img,
    .whatsapp-card {
        transition: none !important;
    }
}


/*==============================================================
  RESPONSIVE FIXES · VIEWPORT, ORIENTACIÓN Y ESCENA FINAL
  Cargar al final de responsive.css.
==============================================================*/

/*
  envelope.js calcula y anima left/top/width/height en píxeles usando
  window.innerWidth/innerHeight. No volver a limitar esas dimensiones
  con max-height basado en svh: produciría una carta más baja que la
  posición calculada y recortaría las escenas.
*/
body > #letter.is-unfolded {
    max-width: none;
    max-height: none;
}

/* La escena final mantiene su composición y escala con ambos ejes. */
.scene-farewell-final {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(12px, 3.2svh, 28px)
        clamp(14px, 5vw, 44px);
}

.farewell-final-content {
    width: 100%;
    gap: 0;
}

.farewell-opening {
    max-width: 100%;
    font-size: clamp(26px, min(8vw, 7svh), 42px) !important;
    line-height: 1.05;
}

.farewell-secondary {
    margin-top: clamp(7px, 1.7svh, 14px);
    font-size: clamp(13px, min(3.6vw, 3.5svh), 19px);
    line-height: 1.22;
}

.scene-farewell-final .invitation-divider {
    width: clamp(54px, 16vw, 82px);
    margin: clamp(7px, 1.7svh, 14px) auto;
}

.farewell-big {
    font-size: clamp(34px, min(10vw, 8svh), 54px) !important;
    line-height: 1;
}

.farewell-couple {
    gap: clamp(6px, 1.8vw, 12px);
    margin-top: clamp(8px, 2svh, 16px);
    font-size: clamp(25px, min(7vw, 6.2svh), 40px) !important;
    line-height: 1;
}

.farewell-heart {
    font-size: clamp(12px, 3.2vw, 17px);
}

.farewell-date {
    margin-top: clamp(6px, 1.6svh, 12px);
    font-size: clamp(11px, 2.8vw, 15px);
    letter-spacing: clamp(1px, .7vw, 3px);
}

/* Portátiles y móviles bajos: prioriza espacio vertical sin esconder texto. */
@media (max-height: 500px) {
    .scene-farewell-final {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .farewell-opening {
        font-size: clamp(23px, 6.8svh, 34px) !important;
    }

    .farewell-secondary {
        margin-top: 5px;
        font-size: clamp(12px, 3.2svh, 16px);
    }

    .scene-farewell-final .invitation-divider {
        margin: 5px auto;
    }

    .farewell-big {
        font-size: clamp(30px, 7.5svh, 42px) !important;
    }

    .farewell-couple {
        margin-top: 6px;
        font-size: clamp(22px, 5.8svh, 32px) !important;
    }

    .farewell-date {
        margin-top: 4px;
        font-size: 10px;
    }
}

/* En orientación horizontal se aprovecha el ancho para los bloques con foto. */
@media (max-width: 900px) and (orientation: landscape) {
    .invitation-scene {
        padding:
            clamp(8px, 3svh, 16px)
            clamp(14px, 3.5vw, 30px);
    }

    .scene-announcement .split-content,
    .scene-story .split-content,
    .scene-ceremony .split-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(10px, 2vw, 18px);
        height: 100%;
        min-height: 0;
    }

    .scene-announcement .announcement-text,
    .scene-story .story-content,
    .scene-ceremony .ceremony-content {
        min-width: 0;
        min-height: 0;
    }

    .scene-announcement .announcement-photo,
    .scene-story .split-image,
    .scene-ceremony .split-image {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .scene-announcement .announcement-main {
        font-size: clamp(34px, 5.5vw, 52px) !important;
    }

    .scene-story .story-opening {
        font-size: clamp(21px, 3.4vw, 29px) !important;
    }

    .scene-story p {
        font-size: clamp(12px, 1.8vw, 15px) !important;
    }

    .scene-story .story-highlight {
        font-size: clamp(21px, 3vw, 27px) !important;
    }

    .scene-story .story-closing {
        font-size: clamp(12px, 1.9vw, 16px) !important;
    }

    .family-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
    }

    .family-photo {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .scene-save-the-date {
        padding: 8px 12px;
    }

    .save-the-date-content {
        gap: clamp(4px, 1svh, 8px);
    }
}

/* Use dynamic viewport units where available for the initial envelope area.
   The invitation letter itself remains sized by the envelope animation. */
@supports (min-height: 100dvh) {
    #intro {
        min-height: 100dvh;
    }
}

/*==============================================================
  MOBILE FLORAL BACKGROUND AND ANNOUNCEMENT TYPE
==============================================================*/
@media (max-width: 600px) {
    /*
      The source background is a wide floral frame. "cover" crops its
      flowered left and right edges on portrait screens, leaving only
      the mostly empty center visible.
    */
    html {
        background-color: #F5EFE4;
    }

    body {
        background-color: #F5EFE4;
        background-position: center top;
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-attachment: scroll;
    }

    /* Restore a little breathing room so the floral frame can show around
       the fixed letter while keeping its JS-calculated position intact. */
    .scene-announcement .announcement-intro {
        font-size: clamp(22px, 5.8vw, 30px) !important;
        line-height: 1.08 !important;
    }

    .scene-announcement .announcement-main {
        font-size: clamp(47px, 12vw, 66px) !important;
        line-height: .9 !important;
    }

    .scene-announcement .announcement-closing {
        font-size: clamp(20px, 5.8vw, 28px) !important;
        line-height: 1.12 !important;
    }

    .scene-announcement .announcement-rings {
        transform: scale(.82);
    }
}

/*==============================================================
  FIXED MOBILE BACKDROP, CEREMONY SPACING AND TYPE SCALE
==============================================================*/
@media (max-width: 600px) {
    /*
      Pin the floral image to the viewport. A fixed pseudo-element is
      more reliable on mobile browsers than background-attachment:fixed.
    */
    body {
        position: relative;
        isolation: isolate;
        background-image: none;
        background-color: #F5EFE4;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: url("../img/backgrounds/background-noise.webp");
        background-position: center top;
        background-size: 100vw auto;
        background-repeat: repeat-y;
    }

    /* Keep the wedding rings inside the paper frame. */
    .scene-ceremony .ceremony-content {
        padding: 12px 0 0;
    }

    .scene-ceremony .rings-icon {
        flex: 0 0 auto;
        margin: 8px auto 12px;
    }

    /* Increase the reading size slightly across the invitation scenes. */
    .scene-announcement .announcement-intro {
        font-size: clamp(24px, 6.2vw, 32px) !important;
    }

    .scene-announcement .announcement-main {
        font-size: clamp(48px, 12.4vw, 68px) !important;
    }

    .scene-announcement .announcement-closing {
        font-size: clamp(22px, 6vw, 29px) !important;
    }

    .scene-story .section-eyebrow {
        font-size: clamp(12px, 3.5vw, 16px) !important;
    }

    .scene-story .story-opening {
        font-size: clamp(26px, 7vw, 33px) !important;
    }

    .scene-story p {
        font-size: clamp(15px, 4vw, 18px) !important;
        line-height: 1.16 !important;
    }

    .scene-story .story-highlight {
        font-size: clamp(26px, 7vw, 32px) !important;
    }

    .scene-story .story-closing {
        font-size: clamp(17px, 4.5vw, 20px) !important;
    }

    .scene-save-the-date .section-eyebrow {
        font-size: clamp(27px, 7.4vw, 38px) !important;
    }

    .scene-ceremony .section-eyebrow {
        font-size: clamp(19px, 5.5vw, 24px) !important;
    }

    .scene-ceremony .scene-title {
        font-size: clamp(38px, 10vw, 50px) !important;
    }

    .scene-ceremony .ceremony-time {
        font-size: clamp(18px, 5vw, 23px) !important;
    }

    .scene-confirmation .section-eyebrow {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }

    .scene-confirmation .confirmation-title {
        font-size: clamp(39px, 10vw, 49px) !important;
    }

    .scene-confirmation .confirmation-deadline,
    .scene-confirmation .confirmation-deadline strong {
        font-size: clamp(17px, 4.5vw, 19px) !important;
    }

    .scene-confirmation .whatsapp-card-label,
    .scene-confirmation .confirmation-allergies-label {
        font-size: clamp(16px, 4.2vw, 19px) !important;
    }

    .scene-confirmation .whatsapp-card strong {
        font-size: clamp(34px, 8.5vw, 38px) !important;
    }

    .scene-confirmation .whatsapp-card-action {
        font-size: clamp(11px, 3vw, 13px) !important;
    }

    .farewell-opening,
    .farewell-couple {
        font-size: clamp(32px, 8vw, 46px) !important;
    }

    .farewell-secondary {
        font-size: clamp(15px, 4.2vw, 20px);
    }

    .farewell-big {
        font-size: clamp(42px, 11vw, 58px) !important;
    }
}

/* On very short phones, retain a compact fit for the final scene. */
@media (max-width: 600px) and (max-height: 500px) {
    .farewell-opening {
        font-size: clamp(23px, 6.8svh, 34px) !important;
    }

    .farewell-secondary {
        font-size: clamp(12px, 3.2svh, 16px);
    }

    .farewell-big {
        font-size: clamp(30px, 7.5svh, 42px) !important;
    }

    .farewell-couple {
        font-size: clamp(22px, 5.8svh, 32px) !important;
    }
}