<style>
/* ===== IDENTIDAD Y ANCHO ===== */
#amerinfa-home {
  --azul: #0b3b61;
  --turquesa: #09a9c1;
  --verde: #99c444;
  --naranja: #ff7802;
  --texto: #293e4d;
  --fondo: #f0f8fa;

  width: min(1440px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-block: 0 !important;
  margin-inline: calc(50% - min(720px, calc(50vw - 24px))) !important;
  padding: 0 !important;
  background: #fff;
  color: var(--texto);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  text-align: left;
  isolation: isolate;
}

#amerinfa-home,
#amerinfa-home * {
  box-sizing: border-box;
}

#amerinfa-home h1,
#amerinfa-home h2,
#amerinfa-home h3,
#amerinfa-home p {
  font-family: inherit;
  text-transform: none;
}

#amerinfa-home h2 {
  margin: 0 0 20px;
  color: var(--azul) !important;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

#amerinfa-home h3 {
  margin: 0 0 14px;
  color: var(--azul) !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

#amerinfa-home p,
#amerinfa-home li {
  color: var(--texto) !important;
}

#amerinfa-home p {
  margin: 0 0 18px;
}

#amerinfa-home strong {
  color: inherit !important;
}

#amerinfa-home a {
  text-decoration: none;
}

#amerinfa-home a:focus-visible {
  outline: 3px solid #ad4b00;
  outline-offset: 5px;
}

#amerinfa-home [id] {
  scroll-margin-top: 100px;
}

/* ===== MENÚ SUPERIOR ===== */
#amerinfa-home .al-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 20px clamp(20px, 4vw, 56px);
  background: #fff;
  border-bottom: 1px solid #dce8ed;
}

#amerinfa-home .al-menu-brand {
  color: var(--azul) !important;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

#amerinfa-home .al-menu-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#amerinfa-home .al-menu-links a {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--azul) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

#amerinfa-home .al-menu-links a:hover {
  background: #e8f7fa;
}

#amerinfa-home .al-menu-links .al-menu-lab {
  background: var(--azul);
  color: #fff !important;
}

#amerinfa-home .al-menu-links .al-menu-lab:hover {
  background: #125278;
}

/* ===== PORTADA CON LAS IMÁGENES ORIGINALES ===== */
#amerinfa-home .al-hero {
  position: relative;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px);
  background: #fff;
  text-align: center;
}

#amerinfa-home .al-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  background: linear-gradient(
    90deg,
    var(--azul) 0%,
    var(--azul) 25%,
    var(--turquesa) 25%,
    var(--turquesa) 50%,
    var(--verde) 50%,
    var(--verde) 75%,
    var(--naranja) 75%,
    var(--naranja) 100%
  );
}

#amerinfa-home .al-identidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 40px);
  max-width: 1040px;
  margin: 0 auto 36px;
}

/* Encuadre del símbolo sin modificar el archivo original. */
#amerinfa-home .al-simbolo {
  position: relative;
  flex: 0 0 clamp(110px, 14vw, 185px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
}

#amerinfa-home .al-simbolo img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 148% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}

/* Encuadre del nombre y su lema. */
#amerinfa-home .al-logotipo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 790px;
  aspect-ratio: 4.8 / 1;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

#amerinfa-home .al-logotipo img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 138% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}

#amerinfa-home .al-intro {
  max-width: 920px;
  margin: 0 auto 26px;
  font-size: clamp(18px, 1.7vw, 22px);
}

#amerinfa-home .al-intro strong {
  display: block;
  margin-bottom: 14px;
  color: var(--azul) !important;
}

/* ===== BOTONES ===== */
#amerinfa-home .al-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

#amerinfa-home .al-hero .al-actions {
  justify-content: center;
}

#amerinfa-home .al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  max-width: 100%;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--azul);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}

#amerinfa-home .al-btn:hover {
  box-shadow: 0 5px 18px rgba(11, 59, 97, 0.18);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Texto oscuro para conservar contraste con los colores vivos. */
#amerinfa-home .al-btn-green {
  background: var(--verde);
  color: #102b3d !important;
}

#amerinfa-home .al-btn-orange {
  background: var(--naranja);
  color: #271a0e !important;
}

#amerinfa-home .al-btn-light {
  background: #e2f6fa;
  color: var(--azul) !important;
  border-color: #b2e3eb;
}

/* ===== SECCIONES ===== */
#amerinfa-home .al-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(38px, 5vw, 68px) clamp(20px, 4vw, 56px);
}

#amerinfa-home .al-lead {
  max-width: 1050px;
  font-size: 19px;
}

#amerinfa-home .al-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

#amerinfa-home .al-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#amerinfa-home .al-card {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid #dce8ed;
  border-top: 6px solid var(--turquesa);
  border-radius: 20px;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(11, 59, 97, 0.05);
  overflow-wrap: anywhere;
}

#amerinfa-home .al-card:nth-child(2) {
  border-top-color: var(--verde);
}

#amerinfa-home .al-card:nth-child(3) {
  border-top-color: var(--naranja);
}

