/* EXPERIENCIA
   La entrada animada (la casa, el sobre y la carta), el jardín de los bordes, la letra
   manuscrita y las animaciones. Se carga después de estilos.css. */

/* Tipografías */
@font-face{font-family:Pinyon;src:url('assets/fonts/pinyon.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* Base y piezas compartidas */
:root{--paper:#f7f3e9;--ink:#3d493e;--muted:#707469;--blue:#e3e8dc;--night:#3d5145;--rose:#f8d7e7;--sage:#e3e8dc;--gold:#ae8b50;--line:#cccdbd;--script:Pinyon,Cormorant,Georgia,serif}
.handwritten,.story-signature{font-family:var(--script);font-style:normal}
.handwritten{font-size:30px;line-height:1.4}

/* Portada */
.hero h1{font-size:clamp(70px,7.1vw,118px);margin-bottom:19px}
.hero h1 em{font-size:1.15em;line-height:.96}
.hero-subtitle{font-family:var(--script);font-size:47px;line-height:1.1;color:#87724e;margin:4px 0 12px;white-space:pre-line}
.hero-name{font-size:34px}
.hero-ink-trace{width:min(340px,70%);height:24px;margin:0 0 0 4px;position:relative;color:var(--gold)}
.hero-ink-trace>svg:first-child{width:100%;height:24px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}
.writing-quill{position:absolute;width:26px;height:26px;left:0;top:-15px;fill:none;stroke:var(--ink);stroke-width:1;opacity:0}

/* Entrada: la casa, el sobre y la carta */
.experience-enhanced:not(.experience-ready) .ink-write>span,.experience-enhanced:not(.experience-ready) .ink-write>em{clip-path:inset(0 100% 0 0)}
.experience-ready .ink-write>span{animation:inkReveal 1.8s .15s both}
.experience-ready .ink-write>em{animation:inkReveal 2s .7s both}
.experience-ready .hero-ink-trace>svg:first-child path{stroke-dasharray:380;animation:inkLine 2s .8s both}
.experience-ready .writing-quill{animation:quillWrite 2s .8s both}

/* Piezas compartidas, invitación, confirmación y portada */
.petal-emblem{width:65px;height:52px;fill:#d8bcb547;stroke:#a79069;stroke-width:.8}
.letter-petals{margin:0 auto 24px;width:55px;height:43px}
.rsvp{background:#e3e8dc}
.response-card{background:#f4f0e5;border-color:#b4baa7}
.debut-seal{background:#e0e6d8}
.debut-seal::before{border-color:#98a58b}
.reading-progress i{background:var(--gold)}

/* Una sola entrada: el palacio conduce al sobre y a su carta. */
.arrival{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;border:0;overflow:hidden;margin:0;color:var(--ink);background:radial-gradient(ellipse at 50% 53%,#fdfbf5 0%,#f5f0e6 57%,#ece3d6 100%)}
.arrival::backdrop{background:var(--paper)}
.arrival[open]{display:block}
.arrival-running{overflow:hidden}
.arrival-running .music-toggle,.arrival-running .garden-world{opacity:0;pointer-events:none}
.arrival-skip{position:absolute;top:32px;right:42px;display:flex;align-items:center;gap:15px;min-height:44px;padding:8px 15px;border-bottom:1px solid #b09b7480;font-size:11px;z-index:20}
.arrival-skip .icon{width:19px}
.arrival-heading{position:absolute;top:9%;left:8%;right:8%;text-align:center;z-index:5;pointer-events:none}
.arrival-heading .eyebrow{font-size:9px;letter-spacing:.22em;color:#988058}
.arrival-heading>p:last-child{font-family:var(--serif);font-size:42px;margin-top:8px}
.arrival-stage{position:absolute;inset:17% 4% 12%;display:grid;place-items:center;perspective:1200px}
.arrival-envelope{position:absolute;width:min(420px,76vw);height:246px;opacity:0;perspective:900px;--letter-rise:-105px}
.arrival-envelope-back{position:absolute;inset:0;background:#dadfcf;border:1px solid #afbaa0;border-radius:2px;box-shadow:0 26px 50px #53493617;z-index:0}
.arrival-envelope-front{position:absolute;inset:0;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);background:linear-gradient(33deg,#e5e9dc 49.8%,#cbd3bf 50%,#dce3d1 50.5%);z-index:3;border:1px solid #bac4ad}
.arrival-envelope-flap{position:absolute;inset:0 0 42%;clip-path:polygon(0 0,100% 0,50% 100%);background:#ccd6c0;transform-origin:top;z-index:4}
.arrival-wax,.keepsake-seal,.acceptance-seal{background:radial-gradient(circle at 35% 30%,#a65658,#763039 75%);color:#f4ddc3;box-shadow:inset 0 0 0 4px #b4666660,inset 0 0 0 7px #632b3250,0 4px 12px #51272b2b;border-radius:46% 49% 44% 48%}
.arrival-wax{position:absolute;left:calc(50% - 35px);top:calc(52% - 35px);width:70px;height:70px;z-index:5;display:grid;place-content:center;transform:rotate(-10deg)}
.arrival-wax::after,.keepsake-seal::after,.acceptance-seal::after{content:'';position:absolute;inset:11px;border:1px solid #d1a18d70;border-radius:50%;pointer-events:none}
.arrival-wax>span{font-family:var(--serif);font-size:28px;letter-spacing:-.09em}
.arrival-wax img{width:40px;height:40px;object-fit:contain}
.arrival-paper{position:absolute;left:6%;width:88%;bottom:14px;height:286px;padding:27px 18px;text-align:center;background:#fffdf6;border:1px solid #d2c4a6;box-shadow:0 10px 30px #76634016;z-index:2;opacity:0;transform-origin:50% 90%}
.arrival-paper::before{content:'';position:absolute;inset:10px;border:1px solid #c5b18a70;pointer-events:none}
.arrival-paper-crown{display:block;margin:auto;width:43px;height:32px;fill:none;stroke:var(--gold);stroke-width:.8}
.arrival-script{font-family:var(--script);font-size:44px;line-height:1.25;margin-top:22px;white-space:nowrap;color:#3f4c40;clip-path:inset(0 100% 0 0)}
.arrival-ink{position:absolute;top:88px;left:8%;width:28px;height:28px;opacity:0}
.arrival-ink svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.1}
.arrival-paper-rule{display:block;width:70%;height:1px;background:linear-gradient(90deg,transparent,#b59868,transparent);margin:20px auto 13px}
.arrival-signature{font-family:var(--script);font-size:31px;color:#8b7855}
.arrival-caption{position:absolute;bottom:10%;left:8%;right:8%;text-align:center;font-family:var(--serif);font-style:italic;font-size:20px;color:#827457;z-index:7}
.arrival-progress{position:absolute;bottom:5%;left:calc(50% - 52px);width:104px;height:1px;background:#b69d7140}
.arrival-progress i{display:block;height:100%;background:#a48855;transform:scaleX(0);transform-origin:left}
.arrival.is-playing .arrival-envelope{animation:envelopeArrival 10s ease both}
.arrival.is-playing .arrival-wax{animation:waxLift .9s 4.6s ease both}
.arrival.is-playing .arrival-envelope-flap{animation:flapOpen 1.5s 4.8s ease-in-out both,envelopeDissolve 1.2s 7.1s ease both}
.arrival.is-playing .arrival-paper{animation:letterUnfold 2.4s 5.3s ease both}
.arrival.is-playing .arrival-envelope-front,.arrival.is-playing .arrival-envelope-back{animation:envelopeRest 1.2s 7.1s ease both}
.arrival.is-playing .arrival-script{animation:inkReveal 1.5s 6.2s steps(25,end) both}
.arrival.is-playing .arrival-ink{animation:letterQuill 1.5s 6.2s linear both}
.arrival.is-playing .arrival-progress i{animation:arrivalProgress 10s linear both}
.arrival.is-leaving{animation:arrivalFade .65s ease both}
.arrival.is-static .arrival-envelope{opacity:1}
.arrival.is-static .arrival-paper{opacity:1;transform:translateY(var(--letter-rise))}
.arrival.is-static .arrival-script{clip-path:none}
.arrival.is-static .arrival-house,.arrival.is-static .arrival-envelope-front,.arrival.is-static .arrival-envelope-back,.arrival.is-static .arrival-envelope-flap,.arrival.is-static .arrival-wax{display:none}

/* El jardín bordea la lectura; nunca ocupa los controles. */
.garden-world{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;contain:layout paint;opacity:0;transition:opacity 1.6s;--garden-flow:0;--bloom-scale:.65;--bloom-alpha:.5}
.experience-ready .garden-world{opacity:1}
.garden-branch{position:absolute;width:clamp(90px,11vw,160px);height:min(83vh,690px);fill:none;stroke:#88937a;stroke-width:1.1;opacity:.22;overflow:visible}

/* Otros */
.branch-left{left:-62px;bottom:-50px;transform:translate(calc(var(--garden-flow)*15px),calc(var(--garden-flow)*-34px))}
.branch-right{right:-58px;top:7%;transform:scaleX(-1) translate(calc(var(--garden-flow)*18px),calc(var(--garden-flow)*27px))}

/* Jardín que acompaña la lectura */
.garden-stem{stroke-width:1.1;fill:none}
.garden-leaves{fill:#b2bda160;stroke:#8a977c;transform-origin:60% 70%;animation:leafSway 9s ease-in-out infinite alternate}
.garden-blossom{fill:#d4aaa2;stroke:#98776c;transform-box:fill-box;transform-origin:center;transform:scale(var(--bloom-scale));transition:transform 2.3s,opacity 2.3s;opacity:var(--bloom-alpha)}
.garden-blossom.peony{fill:#e4c4b1;stroke:#ae8e7b}
.garden-world.is-blooming{--bloom-scale:1;--bloom-alpha:1}
.garden-column{position:absolute;top:15%;bottom:10%;width:18px;border-left:1px solid #a7906420;border-right:1px solid #a790641c}
.garden-column::before,.garden-column::after{content:'';position:absolute;left:-5px;right:-5px;height:7px;border-top:1px solid #a7906425;border-bottom:1px solid #a7906425}
.garden-column::before{top:0}
.garden-column::after{bottom:0}
.garden-column-left{left:11px}
.garden-column-right{right:11px}
.garden-petals i,.footer-petals i{position:absolute;width:9px;height:15px;border-radius:75% 15% 75% 20%;background:linear-gradient(130deg,#c79192,#ecd1c8);opacity:0;pointer-events:none}
.garden-petals i:first-child{left:9%;top:-20px;animation:petalDrift 16s 2s ease-in-out infinite}
.garden-petals i:last-child{right:7%;top:-20px;animation:petalDrift 19s 9s ease-in-out infinite reverse}
.garden-world.at-finale .garden-petals{visibility:hidden}
.garden-butterfly{position:absolute;left:0;top:50%;width:32px;height:26px;fill:#d6c08b4d;stroke:#a69468;stroke-width:.7;opacity:0;transform-origin:center}
.garden-world.butterfly-flight .garden-butterfly{animation:butterflyFlight 6s ease-in-out both}
.page-unfocused .garden-world *,.page-unfocused .footer-petals *{animation-play-state:paused!important}

/* Invitación y carta */
.invitation-keepsake{position:relative;text-align:center;padding:35px 28px;border-top:1px solid #b89b655e;border-bottom:1px solid #b89b655e;max-width:450px;margin:auto;width:100%}
.keepsake-fan{width:55px;height:43px;fill:none;stroke:var(--gold);stroke-width:.8;margin:0 auto 20px}
.keepsake-name{font-family:var(--serif);font-size:39px;line-height:1.15}
.keepsake-seal{position:relative;width:58px;height:58px;display:grid;place-content:center;margin:24px auto 18px;transform:rotate(-8deg)}
.keepsake-seal>span{font-family:var(--serif);font-size:24px;letter-spacing:-.08em}
.keepsake-seal img{width:32px;height:32px;object-fit:contain}
.keepsake-seal::after{inset:9px}
.keepsake-seal:hover{transform:rotate(-8deg) scale(1.04)}
.invitation-keepsake .text-link{font-size:10px}

/* Historia y retrato */
.portrait-figure{max-width:435px;padding:0 0 33px;justify-self:center}
.portrait-frame{position:relative;aspect-ratio:4/5;padding:31px;background:#eee8d8;box-shadow:0 14px 38px #7b6a4410}
.portrait-frame>img{height:100%;width:100%;object-fit:cover;display:block;transition:opacity 1.6s,outline-color .5s;outline:1px solid #b1986050;outline-offset:7px}
.portrait-frame[data-has-portrait=false]>img{opacity:.16;filter:blur(1px)}
.portrait-placeholder{position:absolute;inset:31px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f3e9ad;color:#8e805f;padding:18px;text-align:center}
.portrait-placeholder>svg{width:53px;height:43px;fill:none;stroke:var(--gold);stroke-width:.65;margin-bottom:20px}
.portrait-placeholder>span{font-family:var(--serif);font-size:95px;line-height:1;letter-spacing:-.08em}
.portrait-placeholder>span img{width:115px;max-height:115px;object-fit:contain}
.portrait-placeholder>small{font-size:7px;letter-spacing:.2em;max-width:165px;line-height:1.8;margin-top:26px}
.portrait-ornament{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1;pointer-events:none}
.portrait-figure.reveal{transition:opacity 1.6s}

/* Piezas compartidas */
.js-motion .portrait-figure.reveal:not(.visible){transform:none}

/* Historia y retrato */
.story-age{right:-34px;bottom:13px;color:#b9bdac;pointer-events:none}
.story-age>span{font-size:95px}
.story-age small{font-size:7px;letter-spacing:.17em}
.story-signature{font-size:35px;color:#877454}

/* Álbum de fotos */
.gallery-section{background:linear-gradient(125deg,#f8d7e7,#f6e7e9 65%,#e3e8dc)}
.gallery-intro{width:320px}
.gallery-help{font-size:9px;margin-top:14px;line-height:1.6;color:#7b786b}
.gallery-controls{gap:12px;margin-top:18px}
.gallery-controls>span{font-size:8px;white-space:nowrap}
.gallery-photo>button{position:relative}
.gallery-photo>button::after,.hero-carousel::after{content:'';position:absolute;inset:10px;border:1px solid #c6a463;box-shadow:inset 0 0 0 3px #efdca02e;pointer-events:none;opacity:0;transition:opacity .5s;z-index:2}
.gallery-photo{transition:opacity 1.2s,transform 1.2s}
.gallery-photo>button:hover img{transform:scale(1.025)}

/* Confirmación de asistencia */
.acceptance-seal{position:relative;margin:26px auto 10px;width:132px;height:132px;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-12deg)}
.acceptance-seal>span{font-family:var(--script);font-size:30px;line-height:1.15;z-index:1}
.acceptance-seal>small{font-family:var(--serif);font-size:15px;letter-spacing:.12em;margin-top:4px}
.acceptance-seal.is-stamped{animation:sealStamp .7s cubic-bezier(.22,.7,.3,1) both}

/* Pie de página */
.footer{position:relative;overflow:hidden;background:linear-gradient(#f7f3e9,#efe8dc)}
.footer-petals{position:absolute;inset:0;pointer-events:none}
.footer-petals i:nth-child(1){left:19%;top:-20px;animation:finalPetal 14s ease-in-out infinite}
.footer-petals i:nth-child(2){left:68%;top:-20px;animation:finalPetal 17s 4s ease-in-out infinite}
.footer-petals i:nth-child(3){left:86%;top:-20px;animation:finalPetal 15s 8s ease-in-out infinite}
.footer:not(.in-view) .footer-petals i{animation-play-state:paused}
.footer-farewell{font-family:var(--script);font-size:39px;line-height:1.5}
.footer.in-view .footer-farewell{animation:closingPhrase 1.8s ease both}
.replay-entry{font-size:8px;margin-top:23px;color:#827355}

/* Cursores decorados, solo con ratón */
@media(hover:hover) and (pointer:fine){
  .themed-cursor{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M3 2v15l4-4 3 7 3-1-3-7h6Z' fill='%233d493e' stroke='%23f7f3e9'/%3E%3Cg fill='%23d4aaa2' stroke='%23ae8b50' stroke-width='.6'%3E%3Cellipse cx='20' cy='16' rx='3' ry='5'/%3E%3Cellipse cx='20' cy='16' rx='5' ry='3'/%3E%3Ccircle cx='20' cy='16' r='2' fill='%23eee4ce'/%3E%3C/g%3E%3C/svg%3E") 3 2,auto}
  .themed-cursor :is(a,button){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 28 24 5M8 23C7 4 23 2 29 3c1 8-2 20-21 20Z' fill='%23f7f3e9' stroke='%23877754' stroke-width='1.2'/%3E%3Cpath d='M4 28 24 5M12 18l-1-8m5 4 9 1' stroke='%233d493e' fill='none'/%3E%3C/svg%3E") 4 28,pointer}
  .themed-cursor :is(.gallery-photo>button,.hero-carousel,.portrait-frame){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M3 3v14l4-4 3 7 3-1-3-7h6Z' fill='%233d493e' stroke='%23f7f3e9'/%3E%3Cpath d='M16 13h9v11h-9Z' fill='none' stroke='%23ae8b50' stroke-width='1.5'/%3E%3C/svg%3E") 3 3,auto}
  .themed-cursor :is(.keepsake-seal,.invitation-keepsake .text-link,.letter-paper button){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='10' fill='%23844048' stroke='%23c69985'/%3E%3Ccircle cx='14' cy='14' r='6.5' fill='none' stroke='%23e6c7a7'/%3E%3C/svg%3E") 14 14,pointer}
}

/* Animaciones */
@keyframes inkReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes inkLine{from{stroke-dashoffset:380}to{stroke-dashoffset:0}}
@keyframes quillWrite{0%{opacity:0;left:0}8%{opacity:.8}90%{opacity:.8}100%{opacity:0;left:92%}}
@keyframes envelopeArrival{0%,34%{opacity:0;transform:translateY(40px) scale(.86)}44%,90%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-15px) scale(1.04)}}
@keyframes waxLift{to{transform:rotate(-13deg) translateY(28px) scale(.85);opacity:0}}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:4}50%{z-index:4}100%{transform:rotateX(175deg);z-index:0}}
@keyframes letterUnfold{0%{opacity:0;transform:translateY(40px) rotateX(-75deg) scale(.94)}28%{opacity:1}100%{opacity:1;transform:translateY(var(--letter-rise)) rotateX(0) scale(1)}}
@keyframes envelopeRest{to{opacity:0;transform:translateY(50px)}}
@keyframes envelopeDissolve{to{opacity:0}}
@keyframes letterQuill{0%{opacity:0;left:8%}8%,91%{opacity:.75}100%{opacity:0;left:89%}}
@keyframes arrivalProgress{to{transform:scaleX(1)}}
@keyframes arrivalFade{to{opacity:0}}
@keyframes leafSway{from{transform:rotate(-.8deg)}to{transform:rotate(1.2deg)}}
@keyframes petalDrift{0%{opacity:0;transform:translate(0,-20px) rotate(10deg)}8%{opacity:.28}88%{opacity:.2}100%{opacity:0;transform:translate(24px,100vh) rotate(270deg)}}
@keyframes butterflyFlight{0%{opacity:0;transform:translate(-45px,15px) rotate(-12deg)}20%{opacity:.45;transform:translate(16vw,-30px) rotate(5deg)}70%{opacity:.35;transform:translate(57vw,20px) rotate(-8deg)}100%{opacity:0;transform:translate(90vw,-45px) rotate(9deg)}}
@keyframes sealStamp{0%{opacity:0;transform:translateY(-20px) rotate(-22deg) scale(1.55)}65%{opacity:1;transform:translateY(0) rotate(-11deg) scale(.96)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes finalPetal{0%{opacity:0;transform:translate(0,-10px) rotate(0)}10%{opacity:.45}85%{opacity:.25}100%{opacity:0;transform:translate(-48px,520px) rotate(260deg)}}
@keyframes closingPhrase{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Tablet (hasta 850 px) */
@media(max-width:850px){
  /* Portada */
  .hero-name{font-size:28px}
  .hero-subtitle{font-size:39px}
  .hero-ink-trace{height:20px}
  /* Jardín, historia y álbum */
  .garden-column{display:none}
  .portrait-frame{padding:26px}
  .portrait-placeholder{inset:26px}
  .gallery-intro{width:285px}
}

/* Teléfono (hasta 640 px, o pantalla táctil de poca altura) */
@media(max-width:640px), (max-height:500px) and (pointer:coarse){
  /* Portada */
  .hero h1{font-size:62px;line-height:.94;margin:0 0 9px;max-width:100%}
  .hero h1 em{font-size:1.12em}
  .hero-subtitle{font-size:36px;margin:0 0 7px;grid-column:1;grid-row:3}
  .hero-ink-trace{display:none}
  .hero-copy .hero-name{grid-row:4;font-size:28px;margin:0 0 20px}
  .hero-figure{grid-row:5}
  .hero-copy .hero-intro{grid-row:6}
  .hero-copy .hero-meta{grid-row:7}
  .hero-copy .button{grid-row:8}
  .hero-copy .personal-greeting{grid-row:9}
  /* Entrada: la casa, el sobre y la carta */
  .arrival-skip{top:14px;right:17px;font-size:10px;padding:5px 10px}
  .arrival-heading{top:10%;left:7%;right:7%}
  .arrival-heading .eyebrow{font-size:7px;letter-spacing:.18em}
  .arrival-heading>p:last-child{font-size:35px;margin-top:5px}
  /* El sobre empieza debajo del nombre, para que la carta no lo tape al salir. */
  .arrival-stage{inset:calc(190px + env(safe-area-inset-top)) -10% 17%}
  .arrival-envelope{top:max(127px,calc(50% - 89px));width:285px;height:178px;--letter-rise:-30px}
  .arrival-paper{height:241px;padding:24px 11px;bottom:11px}
  .arrival-paper::before{inset:8px}
  .arrival-script{font-size:35px;margin-top:21px}
  .arrival-signature{font-size:27px}
  .arrival-paper-rule{margin:19px auto 12px}
  .arrival-wax{width:56px;height:56px;left:calc(50% - 28px);top:calc(52% - 28px)}
  .arrival-wax>span{font-size:24px}
  .arrival-wax::after{inset:9px}
  .arrival-ink{top:78px;width:22px;height:22px}
  .arrival-caption{font-size:17px;left:9%;right:9%;bottom:10%;line-height:1.4}
  .arrival-progress{bottom:6%}
  /* Jardín y otros */
  .garden-branch{width:83px;height:430px;opacity:.19}
  .branch-left{left:-58px;bottom:-65px}
  .branch-right{right:-53px;top:14%}
  /* Jardín que acompaña la lectura */
  .garden-petals i{width:6px;height:10px}
  .garden-petals i:first-child{left:4%}
  .garden-petals i:last-child{right:3%}
  .garden-butterfly{width:23px;height:19px}
  /* Historia y retrato */
  .story{gap:35px}
  .portrait-figure{width:calc(100% - 18px);max-width:350px}
  .portrait-frame{padding:25px}
  .portrait-placeholder{inset:25px}
  .portrait-placeholder>span{font-size:84px}
  .portrait-placeholder>small{font-size:7px}
  .story-age{right:-27px;bottom:14px}
  .story-age>span{font-size:85px}
  .story-age small{font-size:6px}
  .story-signature{font-size:32px}
  /* Álbum de fotos */
  .gallery-intro{display:block;width:auto}
  .gallery-intro>p{max-width:none}
  .gallery-help{margin-top:9px;font-size:9px}
  .gallery-controls{justify-content:flex-end;margin-top:16px;gap:13px}
  .gallery-controls>span{display:block;letter-spacing:.03em}
  /* Invitación y carta */
  .letter-petals{width:43px;height:34px}
  /* Pie de página */
  .footer-farewell{font-size:32px;margin:8px 15px 0;line-height:1.4}
  .footer-petals i{width:7px;height:12px}
  .replay-entry{font-size:8px;margin-top:18px}
}

/* Ventanas anchas de poca altura */
@media(max-height:550px) and (min-width:641px){
  /* Entrada: la casa, el sobre y la carta */
  .arrival-heading{top:5%}
  .arrival-heading>p:last-child{font-size:29px}
  .arrival-stage{inset:16% 12% 15%}
  .arrival-envelope{transform:scale(.8);width:320px;height:180px;--letter-rise:-40px}
  .arrival-paper{height:232px;padding:19px}
  .arrival-script{font-size:35px}
  .arrival-caption{font-size:16px;bottom:6%}
  .arrival-progress{bottom:3%}
}

/* Teléfono (hasta 640 px, o pantalla táctil de poca altura) */
@media(max-width:640px), (max-height:500px) and (pointer:coarse){
  /* Portada */
  .hero-ink-trace{display:block;grid-column:1;grid-row:3;width:235px;height:15px;margin:-4px 0 0}
  .hero-ink-trace>svg:first-child{height:15px}
  .writing-quill{width:23px;height:23px;top:-14px}
  .hero-subtitle{grid-row:4}
  .hero-copy .hero-name{grid-row:5}
  .hero-figure{grid-row:6}
  .hero-copy .hero-intro{grid-row:7}
  .hero-copy .hero-meta{grid-row:8}
  .hero-copy .button{grid-row:9}
  .hero-copy .personal-greeting{grid-row:10}
}

/* Sin animaciones para quien las desactiva en su dispositivo */
@media(prefers-reduced-motion:reduce){
  /* Ajustes de varias secciones */
  .garden-world,.footer-petals,.writing-quill,.arrival-ink{display:none!important}
  .ink-write>span,.ink-write>em,.arrival-script{clip-path:none!important;animation:none!important}
  .hero-ink-trace path{stroke-dashoffset:0!important;animation:none!important}
  .portrait-figure,.gallery-photo{transition:none}
  .acceptance-seal.is-stamped{animation:none;transform:rotate(-12deg)}
  .arrival.is-playing *{animation-duration:.001ms!important;animation-delay:0ms!important}
  .footer-farewell{animation:none!important}
}