/* === NETZCO base tokens === */
:root{
  --netzco-primary:#00B2E3;
  --netzco-primary-dk:#005679;
  --netzco-danger:#E10600;
}

.netzco-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:600; border-radius:.75rem; padding:.9rem 1.2rem;
  transition:all .25s ease; text-decoration:none;
}

.netzco-btn-primary{
  background:#fff; color:var(--netzco-primary-dk); border:2px solid #fff;
}
.netzco-btn-primary:hover{ background:#f8fafc; }

.netzco-btn-outline{
  background:transparent; color:#fff; border:2px solid #fff;
}
.netzco-btn-outline:hover{ background:#fff; color:var(--netzco-primary-dk); }

/* === HERO === */
.netzco-hero{
  position:relative;
  min-height:calc(100vh - 80px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding-top:80px; /* navbar offset */
}
.netzco-hero__bg,
.netzco-hero__bg-next{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1); transition:opacity 1.5s ease, transform 1.5s ease;
}
.netzco-hero__bg{ opacity:1; transform:scale(1); }
.netzco-hero__bg.is-fading{ opacity:0; transform:scale(1.05); }

.netzco-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.5), transparent);
}

.netzco-hero__inner{ position:relative; z-index:2; text-align:center; max-width:72rem; padding:0 1.25rem; }
.netzco-hero__title{ color:#fff; font-weight:800; line-height:1.12; text-shadow:0 2px 10px rgba(0,0,0,.5); }
@media (min-width:768px){ .netzco-hero__title{ font-size:clamp(2.25rem, 4vw, 3.75rem); } }
@media (max-width:767px){ .netzco-hero__title{ font-size:2rem; } }
.netzco-hero__subtitle{ color:#fff; opacity:.95; font-weight:300; margin:.75rem auto 1.25rem; max-width:56rem; text-shadow:0 1px 5px rgba(0,0,0,.4); }

.netzco-hero__badges{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:center; margin:1rem 0 2rem; }
.netzco-glass{
  backdrop-filter:saturate(1.2) blur(6px); -webkit-backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; color:#fff; padding:.5rem .9rem; display:inline-flex; align-items:center; gap:.5rem;
}

.netzco-hero__ctas{ display:flex; flex-direction:column; gap:.75rem; align-items:center; justify-content:center; }
@media (min-width:640px){ .netzco-hero__ctas{ flex-direction:row; } }

/* Spacing helpers similar to Tailwind used in React */
.mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem } .mt-4{ margin-top:1rem } .mt-6{ margin-top:1.5rem }
.mb-4{ margin-bottom:1rem } .mb-6{ margin-bottom:1.5rem } .my-6{ margin-top:1.5rem; margin-bottom:1.5rem }
.rounded-full{ border-radius:9999px } .rounded-xl{ border-radius:1rem } .rounded-2xl{ border-radius:1.25rem }
.text-sm{ font-size:.875rem } .text-base{ font-size:1rem } .text-lg{ font-size:1.125rem }
.text-white{ color:#fff } .text-yellow-300{ color:#fde047 } .text-green-300{ color:#86efac } .text-blue-300{ color:#93c5fd }
.font-medium{ font-weight:500 } .font-semibold{ font-weight:600 }


/*segunda version*/


/* ==== FULL BLEED ==== */
.netzco-hero--fullbleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==== HERO LAYOUT ==== */
.netzco-hero{
  position:relative;
  min-height:calc(100vh - 0px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding-top:80px; /* offset de navbar base, ajustable en control */
}
.netzco-hero__bg,
.netzco-hero__bg-next{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:opacity 1.5s ease, transform 1.5s ease;
}
.netzco-hero__bg{ opacity:1; transform:scale(1); }
.netzco-hero__bg.is-fading{ opacity:0; transform:scale(1.05); }
.netzco-hero__bg-next{ opacity:0; transform:scale(1.0); }

.netzco-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0, calc(var(--overlay-alpha, .65))), rgba(0,0,0, calc(var(--overlay-alpha, .65) * .7)) 50%, transparent 85%);
  pointer-events:none;
}

.netzco-hero__inner{
  position:relative; z-index:2; text-align:center; max-width:72rem; padding:0 1.25rem;
}

/* ==== TYPO ==== */
.netzco-hero__title{
  color:#fff; font-weight:800; line-height:1.12;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  font-size: clamp(2rem, 4vw, 3.75rem);
}
.netzco-hero__subtitle{
  color:#fff; opacity:.95; font-weight:300; margin:.75rem auto 1.25rem; max-width:56rem;
  text-shadow:0 1px 5px rgba(0,0,0,.4);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

/* ==== BADGES / GLASS ==== */
.netzco-hero__badges{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:center; margin:1.2rem 0 2rem;
}
.netzco-glass{
  backdrop-filter:saturate(1.2) blur(6px); -webkit-backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; color:#fff; padding:.6rem 1rem; display:inline-flex; align-items:center; gap:.55rem;
}
.netzco-glass__icon svg{ width:20px; height:20px; display:block; }
.netzco-glass__text{ font-weight:500; font-size: clamp(.875rem, 1.4vw, 1rem); }

/* ==== CTAs ==== */
.netzco-hero__ctas{
  display:flex; flex-direction:column; gap:.75rem; align-items:center; justify-content:center;
}
@media (min-width:640px){ .netzco-hero__ctas{ flex-direction:row; } }

.netzco-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:700; border-radius:1rem; padding:.9rem 1.2rem; text-decoration:none;
  transition:transform .15s ease, background .25s ease, color .25s ease, border-color .25s ease;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}