/* Corrección explícita de las letras en las tarjetas. */
#amerinfa-home .al-card h3 {
  color: var(--azul) !important;
}

#amerinfa-home .al-card p,
#amerinfa-home .al-card li,
#amerinfa-home .al-card strong {
  color: var(--texto) !important;
}

#amerinfa-home .al-card p:last-child {
  margin-bottom: 0;
}

/* ===== SEMILLEROS ===== */
#amerinfa-home .al-band {
  background: linear-gradient(120deg, var(--azul), #096477);
}

#amerinfa-home .al-band > h2,
#amerinfa-home .al-band > p {
  color: #fff !important;
}

#amerinfa-home .al-band > h2::after {
  content: "";
  display: block;
  width: 100px;
  height: 5px;
  margin-top: 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--verde), var(--naranja));
}

/* ===== LABORATORIO ===== */
#amerinfa-home .al-title-link {
  color: var(--azul) !important;
}

#amerinfa-home .al-title-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

#amerinfa-home .al-accent {
  padding: clamp(24px, 3vw, 36px);
  border-left: 6px solid var(--turquesa);
  border-radius: 0 20px 20px 0;
  background: #edf8fa;
}

#amerinfa-home .al-accent ul {
  margin: 0;
  padding-left: 24px;
}

#amerinfa-home .al-accent li {
  margin-bottom: 10px;
}

#amerinfa-home .al-accent li::marker {
  color: #087c90;
}

/* ===== BLOG Y COMUNIDAD ===== */
#amerinfa-home .al-blog {
  background: #f3f7f8;
}

#amerinfa-home .al-callout {
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid #dce8ed;
  border-left: 6px solid var(--naranja);
  border-radius: 22px;
  background: #fffaf4;
}

#amerinfa-home .al-community {
  background: var(--azul);
  border-top: 6px solid var(--verde);
}

#amerinfa-home .al-community h2,
#amerinfa-home .al-community p {
  color: #fff !important;
}

/* ===== TABLETAS ===== */
@media (max-width: 900px) {
  #amerinfa-home .al-menu {
    justify-content: center;
  }

  #amerinfa-home .al-menu-links {
    justify-content: center;
  }

  #amerinfa-home .al-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CELULARES ===== */
@media (max-width: 600px) {
  #amerinfa-home {
    width: calc(100vw - 32px) !important;
    margin-inline: calc(50% - 50vw + 16px) !important;
    font-size: 16px;
  }

  #amerinfa-home .al-menu {
    padding: 18px 12px;
  }

  #amerinfa-home .al-menu-links {
    gap: 4px;
  }

  #amerinfa-home .al-menu-links a {
    padding: 10px;
    font-size: 14px;
  }

  #amerinfa-home .al-identidad {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
  }

  #amerinfa-home .al-simbolo {
    flex: none;
    width: 115px;
  }

  #amerinfa-home .al-logotipo {
    flex: none;
    width: 100%;
  }

  #amerinfa-home .al-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #amerinfa-home .al-btn {
    width: 100%;
  }
}
</style>

