/* CSS de /imas — copia del entregable
   (site/CodigoWeb/ar/site/servicios/imas/section.css, compilado del SCSS), re-copiado
   el 2026-09-10: nuestra copia era de una versión anterior y el diseñador había
   cambiado varios tamaños (el título de "¿Qué hace la diferencia?" y, sobre todo, los
   títulos del acordeón en mobile, que acá medían el doble). De acá para abajo, hasta el
   corte marcado, va el entregable TAL CUAL. Nuestros ajustes van después. */
@charset "UTF-8";
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 1100px) {
  .pageWidth {
    padding: 0 10px;
  }
}
/* HERO =============================================================== */
#hero {
  font-size: clamp(1rem, 4vw, 3rem);
  padding: calc(1.45em + 89px) 0.625em 1.65em 0.625em;
  background-color: #003075;
  color: #fff;
  font-family: "Poppins", sans-serif;
}
#hero .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 0.5em;
}
#hero .title picture,
#hero .title .auditorio {
  display: flex;
  width: 100%;
  max-width: 11em;
}
#hero .title h1 img {
  flex: 1;
  width: 3.18em;
}
#hero h2 {
  font-weight: 600;
  line-height: 1em;
  font-size: 1.79em;
  margin-bottom: 0.27em;
}
#hero h2 span {
  color: #3986ff;
}
#hero h2 br.mobile {
  display: none;
}
#hero p {
  font-weight: 500;
  line-height: 1.3em;
  font-size: 0.42em;
  margin-bottom: 1.8em;
}
#hero p span {
  color: #3986ff;
}
#hero .cta {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
#hero .cta a {
  font-size: 0.43em;
  font-weight: 500;
  color: #fff;
  border: 1px solid #fff;
  padding: 0.3em 1em;
  border-radius: 2em;
  transition: background-color 0.2s, color 0.2s;
}
#hero .cta a.primary {
  background-color: #fff;
  color: #002149;
}
#hero .cta a.primary:hover {
  background-color: #3985ff;
  border: 1px solid #3985ff;
  color: #fff;
}
#hero .cta a.secondary:hover {
  color: #003075;
  background-color: #fff;
}

@media screen and (max-width: 800px) {
  #hero {
    padding-top: 2.5em;
  }
}
@media screen and (max-width: 600px) {
  #hero .pageWidth {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #hero .title {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    margin-bottom: 2em;
    width: 100%;
    max-width: 410px;
  }
  #hero .title picture,
  #hero .title .auditorio {
    max-width: 16.9em;
  }
  #hero .title h1 img {
    margin-top: -1.2em;
    width: 6.1em;
  }
  #hero h2 {
    width: 100%;
    max-width: 410px;
  }
  #hero h2 br.desktop {
    display: none;
  }
  #hero h2 br.mobile {
    display: initial;
  }
  #hero p {
    font-size: 0.8em;
    width: 100%;
    max-width: 410px;
  }
  #hero p br {
    display: none;
  }
  #hero .cta {
    width: 100%;
    max-width: 410px;
  }
  #hero .cta a {
    font-size: 0.8em;
  }
}
/* GUARDA =============================================================== */
#guarda {
  font-size: clamp(1rem, 4.25vw, 3rem);
  height: 5.43em;
  background-color: #003075;
  background-image: url(guarda.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

/* SLIDER =============================================================== */
#slider {
  font-size: clamp(1rem, 4.25vw, 3rem);
  background-color: #003075;
  padding: 0 !important;
  margin: 0 !important;
}
#slider li {
  height: 5.43em !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}
#slider li img {
  font-size: clamp(1rem, 4.25vw, 3rem);
  display: flex;
  height: 5.43em !important;
  max-width: initial;
}

