:root{
  color-scheme: light only;
  --bg:#ffffff;
  --text:#121212;
  --muted:#5b5b5b;
  --line:#e9e9e9;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --wrap:1100px;
  --wa-green:#25D366;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: #fff;
  color: #111;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.container{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.section{ padding:72px 0; }

/* HEADER */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}


.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}

.brand{ display:flex; align-items:center; height:100%; }
.brand-logo{ max-height:80px; width:auto; display:block; object-fit:contain; }

.nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  padding:10px 10px;
  color:var(--muted);
  text-decoration:none;
  border-radius:10px;
}
.nav-link:hover{ color:var(--text); background:#f6f6f6; }

.nav-link-btn{
  background:none;
  border:none;
  font:inherit;
  cursor:pointer;
}

/* Dropdown (solo por click) */
.nav-item{ position:relative; }
/* Puente para que el hover no se corte al bajar al dropdown */
.has-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px; /* debe coincidir con el +10px del dropdown */
}

.dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  z-index: 2000;
}

.dropdown-link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
}
.dropdown-link:hover{ background:#f6f6f6; }
.has-dropdown.open .dropdown{ display:block; }
.has-dropdown { position: relative; }
/* Mobile menu */
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
}
@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position: fixed;
    inset: 70px 16px auto 16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:10px;
    display:none;
    flex-direction:column;
    gap:6px;
  }
  .nav.is-open{ display:flex; }
  .dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 2000;
 

}

  .has-dropdown.open .dropdown{ display:block; }
}
/* Desktop: permitir abrir Servicios al pasar el ratón */
@media (min-width: 861px){
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{
    display:block;
  }
}



/* HERO (imagen + texto sincronizados) */
.hero{
  position: relative;
  padding: 22px 0 54px;
}

.hero-media{
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: #fff;
  aspect-ratio: 16 / 9;   /* fallback mientras carga */
  min-height: 320px;      /* fallback */
  z-index: 0;
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain; /* imagen completa, sin recorte */
  object-position:center;
  opacity:0;
  transition: opacity 420ms ease;
}
.hero-img.is-active{ opacity:1; }

.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;     /* eje vertical  */
  justify-content:center;     /* eje horizontal */
  padding:26px 0;
  z-index:1;
}


.hero-dots{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: rgba(0,0,0,.35);
  padding: 8px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 2;
}


.hero-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:none;
  background: rgba(255,255,255,.55);
  cursor:pointer;
  padding:0;
}
.hero-dot.is-active{ background:#fff; }

.hero-slides{
  position:relative;
  min-height:200px;
  max-width:62ch;
  margin:0 auto;              /* centra el bloque */
  text-align:center;          /* centra texto y botón */
}


.hero-slide{
  position:absolute;
  top:0;
  left:50%;
  transform: translate(-50%, 10px);
  width:100%;
  opacity:0;
  pointer-events:none;
  transition: opacity 420ms ease, transform 420ms ease;
}
.hero-slide.is-active{
  opacity:1;
  transform: translate(-50%, 0);
  pointer-events:auto;
}
.hero-slide.is-leaving{
  opacity:0 !important;
  transform: translate(-50%, 10px) !important;
  pointer-events:none !important;
}


.hero-title{
  margin:0 0 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#fff;
}
.hero-subtitle{
  margin:0 0 18px;
  font-size:18px;
  color: rgba(255,255,255,.90);
  line-height:1.6;
}
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  background:#fff;
  color:#111;
  border:1px solid rgba(255,255,255,.9);
}


@media (max-width: 860px){
  .section{ padding:56px 0; }
  .hero-overlay{ padding:18px 0; }
  .hero-title{ font-size:34px; }
  .hero-slides{ max-width:100%; }
  .hero-media{ min-height: 240px; }
}
/* HERO ESTÁTICO (Home Staging / Limpiezas al detalle) */
.hero-static .hero-overlay{
  align-items: center;
  justify-content: center;
}

.hero-static .hero-static-content{
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  padding: 12px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}


.hero-static .hero-title{
  margin-bottom: 4px;
}

.hero-static .hero-subtitle{
  max-width: 48ch;
}




/* INTRO PREMIUM (debajo del hero) */

.intro-premium{
  padding-top: 72px;
}

.intro-text p{
  margin: 0 0 14px;
}
.intro-text p:last-child{
  margin-bottom: 0;
}


.intro-premium-inner{
  max-width: 780px;
  margin: 0 auto;
}

.intro-text{
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--muted);
  text-align: center;
}

/* ABOUT */
.about-inner{ max-width: 980px; }
.about-grid{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr; /* imagen izquierda | texto derecha */
  gap:48px;
  align-items:center;
}
.about-title{
  margin:0 0 18px;
  font-size:32px;
  letter-spacing:-0.02em;
}
.about-text p{
  margin:0 0 16px;
  font-size:17px;
  line-height:1.65;
  color:var(--muted);
}
.about-text p:last-child{ margin-bottom:0; }

.about-photo{
  display:flex;
  justify-content:center;
  order:-1; /* imagen a la izquierda (por si el HTML está invertido) */
}
.about-photo img{
  width:260px;
  height:260px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:#fff;
}

@media (max-width: 860px){
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .about-photo{ order:-1; }
  .about-photo img{ width:220px; height:220px; }
  .about-title{ font-size:28px; }
}

