/* =========================================================================
   CLOUDMPR Energía y Gestión — hoja de estilos
   Todo lo visual del sitio vive en este archivo: colores, tipografías,
   espaciados y el comportamiento en pantallas chicas.
   ========================================================================= */

/* --- 1. Variables de color y marca ---------------------------------------
   Cambiar un color acá lo cambia en todo el sitio de una sola vez.        */
:root {
  --navy:        #184181;   /* azul institucional, tomado del logo */
  --navy-tint:   oklch(0.96 0.015 235);  /* fondo celeste muy suave */
  --navy-muted:  #9db6dc;   /* texto secundario sobre fondo azul */
  --navy-muted2: #c3d2e8;
  --accent:      #4f8a5c;   /* verde del logo, para números, etiquetas y acento de marca */
  /* Verde: mismas fórmulas que sus equivalentes azules de arriba, con el
     matiz cambiado — para que el verde tenga la misma presencia que el
     azul en fondos de sección/tarjeta y estados hover, no solo en texto. */
  --accent-tint:   oklch(0.96 0.02 145);  /* fondo verde muy suave, análogo a navy-tint */
  --accent-muted2: oklch(0.85 0.06 145);  /* verde medio, hover sobre fondo oscuro, análogo a navy-muted2 */

  --bg:   oklch(0.985 0.003 90);   /* fondo general, blanco cálido */
  --ink:  oklch(0.19 0.005 260);   /* texto principal */
  --ink2: oklch(0.42 0.006 260);   /* texto de párrafo */
  --ink3: oklch(0.6 0.005 260);    /* texto terciario, etiquetas */
  --line: oklch(0.88 0.004 90);    /* líneas y bordes */

  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
}

/* --- 2. Base ------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* El scroll suave lo controla script.js con una duración fija: el
   "smooth" nativo del navegador no permite ajustar la velocidad, y en
   saltos largos (como del hero a Contacto) se sentía demasiado rápido. */
html { scroll-behavior: auto; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad: impide el scroll horizontal si algo se desborda. */
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; display: block; }

/* min-height + flex column: el pie queda pegado abajo aunque el
   contenido de la página sea corto (ver sección 12, .footer). */
.wrap {
  max-width: 1440px; margin: 0 auto; background: var(--bg);
  min-height: 100dvh; display: flex; flex-direction: column;
}
.wrap > main { flex: 1; }

/* Accesibilidad: salto al contenido para lectores de pantalla y teclado. */
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff;
  color: var(--navy); padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* --- 3. Cabecera y navegación ------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; gap: 16px;
}
.header-bar img { height: 26px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 28px); }
.nav a {
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 500;
  color: var(--ink2); white-space: nowrap;
}
.nav a:hover { color: var(--navy); }
/* El botón de Contacto es el elemento que más se repite en el sitio (queda
   fijo en la cabecera de cada página): pasa a verde para que el verde tenga
   presencia real, no solo en texto chico, y para marcar "acción" en el
   mismo color en toda la navegación. */
.nav a.nav-cta {
  font-weight: 600; color: #fff; padding: 8px 14px;
  border-radius: 20px; background: var(--accent);
}
.nav a.nav-cta:hover { background: oklch(0.93 0.045 145); color: var(--accent); }

/* Selector de idioma (ES/EN): una píldora chica, distinta tanto de los
   enlaces de texto como del botón de contacto, para que no se confunda
   con ninguno de los dos. */
.nav a.lang-switch, .nav-mobile a.lang-switch {
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px;
  font-family: var(--mono); font-size: 12px; color: var(--ink2);
}
.nav a.lang-switch:hover, .nav-mobile a.lang-switch:hover {
  border-color: var(--navy); color: var(--navy);
}
/* En mobile, .nav-mobile a se estira a todo el ancho con una línea
   divisoria (align-items:stretch del flex en columna) — pensado para la
   lista de enlaces, no para una píldora. align-self:flex-start la saca
   de ese estiramiento para que se vea compacta, como un botón aparte. */
.nav-mobile a.lang-switch { border-bottom: none; align-self: flex-start; margin-top: 12px; }

/* Botón hamburguesa: oculto en escritorio, visible en pantallas chicas.
   Las tres rayitas se transforman en una X cuando el menú está abierto,
   así el mismo botón sirve para abrir y cerrar. */
