:root{
  --bg:#0f172a;
  --bg2:#0b1224;
  --card: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --txt:#eaf0ff;
  --muted:#b8c4dd;
  --primary:#22c55e;
  --primary2:#38bdf8;
  --radius:18px;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
 html{
  scroll-behavior: smooth;
  height: auto;
}

body{
  margin:0;
  min-height:100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background-color:#f2f3f5;
  background-image:url("../multimedia/fondobody.webp");

  background-repeat: repeat;
  background-size:  auto;     /* probá 600–900 */
  background-position: 0 0;

  background-attachment: scroll;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1120px, 92%); margin:0 auto}
.muted{color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--txt);
  font-weight:900;
  cursor:pointer;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0)}
.btn--primary{
  border:none;
  color:#061018;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 14px 40px rgba(56,189,248,.14);
}
.btn--soft{background: rgba(255,255,255,.05)}
.btn--mini{padding:10px 12px; font-size:13px}

.link{color: rgba(56,189,248,.95); font-weight:900}
.link:hover{text-decoration:underline}

.topbar{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(9,12,20,.70);
}
.topbar__inner{
  display:flex; flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  color: rgba(184,196,221,.9);
  font-weight:700;
  font-size:13px;
}
.topbar__link{opacity:.95}
.topbar__link:hover{opacity:1}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(9,12,20,.70);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  gap:14px;
}
.empre{color: white;}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:1000;
  letter-spacing:.5px;
}
.brand__text small{display:block; color:var(--muted); font-weight:700; font-size:12px}

.nav{display:flex; gap:10px; align-items:center}
.nav a{
  padding:10px 10px;
  border-radius:12px;
  color: rgba(184,196,221,.95);
  font-weight:900;
  font-size:14px;
}
.nav a:hover{background: rgba(255,255,255,.06); color:var(--txt)}
.nav__toggle{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:var(--txt);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}


.kicker{
  margin:0 0 10px;
  color: rgba(184,196,221,.9);
  font-weight:900;
  letter-spacing:.3px;
}
.hero__content h1{
  margin:0 0 12px;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size: clamp(15px, 1.1vw, 18px);
}

.fotoloc{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(56,189,248,.15), rgba(255,255,255,.02)),
    url("../multimedia/frenteloc.jpg");
  background-size: cover;
  background-position:center;
  box-shadow: var(--shadow);
  min-height: 360px;
  position:relative;
  overflow:hidden;
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 20% 30%, rgba(0,0,0,.18), rgba(0,0,0,.60));
}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.stat{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.stat strong{display:block; font-size:18px}
.stat span{color:var(--muted); font-weight:700}

.section{padding:56px 0;
background: transparent;}
.section--alt{
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section h2{margin:0 0 8px; font-size: clamp(22px, 2vw, 30px); color: white;}
.section__subtitle{margin:0 0 18px; color:var(--muted)}
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom: 12px;
}

.grid{display:grid; gap:16px}

/* ===== Servicios con imagen ===== */
.serviceGrid{grid-template-columns: repeat(3, 1fr)}
.sCard{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.20);
}
.sCard__media img{
  width:100%;
  height:160px;
  object-fit:cover;
  cursor: zoom-in;
}
.sCard__body{padding:14px; background: #666;}
.sCard__body h3{margin:0 0 6px}
.sCard__body p{margin:0 0 10px; color:var(--muted); font-weight:800}

/* ===== About ===== */


.about{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:16px;
  align-items:stretch;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: #666;
}
.about__media{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: #666;
    
  background-size: cover;
  background-position:center;
  box-shadow: var(--shadow);
  min-height: 340px;
}
.checklist{
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(234,240,255,.92);
  font-weight:800;
}
.checklist li{margin:10px 0}
.about__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.about__quote{
  margin-top:16px;
  padding:14px;
  border-radius: 16px;
  border:1px solid rgba(56,189,248,.18);
  background: rgba(56,189,248,.08);
}
.about__quote p{margin:0 0 6px; font-weight:900}
.about__quote small{color:var(--muted); font-weight:800}

/* ===== Cards genéricas (Productos / Promos) ===== */
.pCard{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.pCard img{
  width:100%;
  height:300px;
  object-fit:cover;
  cursor: zoom-in;
}
.pCard__body{padding:14px; background: #666;}
.pCard__body h3{margin:0 0 6px}
.pCard__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.pill{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(184,196,221,.95);
  font-weight:900;
  font-size:13px;
}

/* Productos: 12 items */
.productGrid{grid-template-columns: repeat(4, 1fr)}

/* Promos: 3 */
.promoGrid{grid-template-columns: repeat(3, 1fr)}

/* Tool */
.tool{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: #666;
}
.tool label{display:grid; gap:6px; color:var(--muted); font-weight:900}
.tool input, .tool select, .contact__form input, .contact__form textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--txt);
  outline:none;
}
.tool input:focus, .tool select:focus,
.contact__form input:focus, .contact__form textarea:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 4px rgba(56,189,248,.12);
}
.tool__result{
  padding:12px;
  border-radius: 14px;
  border:1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  font-weight:900;
}