/* SERVICES */
.services-head{ max-width:780px; margin-bottom:18px; }
.services-title{
  margin:0 0 10px;
  font-size:32px;
  letter-spacing:-0.02em;
}
.services-subtitle{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}

.service-hero{
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
  background:#fff;
  margin:18px 0;
}
.service-hero h3{ margin:0 0 8px; font-size:20px; }
.service-hero p{ margin:0 0 14px; color:var(--muted); }

.service-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid var(--line);
}
.btn.primary{ background:#111; color:#fff; border-color:#111; }
.btn.ghost{ background:#fff; color:var(--text); }

.services-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.service-card{
  display:block;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  background:#fff;
  text-decoration:none;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.service-card h3{ margin:0 0 8px; font-size:18px; }
.service-card p{ margin:0 0 14px; color:var(--muted); line-height:1.6; }
.service-link{ font-weight:700; }

/* Cards de servicio con imagen (no recorte) */


.service-media{
  width: 100%;
  height: 110px;          /* CLAVE: controla el tamaño */
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}


.service-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* CLAVE: no recorta */
  object-position: center;
  display: block;
}

@media (max-width: 860px){
  .services-title{ font-size:28px; }
  .services-grid{ grid-template-columns:1fr; }
}

/* CONTACT (solo WhatsApp) */
.contact{
  text-align:center;
  background:#fafafa;
  border-top:1px solid var(--line);
}
.contact-head{ max-width:720px; margin:0 auto 22px; }
.contact-title{
  margin:0 0 10px;
  font-size:32px;
  letter-spacing:-0.02em;
}
.contact-subtitle{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}
.contact-only{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.contact-wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  background:#ffffff;
  color: var(--wa-green);
  border:1px solid var(--wa-green);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.contact-wa:hover{
  background: rgba(37, 211, 102, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.wa-icon{ display:inline-flex; color: var(--wa-green); }
.contact-info{ margin:0; color:var(--muted); font-size:15px; }

@media (max-width: 860px){
  .contact-title{ font-size:28px; }
}

/* SERVICES – Cards con foto vertical (sin bandas) */
.svcCards{
  display: flex;
  gap: 20px;
}

.svcCard{
  flex: 1;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  aspect-ratio: 3 / 4;   /* CAMBIA a 9/16 si tus fotos lo son */
}

.svcCard__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* llena la card */
  object-position: center;
  display: block;
}

.svcCard__label{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  background: rgba(0,0,0,0.25);
  transition: background .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .svcCard:hover .svcCard__label{
    background: rgba(0,0,0,0.4);
  }
}

@media (max-width: 768px){
  .svcCards{ flex-direction: column; }
}


/* FOOTER DARK */
.footer-dark{
  background:#0f0f0f;
  color:#eaeaea;
  border-top: 1px solid #222;
}
.footer-dark .footer-top{
  padding:36px 0;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.6fr;
  gap:18px;
  align-items:center;
}

.footer-dark .footer-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  height:auto;
}
.footer-dark .footer-logo-img{
  display:block;
  height:80px;
  width:auto;
}
.footer-dark .footer-tagline{
  margin:0;
  padding-left:2px;
  margin-top: -2px;
  font-family: "Parisienne", cursive;
  font-size:16px;
  letter-spacing:0.03em;
  color:#bdbdbd;
}

.footer-dark .footer-nav{
  display:grid;
  gap:10px;
}
.footer-dark .footer-nav a{
  color:#bdbdbd;
  text-decoration:none;
}
.footer-dark .footer-nav a:hover{ color:#fff; }

.footer-dark .footer-contact p{
  margin:0;
  color:#bdbdbd;
  line-height:1.6;
}

.footer-dark .footer-social{
  display:flex;
  gap:12px;
  justify-content:flex-end;
}
.footer-dark .social-icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid #2a2a2a;
  color:#ffffff;
  transition: transform 160ms ease, background 160ms ease;
}
.footer-dark .social-icon:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}
.footer-dark .social-icon.wa{ color: var(--wa-green); }
.footer-dark .social-icon.ig{ color:#E1306C; }

.footer-dark .footer-bottom{
  border-top:1px solid #222;
  padding:14px 0;
}
.footer-dark .footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-dark .footer-bottom p{
  margin:0;
  color:#bdbdbd;
  font-size:14px;
}
.footer-dark .footer-legal a{
  color:#bdbdbd;
  text-decoration:none;
}
.footer-dark .footer-legal a:hover{ color:#fff; }

@media (max-width: 860px){
  .footer-dark .footer-top{ grid-template-columns:1fr; }
  .footer-dark .footer-social{ justify-content:flex-start; }
}


/* =========================
   HERO ESTÁTICO – seguro en todos los móviles
   ========================= */

/* HERO ESTÁTICO – seguro en todos los móviles */

/* Overlay visible por defecto */
.hero.hero-static .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.32);
  opacity: 1;
  transition: opacity .25s ease;
}

/* Subtítulo visible por defecto */
.hero.hero-static .hero-subtitle{
  color: #fff;
  opacity: 1;
  transform: none;
}

/* SOLO escritorio: modo “descubrir” */
@media (min-width: 992px) and (hover:hover) and (pointer:fine){
  .hero.hero-static .hero-media::after{ opacity: 0; }
  .hero.hero-static .hero-subtitle{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .hero.hero-static:hover .hero-media::after{ opacity: 1; }
  .hero.hero-static:hover .hero-subtitle{
    opacity: 1;
    transform: translateY(0);
  }
}