/* ============================================
     VARIABLES Y RESET
  ============================================ */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --navy:  #0A1F44;   /* Azul marino principal */
    --blue:  #007BFF;   /* Azul eléctrico acento */
    --gray:  #6B7280;   /* Gris texto secundario */
    --light: #F2F4F7;   /* Fondo claro */
    --white: #ffffff;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Montserrat', sans-serif;
    color: var(--navy);
    background: var(--white);
    overflow-x: hidden;
  }

  /* ============================================
     NAVBAR
  ============================================ */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: #0A1F44;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    border-bottom: 1px solid rgba(0,123,255,0.3);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .nav-logo img {
    height: 50px;
    width: auto;
    display: block;
    border-radius: 4px;
  }

  .logo-text {
    color: var(--white);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3px;
  }

  .logo-sub {
    color: var(--blue);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;
    display: block;
    margin-top: -4px;
  }

  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    flex-shrink: 0;
  }

  .nav-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.3s;
  }

  .nav-links a:hover { color: var(--blue); }

  .nav-cta {
    background: var(--blue);
    color: var(--white);
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .nav-cta:hover { background: #0056d6; }

  /* ============================================
     HERO
  ============================================ */
  .hero {
    min-height: 100vh;
    background: var(--navy);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 5%;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    opacity: 0.07;
  }

  .circuit-svg { width: 100%; height: 100%; }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding-top: 70px;
  }

  .hero-badge {
    display: inline-block;
    background: rgba(0, 123, 255, 0.15);
    border: 1px solid rgba(0, 123, 255, 0.4);
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 2px;
    margin-bottom: 24px;
  }

  .hero h1 {
    color: var(--white);
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 16px;
  }

  .hero h1 span { color: var(--blue); }

  .hero-slogan {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 24px;
    text-transform: uppercase;
  }

  .hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 540px;
  }

  .hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .btn-primary {
    background: var(--blue);
    color: var(--white);
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-primary:hover {
    background: #0056d6;
    transform: translateY(-2px);
  }

  .btn-outline {
    background: transparent;
    color: var(--white);
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
  }

  .hero-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 56px;
    position: relative;
    z-index: 2;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .stat { border-left: 2px solid var(--blue); padding-left: 16px; }
  .stat-num { color: var(--white); font-size: 28px; font-weight: 800; }
  .stat-label { color: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 600; letter-spacing: 1px; }

  /* ============================================
     SECCIONES GENERALES
  ============================================ */
  .section { padding: 100px 5%; }

  .section-header { text-align: center; margin-bottom: 64px; }

  .section-tag {
    display: inline-block;
    background: rgba(0, 123, 255, 0.1);
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
  }

  .section h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: 16px;
  }

  .section h2 em { color: var(--blue); font-style: normal; }

  .section-desc {
    color: var(--gray);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* ============================================
     SERVICIOS
  ============================================ */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .service-card {
    position: relative;
    background: linear-gradient(160deg, #ffffff 0%, #f5f9ff 100%);
    border: 1px solid #e7edf6;
    border-radius: 18px;
    padding: 32px 28px 28px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(10, 31, 68, 0.05);
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s, border-color 0.35s;
  }

  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), #38bdf8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
  }

  .service-card::after {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(0,123,255,0.13), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
  }

  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px rgba(10, 31, 68, 0.16);
    border-color: rgba(0, 123, 255, 0.35);
  }
  .service-card:hover::before { transform: scaleX(1); }
  .service-card:hover::after  { opacity: 1; }

  .service-icon {
    width: 60px; height: 60px;
    background: linear-gradient(145deg, var(--navy), var(--blue));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 10px 22px rgba(0, 123, 255, 0.28);
    transition: transform 0.35s;
  }
  .service-card:hover .service-icon { transform: translateY(-2px) scale(1.06) rotate(-3deg); }
  .service-icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; }

  .service-card h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.2px; position: relative; }
  .service-card p  { font-size: 13.5px; color: var(--gray); line-height: 1.65; position: relative; }

  .service-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
  .service-tags span {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--blue);
    background: rgba(0, 123, 255, 0.08);
    border: 1px solid rgba(0, 123, 255, 0.16);
    padding: 3px 10px; border-radius: 20px;
  }

  .services-cta { text-align: center; margin-top: 52px; }
  .services-cta p { color: var(--gray); font-size: 15px; margin-bottom: 18px; }

  /* ============================================
     POR QUÉ NOSOTROS
  ============================================ */
  .why {
    background: var(--navy);
    padding: 100px 5%;
  }

  .why .section-header h2 { color: var(--white); }
  .why .section-desc { color: rgba(255, 255, 255, 0.6); }



  /* ============================================
     PORTAFOLIO
  ============================================ */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }

  .portfolio-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--navy);
  }

  .portfolio-thumb {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s;
  }

  .portfolio-card:hover .portfolio-thumb { opacity: 0.6; }

  .portfolio-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 44px 24px 22px;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 13, 28, 0.82) 34%, rgba(7, 13, 28, 0.97) 100%);
  }
  .portfolio-info h3, .portfolio-info p { text-shadow: 0 2px 8px rgba(0,0,0,.8); }

  .portfolio-tag {
    display: inline-block;
    background: var(--blue);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: 8px;
  }

  .portfolio-card h3 { color: var(--white); font-size: 16px; font-weight: 700; }
  .portfolio-card p  { color: rgba(255, 255, 255, 0.88); font-size: 13px; margin-top: 5px; line-height: 1.55; }

  /* ============================================
     CONTACTO
  ============================================ */
  .contact { background: var(--light); }

  .contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
  }

  .contact-info h2 { font-size: 36px; font-weight: 800; color: var(--navy); margin-bottom: 16px; }
  .contact-info p  { color: var(--gray); font-size: 15px; line-height: 1.7; margin-bottom: 32px; }

  .contact-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }

  .contact-detail-icon {
    width: 42px; height: 42px;
    background: var(--blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .contact-detail-icon svg { width: 20px; height: 20px; stroke: white; }

  .contact-detail-text strong { display: block; color: var(--navy); font-size: 13px; font-weight: 700; }
  .contact-detail-text span   { color: var(--gray); font-size: 13px; }

  .contact-form {
    background: var(--white);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 40px rgba(10, 31, 68, 0.08);
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .form-group { margin-bottom: 20px; }

  .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--navy);
    transition: border-color 0.3s;
    outline: none;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { border-color: var(--blue); }

  .form-group textarea { min-height: 100px; resize: vertical; }

  .form-submit {
    width: 100%;
    background: var(--blue);
    color: var(--white);
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .form-submit:hover { background: #0056d6; }

  /* ============================================
     FOOTER
  ============================================ */
  footer {
    background: #040d1a;
    padding: 48px 5% 24px;
    color: rgba(255, 255, 255, 0.5);
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 24px;
  }

  .footer-logo { color: var(--white); font-size: 24px; font-weight: 800; letter-spacing: 3px; }
  .footer-logo span { color: var(--blue); }
  .footer-tagline { color: rgba(255, 255, 255, 0.35); font-size: 10px; letter-spacing: 2px; margin-top: 4px; }

  .footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
  .footer-links a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.3s;
  }
  .footer-links a:hover { color: var(--blue); }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ============================================
     ANIMACIONES DE SCROLL
  ============================================ */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: none;
  }

  /* ============================================
     RESPONSIVE BÁSICO
  ============================================ */
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .contact-inner { grid-template-columns: 1fr; gap: 32px; }
    .form-row { grid-template-columns: 1fr; }
    .hero-stats { gap: 20px; }
    .footer-top { flex-direction: column; align-items: flex-start; }
  }

  /* ============================================
     WHATSAPP FLOTANTE
  ============================================ */
  .whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    background: #25D366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.5);
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    animation: pulse-wa 2.5s infinite;
  }
  .whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.7);
  }
  .whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: white;
  }
  .wa-tooltip {
    position: absolute;
    right: 70px;
    background: #25D366;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .whatsapp-float:hover .wa-tooltip { opacity: 1; }
  @keyframes pulse-wa {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }

  /* ============================================
     CARRUSEL DE SERVICIOS
  ============================================ */
  .carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--navy);
  }

  .carousel-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.77,0,0.175,1);
    will-change: transform;
  }

  .carousel-slide {
    min-width: 100%;
    display: flex;
    align-items: stretch;
    min-height: 480px;
  }

  .slide-img {
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .slide-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, var(--navy));
    z-index: 1;
  }

  .slide-svg {
    width: 85%;
    height: auto;
    position: relative;
    z-index: 0;
    opacity: 0.9;
  }

  .slide-content {
    width: 50%;
    padding: 56px 48px 56px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--navy);
  }

  .slide-num {
    color: rgba(255,255,255,0.25);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .slide-tag {
    display: inline-block;
    background: rgba(0,123,255,0.2);
    border: 1px solid rgba(0,123,255,0.4);
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 16px;
    width: fit-content;
  }

  .slide-content h3 {
    color: var(--white);
    font-size: clamp(22px,3vw,34px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
  }

  .slide-content p {
    color: rgba(255,255,255,0.65);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
  }

  .slide-list {
    list-style: none;
    margin-bottom: 28px;
  }

  .slide-list li {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    padding: 5px 0;
    padding-left: 18px;
    position: relative;
  }

  .slide-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
  }

  .slide-cta {
    background: var(--blue);
    color: var(--white);
    padding: 13px 28px;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
  }

  .slide-cta:hover {
    background: #0056d6;
    transform: translateX(4px);
  }

  /* Botones prev/next */
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,123,255,0.15);
    border: 1px solid rgba(0,123,255,0.4);
    color: var(--white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-btn:hover {
    background: var(--blue);
    border-color: var(--blue);
  }

  .carousel-prev { left: 20px; }
  .carousel-next { right: 20px; }

  /* Dots */
  .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.3s;
  }

  .dot.active {
    background: var(--blue);
    width: 24px;
    border-radius: 4px;
  }

  /* Barra de progreso */
  .carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.08);
    z-index: 10;
  }

  .carousel-progress-bar {
    height: 100%;
    background: var(--blue);
    width: 0%;
    transition: width linear;
  }

  @media (max-width: 768px) {
    .carousel-slide { flex-direction: column; min-height: auto; }
    .slide-img { width: 100%; height: 220px; }
    .slide-img-overlay { background: linear-gradient(to bottom, transparent 60%, var(--navy)); }
    .slide-content { width: 100%; padding: 32px 24px; }
  }

  /* ============================================
     POR QUÉ NOSOTROS — REDISEÑO
  ============================================ */
  .why-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
  }

  .why-main-text {
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    line-height: 1.75;
  }

  .why-main-text strong {
    color: var(--white);
    font-weight: 700;
  }

  .why-signature {
    margin-top: 28px;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    border-left: 2px solid var(--blue);
    padding-left: 14px;
  }

  .why-pillars {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .why-pillar {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.3s, background 0.3s;
  }

  .why-pillar:hover {
    background: rgba(0,123,255,0.08);
    border-color: rgba(0,123,255,0.3);
  }

  .why-pillar-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .why-pillar-icon svg {
    width: 44px;
    height: 44px;
  }

  .why-pillar-title {
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .why-pillar-desc {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.55;
  }

  @media (max-width: 768px) {
    .why-inner { grid-template-columns: 1fr; gap: 40px; }
  }
    /* ============================================
     TEMA 2026 — PREMIUM DARK (capa final, sobrescribe lo anterior)
  ============================================ */
  :root{
    --bg:#070d1c; --bg2:#0a1428;
    --accent:#38bdf8; --accent2:#3b82f6; --accent3:#8b5cf6;
    --grad: linear-gradient(135deg,#38bdf8 0%,#3b82f6 50%,#8b5cf6 100%);
    --grad-soft: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.18));
    --txt:#eaf1ff; --mut:#9fb0cc; --line: rgba(255,255,255,.09);
    --glass: rgba(255,255,255,.045);
    --glow: 0 16px 50px rgba(59,130,246,.35);
    --head:'Sora','Montserrat',sans-serif;
  }
  body{ background:var(--bg); color:var(--txt); }
  /* Aurora de fondo fija */
  body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(620px 420px at 12% 6%, rgba(56,189,248,.16), transparent 60%),
      radial-gradient(720px 520px at 88% 10%, rgba(139,92,246,.15), transparent 60%),
      radial-gradient(760px 620px at 50% 104%, rgba(59,130,246,.13), transparent 60%); }
  /* Malla sutil */
  body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
    background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
    mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%); }
  body > *{ position:relative; z-index:1; }
  .whatsapp-float{ z-index:999; }

  h1,h2,h3,.section h2,.hero h1,.contact-info h2,.slide-content h3{ font-family:var(--head); }

  /* NAV */
  nav{ background:rgba(7,13,28,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:none; }
  .nav-links a{ color:var(--mut); }
  .nav-links a:hover{ color:#fff; }
  .nav-cta{ background:var(--grad); border-radius:11px; box-shadow:var(--glow); }
  .nav-cta:hover{ filter:brightness(1.08); }

  /* HERO con imagen de fondo (fondos/hero.jpg); el degradado oscurece la izquierda para leer el texto */
  .hero{
    background:
      linear-gradient(90deg, rgba(7,13,28,.97) 0%, rgba(7,13,28,.86) 34%, rgba(7,13,28,.45) 62%, rgba(7,13,28,.18) 100%),
      url('fondos/hero.jpg') right center / cover no-repeat;
  }
  .hero::before,.hero::after{ display:none; }
  .hero-bg{ opacity:.06; }
  @media (max-width:768px){
    .hero{ background:
      linear-gradient(180deg, rgba(7,13,28,.92) 0%, rgba(7,13,28,.82) 100%),
      url('fondos/hero.jpg') center / cover no-repeat; }
  }
  .hero-content{ max-width:780px; padding-top:90px; }
  .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--grad-soft);
    border:1px solid rgba(56,189,248,.3); color:#cfeaff; font-size:12px; font-weight:600; letter-spacing:1px;
    padding:8px 18px; border-radius:30px; margin-bottom:26px; backdrop-filter:blur(6px); text-transform:none; }
  .hero-badge b{ color:var(--accent); }
  .hero h1{ font-size:clamp(42px,6.2vw,76px); font-weight:800; letter-spacing:-2px; line-height:1.02; }
  .hero h1 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .hero-slogan{ color:var(--accent); letter-spacing:4px; }
  .hero p{ color:var(--mut); font-size:18px; }
  .btn-primary{ background:var(--grad); border-radius:12px; box-shadow:var(--glow); padding:16px 34px; }
  .btn-primary:hover{ transform:translateY(-3px); filter:brightness(1.08); box-shadow:0 22px 55px rgba(59,130,246,.5); }
  .btn-outline{ border-radius:12px; border-color:rgba(255,255,255,.22); }
  .btn-outline:hover{ border-color:var(--accent); color:var(--accent); background:rgba(56,189,248,.06); }

  /* SECCIONES en oscuro */
  .section{ background:transparent !important; }
  .section h2{ color:#fff; font-weight:800; letter-spacing:-1px; font-size:clamp(30px,4.5vw,50px); }
  .section h2 em{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .section-desc{ color:var(--mut); }
  .section-tag{ background:var(--grad-soft); border:1px solid rgba(56,189,248,.3); color:var(--accent);
    border-radius:30px; box-shadow:none; backdrop-filter:blur(6px); }

  /* SERVICIOS glass */
  /* SERVICIOS, PORTAFOLIO, SISTEMAS y PRODUCTOS comparten la misma imagen de fondo
     (fondos/servicios.jpg) FIJA al tamaño de la pantalla (parallax): así el fondo se ve
     CONTINUO al hacer scroll entre las cuatro y no aparece un "corte" entre secciones. */
  #servicios, #portafolio, #sistemas, #productos{
    background:
      linear-gradient(180deg, rgba(7,13,28,.42) 0%, rgba(7,13,28,.12) 45%, rgba(7,13,28,.42) 100%),
      url('fondos/servicios.jpg') center / cover no-repeat !important;
    background-attachment: scroll, fixed !important;
  }
  /* los bordes entre estas secciones se funden (sin escalón de color) */
  #sistemas, #productos, #portafolio{ padding-top:40px; }
  #servicios, #sistemas, #productos{ padding-bottom:40px; }
  @media (max-width:768px){
    /* en móvil el fixed falla (iOS): imagen normal anclada arriba */
    #servicios, #portafolio, #sistemas, #productos{ background:
      linear-gradient(180deg, rgba(7,13,28,.55) 0%, rgba(7,13,28,.35) 100%),
      url('fondos/servicios.jpg') center top / cover no-repeat !important;
      background-attachment: scroll, scroll !important; }
  }
  .service-card{ background:var(--glass); border:1px solid var(--line); border-radius:20px;
    backdrop-filter:blur(10px); box-shadow:0 10px 40px rgba(0,0,0,.25); }
  .service-card::before{ background:var(--grad); height:3px; }
  .service-card::after{ background:radial-gradient(circle, rgba(56,189,248,.16), transparent 70%); }
  .service-card:hover{ transform:translateY(-10px); border-color:rgba(56,189,248,.4);
    box-shadow:0 30px 60px rgba(0,0,0,.4), 0 0 42px rgba(56,189,248,.12); }
  .service-icon{ background:var(--grad); border-radius:16px; box-shadow:0 12px 26px rgba(59,130,246,.4); }
  .service-card h3{ color:#fff; }
  .service-card p{ color:var(--mut); }
  .service-tags span{ color:var(--accent); background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.2); }
  .services-cta p{ color:var(--mut); }

  /* WHY (Misión y Visión) con imagen de fondo fija, igual que Servicios/Productos */
  .why{
    background:
      linear-gradient(180deg, rgba(7,13,28,.50) 0%, rgba(7,13,28,.18) 45%, rgba(7,13,28,.50) 100%),
      url('fondos/mision-vision.jpg') center / cover no-repeat;
    background-attachment: scroll, fixed;
  }
  @media (max-width:768px){
    .why{ background:
      linear-gradient(180deg, rgba(7,13,28,.60) 0%, rgba(7,13,28,.40) 100%),
      url('fondos/mision-vision.jpg') center top / cover no-repeat;
      background-attachment: scroll, scroll; }
  }
  .why::before{ display:none; }
  .why-main-text{ color:var(--mut); }
  .why-pillar{ background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(8px); border-radius:14px; }
  .why-pillar:hover{ border-color:rgba(56,189,248,.35); background:rgba(56,189,248,.06); }

  /* PORTAFOLIO */
  .portfolio-card{ border:1px solid var(--line); box-shadow:0 14px 40px rgba(0,0,0,.35); }

  /* CONTACTO oscuro */
  .contact{ background:transparent !important; }
  .contact-info h2{ color:#fff; }
  .contact-info p{ color:var(--mut); }
  .contact-detail-text strong{ color:#fff; }
  .contact-detail-text span{ color:var(--mut); }
  .contact-detail-icon{ background:var(--grad); }
  .contact-form{ background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(14px);
    box-shadow:0 30px 70px rgba(0,0,0,.45); }
  .form-group label{ color:#dbe6ff; }
  .form-group input,.form-group select,.form-group textarea{ background:rgba(255,255,255,.04);
    border:1.5px solid var(--line); color:#fff; }
  .form-group input::placeholder,.form-group textarea::placeholder{ color:#7d8cab; }
  .form-group select option{ background:#0a1428; color:#fff; }
  .form-group input:focus,.form-group select:focus,.form-group textarea:focus{ border-color:var(--accent); }
  .form-submit{ background:var(--grad); border-radius:12px; box-shadow:var(--glow); }
  .form-submit:hover{ transform:translateY(-2px); filter:brightness(1.08); }

  /* FOOTER */
  footer{ background:rgba(4,9,18,.55); border-top:1px solid var(--line); }
  .footer-logo span{ color:var(--accent); }

  /* FRANJA DE MARCAS (marquee) */
  .brands{ padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    overflow:hidden; background:rgba(255,255,255,.02); }
  .brands-label{ text-align:center; color:var(--mut); font-size:11.5px; letter-spacing:3px;
    text-transform:uppercase; margin-bottom:18px; font-weight:600; }
  .marquee{ display:flex; align-items:center; gap:26px; width:max-content; animation:marq 42s linear infinite; }
  .marquee:hover{ animation-play-state:paused; }
  .brand{ display:inline-flex; align-items:center; justify-content:center; height:74px; padding:0 24px;
    background:#fff; border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,.28); flex-shrink:0;
    transition:transform .3s, box-shadow .3s; }
  .brand:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.4); }
  .brand img{ height:40px; width:auto; max-width:155px; object-fit:contain; display:block; }
  .brand b{ display:none; color:#0a1428; font-family:var(--head); font-weight:800; font-size:18px;
    letter-spacing:.5px; white-space:nowrap; }
  .brand.miss b{ display:inline; }
  @keyframes marq{ to{ transform:translateX(-50%); } }

  /* PRODUCTOS */
  #productos .products-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
    gap:22px; max-width:1200px; margin:0 auto; }
  .product-card{ position:relative; background:var(--glass); border:1px solid var(--line); border-radius:20px;
    padding:24px 22px 22px; backdrop-filter:blur(10px); overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
    box-shadow:0 10px 40px rgba(0,0,0,.25); }
  .product-card:hover{ transform:translateY(-10px); border-color:rgba(139,92,246,.4);
    box-shadow:0 30px 60px rgba(0,0,0,.4), 0 0 42px rgba(139,92,246,.13); }
  .product-media{ height:118px; border-radius:14px;
    background:linear-gradient(145deg, rgba(56,189,248,.14), rgba(139,92,246,.14));
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .product-media svg{ width:52px; height:52px; stroke:var(--accent); fill:none; }
  .product-card h3{ color:#fff; font-family:var(--head); font-size:16.5px; font-weight:700; margin-bottom:6px; }
  .product-card p{ color:var(--mut); font-size:12.5px; line-height:1.6; margin-bottom:15px; }
  .product-buy{ display:inline-flex; align-items:center; gap:7px; color:#fff; background:var(--grad);
    padding:9px 16px; border-radius:10px; font-size:12.5px; font-weight:700; text-decoration:none;
    box-shadow:0 8px 20px rgba(59,130,246,.3); transition:transform .25s, filter .25s; }
  .product-buy:hover{ transform:translateY(-2px); filter:brightness(1.08); }
  .product-badge{ position:absolute; top:13px; right:13px; z-index:2; font-size:9.5px; font-weight:800; letter-spacing:.4px;
    color:#fff; background:var(--grad); border:none; white-space:nowrap; max-width:calc(100% - 26px);
    padding:4px 10px; border-radius:20px; box-shadow:0 5px 14px rgba(59,130,246,.5); text-transform:uppercase; }

  /* Listas "Incluye" de los 3 servicios */
  .service-card, .product-card{ display:flex; flex-direction:column; }
  .product-buy, .svc-cta{ align-self:flex-start; }
  .product-buy{ margin-top:auto; }
  .svc-includes{ margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
  .svc-inc-label{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
  .svc-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
  .svc-list li{ position:relative; padding-left:28px; color:#cdd9f0; font-size:13.5px; line-height:1.45; }
  .svc-list li::before{ content:'✓'; position:absolute; left:0; top:1px; width:18px; height:18px;
    border-radius:50%; background:var(--grad); color:#fff; font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(59,130,246,.35); }
  .svc-cta{ margin-top:20px; }

  /* (toggle Ver más eliminado: ahora el detalle se abre en ventana) */
  /* Tarjetas de servicio compactas (detalle en ventana) */
  .svc-clickable, .prod-clickable{ cursor:pointer; }
  .svc-open{ border:none; cursor:pointer; font-family:'Montserrat',sans-serif; margin-top:auto; align-self:center; }
  #servicios .service-card{ padding-bottom:26px; min-height:300px; }
  #servicios .service-card > p{ margin-bottom:20px; }


  /* Encabezado de tarjeta de servicio centrado (ícono + título + rayita azul) */
  #servicios .service-icon{ margin-left:auto; margin-right:auto; }
  #servicios .service-card h3{ text-align:center; }
  #servicios .service-card h3::after{ content:''; display:block; width:46px; height:3px; border-radius:2px;
    background:var(--grad); margin:10px auto 2px; }
  #servicios .service-card > p{ text-align:center; }
  #servicios .svc-cta{ align-self:center; }

  /* Misión y Visión — panel editorial premium */
  .mv-panel{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
    background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border:1px solid var(--line); border-radius:26px; overflow:hidden;
    backdrop-filter:blur(14px); box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative; }
  .mv-panel::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
  .mv-half{ padding:56px 52px 50px; position:relative; overflow:hidden; transition:background .35s; }
  .mv-half + .mv-half{ border-left:1px solid var(--line); }
  .mv-half:hover{ background:rgba(56,189,248,.045); }
  .mv-num{ position:absolute; top:26px; right:30px; font-family:var(--head); font-weight:800;
    font-size:64px; line-height:1; color:transparent;
    -webkit-text-stroke:1.5px rgba(56,189,248,.28); pointer-events:none; }
  .mv-watermark{ position:absolute; bottom:-38px; right:-34px; width:190px; height:190px;
    color:rgba(56,189,248,.07); pointer-events:none; }
  .mv-watermark svg{ width:100%; height:100%; }
  .mv-kicker{ display:inline-flex; align-items:center; gap:9px; font-family:var(--head);
    font-size:12px; font-weight:800; letter-spacing:3px; color:var(--accent);
    background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.25);
    padding:8px 18px; border-radius:30px; margin-bottom:22px; }
  .mv-kicker svg{ width:16px; height:16px; }
  .mv-half h3{ color:#fff; font-family:var(--head); font-size:23px; font-weight:800;
    letter-spacing:-.4px; line-height:1.25; margin-bottom:16px; max-width:360px; }
  .mv-half p{ color:var(--mut); font-size:14.5px; line-height:1.85; text-align:justify; position:relative; }
  @media (max-width:768px){
    .mv-panel{ grid-template-columns:1fr; }
    .mv-half{ padding:42px 30px 38px; }
    .mv-half + .mv-half{ border-left:none; border-top:1px solid var(--line); }
  }

  /* ============================================
     NAVBAR 2026 — barra de vidrio con línea de luz
  ============================================ */
  nav{
    top:0; left:0; right:0; transform:none; width:100%;
    height:68px; padding:0 5%;
    background:rgba(7,13,28,.85); backdrop-filter:blur(20px) saturate(140%);
    border:none; border-bottom:1px solid rgba(120,160,255,.14); border-radius:0;
    box-shadow:0 12px 40px rgba(0,0,0,.45);
  }
  /* línea de luz que viaja por el borde inferior */
  nav::after{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:linear-gradient(90deg, transparent 0%, rgba(56,189,248,.9) 40%, rgba(139,92,246,.9) 60%, transparent 100%);
    background-size:220% 100%; animation:navline 8s linear infinite; pointer-events:none;
  }
  @keyframes navline{ 0%{ background-position:180% 0; } 100%{ background-position:-180% 0; } }
  .nav-logo img{ height:38px; border-radius:10px; transition:transform .3s, box-shadow .3s; }
  .nav-logo:hover img{ transform:scale(1.06) rotate(-2deg); box-shadow:0 0 24px rgba(56,189,248,.55); }
  .nav-links{ gap:6px; }
  .nav-links a{
    position:relative; padding:9px 16px; border-radius:22px;
    color:var(--mut); transition:color .25s, background .25s;
  }
  .nav-links a::after{
    content:''; position:absolute; left:16px; right:100%; bottom:5px; height:2px; border-radius:2px;
    background:var(--grad); transition:right .3s;
  }
  .nav-links a:hover{ color:#fff; }
  .nav-links a:hover::after{ right:16px; }
  .nav-links a.active{ color:#fff; background:rgba(56,189,248,.14);
    box-shadow:inset 0 0 0 1px rgba(56,189,248,.30); }
  .nav-links a.active::after{ display:none; }
  /* CTA con destello */
  .nav-cta{ position:relative; overflow:hidden; border-radius:26px; padding:11px 26px;
    box-shadow:0 8px 26px rgba(59,130,246,.45); }
  .nav-cta::after{
    content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-20deg); animation:ctashine 3.4s ease-in-out infinite; pointer-events:none;
  }
  @keyframes ctashine{ 0%, 55%{ left:-70%; } 100%{ left:150%; } }
  @media (max-width:768px){ nav{ height:60px; } }

  /* ============================================
     LIBRO DE RECLAMACIONES + RUC footer
  ============================================ */
  .footer-ruc{ color:rgba(255,255,255,.45); font-size:11px; letter-spacing:.6px; margin-top:10px; }
  .lr-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
    background:#fff; border-radius:12px; padding:10px 18px;
    box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .3s, box-shadow .3s; }
  .lr-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(56,189,248,.35); }
  .lr-btn img{ height:58px; width:auto; display:block; }
  .lr-overlay{ position:fixed; inset:0; z-index:2000; display:none; align-items:flex-start; justify-content:center;
    background:rgba(3,7,16,.78); backdrop-filter:blur(8px); overflow:auto; padding:34px 14px; }
  .lr-overlay.open{ display:flex; }
  .lr-modal{ width:min(760px,100%); background:linear-gradient(165deg,#0e1a38,#0a1428);
    border:1px solid rgba(120,160,255,.18); border-radius:22px; padding:32px 34px 30px;
    box-shadow:0 40px 100px rgba(0,0,0,.65); position:relative; }
  .lr-modal::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px;
    border-radius:22px 22px 0 0; background:var(--grad); }
  .lr-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
  .lr-book{ width:64px; height:56px; border-radius:14px; background:#fff; color:#c0392b;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:6px;
    box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .lr-book svg{ width:28px; height:28px; }
  .lr-book img{ width:100%; height:100%; object-fit:contain; display:block; }
  .lr-title{ color:#fff; font-family:var(--head); font-size:22px; font-weight:800; letter-spacing:-.3px; }
  .lr-sub{ color:var(--mut); font-size:11.5px; margin-top:3px; letter-spacing:.4px; }
  .lr-close{ margin-left:auto; background:rgba(255,255,255,.06); border:1px solid var(--line);
    color:#fff; width:36px; height:36px; border-radius:50%; font-size:14px; cursor:pointer;
    transition:background .25s, border-color .25s; flex-shrink:0; }
  .lr-close:hover{ background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.5); }
  .lr-legal{ color:rgba(255,255,255,.5); font-size:11.5px; line-height:1.6; background:rgba(56,189,248,.06);
    border:1px solid rgba(56,189,248,.15); border-radius:12px; padding:12px 16px; margin-bottom:22px; }
  .lr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
  .lr-grid .lr-full{ grid-column:1 / -1; }
  .lr-grid .form-group label{ color:#dbe6ff; }
  .lr-grid textarea{ min-height:76px; }
  .lr-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
  @media (max-width:640px){ .lr-grid{ grid-template-columns:1fr; } .lr-modal{ padding:26px 20px; } }

  /* Documentos legales (Términos / Privacidad) */
  .leg-ico{ color:var(--accent2); }
  .leg-body{ max-height:58vh; overflow:auto; padding-right:12px;
    color:var(--mut); font-size:13px; line-height:1.75; }
  .leg-body h4{ color:#fff; font-family:var(--head); font-size:14.5px; font-weight:700; margin:20px 0 8px; }
  .leg-body h4:first-child{ margin-top:0; }
  .leg-body p{ margin-bottom:10px; text-align:justify; }
  .leg-body b{ color:#dbe6ff; }
  .leg-body ul{ padding-left:20px; margin-bottom:10px; }
  .leg-body li{ margin-bottom:6px; text-align:justify; }
  .leg-body::-webkit-scrollbar{ width:8px; }
  .leg-body::-webkit-scrollbar-thumb{ background:rgba(56,189,248,.3); border-radius:8px; }
  .leg-body::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:8px; }
  .legal-links a{ color:rgba(255,255,255,.5); text-decoration:none; font-size:12px;
    transition:color .25s; cursor:pointer; }
  .legal-links a:hover{ color:var(--accent); }

  /* Fotos reales en el portafolio */
  .photo-thumb{ padding:0; overflow:hidden; }
  .photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s; }
  .portfolio-card:hover .photo-thumb img{ transform:scale(1.06); }

  /* ============================================
     PORTAFOLIO — CARRUSEL TIPO BANNER
  ============================================ */
  .pf-carousel{ position:relative; max-width:1200px; margin:0 auto; border-radius:24px;
    overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.45); }
  .pf-track{ display:flex; transition:transform .75s cubic-bezier(.77,0,.175,1); will-change:transform; }
  .pf-slide{ min-width:100%; position:relative; min-height:440px; display:flex; align-items:flex-end; }
  .pf-img{ position:absolute; inset:0; }
  .pf-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pf-img::after{ content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(7,13,28,.88) 0%, rgba(7,13,28,.45) 45%, rgba(7,13,28,.10) 100%),
               linear-gradient(0deg, rgba(7,13,28,.85) 0%, transparent 45%); }
  .pf-bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:8%; }
  .pf-bg svg{ width:240px; height:240px; opacity:.85; }
  .pf-bg::after{ content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(7,13,28,.55) 0%, transparent 60%); }
  .pf-content{ position:relative; z-index:2; padding:0 56px 46px; max-width:640px; }
  .pf-content h3{ color:#fff; font-family:var(--head); font-size:clamp(22px,3vw,32px);
    font-weight:800; letter-spacing:-.5px; margin:12px 0 10px; text-shadow:0 2px 10px rgba(0,0,0,.7); }
  .pf-content p{ color:rgba(255,255,255,.9); font-size:14.5px; line-height:1.7;
    text-shadow:0 2px 8px rgba(0,0,0,.8); }
  .pf-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background:rgba(9,16,34,.55); backdrop-filter:blur(8px); color:#fff; font-size:24px;
    line-height:1; cursor:pointer; transition:background .3s, border-color .3s, transform .2s;
    display:flex; align-items:center; justify-content:center; padding-bottom:4px; }
  .pf-btn:hover{ background:var(--accent2); border-color:var(--accent2); }
  .pf-prev{ left:18px; } .pf-next{ right:18px; }
  .pf-dots{ position:absolute; bottom:16px; right:24px; display:flex; gap:8px; z-index:5; }
  .pf-dots span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35);
    cursor:pointer; transition:all .3s; }
  .pf-dots span.on{ background:var(--accent); width:26px; border-radius:5px; }
  .pf-progress{ position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.10); z-index:5; }
  .pf-bar{ height:100%; width:0%; background:var(--grad); }
  @media (max-width:768px){
    .pf-slide{ min-height:400px; }
    .pf-content{ padding:0 24px 52px; }
    .pf-bg svg{ width:150px; height:150px; }
    .pf-dots{ right:50%; transform:translateX(50%); }
  }
  /* Botón "Conocer el sistema" dentro del slide */
  .pf-more{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:#fff;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(6px);
    padding:10px 20px; border-radius:11px; font-family:var(--head); font-size:13px; font-weight:700;
    text-decoration:none; transition:background .3s, border-color .3s, transform .25s; }
  .pf-more:hover{ background:var(--accent2); border-color:var(--accent2); transform:translateY(-2px); }

  /* ============================================
     NUESTROS SISTEMAS (software propio)
  ============================================ */
  .sys-row{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
    max-width:1150px; margin:0 auto 56px; scroll-margin-top:90px; }
  .sys-row:last-child{ margin-bottom:0; }
  .sys-invert .sys-shot{ order:2; }
  .sys-invert .sys-info{ order:1; }
  .sys-shot{ position:relative; border-radius:20px; overflow:hidden;
    border:1px solid rgba(120,160,255,.25); box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 50px rgba(56,189,248,.10); }
  .sys-shot::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); z-index:1; }
  .sys-shot img{ width:100%; display:block; transition:transform .5s; }
  .sys-shot:hover img{ transform:scale(1.03); }
  .sys-kicker{ display:inline-block; font-family:var(--head); font-size:11.5px; font-weight:800;
    letter-spacing:2.5px; color:var(--accent); background:rgba(56,189,248,.09);
    border:1px solid rgba(56,189,248,.25); padding:7px 16px; border-radius:30px; margin-bottom:16px; }
  .sys-info h3{ color:#fff; font-family:var(--head); font-size:clamp(20px,2.4vw,26px);
    font-weight:800; letter-spacing:-.4px; line-height:1.3; margin-bottom:12px; }
  .sys-info > p{ color:var(--mut); font-size:14.5px; line-height:1.75; margin-bottom:18px; }
  .sys-info .svc-list li{ font-size:13.5px; }
  .sys-ctas{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
  @media (max-width:860px){
    .sys-row{ grid-template-columns:1fr; gap:22px; }
    .sys-invert .sys-shot{ order:0; }
    .sys-invert .sys-info{ order:1; }
  }

  /* ============================================
     VALIDACIÓN DE CERTIFICADOS (QR)
  ============================================ */
  .val-box{ max-width:820px; margin:0 auto; background:var(--glass); border:1px solid var(--line);
    border-radius:22px; padding:34px 32px 30px; backdrop-filter:blur(14px);
    box-shadow:0 26px 60px rgba(0,0,0,.4); position:relative; overflow:hidden; }
  .val-box::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
  .val-search{ display:flex; gap:12px; flex-wrap:wrap; }
  .val-search input{ flex:1; min-width:230px; background:rgba(255,255,255,.05); border:1.5px solid var(--line);
    color:#fff; border-radius:12px; padding:15px 18px; font-family:'Montserrat',sans-serif; font-size:15px;
    letter-spacing:.6px; outline:none; transition:border-color .3s, background .3s; }
  .val-search input::placeholder{ color:#7d8cab; letter-spacing:.3px; }
  .val-search input:focus{ border-color:var(--accent); background:rgba(56,189,248,.06); }
  .val-search .btn-primary{ padding:15px 30px; white-space:nowrap; }
  .val-hint{ color:var(--mut); font-size:12px; margin-top:12px; }
  .val-result{ margin-top:22px; }
  .val-msg{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border-radius:14px;
    font-size:14px; line-height:1.6; }
  .val-msg.ok{ background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.35); color:#bbf7d0; }
  .val-msg.bad{ background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.35); color:#fecaca; }
  .val-msg.warn{ background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.35); color:#fde68a; }
  .val-msg b{ color:#fff; }
  .val-card{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px;
    padding:24px 26px; margin-top:14px; }
  .val-card-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;
    padding-bottom:16px; border-bottom:1px solid var(--line); }
  .val-badge{ font-family:var(--head); font-size:11px; font-weight:800; letter-spacing:1.2px;
    padding:6px 14px; border-radius:30px; text-transform:uppercase; }
  .val-badge.vig{ background:rgba(34,197,94,.16); color:#86efac; border:1px solid rgba(34,197,94,.4); }
  .val-badge.ven{ background:rgba(239,68,68,.16); color:#fca5a5; border:1px solid rgba(239,68,68,.4); }
  .val-cod{ font-family:var(--head); font-size:17px; font-weight:800; color:#fff; letter-spacing:.5px; }
  .val-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 24px; }
  .val-item span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:1.2px;
    color:var(--accent); text-transform:uppercase; margin-bottom:3px; }
  .val-item b{ color:#eaf1ff; font-size:14px; font-weight:600; line-height:1.45; }
  .val-emisor{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
    color:var(--mut); font-size:12px; }
  .val-emisor b{ color:#cdd9f0; }
  .val-promo{ max-width:820px; margin:26px auto 0; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:var(--grad-soft); border:1px solid rgba(56,189,248,.25); border-radius:20px; padding:24px 28px;
    backdrop-filter:blur(8px); }
  .val-promo-ico{ width:52px; height:52px; flex-shrink:0; border-radius:14px; background:var(--grad);
    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(59,130,246,.35); }
  .val-promo-ico svg{ width:27px; height:27px; color:#fff; }
  .val-promo-txt{ flex:1; min-width:240px; }
  .val-promo-txt b{ color:#fff; font-family:var(--head); font-size:15.5px; display:block; margin-bottom:5px; }
  .val-promo-txt p{ color:var(--mut); font-size:13.5px; line-height:1.65; }
  @media (max-width:640px){ .val-box{ padding:26px 20px 24px; } .val-search .btn-primary{ width:100%; } }

  /* Aviso de privacidad / cookies */
  .ck-banner{ position:fixed; left:50%; bottom:18px; transform:translate(-50%, 140%);
    width:min(880px, calc(100% - 28px)); z-index:1500;
    display:flex; align-items:center; gap:16px;
    background:rgba(11,20,42,.92); backdrop-filter:blur(16px);
    border:1px solid rgba(120,160,255,.20); border-radius:18px;
    padding:16px 20px; box-shadow:0 24px 60px rgba(0,0,0,.55);
    transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .ck-banner.show{ transform:translate(-50%, 0); }
  .ck-icon{ font-size:26px; flex-shrink:0; }
  .ck-text{ color:var(--mut); font-size:12.5px; line-height:1.6; }
  .ck-text b{ color:#fff; }
  .ck-text a{ color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .ck-ok{ flex-shrink:0; padding:11px 26px !important; border-radius:12px; }
  @media (max-width:640px){ .ck-banner{ flex-direction:column; text-align:center; gap:12px; } }

  /* Foto real en tarjeta de producto */
  .product-media.photo{ background:#fff; padding:7px; overflow:hidden; }
  .product-media.photo img{ height:100%; width:100%; object-fit:contain; display:block; }
  .product-media.photo svg{ display:none; }
  .product-media.photo.noimg{ background:linear-gradient(145deg, rgba(56,189,248,.14), rgba(139,92,246,.14)); padding:0; }
  .product-media.photo.noimg img{ display:none; }
  .product-media.photo.noimg svg{ display:block; }

/* ===== Accesos a las páginas de servicio (portada) =====
   Antes eran botones .btn-outline planos y desentonaban con el resto.
   Reutilizan el lenguaje de las tarjetas de servicio: icono sobre degradado,
   vidrio esmerilado y elevación al pasar el cursor. */
.sp-wrap{ max-width:1200px; margin:52px auto 0; padding:0 5%; }
.sp-tit{ text-align:center; font-family:var(--head); font-size:13px; font-weight:700;
         letter-spacing:2.4px; text-transform:uppercase; color:var(--mut); margin-bottom:26px; }
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.sp-card{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
          background:var(--glass); border:1px solid var(--line); border-radius:18px;
          padding:24px 22px 20px; text-decoration:none; position:relative; overflow:hidden;
          transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
.sp-card::after{ content:''; position:absolute; inset:0; border-radius:18px; opacity:0;
                 background:var(--grad-soft); transition:opacity .35s; pointer-events:none; }
.sp-card:hover{ transform:translateY(-6px); border-color:rgba(56,189,248,.45); box-shadow:var(--glow); }
.sp-card:hover::after{ opacity:1; }
.sp-ico{ width:52px; height:52px; border-radius:14px; background:var(--grad);
         display:flex; align-items:center; justify-content:center; flex:none;
         box-shadow:0 10px 22px rgba(59,130,246,.30); transition:transform .35s; }
.sp-card:hover .sp-ico{ transform:scale(1.08) rotate(-4deg); }
.sp-ico svg{ width:25px; height:25px; }
.sp-card h3{ font-family:var(--head); font-size:15.5px; font-weight:700; color:var(--txt);
             line-height:1.3; margin:0; position:relative; z-index:1; }
.sp-card p{ font-size:13px; color:var(--mut); line-height:1.55; margin:0; position:relative; z-index:1; }
.sp-mas{ margin-top:auto; padding-top:10px; font-size:12.5px; font-weight:700; color:var(--accent);
         letter-spacing:.4px; position:relative; z-index:1; }
.sp-card:hover .sp-mas{ color:#7dd3fc; }
@media (max-width:520px){ .sp-grid{ grid-template-columns:1fr; } }
/* Rejilla de 3 columnas para la seccion Servicios: 6 tarjetas = 3+3 exacto.
   Con auto-fit quedaban 4+2 o 4+1 segun el ancho, y se veia descompensado. */
.sp-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .sp-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .sp-grid-3{ grid-template-columns:1fr; } }
/* grid-auto-rows:1fr iguala el alto de AMBAS filas. Sin esto cada fila se
   ajusta a su texto mas largo y quedan de distinto alto (240 vs 219 px). */
.sp-grid-3{ grid-auto-rows:1fr; }

/* ===== Tarjetas de servicio CON FOTO =====
   La imagen va arriba con un velo degradado encima: sin ese velo, el icono y
   el borde se pierden sobre fotos claras. El icono se monta a caballo entre la
   foto y el cuerpo para coser las dos partes. */
.sp-card{ padding:0; }
.sp-foto{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
          border-radius:18px 18px 0 0; background:#0a1428; }
.sp-foto img{ width:100%; height:100%; object-fit:cover; display:block;
              transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.sp-card:hover .sp-foto img{ transform:scale(1.07); }
.sp-foto::after{ content:''; position:absolute; inset:0; pointer-events:none;
   background:linear-gradient(180deg, rgba(7,13,28,.10) 0%, rgba(7,13,28,.55) 62%, rgba(7,13,28,.95) 100%); }
.sp-cuerpo{ padding:0 22px 20px; display:flex; flex-direction:column; gap:9px; flex:1;
            position:relative; z-index:2; }
/* el icono sube y pisa la foto */
.sp-card .sp-ico{ margin-top:-27px; position:relative; z-index:3; }
@media (max-width:620px){ .sp-foto{ aspect-ratio:2/1; } }