.bx-wrapper,
.bx-viewport {
  font-size: clamp(1rem, 4.25vw, 3rem);
  height: 5.43em !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ACERCA =============================================================== */
#about {
  font-size: clamp(1rem, 4.25vw, 3rem);
  padding: 2.5em 0.625em 3.75em 0.625em;
  background-color: #002149;
  color: #fff;
  font-family: "Poppins", sans-serif;
}
#about .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6em;
}
#about .title h2 {
  font-size: 0.95em;
  font-weight: 600;
}
#about .title img {
  width: 3.45em;
  margin-bottom: 0.25em;
}
#about ul {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin-bottom: 1em;
}
#about ul li {
  border: 2px solid #3986ff;
  border-radius: 0.5em;
  transition: background-color 0.2s;
}
#about ul li:hover {
  background-color: #04102d;
}
#about ul li a {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 0.3em;
}
#about ul li a .titulo {
  display: flex;
  gap: 0.3em;
}
#about ul li a .titulo h3 {
  color: #3986ff;
  font-weight: 600;
  font-size: 0.77em;
  transition: all 0.2s;
}
#about ul li a .titulo img {
  width: 1em;
  opacity: 1;
  transition: opacity 0.2s;
}
#about ul li a .more,
#about ul li a .less {
  width: 1em;
}
#about ul li a .more {
  display: block;
}
#about ul li a .less {
  display: none;
}
#about ul li .contenido {
  display: flex;
  padding: 0.6em 0.9em 1.2em 0.9em;
}
#about ul li .contenido img {
  width: 1.6em;
}
#about ul li .contenido p {
  font-size: 0.5em;
  line-height: 1em;
  font-weight: 500;
}
#about ul li .contenido div:not(:last-child) {
  border-right: 1px solid #205cb3;
  padding-right: 1.2em;
  margin-right: 1.2em;
}
#about ul li.expanded {
  background-color: #3986ff;
}
#about ul li.expanded a .titulo h3 {
  color: #fff;
  margin-left: -1em;
}
#about ul li.expanded a .titulo img {
  opacity: 0;
}
#about ul li.expanded a .more {
  display: none;
}
#about ul li.expanded a .less {
  display: block;
}
#about .servicio {
  background-color: #0f2c5f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.17em 0.17em 0.17em 0.5em;
  border-radius: 2em;
}
#about .servicio h3 {
  font-size: 0.6em;
  font-weight: 600;
  margin-bottom: 0.1em;
}
#about .servicio a {
  font-size: 0.5em;
  font-weight: 500;
  color: #fff;
  padding: 0.3em 1em;
  border-radius: 2em;
  background-color: #0049a0;
  transition: background-color 0.2s;
}
#about .servicio a:hover {
  background-color: #3985ff;
}

@media screen and (max-width: 600px) {
  #about .pageWidth {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #about .pageWidth .title {
    width: 100%;
    max-width: 410px;
    font-size: 1.25em;
  }
  #about .pageWidth ul {
    width: 100%;
    max-width: 410px;
  }
  #about .pageWidth ul li a .titulo {
    align-items: center;
  }
  #about .pageWidth ul li a .titulo h3 {
    font-size: 0.7em;
  }
  #about .pageWidth ul li a .titulo img {
    width: 1.4em;
  }
  #about .pageWidth ul li a .more,
  #about .pageWidth ul li a .less {
    width: 1.4em;
  }
  #about .pageWidth ul li.expanded a .titulo h3 {
    margin-left: -1em;
  }
  #about .pageWidth ul li .contenido {
    flex-direction: column;
    padding-top: 0.2em;
    padding-bottom: 0.6em;
    font-size: 1.6em;
  }
  #about .pageWidth ul li .contenido > div {
    display: flex;
    gap: 0.5em;
    align-items: center;
  }
  #about .pageWidth ul li .contenido > div p br {
    display: none;
  }
  #about .pageWidth ul li .contenido > div:not(:last-child) {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    border-bottom: 1px solid #205cb3;
    padding-bottom: 0.2em;
    margin-bottom: 0.2em;
  }
  #about .pageWidth .servicio {
    width: 100%;
    max-width: 410px;
    font-size: 1.2em;
  }
}
@media screen and (max-width: 450px) {
  #about .pageWidth .servicio {
    font-size: 1.5em;
  }
}
/* Control del acordión */
.accordionWrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows ease-in-out 300ms;
}

