/* ============================================================
   ALGO — styles.css (completo)
   ============================================================ */

/* ---------- Variables (perillas) ---------- */
:root{
  /* Marca */
  --c1:#119da4;      /* acento */
  --c2:#5f3f85;      /* títulos */
  --c3:#282828;      /* texto */
  --bg:#ffffff;

  /* NAV */
  --nav-gap:        14px;
  --nav-item-padx:  10px;
  --nav-item-pady:   6px;
  --nav-font:       1rem;
  --nav-pad-x:       0px;
  --logo-size-desktop: 70px;
  --logo-size-mobile:  60px;

  /* Drawer móvil */
  --drawer-w:       min(80vw, 320px);

  /* ¿Quiénes somos? */
  --about-title:#119da4;
  --about-lead:#000;
  --about-text:#070707;

  /* Icono flotante (cards) */
  --about-icon-ring: 100px;
  --about-icon-img:   60px;
  --about-icon-top:  -36px;
  --about-card-pt:    82px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--c3); background:var(--bg); line-height:1.5; text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px,92%);margin-inline:auto}
.section{padding:64px 0}
.section__title{
  font-size:clamp(1.8rem,2.2vw + 1rem,2.4rem);
  color:var(--c2);
  margin:0 0 16px
}
.brand-acc{color:var(--c1)}
.sr-only{
  position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;
  height:1px;width:1px;overflow:hidden;white-space:nowrap
}