/*Testimonos y reseña*/
.reviews-demo{
  padding: 72px 0;
  background: transparent;
  
}

.reviews-demo__head{
  text-align: center;
  margin-bottom: 36px;
  
}

.reviews-demo__subtitle{
  color: var(--muted, #666);
  font-size: 0.95rem;
}

.reviews-demo__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  
}

.review-card{
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
}

.review-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #555;
}

.review-text{
  font-size: 0.95rem;
  margin: 22px 0 14px;
  line-height: 1.5;
  color: #061018;
}

.review-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #666;
}

.review-stars{
  color: #f5b301;
  letter-spacing: 1px;
}

.reviews-demo__notice{
  margin-top: 40px;
  text-align: center;
  padding: 18px;
  border-radius: 14px;
  background: #666;
}

.reviews-demo__btn{
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}


/* Contact */
.contact{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:16px;
  align-items:start;
  
}
.contact__info{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: #666;
}
.infoRow{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.infoRow:first-of-type{border-top:none}
.infoRow span{font-size:18px; margin-top:2px}
.infoRow p{margin:4px 0 0; color:var(--muted); font-weight:800}

.contact__form{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: #666;
  display:grid;
  gap:12px;
}
.contact__form label{display:grid; gap:6px; color:var(--muted); font-weight:900}

/* Map */
.map{
  margin-top:16px;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.map iframe{width:100%; height:320px; border:0}

/* Floating WA */
.wa{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px; height:56px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  display:grid; place-items:center;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
  z-index:60;
}

.wa img{
  width:45px; 
  height:45px;
border-radius: 50%;}

  .wa{width: 60px;
    height: 60px;
 animation: pulse 2.5s infinite;
}

.logredes{width: 40px;
height: 40px;}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}


/* Footer */
.footer{
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(9,12,20,1);
}
.footer__inner{
  display:flex; justify-content: flex-start; gap: 8px; align-items:center;
}
.foottext{color: white;}
/* Modal */
.modal{
  border:none;
  padding:0;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(10,12,16,.95);
  color: var(--txt);
  box-shadow: var(--shadow);
  max-width: min(900px, 92vw);
}
.modal::backdrop{background: rgba(0,0,0,.65)}
.modal img{max-width: 92vw; max-height: 82vh}
.modal__close{
  position:absolute;
  top:10px; right:10px;
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: var(--txt);
  cursor:pointer;
}

/* ✅ Tarjeta que entra desde el costado */
.side-card{
  position: fixed;
  right: 18px;
  top: 96px;
  z-index: 9999;

  width: min(340px, calc(100vw - 36px));
  padding: 14px 16px;

  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);

  box-shadow: 0 14px 40px rgba(0,0,0,.18);

  transform: translateX(130%);
  opacity: 0;
  pointer-events: none;

  transition: transform .8s ease, opacity .8s ease;
}

