:root{
  --ink:#0d2d5e;
  --muted:#6b7280;
  --line:#e7ecf5;
  --bg:#f8fafc;
  --blue:#0d4e8c;
  --blue-700:#17479e;
  --blue-200:#cfe3ff;
  --card-radius:14px;
  --shadow:0 6px 22px rgba(10,35,80,.06);
  --shadow-lg:0 12px 32px rgba(10,35,80,.12);
}

/* ===== Reset/Global ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}

/* Justificar SOLO textos dentro del blade Nosotros */
.nosotros-page p,
.nosotros-page li,
.nosotros-page figcaption,
.nosotros-page .feature-text,
.nosotros-page .hacemos-card p,
.nosotros-page .valor p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  text-wrap: pretty;
}

/* Contenedor */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
@media (max-width:520px){ .container{ padding:0 16px } }

/* ===== Hero ===== */
.hero-nos{ position:relative; overflow:hidden }
.hero-nos .hero-img{
  width:100%; aspect-ratio:11/2;
  object-fit:cover; object-position:center;
}
@media (max-width:600px){ .hero-nos .hero-img{ aspect-ratio:16/7 } }
@media (max-width:420px){ .hero-nos .hero-img{ aspect-ratio:16/8 } }

/* ===== Split ===== */
.split--cassara{
  display:grid; grid-template-columns:1fr 1fr;
  height:clamp(200px, 30vw, 380px);
  width:100%; overflow:hidden;
}
.split--cassara .split-media{ position:relative; overflow:hidden; background:#000 }
.split--cassara .split-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
}
.split--cassara .split-panel{
  background:#0d4e8c; color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:left;
}
.split--cassara .split-panel .inner{ width:100%; max-width:640px; padding:40px; }
.split--cassara .split-panel h3{
  margin:0 0 12px; line-height:1.4; letter-spacing:-.2px;
  font-size:clamp(18px,2.8vw,26px);
}
#trabajamos{ text-align:left !important; font-size:18px; }
.split--cassara .split-panel p{
  margin:0; opacity:.95; line-height:1.75;
  font-size:clamp(14px,1.8vw,16px);
}
@media (max-width:980px){
  .split--cassara{ grid-template-columns:1fr; height:auto }
  .split--cassara .split-media{ height:clamp(240px, 48vw, 360px) }
}
@media (max-width:480px){ .split--cassara .split-panel .inner{ padding:22px } }

/* ===== Intro ===== */
.intro{ padding:40px 0 10px; text-align:center }
.page-title{
  font-size:clamp(28px,4vw,40px); line-height:1.2;
  margin:24px 0 10px; font-weight:800; letter-spacing:-.3px;
}
.lead{
  color:var(--muted); max-width:900px; margin:0 auto 28px;
  font-size:clamp(15px,2.2vw,17px); line-height:1.75; text-align:center;
}

/* ===== Cards dobles ===== */
.feature-wrap{ margin:20px 0 8px }
.feature-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:20px;
}
.feature-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:26px; display:flex; gap:16px; align-items:flex-start;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover{ border-color:var(--blue-700); box-shadow:var(--shadow-lg); transform:translateY(-2px) }
.feature-ico{
  flex:0 0 56px; height:56px; border-radius:14px; background:#eef4ff;
  display:grid; place-items:center;
}
.feature-ico svg{ width:28px; height:28px; fill:var(--blue-700) }
.feature-title{ margin:2px 0 8px; font-weight:800; font-size:clamp(18px,2.6vw,22px) }
.feature-text{ margin:0; color:var(--muted); line-height:1.75 }
@media (max-width:480px){
  .feature-card{ flex-direction:column; gap:12px; align-items:stretch }
  .feature-ico{ width:48px; height:48px }
}

/* ===== Video ===== */
.video-wrap{ margin:28px 0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow) }
.ratio-16x9{ position:relative; padding-top:56.25% }
.ratio-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ===== Valores ===== */
.section-head{ text-align:center; padding:18px 0 10px }
.section-title{ font-size:clamp(22px,3.4vw,34px); margin:0 0 6px; font-weight:800 }
.valores-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px;
}
.valor{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow);
}
.valor figure{ aspect-ratio:4/3; overflow:hidden }
.valor img{ width:100%; height:100%; object-fit:cover }
.valor .body{ padding:16px 18px }
.valor h4{ margin:2px 0 8px; font-weight:800 }
.valor p{ margin:0; color:var(--muted); line-height:1.8 }

/* ===== Lo que hacemos ===== */
.hacemos{ padding:14px 0 60px }
.hacemos-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:22px;
}
.hacemos-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:24px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hacemos-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--blue-700) }
.hacemos-ico{
  width:56px; height:56px; border-radius:14px; background:#eef4ff;
  display:grid; place-items:center; margin-bottom:12px;
}
.hacemos-ico svg{ width:26px; height:26px; fill:var(--blue-700) }
.hacemos-card h3{ margin:4px 0 8px; font-weight:800 }
.hacemos-card p{ margin:0 0 12px; color:var(--muted); line-height:1.8 }
.btn-outline{
  display:inline-block; border:1px solid var(--blue-700); color:var(--blue-700);
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
}
.btn-outline:hover{ box-shadow:var(--shadow-lg) }
@media (max-width:640px){ .hacemos{ padding:10px 0 50px } }

