/* ==========================================================
COMPONENTS.CSS
Componentes reutilizables del sitio Soluciones Efectivas.

Contiene:
- Eyebrow
- Botones globales
- Encabezados de sección
- Enlaces
- Tarjetas genéricas
- Elementos visuales compartidos

No incluir:ç
- Header
- Footer
- Hero específicos
- Secciones de páginas
========================================================== */


/* ==========================================================
EYEBROW
========================================================== */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:var(--sea-blue-800);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}


.eyebrow::before{
  width:28px;
  height:2px;
  content:"";
  background:var(--sea-green-600);
}


.eyebrow-light{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:var(--sea-white);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.eyebrow-light::before{
 width:28px;
 height:2px;
 background:var(--sea-green-600);
 content:"";
}

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

.button{
  display:inline-flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:750;
  line-height:1.2;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}


.button:hover{
  transform:translateY(-2px);
}


.button-primary{
  color:var(--sea-white);
  background:var(--sea-blue-800);
  box-shadow:0 12px 28px rgba(24,70,135,.2);
}


.button-primary:hover{
  background:var(--sea-blue-950);
}


.button-secondary{
  color:var(--sea-blue-800);
  background:var(--sea-green-500);
}


.button-secondary:hover{
  background:var(--sea-green-700);
}


.button-light{
  color:var(--sea-blue-800);
  background:var(--sea-white);
}


.button-light:hover{
  background:var(--sea-blue-100);
}


.button-outline-light{
  color:var(--sea-white);
  border-color:rgba(255,255,255,.5);
  background:transparent;
}


.button-outline-light:hover{
  background:rgba(255,255,255,.12);
}


.button i{
  font-size:.9em;
}


/* ==========================================================
ENCABEZADOS DE SECCIÓN
Componente reutilizable para títulos de bloques.
========================================================== */

.section-heading{
  display:grid;
  align-items:end;
  gap:60px;
  margin-bottom:50px;
  grid-template-columns:1.1fr .9fr;
}

.section-heading h2{
  max-width:760px;
  margin:0;
  color:var(--sea-blue-950);
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.035em;
}

.section-heading > p{
  max-width:560px;
  margin:0;
  color:var(--sea-muted);
  font-size:1.02rem;
  line-height:1.72;
}

.section-heading.centered{
  display:block;
  max-width:780px;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
}

.section-heading.centered .eyebrow{
  justify-content:center;
}

.section-heading.centered h2{
  margin-right:auto;
  margin-bottom:18px;
  margin-left:auto;
}

.section-heading.centered p{
  margin-right:auto;
  margin-left:auto;
}


/* ==========================================================
RESPONSIVE SECTION HEADING
========================================================== */

@media(max-width:1024px){

  .section-heading{
    grid-template-columns:1fr;
    gap:28px;
  }

  .section-heading h2,
  .section-heading > p{
    max-width:100%;
  }

}


@media(max-width:700px){

  .section-heading{
    gap:20px;
    margin-bottom:34px;
  }

  .section-heading h2{
    font-size:clamp(1.8rem,8vw,2.5rem);
  }

  .section-heading > p{
    font-size:1rem;
    line-height:1.7;
  }

  .section-heading .eyebrow{
    width:auto;
  }

}


/* ==========================================================
ENLACES
========================================================== */

.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sea-blue-800);
  font-weight:750;
}


.text-link:hover{
  color:var(--sea-green-800);
}


.text-link i{
  transition:transform .2s ease;
}


.text-link:hover i{
  transform:translateX(4px);
}


.text-link b {
  transition: transform 0.2s ease;
}



/* ==========================================================
TARJETAS GENERALES
========================================================== */

.card{
  background:var(--sea-white);
  border:1px solid var(--sea-line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}


.card-header{
  padding:24px;
}


.card-body{
  padding:24px;
}


.card-title{
  margin-bottom:10px;
  color:var(--sea-ink);
  font-size:1.15rem;
  font-weight:800;
}


.card-text{
  margin:0;
  color:var(--sea-muted);
  line-height:1.7;
}


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

.icon-box{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  color:var(--sea-blue-800);
  background:var(--sea-blue-100);
  border-radius:16px;
}


.icon-box.green{
  color:var(--sea-green-800);
  background:var(--sea-green-100);
}


.icon-box.purple{
  color:var(--sea-wine-800);
  background:rgba(103,1,58,.08);
}


.icon-box i{
  font-size:1.25rem;
}


/* ==========================================================
BADGES
========================================================== */

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:750;
}


.badge-blue{
  color:var(--sea-blue-800);
  background:var(--sea-blue-100);
}


.badge-green{
  color:var(--sea-green-800);
  background:var(--sea-green-100);
}


.badge-purple{
  color:var(--sea-wine-800);
  background:rgba(103,1,58,.08);
}


/* ==========================================================
DIVISORES
========================================================== */

.divider{
  width:100%;
  height:1px;
  background:var(--sea-line);
}


/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:700px){

  .section-heading{
    margin-bottom:34px;
  }


  .section-heading h2{
    font-size:clamp(1.8rem,8vw,2.4rem);
  }


  .button{
    width:auto;
  }

}