/* ============================================================
   CLB Ingeniería y Proyectos en Energía Sostenible S.A.C.
   1. Sistema de diseño — variables, reset, tipografía, layout
   ============================================================ */

:root {
  /* Paleta */
  --navy:        #252d57;
  --navy-dark:   #1a2040;
  --navy-light:  #3a437a;
  --green:       #0a723e;
  --green-light: #0e8f4e;
  --green-soft:  #7fd6a6;
  --gray-bg:     #f4f6f9;
  --text:        #333a45;
  --muted:       #6b7280;
  --border:      #e6e9f2;
  --border-form: #d5dae6;
  --white:       #ffffff;

  /* Tipografía */
  --font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', Arial, sans-serif;

  /* Sombras */
  --shadow-sm: 0 4px 18px rgba(20, 25, 60, .06);
  --shadow-md: 0 10px 30px rgba(20, 25, 60, .10);
  --shadow-lg: 0 14px 34px rgba(20, 25, 60, .14);
  --shadow-nav: 0 2px 12px rgba(20, 25, 60, .08);

  /* Espaciado */
  --container:   1200px;
  --gutter:      24px;
  --section-pad: 90px;
  --radius:      8px;
  --radius-sm:   5px;

  /* Alturas fijas (usadas para el scroll con anclas) */
  --topbar-h: 38px;
  --header-h: 84px;
}

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

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

a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-light); }

ul, ol { list-style: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Tipografía ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.25;
  font-weight: 800;
}

h1 { font-size: 46px; line-height: 1.18; }
h2 { font-size: 34px; }
h3 { font-size: 20px; }
h4 { font-size: 15px; font-weight: 700; }

p { line-height: 1.7; }

strong, b { font-weight: 700; }

/* ── Layout ───────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section,
.section { padding: var(--section-pad) 0; }

.section-tight { padding: 70px 0; }

.bg-gray  { background: var(--gray-bg); }
.bg-white { background: var(--white); }

.center { text-align: center; }

/* ── Encabezados de sección ───────────────────────────────── */
.sec-kicker {
  font-family: var(--font-head);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sec-title {
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 14px;
}

.sec-title-sm { font-size: 26px; }

.sec-sub {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  max-width: 680px;
  margin: 0 auto 54px;
  line-height: 1.6;
}

.sec-sub-tight { margin-bottom: 40px; }

/* Variante alineada a la izquierda */
.text-left .sec-kicker,
.text-left .sec-title,
.text-left .sec-sub { text-align: left; margin-left: 0; }

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 28px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: .3px;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  text-align: center;
}

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

.btn-outline { border: 2px solid var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255, 255, 255, .15); color: var(--white); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-light); color: var(--white); }

.btn-ghost { border: 2px solid var(--green); color: var(--green); }
.btn-ghost:hover { background: var(--green); color: var(--white); }

.btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs-section {
  background: var(--gray-bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.breadcrumbs {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.breadcrumbs a { color: var(--navy); }
.breadcrumbs a:hover { color: var(--green); }
.breadcrumbs .separator { margin: 0 8px; color: #b6bccd; }
.breadcrumbs .current { color: var(--green); }

/* ── Mensajes flash ───────────────────────────────────────── */
.flash-message {
  padding: 14px 0;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
}

.flash-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.flash-success { background: #e7f7ee; color: #0a723e; border-bottom: 1px solid #bfe8d2; }
.flash-error   { background: #fdeceb; color: #b42318; border-bottom: 1px solid #f6cfcb; }
.flash-info    { background: #eaf1fb; color: var(--navy); border-bottom: 1px solid #cddcf3; }

.flash-close {
  font-size: 22px;
  line-height: 1;
  color: inherit;
  opacity: .6;
}
.flash-close:hover { opacity: 1; }

/* ── Utilidades ───────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #fff;
  padding: 10px 18px;
  z-index: 999;
  font-family: var(--font-head);
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ── Animación de aparición ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-left.is-visible,
.reveal-right.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}