<div id="amerinfa-home">

  <!-- MENÚ SUPERIOR -->
  <nav class="al-menu" aria-label="Menú principal">
    <a class="al-menu-brand" href="#amerinfa-home">
      AmerInfaLab
    </a>

    <div class="al-menu-links">
      <a href="#amerinfa-home">Inicio</a>
      <a href="#al-nosotros">Nosotros</a>
      <a href="#semilleros">Semilleros</a>
      <a class="al-menu-lab"
         href="https://amerinfalab.online/?amerinfalab=1">
        Laboratorio
      </a>
      <a href="#blog-integrantes">Blog</a>
      <a href="#contacto">Comunidad</a>
    </div>
  </nav>

  <!-- PORTADA -->
  <header class="al-hero">
    <div class="al-identidad">

      <!-- Sustituye URL_DEL_SIMBOLO por su dirección en WordPress. -->
      <div class="al-simbolo" aria-hidden="true">
        <img
          src="URL_DEL_SIMBOLO"
          alt=""
          decoding="async">
      </div>

      <!-- Sustituye URL_DEL_LOGOTIPO por su dirección en WordPress. -->
      <h1 class="al-logotipo">
        <img
          src="URL_DEL_LOGOTIPO"
          alt="AmerInfaLab — Laboratorio de creación"
          decoding="async">
      </h1>

    </div>

    <p class="al-intro">
      <strong>
        Investigación, formación e innovación para transformar
        la educación infantil.
      </strong>
      Un espacio para compartir saberes, experiencias y proyectos
      relacionados con la infancia, la educación significativa
      y la expresión musical.
    </p>

    <div class="al-actions">
      <a class="al-btn" href="#semilleros">
        Conoce nuestros semilleros
      </a>
      <a class="al-btn al-btn-green"
         href="https://amerinfalab.online/?amerinfalab=1">
        Explora el laboratorio
      </a>
      <a class="al-btn al-btn-orange" href="#blog-integrantes">
        Visita el blog
      </a>
    </div>
  </header>

  <!-- NOSOTROS -->
  <section id="al-nosotros" class="al-section">
    <h2>¿Qué es AmerInfaLab?</h2>

    <p class="al-lead">
      AmerInfaLab es un espacio de encuentro para docentes,
      estudiantes, investigadores e integrantes de comunidades
      educativas interesados en construir nuevas formas de
      comprender y acompañar la infancia.
    </p>

    <div class="al-grid">
      <article class="al-card">
        <h3>Investigación</h3>
        <p>
          Promovemos la exploración, el análisis y la producción
          de conocimiento sobre educación infantil.
        </p>
      </article>

      <article class="al-card">
        <h3>Formación</h3>
        <p>
          Compartimos experiencias y recursos para fortalecer
          las prácticas pedagógicas.
        </p>
      </article>

      <article class="al-card">
        <h3>Innovación</h3>
        <p>
          Conectamos ideas, proyectos y lenguajes creativos
          para transformar la educación.
        </p>
      </article>
    </div>
  </section>

  <!-- SEMILLEROS -->
  <section id="semilleros" class="al-section al-band">
    <h2>Semilleros de investigación</h2>

    <p>
      Conoce los grupos que hacen parte de nuestra comunidad
      de investigación y aprendizaje.
    </p>

    <div class="al-grid al-grid-two">
      <article class="al-card">
        <h3>SEINEDIN</h3>
        <p>
          <strong>
            Semillero de investigación en educación infantil.
          </strong>
        </p>
        <p>
          Espacio para investigar, dialogar y desarrollar
          propuestas orientadas a comprender las experiencias
          de aprendizaje y desarrollo durante la infancia.
        </p>
      </article>

      <article class="al-card">
        <h3>ESI</h3>
        <p>
          <strong>
            Semillero de Educación Significativa para la Infancia.
          </strong>
        </p>
        <p>
          Comunidad dedicada a promover experiencias educativas
          significativas, sensibles, creativas y conectadas
          con las realidades de niñas y niños.
        </p>
      </article>
    </div>
  </section>

  <!-- LABORATORIO -->
  <section id="laboratorio" class="al-section">
    <h2>
      <a class="al-title-link"
         href="https://amerinfalab.online/?amerinfalab=1">
        Laboratorio
      </a>
    </h2>

    <p class="al-lead">
      Accede al laboratorio de <strong>AmerInfaLab</strong>
      y explora sus proyectos, experiencias, recursos y procesos
      de creación e investigación.
    </p>

    <div class="al-accent">
      <ul>
        <li>Proyectos y experiencias pedagógicas.</li>
        <li>Recursos para la educación infantil.</li>
        <li>Documentación de procesos de investigación.</li>
        <li>Materiales y producciones de la comunidad.</li>
      </ul>

      <div class="al-actions">
        <a class="al-btn"
           href="https://amerinfalab.online/?amerinfalab=1">
          Entrar al laboratorio →
        </a>
        <a class="al-btn al-btn-light" href="#blog-integrantes">
          Ver publicaciones
        </a>
      </div>
    </div>
  </section>

  <!-- BLOG -->
  <section id="blog-integrantes" class="al-section al-blog">
    <h2>Blog de integrantes</h2>

    <p>
      En este espacio se publicarán artículos, reflexiones,
      experiencias, reseñas y avances de investigación escritos
      por los integrantes de AmerInfaLab.
    </p>

    <div class="al-card">
      <h3>Publicaciones y experiencias</h3>
      <p>
        Las nuevas publicaciones aparecerán como entradas del blog
        para facilitar su lectura y organización por temas.
      </p>

      <div class="al-actions">
        <a class="al-btn al-btn-orange" href="#contacto">
          Conoce nuestra comunidad
        </a>
      </div>
    </div>
  </section>

  <!-- EXPRESIÓN MUSICAL -->
  <section class="al-section">
    <div class="al-callout">
      <h2>Expresión Musical Americana</h2>

      <p>
        Visita también nuestro espacio dedicado a la expresión
        musical y sus posibilidades pedagógicas.
      </p>

      <div class="al-actions">
        <a class="al-btn"
           href="https://expresionmusicalamericana.online/"
           target="_blank"
           rel="noopener noreferrer">
          Visitar Expresión Musical Americana ↗
        </a>
      </div>
    </div>
  </section>

  <!-- COMUNIDAD -->
  <section id="contacto" class="al-section al-community">
    <h2>Únete a la comunidad</h2>

    <p>
      Explora nuestras investigaciones, participa en las actividades
      y acompaña las publicaciones de quienes hacen parte
      de este laboratorio académico.
    </p>

    <p>
      <strong>
        AmerInfaLab: investigar, crear y transformar
        la educación infantil.
      </strong>
    </p>

    <div class="al-actions">
      <a class="al-btn al-btn-green"
         href="https://amerinfalab.online/?amerinfalab=1">
        Acceder al laboratorio
      </a>
    </div>
  </section>

</div>