:root{
    --color-primary: #31b2ff;
  }
  *{box-sizing:border-box}
  body,html{
    margin:0;
    height:100%;
    font-family: "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    background:#fff;
  }

  /* ===== CABECERA ===== */
  /* Hacer que la cabecera sea sticky (fija arriba) */
    .header {
        position: sticky !important;
        top: 0;
        z-index: 9999;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave para que resalte al bajar */
        background: #fff; /* Asegura que no sea transparente al hacer scroll */
    }
  header.header{
    width:100%;
    padding:14px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition: background 0.8s ease;
  }
  .header-left{ display:flex; align-items:center; gap:18px; }

  .logo-block{
    width:140px;
    height:44px;
    overflow:hidden;
    position:relative;
  }
  .logo-block img{
    position:absolute;
    left:50%;
    transform:translateX(-50%) translateY(100%);
    max-height:44px;
    max-width:100%;
    display:block;
  }
  .logo-slide{ animation: logoSlide 600ms ease forwards; }
  @keyframes logoSlide{
    0% { transform:translateX(-50%) translateY(100%); opacity:0; }
    60% { transform:translateX(-50%) translateY(-6%); opacity:1; }
    100%{ transform:translateX(-50%) translateY(0%); opacity:1; }
  }

  a.salir{
    color:var(--color-primary);
    text-decoration:underline;
    font-size:14px;
    transition: color .4s;
  }