.side-card__title{
  margin: 0 0 6px;
  font-weight: 800;
  line-height: 1.2;
  color: #111;
}

.side-card__text{
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
  color: rgba(17,17,17,.82);
}

/* ✅ Estado visible (entra despacio desde la derecha) */
.side-card.is-show{
  transform: translateX(0);
  opacity: 1;
}

/* ✅ Estado salida (baja opacidad y se va) */
.side-card.is-hide{
  transform: translateX(130%);
  opacity: 0;
}

/* =========================
   HERO (video de fondo) - Mobile first
========================= */
.hero{
  position: relative;
  min-height: 92vh;
  overflow: hidden;
}

/* capa visual atrás */
.hero__visual{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* video como background */
.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center; /* 👈 ajustá según tu video */
  display: block;

  filter: brightness(.55) contrast(1.1) saturate(1.05);
  transform: scale(1.03);
}

/* overlay: MOBILE (más fuerte para leer bien) */
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  
}

/* contenido arriba */
.hero__grid{
  position: relative;
  z-index: 2;
 

  display: grid;
  place-items: center;

  /* 👇 evita que el header sticky te lo tape */
  padding: 92px 0 56px;
  opacity: 0;
  transform: translateY(16px);
  animation: heroContentFade 1.2s ease-out forwards;
  animation-delay: 3s; /* ⏱️ aparece a los 4 segundos */


}
@keyframes heroContentFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero__content{
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  color: #fff;
}

/* Tipografías */
.hero__content h1{
  font-size: clamp(1.7rem, 5.2vw, 2.6rem);
  line-height: 1.08;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.hero__content .lead{
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  line-height: 1.4;
  opacity: .95;
  margin: 0 0 18px;
}

/* Acciones (botones) */
.hero__actions{
  display: grid;          /* 👈 mobile: stack */
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

.hero__actions .btn{
  width: 100%;            /* 👈 botones full en mobile */
  max-width: 420px;
  margin-inline: auto;
}

/* botones: en mobile, stack vertical */
.hero__actions{
  display: grid;
  gap: 12px;
  margin: 16px 0 18px;
}

.hero__actions .btn{
  width: 100%;
  justify-content: center;
}

/* stats: en mobile 2 columnas para que no quede apretado */
.stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.stat{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px 12px;
}

.stat strong{
  display: block;
  font-size: 1.05rem;
  line-height: 1.1;
}
.stat span{
  display: block;
  font-size: .9rem;
  opacity: .9;
  margin-top: 2px;
}

/* Opcional: en pantallas muy chicas que no tape tanto */
@media (max-width: 420px){
  .side-card{ top: 76px; right: 12px; }
}


/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr}
  .hero__media{min-height: 300px}
  .serviceGrid{grid-template-columns: repeat(2, 1fr)}
  .productGrid{grid-template-columns: repeat(2, 1fr)}
  .promoGrid{grid-template-columns: repeat(2, 1fr)}
  .about{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
}

@media (max-width: 720px){
  .nav__toggle{display:inline-flex}
  .header__cta{display:none}
  .nav{
    position:absolute;
    top:64px;
    right:4%;
    width:min(360px, 92vw);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(8,10,14,.92);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 12px}

  .stats{grid-template-columns: 1fr}
  .serviceGrid{grid-template-columns: 1fr}
  .productGrid{grid-template-columns: 1fr}
  .promoGrid{grid-template-columns: 1fr}
  
  .hero{
    height: 10vh;
   max-width: 853px;
  }
  .hero__grid{
    height: 10vh;
    padding: 120px 0 70px;
    
  }

  /* tablet/desktop: botones en fila */
  .hero__actions{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hero__actions .btn{
    width: auto;
    max-width: none;
  }
}