/* ============================================================
   CHACKPOWER · NÚCLEO — COMPONENTES
   Header, nav, botones, tarjetas, listados, galería, novedades, footer.
   ============================================================ */

/* ---------- HEADER / NAV ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--__fondo) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: var(--__borde-panel);
}
.header__fila {
  display: flex;
  align-items: center;
  gap: var(--__esp-3);
  padding: .65rem 0;
  justify-content: space-between;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--__texto);
}
.marca__escudo { width: 34px; height: 34px; flex: none; }
.marca__nombre {
  font-family: var(--__fuente-titulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 1.05rem;
}

.nav { margin-left: auto; }
.nav__lista { display: flex; gap: var(--__esp-3); list-style: none; margin: 0; padding: 0; }
.nav__lista a {
  font-family: var(--__fuente-titulo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .92rem;
  color: var(--__texto-suave);
  text-decoration: none;
  position: relative;
  padding: .35rem 0;
}
.nav__lista a[aria-current="page"] { color: var(--__texto); }
.nav__lista a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--__acento);
}
.nav__lista a:hover { color: var(--__texto); }

.nav__boton {
  display: none;
  margin-left: auto;
  background: var(--__panel);
  color: var(--__texto);
  border: var(--__borde-panel);
  border-radius: var(--__radio);
  padding: .45rem .7rem;
  font: inherit;
  cursor: pointer;
}
.nav__boton[data-abierto="true"] { background: var(--__panel-flotante); }
.nav__boton .icono-x { display: none; }
.nav__boton[data-abierto="true"] .icono-h { display: none; }
.nav__boton[data-abierto="true"] .icono-x { display: inline; }

@media (max-width: 46rem) {
  .nav__boton { display: inline-flex; }
  .nav { display: none; }
  .nav[data-visible="true"] { display: block; position: absolute; left: 0; right: 0; top: 100%; }
  .nav__lista { display: block; padding: var(--__esp-2) var(--__esp-4) var(--__esp-4); background: var(--__fondo-elevado); border-bottom: var(--__borde-panel); }
}

/* ---------- BOTONES ---------- */
.boton {
  display: inline-block;
  font-family: var(--__fuente-titulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .95rem;
  padding: .75rem 1.5rem;
  border-radius: var(--__radio);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--__t-rapido) ease, background var(--__t-rapido) ease, box-shadow var(--__t-rapido) ease;
  user-select: none;
}
.boton:active { transform: translateY(1px); }
.boton--primario { background: var(--__acento); color: var(--__acento-invertido); border: var(--__borde-panel); border-color: var(--__acento); }
.boton--primario:hover { background: #ffe0b0; color: var(--__acento-invertido); }
.boton--secundario { background: transparent; color: var(--__texto); border: 1px solid var(--__borde-fuerte); }
.boton--secundario:hover { border-color: var(--__acento); color: var(--__texto); box-shadow: inset 0 0 0 1px var(--__acento); }
.boton--deshabilitado { pointer-events: none; opacity: .55; }

/* ---------- HERO ---------- */
.hero {
  padding: var(--__esp-6) 0;
  background:
    /* textura sobria de paneles (sin imagen externa) */
    repeating-linear-gradient(90deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .01) 0 1px, transparent 1px 26px),
    var(--__banda);
  border-bottom: var(--__borde-panel);
}
.hero__titulo { margin-bottom: var(--__esp-2); }
.hero__parrafo { font-size: var(--__tam-m); color: var(--__texto-suave); max-width: 56ch; }
.hero__acciones { display: flex; gap: var(--__esp-3); flex-wrap: wrap; margin-top: var(--__esp-4); }
.hero__detalle {
  display: flex;
  gap: var(--__esp-3);
  flex-wrap: wrap;
  margin-top: var(--__esp-4);
  font-family: var(--__fuente-titulo);
  font-size: var(--__tam-p);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--__texto-mudo);
}
.hero__detalle span::before { content: "◆ "; color: var(--__acento-frio); }

