@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;600;700&display=swap");

#top .ipuin-home { font-family: "Merriweather", Georgia, serif; background: #fcf2dc; overflow: hidden; }
#top .ipuin-home .container { max-width: 100%; width: 100%; padding: 0; }
#top .ipuin-home .av_textblock_section, #top .ipuin-home .avia_textblock { margin: 0; }
#top .ipuin-home h1, #top .ipuin-home h2, #top .ipuin-home h3 { font-family: "Merriweather", Georgia, serif; font-weight: 700; margin: 0; }
#top .ipuin-home p { margin: 0; font-family: "Merriweather", Georgia, serif; }
#top .ipuin-home img { display: block; max-width: 100%; height: auto; }
#top .ipuin-home .ipuin-boton { font-family: "Merriweather", Georgia, serif; font-weight: 500; color: #fefefb; background: #cb7434; text-align: center; text-decoration: none; }
#top .ipuin-home .ipuin-boton:hover { background: #021a3c; color: #fefefb; }

/* Hero */
#top #ipuin-hero { background: url({{img:hero-imagen}}) center / cover no-repeat; }
#top #ipuin-hero .ipuin-hero__interior { max-width: 1440px; margin: 0 auto; min-height: 383px; padding: 63px 20px 40px 9.6%; box-sizing: border-box; }
#top #ipuin-hero .ipuin-hero__titulo { max-width: 509px; color: #fefefb; font-size: clamp(30px, 3.7vw, 53px); line-height: 1.02; }
#top #ipuin-hero .ipuin-hero__texto { max-width: 373px; margin-top: 4px; color: #fefefb; font-size: clamp(16px, 1.46vw, 21px); line-height: 1.2; }
#top #ipuin-hero .ipuin-hero__boton { margin-top: 12px; padding: 0 24px; line-height: 48px; min-width: 361px; font-size: clamp(17px, 1.6vw, 23px); border-radius: 18px; box-sizing: border-box; }

/* Vídeo */
#top #ipuin-bideoa .ipuin-bideoa__interior { position: relative; max-width: 1440px; margin: 0 auto; padding: 39px 4% 30px 11%; box-sizing: border-box; display: grid; grid-template-columns: 537fr 600fr; gap: 0 55px; align-items: start; min-height: 301px; }
#top #ipuin-bideoa .ipuin-bideoa__video img { width: 100%; border-radius: 10px; }
#top #ipuin-bideoa .ipuin-bideoa__contenido { position: relative; z-index: 2; }
#top #ipuin-bideoa .ipuin-bideoa__titulo { color: #021a3c; font-size: clamp(26px, 2.7vw, 39px); line-height: 1.15; }
#top #ipuin-bideoa .ipuin-bideoa__fila { display: flex; gap: 30px; margin-top: 18px; align-items: flex-start; }
#top #ipuin-bideoa .ipuin-bideoa__icono { width: 63px; flex: none; }
#top #ipuin-bideoa .ipuin-bideoa__texto { max-width: 368px; color: #032c52; font-size: clamp(15px, 1.46vw, 21px); line-height: 1.25; }
#top #ipuin-bideoa .ipuin-bideoa__boton { margin-top: 20px; padding: 0 28px; line-height: 39px; font-size: 21px; color: #331c1b; background: #fae4bc; border: 1px solid #cb7434; border-radius: 16px; }
#top #ipuin-bideoa .ipuin-bideoa__boton:hover { background: #cb7434; color: #fefefb; }
#top #ipuin-bideoa .ipuin-bideoa__deko { position: absolute; z-index: 1; }
#top #ipuin-bideoa .ipuin-bideoa__deko--per { right: 0; top: 29px; width: 113px; }
#top #ipuin-bideoa .ipuin-bideoa__deko--lin { right: 0; top: 56px; width: 281px; opacity: .35; }

