/* ===== Paleta (oscuro pro + azules) ===== */
    :root{
      --bg:#0a0a0f; --bg-2:#0b0b14; --card:#10111a;
      --text:#e8eefc; --muted:#9aa6bf;
      --brand:#3fb4ff; --brand-2:#7bd3ff; --accent:#7c4dff;
      --grid:rgba(255,255,255,.035); --glass:rgba(255,255,255,.06); --border:rgba(255,255,255,.12);
      --radius:18px; --shadow:0 30px 80px rgba(0,0,0,.55);
    }
    :root.light{ --bg:#f7f9ff; --bg-2:#eef3ff; --card:#fff; --text:#0b1220; --muted:#586683; --grid:rgba(0,0,0,.04); --glass:#fff; --border:rgba(0,0,0,.12); --shadow:0 30px 80px rgba(0,0,0,.12); }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at -10% -20%, rgba(63,180,255,.18), transparent 60%),
        radial-gradient(1000px 700px at 120% 10%, rgba(123,211,255,.12), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg-2));
      line-height:1.65; overflow-x:hidden;
    }
    [id]{scroll-margin-top:90px}
    a{color:inherit;text-decoration:none}
    :focus{outline:2px dashed var(--brand); outline-offset:3px}
    .grid-bg::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
      linear-gradient(to right,var(--grid) 1px,transparent 1px) 0 0/40px 40px,
      linear-gradient(to bottom,var(--grid) 1px,transparent 1px) 0 0/40px 40px;}
    .noise::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".035"/></svg>');mix-blend-mode:overlay}

    .section{padding:100px 20px}
    .container{max-width:1200px;margin:auto}
    .glass{background:var(--glass);border:1px solid var(--border);border-radius:18px;backdrop-filter:blur(10px) saturate(140%);box-shadow:var(--shadow)}
    .btn{padding:12px 16px;border-radius:14px;border:1px solid transparent;cursor:pointer;font-weight:700}
    .btn-primary{background:radial-gradient(120% 120% at 10% 10%,var(--brand),var(--brand-2));color:#001a33;box-shadow:0 10px 30px rgba(63,180,255,.28)}
    .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
    .btn-ghost:hover{background:rgba(255,255,255,.08)}
    .tag{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;color:#001a33;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
    .muted{color:var(--muted)}
    .grid{display:grid;gap:20px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    .title{font-size:34px;margin:0 0 10px}

    /* Navbar */
    .navbar{position:sticky;top:0;z-index:50}
    .nav-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px}
    .nav-brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px}
    .nav-links{display:flex;gap:14px;align-items:center}
    
    /* AQUÍ ESTÁ LA CURA CONTRA EL ISLANDÉS */
.nav-links { 
  display: flex; 
  gap: 5px; /* Reducimos el espacio vacío entre botones */
  align-items: center; 
}
    .nav-links a{padding:10px 12px;border-radius:10px;color:var(--muted)}
    .nav-links a.active,.nav-links a:hover{background:rgba(255,255,255,.08);color:var(--text)}
    .menu-btn{display:none;background:transparent;border:1px solid var(--border);border-radius:12px;padding:8px}
    .navbar .glass{border-radius:20px;margin:12px auto;max-width:1220px}

    /* Hero */
    .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
    .hero h1{font-size:50px;line-height:1.08;margin:10px 0 12px}
    .lead{font-size:18px}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
    .kpi{border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center;background:rgba(255,255,255,.04)}
    .kpi .count {
  font-size: 2rem;    /* Más grande que el original */
  font-weight: bold;
  color: #00aaff;     /* Azul vibrante */
}
    

    /* === Lista de características + tooltip === */
    .features{display:grid;gap:12px; perspective:1000px;}
    .feature-card{
      display:flex;align-items:center;gap:12px;
      padding:14px 16px;border-radius:16px;border:1px solid var(--border);
      background:rgba(255,255,255,.05);
      transition:box-shadow .25s ease, transform .2s ease;
      cursor:pointer; transform-style:preserve-3d;
    }
    .feature-card:hover{box-shadow:0 14px 30px rgba(63,180,255,.28); transform:translateY(-1px)}
    .feature-card svg{width:20px;height:20px;color:#8fa2b8;transition:color .25s ease,transform .25s ease}
    .feature-card:hover svg{color:var(--brand);transform:translateX(2px)}
    .feature-card:focus{outline:none; box-shadow:0 0 0 2px var(--brand)}
    .feature-card { color: var(--text); }
    .feature-card span { color: var(--text); }          /* título */
    .feature-card .muted { color: var(--muted); }       /* por si usas subtítulo */

    /* Tooltip card */
    .feature-tip{
      position:fixed; z-index:70; pointer-events:none;
      max-width:320px; padding:16px; border-radius:16px;
      background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow);
      opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
    }
    .feature-tip.visible{opacity:1; transform:translateY(0)}
    .feature-tip::after{ /* flechita */
      content:""; position:absolute; width:12px; height:12px; transform:rotate(45deg);
      background:var(--glass); border-left:1px solid var(--border); border-top:1px solid var(--border);
      bottom:-6px; left:20px;
    }
    .feature-tip h4{margin:0 0 6px 0; font-size:16px}
    .feature-tip p{margin:0; color:var(--muted); font-size:14px}

    /* Limpieza de la sección de servicios */
#services .grid.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* LA CARD DEFINITIVA */
.card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #0b1220; /* Fondo sólido para evitar transparencias raras */
  overflow: hidden;
  isolation: isolate;
  min-height: 360px; /* Altura suficiente para que el footer no tape el texto */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(63, 180, 255, 0.4);
}

/* El fondo oscuro profundo */
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 30, 0.95), rgba(5, 10, 20, 0.98));
  z-index: -2;
}

