body {
      margin:0;
      background:#0c0c0c;
      color:#eaeaea;
      font:16px/1.6 system-ui, sans-serif;
    }
.compact p {
  margin: 0;              /* elimina márgenes de <p> */
  line-height: 1.2;       /* controla la altura de la línea */
}    
.lucida-text {
  font-family: "Lucida Bright", Georgia, "Times New Roman", serif;
  font-weight: bold;
}


    a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

a:hover {
  color: #57b6ff;   /* celeste al pasar el mouse */
}

    /* Header: solo fila con menú */
    header {
      display:flex; justify-content:center; align-items:center;
      padding:12px 16px;
    }
    .menu-topo {
      display:flex; align-items:center; gap:14px;
      font-size:.95rem;
    }
    .menu-topo a { opacity:.9; }
    .menu-topo a:hover { opacity:1; }
    .menu-topo .sep { opacity:.5; user-select:none; }

    /* Hero con fondo reducido */
    .hero {
      min-height:25vh;  /* altura reducida */
      display:flex; flex-direction:column;
      justify-content:center; align-items:center;
      text-align:center;
      padding:20px;
      background: url("images/imgfondo.png") center/cover no-repeat;
      position: relative;
    }
    .hero::after {
      content:""; position:absolute; inset:0;
      background:rgba(0,0,0,.5);
    }
    .hero h1, .hero p { position:relative; z-index:1; }
    .hero h1 {
      font-size:clamp(1.5rem,5vw,3rem);
      margin:0 0 6px;
    }
    .hero p {
      font-size:1rem; color:#ddd; max-width:500px; margin:0;
    }

    /* Botón índice alineado a la izquierda, con poco espacio */
    .indice-wrap {
      max-width:1400px;
      margin:8px auto;  /* un renglón aprox */
      padding:0 20px;
      text-align:left;
    }
    .indice-btn {
      padding:8px 16px;
      font-size:.95rem;
      background:#57b6ff;
      color:#0c0c0c;
      border-radius:6px;
      font-weight:600;
      cursor:pointer;
      transition:background .3s ease;
    }
    .indice-btn:hover { background:#7cc8ff; }

    /* Fila de tres columnas */
    .wrap { max-width:1400px; margin:8px auto; padding:0 20px 24px; }
    .row {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:14px; min-height:50vh;
    }
    @media(max-width:980px){
      .row{grid-template-columns:1fr}
      .tile{min-height:30vh}
    }
    .tile {
      position:relative;
      border-radius:14px; overflow:hidden; background:#111;
      box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.45);
    }
    .media {position:absolute; inset:0;}
    .media img {
      width:100%; height:100%;
      object-fit:cover; object-position:center;
      transform:scale(1.02);
      transition:transform .5s ease, filter .5s ease;
    }
    .tile:hover .media img {
      transform:scale(1.06); filter:none;
    }

    /* Panel lateral A */
    #panelA {
  position: fixed; top: 0; right: 0;
  width: min(340px, 92vw); /* adaptable en móviles */
  height: 100%;
  background: #1b1b1b; color: #fff;
  box-shadow: -4px 0 10px rgba(0,0,0,.5);
  padding: 20px;
  overflow-y: auto;
  z-index: 1000;
  transform: translateX(100%);        /* oculto fuera de la pantalla */
  transition: transform .4s ease;     /* animación suave */
  will-change: transform;
  touch-action: pan-y;
}
#panelA.open { transform: translateX(0); }

    #panelA.open { right:0; }
    #panelA h2 { margin-top:0; }
    #panelA .close-btn {
      display:block; text-align:right;
      margin-bottom:20px;
      cursor:pointer;
      color:#57b6ff;
      font-weight:bold;
    }