/* =========================================================================
   URRETA — Área de Trabajo (interna): plataformas de aseguradoras
   Artboard 1980 x 6612 px  →  123.75rem x 413.25rem
   ========================================================================= */

/* En esta pantalla el lienzo de Figma es blanco (no crema): los bloques
   grises se pintan encima y la rejilla queda sobre el blanco del frame. */
.u-page { background: var(--c-white); }

.ati-fondo {
  position: absolute;
  left: 0;
  width: 123.75rem;
  background: #E7E8EB;
}
.ati-fondo--superior { top: 2.3125rem;   height: 68.125rem; }   /* 37 / 1090 */
.ati-fondo--inferior { top: 219.5625rem; height: 54.875rem; }   /* 3513 / 878 */

.ati-titulo {
  position: absolute;
  top: 23.25rem;                     /* 372 */
  left: 15.6088rem;                  /* 249.74 */
  width: 36.875rem;                  /* 590 */
  height: 15rem;                     /* 240 */
  font-size: 6rem;                   /* 96 */
  font-weight: 200;
  line-height: 7.25rem;              /* 116 */
  color: #4C4C4C;
}

.ati-intro {
  position: absolute;
  top: 43.25rem;                     /* 692 */
  left: 62.6713rem;                  /* 1002.74 */
  width: 43.125rem;                  /* 690 */
  height: 7.5rem;                    /* 120 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.5rem;
  color: #4C4C4C;
}

.ati-foto {
  position: absolute;
  border-radius: 1.4058rem;          /* 22.492 */
  box-shadow: 0 1.2652rem 2.8116rem rgba(143, 70, 100, 0.35);
  background: #951F99;
  overflow: hidden;
}
.ati-foto img { position: absolute; max-width: none; }

.ati-foto--a {                       /* Rectangle 42 */
  top: 17rem; left: 73.2338rem;                    /* 272 / 1171.74 */
  width: 17.0405rem; height: 17.0108rem;
}
.ati-foto--a img { left: -1%; top: -1.49%; width: 102.52%; height: 140.47%; }

.ati-foto--b {                       /* Rectangle 43 */
  top: 45.8626rem; left: 29.2338rem;               /* 733.80 / 467.74 */
  width: 16.7155rem; height: 16.6374rem;
}
.ati-foto--b img { left: -71.64%; top: -18.94%; width: 218.46%; height: 129.65%; }

/* ====================== REJILLA DE ASEGURADORAS ======================== */

.ati-grid {
  position: absolute;
  top: 78.125rem;                    /* 1250 */
  left: 15.6713rem;                  /* 250.74 */
  width: 92.4375rem;                 /* 1479 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Filas automaticas en vez de `repeat(6, 1fr)` con alto fijo: asi la
     rejilla admite las plataformas que haga falta y la plantilla solo tiene
     que calcular el alto del tramo. 21.0007 es lo que medía cada fila en el
     diseno: (133.7979 - 5 x 1.5588) / 6. */
  grid-auto-rows: 21.0007rem;
  gap: 1.5588rem;                    /* 24.941 */
}

.ati-logo { position: relative; }
.ati-logo--lleno { justify-self: stretch; align-self: stretch; }
.ati-logo--lleno img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Los logotipos que entran por el CMS no vienen recortados al hueco: se
   muestran enteros y centrados, con aire alrededor. */
.ati-logo--contener { justify-self: stretch; align-self: stretch; padding: 1.5rem; }
.ati-logo--contener img { position: absolute; inset: 1.5rem; width: calc(100% - 3rem); height: calc(100% - 3rem); object-fit: contain; }
.ati-logo--contener .ati-logo__enlace { inset: 0; }
.ati-logo--contener .ati-logo__enlace img { inset: 1.5rem; width: calc(100% - 3rem); height: calc(100% - 3rem); }

.ati-logo--centro { justify-self: center; align-self: center; }
.ati-logo--centro img { width: 100%; height: 100%; object-fit: cover; }
.ati-logo__svg { position: absolute; inset: 0; }

/* El enlace ocupa la celda entera y pasa a ser el bloque contenedor del
   logotipo, que sigue midiendo lo mismo. */
.ati-logo__enlace {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 0.5rem;
  transition:
    transform  var(--t-medio) var(--e-suave),
    filter     var(--t-medio) var(--e-suave);
}
.ati-logo__enlace:hover,
.ati-logo__enlace:focus-visible {
  transform: scale(1.04);
  filter: drop-shadow(0 0.5rem 1rem rgba(109, 20, 86, 0.25));
}

