/* ==========================================================
   NovæONE Strategic Advisory — Nosotros (page-specific)
   Extiende style.css. No modifica ninguna regla existente.
   ========================================================== */

.hero.hero--nosotros::before{
  background:url('../images/hero/nosotros-hero-background.jpg') center 30% / cover no-repeat;
}

/* Overlay institucional. Se había bajado a .56/.48/.40 cuando la foto
   real todavía no existía en el servidor (404) — esa decisión se tomó
   "a ciegas", sin ver la fotografía final. Ya con la foto real puesta
   (mesa de juntas vista desde arriba, muchas superficies claras/reflejos)
   ese nivel se quedó corto: el eyebrow y sobre todo el párrafo dorado en
   itálica pierden contraste contra el fondo. Se sube a .68/.60/.50 —
   más oscuro que antes pero todavía por debajo del original .74/.66/.58. */
.hero.hero--nosotros::after{
  background:linear-gradient(100deg, rgba(13,24,42,.68) 0%, rgba(17,32,54,.60) 50%, rgba(22,40,66,.50) 100%);
}

/* Refuerzo cross-browser (mismo criterio que en Home): este hero lleva
   un párrafo adicional respecto al resto del sitio, así que en algunos
   navegadores de escritorio "Descubrir más" puede quedar demasiado
   cerca del botón principal. Se reserva espacio explícito. */
.hero--nosotros .hero-inner{ padding-bottom:var(--space-lg); }
.hero--nosotros .hero-scroll{ bottom:44px; opacity:.72; }
@media(min-width:768px) and (max-width:1023px){
  .hero--nosotros .hero-inner{ padding-bottom:var(--space-md); }
  .hero--nosotros .hero-scroll{ bottom:38px; }
}

/* Este hero lleva un párrafo adicional respecto al resto del sitio;
   en teléfono el contenido supera la altura de pantalla y choca con
   el indicador de scroll. Se ajusta solo aquí, solo en móvil. */
@media(max-width:640px){
  .hero--nosotros{ min-height:auto; padding-bottom:100px; }
  .hero--nosotros .hero-scroll{ display:none; }
}

/* ===== Bloques editoriales de texto (Quiénes somos, Origen, Mundo, Pensamos) =====
   Transición sutil entre bloques en lugar de la alternación dura
   blanco/frost anterior: cada sección se desvanece hacia el tono de
   la siguiente (blanco fresco ↔ #F4F6F8, el mismo cool off-white ya
   aprobado en la Homepage — nunca crema/beige/gris). Sin línea divisoria
   dura entre secciones: el recorrido debe sentirse continuo. */