.accordionWrapper > div {
  overflow: hidden;
}

.expanded .accordionWrapper {
  grid-template-rows: 1fr;
}

/* QUE INCLUYE =============================================================== */
#incluye {
  font-size: clamp(1rem, 4vw, 3rem);
  padding: 2.5em 0.625em 2.5em 0.625em;
  font-family: "Poppins", sans-serif;
}
#incluye h2 {
  font-size: 0.98em;
  color: #3986ff;
  font-weight: 600;
  margin-bottom: 0.6em;
}
#incluye .areas {
  display: flex;
  align-items: stretch;
  gap: 0.47em;
}
#incluye .areas .seleccion {
  width: 9.1em;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}
#incluye .areas .seleccion li {
  border: 1px solid #cdcfd3;
  border-radius: 0.27em;
}
#incluye .areas .seleccion li a {
  display: flex;
  align-items: center;
  padding: 0.3em 0.3em;
  gap: 0.3em;
}
#incluye .areas .seleccion li a span {
  font-size: 0.45em;
  font-weight: 500;
  color: #b1b3b8;
  flex: 1;
}
#incluye .areas .seleccion li a .normal {
  display: block;
}
#incluye .areas .seleccion li a .activo {
  display: none;
}
#incluye .areas .seleccion li.activo {
  background-color: #3986ff;
  border: 1px solid #3986ff;
}
#incluye .areas .seleccion li.activo a span {
  color: #fff;
}
#incluye .areas .seleccion li.activo a .normal {
  display: none;
}
#incluye .areas .seleccion li.activo a .activo {
  display: block;
}
#incluye .areas .tarjetas {
  width: 13.4em;
}
#incluye .areas .tarjetas .tarjeta {
  background-color: #f4f8ff;
  padding: 1.2em 1.08em;
  border-radius: 0.9em;
  min-height: 100%;
}
#incluye .areas .tarjetas .tarjeta h3 {
  color: #3986ff;
  line-height: 1.1em;
  font-size: 0.95em;
  font-weight: 600;
  margin-bottom: 0.6em;
}
#incluye .areas .tarjetas .tarjeta p.principal {
  line-height: 1.1em;
  font-size: 0.56em;
  font-weight: 600;
  color: #003075;
  margin-bottom: 0.9em;
}
#incluye .areas .tarjetas .tarjeta p.secundario {
  line-height: 1.4em;
  font-size: 0.4em;
  font-weight: 500;
  margin-bottom: 2.1em;
  color: #003075;
}
#incluye .areas .tarjetas .tarjeta p.nota {
  font-size: 0.37em;
  color: #003075;
  line-height: 1.25em;
  font-weight: 500;
}
#incluye .areas .tarjetas .tarjeta div {
  display: flex;
  flex-direction: column;
}
#incluye .areas .tarjetas .tarjeta:not(:first-child) {
  display: none;
}
#incluye .areas .tarjetas .tarjeta ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.25em;
  position: relative;
}
#incluye .areas .tarjetas .tarjeta ul li:not(:last-child) {
  padding-bottom: 0.4em;
  margin-bottom: 0.4em;
  border-bottom: 1px solid #c1daf8;
}
#incluye .areas .tarjetas .tarjeta ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0.4em;
  height: calc(100% - 0.4em);
  width: 1px;
  border-left: 1px solid #c1daf8;
}
#incluye .areas .tarjetas .tarjeta ul li img {
  width: 0.8em;
}
#incluye .areas .tarjetas .tarjeta ul li span {
  font-size: 0.5em;
  font-weight: 500;
  color: #3986ff;
}
#incluye .areas img {
  width: 0.8em;
}