.netzco-btn-primary{
  background:#fff; color:#005679; border:2px solid #fff;
}
.netzco-btn-primary:hover{ transform:translateY(-1px); background:#f8fafc; }
.netzco-btn-outline{
  background:transparent; color:#fff; border:2px solid #fff;
}
.netzco-btn-outline:hover{ background:#fff; color:#005679; }
.netzco-hero__arrow{ margin-left:.5rem; }

/* ==== SCROLL HINT ==== */
.netzco-scrollhint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:none;
}
@media (min-width:768px){ .netzco-scrollhint{ display:block; } }
.netzco-scrollhint__mouse{
  width:24px; height:40px; border:2px solid rgba(255,255,255,.6); border-radius:12px; display:flex; justify-content:center; align-items:flex-start;
}
.netzco-scrollhint__wheel{
  width:4px; height:10px; background:rgba(255,255,255,.8); border-radius:2px; margin-top:6px;
  animation: netzco-wheel 2s infinite ease-in-out;
}
@keyframes netzco-wheel { 0%{ transform:translateY(0) } 50%{ transform:translateY(12px) } 100%{ transform:translateY(0) } }



/* ===== ABOUT / QUIÉNES SOMOS ===== */
.netzco-about { position:relative; padding: clamp(3rem, 6vw, 6rem) 0; background:#f8fafc; }
.netzco-about__container { width: min(1200px, 92vw); margin-inline:auto; }

.netzco-about__heading { text-align:center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.netzco-about__title { font-weight:800; color:#111827; font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; }
.netzco-about__title .accent { color: var(--netzco-primary, #00B2E3); }
.netzco-about__bar { width:96px; height:6px; margin:.75rem auto 0; border-radius:999px;
  background: linear-gradient(90deg, var(--bar-start, #00B2E3), var(--bar-end, #005679));
}

/* Bloques de historia (grid 2 columnas) */
.netzco-about__stack { display:flex; flex-direction:column; gap: clamp(2rem, 4vw, 4rem); }
.netzco-about__grid {
  display:grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 992px) {
  .netzco-about__grid { grid-template-columns: 1fr 1fr; }
  .netzco-about__grid--reverse { direction: rtl; }
  .netzco-about__grid--reverse > * { direction: ltr; }
}

.netzco-about__text { color:#374151; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height:1.7; }
.p-lg { font-size: clamp(1rem, 1.3vw, 1.125rem); }
.mb-4 { margin-bottom:1rem; }

.netzco-about__image-frame { position:relative; border-radius:1rem; overflow:hidden; box-shadow: 0 15px 50px rgba(0,0,0,.12); transform: translateZ(0); }
.netzco-about__image-frame:hover { transform: translateY(-2px); }
.netzco-about__img { display:block; width:100%; height:auto; object-fit:cover; }

/* Misión & Visión (tarjetas) */
.netzco-about__mv {
  display:grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .netzco-about__mv { grid-template-columns: 1fr 1fr; } }
.netzco-about__mv-item {
  background:#fff; border-radius:1rem; padding:1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.netzco-about__mv-head { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.netzco-about__mv-icon {
  width:48px; height:48px; border-radius:999px;
  background: linear-gradient(135deg, #00B2E3, #005679);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.netzco-about__mv-icon svg { width:24px; height:24px; }
.netzco-about__mv-title { font-weight:800; color:#111827; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.netzco-about__mv-body { color:#374151; }

/* Stats */
.netzco-about__stats {
  display:grid; grid-template-columns:1fr; gap: .75rem;
}
@media (min-width: 576px) { .netzco-about__stats { grid-template-columns: repeat(3, 1fr); } }
.netzco-about__stat { text-align:center; background:transparent; padding:1rem .75rem; border-radius:.75rem; }
.netzco-about__stat-icon svg { width:28px; height:28px; opacity:.9; }
.netzco-about__stat-num { font-weight:800; font-size: clamp(1.5rem, 3vw, 2rem); color:#111827; margin-top:.35rem; }
.netzco-about__stat-label { color:#4b5563; font-weight:500; font-size: clamp(.9rem, 1.3vw, 1rem); }

/* CTA */
.netzco-about__cta { display:flex; justify-content:center; margin-top: .5rem; }

/* Reuso de botones del hero */
.netzco-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:1rem; padding:.9rem 1.2rem; text-decoration:none; transition:transform .15s ease, background .25s ease, color .25s ease, border-color .25s ease; font-size: clamp(1rem, 1.8vw, 1.125rem); }
.netzco-btn-primary { background:#005679; color:#fff; border:2px solid #005679; }
.netzco-btn-primary:hover { transform:translateY(-1px); background:#00465f; border-color:#00465f; }



/* ===== CLIENTS / NUESTROS CLIENTES ===== */
.netzco-clients { position:relative; padding: clamp(3rem, 6vw, 6rem) 0; background:#f8fafc; }
.netzco-clients__container { width: min(1200px, 92vw); margin-inline:auto; }
.netzco-clients__heading { text-align:center; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.netzco-clients__title { font-weight:800; color:#111827; font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height:1.1; }
.netzco-clients__subtitle { color:#4b5563; max-width: 56rem; margin: .5rem auto 0; }

/* Filtros (chips) */
.netzco-clients__filters {
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:center;
  margin: clamp(1rem, 2.2vw, 1.25rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.netzco-chip{
  appearance:none; border:1.5px solid rgba(0,0,0,.08); background:#fff; color:#111827;
  padding:.5rem .85rem; border-radius:999px; font-weight:600; cursor:pointer;
  transition: all .2s ease; font-size: .95rem;
}
.netzco-chip:hover{ border-color: rgba(0,0,0,.18); transform: translateY(-1px); }
.netzco-chip.is-active{
  border-color:#005679; background:#005679; color:#fff; box-shadow: 0 8px 25px rgba(0,86,121,.22);
}

/* Grid de logos */
.netzco-clients__grid{
  display:grid; gap: clamp(.75rem, 1.8vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px){ .netzco-clients__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px){ .netzco-clients__grid{ grid-template-columns: repeat(var(--clients-cols, 5), 1fr); } }

.netzco-client{
  background:#fff; border-radius: .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, visibility .2s ease;
  display:flex; align-items:center; justify-content:center; min-height: 7rem;
}
.netzco-client.is-hidden{
  opacity:0; visibility:hidden; transform: scale(.98);
}
.netzco-client__inner{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  padding: clamp(1rem, 2.2vw, 1.25rem);
}
.netzco-client:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.10); }
.netzco-client img{ display:block; width:auto; height:auto; max-width: 100%; object-fit: contain; }

/* Afinar enfoque teclado en chips */
.netzco-chip:focus-visible{ outline: 2px solid #005679; outline-offset: 2px; }



/* ===== CONTACT / CONTÁCTANOS ===== */
.netzco-contact{ position:relative; padding: clamp(3rem, 6vw, 6rem) 0; background:#f8fafc; }
.netzco-contact__container{ width: min(1200px, 92vw); margin-inline:auto; }
.netzco-contact__grid{
  display:grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .netzco-contact__grid{ grid-template-columns: 1.1fr .9fr; }
}

.netzco-contact__title{
  font-weight:800; color:#111827;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height:1.1;
}
.netzco-contact__subtitle{ color:#4b5563; margin-top:.5rem; max-width:56rem; }

.netzco-contact__cards{
  margin-top: clamp(1rem, 2.5vw, 1.35rem);
  display:grid; gap:.75rem; grid-template-columns: 1fr;
}
@media (min-width: 576px){ .netzco-contact__cards{ grid-template-columns: 1fr 1fr; } }

.netzco-contact__card{
  display:flex; gap:.9rem; align-items:center; background:#fff; border-radius:1rem;
  padding:.9rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.netzco-contact__card-icon{
  width:44px; height:44px; border-radius:999px;
  background: linear-gradient(135deg, #00B2E3, #005679);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.netzco-contact__card-icon svg{ width:22px; height:22px; }
.netzco-contact__card-label{ font-weight:700; color:#111827; }
.netzco-contact__card-value{ color:#005679; font-weight:600; word-break: break-word; }

.netzco-contact__formwrap{
  background:#fff; border-radius:1.25rem; box-shadow: 0 18px 48px rgba(0,0,0,.10);
  padding: clamp(1rem, 3.2vw, 1.75rem);
}

.netzco-form .row{ display:grid; gap:.75rem; grid-template-columns: 1fr; margin-bottom:.75rem; }
@media (min-width: 640px){ .netzco-form .row{ grid-template-columns: 1fr 1fr; } }
.netzco-form .row .col--full{ grid-column: 1 / -1; }

.netzco-form .label{ display:block; font-weight:700; color:#111827; margin-bottom:.25rem; }
.netzco-form input[type="text"],
.netzco-form input[type="email"],
.netzco-form input[type="tel"],
.netzco-form select,
.netzco-form textarea{
  width:100%; background:#fff; border:1.5px solid rgba(0,0,0,.1); border-radius:.8rem;
  padding:.75rem .9rem; font-size:1rem; color:#111827;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.netzco-form textarea{ resize:vertical; min-height: 120px; }
.netzco-form input:focus, .netzco-form select:focus, .netzco-form textarea:focus{
  outline:none; border-color:#005679; box-shadow: 0 0 0 3px rgba(0,86,121,.12);
}

.netzco-form__actions{
  display:flex; gap:.75rem; align-items:center; margin-top:.5rem; flex-wrap:wrap;
}
.netzco-form__msg{ min-height:1.25rem; font-weight:600; }
.netzco-form__msg.is-success{ color:#065f46; }  /* verde oscuro */
.netzco-form__msg.is-error{ color:#9b1c1c; }    /* rojo oscuro */

.netzco-btn.netzco-btn-primary{
  background:#005679; color:#fff; border:2px solid #005679;
}
.netzco-btn.netzco-btn-primary:hover{ transform:translateY(-1px); background:#00465f; border-color:#00465f; }
.btn-loader{
  display:none; width:18px; height:18px; border-radius:999px; border:2px solid #fff; border-right-color: transparent;
  animation: netzco-spin 0.8s linear infinite;
}
.is-loading .btn-text{ opacity: .0; }
.is-loading .btn-loader{ display:inline-block; }
@keyframes netzco-spin { to { transform: rotate(360deg); } }

/* Honeypot oculto */
.netzco-hp{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; }

/* Mapa */
.netzco-contact__map{ margin-top: clamp(1.25rem, 3vw, 2rem); border-radius:1rem; overflow:hidden; box-shadow: 0 12px 36px rgba(0,0,0,.08); }









/* ===== FOOTER ===== */
.netzco-footer{ background:#005679; color:#fff; padding: 4rem 0 2rem; }
.netzco-footer__container{ width:min(1200px,92vw); margin-inline:auto; }

.netzco-footer__grid{
  display:grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 768px){ .netzco-footer__grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .netzco-footer__grid{ grid-template-columns: repeat(4,1fr); } }

.netzco-footer__logo{ height:48px; width:auto; display:block; }
.netzco-footer__muted{ color:#D1D5DB; font-size:.95rem; margin-top:.5rem; }

.netzco-footer__title{ font-weight:700; margin-bottom:.85rem; font-size:1.125rem; }
.netzco-footer__list{ list-style:none; margin:0; padding:0; }
.netzco-footer__list li{ margin:.35rem 0; }
.netzco-footer__list a{
  color:#E5E7EB; text-decoration:none; transition: color .2s ease, transform .15s ease;
}
.netzco-footer__list a:hover{ color:#fff; transform: translateX(2px); }

/* Contacto */
.netzco-footer__contacts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.netzco-footer__contact{ display:flex; gap:.6rem; align-items:flex-start; }
.netzco-footer__cicon{
  width:36px; height:36px; border-radius:999px;
  background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.netzco-footer__cicon svg{ width:18px; height:18px; color:#fff; }
.netzco-footer__ctext{ display:flex; flex-direction:column; line-height:1.3; }
.netzco-footer__clabel{ font-weight:700; color:#fff; }
.netzco-footer__cvalue{ color:#D1D5DB; text-decoration:none; }
.netzco-footer__cvalue:hover{ color:#fff; }

/* Bottom bar */
.netzco-footer__bottom{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:1rem; display:flex; flex-direction:column; gap:.75rem; align-items:center; justify-content:space-between;
}
@media (min-width: 640px){
  .netzco-footer__bottom{ flex-direction:row; }
}
.netzco-footer__copy{ color:#9CA3AF; font-size:.9rem; text-align:center; }

.netzco-footer__social{ display:flex; align-items:center; gap:.75rem; }
.netzco-footer__sbtn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background: rgba(255,255,255,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.netzco-footer__sbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.15);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
}
.netzco-footer__sbtn svg{ width:20px; height:20px; color:#fff; }




/* =========================
   NAVBAR / HEADER (LIMPIO)
   ========================= */

.no-scroll{ overflow:hidden; }

/* Wrapper + sticky full-bleed */
.netzco-navbar{ position:relative; z-index:60; }
.netzco-navbar.is-sticky{
  position:sticky; top:0; left:0; right:0;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.netzco-navbar__inner{
  width:min(1200px, 92vw); margin-inline:auto;
  display:grid; grid-template-columns: 40px 1fr auto; align-items:center; gap:.75rem;
  min-height:72px; padding:.5rem 0;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.netzco-navbar.is-top  .netzco-navbar__inner{ background:transparent; border-bottom:1px solid transparent; }
.netzco-navbar.is-scrolled .netzco-navbar__inner{
  background:var(--bg-scrolled, rgba(0,86,121,.85));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* Branding centrado y acciones derechas */
.navbar__brand{ justify-self:center; }
.navbar__logo img{ height:36px; width:auto; display:block; }
.navbar__actions{ justify-self:end; display:flex; align-items:center; gap:.6rem; }

/* WhatsApp + CTA */
.navbar__wa{
  width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #22c55e; color:#22c55e; background:rgba(34,197,94,.06);
  box-shadow: 0 6px 16px rgba(34,197,94,.18);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.navbar__wa:hover{ transform: translateY(-1px); background:rgba(34,197,94,.12); box-shadow: 0 10px 24px rgba(34,197,94,.24); }

.navbar__cta-btn{
  border:0; color:#fff; font-weight:700; padding:.55rem .9rem; border-radius:.9rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #1cc7e7 0%, #005c7a 100%);
  box-shadow: 0 10px 22px rgba(0,86,121,.28);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.navbar__cta-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 14px 28px rgba(0,86,121,.34); }

/* Burger
   - Siempre visible en layout "minimal" (desktop incluido)
   - Oculto en desktop cuando NO es minimal (porque se muestra el menú) */
.navbar__burger{
  display:inline-flex; gap:4px; flex-direction:column; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(31,41,55,.18);
  background: rgba(255,255,255,.65); cursor:pointer; transition: background .2s ease, border-color .2s ease;
}
.navbar__burger span{ width:20px; height:2px; border-radius:2px; background:#1f2a44; }
.netzco-navbar.is-scrolled .navbar__burger{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.netzco-navbar.is-scrolled .navbar__burger span{ background:#fff; }
@media (min-width: 992px){
  .netzco-navbar:not(.is-minimal) .navbar__burger{ display:none; }
}

/* ===== Desktop menu (solo layout "menu") ===== */
.netzco-navbar.is-minimal .navbar__nav{ display:none !important; }
.navbar__nav{ display:none; }
@media (min-width: 992px){
  .netzco-navbar:not(.is-minimal) .navbar__nav{ display:block; }
}
.navbar__menu{
  width:min(1200px, 92vw); margin:.25rem auto 0; padding:0 1rem;
  display:flex; gap:1rem; align-items:center; list-style:none;
}
.navlink, .navbar__nav button.navlink{
  appearance:none; background:none; border:0; cursor:pointer;
  color:#fff; text-decoration:none; font-weight:700; padding:.35rem .6rem; border-radius:.6rem;
  transition: color .2s ease, background .2s ease, transform .15s ease;
}
.navlink:hover, .navbar__nav button.navlink:hover{
  color: var(--netzco-primary, #00B2E3); background: rgba(255,255,255,.08);
}
.netzco-navbar a.navlink.is-active{
  color: var(--netzco-primary, #00B2E3); background: rgba(255,255,255,.10);
}

/* Dropdown genérico (para cualquier ítem con submenú) */
.has-dropdown{ position:relative; }
.has-dropdown .chev{ margin-left:.35rem; opacity:.9; }
.dropdown{
  position:absolute; top: calc(100% + .35rem); left:0; min-width: 280px;
  background:#fff; color:#111827; border-radius:.9rem; box-shadow: 0 20px 60px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  padding:.35rem; z-index:70;
}
.has-dropdown.is-open .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown__list{ list-style:none; margin:0; padding:0; }
.dropdown__link{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:.6rem; color:#111827; text-decoration:none;
  transition: background .15s ease, transform .12s ease;
}
.dropdown__link:hover{ background:#f0f6f9; transform: translateX(2px); }
.drop-ic svg{ width:18px; height:18px; color:var(--netzco-primary-dk, #005679); }
.drop-txt{ font-weight:700; }

/* ===== Overlay (hamburguesa) ===== */
.navbar__overlay{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(1200px 600px at 50% -50%, rgba(255,255,255,.85), rgba(255,255,255,.72)) , rgba(255,255,255,.60);
  backdrop-filter: blur(18px);
}
.navbar__overlay[hidden]{ display:none; }

.overlay__panel{ position:absolute; inset:0; display:flex; flex-direction:column; padding: clamp(.75rem, 2vw, 1rem); }
.overlay__head{ display:flex; justify-content:flex-end; }
.overlay__close{
  appearance:none; border:0; background:transparent; width:42px; height:42px; border-radius:12px;
  font-size:28px; line-height:1; color:#1f2a44; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.overlay__close:hover{ background: rgba(0,0,0,.06); }

.overlay__body{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap: clamp(.75rem, 2.5vw, 1.25rem);
  width:min(680px, 92vw); margin: clamp(.25rem, 2vw, .75rem) auto 0;
}
.overlay__brand{ margin-bottom: clamp(.25rem, 2vw, .5rem); }
.overlay__brand img{ display:block; height: clamp(44px, 6vw, 64px); }

.overlay__menu{ list-style:none; margin:0; padding:0; width:100%; }
.overlay__link{
  display:block; text-align:center; text-decoration:none; font-weight:800; color:#1f2a44;
  font-size: clamp(1.35rem, 3.3vw, 2.25rem); padding: .35rem 0;
  transition: transform .12s ease, color .15s ease;
}
.overlay__link:hover{ transform: translateY(-1px); color:#005679; }

/* Submenú dentro del overlay (acordeón) */
.overlay__group{ width:100%; }
.overlay__group-toggle{
  width:100%; appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:900; color:#1f2a44; font-size: clamp(1.35rem, 3.3vw, 2.25rem); padding:.35rem 0;
}
.overlay__group .chev{ transition: transform .18s ease; }
.overlay__group.is-open .chev{ transform: rotate(180deg); }

.overlay__list{
  list-style:none; margin: .35rem auto 0; padding: 0 0 .25rem 0;
  width:min(520px, 90%); display:flex; flex-direction:column; gap:.35rem;
}
.overlay__slink{
  display:flex; align-items:center; gap:.6rem; color:#374151; text-decoration:none; font-weight:700;
  padding: .45rem .65rem; border-radius:.75rem; transition: background .15s ease, transform .12s ease, color .15s ease;
  place-self: center !important;
}
.overlay__slink:hover{ background:#eef6fb; color:#0b4660; transform: translateX(2px); }
.overlay__slink .drop-ic svg{ width:18px; height:18px; color:#0b4660; }

.overlay__cta{ margin-top: .5rem; }
.overlay__cta .netzco-btn{ padding:.7rem 1rem; }










/* =========================================
   NAVBAR – THEME LAYER (editable via Elementor)
   ========================================= */

/* Vars con fallback (puedes sobreescribirlas inline en el widget) */
.netzco-navbar{
  /* Colores base */
  --nb-text: #ffffff;
  --nb-hover: #00B2E3;
  --nb-primary-dk: #005679;

  /* Fondos y efectos */
  --nb-bg-top: transparent;
  --nb-bg-scrolled: rgba(0,86,121,.85);
  --nb-shadow-scrolled: 0 6px 24px rgba(0,0,0,.18);
  --nb-border-scrolled: rgba(255,255,255,.15);

  /* Dimensiones / tipografía */
  --nb-height: 72px;
  --nb-logo-h: 36px;
  --nb-font: inherit;

  /* Botón CTA */
  --nb-cta-grad-1: #1cc7e7;
  --nb-cta-grad-2: #005c7a;
  --nb-cta-shadow: 0 10px 22px rgba(0,86,121,.28);

  /* WhatsApp */
  --nb-wa: #22c55e;

  /* Overlay (menú hamburguesa) */
  --ov-blur: 18px;
  --ov-glass: rgba(255,255,255,.90);      /* velo */
  --ov-text: #1f2a44;
  --ov-accent: #005679;
  --ov-link-size: clamp(1.35rem, 3.3vw, 2.25rem);

  /* Dropdown desktop */
  --dd-bg: #ffffff;
  --dd-link: #111827;
  --dd-hover-bg: #f0f6f9;
  --dd-icon: var(--nb-primary-dk);
}

/* Alturas / tipografía global del header */
.netzco-navbar__inner{ 
  min-height: var(--nb-height);
  font-family: var(--nb-font);
}

/* Estados top vs scrolled */
.netzco-navbar.is-top .netzco-navbar__inner{
  background: var(--nb-bg-top);
  border-bottom-color: transparent;
  box-shadow: none;
}
.netzco-navbar.is-scrolled .netzco-navbar__inner{
  background: var(--nb-bg-scrolled);
  border-bottom: 1px solid var(--nb-border-scrolled);
  box-shadow: var(--nb-shadow-scrolled);
  backdrop-filter: blur(8px);
}

/* Logo */
.navbar__logo img{ height: var(--nb-logo-h); }

/* Links desktop */
.navlink,
.navbar__nav button.navlink{
  color: var(--nb-text);
}
.navlink:hover,
.navbar__nav button.navlink:hover{
  color: var(--nb-hover);
  background: rgba(255,255,255,.08);
}

/* Dropdown desktop */
.dropdown{ background: var(--dd-bg); }
.dropdown__link{ color: var(--dd-link); }
.dropdown__link:hover{ background: var(--dd-hover-bg); }
.drop-ic svg{ color: var(--dd-icon); }

/* Burger */
.navbar__burger{ background: rgba(255,255,255,.65); border-color: rgba(31,41,55,.18); }
.navbar__burger span{ background: #1f2a44; }
.netzco-navbar.is-scrolled .navbar__burger{
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25);
}
.netzco-navbar.is-scrolled .navbar__burger span{ background: var(--nb-text); }

/* WhatsApp + CTA */
.navbar__wa{
  border-color: var(--nb-wa);
  color: var(--nb-wa);
  background: color-mix(in srgb, var(--nb-wa) 12%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nb-wa) 28%, transparent);
}
.navbar__wa:hover{
  background: color-mix(in srgb, var(--nb-wa) 18%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nb-wa) 36%, transparent);
}
.navbar__cta-btn{
  background: linear-gradient(180deg, var(--nb-cta-grad-1) 0%, var(--nb-cta-grad-2) 100%);
  box-shadow: var(--nb-cta-shadow);
}

/* Overlay (menú hamburguesa) */
.navbar__overlay{
  background: radial-gradient(1200px 600px at 50% -50%, rgba(255,255,255,.85), rgba(255,255,255,.72)),
              var(--ov-glass);
  backdrop-filter: blur(var(--ov-blur));
}
.overlay__link,
.overlay__group-toggle{
  color: var(--ov-text);
  font-size: var(--ov-link-size);
}
.overlay__link:hover,
.overlay__group-toggle:hover{ color: var(--ov-accent); }
.overlay__slink{ color:#374151; }
.overlay__slink:hover{ background:#eef6fb; color:#0b4660; }
.overlay__slink .drop-ic svg{ color:#0b4660; }

/* Accesibilidad focus */
.netzco-navbar a:focus-visible,
.netzco-navbar button:focus-visible{
  outline: 2px solid var(--nb-hover);
  outline-offset: 2px;
}

/* Opcional: reduce motion */
@media (prefers-reduced-motion: reduce){
  .netzco-navbar__inner,
  .navbar__cta-btn,
  .navbar__wa{ transition: none !important; }
}








/* ============================
   SERVICIOS (GRID)
   ============================ */
.ns-grid{ background:#fff; padding: clamp(3rem,6vw,6rem) 0; }
.ns-grid__container{ width:min(1200px,92vw); margin-inline:auto; }
.ns-grid__head{ text-align:center; margin-bottom: clamp(1.5rem,3vw,2rem); }
.ns-grid__title{ font-weight:800; font-size: clamp(2rem,4vw,3rem); color:#111827; }
.ns-grid__title .accent{ color:#00B2E3; }
.ns-grid__subtitle{ color:#4b5563; max-width: 56rem; margin:.5rem auto 0; }
.ns-grid__bar{ width:96px; height:6px; margin:.9rem auto 0; border-radius:999px; background: linear-gradient(90deg, var(--bar-from,#00B2E3), var(--bar-to,#005679)); }

.ns-grid__cards{
  display:grid; gap: clamp(1rem,2.5vw,1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width:768px){ .ns-grid__cards{ grid-template-columns: 1fr 1fr; } }

.ns-card{
  background:#fff; border:1px solid #eef2f7; border-radius:1.25rem;
  padding: clamp(1rem,3vw,1.5rem); box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: box-shadow .25s ease, transform .15s ease;
}
.ns-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.10); }
.ns-card__icon{
  width:64px; height:64px; border-radius:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
  background: linear-gradient(135deg, var(--g-from,#3B82F6), var(--g-to,#22D3EE));
}
.ns-card__icon svg, .ns-card__icon i{ color:#fff; font-size: 28px; }
.ns-card__title{ font-weight:800; color:#111827; font-size:1.5rem; margin:.25rem 0 .4rem; }
.ns-card__desc{ color:#4b5563; margin-bottom:.8rem; }
.ns-card__btn{ border:1.5px solid #e5e7eb; color:#374151; border-radius:.9rem; padding:.55rem .9rem; }
.ns-card__btn:hover{ background:#f3f4f6; border-color:#00B2E3; color:#00B2E3; }
.ns-card__arrow{ margin-left:.45rem; display:inline-block; transition: transform .12s ease; }
.ns-card__btn:hover .ns-card__arrow{ transform: translateX(3px); }

.ns-grid__cta{
  margin-top: clamp(1.5rem,3vw,2rem);
  background: linear-gradient(90deg, var(--cta-from,#1f2937), var(--cta-to,#111827));
  color:#fff; border-radius:1.25rem; padding: clamp(1.25rem,3.2vw,2rem);
  text-align:center; box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.ns-grid__cta-title{ font-weight:800; font-size: clamp(1.5rem,3vw,2rem); margin-bottom:.4rem; }
.ns-grid__cta-text{ color:#d1d5db; margin-bottom: .9rem; }
.ns-grid__cta-btn{ background: var(--cta-btn-bg,#00B2E3); color:#fff; border:2px solid var(--cta-btn-bg,#00B2E3); border-radius: .9rem; padding:.7rem 1.1rem; }
.ns-grid__cta-btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ============================
   SERVICIO (DETALLE)
   ============================ */
.nsd{ background:#fff; }
.nsd-hero{ position:relative; padding: 8rem 0 4rem; color:#fff; }
@media (min-width:768px){ .nsd-hero{ padding: 10rem 0 6rem; } }
.nsd-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.nsd-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, color-mix(in srgb, var(--nsd-from,#00B2E3) 68%, transparent), color-mix(in srgb, var(--nsd-to,#005679) 60%, transparent) 50%, transparent 85%);
  mix-blend:multiply; opacity:.9;
}
.nsd-hero__inner{ position:relative; z-index:1; text-align:center; width:min(1200px,92vw); margin-inline:auto; }
.nsd-hero__icon{
  display:inline-flex; width:64px; height:64px; border-radius:1rem; align-items:center; justify-content:center;
  background: rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3); margin-bottom:.6rem; backdrop-filter: blur(2px);
}
.nsd-hero__icon svg, .nsd-hero__icon i{ color:#fff; font-size:28px; }
.nsd-hero__title{ font-weight:800; font-size: clamp(2.25rem,5vw,3.5rem); text-shadow:0 2px 10px rgba(0,0,0,.45); }
.nsd-hero__subtitle{ margin-top:.6rem; max-width:56rem; color:#e5e7eb; margin-inline:auto; }

.nsd-container{ width:min(1200px,92vw); margin-inline:auto; padding: clamp(2rem,4vw,3rem) 0; }
.nsd-h2{ font-weight:800; font-size: clamp(1.5rem,3vw,2rem); color:#111827; }
.nsd-body{ color:#374151; line-height:1.7; }
.nsd-muted{ color:#6b7280; margin-top:.25rem; }

.nsd-bar{ width:80px; height:6px; border-radius:999px; margin:.5rem 0 1rem; }

.nsd-intro{ display:grid; gap: clamp(1rem,3vw,2rem); grid-template-columns: 1fr; align-items:start; }
@media (min-width:992px){ .nsd-intro{ grid-template-columns: 1.25fr .75fr; } }
.nsd-intro__box{
  background: var(--box-bg, #f1f5f9); border-radius:1rem; padding: clamp(1rem,2.5vw,1.25rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.nsd-intro__box-title{ font-weight:700; font-size:1.125rem; margin-bottom:.4rem; }

.nsd-center{ text-align:center; margin: clamp(1.5rem,3vw,2rem) 0 1rem; }
.nsd-feats__grid{
  display:grid; gap: .75rem; grid-template-columns: 1fr;
}
@media (min-width:576px){ .nsd-feats__grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width:992px){ .nsd-feats__grid{ grid-template-columns: 1fr 1fr 1fr; } }
.nsd-feat{ display:flex; gap:.6rem; align-items:flex-start; padding:.5rem; border-radius:.6rem; }
.nsd-feat__icon{ color:#16a34a; font-weight:900; margin-top:.15rem; }

.nsd-gallery__grid{
  display:grid; gap:.6rem; grid-template-columns: 1fr 1fr;
}
@media (min-width:768px){ .nsd-gallery__grid{ grid-template-columns: repeat(3,1fr); } }
.nsd-gitem{ position:relative; border-radius:1rem; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.nsd-gitem img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 1/1; }
.nsd-gitem__veil{
  position:absolute; inset:0; background: rgba(0,0,0,.4); opacity:0;
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
  transition: opacity .2s ease;
}
.nsd-gitem:hover .nsd-gitem__veil{ opacity:1; }

/* Lightbox mínimo */
.nsd-lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.7); }
.nsd-lightbox.is-open{ display:flex; }
.nsd-lightbox img{ max-width:92vw; max-height:92vh; border-radius:.75rem; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.nsd-lightbox__close{
  position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:12px; border:0; background:#fff; color:#111827;
  font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.nsd-lightbox__veil{ position:absolute; inset:0; }

.nsd-apps{ display:grid; gap: clamp(1rem,3vw,2rem); grid-template-columns: 1fr; align-items:start; }
@media (min-width:992px){ .nsd-apps{ grid-template-columns: 3fr 2fr; } }
.nsd-apps__list{ display:flex; flex-direction:column; gap:.5rem; margin-top:.65rem; }
.nsd-app{ display:flex; align-items:center; }
.nsd-app__arrow{ margin-right:.5rem; font-weight:900; }

.nsd-standards{
  background:#fff0f0; border:1px solid #ffe1e1; border-radius:1rem; padding:1.25rem;
}
.nsd-standards__title{ color:#991b1b; font-weight:800; font-size:1.25rem; margin-bottom:.4rem; }
.nsd-standards__intro{ color:#b91c1c; margin-bottom:.5rem; }
.nsd-standards__chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.nsd-chip{ background:#ffe4e6; color:#9f1239; border-radius:999px; padding:.3rem .6rem; font-weight:700; font-size:.9rem; }

.nsd-cta{
  margin-top: clamp(1.5rem,3vw,2rem);
  background: linear-gradient(90deg, var(--cta-from,#1f2937), var(--cta-to,#111827));
  color:#fff; border-radius:1.25rem; padding: clamp(1.25rem,3.2vw,2rem);
  text-align:center; box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.nsd-cta__title{ font-weight:800; font-size: clamp(1.5rem,3vw,2rem); margin-bottom:.4rem; }
.nsd-cta__text{ color:#d1d5db; margin-bottom:.9rem; }
.nsd-cta__btn{ border-radius:.9rem; padding:.7rem 1.1rem; }


/* ===== CTA Servicios ===== */
.netzco-cta { padding: clamp(2rem, 5vw, 3rem) 0; background: #F1F5F9; }
.netzco-cta__container { width: min(1200px, 92vw); margin-inline: auto; }

.netzco-cta__card{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1rem;
  padding: var(--cta-pad-y, 48px) var(--cta-pad-x, 24px);
  border-radius: var(--cta-radius, 32px);
  background: linear-gradient(90deg, var(--cta-grad-start, #08B6DF), var(--cta-grad-end, #065E7C));
  color: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

.netzco-cta__title{
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.2;
  margin: 0;
}

.netzco-cta__subtitle{
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  opacity: .95;
  margin: 0;
  max-width: 60ch;
}

.netzco-cta__btn{
  display: inline-block;
  margin-top: .5rem;
  padding: .9rem 1.6rem;
  border-radius: 12px;
  background: var(--btn-bg, #fff);
  color: var(--btn-color, #0B3A53);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.netzco-cta__btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.netzco-cta__btn:active{ transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.netzco-cta__btn:focus{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; border-radius: 14px; }

/* bordes muy redondeados (como la captura) en desktop */
@media (min-width: 992px){
  .netzco-cta__card{ border-radius: 36px; }
}








/* ====== Plantilla de Servicio (NETZCO) ====== */
.netzco-svc { --primary:#08B6DF; --primary-dk:#065E7C; --ink:#0B3A53; --muted:#5B7C8F; }
.netzco-svc__container { width:min(1200px,92vw); margin-inline:auto; }

/* HERO */
.netzco-svc__hero{
  position:relative; color:#fff;
  min-height: var(--hero-h,420px);
  background-size:cover; background-position:center;
}
.netzco-svc__hero::before{
  content:""; position:absolute; inset:0;
  background: var(--hero-overlay, rgba(6,94,124,.55));
}
.netzco-svc__hero-inner{
  position:relative; z-index:1;
  width:min(1200px,92vw); margin-inline:auto;
  padding: clamp(2rem,6vw,4rem) 0;
  display:grid; place-items:center; text-align:center; gap:.75rem;
}
.netzco-svc__hero-icon i, .netzco-svc__hero-icon svg{ font-size:1.6rem; opacity:.95; }
.netzco-svc__hero-title{ font-weight:800; font-size: clamp(1.8rem, 4vw, 3rem); line-height:1.1; margin:0; }
.netzco-svc__hero-sub{ font-size: clamp(1rem, 1.6vw, 1.125rem); opacity:.95; margin:0; }

/* Intro + Compromiso */
.netzco-svc__intro{ padding: clamp(2rem,5vw,3rem) 0; background:#fff; }
.netzco-svc__intro-grid{ display:grid; gap: clamp(1rem,2vw,1.5rem); grid-template-columns:1fr; }
@media (min-width: 992px){ .netzco-svc__intro-grid{ grid-template-columns: 2fr 1fr; align-items:start; } }
.title-accent{ color:var(--primary-dk); font-weight:800; margin:0 0 .5rem; }
.title-accent.center{ text-align:center; }
.sub.center{ text-align:center; color:#6b7f90; margin:.25rem 0 1.2rem; }
.rte{ color:#334155; line-height:1.7; }
.rte.small{ font-size:.98rem; }
.intro-box{
  background: #E8F6FB; border:1px solid rgba(8,182,223,.15);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.intro-box .box-title{ font-weight:700; color:var(--primary-dk); margin:.25rem 0 .5rem; }

/* Features */
.netzco-svc__features{ padding: clamp(1.5rem,5vw,2.5rem) 0; }
.features-grid{
  display:grid; gap:.85rem; margin-top:.75rem;
  grid-template-columns:1fr; 
}
@media (min-width:768px){ .features-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ .features-grid{ grid-template-columns:1fr 1fr 1fr; } }

.feature-item{ display:flex; gap:.6rem; align-items:flex-start; background:#fff;
  padding:.75rem .9rem; border-radius:.75rem; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.feature-icon i, .feature-icon svg{ color:#20C997; width:1.1rem; height:1.1rem; margin-top:.15rem; }
.feature-text{ color:#334155; }

/* Gallery */
.netzco-svc__gallery{ padding: clamp(1.5rem,5vw,2.5rem) 0; }
.gallery-grid{
  display:grid; gap:.9rem; margin-top:.75rem; grid-template-columns:1fr 1fr;
}
@media (min-width:992px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
.gallery-card{ border-radius:14px; overflow:hidden; background:#f1f5f9; box-shadow:0 8px 26px rgba(0,0,0,.08); }
.gallery-card img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Apps */
.netzco-svc__apps{ padding: clamp(1.5rem,5vw,2.5rem) 0; }
.apps-list{ list-style:none; padding:0; margin:.5rem 0 0; columns:1; column-gap:2rem; }
@media (min-width:768px){ .apps-list{ columns:2; } }
.apps-list li{ break-inside:avoid; display:flex; align-items:flex-start; gap:.5rem; padding:.35rem 0; }
.apps-list .bullet{ color:var(--primary); margin-top:.1rem; }

/* CTA final */
.netzco-svc__cta{ padding: clamp(2rem,6vw,3rem) 0; background:#fff; }
.netzco-svc__cta .cta-card{
  width:min(1200px,92vw); margin:0 auto;
  display:grid; justify-items:center; text-align:center; gap:.65rem;
  padding: clamp(1.25rem,3vw,1.75rem) clamp(1rem,3vw,1.5rem);
  background: linear-gradient(90deg, #0B2533, #0A3B57);
  color:#fff; border-radius:24px; box-shadow:0 14px 40px rgba(0,0,0,.14);
}
.cta-title{ font-weight:800; font-size: clamp(1.2rem,2.2vw,1.6rem); margin:0; }
.cta-sub{ opacity:.9; margin:0; font-size: clamp(.95rem,1.4vw,1.1rem); }
.cta-btn{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.4rem;
  padding:.8rem 1.2rem; border-radius:12px; background:#0FD0FF; color:#093145;
  font-weight:700; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-btn .i i, .cta-btn .i svg{ width:1rem; height:1rem; }
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.2); }



/* --- HERO: asegurar visibilidad del ícono --- */
.netzco-svc__hero-icon{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom: .35rem;
  /* opcional: pequeño resplandor para contraste sobre fondos oscuros */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.netzco-svc__hero-icon i,
.netzco-svc__hero-icon svg{
  /* tamaño responsive del icono */
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(28px, 3.2vw, 40px);
  font-size: clamp(28px, 3.2vw, 40px);
  color: #fff;           /* fuerza el color blanco */
  opacity: 1;            /* evita que herede una opacidad baja */
}
.netzco-svc__hero-icon svg{ stroke: currentColor; }
.netzco-svc__hero-icon svg *{ fill: currentColor; }

/* --- INTRO + COMPROMISO: 50/50 en desktop --- */
.netzco-svc__intro-grid{ display:grid; gap: clamp(1rem,2vw,1.5rem); grid-template-columns:1fr; }
@media (min-width: 992px){
  .netzco-svc__intro-grid{ grid-template-columns: 1fr 1fr; } /* antes: 2fr 1fr */
}





/* --- GALERÍA: 3 columnas + cuadrados 1:1 --- */
.netzco-svc__gallery{ padding: clamp(1.5rem,5vw,2.5rem) 0; }

/* Grid: 1 col en móvil, 3 cols desde 992px */
.gallery-grid{
  display:grid;
  gap:.9rem;
  margin-top:.75rem;
  grid-template-columns: 1fr;               /* móvil */
}
@media (min-width: 992px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); } /* solo 3 columnas en desktop */
}

/* Tarjeta cuadrada */
.gallery-card{
  position: relative;
  border-radius:14px;
  overflow:hidden;
  background:#f1f5f9;
  box-shadow:0 8px 26px rgba(0,0,0,.08);

  /* proporción nativa */
  aspect-ratio: 1 / 1;
}

/* Imagen llena y recortada */
.gallery-card img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .gallery-card::before{
    content:"";
    display:block;
    padding-bottom:100%;  /* mantiene 1:1 */
  }
  .gallery-card img{
    position:absolute;
    inset:0;
  }
}










/* Barra fija arriba */
.netzco-navbar.is-sticky{
  position: fixed;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  z-index: 9999;
  transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

/* Transparente al inicio si corresponde */
.netzco-navbar.is-sticky.is-top[data-transparent="1"]{
  background: transparent;
  box-shadow: none;
}

/* Fondo al hacer scroll (usa --bg-scrolled del control) */
.netzco-navbar.is-sticky.is-scrolled{
  background: var(--bg-scrolled, rgba(0,86,121,.85));
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Compensar altura del header fijo */
body.has-nb-sticky{
  padding-top: var(--nb-sticky-h, 72px);
}

/* Overlay a pantalla completa (por si no lo tenías) */
.netzco-navbar .navbar__overlay{
  position: fixed; inset: 0; z-index: 10000;
}

/* WordPress admin bar (cuando estás logueado) */
html.admin-bar .netzco-navbar.is-sticky{ top: 32px; }
@media (max-width: 782px){
  html.admin-bar .netzco-navbar.is-sticky{ top: 46px; }
  body.has-nb-sticky{ padding-top: calc(var(--nb-sticky-h,72px) + 0px); }
}





/* === Fondo blanco siempre y a todo el ancho === */
.netzco-navbar{
  background: #fff !important;         /* fondo blanco permanente */
  backdrop-filter: none !important;     /* sin blur/transparencias */
  width: 100%;
  left: 0; right: 0;
}

/* Forzar blanco incluso con estados/top/scrolled y opción “transparente al inicio” */
.netzco-navbar.is-top,
.netzco-navbar.is-scrolled,
.netzco-navbar.is-sticky.is-top[data-transparent="1"],
.netzco-navbar.is-sticky.is-scrolled{
  background: #fff !important;
}

/* El wrapper interno sólo centra el contenido, no pinta fondo */
.netzco-navbar .netzco-navbar__inner{
  max-width: var(--nb-maxw, 1200px);
  margin: 0 auto;
  background: transparent !important;
}

/* === Logo un poco más grande === */
.netzco-navbar .navbar__logo img{
  height: 48px;           /* antes ~36px por defecto */
}
@media (min-width: 1024px){
  .netzco-navbar .navbar__logo img{
    height: 56px;         /* un poquito más grande en desktop */
  }
}

/* Ajuste equivalente en el overlay para mantener proporción del logo */
.netzco-navbar .overlay__brand img{
  height: clamp(56px, 8vw, 64px);
}