/* El Glow que sigue al mouse */
.card::before {
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(400px at var(--mx, 50%) var(--my, 50%), var(--accent2, rgba(63, 180, 255, 0.15)), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card:hover::before { opacity: 1; }

/* El rayo de luz (Edge) */
.edge {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.05) 38%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.8s ease;
  z-index: 0;
}
.card:hover .edge { transform: translateX(120%); }

/* Contenedor de texto */
.card-inner {
  padding: 24px 24px 80px; /* Padding abajo para dejar espacio al footer */
  position: relative;
  z-index: 1;
}

.corner-icon {
  width: 40px; height: 40px;
  margin-bottom: 16px;
  display: grid; place-items: center;
  color: var(--brand);
}
.corner-icon svg { width: 32px; height: 32px; }

.card .title { font-size: 22px; margin-bottom: 12px; color: #fff; }
.card .desc { font-size: 14px; color: #94a3b8; line-height: 1.6; }

/* FOOTER Y LOGOS (Aquí estaba tu error) */
.card-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.badge {
  font-size: 11px;
  color: #94a3b8;
  display: flex; align-items: center; gap: 6px;
}
.b-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--brand)); }

.tech-row { display: flex; gap: 8px; }

.tech {
  width: 34px; 
  height: 34px;
  border-radius: 10px;
  
  /* FUERZA BRUTA: Quitamos el borde y el fondo */
  border: 1px solid transparent !important; 
  background: transparent !important;      
  
  display: grid; 
  place-items: center;
  transition: transform 0.2s ease, background 0.2s;
  cursor: pointer;
  position: relative;
  box-shadow: none !important; /* Por si tenías alguna sombra rara */
}

/* Solo aparece un ligero fondo al pasar el mouse para que el usuario no se sienta perdido */
.tech:hover {
  transform: translateY(-5px) scale(1.4);
  background: rgba(255, 255, 255, 0.1) !important; 
}
.tech img { 
  width: 18px; height: 18px; /* EVITA QUE SE DESBORDEN */
  object-fit: contain; 
}



    /* Tabla / logos / footer / reveal */
    table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden}
    th,td{border:1px solid var(--border);padding:12px;text-align:left}
    th{background:rgba(255,255,255,.06)}
    .logos{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
    .logo{display:grid;place-items:center;height:78px;border:1px dashed var(--border);border-radius:14px;color:var(--muted)}
    footer{padding:40px 20px;border-top:1px solid var(--border); background:#06070c;} /* footer negro */

    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;max-width:1200px;margin:auto}
    .reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
    .reveal.visible{opacity:1;transform:none}

    /* Responsive: nav */
    @media (max-width:1080px){
      .hero{grid-template-columns:1fr}
      .grid.cols-3{grid-template-columns:1fr 1fr}
      .logos{grid-template-columns:1fr 1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .menu-btn{display:inline-grid}
      .nav-links{display:none;position:absolute;right:20px;top:80px;background:var(--card);padding:10px;border:1px solid var(--border);border-radius:14px}
      .nav-links.open{display:flex;flex-direction:column}
    }
    @media (max-width:560px){ .grid.cols-3{grid-template-columns:1fr} .title{font-size:28px} .hero h1{font-size:36px} }
 
 /* ===== AGREGAR ESTO AL CSS ===== */
    
    /* 1. El contenedor donde vivirán los dots */
    #morph-container {
      width: 100%;
      height: 100%;       /* Ocupa todo el alto de su columna */
      min-height: 400px;  /* Altura mínima por seguridad */
      position: relative;
      border-radius: 18px; /* Mismo radio que tus clases .glass */
      overflow: hidden;

      transform: translateY(-50px);
    }
    #morph-container canvas {
      width: 100% !important;
      height: 100% !important;
      outline: none;
    }

    /* 2. Botón flotante del Admin (Engranaje) */
    #btnAdminToggle {
      position: fixed; bottom: 20px; left: 20px; z-index: 100;
      background: rgba(255,255,255,0.05); border: 1px solid var(--border);
      color: var(--muted); border-radius: 50%; width: 40px; height: 40px;
      cursor: pointer; display: grid; place-items: center; transition: 0.3s;
    }
    #btnAdminToggle:hover { background: var(--brand); color: #000; transform: rotate(90deg); }

    /* 3. El Modal de Configuración */
    dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
    #adminModal {
      background: var(--card); color: var(--text); border: 1px solid var(--border);
      border-radius: 18px; padding: 24px; width: min(400px, 90vw);
      box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    }
    #adminModal h3 { margin-top: 0; color: var(--brand); }
    .admin-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .admin-input { width: 100%; padding: 10px; margin-top: 5px; background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: #fff; border-radius: 8px; }
    .admin-row { display: flex; gap: 8px; margin-top: 10px; }


    .project-scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Esto hace que se detenga tarjeta por tarjeta */
  padding-bottom: 20px; /* Espacio para que no se corte la sombra */
  
  /* Ocultar barra de scroll fea pero permitir scroll */
  scrollbar-width: none; /* Firefox */
}
.project-scroller::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

.project-card {
  flex: 0 0 320px; /* Ancho fijo de cada tarjeta */
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(63,180,255,0.15); /* Brillo azul sutil */
  border-color: var(--brand);
}

.p-img {
  height: 180px;
  width: 100%;
  /* Aquí iría tu imagen real: background-image: url('tu-foto.jpg'); background-size: cover; */
}