@media screen and (max-width: 600px) {
  #incluye h2 {
    font-size: 1.5em;
    width: 100%;
    max-width: 410px;
    margin: 0 auto 0.7em auto;
  }
  #incluye .areas {
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.6em;
  }
  #incluye .areas .seleccion {
    flex-direction: row;
    justify-content: center;
    max-width: 410px;
    gap: 0.5em;
  }
  #incluye .areas .seleccion li {
    font-size: 4em;
  }
  #incluye .areas .seleccion li a {
    padding: 0.1em;
    width: 0.5em;
    overflow: hidden;
  }
  #incluye .areas .seleccion li span {
    display: none;
  }
  #incluye .areas .tarjetas {
    font-size: 1.5em;
    width: 100%;
    max-width: 410px;
  }
  #incluye .areas .tarjetas .tarjeta {
    min-height: 13em;
  }
}
@media screen and (max-width: 450px) {
  #incluye h2 {
    font-size: 1.8em;
  }
  #incluye .areas {
    gap: 1em;
  }
  #incluye .areas .seleccion li {
    font-size: 4.8em;
  }
  #incluye .areas .tarjetas {
    font-size: 1.6em;
  }
  #incluye .areas .tarjetas .tarjeta {
    min-height: 300px;
  }
}
/* ¿CÓMO FUNCIONA? ============================================================= */
#funcionamiento {
  font-size: clamp(1rem, 4vw, 3rem);
  padding: 0 0.625em 3.8em 0.625em;
  font-family: "Poppins", sans-serif;
}
#funcionamiento h2 {
  font-size: 0.98em;
  color: #3986ff;
  font-weight: 600;
  margin-bottom: 2em;
  text-align: center;
}
#funcionamiento img {
  display: flex;
  margin-bottom: 0.75em;
}
#funcionamiento ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8em;
  position: relative;
}
#funcionamiento ul li {
  position: relative;
}
#funcionamiento ul li h3 {
  font-size: 0.5em;
  line-height: 1.1em;
  color: #3986ff;
  font-weight: 600;
  margin-bottom: 1.5em;
}
#funcionamiento ul li p {
  font-size: 0.39em;
  line-height: 1.2em;
}
#funcionamiento ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -0.9em;
  border-right: 1px solid #c2cdde;
}

@media screen and (max-width: 600px) {
  #funcionamiento .pageWidth {
    width: 100%;
    max-width: 410px;
  }
  #funcionamiento .pageWidth h2 {
    text-align: left;
    font-size: 1.3em;
    margin-bottom: 1em;
  }
  #funcionamiento .pageWidth .wrapper {
    display: flex;
    gap: 1em;
  }
  #funcionamiento .pageWidth .wrapper img {
    width: 11em;
  }
  #funcionamiento .pageWidth .wrapper ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #funcionamiento .pageWidth .wrapper ul li::after {
    content: none;
  }
  #funcionamiento .pageWidth .wrapper ul li h3 {
    font-size: 1em;
    line-height: 1em;
    margin-bottom: 0.5em;
  }
  #funcionamiento .pageWidth .wrapper ul li p {
    font-size: 0.6em;
  }
}
@media screen and (max-width: 450px) {
  #funcionamiento .pageWidth h2 {
    text-align: left;
    font-size: 1.7em;
    margin-bottom: 1em;
  }
  #funcionamiento .pageWidth .wrapper {
    display: flex;
    gap: 1em;
  }
  #funcionamiento .pageWidth .wrapper img {
    width: 13.5em;
    min-width: 110px;
  }
  #funcionamiento .pageWidth .wrapper ul li {
    font-size: 1.4em;
  }
  #funcionamiento .pageWidth .wrapper ul li h3 {
    line-height: 1em;
    margin-bottom: 0.5em;
  }
  #funcionamiento .pageWidth .wrapper ul li p {
    font-size: 0.6em;
  }
}
/* SERVICIO =============================================================== */
#servicio {
  font-size: clamp(1rem, 4.25vw, 3rem);
  padding: 1.1em 0 1.5em 0;
  background-color: #3985ff;
}
#servicio .wrapper {
  display: flex;
  justify-content: center;
}
#servicio .wrapper h2 {
  display: flex;
  align-items: flex-end;
  font-size: 1em;
}
#servicio .wrapper h2 img {
  width: 8.5em;
  display: flex;
  margin-bottom: 0.1em;
}
#servicio .wrapper h2 span {
  font-size: 0.95em;
  line-height: 1em;
  color: #003075;
}
#servicio .wrapper h2 span i {
  font-style: italic;
}