/* Atlas */
#top #ipuin-atlas { background: url({{img:ipuinen-atlas-magikoa-imagen-mapamun}}) center / cover no-repeat; }
#top #ipuin-atlas .ipuin-atlas__interior { position: relative; max-width: 1440px; margin: 0 auto; aspect-ratio: 1440 / 467; }
#top #ipuin-atlas .ipuin-atlas__titulo { position: absolute; left: 0; right: 0; top: 3.6%; text-align: center; color: #021a3c; font-size: clamp(30px, 3.7vw, 53px); }
#top #ipuin-atlas .ipuin-atlas__subtitulo { position: absolute; left: 0; right: 0; top: 16%; text-align: center; color: #032c52; font-weight: 500; font-size: clamp(14px, 1.2vw, 17px); }
#top #ipuin-atlas .ipuin-atlas__marca { position: absolute; padding: 4px 12px; background: #fcf2dc; color: #140c13; font-weight: 700; font-size: clamp(12px, 1.25vw, 18px); line-height: 1.25; text-align: center; border-radius: 10px; }
#top #ipuin-atlas .ipuin-atlas__marca--euskal { left: 46.9%; top: 25.3%; }
#top #ipuin-atlas .ipuin-atlas__marca--mexiko { left: 22.4%; top: 42.4%; }
#top #ipuin-atlas .ipuin-atlas__marca--ghana { left: 49%; top: 53.5%; }
#top #ipuin-atlas .ipuin-atlas__marca--txina { left: 67.2%; top: 42.4%; }
#top #ipuin-atlas .ipuin-atlas__marca--japonia { left: 83.4%; top: 38.3%; }
#top #ipuin-atlas .ipuin-atlas__cartel { position: absolute; left: 79.3%; top: 64.5%; width: 17.4%; box-sizing: border-box; padding: 12px 14px; background: #fae4bc; color: #331c1b; font-size: clamp(11px, 1.2vw, 17px); line-height: 1.35; border-radius: 10px; }

