/* ============================================================
   MTG · Estilos de las páginas de eventos
   Comparten paleta y tipografía con la portada.
   ============================================================ */
:root{
  --papel:      #F3F4ED;
  --crema:      #E8EAE0;
  --profundo:   #22271F;
  --tinta:      #1E211A;
  --tinta-70:   #4B4F44;
  --humo:       #71766A;
  --oro:        #B08D46;
  --oro-claro:  #D9C08A;
  --linea:      #DCDED2;

  --display: "Oranienbaum", Georgia, serif;
  --cursiva: "Bodoni Moda", Georgia, serif;
  --texto:   "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --script:  "Parisienne", cursive;

  --ancho: 1340px;
  --ancho-amplio: 1580px;
  --gutter: clamp(20px, 4.5vw, 60px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.contenedor--amplio{ max-width:var(--ancho-amplio); }
.seccion{ padding-block:clamp(64px,8vh,104px); }

h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; line-height:1.06; letter-spacing:.005em; }
h1{ font-size:clamp(2.4rem, 5.6vw, 4.4rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
h3{ font-size:clamp(1.1rem, 2vw, 1.45rem); }
h1 em, h2 em{ font-family:var(--cursiva); font-style:italic; color:var(--oro); font-size:.94em; }
p{ margin:0 0 1.1em; }
.plomo{ color:var(--humo); }
.oro{ color:var(--oro); }

.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--oro); margin:0 0 1.4rem;
}

.regla{ display:flex; align-items:center; gap:14px; margin:0 0 28px; max-width:280px; }
.regla::before,.regla::after{ content:""; height:1px; background:var(--oro-claro); flex:1; }
.regla i{ width:6px; height:6px; background:var(--oro); transform:rotate(45deg); flex:none; }
.regla--centro{ margin-inline:auto; }

.btn{
  display:inline-block; font-family:var(--texto); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:17px 34px; border:1px solid var(--tinta); background:var(--tinta); color:var(--papel);
  transition:background .3s, color .3s, border-color .3s; cursor:pointer;
}
.btn:hover{ background:var(--oro); border-color:var(--oro); color:#fff; }
.btn--linea{ background:transparent; color:var(--tinta); border-color:var(--linea); }
.btn--linea:hover{ background:transparent; border-color:var(--oro); color:var(--oro); }
.btn--verde{ background:var(--profundo); border-color:var(--profundo); color:var(--papel); }
.btn--verde:hover{ background:var(--oro); border-color:var(--oro); color:#fff; }

/* ---------- Barra superior ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; padding:18px 0;
  background:rgba(243,244,237,.96); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--linea);
}
.nav .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.marca{ line-height:1; text-decoration:none; display:block; }
.marca span{ display:block; font-family:var(--display); font-weight:500; letter-spacing:.06em; font-size:1.5rem; }
.marca small{ display:block; font-family:var(--script); color:var(--oro); font-size:1rem; margin-top:-2px; }
.nav ul{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav a.enlace{
  text-decoration:none; font-size:.74rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-70); position:relative; padding-block:4px;
}
.nav a.enlace::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--oro); transition:width .3s; }
.nav a.enlace:hover::after{ width:100%; }
.nav .btn{ padding:12px 22px; font-size:.7rem; }

/* ---------- Encabezado de página ---------- */
.cabecera-pagina{ padding:150px 0 clamp(40px,5vw,64px); text-align:center; }
.cabecera-pagina p.plomo{ max-width:56ch; margin:1.5em auto 0; }
.volver{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--humo); text-decoration:none; transition:color .25s;
}
.volver:hover{ color:var(--oro); }
.volver::before{ content:"←"; font-size:1rem; }

/* ---------- Ranuras de foto ---------- */
.foto{
  position:relative; overflow:hidden;
  background:repeating-linear-gradient(-45deg,#E6E8DC 0 2px,transparent 2px 11px), #EDEFE4;
  display:flex; align-items:center; justify-content:center;
}
.foto .vacio{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#9AA093;
  text-align:center; padding:12px 16px; max-width:84%; line-height:1.7;
  border:1px solid rgba(176,141,70,.3);
}
.foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Índice de eventos ---------- */
/* auto-fill mantiene el tamaño de tarjeta aunque haya una sola,
   en vez de estirarla a un tercio de la pantalla */
.eventos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:clamp(20px,2.6vw,38px); }
.evento{ display:block; text-decoration:none; color:inherit; }
.evento .foto{ aspect-ratio:4/3; margin-bottom:20px; }
.evento .foto img{ transition:transform .6s ease; }
.evento:hover .foto img{ transform:scale(1.04); }
.evento h3{ margin-bottom:6px; }
.evento .meta{
  font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro); margin:0;
}
.evento .fecha{
  font-size:.66rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--humo); margin:6px 0 0;
}

/* ---------- Galería de un evento ---------- */
.fotos-evento{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fotos-evento .foto{ aspect-ratio:3/2; }
.fotos-evento .ancha{ grid-column:span 2; }
.cierre{ text-align:center; margin-top:clamp(48px,6vw,76px); }


/* Variante para eventos fotografiados en vertical */
.fotos-evento--retrato .foto{ aspect-ratio:3/4; }
.fotos-evento--retrato .ancha{ grid-column:span 1; }


/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .25s, box-shadow .25s;
}
.whatsapp:hover{ transform:scale(1.07); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.whatsapp svg{ width:31px; height:31px; fill:#fff; }
@media (max-width:620px){
  .whatsapp{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp svg{ width:28px; height:28px; }
}

/* ---------- Pie ---------- */
footer{ background:var(--profundo); color:var(--papel); padding-block:56px 30px; margin-top:clamp(60px,7vw,96px); }
footer .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer a{ color:#B6BCAE; text-decoration:none; font-size:.9rem; }
footer a:hover{ color:var(--oro-claro); }
footer .legal{ font-size:.76rem; color:#7D8377; }

@media (max-width:1000px){
  .fotos-evento{ grid-template-columns:repeat(2,1fr); }
  .nav ul{ gap:18px; }
  .nav a.enlace{ display:none; }
}
@media (max-width:620px){
  .eventos{ grid-template-columns:1fr; gap:40px; }
  .fotos-evento{ grid-template-columns:1fr; }
  .fotos-evento .ancha{ grid-column:span 1; }
  .cabecera-pagina{ padding-top:120px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }