:root{
  --vino:#4d0d19;
  --vino-hondo:#2c0609;
  --vino-claro:#671a2a;
  --oro:#c9a24d;
  --oro-claro:#edd9a3;
  --oro-brillo:#fbf0cf;
  --oro-sombra:#8a6526;
  --oro-tenue:rgba(201,162,77,.42);
  --oro-tenue2:rgba(201,162,77,.22);
  --rosa:#c17870;
  --texto:#f1e3cd;
  --texto-sutil:rgba(241,227,205,.68);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}
body{
  font-family:"Cormorant Garamond",Georgia,serif;
  color:var(--texto);
  background:var(--vino-hondo);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}

.fondo{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(120% 85% at 50% 8%, var(--vino-claro) 0%, var(--vino) 45%, var(--vino-hondo) 100%);
}
.fondo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 95% at 50% 40%, transparent 50%, rgba(0,0,0,.5) 100%);
}
.fondo::before{
  /* grano fino, papel/terciopelo */
  content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;will-change:transform}
.aurora::before{
  width:90vmax;height:90vmax;left:-35vmax;top:-45vmax;
  background:radial-gradient(circle,rgba(214,170,84,.17),rgba(214,170,84,0) 62%);
  animation:deriva-a 30s ease-in-out infinite alternate;
}
.aurora::after{
  width:100vmax;height:100vmax;right:-45vmax;bottom:-55vmax;
  background:radial-gradient(circle,rgba(200,72,86,.22),rgba(200,72,86,0) 62%);
  animation:deriva-b 38s ease-in-out infinite alternate;
}
@keyframes deriva-a{to{transform:translate3d(22vmax,16vmax,0) scale(1.12)}}
@keyframes deriva-b{to{transform:translate3d(-20vmax,-14vmax,0) scale(1.08)}}
.destellos{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

.marco{
  position:relative;
  max-width:548px;
  margin:22px auto;
  overflow-x:hidden;overflow-x:clip;
  padding:3px;
  min-height:calc(100vh - 44px);
  border:1px solid var(--oro-sombra);
  border-radius:3px;
  background:linear-gradient(180deg, rgba(201,162,77,.08), transparent 30%);
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.3);
}
.marco::before{
  content:"";position:absolute;inset:9px;
  border:1px solid var(--oro-tenue);border-radius:2px;pointer-events:none;
}
.lamina{
  position:relative;z-index:1;
  padding:46px 30px 34px;
  min-height:calc(100vh - 56px);
  display:flex;flex-direction:column;
}
.filigrana{position:absolute;pointer-events:none;z-index:2;user-select:none;-webkit-user-drag:none;height:auto}
.filigrana.grande{width:clamp(150px,46vw,225px)}
.filigrana.chica{width:clamp(62px,18vw,92px)}
.filigrana.sup-izq{top:-6px;left:-6px}
.filigrana.inf-der{bottom:-6px;right:-6px}
.filigrana.sup-der{top:8px;right:8px}
.filigrana.inf-izq{bottom:8px;left:8px;transform:rotate(180deg)}

