/* ================================
   HUMAN — SISTEMA BASE CSS LIMPIO
================================ */

/* ===== RESET ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== VARIABLES ===== */

:root {

  /* MARCA */
  --color-primary: #1712AA;
  --color-primary-dark: #05043B;

  /* BASE */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F9FAFB;

  --color-text: #333333;
  --color-text-light: #FFFFFF;

  --color-border: #CCCCCC;
  --color-border-dark: rgba(255, 255, 255, 0.10);

  /* CAJAS */
  --color-box-bg: var(--color-bg);
  --color-box-bg-dark: var(--color-primary-dark);

  /* CONTEXTO CLARO */
  --bg-light: var(--color-bg-alt);
  --text-h2-light: var(--color-primary);
  --text-body-light: var(--color-primary-dark);
  --line-light: var(--color-border);

  /* CONTEXTO OSCURO */
  --bg-dark: var(--color-primary-dark);
  --text-h2-dark: var(--color-bg-alt);
  --text-body-dark: var(--color-border);
  --line-dark: var(--color-primary);

  /* CONTEXTO MEDIO */
  --bg-primary: var(--color-primary);
  --text-h2-primary: var(--color-text-light);
  --text-body-primary: var(--color-bg-alt);
  --line-primary: var(--color-primary-dark);

  /* HERO */
  --hero-bg: var(--color-primary-dark);
  --hero-h1: var(--color-text-light);
  --hero-h2: var(--color-bg-alt);
  --hero-body: var(--color-border);
  --hero-line: var(--color-border);

  /* BOTONES */
  --color-btn: var(--color-primary);
  --color-btn-hover: var(--color-primary-dark);
  --color-btn-alt: #FF5A2F;
  --color-btn-alt-hover: #CC3F1F;
  --color-btn-green: #91ED0E;
  --color-btn-green-hover: #5E990B;

  /* WHATSAPP */
  --color-whatsapp: #32CD32;
  --color-whatsapp-hover: #175E17;

  /* SOMBRAS */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* LAYOUT */
  --container-width: 1200px;

}

/* ===== BASE ===== */

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

/* ===== CONTENEDOR UNIVERSAL ===== */

.lb-container {
  max-width: var(--container-width);
  margin: 0 auto;
}

/* ====================================
   ESPACIADO
==================================== */

.lb-mb-sm { margin-bottom: 15px; }
.lb-mb-md { margin-bottom: 30px; }
.lb-mb-lg { margin-bottom: 30px; }

.lb-mt-sm { margin-top: 15px; }
.lb-mt-md { margin-top: 30px; }
.lb-mt-lg { margin-top: 30px; }

/* ====================================
   ALINEACIÓN
==================================== */

.lb-left   { text-align: left; }
.lb-center { text-align: center; }
.lb-right  { text-align: right; }

/* ====================================
   BLOQUES DE TEXTO
==================================== */

.lb-text-left {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.lb-text-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.lb-text-right {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

/* ====================================
   ANCHOS DE LECTURA
==================================== */

.lb-text-narrow { max-width: 650px; }
.lb-text-medium { max-width: 850px; }
.lb-text-wide   { max-width: 1000px; }

.lb-text-block {
  margin-left: auto;
  margin-right: auto;
}

/* ====================================
   HERO
==================================== */

.lb-hero {
  background: var(--hero-bg);
  color: var(--color-text-light);
  padding: 80px 6%; /* antes: 120px 8% */
}

.lb-hero-container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px; /* antes: 80px */
}

.lb-eyebrow {
  font-size: 13px; /* antes: 16px */
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hero-h2);
  margin-bottom: 18px; /* antes: 24px */
  font-weight: 700;
}

.lb-hero h1 {
  font-size: 42px; /* antes: 60px */
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 28px; /* antes: 40px */
}

.lb-hero-right {
  display: flex;
  gap: 30px;
  max-width: 520px;
}

.lb-hero-line {
  width: 6px;
  background: var(--color-primary);
}

.lb-hero-text {
  font-size: 18px; /* antes: 24px */
  line-height: 1.5;
  font-weight: 500;
}

.lb-hero-text p {
  margin-bottom: 18px; /* antes: 24px */
}

/* ====================================
   LISTAS / VIÑETAS
==================================== */

.lb-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.lb-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  color: inherit;
}

.lb-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--color-primary);
  font-weight: 700;
}

.lb-list--dash li::before {
  content: "—";
  font-weight: 600;
}

/* CONTEXTO OSCURO */
.lb-section-dark .lb-list li::before {
  color: var(--line-dark);
}

/* CONTEXTO MEDIO */
.lb-section-primary .lb-list li::before {
  color: var(--line-primary);
}

/* ====================================
   SECCIONES
==================================== */

.lb-section {
  padding: 80px 6%; /* antes: 140px 8% */
  background: var(--color-bg);
}

