/*
 * Banda (components/Banda.astro), con el lenguaje de la portada: banda azul con los hexágonos del hero y el
 * título en dos renglones; debajo, una tarjeta que se monta sobre la banda y, al lado, tarjetas de ayuda.
 * La usan Contacto, las páginas de error, Normatividad y el Directorio.
 */

/* Banda */
.banda {
  position: relative;
  overflow: hidden;
  padding: 48px 0 112px;
  background-color: var(--color-azul);
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%20560'%3e%3c!--%20Parche%20de%20hexágonos%20del%20hero%20(derecha).%20Generado%20con%20herramientas/hexagonos-hero.py.%20--%3e%3cpath%20d='M163.9%2031.8L188.3%2045.9L188.3%2074.1L163.9%2088.2L139.5%2074.1L139.5%2045.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M215.9%2031.8L240.3%2045.9L240.3%2074.1L215.9%2088.2L191.5%2074.1L191.5%2045.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M267.8%2031.8L292.3%2045.9L292.3%2074.1L267.8%2088.2L243.4%2074.1L243.4%2045.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M137.9%2076.8L162.4%2090.9L162.4%20119.1L137.9%20133.2L113.5%20119.1L113.5%2090.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M189.9%2076.8L214.3%2090.9L214.3%20119.1L189.9%20133.2L165.5%20119.1L165.5%2090.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M241.9%2076.8L266.3%2090.9L266.3%20119.1L241.9%20133.2L217.4%20119.1L217.4%2090.9Z'%20fill='none'%20stroke='%23d4a806'%20stroke-opacity='.8'%20stroke-width='1.2'/%3e%3cpath%20d='M293.8%2076.8L318.2%2090.9L318.2%20119.1L293.8%20133.2L269.4%20119.1L269.4%2090.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M163.9%20121.8L188.3%20135.9L188.3%20164.1L163.9%20178.2L139.5%20164.1L139.5%20135.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M215.9%20121.8L240.3%20135.9L240.3%20164.1L215.9%20178.2L191.5%20164.1L191.5%20135.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M267.8%20121.8L292.3%20135.9L292.3%20164.1L267.8%20178.2L243.4%20164.1L243.4%20135.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M241.9%20166.8L266.3%20180.9L266.3%20209.1L241.9%20223.2L217.4%20209.1L217.4%20180.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M293.8%20166.8L318.2%20180.9L318.2%20209.1L293.8%20223.2L269.4%20209.1L269.4%20180.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M60.0%2047.5L79.5%2058.8L79.5%2081.2L60.0%2092.5L40.5%2081.2L40.5%2058.8Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M40.0%20276.0L60.8%20288.0L60.8%20312.0L40.0%20324.0L19.2%20312.0L19.2%20288.0Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M120.0%20399.0L138.2%20409.5L138.2%20430.5L120.0%20441.0L101.8%20430.5L101.8%20409.5Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M230.0%20447.5L249.5%20458.8L249.5%20481.2L230.0%20492.5L210.5%20481.2L210.5%20458.8Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%20560'%3e%3c!--%20Parche%20de%20hexágonos%20del%20hero%20(izquierda).%20Generado%20con%20herramientas/hexagonos-hero.py.%20--%3e%3cpath%20d='M40.0%20221.8L64.4%20235.9L64.4%20264.1L40.0%20278.2L15.6%20264.1L15.6%20235.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M92.0%20221.8L116.4%20235.9L116.4%20264.1L92.0%20278.2L67.5%20264.1L67.5%20235.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M143.9%20221.8L168.3%20235.9L168.3%20264.1L143.9%20278.2L119.5%20264.1L119.5%20235.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M14.0%20266.8L38.4%20280.9L38.4%20309.1L14.0%20323.2L-10.4%20309.1L-10.4%20280.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M66.0%20266.8L90.4%20280.9L90.4%20309.1L66.0%20323.2L41.6%20309.1L41.6%20280.9Z'%20fill='none'%20stroke='%23d4a806'%20stroke-opacity='.8'%20stroke-width='1.2'/%3e%3cpath%20d='M117.9%20266.8L142.4%20280.9L142.4%20309.1L117.9%20323.2L93.5%20309.1L93.5%20280.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M169.9%20266.8L194.3%20280.9L194.3%20309.1L169.9%20323.2L145.5%20309.1L145.5%20280.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M40.0%20311.8L64.4%20325.9L64.4%20354.1L40.0%20368.2L15.6%20354.1L15.6%20325.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M92.0%20311.8L116.4%20325.9L116.4%20354.1L92.0%20368.2L67.5%20354.1L67.5%20325.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M143.9%20311.8L168.3%20325.9L168.3%20354.1L143.9%20368.2L119.5%20354.1L119.5%20325.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M14.0%20356.8L38.4%20370.9L38.4%20399.1L14.0%20413.2L-10.4%20399.1L-10.4%20370.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M66.0%20356.8L90.4%20370.9L90.4%20399.1L66.0%20413.2L41.6%20399.1L41.6%20370.9Z'%20fill='none'%20stroke='%23d4a806'%20stroke-opacity='.8'%20stroke-width='1.2'/%3e%3cpath%20d='M117.9%20356.8L142.4%20370.9L142.4%20399.1L117.9%20413.2L93.5%20399.1L93.5%20370.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M40.0%20401.8L64.4%20415.9L64.4%20444.1L40.0%20458.2L15.6%20444.1L15.6%20415.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M250.0%20426.0L270.8%20438.0L270.8%20462.0L250.0%20474.0L229.2%20462.0L229.2%20438.0Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M300.0%20149.0L318.2%20159.5L318.2%20180.5L300.0%20191.0L281.8%20180.5L281.8%20159.5Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M215.0%20287.5L234.5%20298.8L234.5%20321.2L215.0%20332.5L195.5%20321.2L195.5%20298.8Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position:
    right 4% top 24px,
    left -48px bottom -150px;
  background-size:
    auto 280px,
    auto 340px;
}

