/* ==========================================================================
   Ilustración arqueológica — hoja de estilos
   Sitio estático de 3 páginas: index.html, galeria.html, contacto.html
   ========================================================================== */

/* ---------- Tipografías (alojadas en /fonts, sin servicios externos) ---------- */
@font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/open-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/open-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/lato-latin-300-normal.woff2") format("woff2"); }

/* ---------- Colores y medidas ---------- */
:root {
  --fondo:       #f2f3ee;   /* fondo general */
  --barra:       #f9faf6;   /* cabecera y banda del título */
  --texto:       #666666;
  --titulo:      #333333;
  --rojo:        #d83131;   /* enlaces */
  --vino:        #a32515;   /* icono de menú y menú a pantalla completa */
  --boton:       #828282;
  --pie:         #191919;
  --alto-cabecera: 66px;
  --ancho-fila:  80%;
  --max-fila:    1080px;
  --relleno:     2%;        /* relleno vertical de secciones y filas */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 300 14px/1.7em "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: var(--rojo); text-decoration: none; }
p { margin: 0; padding: 0 0 1em; }
p:last-child { padding-bottom: 0; }
h1, h2, h3 {
  margin: 0; padding: 0 0 10px;
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300; line-height: 1em; color: var(--titulo);
}
.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Estructura ---------- */
main { display: block; }
.banda { padding: var(--relleno) 0; }
.fila {
  width: var(--ancho-fila); max-width: var(--max-fila);
  margin: 0 auto; padding: var(--relleno) 0;
}
.columnas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3%;
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  height: var(--alto-cabecera);
  background: var(--barra);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  transition: transform .4s ease-in-out;
}
.cabecera.oculta { transform: translateY(-100%); }
.cabecera-interior {
  position: relative; height: 100%;
  width: var(--ancho-fila); max-width: var(--max-fila); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: block; line-height: 0; padding-left: 4px; }
.logo img { height: 30px; width: auto; }