.p-content {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-content h3 { margin: 5px 0 0 0; font-size: 20px; }
.p-content p { font-size: 14px; margin: 0; line-height: 1.4; }

/* Botón flotante de WhatsApp */
    .whatsapp-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;         /* A la derecha, donde pediste */
      z-index: 999;        /* Encima de casi todo */
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #25D366; /* Verde WhatsApp */
      display: grid;
      place-items: center;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .whatsapp-btn:hover {
      transform: scale(1.1) rotate(10deg); /* Efecto "hola mírame" */
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    }
    
    /* Pequeño ajuste para que no se vea feo en móviles si el icono es muy grande */
    .whatsapp-btn svg {
      fill: #fff; /* Icono blanco */
    }


/* Marca de agua minimalista (Versión "no estorbo") */
.fixed-watermark {
  position: fixed;
  bottom: 8px;         /* Casi besando el borde */
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  
  /* Estilo de texto */
  font-size: 10px;      /* Chiquito */
  color: var(--muted);  /* Color apagado para no molestar */
  opacity: 0.5;         /* Medio transparente, fantasmal */
  font-family: monospace; /* Un toque tech sutil (opcional) */
  
  /* Sin cajas ni fondos */
  background: transparent;
  padding: 0;
  border: none;
  
  pointer-events: none; /* Intocable */
  user-select: none;
}




html body .reveal, 
html body .glass, 
html body .card {
  opacity: 1 !important; /* ¡Obliga a mostrarse! */
  visibility: visible !important;
  transform: none !important;
}
/* =========================================
   ESTILO CARDS PREMIUM (Copia exacta de Index4)
   ========================================= */

/* Variables locales para las cards */
.card-premium {
  --c-bg-top: #0B1220;
  --c-bg-bot: #070B16;
  --strokeA: rgba(37,99,235,.70);
  --strokeB: rgba(96,165,250,.12);
  --strokeC: rgba(37,99,235,.22);
  --innerStroke: rgba(255,255,255,.06);
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --shadowHover: 0 26px 70px rgba(0,0,0,.70);
}

.card-premium {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 380px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  
  /* Fondo y Borde exactos del index4 */
  background:
    linear-gradient(180deg, var(--c-bg-top), var(--c-bg-bot)) padding-box,
    linear-gradient(135deg, var(--strokeA), var(--strokeB), var(--strokeC)) border-box;

  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  isolation: isolate;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Borde interno sutil */
.card-premium::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--innerStroke);
  pointer-events: none; z-index: 6;
}

/* Ruido (Noise) */
.cp-noise {
  position: absolute; inset: 0; 
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .02; pointer-events: none; z-index: 2;
}

/* Foco de luz (Spotlight) */
.cp-spot {
  position: absolute; inset: -2px; 
  background: radial-gradient(280px 220px at var(--mx, 40%) var(--my, 35%), rgba(96,165,250,.18), rgba(37,99,235,.08) 35%, transparent 65%);
  opacity: .55; transition: opacity .18s ease; pointer-events: none; z-index: 1;
}

.cp-indicator {
  position: absolute; top: 14px; right: 14px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--dot, #60A5FA);
  box-shadow: 0 0 0 6px var(--dotRing, rgba(96,165,250,.10));
  z-index: 7; opacity: .95;
}

/* Icono grande de esquina (Solo en la primera card) */
.cp-corner-icon {
  position: absolute; top: -34px; left: -34px;
  width: 150px; height: 150px; opacity: .10;
  filter: grayscale(1) contrast(1.05);
  transform: rotate(-10deg); pointer-events: none; z-index: 3;
  transition: transform .22s ease, opacity .22s ease;
}

