/* ===========================
   Impulsa Chile — Estilos generales
   Paleta: azul, naranjo y blanco
=========================== */

:root {
  --azul: #1B4F9C;
  --azul-oscuro: #123A78;
  --naranjo: #F5821F;
  --blanco: #FFFFFF;
  --gris-claro: #F8F9FA;
  --gris-texto: #333333;
  --borde: #E4E4E4;

  --fuente: "Segoe UI", Arial, sans-serif;
  --radio: 10px;
  --sombra: 0 2px 10px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--gris-texto);
  background-color: var(--blanco);
  line-height: 1.6;
}

a {
  color: var(--azul);
  text-decoration: none;
}

a:hover {
  color: var(--naranjo);
}

img {
  max-width: 100%;
  display: block;
}

.contenedor {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header / Navegación ---------- */

.encabezado {
  background-color: var(--azul);
  color: var(--blanco);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra);
}

.barra-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Versión blanca del logo, para que se lea sobre el azul del encabezado.
   Es un logo de dos líneas apiladas, así que necesita bastante altura
   para que el lettering se lea bien */
.logo img {
  height: 80px;
  width: auto;
}

.menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  color: var(--blanco);
  font-weight: 500;
}

.menu a:hover,
.menu a.activo {
  color: var(--naranjo);
}

.boton-menu {
  display: none;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 1.8rem;
  cursor: pointer;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.boton:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.boton-naranjo {
  background-color: var(--naranjo);
  color: var(--blanco);
}

.boton-naranjo:hover {
  color: var(--blanco);
}

.boton-azul {
  background-color: var(--azul);
  color: var(--blanco);
}

.boton-azul:hover {
  color: var(--blanco);
}

.boton-borde {
  background-color: transparent;
  color: var(--blanco);
  border-color: var(--blanco);
}

.boton-trayectoria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  background-color: var(--azul);
  color: var(--blanco);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(27, 79, 156, 0.22);
}

.boton-trayectoria .flecha {
  transition: transform 0.15s ease;
}

.boton-trayectoria:hover {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  box-shadow: 0 6px 16px rgba(27, 79, 156, 0.3);
}

.boton-trayectoria:hover .flecha {
  transform: translateX(4px);
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  color: var(--blanco);
  padding: 90px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: var(--naranjo);
  border-radius: 50%;
  opacity: 0.9;
}

.hero .contenedor {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 16px;
}

.hero p {
  font-size: 1.15rem;
  max-width: 620px;
  margin: 0 auto 30px;
  opacity: 0.95;
}

.hero-botones {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Secciones generales ---------- */

.seccion {
  padding: 70px 20px;
}

.seccion-alterna {
  background-color: var(--gris-claro);
}

.titulo-seccion {
  text-align: center;
  margin-bottom: 12px;
  color: var(--azul-oscuro);
  font-size: 2rem;
}

.subtitulo-seccion {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
  color: #555;
}

/* ---------- Tarjetas ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

.tarjeta {
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  box-shadow: var(--sombra);
}

.tarjeta h3 {
  color: var(--azul-oscuro);
  margin-top: 12px;
}

.icono-circulo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--naranjo);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
}

/* ---------- Equipo ---------- */

.persona {
  text-align: center;
}

.persona .foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background-color: var(--gris-claro);
  border: 3px solid var(--naranjo);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul);
  font-size: 2rem;
  font-weight: 700;
  overflow: hidden;
}

.persona .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona .cargo {
  color: var(--naranjo);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Blog ---------- */

/* La portada se sale del padding de la tarjeta para llegar a los bordes.
   max-width: none es necesario para anular el max-width: 100% global de img */
.tarjeta-post img {
  border-radius: var(--radio) var(--radio) 0 0;
  height: 180px;
  width: calc(100% + 56px);
  max-width: none;
  object-fit: cover;
  margin: -28px -28px 20px;
}

.fecha-post {
  color: var(--naranjo);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.post-completo {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 20px;
}

.post-completo img {
  border-radius: var(--radio);
  margin-bottom: 30px;
}

.post-completo h2 {
  margin-top: 46px;
  color: var(--azul-oscuro);
}

/* Bloques que alternan foto y texto a lo largo del relato */
.bloque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin: 46px 0;
}

.bloque img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
}

