/* ------------------------------------------------------------------ */
/* 1. CSS RESET / GLOBAL UTILITIES                                    */
/* ------------------------------------------------------------------ */
:root {
  --main-blue:   #0072bc;
  --main-green:  #53a942;
  --main-yellow: #ffb100;
  --main-orange: #ff9200;
  --gray-bg:     #f8f9fa;
  --white:       #fff;
  --soft-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --radius:      18px;
}

/* Make padding & border part of the declared width → avoids surprises */
*, *::before, *::after { box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--gray-bg);
  color:#222;
  min-height:100vh;
  /* The line below is a last-resort safety net: even if something
     slips, the user never sees a horizontal scrollbar.              */
  overflow-x:hidden;
}

/* ------------------------------------------------------------------ */
/* 2. HEADER                                                          */
/* ------------------------------------------------------------------ */
header{
  display:flex;
  align-items:center;
  background:#fff;
  box-shadow:var(--soft-shadow);
  padding:12px 38px 12px 24px;
  gap:18px;
  min-height:76px;
  position:sticky;
  top:0;
  z-index:10;
  width:100%;
}

.header-logo{
  height:48px; width:48px;
  border-radius:5px;
  background:#fff;
  border:2px solid #eee;
}

.brand-title{
  font-size:1.4em;
  font-weight:700;
  letter-spacing:1px;
  background:linear-gradient(90deg,var(--main-blue),var(--main-yellow),var(--main-green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
          background-clip:text;
          color:transparent;
  margin-right:24px;
  white-space:nowrap;          /* prevent wrapping artefacts        */
}

/* NAVIGATION ------------------------------------------------------- */
header nav{
  margin-left:auto;
  display:flex;
  gap:7px;
}

nav button{
  background:none;
  border:0;
  font:inherit;
  padding:9px 24px;
  font-weight:600;
  cursor:pointer;
  color:var(--main-blue);
  border-radius:7px 7px 0 0;
  transition:background .15s,color .15s,box-shadow .23s;
  outline:none;
  white-space:nowrap;          /* stops very narrow widths breaking */
}
nav button.active,
nav button:hover{
  background:linear-gradient(90deg,var(--main-yellow) 70%,var(--main-green));
  color:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.025);
}

/* ------------------------------------------------------------------ */
/* 3. MAIN  +  SECTIONS                                               */
/* ------------------------------------------------------------------ */
main{
  max-width:740px;
  width:100%;
  margin:48px auto 0;
  background:transparent;
  border-radius:var(--radius);
  min-height:360px;
  position:relative;
}
section{display:none;}
section.active{display:block;animation:fadeIn .6s;}

/* ---------------- HERO / PORTADA ---------------------------------- */
.portada-section.active{display:block;}

.hero-bg{
  background:linear-gradient(98deg,var(--main-blue)18%,var(--main-yellow)68%,var(--main-green)120%);
  border-radius:var(--radius);
  box-shadow:var(--soft-shadow);
}

.hero-inner{
  padding:66px 0 74px;
  text-align:center;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-logo{
  height:120px;width:120px;
  margin-bottom:20px;
  border-radius:16px;
  box-shadow:0 2px 24px rgba(0,0,0,.08);
  background:#fff8;
}

.branding-gradient{
  font-size:2.7em;
  letter-spacing:1.1px;
  font-weight:800;
  margin:0 0 18px;
  background:linear-gradient(90deg,#fff 40%,#ffe0ad 95%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
          background-clip:text;
          color:transparent;
}

.hero-subtitle{
  font-size:1.38em;
  font-weight:500;
  margin-bottom:12px;
  text-shadow:0 3px 18px #0072bc55;
}

.hero-desc{
  font-size:1.05em;
  margin-bottom:36px;
  opacity:.94;
}

.logo-link{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  user-select:none;
  transition:opacity .14s;
}
.logo-link:hover,
.logo-link:focus{opacity:.86;}

.hero-cta-group{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-top:7px;
  flex-wrap:wrap;
}

.hero-cta{
  border:0;
  background:var(--main-orange);
  color:#fff;
  font-weight:700;
  font-size:1.12em;
  border-radius:28px;
  padding:14px 42px;
  margin:4px 0;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.08),0 1px 1px #ffd;
  transition:background .18s,transform .14s;
}
.hero-cta.secondary{background:var(--main-blue);}
.hero-cta:hover,
.hero-cta:focus{
  background:var(--main-green);
  color:#fffbea;
  transform:translateY(-2px) scale(1.035);
}

/* ---------------- TAB-CONTENT ------------------------------------ */
main>section:not(#portada){
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--soft-shadow);
  padding:38px 34px 34px;
  margin:0;
  min-height:320px;
}
main>section:not(#portada) h2{
  color:var(--main-blue);
  margin-top:0;
}
main>section:not(#portada) p{
  font-size:1.07em;
  line-height:1.7;
}

/* ---------------- CONTACT ---------------------------------------- */
.contact-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:24px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:1.21em;
  font-weight:500;
}
.contact-item i{
  font-size:2em;
  width:44px;
  color:var(--main-yellow);
}
.contact-instagram i{color:#C13584;}
.contact-mail i      {color:var(--main-blue);}
.contact-whatsapp i  {color:#25D366;}
.contact-item a{
  color:inherit;
  text-decoration:none;
  font-weight:700;
  word-break:break-all;
  transition:text-decoration .13s,color .17s;
}
.contact-item a:hover{
  text-decoration:underline;
  color:var(--main-green);
}

/* ---------------- PROJECT CARD ----------------------------------- */
.project-card{
  background:linear-gradient(89deg,#eef7fd 70%,#eafbe6 100%);
  border-left:10px solid var(--main-blue);
  border-radius:14px;
  padding:26px 22px;
  margin:30px 0 0;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
.project-card h3{
  margin-top:0;
  color:var(--main-blue);
  font-size:1.23em;
}

/* ---------------- IMAGE GRID ------------------------------------- */
.project-img-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin:8px 0 36px;
}
@media(min-width:600px){
  .project-img-grid{grid-template-columns:repeat(4,1fr);}
}
.project-img{
  width:100%;
  aspect-ratio:4/3;
  border-radius:11px;
  object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border:2px solid #bfd9f2;
  background:#e3ecf6;
  transition:transform .17s,box-shadow .18s,border-color .18s;
}
.project-img:hover{
  transform:scale(1.04) translateY(-2px);
  box-shadow:0 6px 16px rgba(0,123,188,.11);
  border-color:var(--main-green);
}

/* ---------------- BROCHURE DOWNLOAD ------------------------------ */
.flyer-download-box{margin:18px 0 22px;text-align:left;}
.download-flyer-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:linear-gradient(90deg,var(--main-yellow)84%,var(--main-blue));
  color:#222;
  font-weight:600;
  font-size:1.07em;
  text-decoration:none;
  border-radius:8px;
  padding:11px 27px 11px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .18s,color .18s,transform .11s;
}
.download-flyer-btn:hover,
.download-flyer-btn:focus{
  background:linear-gradient(90deg,var(--main-green)90%,var(--main-blue));
  color:#fff;
  transform:translateY(-2px) scale(1.04);
}
.download-flyer-btn i.fa-file-pdf{
  font-size:1.43em;
  color:#da1222;
}
.download-flyer-btn .small-note{
  font-weight:400;
  color:#444a;
  font-size:.93em;
}

/* ------------------------------------------------------------------ */
/* 4. MEDIA QUERIES – MOBILE                                          */
/* ------------------------------------------------------------------ */
@media(max-width:900px){
  main{max-width:100vw;}
  .hero-inner{padding:38px 0 44px;}
}

/* Phone-first adjustments                                            */
@media(max-width:630px){

  /* Header tweaks -------------------------------------------------- */
  header{
    padding:10px 12px;   /* smaller horizontal padding              */
    flex-wrap:wrap;
    gap:12px;
  }
  .header-logo{height:36px;width:36px;}
  .brand-title{
    font-size:1.1em;
    margin-right:10px;
  }

  /* Nav now breaks onto its own row -------------------------------- */
  header nav{
    margin-left:0;         /* so it doesn’t push header wider        */
    width:100%;
    justify-content:space-around;
    flex-wrap:wrap;
  }
  nav button{
    padding:8px 16px;
    font-size:.95em;
    margin:4px 0;
  }

  /* Section padding ------------------------------------------------ */
  main>section:not(#portada){
    padding:18px 8px 16px;
    min-height:220px;
  }

  /* Hero Logo smaller --------------------------------------------- */
  .hero-logo{height:80px;width:80px;}

  /* Center flyer button on phone ---------------------------------- */
  .flyer-download-box{text-align:center;}

  /* Image grid tighter gaps --------------------------------------- */
  .project-img-grid{gap:12px;}
}

/* ------------------------------------------------------------------ */
/* 5. ANIMATIONS                                                      */
/* ------------------------------------------------------------------ */
@keyframes fadeIn{
  0%{opacity:0;transform:translateY(30px);}
  100%{opacity:1;transform:none;}
}