/* ==========================================================================
   WHANAU - CAPA RESPONSIVE PARA LA PÁGINA DE ESCRITORIO
   Archivo propio: Adobe Muse no lo pisa al re-exportar.

   POR QUÉ EXISTE
   El export de Muse maqueta todo a ancho fijo pensando en >= 1180 px. Los
   bloques del cuerpo usan porcentajes y fluyen solos, pero hay tres grupos
   con medidas en píxeles ancladas al centro de la pantalla
   (`margin-left:50%; left:-XXXpx`) que por debajo de ese ancho se salen de
   la pantalla y generan scroll horizontal:

     1. La barra superior  -> 9 elementos `position:fixed` anclados al centro.
     2. SOBRE NOSOTROS     -> collage de 706 px y 499 px con líneas guía.
     3. SOLUCIONES         -> tres tarjetas de 293 px lado a lado.

   Acá esos tres grupos pasan a flex y se apilan. Todo lo demás ya era fluido.

   NOTA: la especificidad tiene que ganarle a los <style> que Muse escribe
   dentro del <head> DESPUÉS de este <link>, así que las reglas del menú van
   por id (#u744 ...) y no por clase (.u744 ...).
   ========================================================================== */


/* ==========================================================================
   1. HASTA 1180 px — donde el menú empieza a cortarse
   ========================================================================== */

@media screen and (max-width: 1180px) {

  /* ---------- 1.0 Los contenedores que pasan a flex ---------------------- */

  /* Casi todos los contenedores de Muse llevan la clase `clearfix`, que
     agrega un `::after` con contenido. En un contenedor flex ese pseudo-
     elemento cuenta como un item más y descoloca la última fila (las
     tarjetas de SOLUCIONES se corrían 11 px). Se anula en cada uno. */
  #u1760::after,
  #u924_align_to_page::after,
  #u2813::after,
  #u2817::after,
  #pu2816::after,
  #pu2814-4::after,
  #pu2818::after,
  #pu2817::after,
  #pu2260::after {
    display: none;
  }

  /* ---------- 1.1 Barra superior: de 9 elementos fijos a una fila flex ---- */

  #u1760-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-left: 0;
    width: 100%;
    max-width: none;
    height: 84px;
  }

  #u1760 {
    position: static;
    left: auto;
    margin-left: 0;
    padding-bottom: 0;
    width: 100%;
    max-width: none;
    height: 84px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 14px;
    display: flex;
    align-items: center;
    gap: clamp(0px, 0.5vw, 10px);
  }

  #u744,
  #u750,
  #u755,
  #u760 {
    position: static;
    top: auto;
    left: auto;
    margin-left: 0;
    width: auto;
    min-height: 0;
    flex: 0 0 auto;
  }

  #u744 .cl-effect-14 a,
  #u750 .cl-effect-14 a,
  #u755 .cl-effect-14 a,
  #u760 .cl-effect-14 a {
    padding: 0 clamp(5px, 1.35vw, 20px);
    font-size: clamp(11px, 1.45vw, 18px);
    letter-spacing: clamp(0px, 0.09vw, 1px);
    white-space: nowrap;
  }

  /* Iconos sociales: pegados al borde derecho, antes del isotipo */
  #u2758-wrapper,
  #u2761-wrapper,
  #u2769-wrapper,
  #u2766-wrapper {
    position: static;
    top: auto;
    left: auto;
    margin-left: 0;
    width: clamp(20px, 2.4vw, 28px);
    max-width: 28px;
    flex: 0 0 auto;
  }

  #u2758-wrapper {
    margin-left: auto;
  }

  #u2758,
  #u2761,
  #u2769,
  #u2766 {
    position: static;
    left: auto;
    margin-left: 0;
    width: 100%;
    max-width: none;
  }

  /* Isotipo a la derecha del todo */
  #u1766-wrapper {
    position: static;
    top: auto;
    left: auto;
    margin-left: clamp(8px, 1.6vw, 22px);
    width: clamp(34px, 3.8vw, 50px);
    max-width: 50px;
    flex: 0 0 auto;
  }

  /* Muse le pone la clase MuseLinkActive al isotipo (su href apunta a esta
     misma página) y esa regla trae margin-left:35px con más especificidad
     que #u1766 a secas: hay que igualarla o el isotipo se sale por derecha. */
  #u1766,
  #u1766.MuseLinkActive {
    position: static;
    left: auto;
    margin-left: 0;
    width: 100%;
    max-width: none;
  }

  /* Lo mismo con el :hover de los iconos, que reescribe el margin entero */
  #u2758:hover,
  #u2761:hover,
  #u2769:hover,
  #u2766:hover {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }

  /* ---------- 1.2 SOBRE NOSOTROS: el collage se apila ------------------- */

  /* Las tres líneas guía de 1 px sólo tienen sentido en el collage original */
  #u2812,
  #u3673,
  #u3957 {
    display: none;
  }

  #u924 {
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 66px;
  }

  #u924_align_to_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* `display:contents` disuelve este contenedor: sus tres hijos (título,
     política de calidad y el bloque VISIÓN) pasan a ser items directos del
     flex de arriba. Es lo que permite intercalar RESUMEN/MISIÓN entre ellos
     sin mover nada más de sitio en el HTML. */
  #pu1842-4 {
    display: contents;
  }

  #u1842-4  { order: 1; }   /* SOBRE NOSOTROS      */
  #u7849-4  { order: 2; }   /* POLÍTICA DE CALIDAD */
  #u2813    { order: 3; }   /* RESUMEN + MISIÓN    */
  #pu2817   { order: 4; }   /* VISIÓN              */

  /* Los cuatro bloques, uno debajo del otro y centrados */
  #u1842-4,
  #u7849-4,
  #u2813,
  #pu2817 {
    position: static;
    float: none;
    left: auto;
    width: 100%;
    max-width: 660px;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    text-align: center;
  }

  #u7849-4 { margin-top: 18px; }
  #u2813   { margin-top: 44px; }
  #pu2817  { margin-top: 44px; }

  /* Cada bloque por dentro: círculo, rótulo, texto — en columna y centrado.
     Al ser items de un flex, los `float:left` de Muse quedan sin efecto. */
  #u2813,
  #pu2816,
  #pu2814-4,
  #pu2817,
  #u2817,
  #pu2818 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #pu2816,
  #pu2814-4,
  #u2817,
  #u2820-4,
  #pu2818 {
    position: static;
    float: none;
    left: auto;
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  #pu2814-4 { margin-top: 22px; }

  /* Dentro de VISIÓN el texto va primero en el HTML; lo mandamos abajo para
     que los tres bloques se lean igual: círculo, rótulo, texto. */
  #pu2818  { order: 1; }
  #u2820-4 { order: 2; margin-top: 16px; }

  /* Rótulos y párrafos */
  #u2815-4,
  #u2814-4,
  #u3951-4,
  #u3954-4,
  #u2819-4,
  #u2820-4 {
    position: static;
    left: auto;
    width: 100%;
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  #u2814-4 { margin-top: 14px; }
  #u3954-4 { margin-top: 14px; }

  /* Los tres círculos celestes conservan sus 49 px */
  #u2818,
  #u2816,
  #u3948 {
    position: static;
    left: auto;
    margin-left: 0;
    margin-right: 0;
    flex: 0 0 auto;
  }

  #u2819-4,
  #u2815-4,
  #u3951-4 {
    margin-top: 12px;
  }

  #u3948 { margin-top: 34px; }

  /* ---------- 1.3 SOLUCIONES: las tres tarjetas se acomodan ------------- */

  #pu2260 {
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 26px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  #u2260,
  #u2267,
  #u2274 {
    position: static;
    float: none;
    left: auto;
    margin-left: 0;
    margin-right: 0;
    flex: 0 0 auto;
  }

  /* El título SOLUCIONES deja de colgar de un 12,25% y se centra */
  #u1848-4 {
    width: 100%;
    margin-left: 0;
    left: auto;
    text-align: center;
  }

  /* ---------- 1.4 Clientes: el logo de Atalaya --------------------------- */

  /* Es el único de los cinco que mezcla porcentaje con un corrimiento fijo
     (`margin-left:41.67%` + `left:-460px`). A 1200 px eso da 40 px desde el
     borde; más angosto se va fuera de pantalla. 40/1200 = 3,33%. */
  #u3357,
  #u3357:hover {
    left: 0;
    margin-left: 3.33%;
  }
}