.banda-interior {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.banda-titulo {
  margin: 0;
  font-size: 32px;
  line-height: 35px;
}

/* legado-1.css limita el fondo dorado a un porcentaje del ancho en cada corte (15 % a 65 %), pensado para
   títulos en columnas: en la banda el ancho es el del texto. */
.banda-titulo .div-title-section {
  max-width: none;
}

.banda-intro {
  max-width: 640px;
  margin: 20px 0 0;
  color: var(--color-blanco);
  font-family: "Work Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

/* Cuerpo: tarjeta principal y columna de ayuda */
.banda-cuerpo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
  max-width: 1180px;
  margin: -72px auto 56px;
  padding: 0 24px;
}

.banda-tarjeta {
  padding: 36px 40px 32px;
  border-radius: var(--radio);
  background-color: var(--color-blanco);
  box-shadow: 0 6px 24px rgb(21 26 81 / 14%);
}

.banda-tarjeta-titulo {
  margin: 0 0 4px;
  color: var(--color-azul);
  font-family: "Work Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

.banda-nota {
  margin: 0 0 24px;
  color: #626262;
  font-size: 14px;
}

/* Buscador dentro de la tarjeta (páginas de error y Normatividad). */
.banda-buscador {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.banda-buscador-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.banda-buscador input[type="search"] {
  flex: 1 1 240px;
  box-sizing: border-box;
  height: 50px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #cfd5e3;
  border-radius: var(--radio);
  color: var(--color-azul);
  background-color: #f7f8fb;
  font-size: 16px;
  appearance: none;
}

.banda-buscador input[type="search"]:focus {
  border-color: var(--color-azul);
  outline: 2px solid var(--color-oro);
  outline-offset: 1px;
}

.banda-buscador button {
  height: 50px;
  margin: 0;
  padding: 0 44px;
  border: 0;
  border-radius: var(--radio);
  color: var(--color-azul);
  background-color: var(--color-oro);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.banda-buscador button:hover,
.banda-buscador button:focus-visible {
  color: var(--color-oro);
  background-color: var(--color-azul);
}

/* Sin columna de ayuda: una sola columna, con lo que vaya bajo la tarjeta. */
.banda-cuerpo-solo {
  grid-template-columns: minmax(0, 1fr);
}

/* Columna de ayuda */
.banda-lado {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.banda-ayuda {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid #e3e6ef;
  border-radius: var(--radio);
  background-color: var(--color-blanco);
}

.banda-ayuda-icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-oro);
  border-radius: 50%;
  color: var(--color-blanco);
  background-color: var(--color-azul);
}

.banda-ayuda-icono svg {
  width: 20px;
  height: 20px;
}

.banda-ayuda h3 {
  margin: 0 0 4px;
  color: var(--color-azul);
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.banda-ayuda p {
  margin: 0;
  color: #4a4f6a;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 1023.98px) {
  .banda {
    padding: 32px 0 96px;
    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%20560'%3e%3c!--%20Parche%20de%20hexágonos%20del%20hero%20(derecha).%20Generado%20con%20herramientas/hexagonos-hero.py.%20--%3e%3cpath%20d='M163.9%2031.8L188.3%2045.9L188.3%2074.1L163.9%2088.2L139.5%2074.1L139.5%2045.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M215.9%2031.8L240.3%2045.9L240.3%2074.1L215.9%2088.2L191.5%2074.1L191.5%2045.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M267.8%2031.8L292.3%2045.9L292.3%2074.1L267.8%2088.2L243.4%2074.1L243.4%2045.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M137.9%2076.8L162.4%2090.9L162.4%20119.1L137.9%20133.2L113.5%20119.1L113.5%2090.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M189.9%2076.8L214.3%2090.9L214.3%20119.1L189.9%20133.2L165.5%20119.1L165.5%2090.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M241.9%2076.8L266.3%2090.9L266.3%20119.1L241.9%20133.2L217.4%20119.1L217.4%2090.9Z'%20fill='none'%20stroke='%23d4a806'%20stroke-opacity='.8'%20stroke-width='1.2'/%3e%3cpath%20d='M293.8%2076.8L318.2%2090.9L318.2%20119.1L293.8%20133.2L269.4%20119.1L269.4%2090.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M163.9%20121.8L188.3%20135.9L188.3%20164.1L163.9%20178.2L139.5%20164.1L139.5%20135.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M215.9%20121.8L240.3%20135.9L240.3%20164.1L215.9%20178.2L191.5%20164.1L191.5%20135.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M267.8%20121.8L292.3%20135.9L292.3%20164.1L267.8%20178.2L243.4%20164.1L243.4%20135.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M241.9%20166.8L266.3%20180.9L266.3%20209.1L241.9%20223.2L217.4%20209.1L217.4%20180.9Z'%20fill='none'%20stroke='white'%20stroke-opacity='.45'%20stroke-width='1.2'/%3e%3cpath%20d='M293.8%20166.8L318.2%20180.9L318.2%20209.1L293.8%20223.2L269.4%20209.1L269.4%20180.9Z'%20fill='white'%20fill-opacity='.16'%20stroke='white'%20stroke-opacity='.5'%20stroke-width='1.2'/%3e%3cpath%20d='M60.0%2047.5L79.5%2058.8L79.5%2081.2L60.0%2092.5L40.5%2081.2L40.5%2058.8Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M40.0%20276.0L60.8%20288.0L60.8%20312.0L40.0%20324.0L19.2%20312.0L19.2%20288.0Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M120.0%20399.0L138.2%20409.5L138.2%20430.5L120.0%20441.0L101.8%20430.5L101.8%20409.5Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3cpath%20d='M230.0%20447.5L249.5%20458.8L249.5%20481.2L230.0%20492.5L210.5%20481.2L210.5%20458.8Z'%20fill='none'%20stroke='white'%20stroke-opacity='.4'%20stroke-width='1.2'%20stroke-dasharray='4%204'/%3e%3c/svg%3e");
    background-size: auto 220px;
  }

  .banda-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .banda-interior {
    padding: 0 16px;
  }

  .banda-titulo {
    font-size: 30px;
    line-height: 33px;
  }

  .banda-intro {
    font-size: 16px;
  }

  .banda-cuerpo {
    margin-bottom: 40px;
    padding: 0 12px;
  }

  .banda-tarjeta {
    padding: 24px 18px;
  }

  .banda-buscador button {
    flex: 1 1 100%;
  }
}