/* =============== RESET & TOKENS =============== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}

:root {
  --bg-color: #1f242d;
  --second-bg-color: #323946;
  --text-color: #fff;
  --main-color: #00eeff;
}

html, body { overflow-x: hidden; width: 100%; }
html { font-size: 62.5%; }

body {
  background: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
}

section { min-height: 100vh; padding: 10rem 9% 2rem; }

/* =============== HEADER =============== */
header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  padding: 2rem 9%;
  background: var(--bg-color);
  display: flex; justify-content: space-between; align-items: center;
  z-index: 100;
}
header.sticky { border-bottom: .1rem solid rgba(0,0,0,.2); }

.logo { font-size: 2.5rem; color: var(--text-color); font-weight: 600; cursor: default; }

.navbar a {
  font-size: 1.7rem; color: var(--text-color);
  margin-left: 4rem; transition: .25s ease;
}
.navbar a:hover, .navbar a.active { color: var(--main-color); }

#menu-icon { font-size: 3.6rem; color: var(--text-color); display: none; }

/* =============== HOME =============== */
.home { display: flex; justify-content: center; align-items: center; }

.home-img {
  position: relative; display: flex; justify-content: center; align-items: center;
  margin-left: 60px;
}
.home-img img {
  width: 32vw; height: 32vw; object-fit: cover; object-position: center top;
  border-radius: 50%; border: 5px solid var(--main-color);
  box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  animation: floatImage 3s ease-in-out infinite; z-index: 1;
}
.home-img::before {
  content: ""; position: absolute; width: 36vw; height: 36vw; border-radius: 50%;
  background: var(--main-color); opacity: .2; filter: blur(50px); z-index: 0;
}

@keyframes floatImage { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} }

.home-content h3 { font-size: 3.2rem; font-weight: 700; }
.home-content h3:nth-of-type(2) { margin-bottom: 2rem; }
span { color: var(--main-color); }
.home-content h1 { font-size: 5.6rem; font-weight: 700; line-height: 1.3; }
.home-content p { font-size: 1.6rem; }

/* =============== SOCIAL & BUTTONS =============== */
.social-media a{
  display:inline-flex; justify-content:center; align-items:center;
  width:4rem; height:4rem; background:transparent; border:.2rem solid var(--main-color);
  border-radius:50%; font-size:2rem; color:var(--main-color); margin:3rem 1.5rem 3rem 0;
  transition:.25s ease;
}
.social-media a:hover{ background:var(--main-color); color:var(--second-bg-color); box-shadow:0 0 1rem var(--main-color); }

.btn{
  display:inline-block; padding:1rem 2.8rem; background:var(--main-color);
  border-radius:4rem; box-shadow:0 0 1rem var(--main-color); font-size:1.6rem;
  color:var(--second-bg-color); letter-spacing:.1rem; font-weight:600; transition:.25s ease;
}
.btn:hover{ box-shadow:none; }

.btn-classes{
  display:inline-block; text-align:center; width:7.5rem; padding:1rem 2rem; background:var(--main-color);
  border-radius:1rem; box-shadow:0 0 1rem var(--main-color); font-size:1.6rem; color:var(--second-bg-color);
  letter-spacing:.1rem; font-weight:600; transition:.25s ease;
}
.btn-classes:hover{ box-shadow:none; }

/* =============== FILTER BARS =============== */
.filter-classes, .wd-filter, .aas-filter{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:2rem; padding-bottom:3.5rem;
}

/* =============== ABOUT =============== */
.about{
  display:flex; justify-content:center; align-items:center; gap:2rem; background:var(--second-bg-color);
}
.about-img{ position:relative; display:flex; justify-content:center; align-items:center; margin-right:60px; }
.about-img img{
  width:35vw; height:35vw; object-fit:cover; object-position:center top; border-radius:20px; border:5px solid var(--main-color);
  box-shadow:0 0 25px var(--main-color), 0 0 50px var(--main-color); animation:floatImage 3s ease-in-out infinite; z-index:1;
}
.about-img::before{
  content:""; position:absolute; width:38vw; height:38vw; border-radius:25px; background:var(--main-color);
  opacity:.2; filter:blur(60px); z-index:0;
}