/* ---------- Encabezado ---------- */
.cabecera{text-align:center;position:relative;padding-top:8px}
.nombre{
  font-family:"Parisienne",cursive;
  font-weight:400;
  font-size:clamp(58px,17vw,88px);
  line-height:1.35;
  padding:0 .05em;
  margin:0;
  color:var(--oro-claro);
  background:linear-gradient(175deg,var(--oro-brillo) 0%, var(--oro) 48%, var(--oro-sombra) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
.xv{
  font-family:"Cinzel",serif;font-weight:500;
  font-size:clamp(24px,6.5vw,30px);
  letter-spacing:.2em;
  padding-left:.2em; /* compensa el letter-spacing final para centrar bien */
  line-height:1;margin:2px 0 0;
  color:var(--oro-claro);
  background:linear-gradient(175deg,var(--oro-brillo) 0%, var(--oro) 50%, var(--oro-sombra) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.separador{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto 10px;color:var(--oro);max-width:280px}
.separador::before,.separador::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--oro-tenue),transparent)}
.separador span{font-family:"Cinzel",serif;letter-spacing:.34em;font-size:12px;color:var(--oro-claro);white-space:nowrap}
.separador .diamante{width:5px;height:5px;background:var(--oro);transform:rotate(45deg);flex:none;box-shadow:0 0 0 1px var(--oro-tenue)}
.fecha{font-family:"Cinzel",serif;font-weight:400;letter-spacing:.32em;text-indent:.32em;font-size:14px;color:var(--texto-sutil);margin:0}

/* ---------- Bloque subir ---------- */
.intro{text-align:center;margin:34px 4px 26px}
.intro h2{
  font-family:"Cormorant Garamond",serif;font-weight:600;font-style:italic;
  font-size:23px;color:var(--oro-claro);margin:0 0 8px;letter-spacing:.01em;
}
.intro p{margin:0;font-size:18px;line-height:1.45;color:var(--texto-sutil)}

.form{position:relative}

.campo-grupo{margin-bottom:30px}
.campo{
  width:100%;padding:10px 4px 10px;
  background:transparent;
  border:none;border-bottom:1px solid var(--oro-tenue);
  color:var(--texto);font-family:"Cormorant Garamond",serif;font-size:18px;font-style:italic;
  text-align:center;letter-spacing:.02em;
  transition:border-color .2s;
}
.campo::placeholder{color:var(--texto-sutil);opacity:.8}
.campo:focus{outline:none;border-color:var(--oro)}

.zona{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:34px 18px;text-align:center;cursor:pointer;
  border:1px solid var(--oro-tenue2);border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08));
  position:relative;
  transition:border-color 180ms ease, background 180ms ease, transform 140ms var(--ease-out);
}
.zona::before{
  content:"";position:absolute;inset:5px;border:1px dashed var(--oro-tenue);pointer-events:none;border-radius:1px;
}
.zona.activa{border-color:var(--oro);background:linear-gradient(180deg, rgba(201,162,77,.1), rgba(0,0,0,.08))}
.zona:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .zona:hover{border-color:var(--oro);background:linear-gradient(180deg, rgba(201,162,77,.1), rgba(0,0,0,.08))}
}
.zona .ico{width:30px;height:30px;color:var(--oro-claro)}
.zona .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1}
.zona .t1{font-family:"Cinzel",serif;font-weight:500;font-size:14px;letter-spacing:.12em;color:var(--oro-claro)}
.zona .t2{font-size:15.5px;font-style:italic;color:var(--texto-sutil)}
/* oculto visualmente pero presente y alcanzable por teclado (no display:none) */
.zona input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zona:focus-within{border-color:var(--oro);outline:2px solid var(--oro-claro);outline-offset:3px}
.btn:focus-visible,.pie a:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}

.lista{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lista li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14.5px;
  padding:9px 13px;background:rgba(255,255,255,.03);border:1px solid var(--oro-tenue2);border-radius:3px;
  overflow:hidden;opacity:1;transform:translateY(0) scale(1);max-height:46px;
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
             max-height 220ms var(--ease-in-out), padding 220ms var(--ease-in-out),
             margin 220ms var(--ease-in-out), border-color 180ms ease;
}
.lista li.entra{opacity:0;transform:translateY(-5px) scale(.98)}
.lista li.sale{opacity:0;transform:scale(.96);max-height:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0}
.lista li .peso{color:var(--oro-claro);opacity:.85;white-space:nowrap;font-style:italic;margin-left:auto}
.lista li.excede{border-color:#a24a5c;color:#e8a9b4}
.lista li .quitar{
  flex:none;width:22px;height:22px;margin-left:4px;border-radius:50%;border:1px solid var(--oro-tenue);
  background:transparent;color:var(--texto-sutil);font-size:15px;line-height:1;cursor:pointer;
  transition:color 150ms ease, border-color 150ms ease, transform 120ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .lista li .quitar:hover{color:var(--oro-claro);border-color:var(--oro)}
}
.lista li .quitar:focus-visible{color:var(--oro-claro);border-color:var(--oro);outline:none}
.lista li .quitar:active{transform:scale(.85)}

.btn{
  display:block;width:100%;margin-top:26px;padding:16px;
  font-family:"Cinzel",serif;font-weight:500;font-size:14.5px;letter-spacing:.22em;text-indent:.22em;
  color:#3a1205;cursor:pointer;border:none;border-radius:2px;text-decoration:none;text-align:center;
  background:linear-gradient(180deg,var(--oro-brillo) 0%,var(--oro) 50%,var(--oro-sombra) 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15);
  transition:transform 160ms var(--ease-out), filter 160ms ease, opacity 160ms ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default;filter:grayscale(.3);transform:none}

.progreso{
  margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height 240ms var(--ease-in-out), opacity 200ms ease, margin-top 240ms var(--ease-in-out);
}
.progreso.visible{margin-top:18px;max-height:60px;opacity:1}
.barra{height:3px;border-radius:0;background:rgba(0,0,0,.35);overflow:hidden;position:relative}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--oro-sombra),var(--oro-claro));transition:width .2s;position:relative}
.barra i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  background-size:60px 100%;background-repeat:no-repeat;
  animation:brillo-barra 1.3s linear infinite;
}
@keyframes brillo-barra{from{background-position:-60px 0}to{background-position:140px 0}}
.progreso .pct{margin-top:8px;text-align:center;font-family:"Cinzel",serif;font-size:11.5px;letter-spacing:.16em;color:var(--texto-sutil)}