.story-block{ padding:130px 0; position:relative; }
.story-block.bg-white{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 84%, var(--novae-off-white) 100%); }
.story-block.bg-frost{ background:linear-gradient(180deg, var(--novae-off-white) 0%, var(--novae-off-white) 84%, #FFFFFF 100%); }
/* Última sección antes de "Nuestro método" (navy): se desvanece hacia
   el tono frío para que el contraste con el siguiente bloque oscuro
   se sienta intencional, no accidental. */
.story-block:last-of-type{ background:linear-gradient(180deg, #FFFFFF 0%, var(--novae-off-white) 100%); }
@media(max-width:768px){ .story-block{ padding:80px 0; } }

/* Columna editorial de ~700px, alineada al mismo borde izquierdo que
   el Hero (.hero-inner no lleva margin:auto). Antes esta columna se
   centraba con margin:0 auto, lo que la desplazaba ~240px a la derecha
   respecto al Hero en pantallas anchas — un salto visual que parecía
   un espacio reservado para una imagen que nunca existió. Se corrige
   alineándola a la izquierda, igual que el Hero; el ancho reducido
   (700px, antes 760px) es lo que evita que vuelva a sentirse como
   "caja de texto" ancha. El texto conserva alineación izquierda para
   no afectar la lectura de los párrafos largos.

   padding-left reserva el espacio para el rombo + la línea de capítulo
   (ver ".chapter" más abajo) sin invadir el texto. */
.story-inner{ max-width:700px; margin:0; padding-left:34px; position:relative; }
/* Variante centrada, para bloques que sí deben ir al centro (p. ej. el
   encabezado de "Cómo pensamos" reutiliza esta clase con .center). */
.story-inner.center{ text-align:center; margin:0 auto; padding-left:0; }

/* ===== Hilo conductor de "Quiénes somos / Origen / Mundo" =====
   Estas tres secciones no son una lista (no hay un orden que numerar:
   no son pasos ni principios, son capítulos de una misma historia), así
   que en vez de números se usa un rombo sin etiqueta + una línea vertical
   continua que atraviesa las tres secciones (incluido el espacio en
   blanco entre ellas), para que se lean como un solo relato en tres
   partes en vez de tres bloques sueltos. "Cómo pensamos" (el 4to
   story-block) queda fuera a propósito — no aplica la clase .chapter,
   tiene su propio layout de 2 columnas.
   .chapter-mark cuelga de .story-inner (ya alineado con el Hero) y la
   línea cuelga de .wrap dentro de cada .chapter — la línea se extiende
   más allá de su propia sección (top/bottom negativos, igual al padding
   vertical de .story-block) para tocar sin cortes la línea de la
   sección vecina. La primera y la última no se extienden hacia la
   Hero / hacia "Cómo pensamos". */
.chapter-mark{ position:absolute; left:0; top:5px; width:9px; height:9px; background:var(--gold); transform:translateX(-50%) rotate(45deg); }
.chapter .wrap{ position:relative; }
.chapter .wrap::before{ content:""; position:absolute; left:48px; top:-130px; bottom:-130px; width:1px; background:rgba(198,164,77,.20); }
#quienes-somos .wrap::before{ top:0; }
#mundo .wrap::before{ bottom:0; }
@media(max-width:768px){
  .chapter .wrap::before{ left:24px; top:-80px; bottom:-80px; }
  #quienes-somos .wrap::before{ top:0; }
  #mundo .wrap::before{ bottom:0; }
}
@media(max-width:640px){
  .story-inner{ padding-left:28px; }
  .chapter-mark{ width:7px; height:7px; top:6px; }
}
.story-block .eyebrow{ display:block; margin-bottom:28px; }
.story-title{ font-size:clamp(28px,3.4vw,42px); margin-bottom:44px; }
.story-block p{ color:var(--grey); font-size:1.05rem; line-height:1.75; margin-bottom:24px; }
.story-block p:last-child{ margin-bottom:0; }
.story-emphasis{ font-family:var(--display); font-style:italic; color:var(--gold); font-size:1.2rem; margin-top:28px !important; display:block; }

/* Las líneas doradas al final de cada capítulo ya no aportan —
   aparecían en cada sección y perdían fuerza. Se retiran solo aquí
   (Quiénes somos / Origen / Mundo); el resto del sitio conserva su
   propio uso de line-draw sin cambios. */
.story-block .line-draw{ display:none; }

/* Dos columnas dentro de "Cómo pensamos" */
.think-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1040px; margin:0 auto; }
@media(max-width:860px){ .think-grid{ grid-template-columns:1fr; gap:56px; } }
.think-col h3{ font-size:1.4rem; margin-bottom:18px; }
.think-col p{ color:var(--grey); font-size:1rem; }

/* ===== Nuestro Método — timeline horizontal, 7 pasos =====
   Vuelta a la versión de línea de tiempo original a petición explícita:
   el cierre editorial separado (07 como bloque aparte con párrafo)
   se probó y no funcionó — 07 Acompañar vuelve a ser el último paso
   dentro de la misma secuencia, sin texto adicional debajo. */
.method{ background:var(--navy-900); padding:168px 0 150px; }
@media(max-width:768px){ .method{ padding:96px 0 90px; } }
.method .section-head h2{ color:#fff; }
.method-steps{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:82px; position:relative; }
/* Línea de tiempo tenue: el protagonismo lo llevan los círculos
   numerados, no la línea. */
.method-steps::before{ content:""; position:absolute; top:19px; left:5%; right:5%; height:1px; background:rgba(198,164,77,.15); }
/* Entre 641–960px, 7 pasos no caben parejos en una cuadrícula de 4
   columnas: sobran 3 en la última fila y queda una celda vacía junto
   al 07 (se ve "solo", con un hueco a su lado). Se cambia de grid a
   flexbox con wrap + justify-content:center: la última fila incompleta
   se centra sola en vez de dejar un hueco — y sigue funcionando igual
   si el método cambia de número de pasos en el futuro. */
@media(max-width:960px){
  .method-steps{ display:flex; flex-wrap:wrap; justify-content:center; column-gap:28px; row-gap:44px; }
  .method-steps::before{ display:none; }
  .method-step{ flex:0 0 calc(25% - 21px); }
}
/* Móvil: secuencia vertical de una sola columna — no cuadrícula,
   no timeline horizontal. Cada paso es una fila limpia, centrada,
   con suficiente aire; 07 se integra de forma natural como el
   último elemento de la misma secuencia. */
@media(max-width:640px){
  .method-steps{ flex-direction:column; row-gap:36px; }
  .method-step{ flex:1 1 100%; }
}
.method-step{ text-align:center; position:relative; }
.method-num{ width:38px; height:38px; margin:0 auto 18px; border-radius:50%; background:var(--navy-900); border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:12.5px; font-weight:700; color:var(--gold-light); position:relative; z-index:1; }
.method-step span.label{ display:block; font-family:var(--display); font-style:italic; color:#fff; font-size:1rem; }

/* ===== Principios (antes "Qué significa ser NovæONE") =====
   Grid editorial 01–05 (ver detalle de diseño más abajo, junto a
   .principles-list) — insignias numeradas conectadas por una línea,
   mismo lenguaje visual que "Nuestro método", en vez de la lista
   vertical de números-marca-de-agua de la versión anterior. */
.meaning{ background:var(--white); padding:150px 0; }
@media(max-width:768px){ .meaning{ padding:90px 0; } }
.meaning-intro{ max-width:760px; margin:0 auto 70px; text-align:center; }
.meaning-intro p{ color:var(--grey); font-size:1.05rem; line-height:1.75; margin-bottom:16px; }
.meaning-intro p:last-child{ margin-bottom:0; font-family:var(--display); font-style:italic; color:var(--ink); font-size:1.15rem; }

/* Rediseño (antes: 5 bloques centrados casi idénticos, uno tras otro,
   con un número gigante translúcido como único elemento gráfico —
   se leía repetitivo y como texto sin diseñar, no como una sección).

   Desktop: grid de 2 columnas — 01/02 y 03/04 en dos filas, 05 cierra
   la secuencia centrado a ancho completo como remate editorial. Menos
   scroll, composición más viva. Insignia numerada circular (mismo
   lenguaje visual que "Nuestro método", círculo con borde dorado) en
   vez del número-marca-de-agua. Una línea vertical tenue en el centro
   del grid actúa como columna vertebral decorativa que conecta ambas
   columnas — eco visual de la línea de "Nuestro método", sin intentar
   tocar cada número uno por uno (con lectura en zigzag 01→02→03→04
   esa conexión literal no se sostiene visualmente).

   Tablet/móvil (≤860px): una sola columna, y aquí sí el orden visual
   coincide con el de lectura, así que la línea puede atravesar las 5
   insignias en línea recta, exactamente como en "Nuestro método". */
.principles-list{ max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; column-gap:80px; row-gap:88px; position:relative; }
.principles-list::before{ content:""; position:absolute; top:26px; bottom:114px; left:50%; width:1px; background:rgba(198,164,77,.18); transform:translateX(-50%); }
.principle-block{ text-align:left; }
.principle-block:nth-child(5){ grid-column:1/-1; max-width:520px; margin:16px auto 0; text-align:center; }
.principle-num{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:22px; border-radius:50%; background:var(--white); border:1px solid var(--gold); font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:0; color:var(--gold-light); position:relative; z-index:1; }
.principle-block:nth-child(5) .principle-num{ margin-left:auto; margin-right:auto; }
.principle-block h3{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1.5rem; margin-bottom:16px; color:var(--ink); }
.principle-block p{ color:var(--grey); font-size:1.02rem; line-height:1.8; max-width:420px; }
.principle-block:nth-child(5) p{ max-width:520px; margin:0 auto; }

@media(max-width:860px){
  .principles-list{ grid-template-columns:1fr; max-width:480px; row-gap:64px; }
  .principles-list::before{ display:none; }
  .principles-list::after{ content:""; position:absolute; top:26px; bottom:26px; left:26px; width:1px; background:rgba(198,164,77,.22); }
  .principle-block{ text-align:left; padding-left:76px; position:relative; }
  .principle-block:nth-child(5){ grid-column:auto; max-width:none; margin:0; text-align:left; }
  .principle-num{ position:absolute; left:0; top:0; margin-bottom:0; }
  .principle-block:nth-child(5) .principle-num{ margin-left:0; position:absolute; }
  .principle-block p, .principle-block:nth-child(5) p{ max-width:none; margin:0; }
}
@media(max-width:640px){
  .principles-list{ row-gap:52px; }
  .principles-list::after{ left:21px; }
  .principle-block{ padding-left:64px; }
  .principle-num{ width:42px; height:42px; font-size:12.5px; }
  .principle-block h3{ font-size:1.3rem; }
}

/* ===== Misión y Visión ===== */
.mv{ background:linear-gradient(180deg, var(--novae-off-white) 0%, var(--novae-off-white) 90%, #FFFFFF 100%); padding:150px 0; }
@media(max-width:768px){ .mv{ padding:90px 0; } }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
@media(max-width:860px){ .mv-grid{ grid-template-columns:1fr; gap:56px; } }
.mv-col span.mv-label{ display:block; font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.mv-col h3{ font-size:1.6rem; margin-bottom:20px; }
.mv-col p{ color:var(--grey); font-size:1.05rem; line-height:1.75; }

/* ===== Nuestro Equipo ===== */
.team{ background:var(--white); padding:150px 0; }
@media(max-width:768px){ .team{ padding:90px 0; } }
.team-grid{ display:grid; grid-template-columns:.46fr .54fr; gap:88px; align-items:center; }
@media(max-width:860px){ .team-grid{ grid-template-columns:1fr; gap:44px; } }
.team-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.team-content p{ color:var(--grey); font-size:1.05rem; line-height:1.75; margin-bottom:18px; }

/* ===== Nuestro Compromiso ===== */
.commitment{ background:var(--navy-800); padding:150px 0; }
@media(max-width:768px){ .commitment{ padding:90px 0; } }
.commitment .section-head h2{ color:#fff; }
.commitment-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:64px; border-top:1px solid rgba(255,255,255,.12); padding-top:52px; }
@media(max-width:860px){ .commitment-grid{ grid-template-columns:1fr; gap:44px; } }
.commitment-item h3{ font-family:var(--display); font-style:italic; font-weight:500; color:#fff; font-size:1.5rem; margin-bottom:16px; }
.commitment-item p{ color:rgba(255,255,255,.72); font-size:.98rem; line-height:1.7; }

/* ===== Manifiesto ===== */
.manifesto{ background:var(--white); padding:170px 0; text-align:center; }
@media(max-width:768px){ .manifesto{ padding:100px 0; } }
.manifesto-text{ font-family:var(--display); font-style:italic; color:var(--ink); font-size:clamp(24px,3.4vw,38px); line-height:1.5; max-width:900px; margin:0 auto; }
.manifesto-text .g{ color:var(--gold); }

/* Microinteracciones consistentes con el resto del sitio */
.commitment-item, .mv-col{ transition:transform .35s ease; }
.commitment-item:hover{ transform:translateY(-4px); }
.principle-num{ transition:transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease; }
.principle-block:hover .principle-num{ transform:scale(1.08); background:var(--gold); border-color:var(--gold); color:var(--navy-900); }
.method-step .method-num{ transition:transform .3s ease, background .3s ease; }
.method-step:hover .method-num{ transform:scale(1.12); background:var(--gold); border-color:var(--gold); color:var(--navy-900); }