@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --paper:#f7f3ea;--paper2:#eee8dc;--ink:#292b28;--muted:#77766f;
  --olive:#566252;--olive-deep:#3e493e;--clay:#a36f58;--gold:#a58b5b;
  --line:#d9d1c3;--white:#fffdf8;--dark:#28312c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 'DM Sans',system-ui,sans-serif}
body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#6f675a .55px,transparent .55px);background-size:7px 7px;z-index:-1}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.03}
h3{font-size:1.3rem;margin:26px 0 10px}
h3:first-child{margin-top:0}
.wrap{max-width:1080px;margin:auto;padding:0 28px}

/* ---------- Hero ---------- */
.hero{min-height:92vh;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);position:relative;background:var(--paper);overflow:hidden}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,243,234,.96),rgba(247,243,234,0));pointer-events:none}
.hero:after{content:'';position:absolute;right:0;top:0;width:50%;height:100%;background:linear-gradient(120deg,transparent 55%,rgba(86,98,82,.07));pointer-events:none}
.hero .wrap{position:relative;z-index:2;align-self:center;padding:90px 28px 90px max(28px,calc((100vw - 1080px)/2));}
.hero .hero-copy{max-width:650px}
.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;color:var(--olive);display:flex;align-items:center;gap:12px}
.eyebrow:before{content:'';width:28px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(4.2rem,8vw,8.4rem);letter-spacing:-.045em;color:var(--ink);margin:18px 0 10px;max-width:780px;line-height:.86;animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both}
.hero #dates{color:var(--olive-deep);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;letter-spacing:.01em}
.hero #place{color:var(--muted);font-size:.85rem;margin-top:4px;letter-spacing:.08em;text-transform:uppercase}
.hero .hero-photo{position:relative;z-index:1;min-height:92vh;display:flex;align-items:center;justify-content:flex-start;padding:6vh 5vw 6vh 2vw}
.hero .hero-photo-frame{width:min(480px,100%);height:min(690px,78vh);overflow:hidden;position:relative;background:#d8d0c3;animation:photoIn 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero .hero-photo-frame:after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.38);pointer-events:none}
.hero .hero-photo-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(.97);transform:scale(1.04);animation:photoBreath 14s ease-in-out infinite alternate}
.hero .hero-photo-frame .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Cormorant Garamond',serif;font-size:1.1rem;text-align:center;padding:20px}

@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes photoIn{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}
@keyframes photoBreath{from{transform:scale(1.04)}to{transform:scale(1.09)}}