/* Contenidos */
.cp-content {
  position: relative; z-index: 7; height: 100%;
  padding: 22px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.cp-title {
  margin: 0; text-align: center; font-size: 18px; line-height: 1.25;
  letter-spacing: .2px; color: #EAF0FF;
  min-height: calc(1.25em * 2); /* Altura fija para alineación */
}

.cp-desc {
  margin: 0; font-size: 13.8px; color: #9AA7C1; line-height: 1.6;
  min-height: calc(1.6em * 6); /* Altura fija para que todas sean iguales */
}

/* Footer de la card */
.cp-footer {
  margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.cp-line { height: 1px; background: rgba(255,255,255,.05); opacity: .75; flex: 1; }
.cp-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 160px; }

/* Chips (Iconos y texto) */
.logo-chip, .text-chip {
  height: 28px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  box-shadow: 0 12px 22px rgba(0,0,0,.25); backdrop-filter: blur(8px);
}
.logo-chip { width: 28px; }
.logo-chip svg { width: 18px; height: 18px; display: block; }

.text-chip {
  padding: 0 10px; color: rgba(234,240,255,.86);
  font-size: 11px; letter-spacing: .25px; user-select: none; white-space: nowrap;
}

/* Hover Effects */
.card-premium:hover { transform: translateY(-4px); box-shadow: var(--shadowHover); filter: saturate(1.05); }
.card-premium:hover .cp-spot { opacity: .75; }
.card-premium:hover .cp-corner-icon { transform: rotate(-7deg) translate(2px, 1px); opacity: .13; }

/* --- Estilos para el Carrusel de Aliados --- */
.aliados-section {
  padding: 80px 0;
  overflow: hidden;
  background: var(--bg);
}

.carousel-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bubble-zone {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.bubble {
  position: relative;
  background: var(--brand);
  color: #000;
  padding: 14px 28px;
  border-radius: 14px; /* Menos redondeado para estilo más moderno */
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(63, 180, 255, 0.4);
  text-align: center;
  max-width: 400px;
}

/* La flechita del globo */
.bubble::after {
  content: "";
  position: absolute;
  bottom: -8px; /* La mitad de la altura del triángulo */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: var(--brand);
  z-index: -1;
}

.bubble.show {
  opacity: 1;
  transform: translateY(0);
}

.track-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 40px 0;
}

.track {
  display: flex;
  gap: 60px;
  width: max-content;
  align-items: center;
}

.logo-item {
  width: 180px;
  flex-shrink: 0;
  filter: grayscale(1) opacity(0.5);
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
}

.logo-item.active {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}

.logo-item img {
  max-width: 100%;
  height: auto;
}

/* Difuminado en los bordes para que no se corte feo */
.fade-left, .fade-right {
  position: absolute;
  top: 0; bottom: 0; width: 15%; z-index: 2;
  pointer-events: none;
}
.fade-left { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.fade-right { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
 
 /* Añade esto a tus estilos de .track-wrap o .track */
.track-wrap {
  cursor: grab; /* Indica que se puede agarrar */
  user-select: none; /* Evita que seleccionen el texto de los logos como animales */
}

.track-wrap:active {
  cursor: grabbing; /* El cursor de "te tengo" */
}

/* === ABOUT BENTO GRID === */
.about-bento {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* Columna izq más ancha */
  grid-template-rows: auto auto;
  gap: 20px;
}

.bento-card {
  padding: 24px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.bento-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* Distribución del Grid */
.main-text {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  display: flex; flex-direction: column; justify-content: center;
}
.terminal-card {
  grid-row: 1 / 3; /* La terminal ocupa todo el alto derecho */
  grid-column: 2 / 3;
  background: #0e0e14 !important; /* Más oscuro para contraste */
  font-family: 'Fira Code', monospace;
  display: flex; flex-direction: column;
}
.stack-card {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

/* Responsive para móvil */
@media (max-width: 900px) {
  .about-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .terminal-card { grid-row: auto; grid-column: auto; min-height: 250px; }
}

/* Estilos de la Terminal */
.term-header {
  display: flex; gap: 8px; margin-bottom: 16px; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.term-title { margin-left: 10px; font-size: 12px; color: var(--muted); opacity: 0.6; }

.term-body { font-size: 13px; line-height: 1.8; }
.code-line { display: block; }
.c-green { color: #27c93f; }
.c-blue { color: var(--brand); }
.c-gray { color: var(--muted); }

/* Animación del cursor */
.anim-type::after {
  content: "|"; animation: blink 1s infinite;
}
@keyframes blink { 0%, 100% {opacity: 1;} 50% {opacity: 0;} }

/* Estilos del Stack Grid */
.stack-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.stack-icon {
  background: rgba(255,255,255,0.03);
  border-radius: 12px; padding: 10px;
  display: grid; place-items: center;
  transition: 0.2s; border: 1px solid transparent;
}
.stack-icon img { width: 28px; height: 28px; filter: grayscale(1); transition: 0.3s; }
.stack-icon:hover { background: rgba(255,255,255,0.08); border-color: var(--brand); }
.stack-icon:hover img { filter: grayscale(0); transform: scale(1.1); }

/* Bento Tags */
.bento-tags { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
 

/* Estilo de Card PRO de Netsmart */
.card-pro {
  grid-column: span 6;
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  min-height: 240px;
  transition: transform 0.2s ease;
  --mx: 50%; --my: 50%; /* Para el glow */
}

.card-pro:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}

/* El brillo que sigue al mouse */
.card-pro::before {
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(400px at var(--mx) var(--my), rgba(63, 180, 255, 0.15), transparent 60%);
  z-index: 0; opacity: 0;
  transition: opacity 0.3s;
}
.card-pro:hover::before { opacity: 1; }

.card-content {
  position: relative; z-index: 1; padding: 20px;
}

.card-pro-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

/* Badge estilizado */
.pro-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(63, 180, 255, 0.1);
  color: var(--brand);
  border: 1px solid rgba(63, 180, 255, 0.2);
}

/* El contenedor principal de la card con el nuevo degradado */
.card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow: hidden;
  isolation: isolate; /* Importante para que los brillos no se salgan */
  transition: transform 0.2s ease;
}

/* El fondo oscuro que da contraste */
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.95), rgba(6, 7, 12, 0.98));
  z-index: -2;
}

/* El Glow dinámico (el que sigue al mouse) */
.card::before {
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(400px at var(--mx) var(--my), var(--accent2), transparent 60%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::before { opacity: 1; }

/* El "Edge": ese rayo de luz que cruza la card al hacer hover */
.edge {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08) 38%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}
.card:hover .edge { transform: translateX(120%); }

.tech-row { display: flex; gap: 10px; align-items: center; }



/* El Tooltip Glassmorphism (usando el data-tip del HTML) */
.tech:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px); right: 0;
  width: 180px; padding: 10px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff; font-size: 11px;
  opacity: 1;
}

/* ===== REDISEÑO CHIP GITHUB STYLE ===== */

.about-chip-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* El "tablero" donde se montan los cables */
/* --- CONTENEDOR DE CIRCUITOS --- */
/* --- EL CHIP EN VERSIÓN "CHIN MÁS CHIQUITO" --- */
.chip-main-container {
  position: relative;
  /* Bajamos de 0.85 a 0.75 para ese toque sutil */
  --chip-zoom: 0.75; 
  
  /* Ajustamos el contenedor para que no flote en el limbo */
  height: calc(460px * var(--chip-zoom)); 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  
  /* Escalamos "todito" */
  transform: scale(var(--chip-zoom));
  transform-origin: center center;

  /* Margen negativo para que el texto de la derecha no parezca que te huye */
  margin-right: -40px; 
  margin-left: -40px;
}

/* --- REFINAMIENTO DE LAS OPCIONES --- */
/* --- REFINAMIENTO DE LAS OPCIONES --- */
.option {
  /* Al achicar el chip, podemos apretar un poco más el padding */
  padding: 6px 10px !important;
  margin-bottom: 4px;
}

.info strong {
  /* Evitamos que la fuente se vuelva ilegible al escalar */
  font-size: 0.95rem; 
}

/* Las líneas que irradian del chip */
/* --- LÍNEAS DE CIRCUITO (VERSIÓN PREDOMINANTE) --- */
/* --- LÍNEAS DE CIRCUITO CON "DINAMISMO" (LONGITUDES VARIABLES) --- */
.circuit-lines {
  position: absolute;
  inset: -100px; /* Expandimos el área para que las líneas "largas" tengan espacio */
  z-index: 1;
  pointer-events: none;
  
  /* Usamos dos capas de gradientes: una densa y corta, otra rala y larga */
  background:
    /* CAPA 1: Líneas base (las cortas y frecuentes) */
    repeating-linear-gradient(0deg, transparent 0, transparent 48px, rgba(139, 92, 246, 0.2) 48px, rgba(139, 92, 246, 0.2) 50px),
    repeating-linear-gradient(90deg, transparent 0, transparent 48px, rgba(139, 92, 246, 0.2) 48px, rgba(139, 92, 246, 0.2) 50px),
    
    /* CAPA 2: Líneas de acento (más brillantes y en posiciones diferentes para dar variedad) */
    repeating-linear-gradient(0deg, transparent 0, transparent 98px, rgba(236, 72, 153, 0.3) 98px, rgba(236, 72, 153, 0.3) 100px),
    repeating-linear-gradient(90deg, transparent 0, transparent 148px, rgba(236, 72, 153, 0.3) 148px, rgba(236, 72, 153, 0.3) 150px);

  /* LA MAGIA: Usamos una máscara elíptica y rugosa */
  -webkit-mask-image: 
    radial-gradient(ellipse 60% 40% at center, black 20%, transparent 60%), /* Máscara horizontal */
    radial-gradient(ellipse 30% 80% at center, black 10%, transparent 50%); /* Máscara vertical */
  
  -webkit-mask-composite: source-over; /* Mezclamos las máscaras para que no sea un círculo perfecto */
  mask-composite: add;
}

/* --- EL CHIP ESTILO GITHUB --- */
.github-chip {
  position: relative;
  z-index: 2;
  width: 340px;
  padding: 1px; /* Para el borde gradiente */
  border-radius: 24px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #f43f5e);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
}

.chip-inner {
  background: #0d1117; /* El negro profundo de GitHub */
  border-radius: 23px;
  padding: 24px;
}

.chip-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* FILAS DEL CHIP */
.chip-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
  cursor: pointer;
}