.bloque p {
  margin: 0 0 14px;
}

.bloque p:last-child {
  margin-bottom: 0;
}

/* Con .invertido el texto va a la izquierda y la foto a la derecha */
.bloque.invertido .bloque-texto {
  order: -1;
}

/* Par de fotos lado a lado */
.par-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 32px 0;
}

.par-fotos figure {
  margin: 0;
}

.par-fotos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
}

.pie-foto {
  margin: 8px 0 0;
  color: #777;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Frase de cierre destacada */
.cierre {
  margin: 50px 0 30px;
  padding: 26px 30px;
  border-left: 4px solid var(--naranjo);
  background-color: var(--gris-claro);
  border-radius: 0 var(--radio) var(--radio) 0;
  color: var(--azul-oscuro);
  font-size: 1.15rem;
  font-weight: 600;
}

@media (max-width: 700px) {
  .bloque,
  .par-fotos {
    grid-template-columns: 1fr;
  }

  /* En celular la foto siempre va arriba del texto */
  .bloque.invertido .bloque-texto {
    order: 0;
  }
}

/* ---------- Donar ---------- */

.opciones-donacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.caja-donacion {
  background: var(--blanco);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px;
  text-align: center;
}

.caja-donacion.destacada {
  border-color: var(--naranjo);
}

.datos-banco {
  margin: 24px 0;
  text-align: left;
}

.datos-banco > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
}

.datos-banco > div:last-child {
  border-bottom: none;
}

.datos-banco dt {
  color: #666;
  font-size: 0.85rem;
  white-space: nowrap;
}

.datos-banco dd {
  margin: 0;
  color: var(--azul-oscuro);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.aviso-copiado {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul);
}

.aviso-copiado.error {
  color: #c0392b;
}

/* ---------- Formularios ---------- */

.formulario {
  max-width: 620px;
  margin: 0 auto;
}

.campo {
  margin-bottom: 20px;
}

.campo label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--azul-oscuro);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.campo textarea {
  resize: vertical;
  min-height: 120px;
}

/* Campo trampa anti-spam: invisible para las personas, no para los robots */
.campo-trampa {
  position: absolute;
  left: -9999px;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: 2px solid var(--naranjo);
  border-color: var(--naranjo);
}

/* ---------- Trayectoria (línea de tiempo) ---------- */

.trayectoria {
  list-style: none;
  margin: 0 auto;
  padding: 0 0 0 34px;
  max-width: 620px;
  position: relative;
}

.trayectoria::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: var(--borde);
}

.hito {
  position: relative;
  padding-bottom: 34px;
}

.hito:last-child {
  padding-bottom: 0;
}

.hito::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--naranjo);
  border: 3px solid var(--blanco);
  box-shadow: 0 0 0 2px var(--naranjo);
}

.hito-cuerpo {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.hito-foto {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: var(--sombra);
}

.hito .anio {
  display: block;
  margin-bottom: 10px;
  color: var(--naranjo);
  font-weight: 700;
  font-size: 1.05rem;
}

.hito h3 {
  margin: 4px 0 6px;
  color: var(--azul-oscuro);
}

.hito p {
  margin: 0;
  color: #555;
}

.generales {
  margin: 0;
  color: #555;
  line-height: 1.7;
}

.generales::before {
  content: "Generales";
  display: block;
  margin-bottom: 3px;
  color: #999;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.enlace-historia {
  display: inline-block;
  margin-top: 10px;
  color: var(--azul);
  font-weight: 600;
  font-size: 0.92rem;
}

.enlace-historia:hover {
  color: var(--naranjo);
}

.hito.pendiente::before {
  background-color: var(--blanco);
  box-shadow: 0 0 0 2px var(--borde);
}

.hito.pendiente p {
  font-style: italic;
  color: #888;
}

/* Los nombres de los generales se leen mejor sin cursiva, incluso en la
   edición que aún está por venir */
.hito.pendiente .generales {
  font-style: normal;
}

/* ---------- Widget de Instagram ---------- */

/* Las dos tarjetas de "Súmate a la causa" van apiladas y del mismo ancho,
   así la diferencia de alto entre ambas no se nota */
.columna-causa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.columna-causa > * {
  width: 100%;
  max-width: 420px;
}

.tarjeta-instagram {
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: left;
  overflow: hidden;
}

.ig-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 0;
}