/* ---------- Botones ---------- */
.chip,.btn,.tab{cursor:pointer}
.chip{margin-top:30px;background:transparent;color:var(--olive-deep);border:1px solid rgba(86,98,82,.5);border-radius:0;padding:11px 17px;font:500 .82rem 'DM Sans';letter-spacing:.04em;transition:background .3s,transform .3s}
.chip:hover{background:rgba(86,98,82,.08);transform:translateY(-2px)}
.btn{display:inline-block;background:var(--olive-deep);color:var(--white);border:none;padding:13px 24px;font:500 .86rem 'DM Sans';letter-spacing:.03em;transition:background .25s,transform .25s;margin:4px 6px 4px 0}
.btn:hover{background:var(--olive);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.secondary{background:transparent;color:var(--olive-deep);border:1px solid var(--line)}
.btn.secondary:hover{background:var(--paper2)}

/* ---------- Secciones ---------- */
.section{padding:72px 0}
.section.alt{background:var(--paper2)}
.section h2{font-size:clamp(2.1rem,4vw,2.9rem);margin:0 0 6px}
.muted{color:var(--muted);font-size:.92rem;margin:0 0 26px}
.card{background:var(--white);border:1px solid var(--line);padding:30px}
.fade{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.fade.visible{opacity:1;transform:none}
.hidden{display:none !important}

.bio{font-size:1.15rem;max-width:740px}

.letter{padding:40px 10px}
.letter p{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;line-height:1.6;color:var(--olive-deep);margin:0}
#letter p{margin:0;line-height:1.6;white-space:pre-line}
#letter p + p{margin-top:1.1em}

.tree{display:flex;flex-wrap:wrap}
.person{padding:12px 24px;border-right:1px solid var(--line)}
.person:last-child{border-right:none}
.person b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15rem}
.person small{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}

.timeline{position:relative;padding-left:40px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:32px}
.event{position:relative}
.event:before{content:'';position:absolute;left:-45px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.event .year{font-family:'Cormorant Garamond',Georgia,serif;color:var(--clay);font-size:1.3rem}
.event h3{margin:2px 0 6px}

.story{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.story:last-child{border-bottom:none}
.story b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;color:var(--olive-deep)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery button{all:unset;cursor:pointer;display:block;width:100%;height:220px;overflow:hidden;background:var(--paper2)}
.gallery button img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery button:hover img{transform:scale(1.06)}

.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.video{position:relative;padding-top:56.25%;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.candle-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-8px 0 22px}
.candle-count{font-family:'Cormorant Garamond',Georgia,serif;color:var(--clay);font-size:1.15rem}

.tribute{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.tribute:last-child{border-bottom:none}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--olive);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.1rem;flex:none}

.form{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.input,textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:92px;resize:vertical;line-height:1.5}
.input:focus,textarea:focus{outline:none;border-color:var(--olive)}
label.checkline{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--olive-deep)}

.footer{padding:50px 28px;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
.footer a{color:var(--olive-deep)}

/* ---------- Admin ---------- */
#admin{display:none}
#admin.active{display:block}
.adminbar{background:var(--olive-deep);color:var(--white);padding:16px 0}
.adminbar a{color:var(--white);opacity:.85}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:26px 0 36px}
.setting{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:none}

.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--line);cursor:pointer;transition:.25s}
.slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--white);transition:.25s}
.switch input:checked + .slider{background:var(--olive)}
.switch input:checked + .slider:before{transform:translateX(18px)}

.pending-item{border:1px solid var(--line);padding:16px;margin-bottom:12px;background:var(--white)}
.pending-item .btn{padding:9px 16px;font-size:.8rem}

.device-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.device-row:last-child{border-bottom:none}

.gate-card{max-width:440px;margin:40px auto;text-align:center}
.gate-card .input{margin-bottom:12px}

/* ---------- Player / Lightbox ---------- */
.player{position:fixed;right:16px;bottom:16px;width:240px;max-width:calc(100vw - 32px);background:var(--dark);color:var(--white);padding:10px;display:none;z-index:50;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.player.show{display:block}
.player strong{font-size:.85rem}
.player iframe{width:100%;height:124px;border:0;margin-top:8px}
.player-bar{cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-actions{float:right;display:inline-flex;gap:6px}
.player.min{padding:6px 10px}
.player.min iframe{display:none}
.close{background:none;border:none;color:inherit;font-size:1.3rem;cursor:pointer;line-height:1;padding:0}

.lightbox{position:fixed;inset:0;background:rgba(10,10,8,.92);display:none;align-items:center;justify-content:center;z-index:60}
.lightbox.show{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain}
.lightbox .close{position:absolute;top:24px;right:28px;color:var(--white);font-size:2.2rem}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero{min-height:auto;display:flex;flex-direction:column}
  .hero:before,.hero:after{display:none}
  .hero .wrap{order:1;padding:78px 20px 34px}
  .hero h1{font-size:clamp(4.1rem,18vw,6.2rem)}
  .hero #dates{font-size:1.35rem}
  .hero .hero-photo{order:2;min-height:auto;padding:10px 20px 55px}
  .hero .hero-photo-frame{width:100%;height:58vh;min-height:420px;max-height:620px}
  .section{padding:56px 0}
  .bio{font-size:1.1rem}
  .letter{padding:30px 6px}
  .letter p{font-size:1.3rem}
  .story{grid-template-columns:1fr;gap:6px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery button{height:180px}
  .gallery button:first-child{grid-column:span 2;height:260px}
  .videos,.admin-grid{grid-template-columns:1fr}
  .admin-grid{gap:16px}
  .timeline{padding-left:28px}
  .event:before{left:-33px}
  .person{min-width:0;width:100%;border-right:none;border-bottom:1px solid var(--line)}
  .person:last-child{border-bottom:none}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}