:root{
  --blue:#789dbc;
  --blue-dark:#547898;
  --blue-deep:#456783;
  --ink:#506f8c;
  --silver:#dce3e9;
  --white:#fff;
  --shadow:0 14px 32px rgba(51,80,108,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#dfeaf3}
body{margin:0;background:#dfeaf3;color:var(--ink);font-family:Montserrat,system-ui,sans-serif}
button,input,textarea{font:inherit}button{cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell{max-width:600px;margin:0 auto;min-height:100vh;background:#fbfdff;box-shadow:0 0 54px rgba(42,66,90,.17);overflow:hidden}

/* IMAGEN EXACTA: no crop, no filtros, no cambios */
.hero{position:relative;width:100%;background:#eef5fa;overflow:hidden}
.hero-art{display:block;width:100%;height:auto;object-fit:contain;filter:none;transform:none}

/* La frase queda arriba y el resto de controles solo sobre las nubes de abajo.
   Nada tapa el nombre “Dasha” integrado en la imagen. */
.hero-message{position:absolute;z-index:7;top:1.7%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:.64em 1.15em;border-radius:999px;background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.98);box-shadow:0 8px 25px rgba(50,76,101,.12),inset 0 1px rgba(255,255,255,.95);backdrop-filter:blur(7px);font-family:"Cormorant Garamond",serif;font-size:clamp(13px,3.6vw,20px);color:#526f8d;white-space:nowrap;text-shadow:0 1px #fff}
.hero-message span{font-size:.72em;color:#94aabd;margin:0 .15em}
.hero-date{position:absolute;z-index:7;top:57.5%;left:50%;transform:translateX(-50%);font-family:"Cormorant Garamond",serif;font-size:clamp(17px,4.2vw,26px);letter-spacing:.18em;white-space:nowrap;color:#536f8c;text-shadow:0 1px 3px #fff,0 0 12px #fff}

.stats{position:absolute;z-index:7;top:62.1%;left:50%;transform:translateX(-50%);width:91%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4%}
.stat{min-width:0;border:1px solid rgba(255,255,255,.98);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,252,255,.84));color:#557798;box-shadow:0 7px 20px rgba(62,87,111,.11),inset 0 1px #fff;padding:8px 3px 7px;display:grid;justify-items:center;gap:1px;backdrop-filter:blur(7px)}
.stat svg{width:23px;height:23px}.stat strong{font-family:"Cormorant Garamond",serif;font-size:25px;line-height:1}.stat small{font-family:"Cormorant Garamond",serif;font-size:12px;white-space:nowrap}

.primary-action{position:absolute;z-index:7;top:72.2%;left:50%;transform:translateX(-50%);width:66%;border:1px solid rgba(255,255,255,.88);border-radius:999px;background:linear-gradient(180deg,#82a6c3,#5d84a7);box-shadow:0 10px 22px rgba(51,77,101,.22),inset 0 1px rgba(255,255,255,.4);color:white;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 19px;font-family:"Cormorant Garamond",serif;font-size:clamp(22px,5.6vw,32px);text-shadow:0 1px 2px rgba(55,78,100,.38)}
.primary-action svg{width:27px;height:27px}.primary-action .arrow{position:absolute;right:20px;font-size:30px;font-family:Arial;font-weight:200}

.tabs{position:absolute;z-index:7;top:81%;left:4%;right:4%;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(108,137,161,.25)}
.tab{border:0;background:transparent;color:#647f98;padding:7px 2px 8px;display:grid;justify-items:center;gap:3px;position:relative}
.tab svg{width:22px;height:22px}.tab span{font-family:"Cormorant Garamond",serif;font-size:clamp(10px,2.7vw,14px);white-space:nowrap}.tab.active{color:#496f91}.tab.active:after{content:"";position:absolute;height:2px;background:#5b83a6;left:8%;right:8%;bottom:-1px;border-radius:2px}

.music-card{position:absolute;z-index:7;top:89%;left:7%;right:7%;height:6.1%;min-height:42px;border:1px solid rgba(255,255,255,.98);border-radius:999px;background:rgba(248,251,254,.86);box-shadow:0 8px 20px rgba(62,88,111,.1);backdrop-filter:blur(7px);display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:9px;padding:0 10px}
.music-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#6c95b7;color:#fff;font-size:18px}.music-copy{display:grid;min-width:max-content}.music-copy small{font-size:6.5px;letter-spacing:.16em}.music-copy strong{font-family:"Cormorant Garamond",serif;font-size:13px;font-weight:500}.music-line{border:0;padding:0;width:100%;height:14px;background:transparent!important;position:relative;cursor:pointer;border-radius:0!important}.music-line:before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:#9eb3c5}.music-line span{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #8399ac;left:0;top:2px;transform:translateX(-50%);pointer-events:none}.music-card .music-toggle{border:0;width:33px;height:33px;border-radius:50%;background:#789fbe;color:white;font-size:13px;cursor:pointer;display:grid;place-items:center;padding:0}.music-card .music-toggle:active{transform:scale(.96)}

.content-area{position:relative;background:linear-gradient(180deg,#f8fbfd 0,#fff 100%);padding:26px 20px 38px;min-height:430px}.panel{display:none}.panel.active{display:block}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:.22em;margin:0 0 3px;color:#91a0ad}.section-heading h2,.modal-card h2{font-family:"Cormorant Garamond",serif;font-size:36px;font-weight:500;margin:0;color:#506f8c}.small-action,.secondary-action{border:1px solid #a8bfd2;background:#fff;border-radius:999px;color:#527797;padding:9px 14px}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.gallery-item{margin:0;aspect-ratio:1/1;border-radius:16px;overflow:hidden;position:relative;background:#e9eff4}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-caption{position:absolute;left:8px;bottom:7px;right:8px;color:white;font-size:11px;text-shadow:0 1px 6px #000;padding-top:22px;background:linear-gradient(transparent,rgba(0,0,0,.45))}.empty-state{text-align:center;font-family:"Cormorant Garamond",serif;font-size:20px;color:#9aa7b1;padding:42px 12px}.card-form,.voice-card{background:#fff;border:1px solid #e1e8ee;border-radius:20px;padding:16px;box-shadow:0 8px 23px rgba(50,75,98,.07);display:grid;gap:12px}.card-form label,.voice-card label{display:grid;gap:6px;font-size:12px}.card-form label span,.voice-card label span{color:#9ba8b3;font-size:10px}.card-form input,.card-form textarea,.voice-card input{width:100%;border:1px solid #d5e0e8;border-radius:13px;background:#fbfdff;padding:12px;color:#425f79;outline:0}.card-form textarea{min-height:100px;resize:vertical}.message-list{display:grid;gap:10px;margin-top:14px}.message-card{background:#fff;border:1px solid #e3e9ef;border-radius:17px;padding:13px}.message-card strong{font-family:"Cormorant Garamond",serif;font-size:19px}.message-card p{margin:4px 0;font-size:13px}.message-card time{display:block;margin-top:8px;font-size:9px;color:#a0a9b2}.record-controls{display:flex;align-items:center;gap:12px;margin:14px 0}.record-btn{border:0;border-radius:999px;background:#dfeaf3;color:#4e7194;padding:12px 18px}.record-btn.recording{background:#f1dfe4;color:#9c586b}.voice-card audio{width:100%;margin:8px 0 14px}.voice-list{display:grid;gap:10px}.voice-item{background:#fff;border:1px solid #e3e9ef;border-radius:17px;padding:13px}.voice-item audio{width:100%;margin-top:8px}
footer{text-align:center;padding:24px 20px 48px;color:#80909f;background:linear-gradient(#f8fbfd,#fff)}footer span{font-size:31px;color:#b9c2cc}footer p{font-family:"Cormorant Garamond",serif;font-size:19px;margin:4px 0 12px}footer a{color:#5f7e9d;font-size:12px}
.modal{border:0;padding:0;background:transparent;max-width:520px;width:92%}.modal::backdrop{background:rgba(39,57,75,.58);backdrop-filter:blur(5px)}.modal-card{position:relative;background:#fff;border-radius:24px;padding:24px;box-shadow:0 25px 70px rgba(24,42,60,.3)}.close-modal{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:30px;color:#8090a0}.file-picker{border:1.5px dashed #b9cbd9;border-radius:16px;padding:20px;text-align:center;background:#f8fbfd}.file-picker input{display:none}.file-picker span{display:block;color:#547798;font-weight:600;font-size:16px}.file-picker small{display:block;color:#9aa6b1;margin-top:5px}.modal-upload{position:static;transform:none;width:100%;margin-top:12px;font-size:28px;padding:14px 18px}.approval-note{text-align:center;font-size:11px;color:#8796a5;margin:10px 0 0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#40566f;color:#fff;border-radius:999px;padding:10px 16px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:560px){.gallery-grid{grid-template-columns:repeat(3,1fr)}.content-area{padding-left:28px;padding-right:28px}}
@media(max-width:410px){.hero-message{font-size:12px;max-width:92%;padding:.58em .88em}.hero-date{font-size:16px}.stat svg{width:20px;height:20px}.stat strong{font-size:22px}.stat small{font-size:9px}.stats{width:94%}.primary-action{width:72%;font-size:23px}.tabs{left:3%;right:3%}.tab span{font-size:9px}.music-card{left:5%;right:5%}.music-copy strong{font-size:12px}}