.lb-section-alt {
  background: var(--color-bg-alt);
}

.lb-section-dark {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
}

.lb-section,
.lb-section-alt,
.lb-section-dark {
  margin-top: 0px;  /* antes: 60px */
  margin-bottom: 0px;
}

/* ===== TITULOS ===== */

.lb-section h2 {
  font-size: 36px; /* antes: 56px */
  font-weight: 900;
  margin-bottom: 20px; /* antes: 30px */
  line-height: 1.15;
  color: var(--text-h2-light);
}

.lb-section-dark h2 {
  color: var(--text-h2-dark);
}

/* ===== TEXTOS ===== */

.lb-section p {
  font-size: 17px; /* antes: 22px */
  line-height: 1.65;
  max-width: 850px;
  margin: 0 auto 16px auto; /* antes: 0 auto 20px auto */
  font-weight: 500;
  color: var(--text-body-light);
}

.lb-section-dark p {
  color: var(--text-body-dark);
}

/* ====================================
   LINKS
==================================== */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== LINEA ===== */

.lb-line {
  width: 80px; /* antes: 100px */
  height: 5px; /* antes: 6px */
  background: var(--color-primary);
  margin: 20px auto 32px auto; /* antes: 30px auto 50px auto */
}

/* ====================================
   GRID UNIVERSAL
==================================== */

.lb-grid {
  display: grid;
  gap: 32px; /* antes: 40px */
}

.lb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lb-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ====================================
   DAMERO
==================================== */

.lb-damero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px; /* antes: 80px */
  margin-top: 60px; /* antes: 100px */
  text-align: left;
}

.lb-damero.reverse {
  flex-direction: row-reverse;
}

.lb-damero-img img {
  width: 100%;
  max-width: 480px;
}

.lb-damero-text {
  max-width: 600px;
}

/* ===== TITULO ===== */

.lb-damero-text h3 {
  font-size: 22px; /* antes: 28px */
  margin-bottom: 14px; /* antes: 20px */
  color: var(--text-h2-light);
}

/* ===== TEXTO ===== */

.lb-damero-text p {
  font-size: 16px; /* antes: 20px */
  line-height: 1.65;
  margin-bottom: 12px; /* antes: 15px */
  color: var(--text-body-light);
}

/* ===== CONTEXTO OSCURO ===== */

.lb-section-dark .lb-damero-text h3 {
  color: var(--text-h2-dark);
}

.lb-section-dark .lb-damero-text p {
  color: var(--text-body-dark);
}

/* ====================================
   PASOS
==================================== */

.lb-steps-grid {
  margin: 40px auto 0 auto; /* antes: 70px */
  max-width: 950px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 70px; /* antes: 60px 90px */
}

.lb-step {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* antes: 20px */
}

.lb-step span {
  font-size: 36px; /* antes: 48px */
  font-weight: 900;
  color: var(--color-primary);
  min-width: 48px; /* antes: 60px */
}

.lb-step p {
  margin: 0;
  font-size: 17px; /* antes: 22px */
  font-weight: 600;
  color: var(--text-body-light);
}

/* CONTEXTO OSCURO */

.lb-section-dark .lb-step p {
  color: var(--text-body-dark);
}

/* ====================================
   CAJAS (SISTEMA)
==================================== */

.lb-box {
  background: var(--color-box-bg);
  color: var(--color-text);
  padding: 32px; /* antes: 40px */
  border-radius: 10px;
  border: 1px solid var(--color-border);
  transition: 0.3s;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.lb-box:hover {
  transform: translateY(-5px);
}

/* CAJA OSCURA */

.lb-box-dark {
  background: var(--color-box-bg-dark);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-dark);
}

.lb-box-dark h3,
.lb-box-dark p {
  color: var(--color-text-light);
}

/* MODIFICADORES */

.lb-box--compact { padding: 20px; }
.lb-box--big     { padding: 48px; }
.lb-box--center  { text-align: center; }

/* ====================================
   BOTONES
==================================== */

.lb-btn {
  display: inline-block;
  padding: 14px 32px; /* antes: 18px 40px */
  background: var(--color-btn);
  color: var(--color-text-light);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px; /* antes: 16px */
  letter-spacing: 1px;
  transition: 0.3s;
  margin-top: 28px; /* antes: 35px */
  text-transform: uppercase;
  border-radius: 4px;
}

.lb-btn:hover {
  background: var(--color-btn-hover);
  transform: translateY(-2px);
}

.lb-btn--green {
  background: var(--color-btn-green);
  color: var(--color-primary-dark);
}

.lb-btn--green:hover {
  background: var(--color-btn-green-hover);
}

.lb-btn--alt {
  background: var(--color-btn-alt);
  color: var(--color-text-light);
}