.heading{ text-align:center; font-size:4.5rem; }
.about-content h2{ text-align:left; line-height:1.2; }
.about-content h3{ font-size:2.6rem; }
.about-content p{ font-size:1.6rem; margin:2rem 0 3rem; }

/* =============== SERVICES (COURSES / CERTIFICATES) =============== */
.services h2{ margin-bottom: 2rem; }

/* grid de tarjetas */
.services .services-container, .wd-container, .aas-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.6rem;
}

.services-container .services-box, .wd-container .services-box, .aas-container .services-box{
  background:var(--second-bg-color); padding:3rem 2rem 4rem; border-radius:2rem; text-align:center;
  transition:.25s ease; max-height:50.25rem; opacity:1 !important; transform:none !important;
}
.services-container .services-box:hover, .wd-container .services-box:hover, .aas-container .services-box:hover{
  border-color:var(--main-color); transform:scale(1.02);
}
.services-box i{ font-size:7rem; color:var(--main-color); }
.services-box h3{ font-size:2.6rem; }
.services-box p{ font-size:1.6rem; margin:1rem 0 3rem; max-height:10rem; overflow:auto; }

hr{ display:none; }

/* Total Credits: pegado a las tarjetas */
.total-credits{
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  display:flex; justify-content:center; align-items:center;
}
.total-credits h2{ font-size:2.2rem; font-weight:600; }

/* Certificado/Diploma: SIEMPRE en su propia línea */
.certificate-wrap{
  display:flex; justify-content:center; align-items:center;
  margin-top: .4rem; margin-bottom: 4rem;
}
.certificate-wrap img{
  width: clamp(240px, 38vw, 520px);
  height: auto; display:block;
  border: 3px solid var(--main-color);
  border-radius: 1.2rem;
  box-shadow: 0 0 20px rgba(0,238,255,.35);
  background: #fff;
}

/* =============== DIALOG (modal) =============== */
dialog{
  border:1px solid rgba(0,0,0,.1); box-shadow:0 0 3rem #000a; width:90%; max-width:640px; background:var(--second-bg-color);
  padding:3rem 2rem 4rem; border-radius:2rem; text-align:center; transition:.25s ease; max-height:80vh; color:var(--text-color);
  top:10%; left:50%; transform:translateX(-50%);
}
dialog:hover{ border-color:var(--main-color); transform:translateX(-50%) scale(1.02); }
strong{ color:var(--main-color); }
dialog i{ font-size:7rem; color:var(--main-color); }
dialog h1{ font-size:3rem; background:var(--main-color); color:var(--second-bg-color); border-radius:1rem; margin-bottom:2rem; }
dialog h3{ font-size:2.2rem; }
dialog p{ font-size:1.6rem; margin:1rem 0 2rem; max-height:10rem; overflow:auto; }
::backdrop{ background-color:rgba(0,0,0,.6); }
dialog button{ position:absolute; top:1.6rem; right:1.6rem; padding:.4rem .9rem; background:var(--main-color); border:none; border-radius:.6rem; cursor:pointer; }
dialog button:hover{ background:var(--text-color); color:var(--second-bg-color); }

/* =============== PORTFOLIO =============== */
.portfolio{ background:var(--second-bg-color); }
.portfolio h2{ margin-bottom:4rem; }
.portfolio-container{
  display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:2.5rem;
  opacity:1 !important; transform:none !important;
}
.portfolio-container .portfolio-box{
  position:relative; border-radius:2rem; box-shadow:0 0 1rem var(--bg-color); overflow:hidden; display:flex;
  opacity:1 !important; transform:none !important; transition:transform .25s ease;
}
.portfolio-box img{ width:100%; height:30rem; object-fit:cover; transition:.25s ease; }
.portfolio-box:hover img{ transform:scale(1.05); }
.portfolio-box .portfolio-layer{
  position:absolute; bottom:0; left:0; width:100%; height:100%;
  background:linear-gradient(rgba(0,0,0,.7), var(--main-color));
  display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; padding:0 4rem;
  transform:translateY(100%); transition:.25s ease;
}
.portfolio-box:hover .portfolio-layer{ transform:translateY(0); }
.portfolio-layer{ font-size:3rem; }
.portfolio-layer p{ font-size:1.6rem; margin:.3rem 0 1rem; }
.portfolio-layer a{ display:inline; justify-content:center; align-items:center; width:5rem; height:5rem; background:var(--text-color); border-radius:50%; }
.portfolio-layer a i{ font-size:2rem; color:var(--second-bg-color); }