/* ---------- TARJETAS ---------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--__panel);
  border: var(--__borde-panel);
  border-radius: var(--__radio-tarjeta);
  padding: var(--__esp-4);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--__t-normal) ease, transform var(--__t-normal) ease, box-shadow var(--__t-normal) ease, background var(--__t-normal) ease;
}
.tarjeta:hover {
  border-color: var(--__borde-fuerte);
  background: var(--__panel-flotante);
  box-shadow: var(--__sombra);
  transform: translateY(-2px);
}
.tarjeta:hover h3 { color: var(--__acento); }
.tarjeta__kicker {
  font-family: var(--__fuente-titulo);
  font-size: var(--__tam-min);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--__acento-frio);
  margin-bottom: .5rem;
}
.tarjeta h3 { margin-bottom: .55rem; }
.tarjeta p { font-size: .95rem; color: var(--__texto-suave); flex-grow: 1; }
.tarjeta__pie {
  margin-top: var(--__esp-3);
  font-family: var(--__fuente-titulo);
  font-size: var(--__tam-p);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--__acento);
}

/* Grilla de tarjetas */
.grilla { display: grid; gap: var(--__esp-4); }
.grilla--2 { grid-template-columns: repeat(2, 1fr); }
.grilla--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .grilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 42rem) { .grilla--2, .grilla--3 { grid-template-columns: 1fr; } }

/* ---------- LISTADO DE PROYECTOS / NOVEDADES ---------- */
.listado { display: grid; gap: var(--__esp-3); list-style: none; margin: 0; padding: 0; }
.listado__item {
  background: var(--__panel);
  border-left: 4px solid var(--__borde-fuerte);
  border-radius: var(--__radio);
  padding: .8rem var(--__esp-4);
}
.listado__fecha {
  font-family: var(--__fuente-titulo);
  font-size: var(--__tam-p);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--__acento-frio);
  margin-right: .75rem;
}

/* ---------- GALERÍA + CAJA-LUZ ---------- */
.galeria { display: grid; gap: var(--__esp-3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 42rem) { .galeria { grid-template-columns: 1fr; } }
.galeria__pin {
  padding: 0;
  border: var(--__borde-panel);
  border-radius: var(--__radio-tarjeta);
  background: var(--__panel);
  overflow: hidden;
  cursor: zoom-in;
}
.galeria__pin img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.galeria__pin--vacio {
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  color: var(--__texto-mudo);
  font-family: var(--__fuente-titulo);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--__tam-p);
  text-align: center;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--__borde) 80%, transparent);
}
/* bloque reservado sin imagen: no abrir caja-luz */
.caja-luz {
  border: var(--__borde-panel);
  border-radius: var(--__radio-tarjeta);
  padding: var(--__esp-2);
  background: var(--__panel-flotante);
}
.caja-luz::backdrop { background: rgb(10 8 6 / .92); }
.caja-luz__fig { margin: 0; max-width: min(1100px, 88vw); }
.caja-luz__fig img, .caja-luz__fig video { width: 100%; max-height: 82vh; object-fit: contain; }
.caja-luz figcaption { padding-top: .5rem; color: var(--__texto-suave); font-size: .95rem; }
.caja-luz__cerrar { margin-top: .6rem; }

/* ---------- VIDEO / TRÁILER ---------- */
.media-marco {
  aspect-ratio: 16/9;
  background: var(--__panel);
  border: var(--__borde-panel);
  border-radius: var(--__radio-tarjeta);
  display: grid;
  place-items: center;
  color: var(--__texto-mudo);
  font-family: var(--__fuente-titulo);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: var(--__tam-p);
  text-align: center;
  border-style: dashed;
}
/*	          nota: video solo a pedido del usuario (botón), nunca autoplay con sonido */

/* ---------- CONTACTO ---------- */
.contacto__opciones { display: flex; gap: var(--__esp-3); flex-wrap: wrap; }
#contacto .fb-formulario { display: none; } /* se activa cuando exista envío real */

/* ---------- FOOTER ---------- */
.footer {
  margin-top: var(--__esp-5);
  border-top: var(--__borde-panel);
  padding: var(--__esp-4) 0 var(--__esp-5);
  color: var(--__texto-suave);
  font-size: .92rem;
}
.footer__fila { display: flex; flex-wrap: wrap; gap: var(--__esp-3) var(--__esp-5); justify-content: space-between; }
.footer h4 {
  font-family: var(--__fuente-titulo);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: var(--__tam-p);
  color: var(--__texto);
  margin: 0 0 .6rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .3rem; }
.footer a { color: var(--__texto-suave); }
.footer a:hover { color: var(--__acento); }
.footer__legal { margin-top: var(--__esp-4); font-size: .85rem; color: var(--__texto-mudo); }
.footer__legal strong { color: var(--__texto-suave); }