.burger {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 8px; width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
}
/* transform-box:fill-box hace que "center" sea el centro de cada rayita
   (su propia línea), no el del ícono entero — girarla alrededor de un
   punto que no es el suyo la hace "orbitar" en vez de girar en el lugar,
   que era el problema anterior. */
.burger svg line {
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-box: fill-box; transform-origin: center;
}
.burger.open svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open svg line:nth-child(2) { opacity: 0; }
.burger.open svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Capa que tapa toda la pantalla debajo de la cabecera, en vez de
   empujar el contenido hacia abajo. .header es position:sticky, así
   que sirve de referencia para .nav-mobile en position:absolute:
   top:100% la ubica justo debajo de la cabecera, y height:100dvh
   asegura que cubra el resto de la pantalla en cualquier alto de
   contenido (lo que sobra por abajo no se ve, no genera scroll). */
.nav-mobile {
  display: none; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0; height: 100dvh;
  padding: 8px 32px 20px; border-top: 1px solid var(--line);
  background: var(--bg); overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 15px; font-weight: 500; color: var(--ink2);
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-child { border-bottom: none; }

/* --- 4. Portada (hero) --------------------------------------------------
   Lleva una imagen de banco (Pexels, Ian Panelo, licencia libre de uso
   comercial). Definitiva: excepción aprobada a la regla de "sin fotos
   de banco".                                                            */
.hero { background: var(--navy); padding: 0; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; }
.hero-inner { max-width: 760px; padding: 76px 48px; }
/* La imagen se posiciona en absoluto para que NO imponga la altura de la
   fila: si queda en flujo normal, se despliega a su alto natural (~816px)
   y estira la columna azul, dejando aire muerto abajo. Así la altura del
   hero la define el texto y la foto cubre ese alto.                     */
.hero-media { overflow: hidden; position: relative; }
.hero-media img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; object-position: center 38%;
}
.hero .eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--navy-muted);
  letter-spacing: 0.06em; margin-bottom: 26px;
}
.hero h1 {
  font-size: 48px; line-height: 1.15; font-weight: 600; color: #fff;
  margin-bottom: 28px; letter-spacing: -0.01em;
}
.hero p.lead {
  font-size: 17px; line-height: 1.6; color: var(--navy-muted2);
  max-width: 560px; margin-bottom: 40px;
}
/* Mismo criterio que el botón de Contacto de la cabecera: verde marca
   "acción" en todo el sitio. .btn se usa acá y en el botón de vuelta al
   inicio de gracias.html — los dos casos son sobre fondo azul oscuro. */
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; padding: 14px 30px; border-radius: 24px;
}
.btn:hover { background: oklch(0.4 0.09 145); color: #fff; }

.stats {
  display: flex; gap: 40px; flex-wrap: wrap; margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: 26px;
}
/* Aclara que las tres cifras son trayectoria del equipo, no de CLOUDMPR
   como empresa (constituida en 2026). flex-basis:100% la manda a su
   propia fila, arriba de los tres números.                             */
.stats-label {
  flex-basis: 100%;
  font-family: var(--mono); font-size: 11px; color: var(--navy-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.stats .num { font-family: var(--mono); font-size: 20px; color: #fff; }
.stats .lbl { font-size: 12px; color: var(--navy-muted); margin-top: 4px; }

/* --- 5. Secciones ------------------------------------------------------- */
/* scroll-margin-top: si alguien abre un link con #ancla directo (o usa
   atrás/adelante del navegador), el salto lo resuelve el navegador, no
   nuestro script — sin esto, el título queda tapado detrás de la
   cabecera sticky igual que le pasaba al link del menú. */
.section { padding: 100px 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.section.tinted { background: var(--navy-tint); }
.section.tint-green { background: var(--accent-tint); }
.section-head { display: flex; gap: 16px; align-items: center; margin-bottom: 56px; }
.section-head .n {
  font-family: var(--mono); font-size: 28px; color: var(--accent);
  opacity: 0.85; line-height: 1;
}
.section-head h2 { font-size: 34px; font-weight: 600; }

/* --- 6. Servicios ------------------------------------------------------- */
.grid-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 64px; }
.card {
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 2px 12px rgba(23,63,127,0.08); border: 1px solid var(--line);
}
.card .badge {
  width: 36px; height: 36px; border-radius: 50%; color: #fff;
  font-family: var(--mono); font-size: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.badge.navy  { background: var(--navy); }
.badge.green { background: var(--accent); }
.card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.card p { font-size: 14px; line-height: 1.65; color: var(--ink2); margin-bottom: 18px; }
.card .result {
  font-size: 13px; line-height: 1.5; color: var(--navy); font-weight: 600;
  padding-top: 14px; border-top: 1px solid var(--line);
}

.grid-situations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
.grid-situations li {
  list-style: none; font-size: 17px; line-height: 1.65; color: var(--ink2);
  padding-left: 20px; border-left: 2px solid var(--navy);
}
.grid-situations li:nth-child(2n) { border-left-color: var(--accent); }

/* --- 7. Por qué CLOUDMPR --------------------------------------------------
   Bloque compacto, no sección numerada: son cuatro afirmaciones que
   cualquier competidor podría firmar, no un diferencial propio.        */
.why-compact {
  padding: 64px 48px; border-bottom: 1px solid var(--line);
  background: var(--navy-tint);
}
.why-compact > h3 {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 32px;
}
.grid-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.grid-why > div { padding-left: 18px; border-left: 2px solid var(--navy); }
.grid-why > div:nth-child(2n) { border-left-color: var(--accent); }
.grid-why h4 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.grid-why p { font-size: 14px; line-height: 1.65; color: var(--ink2); }

/* --- 8. Quiénes somos --------------------------------------------------- */
.grid-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 56px; }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px;
  box-shadow: 0 2px 12px rgba(23,63,127,0.06);
}
.panel p { font-size: 16px; line-height: 1.75; color: var(--ink2); }

.founder {
  border: 1px solid var(--line); border-radius: 16px; padding: 48px;
  display: grid; grid-template-columns: 180px 1fr; gap: 40px; margin-bottom: 48px;
}
.founder img { width: 180px; height: 180px; border-radius: 12px; object-fit: cover; }
.founder .name { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.founder .role { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 20px; }
.founder p { font-size: 16px; line-height: 1.75; color: var(--ink2); margin-bottom: 16px; }
.founder p:last-child { margin-bottom: 0; }

.grid-hitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-destacados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.hito { background: var(--navy-tint); border-radius: 16px; padding: 28px; }
.hito h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--navy); }
.hito p { font-size: 14px; line-height: 1.65; color: var(--ink2); }

/* Más presencia de verde en Quiénes somos, sin tocar el HTML: por selector,
   así se aplica igual en las dos páginas (ES/EN) que usan estos componentes.
   Un solo color por grupo de tarjetas, no alterna — la alternancia acá se
   probó y no convenció. Las dos intros y la ficha de César usan el mismo
   verde que los 3 hitos, para que todo el bloque lea como una unidad. */
#quienes-somos .grid-hitos .hito,
#quienes-somos .panel,
#quienes-somos .founder {
  background: var(--accent-tint);
}

/* Trayectoria: los 4 proyectos destacados pasan a blanco, igual que las
   filas de empresa de más abajo — antes alternaban celeste/verde, y las
   tarjetas verdes se volvían invisibles contra el fondo verde de la
   sección (mismo color de las dos cosas). Toda la página queda con un
   solo criterio: sección en verde, tarjetas en blanco. */
#listado-trayectoria .grid-destacados .hito { background: #fff; }

/* Asociaciones Estratégicas: un solo color de fondo para toda la sección
   (antes mezclaba celeste de fondo con tarjetas verdes) y tarjetas
   blancas, mismo criterio que Trayectoria. min-height + centrado vertical
   para que el color llegue hasta abajo — es una página con muy poco
   contenido, y sin esto la sección se achica a su contenido y deja un
   resto de página en blanco debajo, que es lo que se veía mal. */
#asociaciones {
  min-height: 60vh;
  display: flex; flex-direction: column; justify-content: center;
}
#asociaciones .grid-hitos .hito { background: #fff; }