.chip-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.4);
}

.chip-row.active {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: inset 0 0 15px rgba(139, 92, 246, 0.1);
}

/* EL "RADIO BUTTON" ESTILIZADO */
.chip-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #30363d;
  flex-shrink: 0;
}

.active-dot {
  background: #f43f5e;
  border-color: #f43f5e;
  box-shadow: 0 0 10px #f43f5e;
}

/* TEXTOS INTERNOS */
.chip-info {
  display: flex;
  flex-direction: column;
}

.chip-label {
  font-size: 15px;
  font-weight: 600;
  color: #f0f6fc;
}

.chip-sub {
  font-size: 12px;
  color: #8b949e;
}

@keyframes flow {
  from { left: -100px; }
  to { left: 100%; }
}




        .circuit-grid {
            position: absolute; width: 100%; height: 100%;
            background-image: radial-gradient(circle at center, rgba(168, 85, 247, 0.03) 1px, transparent 1px);
            background-size: 40px 40px; z-index: -2;
        }

        .chip-wrapper {
            position: relative; width: 450px; height: 450px; padding: 3px;
            background: var(--neon-border); border-radius: 40px;
            box-shadow: 0 0 80px rgba(236, 72, 153, 0.25); z-index: 1;
        }

        /* --- EL NÚCLEO DE ENERGÍA --- */
/* --- EL NÚCLEO QUE RESPIRA --- */

/* --- EL NÚCLEO QUE RESPIRA (CORREGIDO) --- */
:root {
    --bg-dark: #09090b;
    --neon-border: linear-gradient(135deg, #79c9ff, #1f2038, #69238a);
    --inner-bg: #121214;
    --trace-color: rgba(168, 85, 247, 0.7);
    --trace-thickness: 3px;
    /* VARIABLES PARA EL GLOW */
    --glow-pink: rgba(236, 72, 153, 0.6);
    --glow-purple: rgba(168, 85, 247, 0.6);
}

.chip-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Un poco más grande para que asome con clase */
    width: 115%; 
    height: 115%;
    z-index: -1; 
    pointer-events: none;
    
    /* Animación de escala (suave) */
    animation: glowRespiracion 8s ease-in-out infinite;
}

/* Creamos dos capas: una Rosa y una Morada */
.chip-glow::before,
.chip-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    filter: blur(45px); /* Más desenfoque para evitar el "choque" visual */
    mix-blend-mode: screen;
    will-change: opacity;
}

/* CAPA ROSA */
.chip-glow::before {
    background: radial-gradient(circle closest-side, var(--glow-pink) 0%, transparent 80%);
    animation: fadeRosa 8s ease-in-out infinite;
}

/* CAPA MORADA */
.chip-glow::after {
    background: radial-gradient(circle closest-side, var(--glow-purple) 0%, transparent 80%);
    animation: fadeMorado 8s ease-in-out infinite;
}

/* --- LAS SECUENCIAS DE FUNDIDO --- */

@keyframes glowRespiracion {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes fadeRosa {
    0%, 100% { opacity: 0.8; } /* Empieza visible */
    50% { opacity: 0; }         /* Desaparece a mitad */
}

@keyframes fadeMorado {
    0%, 100% { opacity: 0; }   /* Empieza invisible */
    50% { opacity: 0.8; }       /* Aparece cuando la rosa se va */
}
/* --- LA SECUENCIA DE RESPIRACIÓN --- */


        /* --- LÓGICA DE CIRCUITOS: EL 60% SON ENANAS, EL RESTO AVENTURERAS --- */
        
        .trace-container {
            position: absolute; z-index: -1; pointer-events: none;
        }

        /* Mixin visual para las trazas de cada lado */
        .traces-top, .traces-bottom { left: 30px; right: 30px; height: 180px; }
        .traces-left, .traces-right { top: 30px; bottom: 30px; width: 180px; }

        /* --- TRAZAS CON CUERPO Y DESVANECIMIENTO --- */

.traces-top {
    bottom: 100%;
    height: 180px;
    background: none !important;
    position: absolute;
}

/* --- LA JEFA (Línea larga): Una sola pieza, sin cortes --- */
.traces-top::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100%; /* VA DE LADO A LADO SIN MIEDO */
    /* Dibuja una línea cada 180px */
    background-image: repeating-linear-gradient(90deg, 
        var(--trace-color) 0 var(--trace-thickness), 
        transparent var(--trace-thickness) 180px);
    
    /* Su propio desvanecimiento al final del camino */
    mask-image: linear-gradient(to top, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 20%, transparent 100%);
}

