/* ===========================
   BASE / ACCESIBILIDAD / UX
   =========================== */
:root{
  --brand:#2c3e50;
  --accent:#3498db;
  --focus:#0052cc;
  --bg:#f7f8fa;
  --text:#333;
  --shadow:0 2px 10px rgba(0,0,0,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}
body{
  font-family: Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* Utilidad: oculto accesible */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Enlace "Saltar al contenido" */
.skip-link{
  position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:.5rem 1rem;z-index:10000;
}
.skip-link:focus{left:1rem;top:1rem;border-radius:6px}

/* Foco accesible global */
:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ===========================
   HEADER + NAV
   =========================== */
.header{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--brand); padding:10px 20px; color:#fff; position:relative;
}
.header_logo img{ width:75px; height:80px; display:block; }

#toggleNav{ display:none; background:transparent; border:0; cursor:pointer; }
#toggleNav img{ display:block; }

#navMenu ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
#navMenu a{
  color:#fff; text-decoration:none; font-weight:600;
  transition:transform .2s ease, color .2s ease;
}
#navMenu a:hover, #navMenu a:focus-visible{ color:var(--accent); transform:translateY(-1px); }

/* Nav móvil */
@media (max-width:1000px){
  #toggleNav{ display:block; }
  #navMenu{
    position:absolute; top:64px; right:20px; left:20px;
    background:#2c3e50; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.2);
    display:none; z-index:11; padding:6px 0;
  }
  #navMenu.open{ display:block; }
  #navMenu ul{ flex-direction:column; }
  #navMenu li{ border-top:1px solid rgba(255,255,255,.12); }
  #navMenu li:first-child{ border-top:0; }
  #navMenu a{ display:block; padding:12px 16px; }
}

/* ===========================
   INTRO
   =========================== */
.intro-billete{
  background: linear-gradient(to right, #f6f7f9, #ffffff);
  padding: 2.5rem 1.25rem;
  border-bottom: 4px solid #e5e7eb;
}
.intro-billete h1{
  font-family: serif; font-size: 2rem; color:#1f2937; margin-bottom:.75rem;
}
.intro-billete p{
  max-width: 900px; margin: 0 auto; color:#4b5563; font-size:1.05rem;
}

/* ===========================
   TABLA RESPONSIVE
   =========================== */
.tabla-responsive{ padding: 1rem 1.25rem; }
.table-wrapper{
  overflow:auto; background:#fff; border-radius:12px;
  box-shadow:var(--shadow);
}
table{ width:100%; border-collapse:collapse; min-width:720px; background:#fff; }
thead th{
  position:sticky; top:0; background:#0d6efd; color:#fff; text-align:left;
  padding:12px 14px; font-weight:700; z-index:1;
}
tbody th,
tbody td{ padding:12px 14px; border-bottom:1px solid #e5e7eb; vertical-align:middle; }
tbody tr:hover{ background:#f9fafb; }

/* Imágenes de la tabla */
table picture, table img{ display:block }
table img{
  width:clamp(120px, 33vw, 200px);
  height:auto;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
a.thumb{ display:inline-block; line-height:0; border-radius:10px; }
a.thumb:focus-visible{ outline:3px solid var(--focus); outline-offset:4px }

/* Navegación por años */
.year-nav{
  display:flex; gap:12px; justify-content:center; align-items:center;
  padding:18px 8px; margin-top:12px; flex-wrap:wrap;
}
.year-nav a{
  text-decoration:none; background:#fff; color:#1f2937; padding:10px 14px;
  border:1px solid #d1d5db; border-radius:10px; font-weight:600;
  transition:all .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.year-nav a:hover, .year-nav a:focus-visible{
  background:#0052cc; color:#fff; border-color:#0052cc; transform:translateY(-1px);
}

/* ===========================
   CONTACTO
   =========================== */
.contact{
  text-align:center; background:#f8f8f8; color:#333; padding:40px 16px;
}
.contact h2{font-size:28px; margin-bottom:20px}
.contacto-container{ display:flex; justify-content:center; align-items:center }
.contacto-form{
  background:#fff; padding:20px; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  width:100%; max-width:420px; text-align:left
}
.contacto-form h3{text-align:center; font-size:20px; margin-bottom:15px}
.input-group{margin-bottom:15px}
.input-group label{font-size:14px; font-weight:bold; display:block; margin-bottom:6px}
.input-group input,.input-group textarea{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px
}
.btn-enviar{
  background:#0077ff; color:#fff; border:0; border-radius:6px;
  padding:10px 16px; cursor:pointer; width:100%; font-size:16px; font-weight:700
}
.btn-enviar:hover{ background:#005fcb }
.form-hint{ margin-top:10px; font-size:.95rem; color:#0a7f2e }

/* ===========================
   MODAL ZOOM IMG
   =========================== */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:9999;
}
.modal.open{ display:flex; }
.modal__dialog{
  max-width:min(92vw, 1100px);
  width:100%;
  background:#0b0b0b; border-radius:12px; box-shadow:var(--shadow);
  padding:10px; position:relative;
}
.modal__imgwrap{
  display:flex; align-items:center; justify-content:center;
  background:#111; border-radius:8px; min-height:200px; overflow:hidden;
}
.modal__img{
  max-width:100%; height:auto; display:block;
}
.modal__caption{
  color:#e5e7eb; font-size:.95rem; margin-top:8px; padding:0 4px;
}
.modal__close{
  position:absolute; top:8px; right:8px; border:0; background:#fff; color:#111;
  border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:18px; font-weight:700;
}
.modal__close:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }

/* ===========================
   FOOTER / LEGAL
   =========================== */
footer{ background:#333; color:#fff; text-align:center; padding:20px }
.footer-container p{ margin:5px 0; font-size:14px }
.footer-container a{ color:#e5e7eb; text-decoration:none }
.footer-container a:hover{ text-decoration:underline }

.facebook-link{
  color:#1877F2; text-decoration:none; font-weight:bold;
  display:inline-block; margin-top:10px
}
.facebook-link:hover{ text-decoration:underline }

.legal{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:25px 0 50px
}
.legal a{ color:#fff }
.legal a:hover{ color:rgba(255,255,255,.7) }

/* ===========================
   PRINT
   =========================== */
@media print{
  header, .year-nav, .contact, footer, .modal{ display:none !important; }
  .table-wrapper{ box-shadow:none; }
  table{ font-size:12px; }
  tr{ page-break-inside:avoid; }
}