:root { --cream:#fffdf8; --ink:#343d2b; --olive:#536438; --coral:#c16545; --line:#e7e3d4; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.botanical-background { position:absolute; inset:0 0 auto; height:880px; z-index:-1; pointer-events:none; background:url('citrus-background-v2.webp') center top / max(100%, 1300px) auto no-repeat; mask-image:linear-gradient(#000 50%,transparent 100%); }
.hero { text-align:center; padding:76px 24px 38px; background:radial-gradient(ellipse 440px 300px at 50% 48%, #fffdf8 15%, rgba(255,253,248,.96) 40%, rgba(255,253,248,.65) 65%, rgba(255,253,248,0) 100%); }
.eyebrow,.section-kicker { font-size:10px; letter-spacing:.23em; font-weight:600; color:var(--coral); }
.eyebrow { margin:0 0 22px; font-size:11px; }
.names { font-family:Georgia,"Times New Roman",serif; font-size:clamp(48px,6.5vw,88px); font-weight:400; letter-spacing:-.045em; line-height:1.15; margin:0; }
.names .amp { display:inline-block; font-style:italic; font-size:.7em; color:var(--olive); margin:0 .25em; }
.date { margin:22px 0 0; font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:var(--olive); font-weight:600; }
.hero-divider { display:flex; align-items:center; justify-content:center; gap:15px; margin:22px auto 16px; color:#ad9147; }
.hero-divider::before,.hero-divider::after { content:""; width:48px; height:1px; background:#d9cba6; }
.lead { font-family:Georgia,serif; font-size:23px; line-height:1.5; margin:0; }
.hero-note { font-size:13px; color:#68705c; margin:12px 0 0; }
main { max-width:980px; margin:auto; padding:0 28px 32px; }
.upload-box { max-width:670px; margin:0 auto 58px; padding:30px 38px 26px; text-align:center; background:rgba(255,253,248,.95); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 48px #454b2810; }
.section-kicker { margin:0 0 10px; }
h2 { font:400 31px/1.2 Georgia,"Times New Roman",serif; letter-spacing:-.025em; margin:0; }
.upload-intro { font-size:13px; line-height:1.7; color:#68705c; margin:12px 0 22px; }
#upload-form { display:flex; flex-direction:column; align-items:center; gap:12px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.upload-label { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; border:1px dashed #a9b28e; border-radius:10px; padding:23px 12px; background:#f5f6ed; color:var(--olive); cursor:pointer; font-size:14px; font-weight:600; transition:background .2s; }
.upload-label:hover { background:#ecefdf; }
.upload-icon { flex-shrink:0; }
.selected-hint { min-height:17px; margin:0; font-size:12px; color:#68705c; }
button { font:600 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer; background:var(--olive); color:#fff; border:0; border-radius:9px; padding:13px 27px; transition:background .2s,transform .2s; }
button:hover:not(:disabled) { background:#3e4d29; }
button:disabled { opacity:.65; cursor:wait; }
#upload-form button { min-width:230px; }
#upload-form button span { margin-left:15px; }
:focus-visible,.upload-label:focus-within { outline:3px solid #c16545; outline-offset:4px; }
.hint { color:#737967; font-size:10px; line-height:1.7; margin:17px 0 0; }
.msg { font-size:13px; line-height:1.6; margin:18px 0 0; padding:12px; border-radius:8px; background:#f1f3e8; }
.msg-ok { color:var(--olive); }.msg-err { color:#a4482a; background:#fff0e8; }
.gallery-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; }
.photo-count { color:var(--olive); border:1px solid var(--line); background:var(--cream); border-radius:30px; padding:8px 13px; font-size:11px; white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.tile { position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:12px; background:var(--line); padding:0; box-shadow:0 3px 12px #343d2b0a; }
.tile img,.tile video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.tile:hover img,.tile:hover video { transform:scale(1.035); }
.badge { position:absolute; top:10px; right:10px; background:#26301f99; color:white; font-size:12px; padding:6px 9px; border-radius:50%; }
.empty { padding:40px 24px; text-align:center; background:#f3f4e9; border:1px dashed #c4c9b2; border-radius:12px; font-size:14px; line-height:1.8; }
footer { text-align:center; padding:12px 24px 36px; font-size:12px; color:#737967; }
footer span { display:block; font:italic 23px Georgia,serif; margin-top:15px; color:var(--olive); }
@media(max-width:640px) {
 .hero { background-size:100% 100%; background-image:radial-gradient(ellipse 75% 70% at 50% 48%, #fffdf8 15%, rgba(255,253,248,.96) 40%, rgba(255,253,248,.65) 65%, rgba(255,253,248,0) 100%); }
 .botanical-background { height:880px; background-size:auto 470px; opacity:.65; }
 .hero { padding:58px 20px 30px; }.eyebrow { margin-bottom:20px; }.names { font-size:52px; }.date { font-size:10px; letter-spacing:.15em; }.lead { font-size:21px; }.hero-note { font-size:12px; }
 main { padding:0 18px 24px; }.upload-box { padding:25px 20px 22px; margin-bottom:38px; border-radius:16px; }h2 { font-size:27px; }.upload-intro { font-size:12px; }.upload-label { padding:20px 10px; }#upload-form button { width:100%; }
 .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.gallery-heading { margin-bottom:18px; }.photo-count { font-size:10px; padding:7px 10px; }
}
@media(max-width:360px) { .names { font-size:44px; } main { padding-left:12px; padding-right:12px; }.upload-box { padding-left:16px; padding-right:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }

/* Visor a pantalla completa */

.viewer[hidden] {
  display: none;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 14, 8, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.viewer-stage {
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer-stage img,
.viewer-stage video {
  max-width: 100vw;
  max-height: 92vh;
  object-fit: contain;
}

.viewer-close,
.viewer-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}

.viewer-close {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
}

.viewer-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
}

.viewer-prev { left: 10px; }
.viewer-next { right: 10px; }

.viewer-download {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .viewer-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}

.viewer-close,.viewer-nav { padding:0; display:grid; place-items:center; }
.viewer-stage { max-height:100dvh; }
.viewer-stage img,.viewer-stage video { max-height:82dvh; }
.viewer-download { background:var(--olive); }