/* ============================================================
  TECHA AGAIN — Hoja de estilos (identidad corporativa roja)
   Diseño inspirado en la estructura de un distribuidor de
   equipos de impresión: barra superior oscura, doble marca,
   slider a pantalla completa, selector de gama Color / B·N.

   Paleta:
   --red      #D81F26  (rojo corporativo, acento primario)
   --red-dk   #A9151B  (hover / degradados)
   --ink      #1A1A1A  (barra superior, overlays)
   --graphite #2B2B2B
   --grey     #F4F4F4  (secciones alternas)
   --text     #333333
   Tipografía: Oswald (titulares, mayúsculas) + Inter (texto)
   ============================================================ */

:root{
  --red:#D81F26;
  --red-dk:#A9151B;
  --ink:#1A1A1A;
  --graphite:#2B2B2B;
  --grey:#F4F4F4;
  --grey-2:#EDEDED;
  --line:#E2E2E2;
  --text:#333333;
  --muted:#6C6C6C;
  --white:#fff;
  --maxw:1240px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadow-lg:0 24px 60px rgba(0,0,0,.18);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  line-height:1.65;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:'Oswald',sans-serif;
  color:var(--ink);
  line-height:1.1;
  margin:0 0 .5em;
  font-weight:600;
}
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Acentos tipográficos corporativos */
.kicker{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;.brand-logo
  letter-spacing:.18em;
  font-size:.8rem;
  font-weight:600;
  color:var(--red);
  display:inline-block;
  margin-bottom:14px;
}
.section-title{
  font-size:clamp(1.7rem,3vw,2.5rem);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.section-title .thin{ font-weight:300; }
.rule{ width:64px; height:4px; background:var(--red); margin:16px 0 24px; }
.rule.center{ margin-left:auto; margin-right:auto; }

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; font-size:.9rem;
  padding:14px 30px; border:2px solid transparent; border-radius:2px;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:#397042; }
.btn-outline{background:var(--red); color:#fff; }
.btn-outline:hover{ background:#397042; color:var(--ink); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:#397042; color:#fff; }
.btn-block{ width:100%; }

/* ============ TOP BAR ============ */
.topbar{ background:#397042; color:#bdbdbd; font-size:.78rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:40px; gap:16px; }
.topbar a{ color:#bdbdbd; transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; gap:22px; }
.topbar-left a{ position:relative; }
.topbar-right{ display:flex; align-items:center; gap:18px; }
.topbar-phone{ color:#fff; font-weight:600; font-family:'Oswald',sans-serif; letter-spacing:.03em; }
.topbar-socials{ display:flex; gap:10px; }
.topbar-socials a{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:.68rem; }
.topbar-socials a:hover{ background:var(--red); color:#fff; }

/* ============ HEADER ============ */
.site-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:300; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px; }

/* Doble marca (TECHA AGAIN + HP placeholder) */
.brands{ display:flex; align-items:center; gap:18px; }
.brand-logo{ display:flex; align-items:center; gap:9px; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.5rem; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; }
.brand-logo .mark{ width:44px; height:44px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; border-radius:3px; font-size:1.15rem; }
.brand-logo small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:.62rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.brand-divider{ width:1px; height:34px; background:var(--line); }
.brand-partner{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.05rem; color:#9a9a9a; letter-spacing:.04em; padding:6px 12px; border:2px solid var(--line); border-radius:3px; }

/* Navegación */
.main-nav > ul{ display:flex; align-items:center; }
.main-nav > ul > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:6px;
  font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; font-size:.86rem; color:var(--ink);
  padding:34px 15px; border-bottom:3px solid transparent; transition:color .2s, border-color .2s;
}
.nav-link:hover{ color:var(--red); border-bottom-color:var(--red); }
.caret{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.55; transition:transform .2s; }
li.has-dropdown:hover .caret{ transform:rotate(-135deg); margin-top:3px; }

.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border-top:3px solid var(--red); box-shadow:var(--shadow-lg);
  min-width:280px; padding:10px; margin-top:10px; display:none; z-index:400;
}
/* Puente invisible que cubre el hueco entre el enlace y el submenú,
   para que el cursor no pierda el :hover al bajar hacia las opciones */
.dropdown::before{
  content:""; position:absolute; top:-13px; left:0; right:0; height:13px; background:transparent;
}
/* Mostrar por clic (clase .open) en cualquier tamaño de pantalla */
li.has-dropdown.open .dropdown{ display:block; }
li.has-dropdown.open .caret{ transform:rotate(-135deg); margin-top:3px; }
/* Mostrar por hover solo en dispositivos con puntero (mouse) */
@media (hover:hover) and (min-width:821px){
  li.has-dropdown:hover .dropdown{ display:block; }
}
.dropdown > a{
  display:block; padding:12px 16px; font-size:.86rem; font-weight:500;
  color:var(--text); border-radius:2px; transition:background .15s, color .15s;
}
.dropdown > a:hover{ background:var(--grey); color:var(--red); }
.dropdown .group{ padding:6px 16px 4px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--red); font-weight:600; }
.dropdown .sub{ padding-left:30px; font-size:.82rem; color:var(--muted); }
.dropdown .sub::before{ content:"—"; margin-right:8px; opacity:.5; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; flex-direction:column; gap:5px; width:30px; height:24px; background:none; border:0; justify-content:center; }
.burger span{ height:3px; background:var(--ink); border-radius:2px; transition:.25s; }

/* ============ HERO SLIDER ============ */
.hero{ position:relative; overflow:hidden; background:#397042; }
.slides{  height:clamp(460px,64vh,620px); }
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .8s ease; display:flex; align-items:center;
}
.slide.active{ opacity:1; visibility:visible; }
.slide::before{ content:""; position:absolute; inset:0; z-index:1; }
/* Fondos diferenciados por slide (degradados corporativos, sin fotos externas) */
.slide-1{ background: url("/images/portada5.png") center center / cover no-repeat; }
.slide-2{ background: url("/images/portada4.jpg") center center / cover no-repeat;}
.slide-3{ background: url("/images/img2.webp") center center / cover no-repeat;}
.slide-4{ background: url("/images/img1.webp") center center / cover no-repeat; }
/* Motivo diagonal rojo (firma visual) */
.slide::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:42%;
  clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);
  z-index:1;
}
.slide .container{ position:relative; z-index:3; }
.slide-content{ max-width:620px; }
.slide-content .kicker{ color:var(--red); opacity:.7; letter-spacing:.24em; }
.slide-content h2{
  color:#fff; text-transform:uppercase; font-weight:600;
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:.98; letter-spacing:.01em; margin-bottom:.35em;
}
.slide-content h2 .accent{ color:var(--red); }
.slide-content .verde{ color:#397042; }
.slide-content p{ color:#d6d6d6; font-size:1.1rem; max-width:480px; margin-bottom:26px; }

.slider-arrows{ position:absolute; z-index:5; bottom:28px; right:32px; display:flex; gap:10px; }
.slider-arrows button{
  width:48px; height:48px; border:2px solid rgba(255,255,255,.4); background:rgba(0,0,0,.2);
  color:#fff; border-radius:2px; font-size:1.1rem; transition:.2s;
}
.slider-arrows button:hover{ background:var(--red); border-color:var(--red); }
.slider-dots{ position:absolute; z-index:5; bottom:34px; left:32px; display:flex; gap:9px; }
.slider-dots button{ width:34px; height:4px; border:0; background:rgba(255,255,255,.35); border-radius:2px; padding:0; transition:.25s; }
.slider-dots button.active{ background:var(--red); width:48px; }

/* Insignias de certificación en el hero */
.hero-certs{ position:absolute; z-index:5; top:24px; right:32px; display:flex; gap:10px; }
.hero-certs span{
  font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.35); padding:6px 10px; border-radius:2px; background:rgba(0,0,0,.2);
}

/* ============ TIRA DE SOLUCIONES (sobre el hero) ============ */
.solutions-strip{ background:var(--graphite); position:relative; z-index:10; }
.solutions-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); }
.solution-tile{
  padding:30px 26px; color:#fff; border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:8px; transition:background .25s; position:relative;
}
.solution-tile:last-child{ border-right:0; }
.solution-tile:hover{ background:var(--red); }
.solution-tile .st-ico{ font-size:1.6rem; }
.solution-tile h4{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.03em; margin:0; }
.solution-tile span{ font-size:.82rem; color:rgba(255,255,255,.7); }
.solution-tile .more{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; margin-top:4px; opacity:.85; }

/* ============ SECCIONES ============ */
section{ padding:88px 0; }
.bg-grey{ background:var(--grey); }
.bg-ink{ background:var(--ink); color:#fff; }
.bg-ink h2,.bg-ink h3,.bg-ink h4{ color:#fff; }
.bg-ink p{ color:#c3c3c3; }
.center{ text-align:center; }
.section-head{ max-width:720px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; }

/* Intro con texto + panel lateral */
.intro-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.intro-split p{ color:var(--muted); font-size:1.02rem; }
.intro-panel{
  background:linear-gradient(140deg,var(--ink),var(--graphite)); border-radius:4px; padding:44px;
  color:#fff; position:relative; overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:center;
}
.intro-panel::after{ content:""; position:absolute; top:0; right:0; width:60%; height:100%;
  background:repeating-linear-gradient(115deg,transparent 0 30px,rgba(216,31,38,.14) 30px 32px);
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
.intro-panel .big-num{ font-family:'Oswald',sans-serif; font-size:4rem; font-weight:700; color:var(--red); line-height:1; position:relative; z-index:2; }
.intro-panel h3{ color:#fff; text-transform:uppercase; position:relative; z-index:2; }
.intro-panel p{ color:#c3c3c3; position:relative; z-index:2; margin:0; }

/* ============ SELECTOR DE GAMA (Color / B·N) ============ */
.gama-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); }
.gama-card{
  border-right:1px solid var(--line); padding:0; display:flex; flex-direction:column; background:#fff; transition:box-shadow .25s;
}
.gama-card:last-child{ border-right:0; }
.gama-card:hover{ box-shadow:var(--shadow); z-index:2; }
.gama-media{
  height:200px; background:var(--grey); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.gama-media .glyph{ font-size:4rem; opacity:.28; }
.gama-media::before{ content:""; position:absolute; bottom:0; left:0; width:100%; height:4px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.gama-card:hover .gama-media::before{ transform:scaleX(1); }
.gama-body{ padding:24px; text-align:center; display:flex; flex-direction:column; flex:1; }
.gama-body h3{ text-transform:uppercase; font-size:1.15rem; margin-bottom:2px; }
.gama-body .sub{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--muted); margin-bottom:16px; }
.gama-links{ display:flex; gap:10px; margin-top:auto; justify-content:center; }
.gama-links a{
  flex:1; padding:11px 8px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
  border:2px solid var(--line); border-radius:2px; transition:.2s;
}
.gama-links a.color{ } 
.gama-links a:hover{ border-color:var(--red); background:var(--red); color:#fff; }

/* ============ FRANJA DE LOGOS / CERTIFICACIONES ============ */
.partners{ padding:50px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.partners .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px; }
.partners .plabel{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--muted); width:100%; text-align:center; margin-bottom:6px; }
.partner-item{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.15rem; color:#b3b3b3; letter-spacing:.04em; transition:color .2s; }
.partner-item:hover{ color:var(--red); }

/* ============ PÁGINAS INTERNAS ============ */
.page-hero{ background: url("/techagain/images/cabecerav2.jpg") center center / cover no-repeat; color:#fff; position:relative; overflow:hidden; padding:64px 0 58px; }
.page-hero::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:40%;
  background:repeating-linear-gradient(115deg,transparent 0 34px,rgba(216,31,38,.12) 34px 36px);
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
.breadcrumb{ position:relative; z-index:2; font-size:.78rem; color:#9a9a9a; text-transform:uppercase; letter-spacing:.06em; font-family:'Oswald',sans-serif; margin-bottom:14px; }
.breadcrumb a:hover{ color:#fff; }
.page-hero h1{ position:relative; z-index:2; color:#fff; text-transform:uppercase; font-size:clamp(1.9rem,3.4vw,2.8rem); max-width:820px; }
.page-hero p{ position:relative; z-index:2; color:#c3c3c3; max-width:640px; margin:0; }

/* Filtros */
.filter-bar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:88px; z-index:200; }
.filter-bar .container{ display:flex; gap:10px; padding:16px 24px; flex-wrap:wrap; align-items:center; }
.filter-bar .flabel{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--muted); margin-right:6px; }
.filter-chip{
  padding:9px 18px; border:2px solid var(--line); background:#fff; border-radius:2px;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; color:var(--muted); transition:.2s;
}
.filter-chip.active,.filter-chip:hover{ border-color:var(--red); color:var(--red); }

/* Grilla de productos */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-top:56px; }
.product-card{ background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; transition:box-shadow .25s, transform .2s; }
.product-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.product-media{ height:220px; background:var(--grey); display:flex; align-items:center; justify-content:center; position:relative; }
.product-media .glyph{ font-size:3.4rem; opacity:.3; }
.badge{ position:absolute; top:0; left:0; background:var(--red); color:#fff; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; padding:6px 14px; }
.badge.gray{ background:var(--graphite); }
.product-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.product-body .model{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--red); }
.product-body h3{ text-transform:uppercase; font-size:1.2rem; margin:0; }
.spec-list{ display:flex; flex-direction:column; gap:0; margin:4px 0; }
.spec-list li{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); padding:8px 0; border-bottom:1px solid var(--line); }
.spec-list li b{ color:var(--text); font-weight:600; }
.product-actions{ display:flex; gap:10px; margin-top:auto; padding-top:6px; }
.product-actions .btn{ flex:1; padding:12px 10px; font-size:.78rem; }

/* Splits informativos */
.info-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.info-visual{ background:linear-gradient(140deg,var(--ink),var(--graphite)); border-radius:4px; min-height:340px; display:flex; align-items:center; justify-content:center; padding:40px; position:relative; overflow:hidden; }
.info-visual::after{ content:""; position:absolute; top:0; right:0; width:55%; height:100%; background:repeating-linear-gradient(115deg,transparent 0 30px,rgba(216,31,38,.14) 30px 32px); clip-path:polygon(32% 0,100% 0,100% 100%,0 100%); }
.info-visual svg{ position:relative; z-index:2; }

/* Pasos numerados */
.steps{ counter-reset:step; }
.step{ display:grid; grid-template-columns:70px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:0; }
.step .n{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.7rem; color:var(--red); }
.step h4{ text-transform:uppercase; font-size:1.05rem; margin-bottom:6px; }
.step p{ margin:0; color:var(--muted); font-size:.92rem; }

/* Servicios en tarjetas */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card{ background:#fff; border:1px solid var(--line); padding:30px; transition:.25s; border-top:3px solid var(--red); }
.svc-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.svc-card .ico{ font-size:1.8rem; margin-bottom:14px; }
.svc-card h3{ text-transform:uppercase; font-size:1.1rem; margin-bottom:8px; }
.svc-card p{ margin:0; color:var(--muted); font-size:.9rem; }

/* Casos */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.case-card{ background:#fff; border:1px solid var(--line); overflow:hidden; }
.case-top{ background:var(--ink); color:#fff; padding:28px; position:relative; overflow:hidden; }
.case-top::after{ content:""; position:absolute; top:0; right:0; width:45%; height:100%; background:repeating-linear-gradient(115deg,transparent 0 26px,rgba(216,31,38,.16) 26px 28px); clip-path:polygon(35% 0,100% 0,100% 100%,0 100%); }
.case-top .kicker{ color:var(--red); position:relative; z-index:2; }
.case-top h3{ color:#fff; text-transform:uppercase; margin:0; position:relative; z-index:2; }
.case-body{ padding:28px; }
.case-body p{ color:var(--muted); }
.case-metrics{ display:flex; gap:26px; margin-top:18px; }
.case-metrics strong{ display:block; font-family:'Oswald',sans-serif; font-size:1.7rem; color:var(--red); line-height:1; }
.case-metrics span{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

/* ============ FORMULARIOS ============ */
.form-card{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--red); padding:36px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.76rem; color:var(--ink); }
.field input,.field select,.field textarea{
  padding:13px 15px; border:1px solid var(--line); border-radius:2px; background:var(--grey);
  font-family:inherit; font-size:.92rem; color:var(--text); transition:border-color .15s, background .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); background:#fff; }
.field textarea{ resize:vertical; min-height:110px; }
.form-msg{ margin-top:14px; padding:13px 16px; border-radius:2px; font-size:.86rem; display:none; }
.form-msg.ok{ display:block; background:#eafaf0; color:#1c7a43; border-left:3px solid #1c7a43; }
.form-msg.err{ display:block; background:#fdecee; color:var(--red-dk); border-left:3px solid var(--red); }
.consent{ display:flex; gap:8px; font-size:.76rem; color:var(--muted); margin-top:10px; }

/* CTA band */
.cta-band{ background:var(--red); color:#fff; text-align:center; padding:60px 24px; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; top:0; right:0; width:35%; height:100%; background:repeating-linear-gradient(115deg,transparent 0 30px,rgba(0,0,0,.08) 30px 32px); clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
.cta-band h2{ color:#fff; text-transform:uppercase; position:relative; z-index:2; }
.cta-band p{ color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 24px; position:relative; z-index:2; }
.cta-band .btn{ position:relative; z-index:2; }

/* ============ FOOTER ============ */
.site-footer{ background:#397042; color:#a7a7a7; padding:64px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer-grid h4{ color:#fff; text-transform:uppercase; font-size:.86rem; letter-spacing:.08em; margin-bottom:18px; }
.footer-brand .brand-logo{ color:#fff; margin-bottom:16px; }
.footer-brand p{ font-size:.9rem; max-width:300px; color:#9a9a9a; }
.footer-grid ul li{ margin-bottom:11px; font-size:.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-socials{ display:flex; gap:10px; margin-top:16px; }
.footer-socials a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.footer-socials a:hover{ background:var(--red); color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.78rem; color:#8a8a8a; }

/* Botón flotante callback */
.callback-fab{
  position:fixed; right:22px; bottom:22px; z-index:500;
  background:var(--red); color:#fff; border:0; border-radius:50px;
  padding:14px 22px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px; transition:.2s;
}
.callback-fab:hover{ background:#397042; transform:translateY(-2px); }

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .solutions-strip .container{ grid-template-columns:repeat(2,1fr); }
  .solution-tile:nth-child(2){ border-right:0; }
  .gama-grid{ grid-template-columns:repeat(2,1fr); }
  .gama-card:nth-child(2){ border-right:0; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .intro-split,.info-split{ grid-template-columns:1fr; gap:40px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .case-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .main-nav{ position:fixed; inset:88px 0 0 0; background:#fff; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; padding:12px 20px 120px; z-index:250; }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; }
  .nav-link{ padding:16px 6px; border-bottom:1px solid var(--line); }
  .nav-link:hover{ border-bottom-color:var(--line); }
  .dropdown{ position:static; display:none; transform:none; box-shadow:none; border-top:0; min-width:auto; padding:0 0 8px 12px; }
  li.has-dropdown.open .dropdown{ display:block; }
  .caret{ margin-left:auto; }
  .burger{ display:flex; }
  .topbar-left{ display:none; }
  .brand-partner{ display:none; }
  .gama-grid{ grid-template-columns:1fr; }
  .gama-card{ border-right:0; border-bottom:1px solid var(--line); }
  .product-grid,.svc-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .slider-dots{ left:20px; bottom:20px; }
  .slider-arrows{ right:20px; bottom:20px; }
  .hero-certs{ display:none; }
  section{ padding:60px 0; }
}
@media (max-width:480px){
  .brand-logo small{ display:none; }
  .header-cta .btn{ display:none; }
}

/* ============================================================
   MEJORAS DEL INDEX — animaciones de scroll, contadores,
   barra de progreso del slider y micro-interacciones
   ============================================================ */

/* Aparición al hacer scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Barra de progreso del slider */
.slider-progress{ position:absolute; left:0; bottom:0; height:4px; width:100%; background:rgba(255,255,255,.12); z-index:6; }
.slider-progress span{ display:block; height:100%; width:0; background:var(--red); transition:width .1s linear; }

/* Fila de estadísticas del hero */
.hero-stats{ display:flex; gap:40px; margin-top:34px; flex-wrap:wrap; }
.hero-stats .stat strong{ font-family:'Oswald',sans-serif; font-weight:700; font-size:2.2rem; color:#fff; line-height:1; display:block; }
.hero-stats .stat span{ font-size:.78rem; color:#c3c3c3; text-transform:uppercase; letter-spacing:.08em; }

/* Contador animado (intro / franjas) */
.counter{ font-variant-numeric:tabular-nums; }

/* Efecto de brillo en botones rojos */
.btn-red{ position:relative; overflow:hidden; }
.btn-red::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-red:hover::after{ left:130%; }

/* Sección "por qué nosotros" */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.why-item{ text-align:center; padding:10px; }
.why-item .why-ico{
  width:66px; height:66px; margin:0 auto 16px; border-radius:50%;
  background:var(--grey); display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; border:2px solid var(--line); transition:.25s;
}
.why-item:hover .why-ico{ background:var(--red); border-color:var(--red); transform:translateY(-4px); }
.why-item h4{ text-transform:uppercase; font-size:1rem; margin-bottom:6px; }
.why-item p{ font-size:.86rem; color:var(--muted); margin:0; }

@media (max-width:1040px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .why-grid{ grid-template-columns:1fr; } .hero-stats{ gap:26px; } }
.brand-logo {
    display: flex;
    align-items: center;
}

.brand-logo .logo {
    height: 60px;      /* Ajusta el tamaño según necesites */
    width: auto;
    display: block;
}
.info-visual{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-image{
    width: 100%;
    max-width: 600px;   /* mismo ancho del viewBox del SVG */
    height: 400px;      /* misma altura del SVG */
    object-fit: contain; /* mantiene la proporción */
    display: block;
}
.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    z-index:9999;
    transition:all .3s ease;
    animation:whatsappPulse 2s infinite;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    background:#20ba5a;
}

.whatsapp-float svg{
    width:36px;
    height:36px;
}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@media (max-width:768px){
    .whatsapp-float{
        width:58px;
        height:58px;
        right:18px;
        bottom:18px;
    }

    .whatsapp-float svg{
        width:32px;
        height:32px;
    }
}