.indice {
  position: fixed;
  top: 120px;
  /* debajo del header */
  right: 30px;
  width: 280px;
  background: #f3f3f3;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.indice h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #333;
}

/* buscador */
.buscador {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  font-size: 14px;
}

/* lista */
.indice ul {
  list-style: none;
}

.indice li {
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}

.indice li:last-child {
  border-bottom: none;
}

.indice a {
  text-decoration: none;
  color: #444;
  font-size: 15px;
  transition: 0.2s;
}

.indice a:hover {
  color: black;
  padding-left: 5px;
}

@media (max-width: 1000px) {
  .indice {
    display: none;
    /* 🔥 se oculta en móvil */
  }
}

.imagen-seccion {
  max-width: 900px;
  margin: 100px 0 40px 80px;
  /* 👈 aumenta este valor */
}

.imagen-seccion img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

@media (max-width: 1000px) {

  .imagen-seccion {
    margin: 30px;
    max-width: 100%;
  }

  .imagen-seccion img {
    height: 250px;
  }
}

.info-card {
  max-width: 900px;
  margin: 0 0 40px 80px;
  /* alineado con la imagen */
  background: white;
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.info-card p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 17px;
}

/* LINKS */
.info-links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.info-links a {
  text-decoration: none;
  font-size: 16px;
  color: #111;
  border: 1px solid #ddd;
  padding: 8px 15px;
  border-radius: 20px;
  transition: 0.3s;
}

.info-links a:hover {
  background: #111;
  color: white;
}

@media (max-width: 1000px) {

  .info-card {
    margin: 0 30px 30px;
    padding: 25px;
  }

  .info-card p {
    font-size: 14px;
  }

  .info-links {
    flex-direction: column;
  }

  .info-links a {
    text-align: center;
  }
}

.titulo-seccion {
  max-width: 900px;
  margin: 0 0 40px 80px;
}

.titulo-seccion h2 {
  font-size: 28px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ICONO */
.titulo-seccion i {
  font-size: 20px;
}

/* TEXTO */
.titulo-seccion p {
  color: #555;
  font-size: 15px;
}

@media (max-width: 1000px) {

  .titulo-seccion {
    margin: 0 30px 30px;
  }

  .titulo-seccion h2 {
    font-size: 24px;
  }

  .titulo-seccion p {
    font-size: 14px;
  }
}

.ficha-cards {
  max-width: 900px;
  margin: 40px 0 40px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* TARJETA */
.ficha-card {
  background: white;
  padding: 25px;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  transition: 0.3s;
}

.ficha-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* TITULO */
.ficha-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ICONO */
.ficha-card i {
  font-size: 16px;
  color: #111;
}

/* LISTA */
.ficha-card ul {
  list-style: none;
  padding: 0;
}

.ficha-card li {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  position: relative;
  padding-left: 22px;
}

/* ✔️ CHECK VERDE */
.ficha-card li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #22c55e;
  /* verde */
  font-size: 14px;
}

@media (max-width: 1000px) {

  .ficha-cards {
    margin: 30px;
    grid-template-columns: 1fr;
    /* 🔥 una sola columna */
  }

  .ficha-card {
    padding: 20px;
  }
}

/* TARJETA INTRO (EXTENSIÓN DE info-card) */
.intro-card {
  border-left: 4px solid #f59e0b;
}

/* TÍTULO CON ICONO */
.intro-title {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

/* ICONO */
.intro-title i {
  font-size: 18px;
  color: #f59e0b;
}

/* TEXTO igual que info-card */
.intro-card p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 17px;
}

/* RESPONSIVE (MISMO SISTEMA TUYO) */
@media (max-width: 1000px) {
  .intro-card {
    margin: 0 30px 30px;
    padding: 25px;
  }

  .intro-title {
    font-size: 18px;
  }

  .intro-card p {
    font-size: 14px;
  }
}

/* 🔥 CAJA DE CURIOSIDAD */
.curiosidad-box {
  background: #fff8d6;
  border-left: 5px solid #facc15;
  padding: 18px 20px;
  border-radius: 14px;
  margin-top: 20px;
}

/* TÍTULO CURIOSIDAD */
.curiosidad-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 10px;
  font-size: 16px;
}

