/* ============================================================
   EYUB' - soluciones.css
   ============================================================ */

/* ---------- Resumen de areas (navegacion interna) ---------- */
.resumen-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem;
}

.resumen-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  backdrop-filter: blur(12px);
  transition: all var(--normal) var(--ease);
}
.resumen-area:hover {
  border-color: var(--azul-interactivo);
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(1, 28, 89, .16);
}
.resumen-area__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  margin-bottom: .7rem;
  color: var(--acento);
  background: rgba(1, 28, 89, .12);
  border: 1px solid rgba(1, 28, 89, .26);
  transition: all var(--normal) var(--ease-out);
}
.resumen-area:hover .resumen-area__ico { color: #fff; background: var(--azul-interactivo); border-color: var(--azul-interactivo); }

.resumen-area strong { font-family: var(--fuente-titulo); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.resumen-area small  { font-size: .78rem; color: var(--texto-ter); }

/* ---------- Bloque de area ---------- */
.area-bloque {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .area-bloque { grid-template-columns: 1fr; } }

.area-bloque__intro { position: sticky; top: calc(var(--nav-alto) + 2rem); }
@media (max-width: 900px) { .area-bloque__intro { position: static; } }

.area-bloque__ico {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: 18px;
  margin-bottom: 1.3rem;
  color: var(--acento);
  background: linear-gradient(150deg, rgba(1, 28, 89, .22), rgba(11, 61, 145, .10));
  border: 1px solid rgba(1, 28, 89, .3);
}

/* ---------- Lista de servicios ---------- */
.area-bloque__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .3rem 1.4rem;
}

.servicio-fila {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem .3rem;
  border-bottom: 1px solid var(--borde);
  transition: padding-left var(--normal) var(--ease);
}
.servicio-fila:hover { padding-left: .8rem; }

.servicio-fila__punto {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  margin-top: .1rem;
  border-radius: 50%;
  color: var(--acento);
  background: rgba(1, 28, 89, .11);
  border: 1px solid rgba(1, 28, 89, .24);
  transition: all var(--normal) var(--ease);
}
.servicio-fila:hover .servicio-fila__punto {
  color: #fff;
  background: var(--azul-interactivo);
  border-color: var(--azul-interactivo);
}

.servicio-fila strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .98rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.servicio-fila p { font-size: .86rem; color: var(--texto-sec); line-height: 1.55; }


/* ============================================================
   SECCIONES NOCTURNAS  ·  el detalle por área alternado
   ============================================================ */
.inverso .servicio-fila { border-bottom-color: rgba(255, 255, 255, .12); }
.inverso .servicio-fila p { color: rgba(255, 255, 255, .68); }
.inverso .area-bloque__ico {
  color: #93C5FD;
  background: rgba(1, 28, 89, .16);
  border-color: rgba(134, 180, 255, .28);
}


/* ============================================================
   RESUMEN DE ÁREAS EN SECCIÓN OSCURA
   ============================================================ */
.inverso .resumen-area {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
}
.inverso .resumen-area small { color: rgba(255, 255, 255, .60); }
.inverso .resumen-area__ico {
  color: #93C5FD;
  background: rgba(1, 28, 89, .16);
  border-color: rgba(134, 180, 255, .28);
}