/* --- LA PLEBE (Líneas cortas): Esquiva a la jefa para no oscurecerla --- */
.traces-top::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%; /* Su altura bajita */
    
    /* EL TRUCO: Un gradiente de 180px que tiene 5 líneas y UN HUECO donde va la larga */
    background-image: 
        linear-gradient(90deg, 
            transparent 0 30px, 
            var(--trace-color) 30px calc(30px + var(--trace-thickness)), 
            transparent calc(30px + var(--trace-thickness)) 60px,
            var(--trace-color) 60px calc(60px + var(--trace-thickness)),
            transparent calc(60px + var(--trace-thickness)) 90px,
            var(--trace-color) 90px calc(90px + var(--trace-thickness)),
            transparent calc(90px + var(--trace-thickness)) 120px,
            var(--trace-color) 120px calc(120px + var(--trace-thickness)),
            transparent calc(120px + var(--trace-thickness)) 150px,
            var(--trace-color) 150px calc(150px + var(--trace-thickness)),
            transparent calc(150px + var(--trace-thickness)) 180px
        );
    background-size: 180px 100%; /* Repite este patrón de 5 líneas + hueco */

    /* Desvanecimiento corto para las pequeñas */
    mask-image: linear-gradient(to top, black 10%, transparent 95%);
    -webkit-mask-image: linear-gradient(to top, black 10%, transparent 95%);
}
.traces-bottom {
    top: 100%; height: 180px; left: 30px; right: 30px;
    position: absolute; background: none !important;
}

/* LA PLEBE (Corta): Con el hueco de 30px al inicio */
.traces-bottom::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
    background-image: linear-gradient(90deg, 
        transparent 0 30px, var(--trace-color) 30px calc(30px + var(--trace-thickness)), 
        transparent calc(30px + var(--trace-thickness)) 60px, var(--trace-color) 60px calc(60px + var(--trace-thickness)),
        transparent calc(60px + var(--trace-thickness)) 90px, var(--trace-color) 90px calc(90px + var(--trace-thickness)),
        transparent calc(90px + var(--trace-thickness)) 120px, var(--trace-color) 120px calc(120px + var(--trace-thickness)),
        transparent calc(120px + var(--trace-thickness)) 150px, var(--trace-color) 150px calc(150px + var(--trace-thickness)),
        transparent calc(150px + var(--trace-thickness)) 180px);
    background-size: 180px 100%;
    mask-image: linear-gradient(to bottom, black 10%, transparent 95%);
    -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 95%);
}

/* LA JEFA (Larga): Una sola pieza de 100% de altura */
.traces-bottom::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background-image: repeating-linear-gradient(90deg, var(--trace-color) 0 var(--trace-thickness), transparent var(--trace-thickness) 180px);
    mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}
/* --- LADO IZQUIERDO (TRACES-LEFT) --- */
.traces-left {
    right: 100%; width: 180px; top: 30px; bottom: 30px;
    position: absolute; background: none !important;
}

.traces-left::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 100%;
    background-image: repeating-linear-gradient(0deg, var(--trace-color) 0 var(--trace-thickness), transparent var(--trace-thickness) 180px);
    mask-image: linear-gradient(to left, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 20%, transparent 100%);
}

.traces-left::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40%;
    background-image: linear-gradient(0deg, 
        transparent 0 30px, 
        var(--trace-color) 30px calc(30px + var(--trace-thickness)), 
        transparent calc(30px + var(--trace-thickness)) 60px,
        var(--trace-color) 60px calc(60px + var(--trace-thickness)),
        transparent calc(60px + var(--trace-thickness)) 90px,
        var(--trace-color) 90px calc(90px + var(--trace-thickness)),
        transparent calc(90px + var(--trace-thickness)) 120px,
        var(--trace-color) 120px calc(120px + var(--trace-thickness)),
        transparent calc(120px + var(--trace-thickness)) 150px,
        var(--trace-color) 150px calc(150px + var(--trace-thickness)),
        transparent calc(150px + var(--trace-thickness)) 180px
    );
    background-size: 100% 180px;
    mask-image: linear-gradient(to left, black 10%, transparent 95%);
    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 95%);
}

/* --- LADO DERECHO (TRACES-RIGHT) --- */
.traces-right {
    left: 100%; width: 180px; top: 30px; bottom: 30px;
    position: absolute; background: none !important;
}

.traces-right::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
    background-image: repeating-linear-gradient(0deg, var(--trace-color) 0 var(--trace-thickness), transparent var(--trace-thickness) 180px);
    mask-image: linear-gradient(to right, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
}

.traces-right::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%;
    background-image: linear-gradient(0deg, 
        transparent 0 30px, 
        var(--trace-color) 30px calc(30px + var(--trace-thickness)), 
        transparent calc(30px + var(--trace-thickness)) 60px,
        var(--trace-color) 60px calc(60px + var(--trace-thickness)),
        transparent calc(60px + var(--trace-thickness)) 90px,
        var(--trace-color) 90px calc(90px + var(--trace-thickness)),
        transparent calc(90px + var(--trace-thickness)) 120px,
        var(--trace-color) 120px calc(120px + var(--trace-thickness)),
        transparent calc(120px + var(--trace-thickness)) 150px,
        var(--trace-color) 150px calc(150px + var(--trace-thickness)),
        transparent calc(150px + var(--trace-thickness)) 180px
    );
    background-size: 100% 180px;
    mask-image: linear-gradient(to right, black 10%, transparent 95%);
    -webkit-mask-image: linear-gradient(to right, black 10%, transparent 95%);
}
        /* --- RESTO DE FUNCIONES (INTOCABLES) --- */
        .inner-container {
            width: 100%; height: 100%; background: var(--inner-bg);
            border-radius: 37px; display: flex; justify-content: center; align-items: center;
        }
        .content-box {
    width: 85%; height: 85%;
    display: flex;
    flex-direction: column;
    /* Cambiamos space-between por center para que se agrupen */
    justify-content: center; 
    /* Les damos un respiro pequeño entre ellos */
    gap: 8px; 
    padding: 5px;
    background: none; /* Limpiamos gradientes viejos si estorban */
}
        /* --- OPCIONES INTERACTIVAS "CYBERPUNK" --- */

