/* ============================================================
   BLUE CURRENT GROUP — SOBRE.CSS
   ============================================================ */

/* ---------------- HISTORIA ---------------- */
.story{
  display:grid;
  grid-template-columns:1.25fr 0.75fr;
  gap:clamp(36px,6vw,80px);
  align-items:start;
}
.story-copy h2{font-size:clamp(26px,3vw,40px);margin-top:16px;}
.story-copy p{margin-top:20px;font-size:16.5px;color:var(--ink-soft);}
.story-figures{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
}
.story-figures > div{
  padding:26px 20px 26px 0;
  border-bottom:1px solid var(--line);
}
.story-figures > div:nth-child(odd){border-right:1px solid var(--line);padding-right:24px;}
.story-figures > div:nth-child(even){padding-left:24px;}
.story-figures .n{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(30px,3.2vw,40px);
  font-weight:400;
  line-height:1;
  color:var(--navy-900);
  letter-spacing:-0.02em;
}
.story-figures .l{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
@media (max-width:900px){
  .story{grid-template-columns:1fr;}
}

/* ---------------- MISION / VISION ---------------- */
.mv{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.mv-card{
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--blue-500);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:34px 32px;
}
.mv-card p{
  margin-top:16px;
  font-family:var(--f-display);
  font-size:clamp(18px,1.9vw,23px);
  font-weight:400;
  line-height:1.5;
  color:var(--navy-900);
  letter-spacing:-0.01em;
}
.mv-photo{
  grid-column:1/-1;
  position:relative;
  aspect-ratio:21/8;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-950));
}
.mv-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;}
@media (max-width:820px){
  .mv{grid-template-columns:1fr;}
  .mv-photo{aspect-ratio:16/9;}
}

/* ---------------- VALORES ---------------- */
/* 5 valores en una sola fila: cada tarjeta lleva su propio borde,
   así una fila incompleta nunca deja huecos de fondo. */
.vals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.val{
  min-height:0;
  background:color-mix(in srgb, #fff 5%, transparent);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-md);
  padding:28px 24px 30px;
  min-height:215px;
  transition:background var(--ease) .4s, border-color var(--ease) .4s, transform var(--ease) .4s;
}
.val:hover{
  background:color-mix(in srgb, #fff 9%, transparent);
  border-color:var(--blue-300);
  transform:translateY(-4px);
}
.val-ix{
  display:block;
  font-family:var(--f-display);
  font-size:13px;
  color:var(--blue-300);
  letter-spacing:0.06em;
  margin-bottom:18px;
}
.val h3{color:var(--white);font-size:19px;}
.val p{color:rgba(255,255,255,0.64);font-size:14px;margin-top:10px;}
@media (max-width:900px){.vals{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.vals{grid-template-columns:1fr;}.val{min-height:auto;}}

/* ---------------- OFICINAS ---------------- */
.offices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.office-card{
  display:block;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:34px 32px 30px;
  background:var(--white);
  transition:border-color var(--ease) .3s, transform var(--ease) .3s, box-shadow var(--ease) .3s;
}
.office-card:hover{border-color:var(--navy-900);transform:translateY(-4px);box-shadow:var(--shadow-card);}
.oc-flag{
  display:inline-block;
  font-size:11.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--blue-500);
  margin-bottom:14px;
}
.office-card h3{font-size:26px;}
.office-card p{margin-top:12px;color:var(--ink-soft);font-size:15px;line-height:1.65;}
.oc-go{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;
  font-size:13.5px;font-weight:600;color:var(--navy-900);
  transition:color var(--ease) .3s;
}
.oc-go svg{width:16px;height:16px;}
.office-card:hover .oc-go{color:var(--blue-500);}
@media (max-width:760px){.offices{grid-template-columns:1fr;}}

/* ---------------- ESTRUCTURA DEL GRUPO ---------------- */
.structure{border-top:1px solid var(--line);}
.structure li{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left var(--ease) .3s;
}
.structure li:hover{padding-left:10px;}
.st-ix{font-family:var(--f-display);font-size:13.5px;color:var(--blue-500);letter-spacing:0.04em;white-space:nowrap;}
.st-name{font-family:var(--f-display);font-size:clamp(18px,2vw,23px);color:var(--navy-900);}
.st-badge{
  font-size:11.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--navy-900);background:var(--white);
  border:1px solid var(--line);border-radius:100px;padding:8px 15px;white-space:nowrap;
}
@media (max-width:640px){
  .structure li{grid-template-columns:auto 1fr;row-gap:10px;}
  .st-badge{grid-column:2;justify-self:start;}
}

/* ---------------- NOTA GOALPHA ---------------- */
.ga-note{
  display:flex;align-items:center;gap:clamp(20px,3vw,36px);
  margin-top:36px;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--blue-500);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:24px clamp(22px,3vw,32px);
}
.ga-note .ga-mark{
  flex-shrink:0;
  font-family:var(--f-display);
  font-size:clamp(20px,2.2vw,27px);
  color:var(--navy-900);
  letter-spacing:-0.02em;
  padding-right:clamp(18px,3vw,34px);
  border-right:1px solid var(--line);
}
.ga-note p{font-size:15.5px;color:var(--ink-soft);}
.ga-note strong{color:var(--navy-900);font-weight:600;}
@media (max-width:760px){
  .ga-note{flex-direction:column;align-items:flex-start;gap:14px;}
  .ga-note .ga-mark{border-right:none;padding-right:0;}
}