.boton-menu {
  position: relative; width: 44px; height: 44px; margin-right: -9px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.boton-menu span,
.boton-menu span::before,
.boton-menu span::after {
  position: absolute; left: 9px; width: 26px; height: 3px;
  background: var(--vino); content: ""; transition: transform .3s, opacity .3s;
}
.boton-menu span { top: 20px; }
.boton-menu span::before { top: -7px; left: 0; }
.boton-menu span::after  { top:  7px; left: 0; }

/* ---------- Menú a pantalla completa ---------- */
.menu-completo {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(163, 37, 21, .95);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.menu-abierto .menu-completo { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.menu-completo ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.menu-completo li { padding: 0; margin: 0; }
.menu-completo a {
  display: block; padding: 6px 20px;
  color: #fff; font-size: 30px; font-weight: 300; line-height: 1.4;
  transition: opacity .3s;
}
.menu-completo a:hover, .menu-completo a:focus-visible { opacity: .7; }
.menu-cerrar {
  position: absolute; top: 20px; right: 28px; width: 48px; height: 48px;
  padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer;
}
.menu-cerrar::before, .menu-cerrar::after {
  position: absolute; top: 23px; left: 9px; width: 30px; height: 2px;
  background: #fff; content: "";
}
.menu-cerrar::before { transform: rotate(45deg); }
.menu-cerrar::after  { transform: rotate(-45deg); }
.menu-abierto { overflow: hidden; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; margin: 0; padding: 6px 20px;
  background: transparent; cursor: pointer;
  color: var(--boton); border: 2px solid var(--boton); border-radius: 3px;
  font: 500 20px/34px "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  transition: background-color .3s, color .3s;
  -webkit-appearance: none; appearance: none;
}
.boton:hover { background: rgba(0, 0, 0, .05); }

/* ---------- Portada ---------- */
.titulo-banda { margin-top: -1px; padding: var(--relleno) 0; background: var(--fondo); }
.titulo-banda .fila { width: 94%; max-width: none; text-align: center; }
.titulo-banda h1 { font-size: 40px; }
.titulo-banda h2 { font-size: 26px; }
.galeria-banda { background: var(--barra); }

.portada-galeria { background: #fff; }
.portada-galeria .imagen { display: flex; justify-content: center; }
.portada-galeria .imagen img { width: 450px; max-width: 100%; }
.promo { padding: 30px 0; }
.promo h2 { font-size: 35px; }
.promo p { font-size: 20px; padding-bottom: 0; margin-bottom: 20px; }

.acerca {
  background-color: #fff;
  background-image: url("../img/trabajando.jpg");
  background-position: top center; background-size: cover;
  position: relative;
}
.acerca::before {
  position: absolute; inset: 0; content: "";
  background: rgba(216, 214, 208, .97);
}
.acerca-contenido {
  position: relative;
  width: var(--ancho-fila); max-width: var(--max-fila); margin: 0 auto;
}
.acerca-interior { width: 88%; margin: 0 auto; }
.acerca-texto { width: 84%; margin: 0 auto; padding: 10% 0; text-align: center; }
.acerca h2 { font-size: 35px; }
.acerca-texto p { font-size: 18px; font-weight: 400; line-height: 1.3em; color: var(--titulo); padding-bottom: 18px; }
.acerca .boton { margin-top: 2px; }

/* ---------- Galería ---------- */
.rejilla-banda { background: var(--fondo); padding: var(--relleno) 0; }
.pieza { margin: 0; }
.pieza img { width: 100%; }
.pieza a { position: relative; display: block; cursor: zoom-in; line-height: 0; }
.pieza .lupa {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .4s;
}
.pieza a:hover .lupa, .pieza a:focus-visible .lupa { opacity: 1; }
.lupa svg { width: 32px; height: 32px; }
.pieza a:focus-visible { outline: 2px solid var(--vino); outline-offset: 2px; }

.enlace-final { text-align: right; }
.enlace-final svg { display: inline-block; width: 30px; height: 30px; vertical-align: top; }
.enlace-final h2 { font-size: 26px; }
.enlace-final h2 a { color: var(--titulo); }

/* ---------- Contacto ---------- */
.contacto-banda { background: var(--fondo); }
.contacto-texto h1 { font-size: 35px; }
.contacto-texto p { font-size: 20px; line-height: 25.7px; padding-bottom: 0; }
.contacto-texto a { overflow-wrap: break-word; }
.formulario { margin-top: 16px; }
.formulario .doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3%; }
.formulario input, .formulario textarea {
  display: block; width: 100%; margin: 0 0 16px; padding: 16px;
  background: #fff; color: #999; border: 0; border-radius: 0;
  font: 300 14px "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  -webkit-appearance: none; appearance: none;
}
.formulario textarea { height: 150px; resize: vertical; }
.formulario input::placeholder, .formulario textarea::placeholder { color: #999; opacity: 1; }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--vino); outline-offset: 0; color: var(--titulo); }
.formulario .envio { display: flex; flex-direction: column; align-items: flex-end; }
.formulario .aviso { margin: 12px 0 0; padding: 0; font-size: 14px; text-align: right; color: var(--texto); }

/* ---------- Pie ---------- */
.pie { background: var(--pie); }
.pie-widgets {
  width: var(--ancho-fila); max-width: var(--max-fila); margin: 0 auto;
  padding: 4.8vw 0 3vw;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 3%;
}
.pie-widgets p { padding: 0; font-size: 16px; line-height: 16px; color: #d6d6d6; }
.pie nav ul { margin: 0; padding: 0; list-style: none; text-align: right; }
.pie nav li { padding: 0 0 7px; line-height: 17px; }
.pie nav li:last-child { padding-bottom: 0; }
.pie nav a { font-size: 15px; font-weight: 500; line-height: 17px; color: #d3d1cb; }
.pie nav a:hover { color: #fff; }
.pie-base { height: 20px; }

/* ==========================================================================
   Lightbox (ampliación de imágenes)
   ========================================================================== */
.lb { position: fixed; inset: 0; z-index: 1000001; }
.lb-fondo {
  position: absolute; inset: 0; background: #0b0b0b; opacity: 0;
  transition: opacity .5s ease-out;
}
.lb.lb-listo .lb-fondo { opacity: .8; }
.lb-controles { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease-out; pointer-events: none; }
.lb.lb-listo .lb-controles { opacity: 1; }
.lb-controles button { pointer-events: auto; }
.lb-img {
  position: absolute; margin: 0; max-width: none;
  transform-origin: 0 0; background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .6);
  cursor: pointer; will-change: transform;
}
.lb-cerrar {
  position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  padding: 0; border: 0; background: transparent; cursor: pointer; opacity: .35;
  transition: opacity .2s;
}
.lb-cerrar::before, .lb-cerrar::after {
  position: absolute; top: 31px; left: 14px; width: 36px; height: 2px;
  background: #fff; content: "";
}
.lb-cerrar::before { transform: rotate(45deg); }
.lb-cerrar::after  { transform: rotate(-45deg); }
.lb-cerrar:hover, .lb-cerrar:focus-visible { opacity: 1; }
.lb-flecha {
  position: absolute; top: 50%; width: 48px; height: 64px; margin-top: -32px;
  padding: 0; border: 0; background: transparent; cursor: pointer; opacity: .55;
  transition: opacity .2s;
}
.lb-flecha:hover, .lb-flecha:focus-visible { opacity: 1; }
.lb-flecha svg { width: 100%; height: 100%; }
.lb-anterior { left: 0; }
.lb-siguiente { right: 0; }
.lb-cerrar:focus-visible, .lb-flecha:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.lb-cambio { animation: lb-cambio .35s ease-out; }
@keyframes lb-cambio { from { opacity: .2; } to { opacity: 1; } }

/* ==========================================================================
   Adaptación a pantallas pequeñas (tramos medidos en la web original)
   - hasta 980 px: tableta y móvil
   - hasta 767 px: móvil
   - hasta 479 px: móvil pequeño
   ========================================================================== */
@media (max-width: 980px) {
  :root { --alto-cabecera: 80px; }
  body { font-size: 16px; }
  .banda, .titulo-banda, .rejilla-banda { padding: 19px 0; }
  .fila { padding: 23px 0; }
  .columnas { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .columnas > div:empty { display: none; }
  .titulo-banda .fila { width: var(--ancho-fila); }
  .imagen, .pieza { margin-bottom: 30px; }
  .portada-galeria .imagen img { width: 100%; max-width: 450px; }
  .promo { padding: 30px 0 0; }
  .contacto-texto { padding-top: 0; }
  .formulario { margin-top: 30px; }
  .pie-widgets { padding: 6.4vw 0 calc(6.4vw + 8px); }
}

@media (max-width: 767px) {
  .promo h2 { font-size: 30px; }
  .acerca-texto { padding: 20% 0; }
  .contacto-texto p { line-height: 28.2px; }
  .formulario .doble { grid-template-columns: minmax(0, 1fr); }
  .formulario input, .formulario textarea { margin-bottom: 9px; }
  .formulario .envio { margin-top: 4px; }
  .logo img { height: auto; width: 156px; }
  .pie-widgets { grid-template-columns: minmax(0, 1fr); row-gap: 34px; padding: 8vw 0 64px; }
  .pie nav ul { text-align: left; padding-left: 14px; }
  .lb-flecha { opacity: .8; }
}

@media (max-width: 479px) {
  .pie-widgets { padding: 9.6vw 0 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera, .menu-completo, .lb-fondo, .lb-controles, .pieza .lupa { transition-duration: .01ms !important; }
  .lb-cambio { animation: none; }
}