/* SmidigLab — estilos del sitio (compartidos por / y /pt/) */
    /* ---------- Reset & Base ---------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: #f8f9fa;
      color: #1a2a3a;
      line-height: 1.6;
    }
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ---------- Header ---------- */
    header {
      background: #1a2a3a;
      padding: 1rem 0;
    }
    header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: 1.5rem;
      font-weight: bold;
      text-decoration: none;
      flex-shrink: 0;
    }
    .logo img {
      height: 40px;
      width: auto;
      display: block;
    }
    nav {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 12px;
    }
    nav a {
      color: #ccc;
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 20px;
      transition: 0.2s;
      font-size: 0.95rem;
      white-space: nowrap;
    }
    nav a:hover {
      color: #00a3ff;
      background: rgba(0,163,255,0.1);
    }
    a:focus-visible,
    .btn:focus-visible {
      outline: 3px solid #ffd166;
      outline-offset: 3px;
    }
    .btn-nav {
      border: 1px solid #00a3ff;
      color: #00a3ff !important;
    }
    .btn-nav:hover {
      background: #00a3ff !important;
      color: #fff !important;
    }
    .btn-whatsapp-nav {
      border: 1px solid #25D366;
      color: #25D366 !important;
    }
    .btn-whatsapp-nav:hover {
      background: #25D366 !important;
      color: #fff !important;
    }

    /* ---------- Hero (fondo azul oscuro) ---------- */
    .hero {
      padding: 80px 0;
      text-align: center;
      background: #0A2A4A;
      color: #ffffff;
    }
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 20px;
      font-weight: 700;
      line-height: 1.2;
    }
    .hero h1 span {
      color: #00A3FF;
    }
    .hero p {
      font-size: 1.2rem;
      max-width: 700px;
      margin: 0 auto 30px;
      color: #B0C4D8;
    }
    .btn {
      display: inline-block;
      padding: 12px 30px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: bold;
      margin: 5px;
      transition: 0.3s;
    }
    .btn-primary {
      background: #00A3FF;
      color: #fff;
    }
    .btn-primary:hover { background: #0077cc; }
    .btn-whatsapp {
      background: #25D366;
      color: #fff;
    }
    .btn-whatsapp:hover { background: #1ebe5d; }
    .btn-secondary {
      background: transparent;
      color: #00A3FF;
      border: 2px solid #00A3FF;
    }
    .btn-secondary:hover {
      background: #00A3FF;
      color: #fff;
    }

    .benefits {
      background: #fff;
      padding: 36px 0;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .benefit {
      padding: 20px;
      border-left: 3px solid #00A3FF;
      background: #f8f9fa;
      border-radius: 8px;
    }
    .benefit h3 { margin-bottom: 6px; font-size: 1.05rem; }
    .benefit p { color: #555; font-size: 0.95rem; }

    /* ---------- Secciones ---------- */
    section { padding: 60px 0; }

    /* ---------- Soluciones ---------- */
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }
    .card {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border-top: 4px solid #00A3FF;
    }
    .card h3 { margin-bottom: 10px; }
    .card p { color: #555; }

    /* ---------- Cómo funciona ---------- */
    .steps {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
    }
    .step {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      text-align: center;
      flex: 1 1 200px;
      max-width: 280px;
    }
    .step .num {
      font-size: 2.5rem;
      font-weight: bold;
      color: #00A3FF;
    }

    /* ---------- Tecnologías ---------- */
    .tech-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
    .tech-item {
      background: #fff;
      padding: 10px 20px;
      border-radius: 40px;
      border: 1px solid #ddd;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .tech-item img {
      height: 24px;
      width: auto;
      /* Filtro para pintar el logo de negro */
      filter: brightness(0) saturate(100%);
    }

    /* ---------- Sobre SmidigLab ---------- */
    .about {
      background: #0a121c;
      color: #fff;
      text-align: center;
      padding: 60px 0;
      border-top: 4px solid #00A3FF;
      border-bottom: 4px solid #00A3FF;
    }
    .about .logo-blanco {
      max-width: 140px;
      margin: 0 auto 20px;
      display: block;
    }
    .about h2 { color: #fff; margin-bottom: 16px; }
    .about p {
      max-width: 700px;
      margin: 0 auto 16px;
      color: #d0dce8;
    }
    .about .highlight { color: #00A3FF; font-weight: bold; }

    /* ---------- Contacto ---------- */
    .contact {
      background: #fff;
      text-align: center;
    }
    .contact .contact-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 20px;
    }
    .contact .contact-links a {
      color: #00A3FF;
      text-decoration: none;
      font-weight: 500;
    }
    .contact .contact-links a:hover { text-decoration: underline; }
    .contact .contact-links .wa-link {
      color: #25D366;
      font-weight: 600;
    }

    /* ---------- Footer ---------- */
    footer {
      background: #0f1a24;
      color: #7a8a9a;
      text-align: center;
      padding: 30px 0;
    }
    footer .footer-logo {
      display: inline-block;
      color: #fff;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 10px;
    }
    footer .footer-logo img {
      height: 32px;
      vertical-align: middle;
      margin-right: 8px;
    }
    footer a { color: #00A3FF; text-decoration: none; }
    footer a:hover { text-decoration: underline; }

    /* ---------- Responsive ---------- */
    @media (max-width: 992px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      header .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      nav { justify-content: center; margin-top: 8px; }
      .hero h1 { font-size: 2.2rem; }
      .grid, .benefits-grid { grid-template-columns: 1fr; }
      .hero { padding: 60px 0; }
      .btn { display: block; margin: 10px auto; max-width: 320px; }
      .tech-grid { gap: 12px; }
    }

    /* ---------- Tema oscuro (opcional: lo enciende el botón de la cabecera) ---------- */
    html[data-tema="oscuro"] { color-scheme: dark; }
    html[data-tema="oscuro"] body {
      background: #0d1b26;
      color: #dbe6f0;
    }
    html[data-tema="oscuro"] header { background: #07121a; }
    html[data-tema="oscuro"] .hero { background: #0b1c2b; }
    html[data-tema="oscuro"] .hero p { color: #9fb6cc; }

    /* Secciones con fondo claro puesto en línea: se repintan */
    html[data-tema="oscuro"] section[style*="#f1f3f5"],
    html[data-tema="oscuro"] section[style*="#f8f9fa"] { background: #132230 !important; }
    html[data-tema="oscuro"] section[style*="#0A2A4A"] { background: #061019 !important; }

    html[data-tema="oscuro"] h2,
    html[data-tema="oscuro"] h3 { color: #eaf2f8; }
    html[data-tema="oscuro"] .card,
    html[data-tema="oscuro"] .step,
    html[data-tema="oscuro"] .tech-item,
    html[data-tema="oscuro"] .benefit {
      background: #132230;
      color: #dbe6f0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    }
    html[data-tema="oscuro"] .tech-item { border-color: #24405a; }
    html[data-tema="oscuro"] .tech-item img { filter: brightness(0) invert(1); }
    html[data-tema="oscuro"] .card p,
    html[data-tema="oscuro"] .benefit p,
    html[data-tema="oscuro"] p { color: #b9c9d6; }
    html[data-tema="oscuro"] .benefits { background: #0d1b26; }
    html[data-tema="oscuro"] .benefit { background: #132230; }
    html[data-tema="oscuro"] .contact { background: #0f1e2b; }
    html[data-tema="oscuro"] .about { background: #061019; }
    html[data-tema="oscuro"] footer { background: #07121a; }

    /* Tablas y bloques de la página de talleres */
    html[data-tema="oscuro"] .tabla th { background: #1b2c3b; color: #eaf2f8; }
    html[data-tema="oscuro"] .tabla th,
    html[data-tema="oscuro"] .tabla td { border-color: #1f3446; color: #cfdde9; }
    html[data-tema="oscuro"] .plan { background: #132230; border-color: #24405a; }
    html[data-tema="oscuro"] .plan h3,
    html[data-tema="oscuro"] .plan .precio { color: #eaf2f8; }
    html[data-tema="oscuro"] .plan .para,
    html[data-tema="oscuro"] .plan .antes { color: #90a5b6; }
    html[data-tema="oscuro"] .oferta { background: #2a2113; border-color: #d9822b; }
    html[data-tema="oscuro"] .oferta strong { color: #ffd9a8; }
    html[data-tema="oscuro"] .faq details { background: #132230; border-color: #24405a; }
    html[data-tema="oscuro"] .faq summary { color: #eaf2f8; }
    html[data-tema="oscuro"] .faq p { color: #b9c9d6; }
    html[data-tema="oscuro"] .nota { color: #90a5b6; }

    /* Títulos y textos con color puesto en línea: en oscuro quedarían ilegibles */
    html[data-tema="oscuro"] h2[style*="#0A2A4A"],
    html[data-tema="oscuro"] h3[style*="#0A2A4A"],
    html[data-tema="oscuro"] [style*="color:#0A2A4A"],
    html[data-tema="oscuro"] [style*="color: #0A2A4A"] { color: #eaf2f8 !important; }
    html[data-tema="oscuro"] [style*="color:#5c6b78"],
    html[data-tema="oscuro"] [style*="color: #5c6b78"] { color: #a8bccc !important; }
    html[data-tema="oscuro"] [style*="color:#3d4d5c"],
    html[data-tema="oscuro"] [style*="color: #3d4d5c"] { color: #c3d2df !important; }
    html[data-tema="oscuro"] [style*="color:#666"],
    html[data-tema="oscuro"] [style*="color: #666"] { color: #b9c9d6 !important; }
    html[data-tema="oscuro"] [style*="color:#8a9aaa"],
    html[data-tema="oscuro"] [style*="color: #8a9aaa"] { color: #90a5b6 !important; }

    /* ---------- Botón del tema ---------- */
    .btn-tema {
      background: transparent;
      border: 1px solid rgba(255,255,255,.35);
      color: #e7eef5;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: .82rem;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1.2;
      cursor: pointer;
      transition: .2s;
    }
    .btn-tema:hover { background: rgba(255,255,255,.12); }