.option {
    background: #1a1a1e;
    border-radius: 12px;
    /* AQUÍ ESTÁ LA MAGIA: 16px arriba/abajo y 14px a los lados */
    padding: 16px 14px !important; 
    margin-bottom: 8px; /* Separación para que no se asfixien */
    display: flex;
    align-items: center;
    border: 1.5px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* --- ESTADO 1: HOVER (Cargando energía) --- */
.option:hover {
    /* Un fondo ligeramente más claro */
    background: #202024;
    /* El borde empieza a brillar con el rosa del tema */
    border-color: rgba(236, 72, 153, 0.4);
    /* Se levanta sutilmente y proyecta luz hacia abajo */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -5px rgba(236, 72, 153, 0.3);
}

/* Hacemos que el texto brille al pasar el mouse */
.option:hover .info strong {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* --- ESTADO 2: ACTIVE (El "Click" Físico) --- */
/* Esto ocurre justo en el momento que mantienes presionado el botón */
.option:active {
    /* Se hunde y se achica un poco para dar feedback táctil */
    transform: translateY(1px) scale(0.98);
    background: #18181b; /* Un destello más oscuro */
    border-color: rgba(236, 72, 153, 0.7);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /* Transición ultrarrápida para que se sienta "físico" */
    transition-duration: 0.05s;
}

/* --- ESTADO 3: SELECTED (Conectado al núcleo) --- */
.option.selected {
    /* Borde neón intenso */
    border-color: #ec4899;
    /* Fondo con un ligero degradado para darle profundidad */
    background: linear-gradient(145deg, #1a1a1e, #25252b);
    /* Doble sombra: una exterior expansiva y una interior para el "glow" */
    box-shadow: 
        0 0 25px -5px rgba(236, 72, 153, 0.5), /* Glow externo */
        inset 0 0 15px rgba(236, 72, 153, 0.2); /* Glow interno */
    /* Aseguramos que no se mueva si ya está seleccionado */
    transform: translateY(0);
}

/* --- ESTILOS DEL RADIO BUTTON --- */
.radio {
    width: 16px; height: 16px;
    border: 2px solid #52525b; /* Gris metálico apagado */
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s ease;
}

/* Cuando la opción está seleccionada, el radio se enciende */
.selected .radio {
    border-color: #ec4899;
    /* El borde del radio también emite luz */
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}

.selected .radio::after {
    content: ''; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    background: #ec4899; /* Núcleo rosa intenso */
    border-radius: 50%;
    /* El punto central parece un LED de alta potencia */
    box-shadow: 0 0 15px #ec4899, 0 0 5px #fff;
}

/* Textos */
.info strong { color: #e4e4e7; display: block; font-size: 0.85rem; transition: color 0.3s ease; }
.info span { color: #a1a1aa; font-size: 0.7rem; }
        

#about {
    padding-top: 140px; /* Le damos espacio suficiente al hero */
    margin-top: 40px;
}


/* --- Botón Intranet Exclusivo --- */
.nav-btn-intranet {
  background: radial-gradient(120% 120% at 10% 10%, var(--brand), var(--brand-2)) !important;
  color: #000000 !important;
  font-weight: 800;
  padding: 8px 15px !important; /* Un poco menos de padding horizontal */
  border-radius: 12px !important;
  margin-left: 5px;
  box-shadow: 0 4px 15px rgba(63, 180, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
  white-space: nowrap !important; /* Mantenlo en una sola línea */
}
/* El efecto al pasar el mouse: se levanta un poco y el brillo aumenta */
.nav-btn-intranet:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(63, 180, 255, 0.4);
  background: radial-gradient(120% 120% at 50% 50%, var(--brand-2), var(--brand)) !important;
  color: #000000 !important; /* Mantenemos el negro a la fuerza */

}
  /* --- Flechas laterales para Proyectos --- */
.gallery-wrapper {
  position: relative;
  width: 100%;
}

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Centrado vertical perfecto */
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-btn:hover {
  background: radial-gradient(120% 120% at 10% 10%, var(--brand), var(--brand-2));
  color: #000;
  border-color: transparent;
  transform: translateY(-50%) scale(1.1); /* Efecto pop */
}

/* Las tiramos un poco hacia afuera para que no tapen tanto la imagen */
.gallery-btn.left { left: -15px; }
.gallery-btn.right { right: -15px; }



/* =========================================================
   MODO CELULAR: EL SALVAVIDAS (Empezando desde cero)
========================================================= */
@media (max-width: 768px) {
    
    
    
  
  /* 1. Respiración artificial (Menos padding gigante) */
  .section {
    padding: 60px 15px !important;
  }

  /* 2. El Hero (Arriba del todo) */
  .hero {
    grid-template-columns: 1fr !important; /* De 2 columnas a 1 sola */
    text-align: center; /* Centramos el texto para que se vea elegante */
    gap: 30px;
  }
  .hero h1 {
    font-size: 36px !important; /* Achicamos los 50px originales */
  }
  /* Los botones del hero */
  .sticky-cta {
    justify-content: center !important;
    flex-direction: column;
    gap: 15px;
  }
  .sticky-cta a {
    width: 100%;
  }

  /* 3. La sección "Sobre Nosotros" y el Chip Gigante */
  .about-chip-layout {
    grid-template-columns: 1fr !important; /* De 2 columnas a 1 sola */
    gap: 40px !important;
    text-align: center;
  }
  /* Ese chip cibernético es muy ancho, lo achicamos a la fuerza */
  .chip-main-container {
    --chip-zoom: 0.55 !important; 
    height: 280px !important;
    margin-left: -10px !important; /* Evita que se salga de la pantalla */
    margin-right: -10px !important;
  }

  /* 4. Servicios y Contacto (Las cuadrículas de 2 pasan a 1) */
  .grid.cols-2,
  #contactForm .grid.cols-2 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 5. Galería de Proyectos */
  .gallery-btn {
    display: none !important; /* Ocultamos las flechas, en móvil la gente desliza con el dedo */
  }
  .project-card {
    flex: 0 0 85% !important; /* Para que se asome la siguiente tarjeta y sepan que hay más */
  }

  /* 6. El Footer (Pie de página) */
  .footer-grid {
    grid-template-columns: 1fr !important; /* De 4 columnas a 1 sola */
    text-align: center;
    gap: 30px;
  }
  .footer-grid img {
    margin: 0 auto 15px !important; /* Centramos tu logo */
  }

  /* 7. Arreglo rápido para los KPIs (Uptime, Proyectos...) */
  .kpis {
    grid-template-columns: 1fr 1fr 1fr !important; /* Los mantenemos en fila */
    gap: 10px;
  }
  .kpi .count {
    font-size: 1.5rem !important; /* Achicamos los números para que quepan */
  }
  
  /* 8. Domando al botón de WhatsApp asesino de pantallas */
  .whatsapp-btn {
    right: 15px !important; /* Lo despegamos un poco del borde peligroso */
    bottom: 15px !important;
    width: 50px !important; /* Lo hacemos un poco menos gordo */
    height: 50px !important;
  }
  
  /* Le quitamos el derecho a crecer y romper la pantalla cuando lo tocan */
  .whatsapp-btn:hover, 
  .whatsapp-btn:active, 
  .whatsapp-btn:focus {
    transform: none !important; 
    box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
  }
  
  
  
  /* 9. LA GUILLOTINA FINAL (Mata el scroll horizontal fantasma) */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

 /* 10. Curando al chip amputado (Le devolvemos sus extremidades) */
  .about-chip-layout,
  .chip-main-container {
    max-width: 100vw !important;
    overflow: visible !important; /* ¡Magia curativa! Dejamos que el neón brille sin cortarlo */
  }
  
  /* 11. Asegurando que la caja de los aliados no se desborde */
  .aliados-section {
    width: 100% !important;
    overflow: hidden !important;
  }
  
  
}


img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

/* --- TAMAÑO DE LAS BANDERAS --- */
.lang-link {
    font-size: 1.5rem; /* Aquí le damos el tamaño que merecen */
    text-decoration: none; /* Quitamos subrayados por si acaso */
    line-height: 1; /* Evitamos que empujen todo el menú hacia abajo */
    transition: transform 0.2s ease; /* Transición suave */
    display: inline-block;
}

/* Un pequeño efecto para que se agranden un poco más al pasar el mouse */
.lang-link:hover {
    transform: scale(1.2);
}

.service-fullscreen-modal {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--bg); /* <--- EL SALVAVIDAS RETINIANO */
  color: var(--text);
  overflow-y: auto; 
}

/* El fondo borroso de atrás (aunque tape toda la pantalla, es buena práctica) */
.service-fullscreen-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.modal-content-wrapper {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px 20px;
  position: relative;
}

.close-service-btn {
  position: absolute;
  top: 0;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s;
}

.close-service-btn:hover {
  color: var(--brand);
}

/* Para que las tarjetas del index parezcan clickeables */
#services .card {
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

#services .card:hover {
  transform: translateY(-5px);
  border-color: var(--brand);
}

/* --- EL MAMUT DEL TIMELINE (Dentro del modal) --- */
.timeline-wrapper {
  position: relative;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 20px 0 80px;
  font-family: 'Space Mono', monospace; /* Asegúrate de importar esta fuente en tu HTML si no la tienes */
}

.timeline-wrapper header {
  text-align: center;
  margin-bottom: 60px;
  animation: fadeDown 0.8s ease both;
}

.timeline-wrapper header .tag {
  font-size: 11px;
  letter-spacing: 4px;
  color: #00ffc8;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.timeline-wrapper header h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #00ffc8, #a78bfa, #ff3e6c);
  opacity: 0.4;
}

.step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-30px);
  animation: slideIn 0.5s ease forwards;
}

