@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root{
--bg:#1b1b1b;
--panel:#9a6a28;
--panel-2:#d4b16a;
--accent: #9a6a28!important;
--text: #e7e0d8!important;
--muted:#a9b2c3;
--brand:#00ff00;
--brand-2:#8ef0d0;
--shadow: 0 10px 30px rgba(0,0,0,.35);
--radius: 18px;
--glass: rgba(255,255,255,0.02)!important;
}

html,body{
  margin:0;
  font-family: "Exo 2", sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(154, 106, 40,.12), transparent 60%),
radial-gradient(1000px 700px at 110% 10%, rgba(154, 107, 40, 0.12), transparent 60%),
var(--bg);
  background-repeat: no-repeat;
  color:var(--text);
}

.fondobonito{
    background: radial-gradient(1200px 800px at 10% -10%, rgba(154, 106, 40,.12), transparent 60%),
radial-gradient(1000px 700px at 110% 10%, rgba(154, 107, 40, 0.12), transparent 60%),
var(--bg);
  background-repeat: no-repeat;
}

.fondobonito2 {
  background: radial-gradient(1200px 800px at 10% 50%, rgba(154, 106, 40, .12), transparent 60%),
              radial-gradient(1000px 700px at 90% 50%, rgba(154, 107, 40, 0.12), transparent 60%),
              var(--bg);
  background-repeat: no-repeat;
}

main{ max-width: 980px; margin: 22px auto 60px; padding: 0 20px; }

article{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s; /* Animation */
}

article:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: scale(1.015);
}

.content{ padding: 28px; display:grid; gap:18px; font-size:18px }

.navbar{
  background: rgba(0,0,0,0.35);
  z-index: 1;
  font-weight: 800;
}

.navbar a{
    color: white!important;
}

.navbar a:hover{
    text-shadow: 1px 1px 2px#1b1b1b;
}

.navbar img{
  transition: transform .2s; /* Animation */
}

.navbar img:hover{
  transform: scale(1.055);
}

.dropdown-menu{
  background: rgba(0,0,0,0.05);

}

.dropdown-menu[data-bs-popper] {
  margin-top: 9px!important;
}

.dropdown-menu[data-bs-popper] a{
  color: white!important;
}

.dropdown-menu a:hover{
  background: var(--panel);
}

#nosotros{
  height:20vh; border-radius:20px; overflow:hidden;
}

#nosotros img{
  width:100%; height:100%; object-fit:cover; object-position:10% 15%; border-radius:20px;
}

#staff .card{
  background: rgba(255,255,255,0.02)!important;
}

#staff .card:hover{
  background:rgba(154,106,40,0.12)!important;
}

#staff .badge{
  background: rgba(255,255,255,0.09)!important;
}

#img-intro .row>*{
  padding: 0px!important;
}

#img-intro img{
  object-position:10% 23%;
  object-fit:cover; 
  height: 50vh;
  width: 100%;
  mask-image: linear-gradient(
    black 60%,
    transparent
  );
  z-index: -1;
}

footer{
  padding-top: 25px;
  height: auto;
  background:rgba(255,255,255,0.02);
mask-image: linear-gradient(to top, black 60%, transparent);
}

.card{
  background: rgba(255,255,255,0.02)!important;
}

.zoom{
  transition: transform .2s; /* Animation */
}

.zoom:hover{
    transform: scale(1.055);
}

/* social buttons */
.social-links{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.social-btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  transition:transform .12s ease, background .12s ease;
}
.social-btn:hover{transform:translateY(-3px);background:rgba(154,106,40,0.12)}
.social-btn svg{display:inline-block}

h4{
  color: white!important;
}

/* announcements */
.announcements .ann-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;color: white!important;}
.ann-item{padding:10px;background:rgba(255,255,255,0.02);color: white!important;}
.ann-item:hover{background:rgba(154,106,40,0.12);}
.ann-date{font-size:12px;color:rgba(231,224,216,0.75);margin-bottom:6px}
.ann-title{font-weight:700;color: white!important;}
.ann-body{font-size:13px;opacity:0.95;color: white!important;}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* invierte el color: negro -> blanco */
}

.cta{
display:inline-flex; align-items:center; gap:10px; padding:5px 15px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(154, 106, 40,0.2), rgba(154,106,40,.10));
color: var(--text); text-decoration:none; font-weight:700; box-shadow: var(--shadow);
height:auto;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease
}
.cta:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,.45) }

.cta a{
  color: var(--text); text-decoration:none; font-weight:700; box-shadow: var(--shadow);
}

.panel{
background: rgba(255,255,255,.02);
border-top: 1px solid rgba(255,255,255,.06);
padding: 22px 28px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between
}

   form {
      display: grid;
      gap: 20px;
    }

    label {
      display: flex;
      flex-direction: column;
      font-weight: 600;
      margin-bottom: 6px;
    }

    input, textarea {
      margin-top: 6px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: #e8ebf0;
      font-size: 16px;
      outline: none;
      transition: border .2s, background .2s;
    }

    input:focus, textarea:focus {
      border-color: #9a6a28;
      background: rgba(255,255,255,.08);
    }

    textarea {
      resize: vertical;
      min-height: 120px;
    }

    button.cta {
      justify-content: center;
      width: fit-content;
      padding: 12px 20px;
      font-size: 16px;
    }