
    :root {
      color-scheme: dark;
      --fondo: #090414;
      --panel: #130c21;
      --azul: #65edff;
      --rosa: #ff65cf;
      --texto: #f5f2ff;
      --secundario: #c7bed5;
      --borde: #342343;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      background:
        radial-gradient(ellipse at top right, #25103955, transparent 60%),
        var(--fondo);
      color: var(--texto);
      font-family: Arial, Helvetica, sans-serif;
    }

    a {
      color: var(--azul);
    }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--azul);
      outline-offset: 5px;
    }

    .saltar {
      position: absolute;
      left: 16px;
      top: -100px;
      z-index: 20;
      padding: 12px;
      background: var(--panel);
    }

    .saltar:focus {
      top: 16px;
    }

    header {
      background: #10091df2;
      border-bottom: 1px solid var(--borde);
    }

    .barra {
      max-width: 1280px;
      margin: auto;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }

    .marca {
      display: block;
      flex-shrink: 0;
    }

    .marca img {
      display: block;
      width: 135px;
      height: auto;
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
    }

    nav a {
      padding: 12px 10px;
      border-radius: 8px;
      color: #e2daed;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.4;
      transition: background .2s, color .2s;
    }

    nav a:hover,
    nav a[aria-current="page"] {
      background: #251334;
      color: var(--azul);
      box-shadow: inset 0 -2px var(--rosa);
    }

    main {
      max-width: 1150px;
      min-height: 70vh;
      margin: auto;
      padding: 40px 24px 72px;
    }

    main:focus {
      outline: none;
    }

    h1 {
      margin: 16px 0 20px;
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1.15;
      letter-spacing: -1px;
      overflow-wrap: anywhere;
    }

    h2 {
      line-height: 1.4;
    }

    p {
      max-width: 760px;
      color: var(--secundario);
      line-height: 1.8;
    }

    .portada {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid #55336b;
      border-radius: 16px;
      background: #10091d;
      box-shadow: 0 0 40px #ff00b810;
    }

    .portada img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 62svh;
      object-fit: contain;
    }

    .presentacion {
      padding-top: 20px;
      text-align: center;
    }

    .presentacion h1 {
      font-family: Bahnschrift, "Trebuchet MS", Arial, sans-serif;
      font-size: clamp(20px, 2.6vw, 32px);
      font-weight: 700;
      font-style: oblique;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.3;
      color: var(--azul);
      text-shadow: 0 0 12px #65edff60, 0 0 28px #ff65cf45;
    }

    .presentacion p {
      margin: 12px auto;
    }

    .especialidades {
      color: var(--azul);
      font-size: 14px;
      letter-spacing: 1.5px;
    }

    .etiqueta {
      display: inline-block;
      color: var(--rosa);
      font-size: 12px;
      line-height: 1.6;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .encabezado-seccion {
      padding-top: 24px;
      margin-bottom: 32px;
    }

    .tarjetas {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 18px;
      padding: 0;
      margin: 32px 0 0;
      list-style: none;
    }

    .tarjeta {
      min-width: 0;
      padding: 26px;
      background: var(--panel);
      border: 1px solid var(--borde);
      border-radius: 12px;
    }

    .tarjeta h2 {
      margin: 0 0 12px;
      font-size: 19px;
      overflow-wrap: anywhere;
    }

    .tarjeta p {
      margin: 0;
      font-size: 15px;
    }

    .estado {
      display: inline-block;
      margin-top: 20px;
      padding: 6px 10px;
      border: 1px solid #65edff35;
      border-radius: 6px;
      color: var(--azul);
      font-size: 12px;
      line-height: 1.5;
    }

    .aviso {
      margin-top: 32px;
      padding: 16px 20px;
      border-left: 2px solid var(--rosa);
      font-size: 14px;
    }

    footer {
      padding: 24px;
      border-top: 1px solid var(--borde);
      color: #a89bb8;
      text-align: center;
      font-size: 13px;
      line-height: 1.8;
    }

    footer span {
      color: var(--rosa);
    }

    /* Investigación */
    #investigacion {
      position: relative;
      isolation: isolate;
      padding: 24px;
      border-radius: 18px;
      background: #090414;
    }

    #investigacion > .contenido-investigacion {
      position: relative;
      z-index: 1;
    }

    .grafo-fondo {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      border-radius: inherit;
      pointer-events: none;
    }

    .grafo-fondo svg {
      display: block;
      width: 100%;
      height: 100%;
      opacity: .6;
    }

    .grafo-lineas {
      fill: none;
      stroke: var(--azul);
      stroke-width: 1;
      opacity: .3;
    }

    .grafo-flujo {
      fill: none;
      stroke: var(--rosa);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 8 100;
      animation: flujo 22s linear infinite;
    }

    .grafo-flujo .azul {
      stroke: var(--azul);
    }

    .grafo-flujo .violeta {
      stroke: #b875ff;
    }

    .grafo-nodos {
      fill: var(--azul);
    }

    .grafo-nodos circle {
      transform-box: fill-box;
      transform-origin: center;
      animation: pulso 6s ease-in-out infinite;
    }

    .grafo-nodos circle:nth-child(3n) {
      fill: var(--rosa);
      animation-delay: -2s;
    }

    .grafo-nodos circle:nth-child(3n + 1) {
      animation-delay: -4s;
    }

    .grafo-ondas {
      fill: none;
      stroke: var(--rosa);
      stroke-width: 1;
    }

    .grafo-ondas circle {
      transform-box: fill-box;
      transform-origin: center;
      animation: onda 8s ease-out infinite;
    }

    .grafo-ondas circle:nth-child(2) {
      stroke: var(--azul);
      animation-delay: -3s;
    }

    .grafo-ondas circle:nth-child(3) {
      stroke: #b875ff;
      animation-delay: -5s;
    }

    #investigacion .encabezado-seccion {
      padding: 24px;
      background: #090414ed;
      border-radius: 12px;
      border: 1px solid #34234380;
    }

    #investigacion .aviso {
      background: #090414ed;
    }

    .publicaciones {
      display: grid;
      gap: 24px;
      margin-top: 28px;
      padding: 0;
      list-style: none;
    }

    .publicaciones .tarjeta {
      background: #130c21f5;
      border-left: 3px solid var(--azul);
    }

    .publicaciones .etiqueta {
      margin-bottom: 14px;
    }

    .publicaciones h2 {
      font-size: clamp(19px, 2.5vw, 24px);
    }

    .publicaciones p {
      max-width: none;
      margin: 12px 0;
    }

    .enlace-publicacion,
    .control-animacion {
      display: inline-block;
      padding: 10px 14px;
      border: 1px solid #65edff55;
      border-radius: 8px;
      background: #10091d;
      color: var(--azul);
      font: inherit;
      font-size: 14px;
      line-height: 1.5;
      text-decoration: none;
      cursor: pointer;
    }

    .enlace-publicacion {
      margin-top: 12px;
    }

    .enlace-publicacion:hover,
    .control-animacion:hover {
      background: #251334;
    }

    .acciones-investigacion {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    #investigacion.animacion-pausada .grafo-fondo * {
      animation-play-state: paused;
    }

    @keyframes flujo {
      to { stroke-dashoffset: -432; }
    }

    @keyframes pulso {
      0%, 100% {
        opacity: .4;
        transform: scale(.85);
      }
      50% {
        opacity: 1;
        transform: scale(1.2);
      }
    }

    @keyframes onda {
      0% {
        opacity: .7;
        transform: scale(.5);
      }
      100% {
        opacity: 0;
        transform: scale(2.5);
      }
    }

    @media (max-width: 950px) {
      .barra,
      nav {
        justify-content: center;
      }
    }

    @media (max-width: 600px) {
      .barra {
        padding: 12px 16px 18px;
        gap: 10px;
      }

      .marca img {
        width: 120px;
      }

      nav {
        width: 100%;
        gap: 4px;
      }

      nav a {
        padding: 10px 8px;
        font-size: 13px;
      }

      main {
        padding: 24px 16px 48px;
      }

      .portada {
        width: 100%;
        border-radius: 10px;
      }

      .especialidades {
        font-size: 12px;
        letter-spacing: .5px;
      }

      #investigacion {
        padding: 12px;
      }

      #investigacion .encabezado-seccion,
      .tarjeta {
        padding: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
      }

      .grafo-ondas,
      .control-animacion {
        display: none;
      }
    }
  

