/* Composición móvil. Sólo cambia la web, nunca los PNG del pedido. */
@media(max-width:850px){
  :root{--dock-space:calc(92px + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:var(--dock-space);-webkit-text-size-adjust:100%}
  .masthead{height:74px;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;gap:12px}
  .masthead .wordmark{font-size:26px;gap:10px}
  .masthead .wordmark>span{font-size:7px;letter-spacing:1.6px;padding-left:10px}
  .masthead .text-button{min-height:44px;font-size:11px;gap:9px}
  .opening-heading{top:clamp(82px,15svh,142px);left:24px;right:24px;text-align:center}
  .opening-heading .eyebrow{font-size:9px;line-height:1.55;letter-spacing:1.8px;max-width:100%;margin:0 auto 16px}
  .opening-heading h1{font-size:clamp(42px,min(14.7vw,8.3svh),68px);line-height:.96;letter-spacing:-1.8px;text-wrap:balance}
  .opening-subtitle{font-size:14px;line-height:1.45;max-width:100%;margin:17px auto 0;text-wrap:balance}
  body[data-web-theme=rainbow] .opening-subtitle{display:none}
  .envelope-scene{left:50%;width:var(--mobile-envelope-width,min(84vw,360px));top:var(--mobile-envelope-top,65%)}
  body[data-envelope=textured] .letter{width:var(--card-layout-width,74%);left:calc(50% - var(--card-layout-width,74%)/2);top:calc(8% + var(--card-layout-top,0px));will-change:auto}
  body[data-mobile-reading=true] .envelope-scene .letter{visibility:hidden}
  body[data-mobile-reading=true] .opening-stage{perspective:none}
  body[data-mobile-reading=true] .mobile-reading-card{display:block;position:absolute;z-index:12;margin:0;transform:none;filter:none;will-change:auto;box-shadow:0 10px 35px #343b282b}
  .mobile-reading-card>.invitation-image{display:block;width:100%;height:auto;transform:none;filter:none;will-change:auto}
  .scroll-cue{display:none}
  .our-day{padding:72px 24px 80px}
  .section-ornament{margin-bottom:32px}
  .our-day>.eyebrow{font-size:11px;letter-spacing:2.5px}
  .our-day .couple{font-size:clamp(54px,14.5vw,78px);line-height:1.05;letter-spacing:-1.5px;gap:6px;flex-direction:column;margin:24px auto 30px}
  .couple>span{max-width:100%;overflow-wrap:anywhere}
  .couple em{font-size:.43em;line-height:1.2;margin:2px 0}
  .invitation-quote{font-size:24px;line-height:1.45;max-width:28ch;margin:24px auto 36px;text-wrap:balance}
  .day-details{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:440px;margin:0 auto 26px;gap:16px;padding-inline:0}
  .day-details>div{width:100%;padding:22px 18px}
  .day-details .details-star{display:none}
  .day-details .eyebrow{font-size:11px;letter-spacing:2px}
  .day-details p{font-size:clamp(28px,7.5vw,34px);line-height:1.25;margin:10px 0 0;overflow-wrap:anywhere}
  .button{min-height:50px;max-width:100%;font-size:15px;padding:15px 22px}
  .paper-section{display:flex;flex-direction:column;gap:34px;padding:64px 24px 76px;text-align:center}
  .paper-intro{max-width:34ch}
  .paper-intro h2{font-size:clamp(42px,11vw,58px);line-height:1.05;margin:22px 0}
  .paper-intro>p:last-child{font-size:16px;line-height:1.6;text-wrap:balance}
  .paper-preview{width:min(100%,340px);max-width:100%;flex-shrink:0}
  .paper-preview>span{font-size:10px;letter-spacing:2px}
  .closing{padding:30px 20px 76px}
  .countdown-scene{padding-block:18px;scroll-margin-bottom:var(--dock-space)}
  .countdown-scene .closing-logo{width:clamp(210px,min(76vw,38svh),320px);max-width:88vw}
  .countdown-scene>.eyebrow{font-size:11px;letter-spacing:2.1px;margin:12px 0 18px;text-align:center}
  .countdown-scene .countdown{width:100%;max-width:420px;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto}
  .countdown-scene .counter-number{min-height:82px;font-size:clamp(32px,10vw,46px);font-weight:400;padding:12px 3px;letter-spacing:-1px}
  .countdown-scene .time-unit{gap:12px}
  .countdown-scene .counter-label{font-size:clamp(9.5px,2.7vw,11px);letter-spacing:.5px;line-height:1.4}
  .countdown-scene .clock-note{font-size:12px;line-height:1.6;max-width:32ch;margin:18px auto 8px;text-wrap:balance}
  .clock-event-date{display:block;font-size:14px;white-space:nowrap;color:var(--ink)}
  .clock-separator{display:none}
  .clock-source{display:block;font-size:11px;margin-top:5px}
  .closing h2{font-size:clamp(44px,12vw,58px);line-height:1.06;margin:30px 0 24px}
  .closing-actions{display:flex;flex-direction:column;align-items:stretch;width:min(100%,340px);margin:28px auto 0;gap:14px}
  .closing-actions .text-button{min-height:48px;font-size:14px}
  .view-switch{bottom:calc(10px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);max-width:360px;padding:5px;display:grid;grid-template-columns:1fr 1fr 44px;gap:4px;border-radius:24px}
  .view-switch button{min-height:44px;min-width:0;padding:10px 8px;gap:6px;font-size:12px;border-radius:19px}
  .view-switch svg{width:17px;height:17px;flex-shrink:0}
  .view-switch #garden-motion-toggle{width:44px;padding:10px}
  footer{margin-inline:20px;padding:30px 0 calc(96px + env(safe-area-inset-bottom,0px));gap:16px}
  footer>a{min-height:44px;display:inline-flex;align-items:center}
  #card-dialog{width:calc(100vw - 20px);max-width:520px;max-height:calc(100svh - 24px);padding:20px 18px;border-radius:12px}
  #card-dialog>.invitation-image{max-height:calc(100svh - 210px);max-width:100%;object-fit:contain}
  .dialog-actions{display:grid;grid-template-columns:1fr;gap:8px;text-align:center}
  .dialog-actions a,.dialog-actions button{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:14px}
  .dialog-close{width:44px;height:44px}
  /* Seda conserva sus cartelas; el reloj deja de tener un recuadro dentro de otro. */
  body[data-web-style=seda] .countdown{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
  body[data-web-style=seda] .counter-number{border-radius:16px;box-shadow:0 4px 0 #BEC4BC40,0 8px 18px #333C3212}
  body[data-web-style=seda] .day-details>div{padding:22px 18px}
  body[data-web-style=seda] .botanical-left,
  body[data-web-style=seda] .botanical-right{bottom:calc(94px + env(safe-area-inset-bottom,0px));width:clamp(100px,29vw,132px);opacity:calc(.78 * var(--heading-alpha));--breeze-turn:1deg;--breeze-rise:4px;--breeze-sway:2px}
  body[data-web-style=seda] .botanical-left{left:8px}
  body[data-web-style=seda] .botanical-right{right:8px}
  body[data-web-style=seda] .botanical-page-left{bottom:14px}
  /* El título no comparte espacio con las ramas superiores de Eucalipto. */
  body[data-web-style=eucalipto] .botanical-branch-left,
  body[data-web-style=eucalipto] .botanical-branch-right{display:none}
  body[data-web-style=eucalipto] .botanical-left,
  body[data-web-style=eucalipto] .botanical-right{width:clamp(76px,23vw,130px);height:auto;max-width:none;max-height:none;top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px));opacity:.68;--breeze-turn:2deg;--breeze-rise:7px;--breeze-sway:4px}
  body[data-web-style=eucalipto] .botanical-left{left:-12px;transform:rotate(8deg)}
  body[data-web-style=eucalipto] .botanical-right{right:-12px;transform:rotate(-8deg)}
}
@media(max-width:360px){
  .masthead{padding-inline:16px}
  .masthead .wordmark>span{display:none}
  .opening-heading{left:18px;right:18px}
  .opening-heading .eyebrow{font-size:8px;letter-spacing:1.4px}
  .our-day{padding-inline:20px}
  .countdown-scene .counter-number{font-size:32px;min-height:74px}
  .countdown-scene .counter-label{font-size:9.5px;letter-spacing:.3px}
  .view-switch button:not(#garden-motion-toggle) svg{display:none}
}
@media(max-width:850px) and (max-height:640px){
  .countdown-scene{padding-block:12px}
  .countdown-scene .closing-logo{width:clamp(155px,34svh,220px)}
  .countdown-scene>.eyebrow{margin:8px 0 12px}
  .countdown-scene .clock-note{margin:12px auto 4px}
}
@media(max-width:850px) and (min-width:560px) and (max-height:480px){
  .masthead{height:62px}
  .opening-heading{left:6%;right:auto;top:24%;width:42%;text-align:left}
  .opening-heading:before{left:0}
  .opening-heading .eyebrow{font-size:8px;letter-spacing:1.5px;margin-left:0;margin-bottom:10px}
  .opening-heading h1{font-size:clamp(36px,6vw,48px)}
  .opening-subtitle{font-size:12px;margin:12px 0 0;max-width:28ch}
  .envelope-scene{left:74%;top:50%;width:min(37vw,310px,72svh)}
  .opening-stage>.botanical{display:none}
  .countdown-scene{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;width:min(680px,100%);padding-block:12px}
  .countdown-scene .closing-logo{width:min(44svh,220px);grid-column:1;grid-row:1/4;max-width:100%}
  .countdown-scene>.eyebrow,.countdown-scene .countdown,.countdown-scene .clock-note{grid-column:2}
}