/* ======================== */
/* ===== Estilos Base ===== */
/* ======================== */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 400; /* Regular */
  background-color: #FAE44C;
  color: #000;
  line-height: 0;
}

.container {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  box-sizing: border-box;
}

section {
  grid-column: 1 / -1;
  margin-bottom: 0px;
}

h1 {
  font-size: 48px;
  line-height: 50px;
  margin-bottom: 0px;
  font-weight: 400;
}

h2 {
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 0px;
  font-weight: 400;
}

p {
  font-size: 18px;
  line-height: 20px;
  margin: 0;
  font-weight: 400;
}

/* ======================== */
/* ===== Ilustraciones ===== */
/* ======================== */

.ilu-1 { width: 75%; display: block; margin-left: 0; }
.ilu-2 { width: 25%; display: block; margin-left: 0; }
.ilu-3 { width: 85%; display: block; margin-left: auto; margin-right: 0; }
.ilu-4 { width: 35%; display: block; margin-left: 0; }

/* ======================== */
/* ===== Columnas ===== */
/* ======================== */

.columns { display: grid; gap: 24px; }
.columns.three { grid-template-columns: repeat(3, 1fr); }
.columns.four { grid-template-columns: repeat(4, 1fr); }

/* ======================== */
/* ===== Header ===== */
/* ======================== */

.header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: 40px 24px 0 24px;
  align-items: center;
  position: relative;
}

.header h1 {
  grid-column: 1 / 6;
  margin: 0;
  font-size: 48px;
  line-height: 50px;
}

/* CTA fijo */
.header .cta {
  position: fixed;
  top: 40px;
  right: 140px; /* Ajusta según tu diseño */
  z-index: 1000;
}

.header .languages {
  position: fixed;
  top: 40px;
  right: 40px;
  display: flex;
  gap: 8px;
  z-index: 1000;
}


.header .cta a {
  text-decoration: none; /* Quita subrayado */
}

.header .cta a p {
  color: #000;
  padding: 8px 16px;
  cursor: pointer;
  text-align: center;
  margin: 0;
}

/* Hover CTA */
.header .cta a p:hover {
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 1px;
  text-decoration-thickness: 1.5px;
}

/* Idiomas */
.header .languages {
  display: flex;
  gap: 8px;
  position: fixed;
  top: 48px;
  z-index: 1000;
}

.header .languages p {
  cursor: pointer;
  text-decoration: none;
}

.header .languages p.active {
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 1px;
  text-decoration-thickness: 1.5px;
}

.header .languages p:hover {
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 1px;
  text-decoration-thickness: 1.5px;
}

/* Quitar color y subrayado predeterminado de todos los enlaces */
a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus,
a:active,
a:visited {
  color: inherit;
  text-decoration: none;
}

/* ======================== */
/* ===== Footer ===== */
/* ======================== */

.footer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  padding: 40px 24px;
  align-items: start;
  background-color: #FAE44C;
}

/* Col 1: Logo */
.footer-logo { grid-column: 1 / 2; }
.footer-logo img { max-height: 120px; width: auto; mix-blend-mode: multiply; }

/* Col 2-3: Nombre */
.footer-name {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
}
.footer-name p {
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
}

/* Col 4-7: Info con iconos */
.footer-info {
  grid-column: 4 / 8;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-item img { height: 16px; width: auto; }
.footer-item p { font-size: 14px; line-height: 16px; }

/* Col 8-9: Logo secundario */
.footer-secondary-logo {
  grid-column: 8 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-secondary-logo img {
  max-height: 120px;
  width: auto;
  object-fit: contain;
  cursor: pointer;
  resize: both;
  overflow: auto;
}

/* Col 10-12: Texto subvención */
.footer-support {
  grid-column: 10 / 13;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
}
.footer-support p { font-size: 14px; line-height: 16px; }

/* Enlaces footer */
.footer a {
  color: inherit;
  text-decoration: none; /* <-- importante: no subrayado */
}
.footer a:hover {
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 1px;
  text-decoration-thickness: 1.5px;
}

/* ========================= */
/* ===== Versión móvil ===== */
/* ========================= */
@media (max-width: 768px) {
  /* Header simplificado */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
  }

  /* Ocultar el título en móvil */
  .header h1 {
    display: none;
  }

   h1 {
    font-size: 28px;
    line-height: 32px;
  }

  h2 {
    font-size: 18px;
    line-height: 22px;
  }
  
  /* CTA a la izquierda */
  .header .cta {
    position: static;
    justify-self: start;
  }

  .header .cta a p {
    font-size: 16px;
    line-height: 18px;
  }

  /* Idiomas a la derecha */
  .header .languages {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
  }

  /* Quitar grid del contenedor principal */
  .container {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  /* Todas las columnas pasan a una sola */
  .columns.three,
  .columns.four {
    grid-template-columns: 1fr;
  }

  /* Ilustraciones 1 y 3: ancho completo */
  .ilu-1,
  .ilu-3 {
    width: 100%;
  }

  /* Ilustraciones 2 y 4: mitad de ancho */
  .ilu-2 {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;    
  }
  
  .ilu-4 {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

    .hashtag {
  text-align: center; /* centrado en móvil */
  margin-top: 32px;
  margin-bottom: 48px;
}
  
  /* Footer a una columna centrado */
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer > div {
    margin-bottom: 16px;
  }

  .footer-logo img,
  .footer-secondary-logo img {
    max-height: 100px;
  }

  .footer-info {
    align-items: center;
  }

  .footer-item {
    justify-content: center;
  }
}