/* ==========================================================================
   2. HASTA 900 px — no entran menú + 4 iconos + isotipo en una fila
   Los iconos sociales están repetidos en el pie, así que salen de la barra.
   ========================================================================== */

@media screen and (max-width: 900px) {

  #u2758-wrapper,
  #u2761-wrapper,
  #u2769-wrapper,
  #u2766-wrapper {
    display: none;
  }

  #u1766-wrapper {
    margin-left: auto;
  }

  #u744 .cl-effect-14 a,
  #u750 .cl-effect-14 a,
  #u755 .cl-effect-14 a,
  #u760 .cl-effect-14 a {
    font-size: clamp(11px, 1.9vw, 17px);
    padding: 0 clamp(5px, 1.7vw, 16px);
  }

  /* ---------- Pie: logo, menú e iconos, uno debajo del otro -------------- */

  /* Con el ancho original el menú del pie queda en 72 px (las palabras se
     parten) y los iconos sociales en 14 px (intocables con el dedo). */

  #u5329 {
    min-height: 0;
    padding-top: 38px;
    padding-bottom: 42px;
  }

  #u5329_align_to_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  #u5329_align_to_page::after,
  #pu4145-4::after,
  #pu4513::after {
    display: none;
  }

  /* La línea divisoria vertical sólo tiene sentido con el pie en fila */
  #u4160 {
    display: none;
  }

  #u4136,
  #pu4145-4,
  #pu4513 {
    position: static;
    float: none;
    left: auto;
    width: auto;
    margin: 0;
  }

  #u4136 {
    width: 148px;
  }

  #pu4145-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 300px;
  }

  #pu4145-4 > *,
  #pu4145-4 p {
    left: auto;
    margin-left: 0;
    text-align: center;
  }

  #pu4513 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 22px;
  }

  #u4513,
  #u4516,
  #u4519,
  #u4520 {
    position: static;
    float: none;
    left: auto;
    width: 30px;
    margin: 0;
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   3. HASTA 640 px — red de contención
   Por debajo de 768 px el sitio redirige a /phone/, pero una ventana de
   escritorio angosta no dispara ese redirect (mide el ancho de PANTALLA),
   así que la página igual tiene que aguantar.
   ========================================================================== */

@media screen and (max-width: 640px) {

  #u924_align_to_page {
    padding-left: 16px;
    padding-right: 16px;
  }

  #pu2260 {
    padding-left: 14px;
    padding-right: 14px;
    gap: 22px;
  }

  /* El formulario de contacto es porcentual: a esta altura conviene en columna */
  #widgetu3964 {
    width: 92%;
    left: 4%;
  }

  #pwidgetu3965,
  #pwidgetu3980,
  #pwidgetu3969 {
    position: static;
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #pwidgetu3980,
  #pwidgetu3969 {
    margin-top: 18px;
  }
}