/* ==========================================================================
   STYLE.BASE.CSS – BASE RESPONSIVE Y CONTENEDORES
   ========================================================================== */
/* ============ HERO TECH ============ */
/* ============ HERO TECH v2 ============ */
.hero-tech{
    position:relative; overflow:hidden; color:#fff; isolation:isolate;
   background-image:
        radial-gradient(circle at center, rgba(6, 9, 24, 0.5) 0%, #060918 90%),
        url('/img/index/hero-tech.webp');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.hero-tech::after{
    content:""; position:absolute; inset:auto 0 0 0; height:120px;
    background:linear-gradient(180deg, transparent, #ffffff);
    pointer-events:none;
}

/* Grid */
.hero-tech-grid{
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(120,180,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,180,255,.07) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse at center, #000 40%, transparent 85%);
    pointer-events:none;
}
.hero-tech-noise{
    position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-tech-glow{
    position:absolute; width:560px; height:560px; border-radius:50%;
    filter:blur(130px); opacity:.6; pointer-events:none;
    animation:heroFloat 14s ease-in-out infinite;
}
.hero-tech-glow--1{ background:#1e90ff; top:-180px; left:-140px; }
.hero-tech-glow--2{ background:#dc2626; bottom:-220px; right:-140px; animation-delay:-7s; }
@keyframes heroFloat{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.08)} }

.hero-tech-circuit{
    position:absolute; inset:0; width:100%; height:100%;
    stroke:rgba(120,200,255,.32); stroke-width:1.2; fill:none; pointer-events:none;
}
.hero-tech-circuit circle{ fill:#5ec8ff; filter:drop-shadow(0 0 6px #5ec8ff); }
.hero-tech-circuit path{ stroke-dasharray:6 10; animation:heroDash 22s linear infinite; }
@keyframes heroDash{ to{ stroke-dashoffset:-500; } }

.hero-tech .container{ position:relative; z-index:2; }

/* Top bar */
.hero-topbar{
    align-items:center; gap:.5rem; padding:.55rem 1rem;
    border:1px solid rgba(255,255,255,.1); border-radius:999px;
    background:rgba(255,255,255,.03); backdrop-filter:blur(8px);
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.72rem; letter-spacing:.08em; color:rgba(255,255,255,.7);
    margin-bottom:2rem;
}
.hero-blink{ animation:heroBlink 1.4s ease-in-out infinite; }
@keyframes heroBlink{ 50%{ opacity:.25 } }

/* Badge */
.hero-tech-badge{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.45rem 1rem; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid rgba(94,200,255,.35);
    backdrop-filter:blur(8px);
    font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
    color:#bfe2ff; margin-bottom:1.4rem; margin-top: 1rem;

}
.hero-tech-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:heroPulse 1.8s infinite; }
@keyframes heroPulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)} 70%{box-shadow:0 0 0 10px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

/* Título */
.hero-tech-title{
  color:#ffffff;
    font-weight:800; line-height:1.04; letter-spacing:-.025em;
    font-size:clamp(2.3rem, 4.8vw, 4rem);
}
.hero-tech-highlight{
    position:relative; display:inline-block;
    background:linear-gradient(90deg,#5ec8ff 0%,#b794ff 50%,#ff6b6b 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-underline{
    position:absolute; left:0; right:0; bottom:-10px; width:100%; height:10px;
}
.hero-tech-lead{ color:rgba(255,255,255,.78); font-size:1.05rem; max-width:600px; }

/* Botones */
.btn-hero-primary{
    background:linear-gradient(135deg,#1e90ff,#dc2626); color:#fff !important; border:0; font-weight:600;
    box-shadow:0 10px 30px -10px rgba(30,144,255,.6),0 10px 30px -15px rgba(220,38,38,.5);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-hero-primary:hover{ transform:translateY(-2px); filter:brightness(1.08);
    box-shadow:0 18px 38px -10px rgba(30,144,255,.75),0 18px 38px -15px rgba(220,38,38,.6); }
.btn-hero-ghost{
    background:rgba(255,255,255,.04); color:#fff !important; font-weight:600;
    border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); transition:all .25s ease;
}
.btn-hero-ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }

/* KPIs */
.hero-tech-stats{ max-width:600px; margin-top:1rem; }
.hero-stat{
    padding:.9rem 1rem; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px);
    text-align:center; transition:border-color .3s ease;
}
.hero-stat:hover{ border-color:rgba(94,200,255,.5); }
.hero-stat-num{ font-weight:800; font-size:1.25rem; line-height:1;
    background:linear-gradient(90deg,#5ec8ff,#ffffff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stat-num span{ font-size:.7rem; font-weight:600; margin-left:.25rem; color:rgba(255,255,255,.55); -webkit-text-fill-color:rgba(255,255,255,.55); }
.hero-stat-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.6); margin-top:.35rem; }

/* ============ PCB STAGE ============ */
.hero-pcb-stage{ position:relative; padding:1rem; }
.hero-hud{
    position:relative; aspect-ratio:1/1; border-radius:24px;
    background:radial-gradient(circle at 50% 50%, rgba(94,200,255,.12), transparent 65%);
    border:1px solid rgba(94,200,255,.25);
    box-shadow:inset 0 0 60px rgba(94,200,255,.08), 0 30px 80px -30px rgba(0,0,0,.6);
    overflow:hidden;
}
.hero-hud-corner{ position:absolute; width:22px; height:22px; border:2px solid #5ec8ff; }
.hero-hud-corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.hero-hud-corner.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.hero-hud-corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.hero-hud-corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.hero-hud-tag{
    position:absolute; padding:.25rem .55rem; border-radius:6px;
    background:rgba(5,15,40,.7); border:1px solid rgba(94,200,255,.35);
    font-family:"JetBrains Mono", monospace; font-size:.62rem; letter-spacing:.1em;
    color:#bfe2ff; backdrop-filter:blur(6px);
}
.hero-hud-tag--tl{ top:22px; left:42px; }
.hero-hud-tag--tr{ top:22px; right:42px; }
.hero-hud-tag--bl{ bottom:22px; left:42px; }
.hero-hud-tag--br{ bottom:22px; right:42px; color:#ffb4b4; border-color:rgba(255,107,107,.4); }

.hero-pcb-img{
    position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; z-index:2;
    filter:drop-shadow(0 25px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(94,200,255,.35));
    animation:heroBob 6s ease-in-out infinite;
}
@keyframes heroBob{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(-1deg)} }

.hero-tech-ring{
    position:absolute; inset:8%; border:1px dashed rgba(120,200,255,.3); border-radius:50%;
    animation:heroSpin 30s linear infinite;
}
.hero-tech-ring--2{ inset:20%; border-color:rgba(255,107,107,.25); animation-direction:reverse; animation-duration:22s; }
@keyframes heroSpin{ to{ transform:rotate(360deg); } }

/* Scanner line */
.hero-scan{
    position:absolute; left:8%; right:8%; top:8%; height:3px; z-index:3;
    background:linear-gradient(90deg, transparent, #5ec8ff, transparent);
    box-shadow:0 0 18px #5ec8ff, 0 0 40px rgba(94,200,255,.6);
    animation:heroScan 3.5s ease-in-out infinite;
}
@keyframes heroScan{
    0%   { transform:translateY(0);     opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:1; }
    100% { transform:translateY(800%);  opacity:0; }
}

/* Pin annotations */
.hero-pin{
    position:absolute; z-index:4; display:flex; align-items:center; gap:.45rem;
    font-family:"JetBrains Mono", monospace; font-size:.66rem; color:#bfe2ff;
    padding:.3rem .55rem; border-radius:8px;
    background:rgba(5,15,40,.75); border:1px solid rgba(94,200,255,.4);
    backdrop-filter:blur(6px); white-space:nowrap;
    animation:heroPinIn .6s ease both;
}
.hero-pin b{ color:#5ec8ff; font-weight:700; }
.hero-pin i{ font-style:normal; color:rgba(255,255,255,.75); }
.hero-pin--1{ top:18%; left:-4%;  animation-delay:.4s; }
.hero-pin--2{ top:48%; right:-6%; animation-delay:.7s; border-color:rgba(255,107,107,.4); }
.hero-pin--2 b{ color:#ff8a8a; }
.hero-pin--3{ bottom:14%; left:8%; animation-delay:1s; }
@keyframes heroPinIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* Chips bajo PCB */
.hero-chips{
    display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem;
}
.hero-chips span{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .75rem; border-radius:999px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
    font-family:"JetBrains Mono", monospace; font-size:.7rem; color:rgba(255,255,255,.75);
}
.hero-chips i{ color:#5ec8ff; }

/* ============ SERVICE CARDS ============ */
.hero-cards{ position:relative; z-index:2; }
.hero-service-card--tech{
    position:relative; display:block; padding:1.25rem .85rem 1rem; text-align:left;
    border-radius:16px; text-decoration:none; color:#fff; overflow:hidden;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    animation:heroCardIn .6s ease both;
}
@keyframes heroCardIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.hero-service-card--tech::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg,#5ec8ff,#ff4d5e); opacity:0; transition:opacity .35s ease;
}
.hero-service-card--tech:hover{
    transform:translateY(-6px); color:#fff;
    border-color:rgba(94,200,255,.55);
    box-shadow:0 22px 45px -22px rgba(94,200,255,.55),0 12px 30px -18px rgba(220,38,38,.4);
    background:rgba(255,255,255,.06);
}
.hero-service-card--tech:hover::before{ opacity:1; }
.hero-service-num{
    font-family:"JetBrains Mono", monospace; font-size:.65rem; letter-spacing:.18em;
    color:rgba(94,200,255,.8); margin-bottom:.5rem;
}
.hero-service-card--tech .hero-service-icon{
    width:44px; height:44px; border-radius:12px; margin-bottom:.65rem;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(94,200,255,.2), rgba(220,38,38,.18));
    border:1px solid rgba(255,255,255,.15);
    color:#5ec8ff; font-size:1.05rem; transition:transform .35s ease, color .35s ease;
}
.hero-service-card--tech:hover .hero-service-icon{ color:#fff; transform:scale(1.08) rotate(-4deg); }
.hero-service-card--tech h6{ margin:0; font-weight:700; font-size:.98rem; }
.hero-service-card--tech small{ color:rgba(255,255,255,.6); font-size:.72rem; letter-spacing:.04em; }
.hero-service-arrow{
    position:absolute; top:1.1rem; right:1rem; width:26px; height:26px; border-radius:50%;
    background:rgba(94,200,255,.12); color:#5ec8ff;
    display:flex; align-items:center; justify-content:center; font-size:.7rem;
    transform:translateX(-4px); opacity:0; transition:all .35s ease;
}
.hero-service-card--tech:hover .hero-service-arrow{ opacity:1; transform:translateX(0); }

@media (max-width: 991.98px){
    .hero-tech-stats{ margin-left:auto; margin-right:auto; }
}



/* SEPARADORES */
/* Contenedor de la tarjeta */
.feature-card {
    background: #ffffff;
    border-radius: 16px; /* Bordes suaves modernos */
    border: 1px solid rgba(0,0,0,0.05); /* Borde muy sutil */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Curva de animación suave */
    text-align: center;
}

/* Efecto Hover: ¡Aquí ocurre la magia! */
.feature-card:hover {
    transform: translateY(-10px); /* Efecto de levitación */
    box-shadow: 0 20px 30px rgba(0,0,0,0.1); /* Sombra profunda y suave */
    border-color: var(--bs-primary); /* Un toque de color al borde */
}

/* El círculo del icono */
.icon-circle {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.1); /* Color primario suave de fondo */
    color: var(--bs-primary);
    border-radius: 50%;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

/* Cambio de color del icono al hacer hover */
.feature-card:hover .icon-circle {
    background: var(--bs-primary);
    color: #ffffff;
    transform: scale(1.1);
}


/* Tablas de cookies y privacidad */


.table-container {
  width: 100%;
  max-width: 900px;
  margin: 2rem auto;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #f8f9fa; /* Fondo principal gris claro */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Estilos principales de la tabla */
.elegant-table {
  width: 100%;
  border-collapse: collapse;
  color: #374151; /* Texto en gris oscuro para contraste elegante */
}

/* Espaciado y alineación general */
.elegant-table th,
.elegant-table td {
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb; /* Líneas separadoras muy finas */
}

/* Diseño del encabezado */
.elegant-table th {
  background-color: #f3f4f6; /* Gris ligeramente más contrastado para diferenciar el header */
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* Efecto hover interactivo para las filas de datos */
.elegant-table tbody tr {
  transition: background-color 0.2s ease;
}

.elegant-table tbody tr:hover {
  background-color: #f1f5f9; /* Ilumina ligeramente la fila al pasar el ratón */
}

/* Elimina el borde inferior de la última fila para mantener la caja limpia */
.elegant-table tbody tr:last-child td {
  border-bottom: none;
}






/* 1. RESET Y VARIABLES */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --primary: #0072B2;
  --secondary: #15ACE1;
  --light: #F4F7FE;
  --dark: #14183E;
  --tech-cyan: #00f2ff;
  --rojo: #C81609;

  /* Definimos un ancho máximo global para que no se estire infinito en monitores 4K */
    --max-page-width: 1440px;
}

/* 2. TIPOGRAFÍA FLUIDA (Se adapta al tamaño de pantalla) */
html {
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #333;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Metropolis", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}


/* Limitador para contenedores estándar de Bootstrap */
.container {
    width: clamp(320px, 95%, var(--max-page-width));
    margin: 0 auto;
}

/* Limitador para el container-xxl (Secciones amplias) */
.container-xxl {
    max-width: 1600px;
    margin: 0 auto;
    width: 95%;
}




/* 4. REGLAS GLOBALES PARA IMÁGENES */
img {
  max-width: 100%;
  height: auto;
}