.lb-btn--alt:hover {
  background: var(--color-btn-alt-hover);
}
.lb-btn-outline {
  background: transparent;
  border: 2px solid var(--color-btn);
  color: var(--color-btn);
}
/* ====================================
   ALINEACIÓN DE BOTONES
==================================== */

.lb-btn-left   { display: inline-block; margin-left: 0; margin-right: auto; }
.lb-btn-center { display: table; margin-left: auto; margin-right: auto; }
.lb-btn-right  { display: table; margin-left: auto; margin-right: 0; }

/* ====================================
   IMÁGENES
==================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.lb-img-horizontal { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lb-img-square     { width: 100%; aspect-ratio: 1 / 1;  object-fit: cover; }
.lb-img-vertical   { width: 100%; aspect-ratio: 4 / 5;  object-fit: cover; }

.lb-img-left   { display: block; margin-left: 0; margin-right: auto; }
.lb-img-center { display: block; margin-left: auto; margin-right: auto; }
.lb-img-right  { display: block; margin-left: auto; margin-right: 0; }

/* ====================================
   CARRUSEL
==================================== */

.lb-carousel {
  overflow: hidden;
  position: relative;
}

.lb-carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 0.4s ease;
}

.lb-carousel-item {
  min-width: 300px;
  flex-shrink: 0;
}

/* ====================================
   ICONOS
==================================== */

.lb-icon {
  width: 48px; /* antes: 60px */
  height: 48px;
  object-fit: contain;
  margin: 0 auto 16px auto;
  fill: var(--color-primary);
}

.lb-icon-left   { display: block; margin: 0 0 16px 0; }
.lb-icon-center { display: block; margin: 0 auto 16px auto; }
.lb-icon-right  { display: block; margin: 0 0 16px auto; }
.lb-icon-top    { margin-bottom: 0; }
.lb-icon-bottom { display: block; margin: 16px auto 0 auto; }

/* ====================================
   CONTEXTO OSCURO (FONDO #05043B)
==================================== */

.lb-section-dark h2 { color: var(--text-h2-dark); }
.lb-section-dark h3 { color: var(--text-h2-dark); }
.lb-section-dark p  { color: var(--text-body-dark); }

.lb-section-dark .lb-line {
  background: var(--line-dark);
}

/* ====================================
   CONTEXTO MEDIO (FONDO #1712AA)
==================================== */

.lb-section-primary {
  background: var(--bg-primary);
  color: var(--text-body-primary);
}

.lb-section-primary h2 { color: var(--text-h2-primary); }
.lb-section-primary h3 { color: var(--text-h2-primary); }
.lb-section-primary p  { color: var(--text-body-primary); }

.lb-section-primary .lb-line {
  background: var(--line-primary);
}

/* FIX DEFINITIVO CAJAS */

.lb-box h3 { color: var(--text-h2-light); }
.lb-box p  { color: var(--text-body-light); }

.lb-box-dark h3,
.lb-box-dark p {
  color: var(--color-text-light);
}

/* ====================================
   POSICIÓN DE BLOQUES
==================================== */

.lb-block-left   { margin-left: 0; margin-right: auto; }
.lb-block-center { margin-left: auto; margin-right: auto; }
.lb-block-right  { margin-left: auto; margin-right: 0; }

.lb-block-narrow { max-width: 600px; }
.lb-block-medium { max-width: 900px; }
.lb-block-full   { max-width: 100%; }
/* ====================================
   SISTEMA DE ALINEACIÓN REAL
==================================== */

/* CONTENEDORES */
.lb-flex { display: flex; }
.lb-row { display: flex; flex-direction: row; }
.lb-col { display: flex; flex-direction: column; }

/* HORIZONTAL */
.lb-left   { justify-content: flex-start; }
.lb-center { justify-content: center; }
.lb-right  { justify-content: flex-end; }
.lb-between { justify-content: space-between; }

/* VERTICAL */
.lb-top    { align-items: flex-start; }
.lb-middle { align-items: center; }
.lb-bottom { align-items: flex-end; }

/* GAP */
.lb-gap-sm { gap: 10px; }
.lb-gap-md { gap: 20px; }
.lb-gap-lg { gap: 30px; }
/* ====================================
   RESPONSIVE
==================================== */

@media (max-width: 780px) {

  /* GRID */
  .lb-grid-2,
  .lb-grid-3 {
    grid-template-columns: 1fr;
  }

  /* DAMERO */
  .lb-damero,
  .lb-damero.reverse {
    flex-direction: column;
    text-align: center;
  }

  .lb-damero-text {
    text-align: center;
  }

  /* HERO */
  .lb-hero {
    padding: 80px 5% 60px 5%;
  }

  .lb-hero-container {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .lb-hero h1 {
    font-size: 32px;
  }

  /* SECCIONES */
  .lb-section {
    padding: 60px 5%;
  }

  /* CAJAS */
  .lb-box {
    padding: 24px;
  }

  /* STEPS */
  .lb-steps-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}