/* ══════════════════════════════════════════════════════════════════
   www.syrion.cl — la maqueta del sitio

   Los colores, la letra y el logo son los de la aplicación
   (app.syrion.cl), tomados del documento de diseño de Syrion. Si algo
   cambia allá, se cambia acá igual: el sitio y el sistema tienen que
   verse como una sola cosa.

   Tema claro, como la aplicación. El único bloque oscuro es la vitrina
   de la portada, porque los logos son renders sobre azul noche.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Neutros */
  --fondo: #F4F6F9;
  --sup: #FFFFFF;
  --bd: #E4E9EF;
  --txt: #0A1B2E;
  --sv: #5B6E85;
  --sv2: #8698AB;

  /* Un color por módulo. Nunca se intercambian. */
  --mod-contable: #2368C9;
  --mod-tesoreria: #017A87;
  --mod-impuestos: #A45300;
  --mod-rrhh: #29810C;
  --mod-inventarios: #7C4FBB;

  /* Acciones */
  --accion: #007F62;
  --enlace: #1B4FD8;

  /* El azul noche de los renders del logo */
  --portada: #03204A;
  --blanco: #FFFFFF;
  --negro: #0E131A;

  --radio: 12px;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  color: var(--txt);
  background: var(--sup);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
a { color: var(--enlace); }

.ancho { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* ── Botones ─────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.boton-primario { background: var(--mod-contable); color: var(--blanco); }
.boton-primario:hover { background: color-mix(in srgb, var(--mod-contable) 85%, var(--txt)); }
.boton-claro { background: var(--sup); color: var(--txt); border-color: var(--bd); }
.boton-claro:hover { border-color: var(--sv2); }

/* ── Cabecera ────────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--sup) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bd);
}
.cabecera-fila { display: flex; align-items: center; gap: 28px; height: 68px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--txt); }
.lockup > span { display: flex; flex-direction: column; }
.lockup-nombre { font-size: 21px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.lockup-sub {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mod-contable);
}
.menu { display: flex; gap: 24px; margin-left: auto; }
.menu a { color: var(--sv); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: var(--txt); }

/* ── Portada ─────────────────────────────────────────────────────── */
.portada {
  padding: 72px 0 80px;
  background: linear-gradient(180deg, var(--fondo), var(--sup));
  border-bottom: 1px solid var(--bd);
}
.portada-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.antetitulo {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mod-contable);
}
.portada h1 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; }
.portada h1 em { font-style: normal; color: var(--mod-contable); }
.bajada { margin: 20px 0 0; font-size: 18px; color: var(--sv); max-width: 560px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* La vitrina: el mismo bloque que la entrada de la aplicación. La
   máscara esfuma el borde de cada render para que no se vea su
   rectángulo sobre el azul. */
.vitrina {
  padding: 40px 32px 34px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 55% at 35% 35%, color-mix(in srgb, var(--portada) 85%, var(--mod-contable)), transparent 75%),
    var(--portada);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--portada) 70%, transparent);
}
.vitrina-lockup { position: relative; container-type: inline-size; }
.vitrina-lockup img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at 50% 50%, #000 52%, transparent 96%);
  mask-image: radial-gradient(ellipse 74% 72% at 50% 50%, #000 52%, transparent 96%);
}
/* La palabra de abajo va donde el render decía «CONTABLE». */
.vitrina-sub {
  position: absolute;
  left: 35.1%;
  top: 78.6%;
  transform: translateY(-50%);
  font-size: 3.6cqw;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--mod-contable) 60%, var(--blanco));
}
.vitrina-modulos { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px; justify-content: center; }
.vitrina-modulos img {
  height: 36px;
  width: auto;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 55%, transparent 100%);
}

/* ── Secciones ───────────────────────────────────────────────────── */
.seccion { padding: 84px 0; }
.seccion-alterna { background: var(--fondo); border-block: 1px solid var(--bd); }
.seccion h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; max-width: 760px; }
.seccion-bajada { margin: 14px 0 0; font-size: 17px; color: var(--sv); max-width: 680px; }

/* Módulos: tarjeta clara con la franja oscura del logo arriba, y el
   color del módulo en el borde superior y en las viñetas. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.tarjeta {
  background: var(--sup);
  border: 1px solid var(--bd);
  border-top: 3px solid var(--ac);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.tarjeta:hover { box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ac) 60%, transparent); transform: translateY(-2px); }
/* El fondo de la franja es casi negro, como el de los renders de los
   módulos (el de Contable es más azul; la máscara lo funde igual). */
.tarjeta-logo {
  display: grid;
  place-items: center;
  height: 120px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, color-mix(in srgb, var(--ac) 14%, var(--negro)), transparent 80%),
    var(--negro);
}
.tarjeta-logo img {
  width: auto;
  height: 86px;
  -webkit-mask-image: radial-gradient(ellipse 68% 70% at 50% 50%, #000 50%, transparent 98%);
  mask-image: radial-gradient(ellipse 68% 70% at 50% 50%, #000 50%, transparent 98%);
}
.tarjeta h3 { margin: 22px 24px 0; font-size: 20px; font-weight: 700; }
.tarjeta ul { list-style: none; margin: 12px 24px 26px; padding: 0; color: var(--sv); font-size: 15px; }
.tarjeta li { position: relative; padding-left: 20px; margin-top: 7px; }
.tarjeta li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac);
}

/* Cómo trabaja */
.razones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.razon { background: var(--sup); border: 1px solid var(--bd); border-radius: var(--radio); padding: 26px; }
.razon-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mod-contable) 12%, var(--sup));
  color: var(--mod-contable);
  font-weight: 700;
}
.razon h3 { margin-top: 16px; font-size: 18px; font-weight: 700; }
.razon p { margin: 8px 0 0; color: var(--sv); font-size: 15px; }

/* Contacto */
.contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  border-radius: 18px;
  border: 1px solid var(--bd);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mod-contable) 7%, var(--sup)), var(--sup));
}
.contacto h2 { font-size: clamp(22px, 2.4vw, 28px); }
.contacto p { margin: 8px 0 0; color: var(--sv); }
.contacto .acciones { margin-top: 0; }

/* ── Pie ─────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--bd); padding: 26px 0; color: var(--sv); font-size: 14px; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.lockup-chico .lockup-nombre { font-size: 17px; }
.pie a { color: var(--sv); }

/* ── Angosto ─────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .portada { padding: 44px 0 56px; }
  .portada-fila { grid-template-columns: 1fr; gap: 36px; }
  .razones { grid-template-columns: 1fr; }
  .menu { display: none; }
  .cabecera-fila { justify-content: space-between; }
  .contacto { padding: 28px 22px; }
}