/* Electrónica: ilustración conceptual de PCB */
.electronica-presentacion{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.electronica-presentacion h2{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4}
.pcb-contacto{display:inline-block;margin-top:16px;padding:12px 18px;border:1px solid var(--azul);border-radius:8px;text-decoration:none}
.pcb-visual{margin:0;padding:18px;border:1px solid var(--borde);border-radius:20px;background:radial-gradient(ellipse at center,#12323a66,transparent 75%),var(--panel)}
.pcb-board{display:block;width:100%;height:auto;margin-top:12px}
.pcb-base{fill:#0b1822;stroke:#29444e;stroke-width:2}
.pcb-track{stroke:#65edff;stroke-width:2;opacity:.3}
.pcb-pulse{--destello:#65edff;stroke:var(--destello);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 92;animation:pcb-flow 5s linear infinite;filter:drop-shadow(0 0 5px var(--destello))}
.pcb-pulse-1{--destello:#ff3bd4;animation-delay:-1.7s;animation-duration:6s}
.pcb-pulse-2{--destello:#a3ff12;animation-delay:-3.2s;animation-duration:7s}
.pcb-pads{fill:#0b1822;stroke:#65edff;stroke-width:3}
.pcb-pins{fill:none;stroke:#ff65cf;stroke-width:4}
.pcb-chip{fill:#171027;stroke:#ff65cf;stroke-width:2}
.pcb-chip-label{fill:#f5f2ff;font:700 19px Arial,sans-serif;letter-spacing:3px}
.pcb-chip-sub{fill:#c7bed5;font:8px Arial,sans-serif;letter-spacing:1px}
.pcb-components{fill:#172d38;stroke:#67818c;stroke-width:2}
.pcb-visual figcaption{font-size:.8rem;color:var(--secundario);text-align:center;margin-top:12px}
.pcb-visual label{font-size:.85rem;cursor:pointer;color:var(--secundario)}
.pcb-pausa{accent-color:var(--azul);width:16px;height:16px;vertical-align:middle}
.pcb-pausa:checked~svg .pcb-pulse{animation-play-state:paused}
#electronica[hidden] .pcb-pulse{animation-play-state:paused}
@keyframes pcb-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(max-width:760px){.electronica-presentacion{grid-template-columns:1fr;gap:0}.pcb-visual{max-width:560px;width:100%;margin:auto}.pcb-visual .pcb-pulse-2{display:none}}
@media(prefers-reduced-motion:reduce){.pcb-pulse{animation:none;stroke-dasharray:none;opacity:.5}.pcb-pausa,.pcb-visual label{display:none}}

/* Colores de los servicios de electrónica */
#electronica .tarjetas .tarjeta:nth-child(1){--servicio-neon:#65edff}
#electronica .tarjetas .tarjeta:nth-child(2){--servicio-neon:#ff65cf}
#electronica .tarjetas .tarjeta:nth-child(3){--servicio-neon:#a3ff65}
#electronica .tarjetas .tarjeta:nth-child(4){--servicio-neon:#c6a0ff}
#electronica .tarjetas .tarjeta:nth-child(5){--servicio-neon:#ffd866}
#electronica .tarjetas .tarjeta h2{color:var(--servicio-neon);text-shadow:0 0 12px color-mix(in srgb,var(--servicio-neon) 35%,transparent)}

/* PCB como fondo de toda la sección */
#electronica{position:relative;isolation:isolate;padding:24px;border-radius:18px;background:#090414;overflow:hidden}
#electronica .pcb-visual{position:absolute;inset:0;z-index:-1;max-width:none;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:none;pointer-events:none;opacity:.55}
#electronica .pcb-board{width:100%;height:100%;margin:0}
#electronica .pcb-base{fill:none;stroke:none}
#electronica .pcb-chip-label,#electronica .pcb-chip-sub{display:none}
#electronica .electronica-presentacion{display:block;position:relative}
#electronica .encabezado-seccion{max-width:850px;background:#090414ed;padding:24px;border:1px solid #34234380;border-radius:12px}
#electronica .tarjeta{background:#130c21ed}
#electronica .aviso{background:#090414ed;padding:24px;border-radius:12px;margin-top:28px}
#electronica .pcb-control{font-size:.85rem;color:var(--secundario);cursor:pointer}
#electronica .pcb-pausa:checked~.pcb-visual .pcb-pulse{animation-play-state:paused}
@media(max-width:760px){#electronica{padding:16px}#electronica .encabezado-seccion,#electronica .aviso{padding:18px}}
@media(prefers-reduced-motion:reduce){#electronica .pcb-control{display:none}}

/* Integrado en el espacio libre junto a los servicios */
#electronica .pcb-visual .pcb-chip,#electronica .pcb-visual .pcb-pins{display:none}
#electronica .tarjetas{grid-template-columns:repeat(4,minmax(0,1fr))}
.pcb-chip-espacio{grid-column:span 3;display:flex;align-items:center;justify-content:center;min-width:0;pointer-events:none}
.pcb-chip-espacio svg{display:block;width:100%;max-width:580px;height:auto;filter:drop-shadow(0 0 10px #ff65cf25)}
.pcb-chip-conexiones{opacity:.35}
@media(max-width:1050px){#electronica .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}.pcb-chip-espacio{grid-column:span 1}}
@media(max-width:540px){#electronica .tarjetas{grid-template-columns:1fr}.pcb-chip-espacio{grid-column:1;max-height:190px}}
