:root{
  --brand:#53c3d6;         /* Color principal */
  --accent-1:#fac658;      /* Secundarios del manual */
  --accent-2:#fc5e95;
  --accent-3:#3f1a86;
  --dark:#111;
}

html, body {scroll-behavior:smooth;}

body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color:#222;
}

h1,h2,h3,.brand-text{
  font-family: 'Montserrat', 'Poppins', sans-serif; /* Sustituto visual de Nohemi Bold */
  letter-spacing: .5px;
}

.navbar-brand img {
  height: 40px;  /* ajusta aquí */
  max-height: 8vh; /* nunca más alto que el 8% de la altura de pantalla */
}



.nav-link.active{ color: var(--brand) !important; font-weight:600; }

.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #3fb6cb;
  --bs-btn-hover-border-color: #3fb6cb;
  --bs-btn-focus-shadow-rgb: 83,195,214;
}

.text-gradient{
  background: linear-gradient(90deg, var(--brand), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero{
  min-height: 70vh;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(83,195,214,.15), transparent);
}

.hero .hero-media img{ object-fit: cover; }

.bg-gradient{
  background: linear-gradient(135deg, var(--brand), var(--accent-3));
  color: #fff;
}

.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background: rgba(83,195,214,.15);
  font-size:1.25rem;
}

.hover-lift{ transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover{ transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12); }

footer a{ color: inherit; }

/* ===== NAV formal: oscuro + cápsula + distribución L/C/R ===== */
:root{
  --brand:#53c3d6;                 /* color de marca */
  --ink:#e9eef3;                   /* texto claro */
  --nav-bg: rgba(18,20,22,.94);    /* más sobrio que antes */
  --nav-border: rgba(255,255,255,.06);
  --nav-shadow: 0 10px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.16);
}

.header-wrap{ position: relative; z-index: 1030; }

/* Cápsula */
.sky-nav{ padding: .65rem 0; backdrop-filter: blur(10px); }
.sky-nav .nav-shell{
  display: grid;
  grid-template-columns: auto 1fr auto;  /* IZQ | CENTRO | DER */
  align-items: center;
  gap: .5rem 1rem;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 16px;
  box-shadow: var(--nav-shadow);
  padding: .35rem .75rem;
  margin-top: 14px;                 /* flota debajo del borde superior */
}

/* Logo y marca más grandes (responsivo) */
.sky-nav .logo{ height: clamp(48px, 5.4vw, 64px); transition: .2s ease; }
.sky-nav.is-scrolled .logo{ height: clamp(40px, 4.6vw, 56px); }
.sky-nav .brand-text{
  color: var(--ink);
  font-weight: 700;
  letter-spacing:.2px;
  font-size: clamp(1.05rem, .9rem + .4vw, 1.25rem);
}

/* Menú centrado, tipografía más formal */
.sky-nav .navbar-collapse{ justify-self: center; }
.sky-nav .nav-link{
  color: var(--ink);
  opacity: .85;
  padding: .9rem 1rem;
  font-weight: 500;
  letter-spacing:.2px;
  text-transform:none;              /* se ve más premium que all-caps */
  position: relative;
  transition: opacity .2s ease, color .2s ease;
}
.sky-nav .nav-link:hover{ opacity: 1; color: #fff; }

/* Indicador activo sutil y elegante */
.sky-nav .nav-link.active::after,
.sky-nav .nav-link[aria-current="page"]::after{
  content:"";
  position:absolute; left:1rem; right:1rem; bottom:.45rem;
  height:3px; background: var(--brand); border-radius:2px;
}

/* Acciones derechas: íconos + CTA */
.icon-btn{
  width: 38px; height: 38px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--nav-border);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }

