@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;800&family=Mulish:wght@400;600;700&display=swap');

/*
 * La página corporativa de Ganbaru.
 *
 * Comparte paleta, tipografías y proporciones con la aplicación —el azul es
 * el #0055B7 de Grupo ABSA, las fuentes son Archivo y Mulish— para que quien
 * pase de aquí a la app no sienta que cambió de empresa. Pero NO importa el
 * sistema de diseño entero: esto es un sitio estático de un archivo, y
 * arrastrar `ds.css` para usar el 5% obligaría a mantener dos copias.
 */

:root {
  --brand: #0055b7;
  --brand-press: #004496;
  --on-brand: #ffffff;
  --tinta: #10161c;
  --texto: #2e3942;
  --suave: #5c6975;
  --tenue: #666d71; /* 4.74:1 sobre blanco — medido, no elegido a ojo */
  --papel: #ffffff;
  --papel-2: #f5f7f9;
  --linea: #e3e7eb;
  --verde: #1f7a4d;
  --ancho: 1080px;
  --r: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --brand: #5a93d6;
    --brand-press: #7faadb;
    /* En oscuro la marca se aclara para despegarse del fondo, así que lo que
       va encima tiene que oscurecerse. Ese par se revisa junto: blanco sobre
       este azul se queda en 2.9:1 y no pasa. */
    --on-brand: #0f1316;
    --tinta: #f2f3f4;
    --texto: #d2d5d7;
    --suave: #a4a9ad;
    --tenue: #8a9093;
    --papel: #0f1316;
    --papel-2: #161b1f;
    --linea: #2a3238;
    --verde: #46a37a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 400 17px/1.65 Mulish, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .marca { font-family: Archivo, Helvetica, Arial, sans-serif; letter-spacing: -0.02em; }
h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.06; font-weight: 800; color: var(--tinta); margin: 0 0 18px; }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; font-weight: 800; color: var(--tinta); margin: 0 0 14px; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--tinta); margin: 0 0 6px; }
p  { margin: 0 0 16px; }
a  { color: var(--brand); }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.seccion { padding: 84px 0; }
.seccion--alterna { background: var(--papel-2); }
.eyebrow {
  font-family: Archivo, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 10px;
}
.plomo { font-size: 19px; color: var(--suave); max-width: 60ch; }

/* ------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; gap: 16px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; color: var(--tinta); text-decoration: none; }
.marca img { width: 30px; height: 30px; border-radius: 7px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--texto); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a:hover { color: var(--brand); }
@media (max-width: 860px) { .nav { display: none; } }

/* --------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 10px; text-decoration: none;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 16px;
  border: 1.5px solid transparent; cursor: pointer;
}
.boton--primario { background: var(--brand); color: var(--on-brand); }
.boton--primario:hover { background: var(--brand-press); }
.boton--fantasma { border-color: var(--linea); color: var(--tinta); background: var(--papel); }
.boton--fantasma:hover { border-color: var(--brand); color: var(--brand); }
.botonera { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ----------------------------------------------------------------- héroe */
.heroe { padding: 76px 0 70px; }
.heroe__rejilla { display: grid; gap: 48px; grid-template-columns: 1.15fr 0.85fr; align-items: center; }
@media (max-width: 900px) { .heroe__rejilla { grid-template-columns: 1fr; gap: 34px; } }
.heroe__nota { font-size: 15px; color: var(--tenue); margin-top: 18px; }
.heroe img {
  display: block; width: 100%; max-width: 300px; margin: 0 auto; height: auto;
  border-radius: 22px; border: 1px solid var(--linea);
  box-shadow: 0 18px 50px rgba(16, 22, 28, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .heroe img { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
}

/* --------------------------------------------------------------- kanji */
.kanji {
  font-family: Archivo, serif; font-size: clamp(72px, 13vw, 132px);
  font-weight: 800; line-height: 1; color: var(--brand); margin: 0 0 6px;
}

/* -------------------------------------------------------------- rejillas */
.rejilla { display: grid; gap: 20px; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 26px;
}
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__num {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 13px;
  color: var(--on-brand); background: var(--brand);
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

.lista { margin: 0; padding: 0; list-style: none; }
.lista li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.lista li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--verde); font-weight: 800;
}

/* ------------------------------------------------------------- cierre */
.cierre { background: var(--brand); color: var(--on-brand); }
.cierre h2 { color: var(--on-brand); }
.cierre p { color: var(--on-brand); opacity: 0.92; }
.cierre .boton--primario { background: var(--on-brand); color: var(--brand); }
.cierre .boton--fantasma { border-color: var(--on-brand); color: var(--on-brand); background: transparent; }

/* --------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--linea); padding: 40px 0; font-size: 15px; color: var(--tenue); }
.pie__fila { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie a { color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--brand); }
.pie__derecha { margin-left: auto; }
@media (max-width: 640px) { .pie__derecha { margin-left: 0; } }

/* Quien prefiere menos movimiento no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }