/* =======================================================
   IMPERIO INTI CALACOA - Hoja de estilos (solo Flexbox)
   Paleta: verde neón / rosado neón / dorado
   ======================================================= */

:root{
  --verde-neon:#39ff14;
  --rosa-neon:#ff10c8;
  --dorado:#ffcf1a;
  --amarillo:#fff200;
  --fondo:#2b2118;
  --fondo-alt:#3a2c1f;
  --texto:#f4f4f4;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background-color:var(--fondo);
  color:var(--texto);
  font-family:'Nunito', 'Segoe UI', sans-serif;
  font-size:1rem;
  line-height:1.7rem;
}

/* ---------- BARRA DE NAVEGACIÓN ---------- */
.barra-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  background-color:var(--fondo-alt);
  padding:1.2rem 3rem;
  border-bottom:0.25rem solid var(--rosa-neon);
}

.logo{
  font-family:'Poppins','Nunito',sans-serif;
  font-size:1.4rem;
  color:var(--verde-neon);
  text-transform:uppercase;
  letter-spacing:0.05rem;
}

.logo b{
  color:var(--dorado);
}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
}

.menu a{
  color:var(--texto);
  text-decoration:none;
  font-size:0.95rem;
  padding:0.5rem 1.1rem;
  border-radius:2rem;
  border:0.1rem solid transparent;
  transition:0.2s;
}

.menu a:hover{
  border:0.1rem solid var(--verde-neon);
  color:var(--verde-neon);
}

.menu a.activo{
  background-color:var(--rosa-neon);
  color:var(--fondo);
  font-weight:bold;
}

/* ---------- HERO / PORTADA ---------- */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  padding:3.5rem 2rem;
  background:linear-gradient(160deg, var(--fondo-alt) 0%, var(--fondo) 70%);
}

.hero h1{
  font-family:'Poppins','Nunito',sans-serif;
  font-size:2.3rem;
  color:var(--verde-neon);
  text-shadow:0 0 0.6rem rgba(57,255,20,0.5);
  max-width:50rem;
}

.hero p.subtitulo{
  color:var(--dorado);
  font-size:1.15rem;
}

.hero img.imagen-hero{
  max-width:42rem;
  width:100%;
  height:auto;
  border:0.3rem solid var(--rosa-neon);
  border-radius:1rem;
  margin-top:1.5rem;
}

/* ---------- CONTENEDORES GENERALES ---------- */
.contenedor{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:3rem 4rem;
}

.contenedor.centrado{
  align-items:center;
  text-align:center;
}

.titulo-seccion{
  font-family:'Poppins','Nunito',sans-serif;
  font-size:1.9rem;
  color:var(--rosa-neon);
  text-align:center;
  margin-bottom:0.5rem;
}

.linea-dorada{
  width:5rem;
  height:0.2rem;
  background-color:var(--dorado);
  align-self:center;
  margin-bottom:1rem;
}

/* ---------- TARJETAS (misión / visión / valores, etc.) ---------- */
.fila-tarjetas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
}

.tarjeta{
  background-color:var(--fondo-alt);
  border:0.12rem solid var(--dorado);
  border-radius:1rem;
  padding:1.6rem;
  width:18rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.7rem;
}

.tarjeta h3{
  color:var(--verde-neon);
  font-size:1.2rem;
}

.tarjeta-amarilla{
  border-color:var(--amarillo);
}

.tarjeta-amarilla h3{
  color:var(--amarillo);
}

.insignia-patrimonio{
  display:inline-block;
  background-color:var(--amarillo);
  color:var(--fondo);
  font-weight:bold;
  font-size:0.95rem;
  padding:0.5rem 1.4rem;
  border-radius:2rem;
  margin-bottom:1rem;
  align-self:center;
}

/* ---------- BOTONES DE REDES SOCIALES ---------- */
.fila-redes{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  padding:1rem 2rem 3rem 2rem;
}

.boton-red{
  text-decoration:none;
  font-weight:bold;
  font-size:1.05rem;
  padding:1rem 2rem;
  border-radius:2.5rem;
  display:flex;
  align-items:center;
  gap:0.6rem;
  border:0.15rem solid transparent;
}

.btn-whatsapp{ background-color:#25d366; color:#0c0c0c; }
.btn-tiktok{ background-color:var(--fondo-alt); color:var(--rosa-neon); border-color:var(--rosa-neon); }
.btn-facebook{ background-color:#1877f2; color:#ffffff; }
.btn-interno{ background-color:var(--fondo-alt); color:var(--dorado); border-color:var(--dorado); }

/* ---------- GALERÍA ---------- */
.galeria{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.6rem;
  padding:1rem 4rem 3rem 4rem;
}

.foto{
  width:16rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
}

.foto img{
  width:100%;
  height:12rem;
  object-fit:cover;
  border-radius:0.8rem;
  border:0.2rem solid var(--verde-neon);
}

.foto p{
  font-size:0.9rem;
  color:var(--dorado);
}

/* ---------- VIDEOS ---------- */
.lista-videos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  padding:1rem 4rem 3rem 4rem;
}

.tarjeta-video{
  width:27rem;
  background-color:var(--fondo-alt);
  border:0.15rem solid var(--rosa-neon);
  border-radius:1rem;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

.tarjeta-video video{
  width:100%;
  height:auto;
  border-radius:0.6rem;
}

/* ---------- TABLAS ---------- */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
}

th, td{
  border:0.1rem solid var(--dorado);
  padding:0.8rem 1rem;
  text-align:left;
  font-size:0.95rem;
}

th{
  background-color:var(--rosa-neon);
  color:var(--fondo);
}

td{
  background-color:var(--fondo-alt);
}

/* ---------- CONTACTO ---------- */
.fila-contacto{
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem;
  justify-content:center;
  padding:1rem 4rem 3rem 4rem;
}

.bloque-contacto{
  flex:1 1 22rem;
  background-color:var(--fondo-alt);
  border-radius:1rem;
  padding:1.8rem;
  border:0.12rem solid var(--verde-neon);
}

/* ---------- PIE DE PÁGINA ---------- */
.pie{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  background-color:var(--fondo-alt);
  border-top:0.25rem solid var(--verde-neon);
  padding:1.5rem 3rem;
  font-size:0.88rem;
}

.pie .redes-pie{
  display:flex;
  gap:1.2rem;
}

.pie a{
  color:var(--dorado);
  text-decoration:none;
}

.pie a:hover{
  color:var(--rosa-neon);
}