@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --bg:          #fbfaf8;
  --bg-soft:     #f2f0ec;
  --ink:         #14130f;
  --ink-soft:    #57544c;
  --gray:        #8a877e;
  --orange:      #e8641c;
  --orange-dark: #c8500f;
  --border:      #e5e2da;
  --black-circle:#141414;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4,.logo,.nav-link,.btn,.tab{font-family:'Space Grotesk', sans-serif;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{display:block;max-width:100%;}

.container{max-width:1200px;margin:0 auto;padding:0 32px;}

/* ============================= NAV ============================= */
header{
  position:sticky;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(251,250,248,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  max-width:1200px;
  margin:0 auto;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.3rem;letter-spacing:.5px;}
.logo span{color:var(--orange);}
.logo small{
  display:block;font-family:'Work Sans',sans-serif;font-size:.58rem;
  letter-spacing:2px;color:var(--gray);font-weight:500;
}
/* Si tienes el logo en imagen, reemplaza el bloque .logo por:
   <img src="images/logo.png" alt="SERVIARQ MG" style="height:36px;"> */

.nav-links{display:flex;gap:34px;align-items:center;}
.nav-link{font-size:.92rem;font-weight:500;position:relative;padding-bottom:4px;color:var(--ink-soft);}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .25s ease;}
.nav-link:hover, .nav-link.active{color:var(--ink);}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#fff;font-weight:600;font-size:.88rem;
  padding:12px 24px;border-radius:4px;border:1px solid var(--orange);
  transition:all .25s ease;cursor:pointer;
}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark);}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--ink);}
.btn-dark{background:var(--ink);border-color:var(--ink);}
.btn-dark:hover{background:#000;border-color:#000;}

.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.menu-toggle span{width:24px;height:2px;background:var(--ink);}

header.transparent{
  position:fixed;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
header.transparent .logo{color:#fff;}
header.transparent .nav-link{color:rgba(255,255,255,0.88);}
header.transparent .nav-link:hover, header.transparent .nav-link.active{color:#fff;}
header.transparent .menu-toggle span{background:#fff;}
header.transparent.scrolled{
  background:rgba(251,250,248,0.95);
  border-bottom:1px solid var(--border);
}
header.transparent.scrolled .logo{color:var(--ink);}
header.transparent.scrolled .nav-link{color:var(--ink-soft);}
header.transparent.scrolled .nav-link:hover, header.transparent.scrolled .nav-link.active{color:var(--ink);}
header.transparent.scrolled .menu-toggle span{background:var(--ink);}

/* ============================= PAGE HERO (simple) ============================= */
.page-hero{padding:64px 0 40px;border-bottom:1px solid var(--border);}
.eyebrow{
  color:var(--orange);font-size:.78rem;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:12px;display:block;
}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;margin-bottom:14px;}
.page-hero p{color:var(--ink-soft);max-width:560px;font-size:1.02rem;}

/* ============================= SECTION ============================= */
.section{padding:80px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-bottom:14px;}
.section-head p{color:var(--ink-soft);}

/* ============================= HOME HERO — pantalla completa, imagen de fondo rotativa ============================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--black-circle); /* se ve mientras cargan las imágenes */
}

/* Contenedor de imágenes de fondo del hero: ver comentarios en index.html
   para saber dónde agregar cada una de las 6 fotos */
.hero .img-rotator{position:absolute;inset:0;z-index:1;}

/* Degradado oscuro sobre las imágenes para que el texto sea legible */
.hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 45%, rgba(10,10,10,.75) 100%);
}

.hero-content{
  position:relative;z-index:3;
  max-width:880px;
  color:#fff;
  transition:opacity .15s linear, transform .15s linear; /* controlado también por JS al hacer scroll */
}
.hero-eyebrow{
  color:var(--orange-light,#ff9d52);
  font-size:.8rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:20px;display:inline-flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{content:"";width:30px;height:2px;background:var(--orange);}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem);
  font-weight:700;line-height:1.05;letter-spacing:-1px;
  text-transform:uppercase;margin-bottom:24px;
}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero p{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:520px;margin-bottom:36px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero .btn-outline{border-color:rgba(255,255,255,.5);color:#fff;}
.hero .btn-outline:hover{border-color:#fff;}

/* Indicador de scroll opcional, se desvanece junto con el contenido */
.scroll-cue{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  z-index:3;color:rgba(255,255,255,.7);font-size:.72rem;letter-spacing:2px;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue::after{
  content:"";width:1px;height:36px;background:rgba(255,255,255,.5);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.1%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ============================= ROTADOR DE IMÁGENES (genérico) =============================
   Úsalo en cualquier bloque de imagen: hero, tarjetas de servicio, "nosotros", fundadora...
   Estructura:
   <div class="img-rotator" data-interval="10000">
     <div class="rotator-slide active"><!-- <img src="..."> --></div>
     <div class="rotator-slide"><!-- <img src="..."> --></div>
   </div>
   script.js cambia automáticamente de slide cada "data-interval" ms (10000 = 10s) */
.img-rotator{position:relative;overflow:hidden;background:var(--bg-soft);width:100%;height:100%;}
.rotator-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.rotator-slide.active{opacity:1;z-index:1;}
.rotator-slide img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:2; /* siempre por encima del aviso de "agrega tu foto aquí" */
}
.rotator-placeholder{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;color:var(--gray);font-size:.8rem;
  background:repeating-linear-gradient(135deg,#eee 0 26px,#e5e2da 26px 52px);
  border:1px dashed var(--orange);box-sizing:border-box;
}

/* ============================= STATS ============================= */
.stats{background:var(--bg-soft);border-bottom:1px solid var(--border);}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;}
.stat{padding:34px 20px;border-right:1px solid var(--border);}
.stat:last-child{border-right:none;}
.stat-num{font-size:2.1rem;font-weight:700;color:var(--orange);}
.stat-label{color:var(--gray);font-size:.82rem;letter-spacing:1px;text-transform:uppercase;margin-top:6px;}

/* ============================= SERVICE ICONS (circulos negro/naranja, estilo destacados IG) ============================= */
.highlights{display:flex;gap:36px;flex-wrap:wrap;}
.highlight{display:flex;flex-direction:column;align-items:center;gap:12px;width:120px;text-align:center;}
.highlight-circle{
  width:88px;height:88px;border-radius:50%;
  background:var(--black-circle);
  border:2px solid var(--orange);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease, background .25s ease;
}
.highlight-circle{line-height:0;}
.highlight-circle svg{display:block;width:36px;height:36px;stroke:var(--orange);fill:none;stroke-width:1.7;transition:stroke .25s ease;}
.highlight a:hover .highlight-circle{transform:translateY(-5px);background:var(--orange);}
.highlight a:hover .highlight-circle svg{stroke:#141414;}
.highlight-name{font-size:.88rem;font-weight:600;}
.highlight a{display:flex;flex-direction:column;align-items:center;gap:12px;}

/* ============================= SERVICIOS PAGE: tarjetas ============================= */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.service-card{
  border:1px solid var(--border);border-radius:8px;overflow:hidden;
  background:var(--bg);transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{border-color:var(--orange);transform:translateY(-3px);}

/* Área de imágenes de cada servicio: agrega tantas fotos como quieras dentro
   del .img-rotator (ver comentarios en servicios.html), cambian cada 10s */
.service-img{aspect-ratio:16/10;}

.service-body{padding:28px 28px 32px;}
.service-card .icon-circle{
  width:56px;height:56px;border-radius:50%;background:var(--black-circle);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  border:2px solid var(--orange);
}
.service-card .icon-circle{line-height:0;}
.service-card .icon-circle svg{display:block;width:24px;height:24px;stroke:var(--orange);fill:none;stroke-width:1.7;}
.service-card h3{font-size:1.15rem;font-weight:600;margin-bottom:10px;}
.service-card p{color:var(--ink-soft);font-size:.94rem;}

/* ============================= PROYECTOS: TABS DE FILTRO ============================= */
.filters{
  display:flex;gap:28px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding-bottom:18px;margin-bottom:44px;
}
.tab{
  background:none;border:none;cursor:pointer;
  font-size:.98rem;font-weight:600;color:var(--gray);
  padding-bottom:8px;position:relative;
}
.tab.active{color:var(--ink);}
.tab.active::after{
  content:"";position:absolute;left:0;bottom:-19px;width:100%;height:2px;background:var(--orange);
}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.project-card{display:none;flex-direction:column;}
.project-card.show{display:flex;}

/* CORREGIDO: antes este bloque tenía padding y border propios, lo que dejaba
   un margen de fondo visible alrededor de cualquier foto que agregaras.
   Ahora la caja solo define tamaño/recorte; el estilo de "placeholder"
   (rayas + borde punteado) vive únicamente en .rotator-placeholder, que
   desaparece por completo al reemplazarlo por tu <img>. */
.project-img{
  aspect-ratio:4/5;border-radius:6px;overflow:hidden;margin-bottom:16px;
}
.project-img img{width:100%;height:100%;object-fit:cover;}

.project-card h3{font-size:1.05rem;font-weight:600;margin-bottom:4px;}
.project-card .project-cat{color:var(--orange);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;}

/* ============================= NOSOTROS ============================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-img{aspect-ratio:1/1;border-radius:8px;overflow:hidden;}
.about-text p{color:var(--ink-soft);margin-bottom:16px;}

/* Bloques "Nuestra misión" / "Nuestra propuesta" / "Nuestra visión":
   misma estructura que .about-grid, uno debajo del otro */
.mission-block + .mission-block{margin-top:80px;}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;}
.value{border:1px solid var(--border);border-radius:8px;padding:26px;}
.value h4{font-size:1.02rem;margin-bottom:8px;}
.value p{color:var(--ink-soft);font-size:.9rem;}

/* ============================= FUNDADORA ============================= */
.founder{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.founder-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center;}
.founder-img{aspect-ratio:3/4;border-radius:8px;overflow:hidden;max-width:340px;}
.founder-text .eyebrow{margin-bottom:14px;}
.founder-text h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;margin-bottom:6px;}
.founder-role{color:var(--orange);font-weight:600;font-size:.9rem;margin-bottom:18px;display:block;}
.founder-text p{color:var(--ink-soft);margin-bottom:14px;}

/* ============================= CONTACTO ============================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.contact-card{
  border:1px solid var(--border);border-radius:10px;padding:36px;
  display:flex;flex-direction:column;gap:22px;
}
.contact-row{display:flex;align-items:center;gap:16px;}
.contact-row .icon-circle{
  width:50px;height:50px;border-radius:50%;background:var(--black-circle);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:2px solid var(--orange);
}
.contact-row .icon-circle{line-height:0;}
.contact-row .icon-circle svg{display:block;width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:1.7;}
.contact-row .label{font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--gray);}
.contact-row .value{font-size:1rem;font-weight:600;}
.contact-row a.value:hover{color:var(--orange);}

.contact-cta{
  background:var(--black-circle);color:#fff;border-radius:10px;
  padding:40px 32px;display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.contact-cta h3{font-size:1.4rem;font-weight:700;}
.contact-cta p{color:#c9c6bd;font-size:.95rem;}

/* ============================= CTA GENERICO ============================= */
.cta-band{background:var(--black-circle);color:#fff;}
.cta-band .section{padding:80px 0;text-align:center;}
.cta-band h2{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:700;margin-bottom:16px;}
.cta-band p{color:#c9c6bd;max-width:480px;margin:0 auto 30px;}

/* ============================= FOOTER ============================= */
footer{border-top:1px solid var(--border);padding:56px 0 26px;background:var(--bg-soft);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px;}
.footer-grid h4{font-size:.85rem;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-bottom:16px;}
.footer-grid p, .footer-grid a{color:var(--ink-soft);font-size:.9rem;display:block;margin-bottom:9px;}
.footer-grid a:hover{color:var(--orange);}
.social-row{display:flex;align-items:center;gap:12px;margin-top:6px;}
.social-icon{
  width:38px;height:38px;min-width:38px;border-radius:50%;background:var(--black-circle);justify-content: center;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--orange);
  line-height:0;transition:.2s ease;
}
.social-icon svg{display:block;width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.7;transition:stroke .2s ease;margin: auto;vertical-align: middle;transform: translateY(6px);}
.social-icon:hover{background:var(--orange);}
.social-icon:hover svg{stroke:#141414;}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  color:var(--gray);font-size:.8rem;
}

/* ============================= RESPONSIVE ============================= */
@media (max-width:900px){
  .nav-links{
    position:fixed;top:70px;left:0;right:0;background:var(--bg);
    flex-direction:column;align-items:flex-start;padding:24px 32px;gap:18px;
    border-bottom:1px solid var(--border);
    transform:translateY(-150%);transition:transform .3s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .menu-toggle{display:flex;}
  .stats-grid{grid-template-columns:1fr;}
  .stat{border-right:none;border-bottom:1px solid var(--border);}
  .stat:last-child{border-bottom:none;}
  .services-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .founder-grid{grid-template-columns:1fr;}
  .founder-img{max-width:260px;}
}
@media (max-width:560px){
  .projects-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  nav{padding:16px 20px;}
  .filters{gap:18px;}
  .hero h1{letter-spacing:-.5px;}
}
.logo{
  display:flex;
  align-items:center;
}

.logo img{
  height:75px;
  width:auto;
  object-fit:contain;
}