/* Clamp compatible para .hacemos-text.clamp-2 */
.hacemos-text.clamp-2{
  display:-webkit-box; -webkit-box-orient:vertical;
  line-clamp:5; overflow:hidden; text-overflow:ellipsis;
  hyphens:auto; text-align:justify;
}
@media (max-width:640px){
  .hacemos-text.clamp-2{line-clamp:6; }
}

/* ===== En números (nbx-) ===== */
.nbx-section{
  position:relative; color:#fff; overflow:hidden;
  padding: clamp(36px, 8vw, 90px) 0;
}
.nbx-section::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(4,16,40,.65), rgba(4,16,40,.65)),
    var(--nbx-bg);
  background-size:cover; background-position:center;
  filter:saturate(.95);
  margin-top:70px; /* conservado */
}
.nbx-section .container{ position:relative; }

.nbx-title{
  margin:30px 0;
  text-align:center; letter-spacing:-.2px;
  font-size: clamp(22px, 3.6vw, 38px);
}

/* ======= Igualito al screenshot: 4 ítems separados ======= */
.nbx-grid{
  margin:0; padding:0; list-style:none;
  display:grid;
  grid-template-columns: repeat(4, max-content); /* columnas al tamaño del contenido */
  justify-content: space-between;               /* reparte el espacio */
  align-items: center;
  text-align: center;
  gap: clamp(12px, 4vw, 64px);
}
.nbx-card{
  display:flex; flex-direction:column; align-items:center;
}
.nbx-number{ font-weight:800; font-size: clamp(28px, 5.2vw, 54px); line-height:1; margin-bottom:6px }
.nbx-text{
  margin:.5rem auto 0; max-width:28ch;
  font-weight:600; line-height:1.6; color:rgba(255,255,255,.92);
  text-align:center; font-size:15px;
}

/* Tablet: 2 columnas */
@media (max-width:900px){
  .nbx-grid{
    grid-template-columns: repeat(2, max-content);
    justify-content: space-around;
    row-gap: clamp(16px, 5vw, 32px);
  }
}

/* Móvil: 1 columna */
@media (max-width:520px){
  .nbx-grid{
    grid-template-columns: 1fr;
    justify-content: center;
    row-gap: clamp(16px, 6vw, 36px);
  }
  .nbx-text{ max-width:34ch; font-size:14px }
  .nbx-number{ font-size: clamp(26px, 9vw, 40px) }
}

/* ===== Accesibilidad / movimiento reducido ===== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* Fijar centrado correcto en los textos del bloque "en números" */
.nbx-section .nbx-text{
  text-align: center !important;   /* vence a .nosotros-page p { text-align: justify } */
  text-justify: auto;
  hyphens: none;
  -webkit-hyphens: none;
  word-spacing: normal;
  letter-spacing: 0;
}
/* ===== EN NÚMEROS · NO MÁS OVERFLOW ===== */
.nbx-grid{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;

  /* 4 columnas flexibles que NUNCA superan el ancho del contenedor */
  grid-template-columns: repeat(4, minmax(200px, 1fr));

  /* centrado y separación razonable sin romper el ancho */
  justify-items: center;
  align-items: center;
  text-align: center;
  column-gap: clamp(16px, 4vw, 40px);
  row-gap: clamp(8px, 2.5vw, 18px);
}

/* Cada ítem centrado, con un ancho máximo para que el texto no fuerce la columna */
.nbx-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width: 260px;   /* evita que una card ensanche el grid */
}

/* Texto más contenido para evitar cortes raros y mantener la estética */
.nbx-text{
  max-width: 24ch;           /* antes 28ch; así queda como tu 2da imagen */
  margin-inline: auto;
  text-align: center !important;  /* vence la justificación global */
  text-justify: auto;
  hyphens: none;
}

/* Tablet: 2 columnas */
@media (max-width: 900px){
  .nbx-grid{
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    column-gap: clamp(16px, 5vw, 32px);
    row-gap: clamp(12px, 4vw, 24px);
  }
}

/* Móvil: 1 columna */
@media (max-width: 520px){
  .nbx-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(14px, 6vw, 32px);
  }
  .nbx-text{ max-width: 30ch; }   /* un pelín más ancho en 1 columna */
}
/* Estilo de los íconos FA dentro de las feature cards */
.feature-ico i{
  font-size: 28px;          /* equivalente a tus 28px del SVG */
  color: var(--blue-700);
  line-height: 1;
}

/* En móviles angostos ya tienes el bloque, aquí solo afinamos el ícono */
@media (max-width:480px){
  .feature-ico i{ font-size: 26px; }
}