/* --- 9. Equipo asesor --------------------------------------------------- */
.section-intro { font-size: 16px; line-height: 1.7; color: var(--ink2); margin-bottom: 48px; }

/* Rótulo antes de un sub-bloque dentro de una sección (por ejemplo,
   separar "Proyectos destacados" de "Empresas" en Trayectoria). Mismo
   lenguaje tipográfico que el rótulo "Por qué CLOUDMPR" (.why-compact > h3):
   un subtítulo de bloque, no una etiqueta chica perdida. */
.block-label {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px;
}
.block-intro { font-size: 16px; line-height: 1.7; color: var(--ink2); margin-bottom: 32px; }

/* Trayectoria (trayectoria.html): ritmo vertical propio de esta
   sección. Regla única en vez de valores sueltos: 32px después de un
   párrafo o de un bloque de contenido, 16px entre un rótulo y lo que le
   sigue. Acotado a #listado-trayectoria — OJO: no usar "#trayectoria",
   ese id ya existe en index.html (la tarjeta resumen de la home) y
   styles.css es compartido por todo el sitio. */
#listado-trayectoria { padding-top: 72px; background: var(--accent-tint); }
#listado-trayectoria .section-head { margin-bottom: 40px; }
#listado-trayectoria .section-intro { margin-bottom: 32px; }
/* Con la sección en verde, las filas de empresa necesitan un fondo propio
   para seguir leyéndose como tarjetas — antes no los tenían porque el
   fondo de la sección y el de acá abajo eran el mismo blanco. */
