.modern .header-utilities{ display: flex; gap: 9px; align-items: center; margin-left: auto; }
.modern .utility-link{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 15px; min-height: 48px; border-radius: 17px; background: #14120e; border: 1px solid #ac9b7445; box-shadow: inset 0 1px #fff0cd16, 0 3px #07060544; color: #f0e7d1; font: 1rem var(--font-display, Maple, sans-serif); transition: background 250ms, transform 350ms cubic-bezier(.22,1,.36,1); }
.modern .utility-link > svg{ flex-shrink: 0; width: 19px; height: 19px; stroke-width: 1.5; transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.modern .utility-link:hover{ background: #493d29; transform: translateY(-2px); }
.modern .utility-settings:hover > svg{ transform: rotate(65deg); }
.modern .utility-profile:hover > svg{ transform: translateY(-2px); }
.modern .utility-link[aria-current]{ background: #edddb9; color: #14120e; border-color: #f7edd5; }
.modern .utility-link:active{ transform: translateY(1px); }
.modern .applause-studio[hidden]{ display: none; }
.modern .hero-editorial{ padding-block: 24px; }
.modern .hero-editorial .welcome-accessible-title{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.modern .hero-editorial h1{ font-size: clamp(3.25rem, 5.7vw, 5.65rem); line-height: 1.07; letter-spacing: -.04em; }
.modern .hero-editorial .hello-line{ color: var(--cream); font-size: .79em; }
.modern .hero-editorial .name-line{ color: #ffd09e; text-shadow: 0 4px 28px #e6a07b16; }
.modern .hero-eyebrow{ gap: 10px; font-size: .65rem; letter-spacing: .13em; margin-bottom: 23px; }
.modern .eyebrow-orbit{ display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; margin: 0; border-radius: 50%; background: #3a3428; border: 1px solid #bd90a040; }
.modern .eyebrow-orbit svg{ width: 16px; height: 16px; }
.modern .hero-editorial .greeting{ max-width: 48ch; margin-top: 26px; font-size: .95rem; line-height: 1.85; color: #e1d9c6; }
.modern .hero-editorial .welcome-accessible-title + .greeting{ margin-top: 0; }
.modern .greeting-lead{ display: block; font-family: var(--font-display, Maple, sans-serif); font-size: 1.2rem; color: #fbf5e6; margin-bottom: 9px; line-height: 1.5; }
.modern .hero-editorial .hero-actions{ margin-top: 30px; gap: 14px; }
.modern .action-pill{ gap: 12px; min-height: 58px; padding: 8px 8px 8px 20px; border-radius: 100px; font-size: .94rem; border-color: #ffe0b2; box-shadow: 0 3px 0 #9c6d61, inset 0 1px #fff4d6, 0 8px 22px #04040326; }
.modern .action-pill > span:not(.action-arrow){ min-width: 0; }
.modern .action-symbol{ display: inline-flex; }
.modern .action-symbol svg{ width: 19px; height: 19px; }
.modern .action-arrow{ display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: #59333e15; box-shadow: inset 0 1px 2px #60394112; transition: transform 420ms cubic-bezier(.2,.8,.2,1), background 300ms; }
.modern .action-arrow svg{ width: 19px; height: 19px; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.modern .action-pill:hover .action-arrow{ background: #fff1d599; }
.modern .action-pill:hover .action-arrow svg{ transform: translate(2px,-2px); }
.modern .action-secondary{ background: #14120e; color: #f8ecd1; border-color: #b4a2784d; box-shadow: inset 0 1px #ffefc812, 0 3px 0 #07060540; padding-left: 22px; }
.modern .action-secondary .action-arrow{ background: #7462422b; }
.modern .action-secondary:hover .action-arrow{ background: #a4926747; }
.modern .action-secondary:hover .action-arrow svg{ transform: translateX(3px); }
.modern .hero.in-view .hero-eyebrow .eyebrow-orbit{ transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.modern .hero-editorial:hover .eyebrow-orbit{ transform: rotate(90deg); }
.modern .guestbook-letter{ display: grid; grid-template-columns: 165px minmax(0,1fr) auto; gap: 32px; max-width: 1100px; padding: 36px 38px 36px 26px; margin: 90px auto 0; position: relative; isolation: isolate; border-radius: 40px; border: 1px solid #c5b5904d; background: linear-gradient(115deg,#413829,#14120e 68%); box-shadow: inset 0 1px #f0e3c421, 0 18px 55px #04040321; text-align: left; }
.modern .guestbook-letter::before{ content: ''; position: absolute; inset: 7px; border: 1px solid #e0d3b312; border-radius: 33px; pointer-events: none; }
.modern .letter-art{ width: 175px; max-width: 100%; }
.modern .letter-art > svg{ width: 100%; height: auto; overflow: visible; }
.modern .letter-envelope{ transform-origin: 50% 70%; transform: rotate(-9deg); transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.modern .letter-paper{ transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.modern .letter-spark{ transform-origin: 168px 39px; transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.modern .guestbook-letter:is(:hover,:focus-within) .letter-envelope{ transform: rotate(2deg) translateY(-3px); }
.modern .guestbook-letter:is(:hover,:focus-within) .letter-paper{ transform: translateY(-12px); }
.modern .guestbook-letter:is(:hover,:focus-within) .letter-spark{ transform: rotate(100deg) scale(1.15); }
.modern .letter-copy{ min-width: 0; }
.modern .letter-copy .eyebrow{ font-size: .85rem; color: #e4d5b1; letter-spacing: .15em; margin-bottom: 12px; }
.modern .guestbook-letter h2{ font-size: clamp(1.75rem,2.8vw,2.75rem); line-height: 1.14; color: #fff0c9; letter-spacing: -.02em; }
.modern .guestbook-letter h2 span{ color: #f5e8c9; }
.modern .letter-description{ font-size: 1.1rem; line-height: 1.8; margin-top: 14px; color: #dad1bd; }
.modern .applause-studio{ display: grid; grid-template-columns: minmax(0,1fr) 205px; max-width: 880px; align-items: center; column-gap: 64px; margin: 90px auto 0; padding: 38px 0 44px; min-height: 0; text-align: left; }
.modern .applause-studio .clap-copy{ min-width: 0; }
.modern .applause-studio .eyebrow{ font-size: .64rem; letter-spacing: .14em; margin-bottom: 15px; }
.modern .applause-studio h2{ font-size: clamp(2rem,3.1vw,3rem); line-height: 1.12; letter-spacing: -.025em; }
.modern .applause-studio h2 span{ color: #f0e0ba; }
.modern .clap-tally{ display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.modern .clap-tally > span{ display: grid; place-items: center; color: #f0b6a9; width: 28px; height: 28px; flex-shrink: 0; }
.modern .clap-tally svg{ width: 20px; height: 20px; }
.modern .clap-tally p{ font-size: .81rem; line-height: 1.7; color: #e9e1cd; }
.modern .applause-studio #clap-status{ position: static; min-height: 2.8em; margin-top: 12px; font-size: .68rem; line-height: 1.65; color: #cbc1aa; max-width: 50ch; }
.modern .applause-studio .clap-button{ width: 205px; max-width: 100%; min-width: 0; min-height: 205px; margin: 0; padding: 8px; gap: 0; justify-self: center; border-radius: 28px; }
.modern .applause-studio .clap-artwork{ width: 160px; height: 160px; transform: rotate(-5deg); transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.modern .applause-studio .clap-aura{ inset: -35px; background: radial-gradient(ellipse,#e1ca942a,transparent 67%); }
@media (max-width: 760px){.modern .applause-studio .clap-aura{ inset-inline: 0; }
 }
.modern .applause-studio .clap-button > span:not(.clap-aura):not(.clap-burst){ font-size: 1.55rem; color: #ffdaa9; transform: rotate(-5deg); margin-top: -9px; }
.modern .applause-studio .clap-button:enabled:hover{ transform: translateY(-4px); }
.modern .applause-studio .clap-button:enabled:hover .clap-artwork{ transform: rotate(2deg) scale(1.06); }
.modern .applause-studio .clap-button:disabled{ transform: none; opacity: .55; }
.modern .applause-studio .clap-button:enabled:active{ transform: scale(.96); }
.modern .applause-studio .clap-burst{ display: block; inset: 14px 3px; opacity: 1; }
.modern .applause-studio .clap-burst svg{ position: absolute; width: 22px; height: 22px; opacity: 0; margin: 0; }
.modern .applause-studio .clap-burst svg:nth-child(1){ left: 0; top: 20%; --burst-x: -17px; --burst-y: -16px; color: #ffda98; }
.modern .applause-studio .clap-burst svg:nth-child(2){ right: 3%; top: 10%; --burst-x: 20px; --burst-y: -24px; color: #eab7ca; }
.modern .applause-studio .clap-burst svg:nth-child(3){ left: 40%; top: 0; --burst-x: 2px; --burst-y: -29px; color: #fce9bb; }
.modern .applause-studio .clap-burst svg:nth-child(4){ right: 0; top: 59%; --burst-x: 24px; --burst-y: 5px; color: #b8e8d5; }
.modern .applause-studio .clap-burst svg:nth-child(5){ left: 5%; top: 65%; --burst-x: -21px; --burst-y: 11px; color: #fcecc8; }
.modern .applause-studio .clap-button.clapping .clap-burst{ animation: none; }
.modern.motion-on .applause-studio .clapping .clap-burst svg{ animation: applause-spark 520ms cubic-bezier(.16,.75,.3,1) both; }
.modern.motion-on .applause-studio .clapping .clap-front{ animation: applause-front 520ms cubic-bezier(.22,1,.36,1); }
.modern.motion-on .applause-studio .clapping .clap-back{ animation: applause-back 520ms cubic-bezier(.22,1,.36,1); }
@keyframes applause-spark{ 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--burst-x),var(--burst-y)) rotate(45deg) scale(1.2); } }
@keyframes applause-front{ 30%,65% { transform: rotate(10deg) translate(5px,-2px); } 45%,100% { transform: none; } }
@keyframes applause-back{ 30%,65% { transform: rotate(-10deg) translate(-6px,3px); } 45%,100% { transform: none; } }
.modern .site-footer{ margin-top: 26px; border-top-color: #b29f7233; }
.modern .footer-top{ align-items: center; gap: 28px; padding-block: 30px 15px; }
.modern .footer-signature{ display: flex; align-items: center; gap: 15px; }
.modern .footer-star{ color: #ecc1d1; display: grid; place-items: center; width: 40px; height: 40px; }
.modern .footer-star svg{ width: 34px; height: 34px; }
.modern .footer-name{ font: 1.65rem/1.2 var(--font-display, Maple, sans-serif); color: #fcebbf; display: block; letter-spacing: -.035em; }
.modern .footer-note{ display: block; margin-top: 7px; font-size: .7rem; color: #d2c9b5; }
.modern .back-top{ border-radius: 100px; padding: 7px 7px 7px 19px; font-size: .8rem; border: 1px solid #b3a2794d; background: #332c1e; gap: 16px; }
.modern .back-top-icon{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #efdeb6; color: #14120e; }
.modern .back-top svg{ transition: transform 350ms cubic-bezier(.2,.8,.2,1); }
.modern .back-top:hover svg{ transform: rotate(-45deg) translate(2px,-2px); }
.modern .character-credit{ font-size: .7rem; margin-top: 4px; line-height: 1.7; }
.modern .city{ position: relative; inset: auto; width: 100%; height: clamp(180px,17vw,240px); margin-top: -48px; background: url('./assets/city.jpg') center bottom / auto 100% repeat-x; mask-image: linear-gradient(transparent, #000 45%); opacity: 1; pointer-events: none;
  /* La ilustración es violeta de origen; se lleva al dorado del resto
     sin tocar el archivo, igual que con la textura de estrellas. */
  filter: grayscale(.85) sepia(.75) saturate(1.9) brightness(.82); }
@media (max-width: 1050px){.modern .header-utilities{ gap: 7px; }
.modern .utility-link{ padding: 10px 11px; font-size: .88rem; }
.modern .guestbook-letter{ grid-template-columns: 145px minmax(0,1fr); gap: 15px 28px; padding: 30px; }
.modern .letter-art{ grid-row: span 2; }
.modern .hero-editorial .hero-actions{ align-items: flex-start; }
.modern .action-pill{ font-size: .9rem; }

}
@media (max-width: 700px){.modern .applause-studio{ column-gap: 25px; grid-template-columns: minmax(0,1fr) 160px; }
.modern .applause-studio .clap-button{ width: 160px; }
.modern .applause-studio .clap-artwork{ width: 140px; height: 140px; }

}
@media (max-width: 600px){.modern .header-utilities{ order: 2; }
.modern .utility-link{ min-width: 42px; min-height: 44px; padding: 10px; }
.modern .utility-link span{ position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modern .hero-editorial{ padding-top: 10px; padding-bottom: 0; }
.modern .hero-editorial h1{ font-size: clamp(1.8rem,12vw,4.2rem); }
.modern .hero-editorial .greeting{ font-size: .88rem; line-height: 1.85; margin-top: 23px; }
.modern .greeting-lead{ font-size: 1.12rem; margin-bottom: 12px; }
.modern .hero-eyebrow{ font-size: .57rem; line-height: 1.7; gap: 9px; margin-bottom: 17px; }
.modern .hero-editorial .hero-actions{ display: grid; grid-template-columns: minmax(0,1fr); gap: 13px; max-width: 360px; }
.modern .hero-actions .action-pill{ width: 100%; font-size: .94rem; padding-left: 20px; justify-content: flex-start; }
.modern .hero-actions .action-arrow{ margin-left: auto; }
.modern .guestbook-letter{ grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 65px; padding: 26px; border-radius: 32px; text-align: center; }
.modern .guestbook-letter::before{ border-radius: 25px; }
.modern .letter-art{ grid-row: auto; width: 135px; justify-self: center; }
.modern .letter-copy .eyebrow{ justify-content: center; font-size: .85rem; }
.modern .guestbook-letter h2{ font-size: clamp(1.8rem,8vw,2.5rem); }
.modern .letter-description{ font-size: 1.1rem; }
.modern .applause-studio{ grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 56px; padding-block: 30px; text-align: center; }
.modern .applause-studio .clap-copy .eyebrow{ justify-content: center; font-size: .6rem; }
.modern .applause-studio h2{ font-size: clamp(1.75rem,9vw,2.65rem); }
.modern .clap-tally{ justify-content: center; gap: 7px; margin-top: 20px; }
.modern .clap-tally p{ font-size: .78rem; }
.modern .applause-studio #clap-status{ margin: 12px auto 0; font-size: .65rem; }
.modern .applause-studio .clap-button{ min-height: 165px; width: 180px; }
.modern .applause-studio .clap-artwork{ width: 145px; height: 145px; }
.modern .footer-top{ flex-wrap: wrap; gap: 22px; }
.modern .back-top{ font-size: .75rem; }
.modern .character-credit{ font-size: .66rem; }
.modern .city{ height: 180px; margin-top: -35px; }

}
.modern.motion-paused .hero-editorial:hover .eyebrow-orbit,
.modern.motion-paused .utility-link:hover,
.modern.motion-paused .utility-link:hover > svg,
.modern.motion-paused .guestbook-letter .letter-envelope,
.modern.motion-paused .guestbook-letter .letter-paper,
.modern.motion-paused .guestbook-letter .letter-spark,
.modern.motion-paused .action-pill:hover .action-arrow svg,
.modern.motion-paused .applause-studio .clap-button:enabled:hover,
.modern.motion-paused .applause-studio .clap-artwork{ transform: none; }
@media (prefers-reduced-motion: reduce){.modern .hero-editorial:hover .eyebrow-orbit,
  .modern .utility-link:hover,
  .modern .utility-link:hover > svg,
  .modern .guestbook-letter .letter-envelope,
  .modern .guestbook-letter .letter-paper,
  .modern .guestbook-letter .letter-spark,
  .modern .action-pill:hover .action-arrow svg,
  .modern .applause-studio .clap-button:enabled:hover,
  .modern .applause-studio .clap-artwork{ transform: none; }

}