@media screen and (max-width: 600px) {
  #servicio .wrapper h2 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7em;
  }
  #servicio .wrapper h2 img {
    width: 10em;
  }
}
/* CONTACTO =============================================================== */
#contacto {
  font-size: clamp(1rem, 4vw, 3rem);
  padding: 3.4em 0.625em 2.8em 0.625em;
  background-color: #003075;
}
#contacto .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.2em;
  margin-bottom: 1.9em;
}
#contacto .wrapper h2 {
  color: #fff;
  font-size: 0.9em;
  line-height: 1em;
}
#contacto .wrapper h2 span {
  color: #3986ff;
}
#contacto .wrapper .cta {
  font-size: 0.5em;
  font-weight: 600;
  color: #fff;
  padding: 0.3em 1em;
  border-radius: 2em;
  background-color: #0049a0;
  transition: background-color 0.2s;
  white-space: nowrap;
}
#contacto .wrapper .cta:hover {
  background-color: #3985ff;
}

@media screen and (max-width: 600px) {
  #contacto .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
    margin-bottom: 2em;
  }
  #contacto .wrapper h2 {
    font-size: 1.8em;
  }
  #contacto .wrapper .cta {
    font-size: 1.05em;
  }
}
@media screen and (max-width: 450px) {
  #contacto .wrapper {
    margin-bottom: 4em;
  }
  #contacto .wrapper h2 {
    font-size: 2em;
  }
  #contacto .wrapper .formWrapper {
    font-size: 2.8em;
  }
}
/* PREGUNTAS FRECUENTES =============================================================== */
#faq {
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(1rem, 4.25vw, 3rem);
  padding: 3.4em 0 2.8em 0;
  color: #012875;
}
#faq .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85em;
}
#faq .wrapper ul {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  flex: 1;
}
#faq .wrapper ul li {
  background-color: #f6f6f6;
  padding: 0.7em 0.5em;
  border-radius: 0.54em;
  transition: background-color 0.2s;
}
#faq .wrapper ul li .question {
  color: #012875;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#faq .wrapper ul li .question h3 {
  font-size: 0.5em;
  font-weight: 500;
}
#faq .wrapper ul li .question i {
  transform: rotate(90deg);
  font-size: 0.7em;
}
#faq .wrapper ul li .contenido {
  margin-top: 0.5em;
}
#faq .wrapper ul li .contenido p {
  font-size: 0.39em;
  line-height: 1.3em;
}
#faq .wrapper ul li:hover {
  background-color: #e8e8e8;
}
#faq .wrapper ul li.expanded .question i {
  transform: rotate(270deg);
}
#faq .wrapper .title {
  max-width: 11em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#faq .wrapper .title h2 {
  font-size: 0.93em;
  line-height: 1em;
  font-weight: 600;
  color: #012875;
  margin-bottom: 0.6em;
}
#faq .wrapper .title .mano {
  max-width: 90%;
}

@media screen and (max-width: 680px) {
  #faq {
    padding: calc(var(--paddingMedium) * 1.1) 30px;
  }
  #faq .wrapper .mano {
    display: none;
  }
}
/* Control del acordión */
.accordionWrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows ease-in-out 300ms;
}

.accordionWrapper > div {
  overflow: hidden;
}

.expanded .accordionWrapper {
  grid-template-rows: 1fr;
}/*# sourceMappingURL=section.css.map */