.aviso{
  margin-top:0;max-height:0;opacity:0;overflow:hidden;padding:0 16px;
  border-radius:2px;border:1px solid transparent;text-align:center;font-size:16px;font-style:italic;
  transition:max-height 240ms var(--ease-in-out), opacity 200ms ease, margin-top 240ms var(--ease-in-out), padding 240ms var(--ease-in-out);
}
.aviso.ok,.aviso.err{margin-top:16px;max-height:140px;opacity:1;padding:13px 16px}
.aviso.ok{background:rgba(123,155,94,.14);border-color:rgba(123,155,94,.5);color:#dcead0}
.aviso.err{background:rgba(162,74,92,.14);border-color:rgba(162,74,92,.55);color:#f0c6cd}

.pie{margin-top:auto;padding:38px 54px 24px;text-align:center;position:relative}
.pie .gracias{font-family:"Parisienne",cursive;font-size:30px;color:var(--oro-claro);line-height:1.3;margin:0}
.pie .mini{display:block;margin-top:6px;font-size:11px;letter-spacing:.26em;text-indent:.26em;font-family:"Cinzel",serif;color:var(--texto-sutil);opacity:.8}
.pie a{color:var(--oro-claro);text-decoration:none;border-bottom:1px solid var(--oro-tenue)}

/* ---------- Gracias ---------- */
.centro{text-align:center;position:relative;padding:28px 0 20px}
.tilde{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--oro);display:flex;align-items:center;justify-content:center;color:var(--oro-claro)}
.tilde svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.centro .big{font-family:"Parisienne",cursive;font-size:clamp(44px,13vw,60px);line-height:1.3;color:var(--oro-claro);margin:0 0 6px}
.centro p{font-size:18.5px;margin:6px 20px;color:var(--texto-sutil);font-style:italic}
.centro .btn{max-width:280px;margin-left:auto;margin-right:auto}

/* ---------- Galería ---------- */
.gal-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--oro-tenue);padding-bottom:14px;margin:4px 0 20px}
.gal-top h1{font-family:"Parisienne",cursive;font-size:38px;line-height:1.3;color:var(--oro-claro);margin:0}
.gal-top .n{font-family:"Cinzel",serif;font-size:12px;letter-spacing:.12em;color:var(--texto-sutil)}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:7px}
.celda{position:relative;aspect-ratio:1}
.celda a,.celda .vid{display:block;width:100%;height:100%;border-radius:2px;overflow:hidden;border:1px solid var(--oro-tenue2);background:#000}
.celda img,.celda video{width:100%;height:100%;object-fit:cover}
.celda .borrar{
  position:absolute;top:5px;right:5px;z-index:2;width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(237,217,163,.5);background:rgba(44,6,9,.78);color:var(--oro-claro);
  font-size:16px;line-height:1;cursor:pointer;
  transition:background 150ms ease, border-color 150ms ease, transform 120ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .celda .borrar:hover{background:rgba(162,74,92,.85);border-color:#e8a9b4}
}
.celda .borrar:focus-visible{background:rgba(162,74,92,.85);border-color:#e8a9b4;outline:none}
.celda .borrar:active{transform:scale(.85)}
.celda.sale{transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);opacity:0;transform:scale(.92)}
.vacia{text-align:center;opacity:.7;margin:60px 0;font-size:18px;font-style:italic}
.login{max-width:280px;margin:70px auto 0;text-align:center}
.login h1{font-family:"Parisienne",cursive;font-size:44px;line-height:1.3;color:var(--oro-claro);margin:0 0 26px}

@media (max-width:380px){
  .lamina{padding:40px 20px 28px}
}