/* =========================================================
   🎨 THEME VARIABLES
========================================================= */
:root{
  --primary:#009887;
  --secondary:#C90166;
  --danger:#AE1922;
  --dark:#0C0206;
  --light:#f6f6f6;
  --beige:#D3C2B4;
  --white:#fff;
  --text:#333;


  --chiapas-verde: #009887;
  --chiapas-magenta: #C90166;
  --chiapas-rojo: #AE1922;
  --chiapas-beige: #D3C2B4;
  --chiapas-oscuro: #0C0206;
  --chiapas-claro: #f6f6f6;
  --chiapas-blanco: #ffffff;
  --chiapas-texto: #333333;

  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadow-hover:0 14px 34px rgba(0,0,0,.16);

  --transition:.3s ease;
}

/* =========================================================
   🌙 DARK MODE
========================================================= */
[data-theme="dark"]{
  --light:#121212;
  --text:#e0e0e0;
}

/* =========================================================
   🌍 GLOBAL
========================================================= */
body{
  font-family:"Novecento Wide","Gilroy",sans-serif;
  background:var(--light);
  color:var(--text);
  overflow-x:hidden;
  transition:background .3s,color .3s;
}

section{
  padding:5rem 0;
  position:relative;
}

/* =========================================================
   🏷️ TITLES
========================================================= */
/* =========================================================
   🧾 TITULOS DE SECCIÓN
========================================================= */

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--chiapas-oscuro);
  text-transform: uppercase;
  margin-bottom: 1rem;
  position: relative;
}

.section-title i {
  color: var(--chiapas-magenta);
}

/* Línea decorativa */
.section-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--chiapas-verde),
      var(--chiapas-magenta)
    );
}

/* =========================================================
   🚀 BOTONES TREND
========================================================= */

.trend-btn {
  background: var(--chiapas-blanco);
  border: 2px solid rgba(0, 0, 0, 0.06);

  color: var(--chiapas-oscuro);
  font-weight: 600;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;

  min-width: 240px;
}

/* Hover */
.trend-btn:hover {
  background:
    linear-gradient(
      135deg,
      var(--chiapas-verde),
      var(--chiapas-magenta)
    );

  color: var(--chiapas-blanco);
  transform: translateY(-4px);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Íconos */
.trend-btn i {
  font-size: 1.1rem;
}

/* =========================================================
   ✨ EFECTOS GENERALES
========================================================= */

.shadow-sm {
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.rounded-pill {
  border-radius: 999px !important;
}

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

@media (max-width: 768px) {

  .trend-btn {
    width: 100%;
    min-width: auto;
  }

  .section-title {
    font-size: 1.8rem;
  }
}

/* =========================================================
   🟩 BUTTONS
========================================================= */
.btn-flat{
  border:none;
  border-radius:50px;
  padding:.8rem 1.4rem;
  font-weight:600;
  transition:var(--transition);
}

.btn-primary-flat{
  background:var(--primary);
  color:var(--white);
}

.btn-primary-flat:hover{
  background:var(--secondary);
  transform:translateY(-2px);
}

/* =========================================================
   🪟 CARDS
========================================================= */
.card-flat{
  border:none;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow);
  transition:var(--transition);
}

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

.card-flat img{
  transition:transform .5s ease;
}

.card-flat:hover img{
  transform:scale(1.05);
}

.card-body{
  padding:1.5rem;
}

/* =========================================================
   🎯 ICON BLOCKS
========================================================= */
.icon-block{
  background:var(--white);
  border-radius:var(--radius);
  padding:2rem;
  text-align:center;
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.icon-block:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-hover);
}

.icon-circle{
  width:80px;
  height:80px;
  margin:0 auto 1rem;
  border-radius:50%;
  background:rgba(0,152,135,.12);

  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-circle i{
  font-size:2.5rem;
  color:var(--primary);
}

/* =========================================================
   🌄 HERO
========================================================= */
.hero{
  min-height:90vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;

  background:url('../media/header/banner-portada.png') center/cover fixed;
  /* z-index:2; */
}

.hero-overlay{
  position:absolute;
  inset:0;
  /* background:linear-gradient(
    to bottom,
    rgba(0,0,0,.35),
    rgba(0,0,0,.7)
  ); */
  z-index:2;
}

.hero-content{
  position:relative;
  z-index:3;
  text-align:center;
  color:#fff;
}


/* =========================================================
   🎠 CAROUSEL
========================================================= */
.carousel{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.carousel-item img{
  transition:transform 8s ease;
}

.carousel-item.active img{
  transform:scale(1.08);
}

/* =========================================================
   📷 IMAGE HOVER
========================================================= */
.img-hover{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}

.img-hover img{
  transition:transform .45s ease;
}

.img-hover:hover img{
  transform:scale(1.08);
}

.img-hover .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,152,135,.55);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  transition:opacity .3s ease;
}

.img-hover:hover .overlay{
  opacity:1;
}

/* =========================================================
   📑 ACCORDION
========================================================= */
.accordion-item{
  border:none;
  border-radius:var(--radius)!important;
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
}

.accordion-button{
  font-weight:600;
  padding:1rem 1.2rem;
}

.accordion-button:not(.collapsed){
  background:var(--primary);
  color:#fff;
}

/* =========================================================
   📊 STATS
========================================================= */
.stats-card{
  background:rgba(255,255,255,.85);
  border-radius:var(--radius);
  padding:2rem;
  text-align:center;
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.stats-card:hover{
  transform:translateY(-4px);
}

/* =========================================================
   🌐 SOCIAL
========================================================= */
.social-link{
  width:65px;
  height:65px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:rgba(255,255,255,.12);

  transition:var(--transition);
}

.social-link i{
  font-size:1.8rem;
  color:#fff;
}

.social-link:hover{
  background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  transform:translateY(-4px);
}

/* =========================================================
   ✨ ANIMATIONS
========================================================= */
.fade-up{
  animation:fadeUp .7s ease forwards;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   📱 RESPONSIVE
========================================================= */
@media(max-width:768px){

  .section-title{
    font-size:1.6rem;
  }

  .hero{
    min-height:70vh;
  }

  .icon-circle{
    width:65px;
    height:65px;
  }

  .icon-circle i{
    font-size:2rem;
  }
}