/* ══════════════════════════════════════════════════════════════════════════════
   DE ACÁ PARA ABAJO, AJUSTES NUESTROS (no están en el entregable).
   ══════════════════════════════════════════════════════════════════════════════ */
/* CTA del cierre: el entregable nuevo (imas/index.php de `site`, 2026-08-28)
   cambió el formulario de #contacto por un botón que lleva a /contacto. Estas
   reglas están copiadas tal cual del section.css del entregable; el resto del
   bloque #contacto (los estilos del formulario) se deja por si vuelve.
   Con el formulario, el wrapper era una grilla de 2 columnas y el título medía
   1.4em; ahora el entregable lo pone en flex con el botón a la derecha y baja el
   título a .9em. */
#contacto .wrapper{display:flex;align-items:center;justify-content:space-between;grid-template-columns:none}
/* El .9em es la medida de ESCRITORIO del entregable; en el teléfono su hoja usa
   1.8em (2em abajo de 450) y esta línea, que va después, se lo comía: el título
   del cierre quedaba en 14px. */
@media screen and (min-width: 601px) {
  #contacto .wrapper h2 { font-size: 0.9em; }
}
@media screen and (max-width:600px){#contacto .wrapper{align-items:flex-start}}
#contacto .wrapper .cta{font-size:.5em;font-weight:600;color:#fff;padding:.3em 1em;border-radius:2em;background-color:#0049a0;transition:background-color .2s;white-space:nowrap}
#contacto .wrapper .cta:hover{background-color:#3985ff}
@media screen and (max-width:600px){#contacto .wrapper .cta{font-size:1.05em}}

/* ── Hero y cierre más compactos (pedido del 2026-09-08) ──────────────────────
   En pantallas bajas (1366×768 y parecidas) los CTA del hero quedaban abajo del
   pliegue: había que scrollear para verlos. El hero está armado todo en `em`
   sobre su propio font-size, así que alcanza con bajarle la base y apretar los
   espacios. Además del tope por ancho (3.4vw) se le pone uno por ALTO de
   viewport (5.6vh): en una pantalla baja encoge un poco más, en una alta no.
   El bloque de cierre (#contacto, "Unite a la comunidad…") baja en la MISMA
   proporción para que no quede desbalanceado con el resto de la página. */
#hero {
  font-size: clamp(1rem, min(3.4vw, 5.6vh), 2.55rem);
}
#hero {
  padding-top: calc(1.1em + 89px);
  padding-bottom: 1.35em;
}
#hero p {
  margin-bottom: 1.35em;
}
@media screen and (min-width: 801px) {
  #contacto {
    padding-top: 2.9em;
    padding-bottom: 2.4em;
  }
}

/* Del CIERRE de la página, TODO lo de abajo es SÓLO para ESCRITORIO (801+).
   En el teléfono y en la tablet el bloque va con las medidas del entregable: con
   estos overrides el cuerpo caía a la mitad (1.95vw contra 4.25vw) y el cierre se
   veía diminuto (pedido del 2026-09-09). El corte va en 801 —y no en 641— porque
   es donde el entregable pasa el CTA al costado del título: cortando antes, entre
   641 y 800 el cierre quedaba en 182px contra los 488 de 640, un salto feo. */
