/* ============================================================
   EYUB' - conoce-eyub.css
   Diseno propio de la pagina "Conoce EYUB'"
   ============================================================ */

/* ---------- Declaracion de marca ---------- */
.declaracion {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--texto-sec);
  text-wrap: balance;
}

/* ---------- Dos columnas ---------- */
.dos-columnas {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

.dos-columnas .lista-check {
  padding: 1.6rem 1.5rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  backdrop-filter: blur(12px);
}
.dos-columnas .lista-check li { font-size: .96rem; padding: .5rem 0; }

/* ---------- Identidad: mision, vision, filosofia ---------- */
.identidad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 800px) { .identidad { grid-template-columns: 1fr; } }

.identidad__bloque {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde);
  background: var(--superficie);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.identidad__bloque:hover { border-color: var(--borde-fuerte); transform: translateY(-4px); }

/* Arco orbital decorativo dentro de cada bloque */
.identidad__bloque::after {
  content: '';
  position: absolute;
  top: -140px; right: -140px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(11, 61, 145, .14);
  pointer-events: none;
}

.identidad__bloque--ancho { grid-column: 1 / -1; }
.identidad__bloque h3 { margin-bottom: .8rem; }
.identidad__bloque p { color: var(--texto-sec); font-size: 1rem; line-height: 1.7; max-width: 74ch; }
.identidad__cierre {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: .94rem !important;
  color: var(--texto-ter) !important;
}

/* ---------- Proposito ---------- */
.proposito {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.proposito__item {
  position: relative;
  padding: 2rem 1.5rem 1.6rem;
  text-align: center;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  transition: all var(--normal) var(--ease);
}
.proposito__item:hover {
  border-color: var(--azul-interactivo);
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(1, 28, 89, .18);
}

.proposito__ico {
  display: inline-grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  color: var(--acento);
  background: radial-gradient(circle at 34% 30%, rgba(18,107,255,.28), rgba(11,61,145,.12));
  border: 1px solid rgba(1, 28, 89, .3);
  transition: all var(--normal) var(--ease-out);
}
.proposito__item:hover .proposito__ico {
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(1, 28, 89, .18);
}

.proposito__item h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.proposito__item p { font-size: .89rem; color: var(--texto-sec); }

/* ---------- ADN completo ---------- */
.adn-completo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 940px) {
  .adn-completo { grid-template-columns: 1fr; }
  .adn-completo > *:last-child { order: -1; }
}
.adn-completo em { color: var(--acento); font-style: italic; }

/* ---------- Valores ---------- */
.valor { text-align: center; }
.valor .tarjeta-ico { margin-inline: auto; }
.valor p { font-size: .87rem; }

/* ---------- Vision internacional ---------- */
.internacional {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-fuerte);
  background:
    radial-gradient(760px 380px at 50% 0%, rgba(1, 28, 89, .22), transparent 66%),
    var(--superficie);
  text-align: center;
}
.internacional__contenido { position: relative; z-index: 2; }
.internacional h2 { margin-bottom: 2.4rem; }

.alcance {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem;
}
.alcance__paso {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.2rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--fondo-alt) 70%, transparent);
  backdrop-filter: blur(10px);
  transition: all var(--normal) var(--ease);
}
.alcance__paso .ico { color: var(--acento); }
.alcance__paso:hover {
  border-color: var(--azul-interactivo);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(1, 28, 89, .22);
}
.alcance__linea {
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--borde), var(--azul-400), var(--borde));
}
@media (max-width: 700px) { .alcance__linea { display: none; } }