/* ICONO */
.curiosidad-title i {
  color: #f59e0b;
  font-size: 16px;
}

/* TEXTO */
.curiosidad-box p {
  margin: 0;
  color: #6b4e00;
  font-size: 15px;
  line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .curiosidad-box {
    padding: 15px;
  }

  .curiosidad-box p {
    font-size: 14px;
  }

  .curiosidad-title {
    font-size: 15px;
  }
}

.texto-titulo {
  max-width: 900px;
  margin: 40px 0 15px 80px;
  font-size: 24px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
}

.texto-titulo i {
  font-size: 20px;
  color: #111;
}

.texto-titulo+p {
  max-width: 900px;
  margin: 0 0 40px 80px;
  color: #555;
  font-size: 17px;
  line-height: 1.8;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .texto-titulo {
    margin: 30px;
    font-size: 20px;
  }

  .texto-titulo+p {
    margin: 0 30px 30px;
    font-size: 14px;
  }
}

/* 🔵 TARJETA VERDE PERSONAJES */
.personajes-card {
  max-width: 900px;
  margin: 40px 0 40px 80px;
  background: #ecfdf5;
  border-left: 5px solid #22c55e;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.personajes-card h3 {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #065f46;
}

.personajes-card i {
  color: #16a34a;
  font-size: 18px;
}

.personajes-card p {
  color: #166534;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .personajes-card {
    margin: 30px;
    padding: 20px;
  }

  .personajes-card h3 {
    font-size: 18px;
  }

  .personajes-card p {
    font-size: 14px;
  }
}

#instituciones-comunitarias {
  max-width: 900px;
  margin: 40px 0 40px 80px;
}

.texto-titulo {
  font-size: 24px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.texto-titulo i {
  font-size: 20px;
  color: #111;
}

#instituciones-comunitarias p {
  color: #555;
  font-size: 17px;
  line-height: 1.8;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  #instituciones-comunitarias {
    margin: 30px;
  }

  .texto-titulo {
    font-size: 20px;
  }

  #instituciones-comunitarias p {
    font-size: 14px;
  }
}

/* 📄 PÁRRAFO SIMPLE EN CARD */
.simple-parrafo {
  max-width: 900px;
  margin: 40px 0 40px 80px;
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.simple-parrafo p {
  color: #555;
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .simple-parrafo {
    margin: 30px;
    padding: 20px;
  }

  .simple-parrafo p {
    font-size: 14px;
  }
}

/* BASE */
.ficha-card {
  padding: 25px;
  border-radius: 16px;
  transition: 0.3s;
}

/* TEXTO Y LISTA CONSISTENTE */
.ficha-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 15px;
}

.ficha-card ul {
  list-style: none;
  padding: 0;
}

.ficha-card li {
  font-size: 14px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 22px;
}

.ficha-card li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #22c55e;
}

/* 🔵 AZUL */
.ficha-card.azul {
  background: #eaf2ff;
}

/* 🟠 NARANJA */
.ficha-card.naranja {
  background: #fff1e6;
}

/* 🟢 VERDE */
.ficha-card.verde {
  background: #eafaf1;
}

/* 🟣 MORADO */
.ficha-card.morado {
  background: #f3e8ff;
}

/* ICONOS COLOREADOS */
.ficha-card.azul h3 i {
  color: #3b82f6;
}

.ficha-card.naranja h3 i {
  color: #f97316;
}

.ficha-card.verde h3 i {
  color: #22c55e;
}

.ficha-card.morado h3 i {
  color: #a855f7;
}

/* HOVER SUAVE */
.ficha-card:hover {
  transform: translateY(-5px);
}

.card.entidades-card {
  max-width: 900px;
  margin: 40px 0 40px 80px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
  box-sizing: border-box;
}

.card.entidades-card .card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin-bottom: 15px;
  color: #222;
}

.card.entidades-card .card-title i {
  color: #2c7be5;
}

.card.entidades-card .card-content p {
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 15px;
  color: #333;
}

.card.entidades-card .card-content p strong {
  color: #111;
}