#listado-trayectoria .company { background: #fff; }
#listado-trayectoria .grid-destacados { margin-bottom: 32px; }
/* Asociaciones Estratégicas: la sección completa pasa a celeste. Sus
   tarjetas "hito" pasan a blanco — ver la regla junto con el resto de los
   ajustes de color, más abajo. */
#asociaciones { background: var(--navy-tint); }

/* El cambio de fondo de la franja dual que sigue ya separa la sección;
   la línea encima ensuciaba. */
#equipo-asesor { border-bottom: 0; }

/* Enlace de "ver más", usado para mandar de la home a una página interna
   (Asociaciones Estratégicas, Empresas y Clientes). */
.link-arrow { font-size: 15px; font-weight: 600; color: var(--navy); }
.link-arrow:hover { color: var(--ink); }
/* Filas en vez de tarjetas: el alto de la sección crece de a uno y no quedan
   huecos, sirva para 5, 6 o los asesores que haya.                        */
.grid-advisors { display: block; border-top: 1px solid var(--line); }

.advisor {
  display: grid;
  grid-template-columns: 44px 220px 1fr;
  column-gap: 28px;
  align-items: start;
  border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.advisor .initials {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--mono); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
/* Alternan azul/verde, mismo criterio que las 4 tarjetas de "Qué hacemos"
   (2 insignias azules, 2 verdes) aplicado acá. */
.grid-advisors .advisor:nth-child(2n) .initials { background: var(--accent); }
.advisor .name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.advisor .role { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.advisor p { font-size: 13.5px; line-height: 1.6; color: var(--ink2); }

/* Ubicación de cada elemento en la grilla de la fila. */
.advisor .initials { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
.advisor .name     { grid-column: 2; grid-row: 1; font-size: 17px; }
.advisor .role     { grid-column: 2; grid-row: 2; margin-bottom: 0; }
.advisor p         { grid-column: 3; grid-row: 1 / span 2; font-size: 15px; }

/* Empresas y Asociaciones eran dos secciones de un párrafo cada una, con
   100px de aire arriba y abajo. Juntas y a dos columnas ocupan lo que les
   corresponde y le dan al medio de la página un bloque con densidad.      */
.franja-dual {
  background: var(--accent-tint);
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  padding: 88px 48px;
}
.franja-dual > .section {
  padding: 0; border-bottom: 0; background: none;
}
.franja-dual .section-head { margin-bottom: 28px; }
.franja-dual .section-head h2 { font-size: 26px; }

@media (max-width: 900px) {
  .franja-dual { grid-template-columns: 1fr; gap: 48px; padding: 64px 24px; }
}

/* --- 10. Industrias -----------------------------------------------------
   Tres columnas en escritorio: ícono, nombre, descripción.
   En celular pasa a dos filas para que el texto no se parta.             */
.industries { padding: 72px 48px; }
.industry {
  display: grid; grid-template-columns: 36px 320px 1fr;
  align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line);
}
.industry:last-of-type { border-bottom: 1px solid var(--line); }
.industry .name { font-size: 17px; font-weight: 600; }
.industry .desc { font-size: 14px; line-height: 1.6; color: var(--ink2); }

/* --- 11. Capacidad de Ejecución / QHSE -----------------------------------
   Mismo patrón que "Por qué CLOUDMPR" (borde izquierdo, sin caja): el sitio
   ya tiene demasiadas tarjetas blancas, y son afirmaciones de capacidad, no
   servicios con resultado. Tres columnas: tres arriba, dos abajo.         */
.grid-qhse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.grid-qhse > div { padding-left: 18px; border-left: 2px solid var(--navy); }
.grid-qhse > div:nth-child(2n) { border-left-color: var(--accent); }
.grid-qhse h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.grid-qhse p { font-size: 14px; line-height: 1.65; color: var(--ink2); }

/* --- 12. Contacto ------------------------------------------------------- */
.contact { background: var(--navy); padding: 100px 48px; border-bottom: none; }
.contact .section-head h2 { color: #fff; }
.contact .section-head .n { color: var(--navy-muted); }
/* Oculto en desktop: ahí los datos completos ya están a la vista, al lado
   del formulario, así que esta línea sería repetir información. Se
   muestra solo en el breakpoint mobile, más abajo. */
.contact-quick {
  display: none; font-size: 14px; color: var(--navy-muted); margin-bottom: 32px;
}
.contact-quick a { color: #fff; font-weight: 600; }
.contact-quick a:hover { color: var(--navy-muted2); }
/* El formulario va primero en el HTML (ver comentario en index.html), pero
   en desktop se sigue viendo con los datos a la izquierda: el order lo
   pone acá, no en el orden del documento. */
.grid-contact { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.grid-contact > div { order: 1; }
.grid-contact > form { order: 2; }
.contact-item { margin-bottom: 32px; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item .lbl {
  font-family: var(--mono); font-size: 12px; color: var(--navy-muted); margin-bottom: 10px;
}
.contact-item .val, .contact-item a { font-size: 17px; color: #fff; line-height: 1.6; word-break: break-word; }
.contact-item a:hover { color: var(--navy-muted2); }

form {
  background: #fff; border-radius: 16px; padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  /* min-width:0 evita que el formulario empuje el ancho de la página. */
  min-width: 0;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; color: var(--ink3); font-family: var(--mono); }
.field input, .field textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px;
  font-size: 16px; /* 16px evita que el celular haga zoom al tocar el campo */
  color: var(--ink); font-family: var(--sans); width: 100%; min-width: 0;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.field textarea { resize: vertical; }
.honeypot { display: none; }
form button {
  grid-column: 1 / -1; justify-self: start; background: var(--navy); color: #fff;
  border: none; border-radius: 24px; padding: 13px 30px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans);
}
form button:hover { background: oklch(0.35 0.11 260); }

/* --- 11b. Empresas y clientes (página aparte) ----------------------------
   Un <details> nativo por empresa: se abre y cierra solo, sin JavaScript.  */
.companies { display: flex; flex-direction: column; gap: 12px; }
.company { border: 1px solid var(--line); border-radius: 12px; }
.company summary {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px 16px; padding: 20px 24px; cursor: pointer; list-style: none;
}
.company summary::-webkit-details-marker { display: none; }
.company summary .biz { font-size: 15px; font-weight: 600; }
/* Ancho fijo: sin esto, la caja de ubicación/cantidad se angosta o
   ensancha según el largo del texto de cada empresa, y la ubicación
   y el "+" quedan en distinta posición horizontal fila a fila. */
.company summary .meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 4px 16px; font-family: var(--mono); font-size: 12px; color: var(--ink3);
  flex: 0 0 220px; width: 220px;
}
/* .loc ocupa siempre su propia línea completa (flex-basis: 100%), así una
   ubicación larga se envuelve normalmente en vez de mezclarse con .count. */
.company summary .meta .loc { flex: 1 1 100%; text-align: right; }
.company summary .meta .count { white-space: nowrap; color: var(--accent); }
.company summary .meta::after { content: '+'; font-size: 16px; color: var(--navy); }
.company[open] summary .meta::after { content: '–'; }
.company ul { margin: 0; padding: 4px 24px 20px 44px; border-top: 1px solid var(--line); }
.company li { font-size: 14px; line-height: 1.6; color: var(--ink2); padding-top: 14px; }
.company li::marker { color: var(--accent); }

/* --- 13. Pie ------------------------------------------------------------ */
.footer {
  padding: 24px 32px; background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--navy-muted); flex-wrap: wrap; gap: 12px;
}
.footer .lema { font-style: italic; }

/* =========================================================================
   13. Pantallas chicas (celulares y tablets)
   Todo lo de acá abajo se aplica solo cuando la pantalla mide menos de
   1060px de ancho. Es lo que antes hacía el JavaScript y ahora resuelve
   el navegador solo.
   ========================================================================= */
@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: flex; }

  .hero-inner { padding: 45px 24px; }
  .hero h1 { font-size: 32px; }
  .stats { gap: 28px; }

  .section, .contact { padding: 56px 24px; }
  .industries { padding: 56px 24px; }
  .why-compact { padding: 40px 24px; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 26px; }

  .grid-services,
  .grid-situations,
  .grid-why,
  .grid-intro,
  .grid-hitos,
  .grid-destacados,
  .grid-qhse,
  .grid-contact { grid-template-columns: 1fr; }

  /* En una sola columna, el formulario va primero (orden real del HTML):
     quien toca "Hablemos de su proyecto" quiere escribir, no buscar el
     teléfono. Los datos de contacto quedan debajo. */
  .grid-contact > div,
  .grid-contact > form { order: initial; }

  /* Acá sí se muestra: mail y teléfono directos, visibles junto con el
     título antes de llegar al formulario, para quien no quiere completarlo. */
  .contact-quick { display: block; }

  .grid-why { gap: 28px; }
  .grid-contact { gap: 40px; }

  .founder { padding: 24px; grid-template-columns: 1fr; gap: 24px; }
  .founder img { width: 96px; height: 96px; }

  /* Industrias: el ícono y el nombre van en una fila, la descripción abajo,
     ocupando todo el ancho. Este era el bloque que partía el texto
     palabra por palabra. */
  .industry { grid-template-columns: 28px 1fr; gap: 8px 16px; }
  .industry .desc { grid-column: 1 / -1; margin-top: 6px; }

  /* Formulario: una sola columna. Era la causa del scroll horizontal. */
  form { grid-template-columns: 1fr; padding: 24px; }

  .footer { flex-direction: column; align-items: flex-start; }

  /* Empresas y clientes: el ancho fijo de .meta no entra junto al nombre
     en pantallas chicas, así que pasa a ocupar todo el ancho, debajo
     del nombre de la empresa. */
  .company summary .meta { flex: 1 1 100%; width: auto; justify-content: flex-start; }
  .company summary .meta .loc { text-align: left; }

  /* Trayectoria: el ritmo vertical propio de #listado-trayectoria (ver más
     arriba) usa un selector con ID, que le gana en especificidad a las
     reglas de mobile de acá arriba aunque vengan antes en el archivo. Sin
     este bloque, la sección no se aprieta en mobile como el resto del sitio. */
  #listado-trayectoria { padding-top: 56px; }
  #listado-trayectoria .section-head { margin-bottom: 32px; }
  #listado-trayectoria .section-intro,
  #listado-trayectoria .grid-destacados,
  #listado-trayectoria .block-intro { margin-bottom: 24px; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { height: 240px; }
}

@media (max-width: 900px) {
  .advisor { grid-template-columns: 44px 1fr; row-gap: 4px; }
  .advisor .name { grid-column: 2; grid-row: 1; }
  .advisor .role { grid-column: 2; grid-row: 2; }
  .advisor p     { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 28px; }
  .stats { gap: 20px; }
  .header-bar { padding: 14px 20px; }
  .nav-mobile { padding: 8px 20px 20px; }
  .section, .contact, .industries { padding: 48px 20px; }
  .why-compact { padding: 32px 20px; }
}

/* Respeta a quien pidió menos animación en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}