/* v30 · Una invitación y un formulario, dentro de la identidad de Plinto. */
#fin.demo-end { min-height: 0; padding-top: 0; background: #07100c; }
#fin.demo-end .end-light { top: 26%; left: 20%; width: 85vw; height: 90vh; opacity: .65; }
#fin .demo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(45px,8vw,110px); align-items: center; text-align: left; padding-block: clamp(85px,10vw,150px); }
.demo-invitation { min-width: 0; }
#fin .demo-invitation .end-logo { width: 78px; margin: 0 0 35px; }
.demo-invitation .eyebrow { margin-bottom: 20px; }
#fin .demo-invitation .end-title { font-size: clamp(2.7rem,4.6vw,4.8rem); line-height: 1.08; font-weight: 500; max-width: none; letter-spacing: -.05em; }
#fin .demo-invitation .end-title em { font-style: normal; color: #d8c495; }
#fin .demo-invitation .end-sub { margin-top: 28px; font-size: .94rem; line-height: 1.8; max-width: 29rem; }
.demo-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 37px; padding-top: 22px; border-top: 1px solid #d8c49522; color: #c2cbb8; font-size: .67rem; }
.demo-scope i { width: 3px; height: 3px; border-radius: 50%; background: #d8c495; }
.demo-sheet { min-width: 0; padding: clamp(25px,3vw,44px); background: linear-gradient(145deg,#14231a,#0c1711); border: 1px solid #d0dabe26; border-radius: 22px; box-shadow: 0 35px 85px -50px #000; position: relative; }
.demo-sheet::before { content: ''; position: absolute; top: -1px; left: 40px; right: 40px; height: 1px; background: linear-gradient(90deg,transparent,#d8c49590,transparent); }
.demo-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.demo-heading-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border: 1px solid #d8c4954d; border-radius: 13px; color: #d8c495; background: #d8c49509; }
.demo-heading-icon .i { width: 20px; height: 20px; }
.demo-heading h3 { font-size: 1.45rem; line-height: 1.3; letter-spacing: -.04em; font-weight: 500; color: #eeeede; margin: 0; }
.demo-heading p { font-size: .74rem; color: #9aaa97; margin-top: 5px; }
.demo-form { display: flex; flex-direction: column; gap: 20px; }
.demo-fields-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-form label { min-width: 0; display: block; font-size: .71rem; color: #c7d0c1; line-height: 1.5; }
.demo-form label > span:not(.demo-optional) { color: #b4a480; padding-left: 2px; }
.demo-form .demo-optional { float: right; color: #7f9282; font-size: .62rem; }
.demo-form input,.demo-form textarea { display: block; width: 100%; min-width: 0; border: 1px solid #c5d5b52d; border-radius: 9px; background: #09130d80; padding: 13px 15px; margin-top: 9px; font: 400 .8rem/1.5 "Jakarta",system-ui,sans-serif; color: #eceddf; outline: none; transition: border-color .2s,box-shadow .2s,background .2s; }
.demo-form input { min-height: 48px; }
.demo-form textarea { resize: vertical; min-height: 100px; max-height: 260px; }
.demo-form input::placeholder,.demo-form textarea::placeholder { color: #81917d; opacity: 1; }
.demo-form input:hover,.demo-form textarea:hover { border-color: #d2d9bf55; }
.demo-form input:focus,.demo-form textarea:focus { background: #0d1c12; border-color: #d8c495; box-shadow: 0 0 0 3px #d8c49516; }
.demo-form input:user-invalid { border-color: #df9c85; }
.demo-form-footer { padding-top: 7px; }
.demo-submit { width: 100%; min-height: 50px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 22px; border: 1px solid #e6d4a3; border-radius: 999px; background: #d8c495; color: #0a140e; font-size: .81rem; font-weight: 500; cursor: pointer; transition: background .2s,transform .2s; }
.demo-submit .i { width: 18px; height: 18px; }
.demo-submit:hover:not(:disabled) { background: #e8d6a9; transform: translateY(-1px); }
.demo-submit:focus-visible { outline: 2px solid #f3e7c8; outline-offset: 4px; }
.demo-submit:disabled { cursor: not-allowed; background: #a69a77; border-color: #b5a780; color: #132017; }
.demo-availability { color: #8c9d87; font-size: .61rem; line-height: 1.7; margin-top: 12px; text-align: center; }
.demo-feedback { padding: 12px 14px; margin-top: 12px; border: 1px solid #d8c49542; border-radius: 9px; background: #d8c49508; color: #d6dac7; font-size: .73rem; line-height: 1.6; }
.demo-feedback[hidden] { display: none; }
#fin.demo-end .foot-in { font-size: .7rem; padding-block: 25px; }
@media(max-width:960px) {
  #fin .demo-layout { grid-template-columns: 1fr 1fr; gap: 30px; padding-block: 90px 75px; }
  #fin .demo-invitation .end-title { font-size: 2.7rem; }
  #fin .demo-invitation .end-sub { font-size: .84rem; }
  .demo-fields-pair { grid-template-columns: 1fr; gap: 20px; }
  .demo-sheet { padding: 26px; }
  .demo-heading { align-items: flex-start; gap: 12px; }
  .demo-heading h3 { font-size: 1.3rem; }
}
@media(max-width:680px) {
  #fin .demo-layout { grid-template-columns: 1fr; padding-block: 65px; gap: 37px; }
  #fin .demo-invitation .end-logo { width: 60px; margin-bottom: 25px; }
  #fin .demo-invitation .end-title { font-size: clamp(2.7rem,9vw,3.5rem); }
  #fin .demo-invitation .end-sub { margin-top: 20px; max-width: 30rem; }
  .demo-scope { margin-top: 24px; padding-top: 18px; font-size: .62rem; }
  .demo-sheet { padding: 25px 21px; border-radius: 18px; }
  .demo-heading { margin-bottom: 25px; align-items: center; }
  .demo-heading h3 { font-size: 1.4rem; }
  .demo-form input,.demo-form textarea { font-size: 16px; }
  .demo-form label { font-size: .76rem; }
  .demo-availability { font-size: .64rem; }
  #fin.demo-end .foot-in { font-size: .64rem; gap: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .demo-form input,.demo-form textarea,.demo-submit { transition: none; }
  .demo-submit:hover:not(:disabled) { transform: none; }
}