/* ═══════════════════════════════════════════════════════════════
   CUSTOMER EXPERIENCE — main.css
   Paleta corporativa · Manrope + Inter
═══════════════════════════════════════════════════════════════ */

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

/* ─── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Verdes institucionales */
  --green-primary:   #1D9E75;
  --green-hover:     #17795B;
  --green-light:     #E8F7F2;
  --green-border:    #B8E8D8;

  /* Fondos */
  --bg-site:         #F7F8F9;
  --bg-white:        #FFFFFF;
  --bg-dark:         #111827;

  /* Grises corporativos */
  --gray-border:     #E5E7EB;
  --gray-soft:       #F3F4F6;

  /* Texto */
  --text-primary:    #111827;
  --text-secondary:  #4B5563;
  --text-tertiary:   #6B7280;
  --text-on-dark:    #F9FAFB;
  --text-on-dark-2:  #D1D5DB;

  /* Estados */
  --color-success:   #16A34A;
  --color-warning:   #D97706;
  --color-error:     #DC2626;

  /* Sombras */
  --shadow-sm:       0 1px 3px rgba(17,24,39,0.06);
  --shadow-md:       0 4px 16px rgba(17,24,39,0.08);
  --shadow-lg:       0 8px 32px rgba(17,24,39,0.10);

  /* Tipografía */
  --font-heading:    'Manrope', sans-serif;
  --font-body:       'Inter', sans-serif;

  /* Escala tipográfica */
  --text-sm:         0.875rem;   /* 14px */
  --text-base:       1rem;       /* 16px */
  --text-md:         1.0625rem;  /* 17px */
  --text-lg:         1.125rem;   /* 18px */
  --text-xl:         1.25rem;    /* 20px */
  --text-2xl:        1.5rem;     /* 24px */
  --text-3xl:        2rem;       /* 32px */
  --text-4xl:        2.5rem;     /* 40px */
  --text-5xl:        3.25rem;    /* 52px */
  --text-6xl:        3.75rem;    /* 60px */

  /* Espaciado */
  --space-xs:        0.5rem;
  --space-sm:        1rem;
  --space-md:        1.5rem;
  --space-lg:        2.5rem;
  --space-xl:        4rem;
  --space-2xl:       6rem;
  --space-3xl:       8rem;

  /* Contenedor */
  --container-max:   1200px;
  --container-pad:   1.5rem;

  /* Border radius */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;

  /* Transiciones */
  --transition:      0.2s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg-site);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol { list-style: none; }

/* ─── TIPOGRAFÍA ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(2.25rem, 5vw, var(--text-6xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--text-5xl)); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p { color: var(--text-secondary); line-height: 1.75; }

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-2xl);
}

.section--lg {
  padding-block: var(--space-3xl);
}

/* ─── BOTONES ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--green-primary);
  color: #fff;
  border-color: var(--green-primary);
}
.btn--primary:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--gray-border);
}
.btn--outline:hover {
  border-color: var(--green-primary);
  color: var(--green-primary);
}

.btn--outline-white {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255,255,255,0.3);
}
.btn--outline-white:hover {
  border-color: #fff;
  color: #fff;
}

.btn--sm {
  font-size: var(--text-sm);
  padding: 0.625rem 1.25rem;
}

.btn--lg {
  font-size: var(--text-lg);
  padding: 1rem 2rem;
}

/* ─── ETIQUETA SECCIÓN ───────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-primary);
  background: var(--green-light);
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

/* ─── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ─── GRID ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─── BREADCRUMBS ────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.breadcrumb a {
  color: var(--text-tertiary);
  transition: color var(--transition);
}
.breadcrumb a:hover { color: var(--green-primary); }

.breadcrumb__sep {
  color: var(--gray-border);
  font-size: 0.625rem;
}

.breadcrumb__current {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ─── FLASH MESSAGES ─────────────────────────────────────────── */
.flash {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.flash--success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.flash--error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* ─── INPUTS & FORMS ─────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(29,158,117,0.12);
}

.form-textarea { resize: vertical; min-height: 140px; }

/* ─── DIVISOR ────────────────────────────────────────────────── */
.divider {
  width: 48px;
  height: 3px;
  background: var(--green-primary);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

/* ─── TEXTO UTILITARIOS ──────────────────────────────────────── */
.text-green    { color: var(--green-primary); }
.text-muted    { color: var(--text-tertiary); }
.text-center   { text-align: center; }
.text-sm       { font-size: var(--text-sm); }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* ─── FONDO OSCURO UTILITARIO ────────────────────────────────── */
.bg-dark { background-color: var(--bg-dark); }
.text-on-dark { color: var(--text-on-dark); }

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

/* ─── ANIMACIONES ────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --space-2xl: 4rem;
    --space-3xl: 5rem;
    --container-pad: 1.25rem;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --space-2xl: 3rem;
    --container-pad: 1rem;
  }
}