.btn-call{
  background: var(--brand);
  border: 0;
  color: #0b1c22;
  font-weight: 700;
  border-radius: 12px;
  padding: .6rem 1rem;
  box-shadow: 0 10px 20px rgba(83,195,214,.28);
}
.btn-call:hover{ filter: brightness(.96); color:#061317; }

/* Efecto shrink al hacer scroll */
.sky-nav.is-scrolled .nav-shell{ border-radius: 14px; }

/* Responsive */
@media (max-width:991.98px){
  .sky-nav .nav-shell{
    grid-template-columns: auto auto;    /* IZQ | DER (toggler) */
    border-radius: 0; border-left:0; border-right:0; box-shadow:none; margin-top:0;
  }
  .navbar-toggler{ justify-self: end; }
  .sky-nav .navbar-collapse{ grid-column: 1 / -1; padding-top:.25rem; }
  .brand-text{ display:none !important; }  /* mantiene limpieza en móvil */
  .btn-call{ width: 100%; margin-top:.5rem; }
}


/* ====== HEADER FIJO (cápsula flotante) ====== */
:root{
  --brand:#53c3d6;
  --ink:#e9eef3;
  --nav-bg: rgba(18,20,22,.94);
  --nav-border: rgba(255,255,255,.06);
  --nav-shadow: 0 12px 36px rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.18);
  --header-h: 112px; /* será ajustado por JS */
}

/* Fija todo el header al tope de la pantalla */
.header-wrap{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  pointer-events: none;        /* evita bloquear clics debajo */
}

/* La cápsula SÍ recibe interacciones */
.sky-nav{ pointer-events: auto; padding:.65rem 0; backdrop-filter: blur(10px); }
.sky-nav .nav-shell{
  background: var(--nav-bg);
  border:1px solid var(--nav-border);
  border-radius:16px;
  box-shadow: var(--nav-shadow);
  padding:.35rem .75rem;
  margin-top:12px;
  position: relative;
}

/* Glow sutil a la derecha (como en tu captura) */
.sky-nav .nav-shell::after{
  content:""; position:absolute; right:10px; top:10px;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(83,195,214,.35), rgba(83,195,214,0));
  filter: blur(10px); pointer-events:none;
}

/* Logo más presente y shrink suave */
.sky-nav .logo{ height: clamp(56px, 5.2vw, 68px); transition:.2s ease; }
.sky-nav.is-scrolled .logo{ height: clamp(44px, 4.4vw, 58px); }

/* Menú centrado con indicador activo */
.sky-nav .navbar-collapse{ justify-content: center !important; }
.sky-nav .nav-link{
  color: var(--ink); opacity:.9; padding:.9rem 1rem; font-weight:600; position:relative;
}
.sky-nav .nav-link:hover{ opacity:1; color:#fff; }
.sky-nav .nav-link.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.45rem;
  height:3px; background: var(--brand); border-radius:2px;
}

/* Botón CTA e iconitos (igual que antes) */
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink);
  background: rgba(255,255,255,.06);
  border:1px solid var(--nav-border);
  transition: background .2s ease, transform .2s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }

.btn-call{
  background: var(--brand); border:0; color:#0b1c22; font-weight:700;
  border-radius:12px; padding:.6rem 1rem; box-shadow:0 10px 20px rgba(83,195,214,.28);
}
.btn-call:hover{ filter:brightness(.96); color:#061317; }

/* Empuje al contenido para que no quede tapado por el header fijo */
body{ padding-top: calc(var(--header-h) + 8px); }

/* Mobile: sin bordes laterales ni sombra fuerte */
@media (max-width: 991.98px){
  .sky-nav .nav-shell{ border-radius:0; border-left:0; border-right:0; box-shadow:none; margin-top:0; }
}


/* ===== Servicios (cards premium en index) ===== */
.service-card{
  position: relative;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow: hidden;
  background:#fff;
}
.service-card::before{ /* acento superior */
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--brand, #53c3d6), var(--accent-2, #fc5e95));
  opacity:.85;
}
.service-card .card-body{ padding-top: 1.25rem; }

.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background: rgba(83,195,214,.12);
  font-size:1.1rem;
}
.icon-badge.lg{ width:56px; height:56px; border-radius:16px; font-size:1.35rem; }