.step:nth-child(1) { animation-delay: 0.2s; }
.step:nth-child(2) { animation-delay: 0.35s; }
.step:nth-child(3) { animation-delay: 0.5s; }
.step:nth-child(4) { animation-delay: 0.65s; }
.step:nth-child(5) { animation-delay: 0.8s; }
.step:nth-child(6) { animation-delay: 0.95s; }
.step:nth-child(7) { animation-delay: 1.1s; }

.step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 58px;
}

.step-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--step-color, #00ffc8);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 var(--step-color, #00ffc8);
  z-index: 2;
}

.step:hover .step-icon,
.step.active .step-icon {
  background: var(--step-color, #00ffc8);
  box-shadow: 0 0 20px var(--step-color, #00ffc8);
  transform: scale(1.1);
}

.step-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--border);
}

.step:last-child .step-line {
  display: none;
}

.step-body {
  flex: 1;
  padding: 8px 0 32px;
}

.step-card {
  background: #111118;
  border: 1px solid var(--border);
  border-left: 3px solid var(--step-color, #00ffc8);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at left center, var(--glow-color, rgba(0,255,200,0.06)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.step:hover .step-card::before,
.step.active .step-card::before {
  opacity: 1;
}

.step:hover .step-card,
.step.active .step-card {
  border-color: var(--step-color, #00ffc8);
  transform: translateX(4px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.step-num {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--step-color, #00ffc8);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.step-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.step-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.step-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.step.active .step-detail {
  max-height: 300px;
}

.detail-inner {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.detail-inner .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag-pill {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--step-color, #00ffc8);
  color: var(--step-color, #00ffc8);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0,0,0,0.3);
}

.detail-inner ul {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}

.detail-inner ul li {
  font-size: 12px;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}

.detail-inner ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--step-color, #00ffc8);
}

.progress-bar-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: var(--border);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00ffc8, #a78bfa);
  width: 0%;
  transition: width 0.3s ease;
}

@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--step-color); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* --- ICONOS LUCIDE DENTRO DEL CÍRCULO DEL MAMUT --- */
.step-icon svg {
  width: 28px;
  height: 28px;
  color: inherit; /* Toma el color que le dé su contenedor */
}