/* =========================
   Variables + Tipografía
   ========================= */
:root{
  --mint:#ED69A5;
  --text:#2b2b2b;
  --muted:#F6AEBA;
  --light:#f8f9fa;
  --dark:#111;
}
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.7;
}
h1{
	font-family: "Yeseva One", serif;
  font-weight: 600;
  font-style: normal;
}
h2{
	font-family: "Yeseva One", serif;
  font-weight: 600;
  font-style: normal;
}
h3{
	font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}
#navContent .nav-item{
	font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}
.yeseva-one-regular {
  font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}
p{
	font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:0.9rem;
}

/* =========================
   Enlaces & utilidades base
   ========================= */
a{ color:inherit; }
a.text-link{ color:var(--mint); text-decoration:none; }
a.text-link:hover{ text-decoration:underline; }
.lead{ font-size:1.1rem; }
.section-title{
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}

/* =========================
   Topbar (tel/email izq — redes der)
   ========================= */
.topbar{
  background:#0f1921;
  color:#ccefe7;
  padding:.5rem 0;
  font-size:.95rem;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
}
.topbar .topbar-left a{
  color:#ED69A5; text-decoration:none;
}
.topbar .topbar-left a + a{ margin-left:1rem; }
.topbar .topbar-left i{ margin-right:.35rem; }
.topbar .topbar-left a:hover{ color:#fff; }
.topbar .social{ display:flex; gap:.6rem; }
.topbar .social a{ color:var(--mint); font-size:1.05rem; }
.topbar .social a:hover{ color:#fff; }

/* =========================
   Navbar + Shrink
   ========================= */
#mainNav{
  transition:padding .25s ease, box-shadow .25s ease;
  padding:1.25rem 0; background:#fff;
}
#mainNav.scrolled{
  padding:.55rem 0; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.navbar .brand-dot{ color:var(--mint); }
.navbar .nav-link{ color:#555; }
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:var(--mint)!important; }

/* =========================
   Hero (parallax + overlay + typed)
   ========================= */
.hero{
  min-height:90vh;
  position:relative;
  display:grid; place-items:center;
  text-align:center; color:#fff;
  background-image:url('../images/foto1.jpg');
  background-size:cover; background-position:center center; background-repeat:no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:rgba(15,25,33,.35);
}
.hero .container{ position:relative; z-index:2; }
.hero.parallax-fixed{ background-attachment:fixed; }
.hero h1{
  font-weight:600;
  letter-spacing:.5px;
  font-size:clamp(2rem,4.2vw,3.6rem);
}
.hero .lead{ color:#dfe8e6; }
.brand{ color:var(--mint); text-decoration:none; }
.brand:hover{ text-decoration:underline; }
.btn-mint{ background:#FF7740; border:none; color:#fff; }
.btn-mint:hover{ filter:brightness(.95); }
.btn-outline-mint{ border:1px solid #FF7740; color:#FF7740; }
.btn-outline-mint:hover{ background:#FF7740; color:#fff; }

/* =========================
   Secciones (padding unificado)
   ========================= */
.site-section,
.section-steps,
.section-works,
.section-services,
.section-about,
.section-team,
.section-blog,
.section-contact{ padding:72px 0; }

/* =========================
   Steps (Innovate/Create/Scale)
   ========================= */
.section-steps{ background:#fff; }
.step{ position:relative; }
.step-num{
  position:absolute; left:-6px; top:-30px;
  font-weight:700; font-size:6rem; line-height:1;
  color:rgba(0,0,0,.06); user-select:none;
}
.step-title{
  color:var(--mint); font-size:2rem; font-weight:600; margin-bottom:.75rem;
}
.step-text{ color:#ED69A5;; margin-bottom:1rem; }
.step-list{ list-style:none; padding:0; margin:0; }
.step-list li{
  margin:.5rem 0; color:#555; position:relative; padding-left:1.5rem;
}
.step-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--mint); font-weight:700;
}

/* =========================
   Our Works (sin filtros, simple grid)
   ========================= */
.section-works .section-title{ font-size: clamp(2rem, 3.8vw, 3.2rem); }
.section-works .lead{ color:#6c757d; margin-bottom:2rem; }
.section-works img{ display:block; width:100%; height:auto; border-radius:.35rem; }
/* === Overlay hover en Our Works === */
.work-thumb{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: .35rem;
}
.work-thumb img{
  display:block; width:100%; height:auto;
  transition: transform .6s ease;
}
.work-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s ease;
}
.work-caption{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, calc(-50% + 12px));
  text-align:center;
  color:#fff;
  opacity:0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.work-title{
  margin:0 0 .25rem;
  font-size:1.15rem; font-weight:600;
  letter-spacing:.2px;
}
.work-cat{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.15rem;
  text-transform:uppercase;
  color: rgba(255,255,255,.85);
}

/* efecto al pasar el cursor */
.work-thumb:hover img{ transform: scale(1.05); }
.work-thumb:hover .work-overlay{ opacity:1; }
.work-thumb:hover .work-caption{
  opacity:1; transform: translate(-50%, -50%);
}

/* =========================
   Services (icono menta a la izquierda)
   ========================= */
.section-services .section-title{ font-size: clamp(2rem, 3.8vw, 3.2rem); }
.section-services .lead{ color:#6b6b6b; }
.service-item{
  display:flex; align-items:flex-start; gap:16px;
}
.service-item i{
  font-size:42px; line-height:1; color:var(--mint);
  flex:0 0 auto; margin-top:2px;
}
.service-item h3{
  font-size:1.25rem; font-weight:600; margin:0 0 .25rem;
}
.service-item p{ margin:0 0 .5rem; color:#6b6b6b; }
.service-link{ color:var(--mint); text-decoration:none; font-weight:500; }
.service-link:hover{ text-decoration:underline; }

/* =========================
   About (texto izq + imagen der + 2 features)
   ========================= */
.section-about .section-title{ font-size: clamp(2rem, 3.8vw, 3.2rem); }
.about-lead{ font-size:1.1rem; color:#6b6b6b; }
.about-feature{
  display:flex; align-items:flex-start; gap:12px;flex-direction: column;color:#6b6b6b;
}
.about-feature i{
  font-size:36px; color:#FF7740; line-height:1; margin-top:2px;
}
.about-feature h3{
  font-size:1rem; font-weight:600; margin:0 0 .25rem;
}
.section-about img{ display:block; border-radius:.75rem; }

/* =========================
   Team
   ========================= */
.section-team .section-title{ font-size: clamp(2rem, 3.8vw, 3.2rem); }
.member .avatar{
  width:110px; height:110px; border-radius:50%; object-fit:cover;
  display:inline-block; margin-bottom:.75rem;
}
.member h3{ font-size:1.1rem; font-weight:600; margin:.25rem 0; }
.member .social a{ color:#777; margin:0 .25rem; }
.member .social a:hover{ color:var(--mint); }

/* =========================
   Blog
   ========================= */
.section-blog .section-title{ font-size: clamp(2rem, 3.8vw, 3.2rem); }
.post img{ display:block; }
.post .h5 a{ color:var(--text); text-decoration:none; }
.post .h5 a:hover{ color:var(--mint); }

/* =========================
   Contact
   ========================= */
.section-contact .section-title{ font-size: clamp(2rem, 3.8vw, 3.2rem); }
.contact-box{
  background:#fff; border:1px solid #eee; border-radius:.5rem; padding:1.25rem;
}

/* =========================
   Footer
   ========================= */
.site-footer{
  padding:64px 0; background:#BDE2DB; color:#000;
}
.site-footer h4{ color:#000; margin-bottom:.75rem; font-weight:600; }
.site-footer a{ color:#000; text-decoration:none; }
.site-footer a:hover{ color:#000; }
.site-footer .social a{ color:#000; }
.site-footer .social a:hover{ color:#000; }

.icon-phonelink:before {
    content: "\e326";
    }
/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 991.98px){
  .topbar .topbar-left{ font-size:.9rem; }
  .hero{ min-height:72vh; }
}