.ig-header strong {
  color: var(--azul-oscuro);
  font-size: 1.1rem;
}

.ig-header span {
  color: #777;
  font-weight: 600;
  font-size: 0.9rem;
}

.ig-perfil {
  margin: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
}

.ig-avatar {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 180deg, var(--naranjo), #d62976, var(--azul), var(--naranjo));
}

.ig-avatar span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--azul);
  overflow: hidden;
}

/* El logo es horizontal, así que se muestra completo (contain) dentro del
   círculo en vez de recortado */
.ig-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  background-color: var(--blanco);
  padding: 4px;
}

.ig-info h4 {
  margin: 0;
  color: var(--azul-oscuro);
}

.ig-info p {
  margin: 2px 0 0;
  color: #777;
  font-size: 0.85rem;
}

.ig-icono {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #d62976;
  display: flex;
}

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 18px;
}

.ig-post {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--gris-claro);
}

.ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.ig-post:hover img {
  opacity: 0.85;
}

.boton-oscuro {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
}

.boton-oscuro:hover {
  color: var(--blanco);
}

.pie-ig {
  text-align: center;
  padding: 18px 22px 22px;
}

/* ---------- Galería ---------- */

.anio-galeria {
  margin-bottom: 50px;
  scroll-margin-top: 90px;
}

.subtitulo-categoria {
  color: var(--naranjo);
  margin: 34px 0 16px;
  font-size: 1.2rem;
}

.contador-cat {
  color: #999;
  font-weight: 400;
  font-size: 0.9rem;
}

.rejilla-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.foto-galeria {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--gris-claro);
}

.foto-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.foto-galeria:hover img {
  transform: scale(1.06);
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.94);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.lightbox.abierto {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

.lightbox-cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 2;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* Flechas para pasar de una foto a otra sin cerrar el visor */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.13);
  color: var(--blanco);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lightbox-nav:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.lightbox-prev {
  left: 18px;
}

.lightbox-next {
  right: 18px;
}

.lightbox-contador {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Pantalla que aparece al pasar la última foto */
.lightbox-final {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.lightbox-final.visible {
  display: flex;
}

.final-logo {
  width: 190px;
  max-width: 55vw;
  margin-bottom: 28px;
}

.final-titulo {
  margin: 0 0 26px;
  color: var(--blanco);
  font-size: 1.3rem;
  font-weight: 600;
}

.final-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 600px) {
  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 1.9rem;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .final-botones {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
}

/* ---------- Footer ---------- */

.pie {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  padding: 50px 20px 20px;
}

.pie-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.pie h4 {
  color: var(--naranjo);
  margin-bottom: 14px;
}

.pie ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pie li {
  margin-bottom: 8px;
}

.pie a {
  color: var(--blanco);
  opacity: 0.85;
}

.pie a:hover {
  opacity: 1;
  color: var(--naranjo);
}

.pie-abajo {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .boton-menu {
    display: block;
  }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--azul);
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .menu.abierto {
    max-height: 400px;
  }

  .menu li {
    width: 100%;
    text-align: center;
  }

  .menu a {
    display: block;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero h1 {
    font-size: 2rem;
  }
}