/* ===========================================================
   SECSA — Design tokens
   Paleta: Navy profundo #0B2140, azul de marca #0E6BA8,
   cian de acento #21C7D9, gris cálido #F4F6F9, texto #1B2733
   Tipografía: Space Grotesk (display) + Inter (body)
   =========================================================== */

:root {
  --navy: #0B2140;
  --navy-deep: #071527;
  --blue: #0E6BA8;
  --blue-light: #1587D1;
  --cyan: #21C7D9;
  --bg-soft: #F4F6F9;
  --text-main: #1B2733;
  --text-muted: #5A6B7A;
  --white: #FFFFFF;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

/* El encabezado es "sticky" (fijo arriba al hacer scroll) y mide ~141px
   de alto (barra superior + menú). Sin esto, al hacer clic en un link
   del menú que salta a un ancla (#servicios, #sistemas, etc.), el
   navegador coloca esa sección justo en el borde superior de la
   pantalla — pero el encabezado fijo la tapa por encima, cortando el
   título. Este margen le dice al navegador que deje ese espacio libre
   para cualquier salto a ancla en todo el sitio (un poco más de 141px,
   con margen de sobra). */
html { scroll-padding-top: 160px; }

/* Segunda capa del mismo arreglo, puesta directo en cada sección que es
   destino de un link del menú — por si el navegador del visitante no
   respeta bien scroll-padding-top combinado con un encabezado sticky
   (hay variación real entre navegadores en este caso puntual). Con las
   dos reglas puestas, alcanza con que UNA de las dos funcione. */
#inicio, #nosotros, #sistemas, #servicios, #contacto, #escribanos {
  scroll-margin-top: 160px;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .navbar-brand, .brand-word {
  font-family: var(--font-display);
}

a { text-decoration: none; }

.text-accent { color: var(--cyan); }
.text-accent-on-light { color: var(--blue); font-weight: 600; }

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: .5rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
.section-title-sm {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
}
.text-white.section-title { color: var(--white); }

.lead-line {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.body-copy {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.benefits-list {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.benefits-list li { margin-bottom: .5rem; }
.benefits-list li::marker { color: var(--blue); font-weight: 700; }

.small-note { color: var(--text-muted); font-size: .9rem; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===================== HEADER ===================== */
.site-header { position: sticky; top: 0; z-index: 1000; }

.topbar {
  background: var(--navy-deep);
  color: #C9D6E3;
  font-size: .85rem;
  padding: .4rem 0;
}
.topbar-link { color: #C9D6E3; }
.topbar-link i { color: var(--cyan); margin-right: .35rem; }
.topbar-link:hover { color: var(--white); }

.navbar {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(11,33,64,.08);
  padding: .85rem 0;
}

.navbar-brand { display: flex; align-items: center; gap: .5rem; }
.brand-logo { height: 70px; width: auto; display: block; }
@media (max-width: 575px) { .brand-logo { height: 36px; } }

.nav-link { color: var(--text-main) !important; font-weight: 600; padding: .5rem 1rem !important; }
.nav-link:hover, .nav-link.active { color: var(--blue) !important; }
.btn-contact {
  background: var(--blue) !important;
  color: var(--white) !important;
  border-radius: 8px;
  padding: .55rem 1.3rem !important;
}
.btn-contact:hover { background: var(--blue-light) !important; }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 80vh;
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue) 130%);
  overflow: hidden;
}
.hero-grid-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    linear-gradient(rgba(33,199,217,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,199,217,.10) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 70% 40%, black 10%, transparent 70%);
}
.hero-content { position: relative; z-index: 2; padding: 5rem 0; width: 100%; }

/* ---- Slideshow: varios .hero-slide superpuestos, uno visible (.active) ----
   IMPORTANTE: TODOS los slides (activo o no) son position:absolute + inset:0
   SIEMPRE — así cada uno llena la sección completa sin importar cuánto texto
   tenga. Antes el slide activo pasaba a position:relative, lo que hacía que
   su alto dependiera del contenido: un slide sin texto (o con poco) se veía
   como una franja angosta en vez de cubrir todo el fondo. El cambio entre
   slides es solo opacidad/visibilidad, nunca el tipo de posicionamiento. */
.hero-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.hero-slide {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.hero-slide::before {
  /* velo oscuro para que el texto sea legible sobre cualquier foto — se
     aclaró bastante respecto a la versión anterior, que dejaba la imagen
     casi tapada por completo. */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(120deg, rgba(7,21,39,.62) 0%, rgba(11,33,64,.5) 55%, rgba(14,107,168,.32) 130%);
}
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide .hero-content { padding: 5rem 0; }
@media (max-width: 767px) {
  .hero-slide .hero-content { padding-left: 20px; padding-right: 20px; }
}

.hero-eyebrow {
  color: var(--cyan); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .85rem; margin-bottom: 1rem;
}
.hero-eyebrow i { margin-right: .4rem; }
.hero-title {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.hero-sub { color: #C9D6E3; font-size: 1.1rem; max-width: 560px; }
.hero-sub-standalone {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  max-width: 720px;
}

.btn-accent {
  background: var(--cyan); color: var(--navy-deep); font-weight: 700;
  border: none; border-radius: 8px; padding: .8rem 1.75rem;
}
.btn-accent:hover { background: #4dd8e6; color: var(--navy-deep); }
.btn-outline-light { border-radius: 8px; font-weight: 600; padding: .8rem 1.75rem; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); color: var(--white);
  border: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; font-size: 1.1rem; cursor: pointer;
}
.hero-arrow:hover { background: rgba(255,255,255,.25); }
.hero-arrow-left { left: 1.5rem; }
.hero-arrow-right { right: 1.5rem; }
@media (max-width: 767px) { .hero-arrow { display: none; } }

.hero-dots {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: .5rem;
}
.hero-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.35); padding: 0; cursor: pointer;
}
.hero-dots button.active { background: var(--cyan); }


/* ===================== BIENVENIDOS ===================== */
.section-welcome {
  position: relative;
  min-height: 520px;
  padding: 5.5rem 0;
  background: var(--navy-deep); /* se ve un instante antes de que cargue el video, o si falla */
  overflow: hidden;
}
.section-welcome-video {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* En celulares, el video se cambia por una imagen estática con el mismo
   contenido (un frame del propio video) — probado que en varios
   navegadores móviles el video no llega a pintarse en pantalla aunque
   reporte estar reproduciendo, así que optamos por algo simple y
   confiable en vez de seguir peleando con el bug. En pantallas más
   grandes (desktop/tablet, donde sí funciona bien) el video sigue
   activo con normalidad. */
@media (max-width: 767px) {
  .section-welcome-video { display: none; }
  .section-welcome {
    background-image: url('../images/nosotros-bg.jpg');
    background-size: cover;
    background-position: center;
  }
}

.section-welcome-overlay {
  /* Velo oscuro sobre el video/imagen de fondo para que el texto blanco
     sea legible. Calibrado para dejar ver el fondo, no para taparlo
     por completo. */
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(7,21,39,.68) 0%, rgba(7,21,39,.58) 50%, rgba(7,21,39,.72) 100%);
  z-index: 1;
}
.section-welcome > .container { position: relative; z-index: 2; }

/* Texto que va directo sobre el video (sin tarjeta propia detrás) pasa a
   blanco — escapado con .section-welcome para no afectar estas mismas
   clases en el resto del sitio, que sí siguen sobre fondo claro. */
.section-welcome .section-eyebrow { color: var(--cyan); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.section-welcome .section-title,
.section-welcome p.fw-semibold,
.section-welcome p.fw-bold { color: var(--white); text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.section-welcome .lead-line,
.section-welcome .body-copy { color: #D9E4EF; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.section-welcome .body-copy strong { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .section-welcome-video { display: none; }
  .section-welcome {
    background-image: url('../images/nosotros-bg.jpg');
    background-size: cover;
    background-position: center;
  }
}

.badge-founded {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-soft); color: var(--navy);
  font-weight: 700; padding: .6rem 1.2rem; border-radius: 999px;
  margin-top: 1rem; border: 1px solid rgba(14,107,168,.15);
}
.badge-founded i { color: var(--blue); }

.pillar-card {
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  border-top: 3px solid var(--blue);
}
.pillar-icon { font-size: 1.8rem; color: var(--blue); margin-bottom: .75rem; display: block; }
.pillar-card h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: .5rem; }
.pillar-card p { color: var(--text-muted); margin: 0; }
.pillar-list { list-style: none; padding: 0; margin: 0; color: var(--text-muted); }
.pillar-list li { padding: .2rem 0; }
.pillar-list li::before { content: "— "; color: var(--blue); font-weight: 700; }

.btn-primary-solid {
  background: var(--blue); color: var(--white); font-weight: 700;
  border: none; border-radius: 8px; padding: .8rem 2rem;
}
.btn-primary-solid:hover { background: var(--blue-light); color: var(--white); }

/* ===================== SISTEMAS ===================== */
.section-systems { padding: 5.5rem 0 0; background: var(--bg-soft); }

.system-logo-card {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  background: var(--white); border-radius: 14px; padding: 1.5rem 1.25rem;
  text-align: center; color: var(--navy); font-weight: 600;
  box-shadow: 0 4px 18px rgba(11,33,64,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  overflow: hidden; /* nunca dejar que un logo se desborde de su tarjeta */
}
.system-logo-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(11,33,64,.12); color: var(--blue); }
.system-logo-card i { font-size: 2.2rem; color: var(--blue); }
.system-logo-card img { display: block; width: auto; max-width: 100%; height: 64px; max-height: 64px; object-fit: contain; }
.system-logo-card span { font-size: .92rem; }

.section-divider {
  border: none;
  height: 2px;
  background: var(--blue);
  opacity: 1;
  margin: 3.5rem 0 0;
}

/* ===================== SERVICIOS ===================== */
.section-services { background: var(--navy-deep); padding: 5.5rem 0 0; }

.services-intro-list {
  max-width: 900px; margin: 0 auto; color: #B9C6D3;
  list-style: none; padding: 0;
}
.services-intro-list li {
  position: relative; padding: .5rem 0 .5rem 1.75rem; line-height: 1.7;
}
.services-intro-list li::before {
  content: "\f26b"; font-family: "bootstrap-icons";
  position: absolute; left: 0; top: .55rem; color: var(--cyan); font-size: .9rem;
}

.service-card {
  background: #10233F; border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 2rem; height: 100%;
}
.service-icon { font-size: 1.7rem; color: var(--cyan); margin-bottom: .75rem; }
.service-card h3 { color: var(--white); font-size: 1.15rem; margin-bottom: .6rem; }
.service-card p { color: #A9B8C7; line-height: 1.7; }
.service-link { color: var(--cyan); font-weight: 700; }
.service-link:hover { color: #6ee0ea; }

.services-strip {
  background: var(--navy);
  margin-top: 4rem;
  padding: 2.5rem 0;
}
.services-strip i { font-size: 1.6rem; color: var(--cyan); margin-bottom: .6rem; display: block; }
.services-strip p { color: #C9D6E3; font-weight: 600; margin: 0; }
.services-strip a { color: var(--white); }

/* ===================== POR QUÉ SECSA ===================== */
.section-why { padding: 5.5rem 0; background: var(--white); }

.why-tabs {
  border-bottom: 2px solid var(--bg-soft);
  gap: 0;
  flex-wrap: wrap;
}
.why-tabs .nav-link {
  color: var(--text-muted) !important;
  font-weight: 600;
  font-size: .95rem;
  padding: .75rem .25rem !important;
  margin-right: 1.75rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent !important;
  transition: color .2s ease, border-color .2s ease;
}
.why-tabs .nav-link:hover { color: var(--navy) !important; }
.why-tabs .nav-link.active {
  color: var(--blue) !important;
  border-bottom-color: var(--blue);
}
.why-headline { color: var(--navy); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (max-width: 575px) {
  .why-tabs .nav-link { font-size: .85rem; margin-right: 1rem; padding: .6rem .1rem !important; }
}

.why-panel {
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  color: var(--white); border-radius: 18px; padding: 3rem;
}
.why-panel h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
.why-panel p { color: #D9E4EF; margin-bottom: 1.5rem; }

/* ===================== CLIENTES (carrusel con botones prev/next) ===================== */
.section-clients { padding: 3rem 0; background: var(--bg-soft); }

.clients-framed {
  border-top: 2px solid rgba(33,199,217,.35);
  border-bottom: 2px solid rgba(33,199,217,.35);
  padding: 2rem 0;
}

.clients-carousel-wrapper {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
}

.clients-carousel-track {
  display: flex;
  /* El ancho total y de cada tarjeta se fija por JS en píxeles reales
     (no porcentajes) — ver initClientsCarousel() al final del HTML. */
}

.client-logo-item {
  flex: 0 0 auto;
  width: 33.333%; /* respaldo CSS — el JS también lo fija inline, pero así el HTML estático ya se ve bien antes de que corra el script */
  box-sizing: border-box;
  padding: 0 .75rem;
  height: 137px; /* +25% sobre el tamaño anterior (110px) */
  display: flex; align-items: center; justify-content: center;
}
.client-logo-item img {
  width: 100%; height: 112px; /* +25% sobre el tamaño anterior (90px) */
  object-fit: contain;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(11,33,64,.06);
  padding: 1rem;
}

/* Mostrar/ocultar carrusel (desktop) vs. slideshow (celular) — @media
   propia, NO las utilidades d-none/d-md-block de Bootstrap (esa
   combinación específica rompió el carrusel de desktop la primera vez
   que se probó, por motivo que no se logró aislar). Mismo patrón ya
   usado en otras partes de este sitio (.hero-arrow, video de fondo de
   "Nosotros"). */
@media (max-width: 767px) {
  .clients-carousel-wrapper { display: none; }
}
@media (min-width: 768px) {
  .clients-mobile-slideshow { display: none; }
}

/* Slideshow de clientes solo para celular — un logo a la vez, fundido
   cruzado por clase "active", misma técnica que .hero-slide. */
.clients-mobile-slideshow {
  position: relative;
  margin-top: 2rem;
  height: 150px;
}
.client-mobile-slide {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.client-mobile-slide.active { opacity: 1; visibility: visible; }
.client-mobile-slide img {
  max-width: 70%; max-height: 100%;
  object-fit: contain;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(11,33,64,.06);
  padding: 1.2rem;
}

/* Slideshow de clientes solo para celular — un logo a la vez, fundido
   cruzado por clase "active", misma técnica que .hero-slide. */
.clients-mobile-slideshow {
  position: relative;
  margin-top: 2rem;
  height: 150px;
}
.client-mobile-slide {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.client-mobile-slide.active { opacity: 1; visibility: visible; }
.client-mobile-slide img {
  max-width: 70%; max-height: 100%;
  object-fit: contain;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(11,33,64,.06);
  padding: 1.2rem;
}

/* ===================== INICIEMOS ===================== */
.section-steps { padding: 5.5rem 0; background: var(--white); }
.steps-headline { font-size: 1.8rem; font-weight: 700; color: var(--navy); margin-bottom: 2rem; }

.step-path { position: relative; padding-left: 2.5rem; }
.step-path::before {
  content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px;
  width: 2px; background: repeating-linear-gradient(to bottom, var(--cyan) 0 6px, transparent 6px 12px);
}
.step-item { display: flex; gap: 1.5rem; position: relative; margin-bottom: 2rem; }
.step-item:last-child { margin-bottom: 0; }
.step-num {
  position: absolute; left: -2.5rem; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; font-family: var(--font-display);
}
.step-item h4 { color: var(--navy); font-weight: 700; margin-bottom: .3rem; }
.step-item p { color: var(--text-muted); margin: 0; }

.video-panel {
  position: relative;
  aspect-ratio: 16/10; border-radius: 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.promo-video {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18px;
  background: var(--navy-deep);
}

/* ===================== CONTACTO ===================== */
.section-contact { padding: 5.5rem 0; background: var(--bg-soft); }

.contact-form-title { color: var(--navy); font-weight: 700; margin-bottom: .5rem; }
.contact-form-title i { color: var(--blue); margin-right: .4rem; }
.contact-form { background: var(--white); border-radius: 16px; padding: 2rem; box-shadow: 0 4px 18px rgba(11,33,64,.06); }
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.form-label { font-weight: 600; color: var(--navy); }
.form-control { border-radius: 8px; border-color: #D6DEE6; padding: .65rem .9rem; }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,107,168,.15); }
.form-status { font-weight: 600; min-height: 1.2em; }
.form-status.success { color: #1a8f4c; }
.form-status.error { color: #c62828; }

.contact-info-block {
  background: var(--white); border-radius: 14px; padding: 1.5rem;
  height: 100%; box-shadow: 0 3px 12px rgba(11,33,64,.05);
}
.contact-info-block i { font-size: 1.4rem; color: var(--blue); margin-bottom: .5rem; display: block; }
.contact-info-block h4 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
.contact-info-block p, .contact-info-block a { color: var(--text-muted); font-size: .92rem; }
.contact-info-block a:hover { color: var(--blue); }

.cr-strip {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white); border-radius: 14px; padding: 1rem 1.5rem;
  font-weight: 600; color: var(--navy);
}
.cr-strip span { display: inline-flex; align-items: center; gap: .5rem; }
.cr-flag { width: 22px; height: auto; display: inline-block; border-radius: 2px; }
.social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-soft); color: var(--blue); margin-left: .4rem;
}
.social-icons a:hover { background: var(--blue); color: var(--white); }

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--navy-deep); color: #9FB1C2;
  padding: 1.5rem 0; font-size: .9rem;
}

/* ===================== BACK TO TOP ===================== */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: var(--white); border: none;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(11,33,64,.25); z-index: 999;
}
.back-to-top.show { display: flex; }
.back-to-top:hover { background: var(--blue-light); }