/* Ipuin nabarmenduak */
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__interior { max-width: 1440px; margin: 0 auto; padding: 15px 5% 40px; box-sizing: border-box; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__titulo { text-align: center; color: #021a3c; font-size: clamp(26px, 2.7vw, 39px); }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__subtitulo { text-align: center; margin-top: 8px; color: #032c52; font-size: 17px; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 18px; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__tarjeta { text-align: center; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__figura { position: relative; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__figura img { width: 100%; aspect-ratio: 297 / 143; object-fit: cover; border-radius: 10px; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__pais { position: absolute; left: 0; bottom: -2px; padding: 0 12px; line-height: 23px; background: #fae4bc; color: #fefefb; font-weight: 600; font-size: 17px; border-radius: 0 8px 0 0; text-shadow: 0 0 2px #331c1b; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__nombre { margin-top: 28px; color: #021a3c; font-size: clamp(19px, 1.75vw, 25px); line-height: 1.2; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__desc { margin: 10px auto 0; max-width: 220px; color: #032c52; font-size: 18px; line-height: 1.2; min-height: 44px; }
#top #ipuin-nabarmenduak .ipuin-nabarmenduak__boton { display: block; margin-top: 14px; line-height: 37px; padding: 0 12px; font-size: 20px; border-radius: 14px; }

/* Ikasleak / Irakasleak */
#top #ipuin-publikoak .ipuin-publikoak__interior { max-width: 1440px; margin: 0 auto; padding: 18px 2% 20px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#top #ipuin-publikoak .ipuin-publikoak__tarjeta { position: relative; display: flex; align-items: center; gap: 16px; min-height: 146px; padding: 8px 12px; }
#top #ipuin-publikoak .ipuin-publikoak__marco { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#top #ipuin-publikoak .ipuin-publikoak__texto { position: relative; z-index: 1; flex: 1; text-align: center; }
#top #ipuin-publikoak .ipuin-publikoak__titulo { color: #032c52; font-size: clamp(22px, 1.95vw, 28px); }
#top #ipuin-publikoak .ipuin-publikoak__texto p { margin-top: 8px; color: #032c52; font-size: 17px; line-height: 1.25; }
#top #ipuin-publikoak .ipuin-publikoak__boton { margin-top: 10px; padding: 0 20px; line-height: 37px; font-size: 18px; border-radius: 14px; }
#top #ipuin-publikoak .ipuin-publikoak__figura { position: relative; z-index: 1; width: 28%; max-width: 197px; flex: none; }

/* Nola funtzionatzen du? */
#top #ipuin-funtzionatzen { background: #fcf2dc url({{img:nola-funtzionatzen-du-imagen-fondo-p}}) center / cover no-repeat; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__interior { position: relative; max-width: 1440px; margin: 0 auto; min-height: 229px; padding: 14px 20px 30px; box-sizing: border-box; text-align: center; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__titulo { color: #032c52; font-size: clamp(24px, 2.15vw, 31px); }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__subtitulo { margin-top: 8px; color: #032c52; font-size: 15px; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__cartel { position: absolute; top: 96px; width: 11%; max-width: 162px; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__cartel--izq { left: 3.9%; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__cartel--der { right: 2%; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__pasos { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 22px; text-align: left; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__paso { display: flex; align-items: center; gap: 14px; max-width: 280px; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__paso img { width: 60px; flex: none; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__paso h3 { color: #032c52; font-size: 21px; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__paso p { margin-top: 4px; color: #032c52; font-size: 17px; line-height: 1.25; }
#top #ipuin-funtzionatzen .ipuin-funtzionatzen__separador { width: 1px; height: 77px; background: #cb7434; flex: none; }

/* Pie */
#top #ipuin-pie { background: #021a3c; padding: 0; }
#top #ipuin-pie .ipuin-pie__interior { position: relative; max-width: 1440px; min-height: 86px; padding: 7px 7%; box-sizing: border-box; flex-wrap: nowrap; }
#top #ipuin-pie .ipuin-pie__logo { width: 225px; flex: none; position: relative; z-index: 1; }
#top #ipuin-pie .ipuin-pie__linea { position: absolute; left: 25.4%; top: 18px; width: 42%; opacity: .9; z-index: 0; }
#top #ipuin-pie .ipuin-pie__nav { position: relative; z-index: 1; gap: 8px 0; }
#top #ipuin-pie .ipuin-pie__nav li + li::before { content: "|"; margin: 0 12px; color: #fefefb; }
#top #ipuin-pie .ipuin-pie__nav li { display: flex; }
#top #ipuin-pie .ipuin-pie__nav a { font-size: 14px; color: #fefefb; }
#top #ipuin-pie .ipuin-pie__estrellas { width: 56px; flex: none; position: relative; z-index: 1; }

@media only screen and (max-width: 767px) {
  #top #ipuin-hero .ipuin-hero__interior { padding: 40px 20px 40px; min-height: 0; }
  #top #ipuin-hero .ipuin-hero__boton { min-width: 0; display: block; }
  #top #ipuin-bideoa .ipuin-bideoa__interior { grid-template-columns: 1fr; padding: 30px 20px; gap: 24px; }
  #top #ipuin-bideoa .ipuin-bideoa__deko { display: none; }
  #top #ipuin-bideoa .ipuin-bideoa__fila { gap: 16px; }
  #top #ipuin-atlas .ipuin-atlas__interior { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 24px 20px; }
  #top #ipuin-atlas .ipuin-atlas__titulo, #top #ipuin-atlas .ipuin-atlas__subtitulo, #top #ipuin-atlas .ipuin-atlas__marca, #top #ipuin-atlas .ipuin-atlas__cartel { position: static; }
  #top #ipuin-atlas .ipuin-atlas__titulo, #top #ipuin-atlas .ipuin-atlas__subtitulo, #top #ipuin-atlas .ipuin-atlas__cartel { width: 100%; }
  #top #ipuin-atlas .ipuin-atlas__marca { font-size: 14px; }
  #top #ipuin-atlas .ipuin-atlas__cartel { font-size: 15px; }
  #top #ipuin-nabarmenduak .ipuin-nabarmenduak__rejilla { grid-template-columns: 1fr; gap: 28px; }
  #top #ipuin-nabarmenduak .ipuin-nabarmenduak__interior { padding: 24px 20px 32px; }
  #top #ipuin-publikoak .ipuin-publikoak__interior { grid-template-columns: 1fr; padding: 20px; }
  #top #ipuin-publikoak .ipuin-publikoak__tarjeta { flex-direction: column; padding: 20px 16px; }
  #top #ipuin-publikoak .ipuin-publikoak__figura { width: 50%; }
  #top #ipuin-funtzionatzen .ipuin-funtzionatzen__cartel { display: none; }
  #top #ipuin-funtzionatzen .ipuin-funtzionatzen__pasos { flex-direction: column; align-items: flex-start; gap: 20px; }
  #top #ipuin-funtzionatzen .ipuin-funtzionatzen__separador { display: none; }
  #top #ipuin-pie .ipuin-pie__interior { flex-direction: column; padding: 24px 20px; }
  #top #ipuin-pie .ipuin-pie__linea { display: none; }
  #top #ipuin-pie .ipuin-pie__nav li + li::before { margin: 0 8px; }
}