/* CSS Documento */

BODY { margin:0;padding:0;
background-color:rgb(255,255,255);  
font : 12pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
text-align: center; 
} 
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:      #050608;
    --surface: #0c0d10;
    --border:  rgba(0,0,0,.07);
    --text:    #e8e6e0;
    --muted:   #4a4a52;
    --accent:  #9c9c9c;
    --accent2: #0066ff;
    --glow:    rgba(0,229,255,.12);
    --font-display: 'Syne', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
  }
    body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: -1;
  }
#encabezado{ 
font: 20pt Times ;
font-style: italic;
color:#000000;
text-align: center; 
width: 1024px; 
height: 150px;
background-color:white; 
margin: auto;
border: 0px; 
}
#logo{ 
font: 12pt Verdana;
color: white;
text-align: center; 
width: 150px; 
height: 70px;
background-color:white;
margin: auto;
border: 0px; 
float: left;
}

#principal{ 
font : 12pt Arial;
color:black;
text-align: center; 
width: 1024px; 
height:80px;
background-color:rgb(51,153,255);  
background-image: url('../media/aluminio.jpg');
margin: auto;
border:0px; 
}
#contenido{ 
font : 12pt Arial;
color:black;
text-align: center; 
width: 1040px; 
height:400px;
background-color:rgb(255,255,255);   
margin: auto;
border:0px; 
overflow:hidden;
}
#fijo{ 
width: 400px; 
height:400px;
float:left;
margin:auto;
}
#dinamico{ 
width: 640px; 
height:400px;
float:left;
}
  /* ── Partículas flotantes ── */
  .particles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  .particle {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    animation: float-up linear infinite;
  }
  @keyframes float-up {
    0%   { transform: translateY(100vh) translateX(0);   opacity: 0; }
    10%  { opacity: .6; }
    90%  { opacity: .2; }
    100% { transform: translateY(-10vh) translateX(40px); opacity: 0; }
  }
  /* ── Footer ── */
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fade-up .8s cubic-bezier(.16,1,.3,1) .6s both;
  }
  .footer-copy {
    font-size: .8rem;
    color: var(--muted);
    letter-spacing: .08em;
  }
  .footer-links {
    display: flex;
    gap: 1.5rem;
  }
  .footer-links a {
    font-size: .8rem;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .2s;
  }
  .footer-links a:hover { color: var(--accent); }