:root{
  --primary:#6b2f2f;
  --text:#111;
  --muted:#666;
  --bg:#fff;
  --radius:12px;
  --btn-h:42px;
  --divider:#e3e3e3;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:#fff}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}

/* ===== MENÚ FIJO ===== */
.topnav{
  position:fixed; top:16px; right:16px;
  display:flex; gap:16px; align-items:center;
  z-index:10000;
}
.topnav a{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px;
  border-radius:10px; background:rgba(255,255,255,.6);
  border:1.5px solid transparent;
}
/* Si algún enlace del nav tiene .btn-outline, que se vea igual a los demás */
.topnav a.btn-outline{ background:rgba(255,255,255,.6); border-color:transparent; color:inherit; }
.topnav a:focus, .topnav a:focus-visible{ outline:none; box-shadow:none; }
.topnav .admin-link{ opacity:.75 }

/* ===== HERO ===== */
.hero{
  min-height:70vh; background-size:cover; background-position:center;
  position:relative; display:flex; align-items:center; justify-content:center; z-index:1;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.25); pointer-events:none; z-index:0;
}
.hero-content{ position:relative; text-align:center; color:#fff; z-index:2; padding:24px }
.hero .date{ font-size:22px; letter-spacing:.5px; margin:0 0 8px }
.hero .subtitle{ margin:0 0 12px; font-size:22px }
.hero h1{ font-size:56px; line-height:1.1; margin:0; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.25) }

/* ===== SECCIONES ===== */
.section{
  position:relative;
  padding:48px 20px; max-width:1100px; margin:0 auto;
  scroll-margin-top:90px;
}
/* Separador full-width entre bloques */
.section + .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:1px; background:var(--divider);
}

.two-cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center }
.two-cols .text{ padding:12px }
.two-cols .img img{ border-radius:10px }

h2{ font-size:34px; margin:0 0 12px }
.date,.time,.place{ color:var(--muted) }
.link{ border-bottom:1px dashed var(--primary) }

/* ===== CARDS / FORM ===== */
.card{ background:#fafafa; border:1px solid #e8e8e8; border-radius:var(--radius); padding:20px }
.card.small{ max-width:420px; margin:60px auto }

/* Grid del formulario (actualizado) */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.grid .full{ grid-column:1 / -1 }
label{ display:block; margin-bottom:6px; font-weight:600 }

input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font:inherit; background:#fff;
}
input,select{ height:var(--btn-h) }
textarea{ min-height:120px; line-height:1.4 }

/* Radios en línea */
.radios-inline{ display:flex; gap:24px; align-items:center; flex-wrap:wrap }
.radio{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.radio input{ width:auto; height:auto }

/* ===== BOTONES UNIFORMES ===== */
button,.btn,.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); padding:0 16px;
  border-radius:var(--radius); font-weight:600;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:box-shadow .2s, transform .05s, background-color .2s, border-color .2s, color .2s;
  -webkit-appearance:none; appearance:none; line-height:1;
}
button,.btn{ background:var(--primary); color:#fff; border-color:var(--primary) }
button:hover,.btn:hover{ filter:brightness(.96) }
button:active,.btn:active{ transform:translateY(1px) }
button:focus,button:focus-visible,.btn:focus,.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(107,47,47,.25) }
button:disabled{ opacity:.55; cursor:not-allowed }
/* Outline para botones de contenido (no para el nav, ya override arriba) */
.btn-outline,a.btn-outline{ background:transparent; color:var(--primary); border-color:var(--primary) }
.btn-outline:hover{ background:rgba(107,47,47,.08) }
.btn-outline:active{ transform:translateY(1px) }
.btn-outline:focus,.btn-outline:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(107,47,47,.25) }

/* ===== TABLAS & ADMIN ===== */
.table-responsive{ overflow:auto }
table{ width:100%; border-collapse:collapse }
th,td{ border-bottom:1px solid #eee; padding:10px; text-align:left }

.admin .admin-top{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #eee }
.admin nav a{ margin-right:12px }
.admin nav .danger{ color:#a00 }

.grid-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px }
.photo-item{ background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden }
.photo-item img{ width:100%; height:180px; object-fit:cover }
.photo-item figcaption{ padding:8px 10px; font-size:13px; color:#444 }

/* ===== QR ===== */
.qr .center{ text-align:center }
.qr .center img{ display:block; margin:0 auto } /* centrado real */

/* Pie */
.made{ text-align:center; color:#999; margin-top:8px; font-size:14px }

/* Mensajes */
.error{ background:#fee; border:1px solid #f8b8b8; color:#900; padding:10px; border-radius:8px }

/* ===== RESPONSIVE ===== */
@media (max-width:860px){
  .two-cols{ grid-template-columns:1fr }
  .hero h1{ font-size:40px }
  .topnav{ left:16px; right:auto }
  .topnav a{ background:rgba(255,255,255,.85) }
}
/* Contador simple en una sola línea y en negrita */
.countdown-simple{
  font-weight:800;
  white-space:nowrap;
  margin:10px 0 6px;
  font-size:20px;
}
.countdown-simple #cd-days-only{ color:var(--primary); }
/* === Responsive Lightbox === */
.lightbox{position:fixed;inset:0;display:none;place-items:center;z-index:100000}
.lightbox.is-open{display:grid}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.lightbox__dialog{position:relative;margin:0;max-width:92vw;max-height:92vh;animation:lb-pop .18s ease-out}
.lightbox__dialog img{display:block;max-width:92vw;max-height:80vh;width:auto;height:auto;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox__dialog figcaption{margin-top:8px;color:#fff;text-align:center;font-size:14px}
.lightbox__close{position:absolute;top:-12px;right:-12px;width:38px;height:38px;border:none;border-radius:999px;background:#fff;cursor:pointer;font-size:20px;line-height:38px}
@media (max-width:480px){
  .lightbox__dialog img{max-height:70vh}
  .lightbox__close{top:-8px;right:-8px}
}
@keyframes lb-pop{from{transform:scale(.96);opacity:.8}to{transform:scale(1);opacity:1}}