@media screen and (min-width: 801px) {
  /* El CIERRE de la página (la franja azul del logo + "Unite a la comunidad…") va MUY
     compacto (pedido del 2026-09-08): es un cierre, no una sección de contenido. Entre las
     dos secciones medía 786px de alto; ahora ronda los 330, que es lo que mide el cierre de
     /impacto. Se les baja la base a las dos juntas —para que no se desbalanceen entre sí—,
     se aprietan los paddings y la guarda de personas deja de ocupar todo el ancho. */
  #servicio {
    font-size: clamp(0.55rem, 1.95vw, 1.375rem);
    padding: 1em 0 1.2em;
  }
  #contacto {
    font-size: clamp(0.6rem, min(2vw, 3.3vh), 1.5rem);
    padding-top: 1.6em;
    padding-bottom: 1.4em;
  }
  #contacto .wrapper { margin-bottom: 1.1em; }
  /* El CTA acompaña al de /impacto (17px). */
  #contacto .wrapper .cta { font-size: 0.7em; }
  /* La guarda de personas ocupaba los 1100px del contenido y se comía 143px de alto. */
  #contacto .pageWidth > img { width: 62%; display: block; }
  /* El texto de la franja del logo arranca en la MISMA guía que "Unite a la comunidad…"
     (el borde izquierdo del contenido): venía centrado y los dos comienzos no coincidían. */
  #servicio .wrapper { justify-content: flex-start; }
  /* El CTA, un poco más grande y centrado en el alto del bloque (antes quedaba arriba,
     a la altura del título, con la guarda de personas debajo). Sale del flujo, así que
     solo en desktop: abajo de 800px el bloque se apila. */
  @media screen and (min-width: 801px) {
    #contacto .pageWidth { position: relative; }
    #contacto .wrapper .cta {
      font-size: 0.8em;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

/* ── Mobile más compacto (pedido del 2026-09-08) ──────────────────────────────
   En el teléfono las secciones tenían el mismo aire que en desktop y la página
   quedaba larguísima de scrollear. Se recortan los paddings verticales ~35%. */
@media screen and (max-width: 640px) {
  #about { padding-top: 1.6em; padding-bottom: 2.2em; }
  #sesiones { padding-top: 1.2em; padding-bottom: 0.8em; }
  #incluye { padding-top: 1.4em; padding-bottom: 1.4em; }
  #funcionamiento { padding-bottom: 2.1em; }
  #hero { padding-bottom: 0.8em; }
}

/* Teléfonos chicos (320px): los pasos de "¿Cómo funciona?" arrancan a 146px del borde
   (la columna del círculo) y el título del paso empujaba la columna 7px fuera de la
   pantalla. Con un cuerpo más chico y corte de palabra, entra. */
@media screen and (max-width: 400px) {
  #funcionamiento .wrapper ul li h3 { font-size: 18px; overflow-wrap: anywhere; }
}

/* Tablet y escritorio: mismo criterio que en mobile. Las bandas vacías más grandes
   estaban acá: 180px abajo de "Un poco sobre", 182 abajo de "¿Cómo funciona?" y 120
   arriba y abajo de "¿Qué incluye?". Se recortan ~35%; el hero y el cierre ya se
   habían ajustado antes. */
@media screen and (min-width: 641px) {
  #about { padding-top: 1.7em; padding-bottom: 2.4em; }
  #sesiones { padding-top: 1.7em; padding-bottom: 1.2em; }
  #incluye { padding-top: 1.7em; padding-bottom: 1.7em; }
  #funcionamiento { padding-bottom: 2.5em; }
}

/* ── Aire abajo de los CTA del hero (pedido del 2026-09-10) ───────────────────
   Entre el borde de abajo de los botones y la franja de íconos quedaban 13px: la
   franja arrancaba pegada y ya se leía el título de la sección siguiente. */
@media screen and (max-width: 640px) {
  #hero { padding-bottom: 3.2em; }
}

/* ── Logo del header en blanco, SÓLO en esta página y SÓLO en teléfono ─────────
   (pedido del 2026-09-10, corregido el 2026-09-11)
   En el teléfono el header flota directo sobre el hero azul oscuro y el logo negro
   casi no se lee, así que va en blanco. En escritorio NO: ahí la toolbar es una
   píldora blanca y el logo blanco desaparecía sobre ella. La regla vive acá, en el
   CSS que carga únicamente /imas, así que no toca al resto del sitio. */
header .mobileHeader .mobileMenuContainer .logoWrapper .logo.black {
  background-image: url(/assets/home2026/styles/images/logo_finnegans_white.svg);
}