/* Tecnogran – Home */
/* HERO */
.hero{position:relative;overflow:hidden;min-height:560px;
  display:flex;align-items:center}
.hero-slides{position:absolute;inset:0}
.hs{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.38) saturate(1.1);
  opacity:0;transition:opacity 1.2s ease-in-out}
.hs-active{opacity:1}
.hero-tint{position:absolute;inset:0;
  background:linear-gradient(130deg,rgba(0,140,60,.6) 0%,rgba(0,18,6,.68) 100%)}
.hero-inner{position:relative;z-index:1;width:100%;padding-block:88px}
.hero-ey{font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.65);
  margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero-ey::before{content:"";width:28px;height:2px;
  background:var(--g);border-radius:2px;flex-shrink:0}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:800;line-height:1.03;
  letter-spacing:-.04em;color:#fff;text-wrap:balance;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--g)}
.hero-sub{font-size:.96rem;font-weight:400;color:rgba(255,255,255,.68);
  line-height:1.75;max-width:50ch;margin-bottom:36px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* SLIDER */
.slider-sec{padding-block:64px;background:var(--bg2);overflow:hidden}
.slider-hd{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:32px;flex-wrap:wrap;gap:12px}
.sarrows{display:flex;gap:8px}
.sarrow{width:38px;height:38px;border-radius:8px;border:1px solid var(--bd);
  background:var(--bg);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .13s;flex-shrink:0}
.sarrow:hover{border-color:var(--g);background:var(--g-lt)}
.sarrow svg{width:15px;height:15px;fill:var(--fg2)}
.sarrow:hover svg{fill:var(--g)}
.track{display:flex;gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.track::-webkit-scrollbar{display:none}

.pc{flex:0 0 218px;position:relative;scroll-snap-align:start;
  background:var(--bg);border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .17s,border-color .17s,transform .17s;cursor:pointer}
.pc:hover{box-shadow:0 6px 24px rgba(0,189,88,.14);
  border-color:rgba(0,189,88,.35);transform:translateY(-3px)}
.pc-img{aspect-ratio:1;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:18px;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:contain;transition:transform .22s}
.pc:hover .pc-img img{transform:scale(1.06)}
.pc-body{padding:14px;flex:1;display:flex;flex-direction:column}
.pc-cat{font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g);margin-bottom:6px}
.pc-name{font-weight:700;font-size:.9rem;color:var(--fg);
  line-height:1.3;margin-bottom:auto;padding-bottom:12px}
.pc-ft{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding-top:12px;border-top:1px solid var(--bd)}
.pc-price{font-weight:800;font-size:1.05rem;color:var(--g-acc)}
.add-btn{width:34px;height:34px;border-radius:7px;background:var(--g);
  border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .12s;flex-shrink:0}
.add-btn:hover{background:var(--g-dk)}
.add-btn svg{width:15px;height:15px;fill:#fff}

/* QUE OFRECEMOS — 3 cards con ícono propio, hover color */
.ofrece-sec{padding-block:80px;background:var(--bg)}
.ofrece-hd{margin-bottom:48px}
.ofrece-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:680px){.ofrece-grid{grid-template-columns:1fr;gap:16px}}

.of-card{border:1px solid var(--bd);border-radius:16px;overflow:hidden;
  background:var(--bg2);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.of-card::before{content:"";position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .35s;
  border-radius:16px;z-index:0}
.of-card:hover::before{opacity:1}
.of-card:hover{border-color:transparent;
  box-shadow:0 12px 40px rgba(0,60,20,.35);transform:translateY(-4px)}
.of-icon-area,.of-body{position:relative;z-index:1}

.of-icon-wrap{padding:36px 36px 0;display:flex;justify-content:center}
.of-icon-box{width:96px;height:96px;position:relative;display:flex;
  align-items:center;justify-content:center}
/* color icon shown by default, white on hover via parent .of-card:hover */
.of-icon-color{width:84px;height:84px;object-fit:contain;
  transition:opacity .2s;position:absolute}
.of-icon-white{width:84px;height:84px;object-fit:contain;
  transition:opacity .2s;position:absolute;opacity:0}
.of-card:hover .of-icon-wrap{/* tinted bg handled on body */}

.of-body{padding:24px 28px 32px;flex:1}
.of-title{font-weight:800;font-size:1.15rem;color:var(--fg);margin-bottom:10px;
  transition:color .2s}
.of-card:hover .of-title{color:#fff}
.of-card:hover .of-desc{color:rgba(255,255,255,.78)}
.of-card:hover .of-icon-color{opacity:0}
.of-card:hover .of-icon-white{opacity:1}
.of-desc{font-size:.86rem;color:var(--fg2);line-height:1.72;font-weight:400}

/* Override hover background for icon area */
.of-icon-area{padding:32px 36px 0;display:flex;justify-content:center;
  background:transparent;transition:background .2s}
/* card bg via CSS var */
.of-card::before{background-image:linear-gradient(180deg,rgba(0,35,12,.72) 0%,rgba(0,18,6,.84) 100%),var(--card-bg,none)}
.of-card:hover .of-icon-area{background:transparent}

/* MARCAS — carrusel automático */
.brands-sec{padding-block:52px;background:var(--bg2);
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  overflow:hidden}
.brands-title{text-align:center;font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
  margin-bottom:32px}
.brands-outer{position:relative;overflow:hidden}
.brands-track{display:flex;gap:40px;width:max-content;
  animation:brandscroll 28s linear infinite}
.brands-track:hover{animation-play-state:paused}
@keyframes brandscroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.brand-item{display:flex;align-items:center;justify-content:center;
  height:72px;padding:0 16px;opacity:.65;
  filter:grayscale(1);transition:opacity .2s,filter .2s;
  cursor:pointer;flex-shrink:0}
.brand-item:hover{opacity:1;filter:grayscale(0)}
.brand-item img{height:64px;width:auto;max-width:160px;object-fit:contain}

/* CERTIFICACIONES */
.certs-sec{padding-block:56px;background:var(--bg)}
.certs-inner{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.certs-copy{flex:1;min-width:260px}
.certs-copy .ey{margin-bottom:10px}
.certs-copy h2{margin-bottom:12px}
.certs-badges{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cert-badge{display:flex;align-items:center;justify-content:center;padding:8px}
.cert-badge img{height:80px;width:auto;max-width:180px;object-fit:contain;
  filter:grayscale(.15);transition:filter .2s,transform .2s}
.cert-badge:hover img{filter:grayscale(0);transform:scale(1.05)}

/* CONTACTO */
.contact-sec{padding-block:72px;background:var(--bg2)}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
@media(max-width:680px){.offices{grid-template-columns:1fr}}
.office{background:var(--bg);border:1px solid var(--bd);
  border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:0}
.office-map{margin-top:20px;border-radius:9px;overflow:hidden;height:150px;
  border:1px solid var(--bd);flex-shrink:0}
.office-map a{display:block;height:100%;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--g);font-weight:700;font-size:.8rem;
  gap:7px;letter-spacing:.04em;transition:background .15s}
.office-map a:hover{background:var(--g-lt)}
.map-pin{width:28px;height:28px;background:var(--g);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.map-pin svg{width:14px;height:14px;fill:#fff}
.off-city{font-weight:800;font-size:1.25rem;color:var(--fg);
  margin-bottom:24px;display:flex;align-items:center;gap:9px}
.off-city svg{width:14px;height:14px;fill:var(--g);flex-shrink:0}
.off-r{display:flex;align-items:flex-start;gap:10px;
  font-size:.96rem;color:var(--fg2);margin-bottom:14px;line-height:1.5}
.off-r svg{width:13px;height:13px;fill:var(--g);
  margin-top:3px;flex-shrink:0}
.off-r strong{color:var(--fg);font-weight:700}
.off-r a{color:var(--fg2)}.off-r a:hover{color:var(--g-acc)}
/* foto local */
.contact-photo{border-radius:14px;overflow:hidden;height:100%;min-height:220px}
.contact-photo img{width:100%;height:100%;object-fit:cover}


.pc a.pc-link{color:inherit;display:block}
.pc-img a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.pc-name a{color:inherit}
.pc-name a::after{content:"";position:absolute;inset:0;z-index:1}
.pc-ft{position:relative;z-index:2}
.add-btn{text-decoration:none}
.add-btn.loading{opacity:.6}
.add-btn.added{background:var(--g-acc)}
.add-btn.added::after{display:none}
.pc .added_to_cart{display:none}
.hero-ey,.hero-sub{max-width:none}