/* ============================================================
   NAV (desktop + móvil)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:transparent; transition:transform .28s ease;
}
.nav.nav--hidden{ transform: translateY(-110%); }
.nav__inner{
  width:min(1100px,92%); margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:10px var(--nav-pad-x); gap:16px;
}
.nav__list{
  display:flex; align-items:center; gap:var(--nav-gap); list-style:none; margin:0; padding:0;
}
.nav__list--right{ justify-self:end; }
.nav__list a{
  font-weight:600; font-size:var(--nav-font);
  letter-spacing:.2px; padding:var(--nav-item-pady) var(--nav-item-padx);
  color:#fff; text-decoration:none; text-shadow:0 1px 10px rgba(0,0,0,.25);
}
.nav__list a.is-active{
  outline:2px solid #ffffff55; outline-offset:4px; border-radius:10px;
}
.nav__logo{
  justify-self:center; display:inline-flex; align-items:center; justify-content:center;
}
.nav__logo img{
  display:block; height:var(--logo-size-desktop); width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
body:not(.is-home) .nav__list a{ color:var(--c3); text-shadow:none; }

/* Hamburguesa + drawer (móvil) */
.nav__toggle{
  display:none; width:40px; height:40px; border:0; background:transparent;
  padding:0; cursor:pointer;
}
.nav__burger,
.nav__burger::before,
.nav__burger::after{
  content:""; display:block; width:24px; height:2px; background:#fff; border-radius:2px;
  margin:0 auto; position:relative;
  transition:transform .25s ease, opacity .25s ease, background .25s ease;
}
.nav__burger::before{ position:absolute; top:-7px; left:0 }
.nav__burger::after{ position:absolute; top:7px; left:0 }
.nav__toggle[aria-expanded="true"] .nav__burger{ background:transparent }
.nav__toggle[aria-expanded="true"] .nav__burger::before{ transform:translateY(7px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] .nav__burger::after{ transform:translateY(-7px) rotate(-45deg) }

.nav__drawer{
  position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
  display:none;
}
.nav__drawer[hidden]{ display:none }
.nav__drawer:not([hidden]){ display:block }
.nav__drawer-inner{
  position:absolute; top:0; right:0; height:100%; width:var(--drawer-w);
  background:#111; padding:84px 18px 18px; box-shadow:-10px 0 24px rgba(0,0,0,.25);
}
.nav__drawer-link{
  display:block; color:#fff; text-decoration:none; font-weight:700; padding:12px 6px;
  border-bottom:1px solid #ffffff22;
}
.nav__drawer-link.is-active{ color:#119da4 }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:70svh; display:grid; place-items:center; isolation:isolate
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; filter:saturate(105%);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,#0006 0%,#0004 35%,#0000 60%);
  z-index:-1
}
.hero__content{ text-align:center; color:#fff; padding-block:48px }
.hero__rotator{
  font-weight:900; letter-spacing:7px; color:#fff; margin:0 0 12px;
  text-transform:uppercase; opacity:.92
}
.hero__title{ font-size:clamp(2rem,3.2vw + 1rem,3.6rem); margin:0 0 16px; line-height:1.1 }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:12px; border:2px solid transparent;
  font-weight:700; text-decoration:none; cursor:pointer; transition:.2s ease
}
.btn--primary{ background:var(--c1); color:#fff }
.btn--primary:hover{
  transform:translateY(-1px); box-shadow:0 8px 24px #119da455
}
.btn--ghost{
  border:2px solid var(--c1); color:var(--c1); background:transparent
}
.btn--ghost:hover{
  background:color-mix(in srgb, var(--c1) 10%, #fff)
}

/* ============================================================
   ¿QUIÉNES SOMOS?
   ============================================================ */
.about--center{ text-align:center; color: var(--about-text); }
.about__title{ color: var(--about-title); }
.about--center .about__lead{
  margin-inline:auto; color: var(--about-lead); font-weight:600;
}

.about__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px;
}
.about__card{
  position:relative; background:#eef7f8; border:1px solid #00000010; border-radius:16px;
  margin-top: calc(var(--about-icon-ring) / 2); padding: var(--about-card-pt) 18px 18px;
  box-shadow:0 6px 18px #0000000f; overflow:visible;
}
.about__icon{
  position:absolute; top: var(--about-icon-top); left:50%; transform:translateX(-50%);
  display:grid; place-items:center; width: var(--about-icon-ring); height: var(--about-icon-ring);
  background:#fff; border:2px solid #00000010; border-radius:999px; box-shadow:0 6px 18px #0000001a;
}
.about__icon img{
  width: var(--about-icon-img); height: var(--about-icon-img);
}
.about__body{ margin-top:8px }
.about__card-title{
  margin:6px 0 6px; font-size:1.05rem; color: var(--about-text);
}
.about__card--a{ background:#e6f7f8; border-color:#119da422; }
.about__card--a .about__card-title{ color:#0b6d72; }
.about__card--b{ background:#f1e9fb; border-color:#5f3f8522; }
.about__card--b .about__card-title{ color:#4b2f6a; }
.about__card--c{ background:#f4f6f8; border-color:#28282822; }
.about__card--c .about__card-title{ color:#2a2a2a; }

/* ============================================================
   DIFERENCIADORES (centrado + imagen de fondo)
   ============================================================ */
.diff{ padding:0; }

.diff__band{
  color:#fff; padding:56px 0;
  background-image:
    linear-gradient(180deg, rgba(95,63,133,.96) 0%, rgba(74,47,113,.96) 100%),
    var(--diff-bg, none);
  background-size:cover; background-position:center;
}

.diff .diff__wrap{
  display:grid; grid-template-columns:1fr; gap:26px;
  text-align:center; justify-items:center;
}
.diff .diff__text{ max-width:72ch; margin:0 auto; }
.diff .section__title{ color:#fff; }
.diff__text p{ color:#fff; opacity:.95; }

.diff__stats{
  width:min(1050px,96%); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:22px 16px; min-height:140px;
}
.stat--light{ background:#fff; color:#5f3f85; }
.stat--accent{ background:#119da4; color:#fff; }

.stat__num{
  font-weight:900; font-size:clamp(2rem, 2.8vw + .5rem, 2.8rem);
  line-height:1; letter-spacing:.5px; margin-bottom:10px;
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;
}
.stat__label{
  font-weight:800; letter-spacing:.6px;
  font-size:clamp(.85rem, .4vw + .8rem, 1rem);
}

/* ============================================================
   CREATIVIDAD (video izq.)
   ============================================================ */
.creatividad__grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center
}
.media__video{
  width:100%; border-radius:16px; box-shadow:0 10px 24px #0001
}

/* ============================================================
   CLIENTES (sección antigua simple - por si se usa aparte)
   ============================================================ */
.clients{ padding-block:40px }
.clients__row{
  display:flex; gap:24px; align-items:center; justify-content:center; opacity:.85
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#111; color:#ddd; padding:48px 0
}
.footer__grid{
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:start
}
.footer__brand{ text-align:right }
.footer__claim{
  color:#fff; font-weight:900; margin:10px 0 8px; line-height:1.1
}
.footer__legal{ color:#bbb }
.form{
  display:grid; gap:10px; max-width:520px
}
.form input,.form textarea{
  background:#1b1b1b; border:1px solid #ffffff1f; color:#fff;
  border-radius:10px; padding:12px 14px; outline:none
}
.form input:focus,.form textarea:focus{ border-color:var(--c1) }

/* ============================================================
   Responsive (<= 980px)
   ============================================================ */
@media (max-width:980px){
  /* Nav móvil */
  .nav__inner{
    grid-template-columns:auto 1fr auto; gap:10px; padding:8px var(--nav-pad-x)
  }
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center }
  .nav__logo{ justify-self:end }
  .nav__logo img{ height:var(--logo-size-mobile) }
  .nav__list{ display:none }

  /* Quiénes somos */
  .about__grid{ grid-template-columns:1fr }
  .about__icon{ top: calc(var(--about-icon-top) + 4px) }

  /* Diferenciadores */
  .diff__stats{
    width:100%; grid-template-columns:repeat(2,1fr);
  }

  .creatividad__grid{
    grid-template-columns:1fr; text-align:center
  }

  .footer__grid{
    grid-template-columns:1fr; text-align:center
  }
  .footer__brand{ text-align:center }
}

/* ============================================================
   OVERRIDE FINAL — Centrar DIFERENCIADORES por ID
   ============================================================ */
#diferenciadores.diff.section{ padding:0 !important; }

#diferenciadores .diff__band{
  background-image:
    linear-gradient(180deg, rgba(95,63,133,.96) 0%, rgba(74,47,113,.96) 100%),
    var(--diff-bg, none);
  background-size: cover;
  background-position: center;
}

#diferenciadores .diff__wrap{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 26px !important;
  justify-items: center !important;
  text-align: center !important;
}

#diferenciadores .section__title,
#diferenciadores .diff__text p{
  color:#fff !important;
}

#diferenciadores .diff__stats{
  width: min(1050px, 96%) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

@media (max-width:980px){
  #diferenciadores .diff__stats{
    width: 100% !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* DIFERENCIADORES: sin barra morada extra detrás si no la quieres */
#diferenciadores .diff__band{
  background-image: var(--diff-bg, none);
  background-size: cover;
  background-position: center;
}

/* ============================================================
   TESTIMONIOS + LOGOS
   ============================================================ */

section.testimonials{
  background:#fff;
  padding-block:64px 40px;
}

section.testimonials .testimonials__title{
  text-align:center;
  color:var(--c1);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 24px;
  font-size:clamp(1.4rem,.4vw + 1.2rem,1.6rem);
}

/* Slider de testimonios */
section.testimonials .t-slider{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:40px;
}

section.testimonials .t-slider__btn{
  background:none;
  border:0;
  color:#282828;
  font-size:32px;
  line-height:1;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight:600;
  user-select:none;
}
section.testimonials .t-slider__btn[disabled]{
  opacity:.3;
  cursor:not-allowed;
}

section.testimonials .t-slider__viewport{
  overflow:hidden;
  flex:1;
}
section.testimonials .t-slider__track{
  display:flex;
  gap:24px;
  transition:transform .3s ease;
  will-change:transform;
}

/* Cards de testimonio */
section.testimonials .testi-card{
  flex:0 0 340px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  border:1px solid #00000015;
  padding:20px 20px 16px;
  position:relative;
}
section.testimonials .testi-card::after{
  content:"";
  position:absolute;
  right:24px;
  bottom:-16px;
  width:36px;
  height:28px;
  background:#fff;
  border:1px solid #00000015;
  border-left:0;
  border-top:0;
  transform:skewX(-20deg);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

section.testimonials .testi-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
section.testimonials .testi-avatar{
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:999px;
  background:#282828;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:600;
  line-height:1;
}
section.testimonials .testi-meta{
  font-size:.85rem;
  line-height:1.35;
}
section.testimonials .testi-name{
  color:var(--c2);
  font-weight:700;
  font-size:.95rem;
  line-height:1.2;
  text-transform:uppercase;
}
section.testimonials .testi-role{
  color:#000;
  font-weight:600;
  font-size:.8rem;
  text-transform:uppercase;
}

section.testimonials .testi-text{
  font-size:.85rem;
  color:#282828;
  line-height:1.45;
  margin:0 0 8px;
}
section.testimonials .testi-stars{
  color:#FFD43B;
  font-size:.85rem;
  letter-spacing:2px;
  font-weight:700;
}

/* LOGOS DE CLIENTES
   Dos filas (.logos-row), cada una con 5 columnas en desktop.
*/
section.testimonials .logos-grid{
  width: min(1100px, 95%);
  margin-inline: auto;
  margin-top: 40px;
  display: grid;
  row-gap:32px;
}

/* cada fila */
section.testimonials .logos-grid .logos-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:32px;
  align-items:center;
  justify-items:center;
}

/* Tamaño base de TODOS los logos. */
section.testimonials .logos-grid .logos-row img{
  max-height:var(--logo-h, 60px);
  max-width:var(--logo-w, 160px);
  width:100%;
  height:auto;
  object-fit:contain;
  filter:none;
}

/* Responsive ajustes */
@media (max-width:980px){

  section.testimonials .t-slider{
    gap:8px;
  }
  section.testimonials .t-slider__btn{
    font-size:28px;
    width:36px;
    height:36px;
  }
  section.testimonials .testi-card{
    flex:0 0 280px;
  }

  section.testimonials .logos-grid .logos-row{
    grid-template-columns:repeat(3,1fr);
    row-gap:24px;
    column-gap:24px;
  }

  section.testimonials .logos-grid .logos-row img{
    max-height:var(--logo-h, 50px);
    max-width:var(--logo-w, 140px);
  }
}

/* más chico aún: 2 columnas */
@media (max-width:500px){
  section.testimonials .logos-grid .logos-row{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ============================================================
   LOGOS INDIVIDUALES (OPCIONAL)
   ============================================================ */

section.testimonials .logos-grid img.logo-casio{}
section.testimonials .logos-grid img.logo-cisco{}
section.testimonials .logos-grid img.logo-dell{}
section.testimonials .logos-grid img.logo-gshock{}
section.testimonials .logos-grid img.logo-hpe{}
section.testimonials .logos-grid img.logo-ibm{}
section.testimonials .logos-grid img.logo-inacom{}
section.testimonials .logos-grid img.logo-tdsynnex{}
section.testimonials .logos-grid img.logo-zoom{}
section.testimonials .logos-grid img.logo-alpe{}

/* ============================================================
   ⬇⬇⬇ NUEVO: Footer con formulario tipo "Contáctanos"
   ============================================================ */

.footer .footer__grid{
  grid-template-columns:1fr 1fr;
  align-items:flex-start;
}

.footer .footer__contact{
  max-width:340px;
  color:#fff;
  text-align:left;
}

.footer .footer__contact-title{
  margin:0 0 16px;
  font-size:clamp(1.8rem,1vw + 1rem,2.4rem);
  line-height:1.1;
  font-weight:900;
  color:var(--c1);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-family:inherit;
}

.footer .contact-form{
  display:grid;
  gap:14px;
}

.footer .contact-form__input{
  width:100%;
  background:#6f6f87;
  border:0;
  border-radius:2px;
  padding:12px 14px;
  font-size:1rem;
  font-family:inherit;
  color:#fff;
  outline:none;
  line-height:1.4;
}
.footer .contact-form__input::placeholder{
  color:#fff;
  opacity:1;
}
.footer .contact-form__textarea{
  resize:vertical;
  min-height:90px;
}

.footer .contact-form__btn{
  margin-top:10px;
  appearance:none;
  border:0;
  background:var(--c1);
  color:#fff;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.2;
  padding:12px 20px;
  border-radius:999px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:center;
  font-family:inherit;
}
.footer .contact-form__btn:hover{
  filter:brightness(1.08);
  box-shadow:0 8px 24px #119da455;
}

/* marca/info columna derecha */
.footer .footer__brand{
  text-align:right;
  color:#ddd;
}
.footer .footer__logo{
  max-width:160px;
  height:auto;
  margin-left:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.footer .footer__claim{
  color:#fff;
  font-weight:900;
  margin:16px 0 8px;
  line-height:1.3;
  font-size:1rem;
}
.footer .footer__legal{
  color:#bbb;
  font-size:.85rem;
  line-height:1.4;
  margin:0;
}

/* responsive del footer con formulario */
@media (max-width:980px){
  .footer .footer__grid{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .footer .footer__brand{
    text-align:center;
  }
  .footer .footer__logo{
    margin-inline:auto;
  }
  .footer .footer__contact{
    text-align:center;
  }
  .footer .contact-form__btn{
    margin-inline:auto;
  }
}

/* Mensaje de estado del form en el footer */
.form-status{
  font-size:.9rem;
  font-weight:600;
  text-align:center;
  margin-top:12px;
  padding:10px 12px;
  border-radius:8px;
  line-height:1.4;
}
.form-status--ok{
  background:#0f766e;
  color:#fff;
  border:1px solid #0d5f59;
}
.form-status--err{
  background:#b91c1c;
  color:#fff;
  border:1px solid #7f1d1d;
}

/* ===== Página EN MANTENIMIENTO ===== */
.mantenimiento-wrap{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  background:#111;
}
.mantenimiento-img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 20px 48px rgba(0,0,0,.5);
}

/* ============================================================
   AVATARES DE TESTIMONIO CON LOGO (sin círculo negro)
   ============================================================ */
section.testimonials .testi-head .testi-avatar.testi-avatar--logo {
  background: transparent !important;
  box-shadow: none !important;
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.testimonials .testi-head .testi-avatar.testi-avatar--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  display: block;
  background: transparent;
}
/* Ocultar flechas del slider de testimonios */
section.testimonials .t-slider__btn {
  display: none !important;
}