/* ---------------------- Celdas con varios portales --------------------
   Muchas aseguradoras tienen mas de un acceso. Esas celdas dejan de ser un
   enlace y pasan a ser un boton que despliega la lista, con el nombre de
   cada portal. La cifra de la esquina dice cuantos hay antes de pulsar.
   -------------------------------------------------------------------- */
.ati-logo--varios { z-index: 1; }
.ati-logo--varios.is-open { z-index: 20; }

button.ati-logo__enlace {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.ati-logo__senal {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-image: linear-gradient(
    31.20deg,
    rgb(225, 73, 110)  21.771%,
    rgb(255, 104, 157) 40.030%,
    rgb(200, 54, 150)  61.610%,
    rgb(200, 54, 150)  69.660%,
    rgb(239, 62, 177)  89.723%
  );
  box-shadow: 0 0.15rem 0.3rem rgba(109, 20, 86, 0.25);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  color: var(--c-cream);
  transition: transform var(--t-medio) var(--e-suave);
}
.ati-logo--varios.is-open .ati-logo__senal { transform: rotate(45deg) scale(1.1); }

.ati-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  min-width: 13rem;
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: var(--c-cream);
  box-shadow: 0 0.75rem 1.75rem rgba(109, 20, 86, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition:
    opacity    var(--t-medio) var(--e-suave),
    transform  var(--t-medio) var(--e-suave),
    visibility 0s linear var(--t-medio);
}
.ati-logo--varios.is-open .ati-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.ati-menu__titulo {
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.6;
}

.ati-menu__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.9375rem;
  border-radius: 1.375rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--c-primary);
  transition:
    background-image var(--t-medio) var(--e-suave),
    color            var(--t-medio) var(--e-suave);
}
.ati-menu__link + .ati-menu__link { margin-top: 0.25rem; }

.ati-menu__link:hover,
.ati-menu__link:focus-visible {
  background-image: linear-gradient(
    31.20deg,
    rgb(225, 73, 110)  21.771%,
    rgb(255, 104, 157) 40.030%,
    rgb(200, 54, 150)  61.610%,
    rgb(200, 54, 150)  69.660%,
    rgb(239, 62, 177)  89.723%
  );
  color: var(--c-cream);
}

@media (prefers-reduced-motion: reduce) {
  .ati-menu,
  .ati-logo__senal { transition: none; }
}

/* Celdas con enlaces a las tiendas */
.ati-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.1823rem;                    /* 34.917 */
  padding: 0.5196rem;                /* 8.314 */
}
.ati-app__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.8342rem;                 /* 205.347 */
  height: 12.8342rem;
  padding: 0.5196rem;
}
.ati-app__marca img { flex: none; max-width: none; object-fit: cover; }

.ati-app__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9353rem;                    /* 14.965 */
}

.ati-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 8.9677rem;                  /* 143.483 */
  height: 3.0313rem;                 /* 48.501 */
  padding: 0.8833rem 0.8314rem 0.8314rem 0.8833rem;
  border: 0.0519rem solid #E1496E;   /* 0.831 */
  border-radius: 3.0625rem;          /* 49 */
  background: rgba(255, 255, 255, 0);
}
.ati-badge__marca {
  position: relative;
  width: 7.2626rem;                  /* 116.201 */
  height: 1.3262rem;                 /* 21.219 */
  flex: none;
  overflow: hidden;
}
/* El logotipo de App Store va en una caja algo menor y desplazada */
.ati-badge__marca--apple {
  width: 6.2989rem;                  /* 100.783 */
  height: 1.3408rem;                 /* 21.452 */
  margin-left: -0.0213rem;           /* -0.34 */
}

/* ============================== BANDA ================================== */

.ati-banda {
  position: absolute;
  top: 227.8125rem;                  /* 3645 */
  left: 6.4213rem;                   /* 102.74 */
  width: 110.875rem;                 /* 1774 */
  height: 24.7064rem;                /* 395.302 */
  transform: scaleX(-1);
}
.ati-banda img { width: 100%; height: 100%; }

.ati-banda__texto {
  position: absolute;
  top: 240.1875rem;                  /* 3843 (centro) */
  left: 20.4469rem;                  /* 327.15 */
  width: 82.8859rem;                 /* 1326.174 */
  height: 14.5rem;                   /* 232 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 4rem;
  font-weight: 200;
  line-height: normal;
  text-align: center;
  color: #E9E9E9;
}