/* =============== CONTACT =============== */
.contact h2{ margin-bottom:3rem; }
.contact form{ max-width:70rem; margin:1rem auto 3rem; text-align:center; }
.contact form .input-box{ display:flex; justify-content:space-between; flex-wrap:wrap; }
.contact form .input-box input, .contact form textarea{
  width:100%; padding:1.5rem; font-size:1.6rem; color:var(--text-color); background:var(--second-bg-color); border-radius:.8rem; margin:.7rem 0;
}
.contact form .input-box input{ width:49%; }
.contact form textarea{ resize:none; }
.contact form .btn{ margin-top:2rem; cursor:pointer; }

/* =============== FOOTER =============== */
.footer{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:2rem 9%; background:var(--second-bg-color); }
.footer-text p{ font-size:1.6rem; }
.footer-iconTop a{ display:inline-flex; justify-content:center; align-items:center; padding:.8rem; background:var(--main-color); border-radius:.8rem; transition:.25s ease; }
.footer-iconTop a:hover{ box-shadow:0 0 1rem var(--main-color); }
.footer-iconTop a i{ font-size:2.4rem; color:var(--second-bg-color); }

/* =============== BREAKPOINTS =============== */
@media (max-width: 1200px){
  html{ font-size:55%; }
}

@media (max-width: 991px){
  header{ padding:2rem 3%; }
  section{ padding:10rem 3% 2rem; }
  .services, .portfolio{ padding-bottom:7rem; }
  .contact{ min-height:auto; }
  .footer{ padding:2rem 3%; }
  dialog{ top:20%; left:50%; right:auto; transform:translateX(-50%); }
  .home-img{ margin-left:40px; }
  .about-img{ margin-right:40px; }
  .certificate-wrap img{ width: clamp(240px, 48vw, 500px); }
}

@media (max-width: 768px){
  body{ overflow-x:hidden; }
  #menu-icon{ display:block; }
  .navbar{
    position:absolute; top:100%; left:0; width:100%; padding:1rem 3%;
    background:var(--bg-color); border-top:.1rem solid rgba(0,0,0,.2);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.2); display:none;
  }
  .navbar.active{ display:block; }
  .navbar a{ display:block; font-size:2rem; margin:3rem 0; }
  header, .section{ max-width:100%; }
  .home{ flex-direction:column; }
  .home-content h3{ font-size:2.6rem; }
  .home-content h1{ font-size:5rem; }
  .home-img{ margin-left:0; margin-top:24px; }
  .home-img img{ width:65vw; height:65vw; }
  .home-img::before{ width:70vw; height:70vw; }
  .about{ flex-direction:column-reverse; }
  .about-img{ margin-right:0; margin-bottom:40px; }
  .about-img img{ width:70vw; height:70vw; margin-top:4rem; }
  .about-img::before{ width:74vw; height:74vw; }
  .services h2, .portfolio h2{ margin-bottom:3rem; }
  .portfolio-container{ grid-template-columns:repeat(2, 1fr); }
  .certificate-wrap img{ width: clamp(240px, 82vw, 440px); }
}

@media (max-width: 617px){
  .portfolio-container{ grid-template-columns:1fr; }
  dialog{ top:10%; left:50%; right:auto; transform:translateX(-50%); }
}

@media (max-width: 450px){
  html{ font-size:50%; }
  .contact form .input-box input{ width:100%; }
}

@media (max-width: 365px){
  .home-img img, .about-img img{ width:90vw; height:90vw; }
  .footer{ flex-direction:column-reverse; }
  .footer p{ text-align:center; margin-top:2rem; }
}