:root {
  --lc-teal: #4997D0;       /* celeste bandera: botones, títulos, hero */
  --lc-teal-dark: #1F4E79;  /* azul oscuro: al pasar el mouse */
  --lc-dark: #14375A;       /* barra superior y pie de página */
  --lc-mint: #E8B923;       /* dorado: acentos (Políglota, botón amarillo) */
  --lc-light: #F3F8FC;      /* fondo de secciones claras */
  --lc-text: #1F2D3A;
  --lc-muted: #5B6B7C;
}

body {
  color: var(--lc-text);
  background: #fff;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, .lc-brand { font-family: Cambria, Georgia, "Times New Roman", serif; }

/* ---------- Barra de navegación ---------- */
.lc-nav { background: var(--lc-dark); }
.lc-nav .navbar-brand { color: #fff; font-weight: 700; font-size: 1.35rem; }
.lc-nav .navbar-brand span { color: var(--lc-mint); }
.lc-nav .nav-link { color: #D6E6F5; }
.lc-nav .nav-link:hover, .lc-nav .nav-link:focus { color: #fff; }
.lc-nav .navbar-toggler { border-color: rgba(255, 255, 255, .35); }
.lc-nav .navbar-toggler-icon { filter: invert(1); }
.lc-nav .lc-usuario { color: #D6E6F5; font-size: .95rem; }

/* ---------- Botones ---------- */
.btn-lc { background: var(--lc-teal); border-color: var(--lc-teal); color: #fff; }
.btn-lc:hover, .btn-lc:focus { background: var(--lc-teal-dark); border-color: var(--lc-teal-dark); color: #fff; }
.btn-lc-mint { background: var(--lc-mint); border-color: var(--lc-mint); color: var(--lc-dark); font-weight: 600; }
.btn-lc-mint:hover { background: #CFA012; border-color: #CFA012; color: var(--lc-dark); }
.btn-outline-lc { color: var(--lc-teal); border-color: var(--lc-teal); }
.btn-outline-lc:hover { background: var(--lc-teal); color: #fff; }
a { color: var(--lc-teal); }
a:hover { color: var(--lc-teal-dark); }
.form-control:focus { border-color: var(--lc-teal); box-shadow: 0 0 0 .2rem rgba(73, 151, 208, .25); }

/* ---------- Portada ---------- */
.lc-hero { background: var(--lc-dark); color: #fff; padding: 4.5rem 0 4rem; }
.lc-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
.lc-hero h1 span { color: var(--lc-mint); }
.lc-hero p.lead { color: #D6E6F5; max-width: 36rem; }
.lc-hero-icono {
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--lc-mint); color: var(--lc-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 4.5rem; font-weight: 700; margin: 0 auto;
}

.lc-seccion { padding: 3.5rem 0; }
.lc-seccion-alt { background: var(--lc-light); }
.lc-titulo-seccion { color: var(--lc-teal); font-weight: 700; margin-bottom: .5rem; }

.lc-paso-numero {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--lc-teal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3rem; margin-bottom: .75rem;
}

.lc-tarjeta {
  background: #fff; border: 1px solid #DCE8F3; border-radius: 14px;
  padding: 1.5rem; height: 100%;
}
.lc-seccion-alt .lc-tarjeta { border-color: transparent; box-shadow: 0 1px 3px rgba(20, 55, 90, .10); }
.lc-precio { color: var(--lc-teal); font-weight: 700; font-size: 1.25rem; }
.lc-chip {
  display: inline-block; background: #E4F0FA; color: var(--lc-teal-dark);
  border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; margin: 0 .25rem .25rem 0;
}

/* ---------- Formularios (login / registro) ---------- */
.lc-auth { max-width: 460px; margin: 3rem auto; }
.lc-auth-ancha { max-width: 760px; }
.lc-auth .card { border: 1px solid #DCE8F3; border-radius: 16px; box-shadow: 0 6px 24px rgba(20, 55, 90, .10); }
.lc-avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  background: var(--lc-teal); color: #fff; font-size: 2.2rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.lc-requisitos { list-style: none; padding-left: 0; margin: .5rem 0 0; font-size: .875rem; }
.lc-requisitos li { color: var(--lc-muted); }
.lc-requisitos li::before { content: "○ "; }
.lc-requisitos li.cumple { color: #0f7a4d; }
.lc-requisitos li.cumple::before { content: "● "; }

/* ---------- Paneles ---------- */
.lc-stat { text-align: center; }
.lc-stat .lc-stat-num { font-size: 2.4rem; font-weight: 700; color: var(--lc-teal); line-height: 1.1; }
.lc-stat .lc-stat-txt { color: var(--lc-muted); }

footer.lc-footer { background: var(--lc-dark); color: #A9C1D9; font-size: .9rem; }