.check-list{ list-style:none; padding-left:0; }
.check-list li{ position:relative; padding-left:1.6rem; margin-bottom:.35rem; }
.check-list li::before{
  content:""; position:absolute; left:0; top:.25rem; width:1rem; height:1rem; border-radius:50%;
  background: radial-gradient(circle at 60% 40%, #fff 0 35%, var(--brand, #53c3d6) 36% 100%);
  box-shadow: 0 0 0 2px rgba(83,195,214,.22);
}

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font-size:.8rem; padding:.25rem .55rem; border-radius:999px;
  background: rgba(83,195,214,.12); color:#0b1c22; border:1px solid rgba(83,195,214,.28);
}

/* Reutiliza tu hover */
.hover-lift{ transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover{ transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12); }


/* Saber más — ghost-pill con acento de marca */
.link-more{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; line-height:1;
  font-weight:600; font-size:.95rem;
  color:#0b1c22; text-decoration:none;
  background: rgba(83,195,214,.08);
  border:1px solid rgba(83,195,214,.32);
  border-radius:12px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.link-more:hover{
  background: rgba(83,195,214,.16);
  border-color: rgba(83,195,214,.55);
  box-shadow: 0 6px 16px rgba(83,195,214,.15);
  transform: translateY(-1px);
}
.link-more .arrow{
  font-size:1.05em; transform: translateX(0);
  transition: transform .18s ease;
}
.link-more:hover .arrow{ transform: translateX(3px); }

/* ===== Botones de Servicios: vecinos si hay espacio, apilados si no ===== */
.service-card .card-footer{
  display: grid;
  /* 2 columnas si caben 170px + 170px + gap; si no, se apilan solos */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px 16px;
  padding: 1rem 1rem 1.25rem 1rem;
}

.service-card .card-footer .quote-btn,
.service-card .card-footer .link-more{
  display: inline-flex;                 /* asegura centrado en ghost-pill */
  align-items: center;
  justify-content: center;
  text-align: center !important;         /* texto centrado siempre */
}

/* Un pelín más compactos para que quepan como vecinos sin colisionar */
.service-card .card-footer .quote-btn{
  min-width: 0 !important;
  padding: .55rem .75rem;
  font-size: .95rem;
}
.service-card .card-footer .link-more{
  padding: .6rem .9rem;
  white-space: normal;               /* permite envolver si lo necesita */
}

/* ===== CTA oscuro de marca ===== */
.cta-section{
  position: relative;
  overflow: hidden;
  /* fondo oscuro con acento púrpura + brillo brand */
  background:
    radial-gradient(900px 300px at 85% 20%, rgba(83,195,214,.25), rgba(83,195,214,0)),
    linear-gradient(135deg, #0f1216 0%, #182127 55%, var(--accent-3, #3f1a86) 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* alineación de acciones */
.cta-actions .btn{ border-radius: 14px; font-weight: 700; }

/* botón email (sólido claro sobre fondo oscuro) */
.btn-cta-email{
  background: #ffffff;
  color: #0b1c22;
  border: 0;
  box-shadow: 0 8px 22px rgba(255,255,255,.12);
}
.btn-cta-email:hover{ filter: brightness(.96); color: #051418; }

/* botón teléfono (ghost claro) */
.btn-cta-phone{
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
}
.btn-cta-phone:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.75);
  color: #ffffff;
}

/* responsive: apilar en móvil con buen espacio */
@media (max-width: 575.98px){
  .cta-actions{ gap: 12px !important; }
}

/* Iconos de servicios (SVG) */
.svc-icon{ width:28px; height:28px; color: var(--brand-dark, #2aa8bd); }
.icon-badge.lg{ background: rgba(83,195,214,.12); }


/* === Servicios: centrar icono y título + icono más grande === */

/* el badge se centra (de inline-flex -> flex para que margin auto funcione) */
.service-card .icon-badge{
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* tamaño responsivo del badge e ícono */
.service-card .icon-badge.lg{
  width: clamp(56px, 6.0vw, 72px);
  height: clamp(56px, 6.0vw, 72px);
  border-radius: 18px;
}

/* SVG del ícono (color ya toma var(--brand-...)) */
.service-card .svc-icon{
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(28px, 3.2vw, 40px);
}

/* título centrado */
.service-card .card-body > h3{
  text-align: center;
  margin-top: .25rem;
}

/* (Opcional) centra solo la primera línea descriptiva si te gusta más equilibrado 
.service-card .card-body > p.text-muted:first-of-type{
  text-align: center;
  margin-left: auto; margin-right: auto;
  max-width: 42ch;
}
*/
/* ===== Preview con reveal al hover ===== */
.svc-preview{
  position: relative;
  width: 100%;
  max-height: 0;                 /* colapsado por defecto */
  opacity: 0;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0f12;
  transform: translateY(-6px);
  transition:
    max-height .45s ease,
    opacity .35s ease,
    margin .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  will-change: max-height, transform, opacity;
}

/* Imagen */
.svc-preview img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Glow/acento de marca sutil al revelarse */
.service-card:hover .svc-preview{
  max-height: clamp(140px, 16vw, 200px); /* alto visible */
  opacity: 1;
  margin: 10px auto 14px;
  transform: translateY(0);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

/* Opcional: degrade superior para integrar con la card */
.svc-preview::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:8px;
  background: linear-gradient(90deg, var(--brand,#53c3d6), var(--accent-2,#fc5e95));
  opacity:.85;
}

/* Cards: un leve “stretch” adicional al hover */
.service-card.hover-lift{ transition: transform .25s ease, box-shadow .25s ease; }
.service-card.hover-lift:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
}

/* Touch: muestra la imagen siempre (no hay hover) */
@media (hover: none){
  .svc-preview{
    max-height: clamp(140px, 38vw, 220px);
    opacity: 1;
    margin: 10px auto 14px;
    transform: none;
  }
}

/* quitar bandeja blanca detrás de las cards */
.services-featured .container::after{ content:none !important; }


/* ===== Fondo de sección en el fondo-fondo (detrás de todo) ===== */
.services-featured{
  position: relative;
  isolation: isolate;            /* crea contexto para poder usar z-index:-1 seguro */
}

/* Capa decorativa detrás del contenido, a todo lo ancho */
.services-featured::before{
  content:"";
  position: absolute;
  z-index: -1;                   /* fondo-fondo */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                  /* full-bleed (más allá del container) */
  top: -80px;                    /* sube un poco para que abrace el título */
  bottom: -80px;                 /* baja un poco para desvanecer */
  pointer-events: none;

  /* Glows suaves de marca en los bordes superiores */
  background:
    radial-gradient(1100px 280px at 18% 0%, rgba(83,195,214,.18), rgba(83,195,214,0) 65%),
    radial-gradient(1100px 280px at 82% 0%, rgba(252,94,149,.16), rgba(252,94,149,0) 65%);
}

/* Mantén el anclaje correcto con el header fijo */
#servicios{ scroll-margin-top: 120px; }



/* ===== Servicios: texto con mayor jerarquía y presencia ===== */

/* Encabezado principal de la sección */
.services-featured .text-center h2{
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.1;
  font-size: clamp(2.2rem, 1.2rem + 3.2vw, 3.2rem); /* más grande y responsivo */
  color: #0b1c22;
  text-shadow: 0 8px 24px rgba(83,195,214,.16), 0 2px 8px rgba(252,94,149,.14);
  margin-bottom: .35rem;
}
/* subrayado más ancho y marcado (ya existía pero lo reforzamos) */
.services-featured .text-center h2::after{
  content:"";
  display:block;
  height: 8px;
  margin: .6rem auto 0;
  width: min(200px, 48%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand,#53c3d6), var(--accent-2,#fc5e95));
  opacity: .95;
}

/* Subtítulo/descriptor bajo el h2: un poco más grande y contrastado */
.services-featured .text-center p{
  font-size: clamp(1rem, .85rem + .45vw, 1.125rem);
  color: #43565d;          /* más contraste que el gris actual */
  opacity: .95;
}

/* Títulos dentro de cada card (h3) más visibles y consistentes */
.service-card .card-body > h3{
  font-weight: 800;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  letter-spacing: .2px;
  color: #0b1c22;
  text-align: center;      /* mantenemos centrado */
  margin-top: .35rem;
}
/* una barrita de acento bajo cada h3 para reforzar jerarquía */
.service-card .card-body > h3::after{
  content:"";
  display:block;
  height: 4px;
  width: 64px;
  margin: .45rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand,#53c3d6), var(--accent-2,#fc5e95));
  opacity: .9;
}

/* Párrafos intro de cada card: un poco más grandes y legibles */
.service-card .card-body > p.text-muted{
  font-size: 1.02rem;
  color: #516267;
  line-height: 1.55;
  max-width: 46ch;         /* ancho de lectura cómodo */
  margin-left: auto; margin-right: auto;
}

/* Lista de beneficios: ligeramente más fuerte para que “salte” más*



/* ===== Footer ===== */
.site-footer{
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(900px 300px at 85% 0%, rgba(83,195,214,.25), rgba(83,195,214,0)),
    linear-gradient(135deg, #0f1216 0%, #182127 55%, #2d1a4f 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-logo{ height: 36px; }
.footer-brand .brand-text{ color:#fff; font-weight:800; letter-spacing:.2px; }
.ft-title{
  color:#fff; font-weight:800; letter-spacing:.2px; margin-bottom:.5rem;
}
.ft-list a, .ft-mini{
  color: rgba(255,255,255,.85); text-decoration: none;
}
.ft-list a:hover, .ft-mini:hover{ color:#fff; text-decoration: underline; }
.ft-list li{ margin:.25rem 0; }

/* Contacto en el footer */
.ft-contact li{
  display:flex; align-items:center; gap:.5rem;
  color: rgba(255,255,255,.85);
  margin:.35rem 0;
}
.ft-contact a{ color: rgba(255,255,255,.9); }
.ft-contact a:hover{ color:#fff; }

/* Botón de cotización en el footer */
.site-footer .btn-quote{
  background: var(--brand); color:#0b1c22; font-weight:700; border:0; border-radius:12px;
  box-shadow: 0 10px 20px rgba(83,195,214,.28);
}
.site-footer .btn-quote:hover{ filter:brightness(.96); color:#061317; }

/* Redes */
.sbtn{
  width: 38px; height: 38px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  transition: transform .2s ease, background .2s ease;
}
.sbtn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.16); }

/* Franja inferior */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .9rem 0;
  background: rgba(0,0,0,.12);
}

/* Back to top */
.to-top{
  position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2);
  display: none; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.to-top:hover{ background: rgba(255,255,255,.18); }

/* Responsive */
@media (max-width: 575.98px){
  .footer-logo{ height: 32px; }
  .footer-bottom{ text-align:center; }
}


/* 1) Mata el scroll horizontal en todos los navegadores */
html, body{
  max-width: 100%;
  overflow-x: clip;         /* mejor que hidden; en Safari usa hidden si lo prefieres */
}
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

/* 2) Corrige las capas full-bleed que usen 100vw (evita desbordes por scrollbar) */
:root{
  --vw-safe: calc(100vw - (100vw - 100%)); /* = ancho de viewport sin barra */
}

/* Fondo de la sección Servicios que pusimos antes */
.services-featured{ position: relative; isolation: isolate; }
.services-featured::before{
  width: var(--vw-safe);    /* en lugar de 100vw */
  left: 50%;
  transform: translateX(-50%);
}

/* Si tienes otras pseudo-capas a pantalla completa, puedes reutilizar: */
/* .cta-section::before, .cta-section::after, .site-footer::before, .site-footer::after { */
/*   width: var(--vw-safe); left:50%; transform:translateX(-50%); } */