/* =========================================
   CONFIGURACIÓN GENERAL
========================================= */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {

  min-height: 100vh;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  color: #333;


  /* FONDO FRUTIGER AERO */

  background:

    radial-gradient(
      circle at 20% 80%,
      rgba(126, 255, 235, 0.9),
      transparent 25%
    ),

    radial-gradient(
      circle at 85% 15%,
      rgba(62, 154, 255, 0.7),
      transparent 30%
    ),

    linear-gradient(
      to bottom,
      #0877c9 0%,
      #16aee9 55%,
      #96f3e2 100%
    );


  background-attachment: fixed;


  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 70px 20px;

}


/* =========================================
   VENTANA PRINCIPAL
========================================= */


.browser {
  position: relative;
  width: 850px;
  max-width: 100%;
  overflow: hidden;

  background: #ffffff;

  border: 1px solid rgba(30, 80, 100, 0.8);
  border-radius: 8px 8px 0 0;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 8px 30px rgba(0, 70, 120, 0.45);
}



/* =========================================
   PARTE SUPERIOR DE LA VENTANA
========================================= */

.browser-top {

  height: 34px;


  background:

    linear-gradient(
      to bottom,
      #d8f5ff,
      #95cce4
    );


  border-bottom:
    1px solid #6d9db1;


  position: relative;

}


/* BOTONES MINIMIZAR / MAXIMIZAR / CERRAR */

.window-buttons {

  position: absolute;

  right: 10px;

  top: 5px;

  display: flex;

  gap: 3px;

}


.window-buttons button {

  width: 38px;

  height: 22px;

  border:

    1px solid
    #7290a0;

  border-radius: 3px;


  background:

    linear-gradient(
      white,
      #bdd7e3
    );


  color: #445963;

  font-weight: bold;

  line-height: 16px;

}


.window-buttons .close {

  color: white;


  background:

    linear-gradient(
      #ff9f90,
      #d84435
    );


  border-color:
    #ab3d30;

}


/* =========================================
   BARRA DEL NAVEGADOR
========================================= */

.browser-bar {

  height: 48px;

  padding: 7px 10px;


  display: flex;

  align-items: center;

  gap: 7px;


  background:

    linear-gradient(
      to bottom,
      #e8f8ff,
      #c1deeb
    );


  border-bottom:
    1px solid #7396a8;

}


/* BOTÓN ATRÁS */

.back-button {

  width: 37px;

  height: 37px;

  border-radius: 50%;

  border:
    1px solid #1990ad;


  color: white;

  font-size: 25px;

  font-weight: bold;


  background:

    linear-gradient(
      #3bd4dc,
      #0393bd
    );


  box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,0.8),

    0 1px 2px
    rgba(0,0,0,0.2);

}


.forward-button {

  width: 29px;

  height: 29px;

  border-radius: 50%;

  border:
    1px solid #9eb0b8;


  background:

    linear-gradient(
      white,
      #c6d7dd
    );


  color: #8fa0a8;

  font-size: 18px;

}


/* =========================================
   BARRA DE DIRECCIÓN
========================================= */

.address-bar {

  flex: 1;

  height: 31px;

  padding:

    6px 12px;


  background: white;


  border:
    1px solid #8ba7b4;


  box-shadow:

    inset 0 1px 2px
    rgba(0,0,0,0.08);


  color: #6d7478;

  font-size: 13px;

  overflow: hidden;

  white-space: nowrap;

}


.browser-icon {

  border: 0;

  background: transparent;

  font-size: 21px;

  color: #657983;

  cursor: pointer;

}


/* =========================================
   CONTENIDO DE TU WEB
========================================= */


.website {
  min-height: 650px;
  padding: 22px 26px;
  background: #ffffff;
}



/* TÍTULO TEMPORAL */


/* =========================================
   BARRA INFERIOR
========================================= */

.taskbar {

  height: 41px;

  padding: 4px 10px;


  display: flex;

  align-items: center;

  gap: 10px;


  color: white;

  font-size: 12px;


  background:

    linear-gradient(
      to bottom,
      #42a8db,
      #0877b8
    );


  border-top:

    1px solid
    #78d2ef;

}


/* BOTÓN WINDOWS */

.start-button {

  width: 34px;

  height: 34px;


  border-radius: 50%;

  border:

    1px solid
    rgba(255,255,255,0.7);


  color: white;

  font-size: 21px;


  background:

    radial-gradient(
      circle at 40% 35%,
      #8ef39b,
      #21954b 38%,
      #0575aa 70%
    );


  box-shadow:

    0 0 5px
    rgba(255,255,255,0.7);

}/* =========================================
   PARTE 2
   DISTRIBUCIÓN INTERIOR DEL PERFIL
========================================= */


/* LAS TRES COLUMNAS */

.page-layout {

  display: grid;

  grid-template-columns:
    180px
    minmax(0, 1fr)
    175px;

  gap: 20px;

  align-items: start;

}


/* =========================================
   COLUMNA IZQUIERDA
========================================= */

.profile-column {

  text-align: center;

  font-size: 14px;

}


/* =========================================
   FOTO DE PERFIL
========================================= */

.profile-picture-frame {

  width: 160px;

  height: 160px;

  margin: 0 auto 12px;


  padding: 7px;


  border:

    1px solid
    #87ae81;


  border-radius: 15px;


  background:

    linear-gradient(
      to bottom,
      #e9ffe8,
      #94d684
    );


  box-shadow:

    inset 0 0 5px
    rgba(255,255,255,0.9),

    0 2px 3px
    rgba(0,0,0,0.18);

}


.profile-picture {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;


  border-radius: 10px;


  border:

    1px solid
    rgba(70,100,70,0.4);

}


/* =========================================
   NOMBRE
========================================= */

.profile-name {

  margin:

    5px
    0
    0;


  font-size: 28px;

  line-height: 1;

  color: #333;


  letter-spacing:

    -1px;


  text-shadow:

    1px 1px 0
    white;

}


/* USERNAME */

.profile-username {

  margin:

    3px
    0
    3px;


  color: #555;

  font-size: 14px;

}


/* =========================================
   INFORMACIÓN DEL PERFIL
========================================= */

.profile-info {

  margin:

    5px
    0
    9px;


  color: #6d6d6d;

  line-height: 1.35;

}


.profile-info p {

  margin: 0;

  text-align: center;

}


/* =========================================
   ESTADO ONLINE
========================================= */

.status-box {

  display: inline-flex;

  align-items: center;

  gap: 5px;


  margin:

    3px
    0
    11px;


  padding:

    3px
    8px;


  border:

    1px solid
    #85bc8c;


  background:

    linear-gradient(
      #f2fff2,
      #d5f1d5
    );


  color: #46784d;

  font-size: 11px;

}


.status-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;


  background:
    #62c76f;


  box-shadow:

    0 0 4px
    #5cef71;

}


/* =========================================
   BUSCADOR VIEJO
========================================= */

.fake-search {

  height: 35px;

  margin:

    0
    0
    8px;


  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;


  border:

    1px solid
    #9b9b9b;


  background:

    linear-gradient(
      white,
      #f4f4f4
    );


  color: #777;


  box-shadow:

    inset 0 1px 2px
    rgba(0,0,0,0.05);

}


.search-icon {

  font-size: 17px;

}


.search-text {

  font-family:
    Georgia,
    serif;

  font-size: 16px;

}


/* =========================================
   BOTONES / LINKS
========================================= */

.profile-links {

  border:

    1px solid
    #9d9d9d;

  background: white;

}


.profile-links a {

  display: block;

  padding:

    7px
    10px;


  text-align: left;


  color: #555;

  text-decoration: none;


  border-bottom:

    1px solid
    #b9b9b9;


  background:

    linear-gradient(
      to right,
      #ffffff,
      #fafafa
    );


  transition:

    0.15s;

}


.profile-links a:last-child {

  border-bottom: none;

}


/* CUANDO PASAS EL MOUSE */

.profile-links a:hover {

  padding-left: 15px;


  color: #147584;


  background:

    linear-gradient(
      to right,
      #dafcff,
      #ffffff
    );

}


/* =========================================
   MINI ICONOS
========================================= */

.mini-icons {

  margin-top: 10px;


  display: flex;

  justify-content: center;

  gap: 18px;

}


.mini-icons a {

  color: #727272;

  text-decoration: none;

  font-size: 19px;


  text-shadow:

    1px 1px 0
    white;

}


.mini-icons a:hover {

  color: #139db1;

}


/* =========================================
   VISITAS
========================================= */

.visitor-info {

  margin-top: 8px;

  font-size: 12px;

  color: #626262;

}


.visitor-info p {

  margin: 2px 0;

  text-align: center;

}


.visitor-info strong {

  color: #333;

}


/* =========================================
   MINI STAMP / MENSAJE
========================================= */

.profile-stamp {

  margin-top: 13px;

  padding:

    7px
    5px;


  border-top:

    1px dashed
    #8ec8ca;


  border-bottom:

    1px dashed
    #8ec8ca;


  color: #41848a;

  font-size: 10px;

  line-height: 1.3;

}


/* =========================================
   COLUMNAS PRINCIPALES
========================================= */

.main-column {

  min-width: 0;

}



.media-column {
  min-width: 0;
  font-family: Arial, sans-serif;
  font-size: 11px;
}



/* CAJAS TEMPORALES */


/* =========================================
   RESPONSIVE
   PARA PANTALLAS PEQUEÑAS
========================================= */

@media (max-width: 760px) {

  .page-layout {

    grid-template-columns:
      160px
      1fr;

  }


  .media-column {

    grid-column:
      1 / -1;

  }


  .profile-picture-frame {

    width: 145px;

    height: 145px;

  }

}


@media (max-width: 520px) {

  body {

    padding:

      20px
      5px;

  }


  .website {

    padding:

      15px;

  }


  .page-layout {

    display: block;

  }


  .profile-column {

    max-width: 200px;

    margin:

      0
      auto
      25px;

  }


  .main-column {

    margin-bottom: 20px;

  }

}/* =========================================================
   PARTE 3
   COLUMNA CENTRAL
   2000s + FRUTIGER AERO
========================================================= */


/* =========================================================
   BIENVENIDA SUPERIOR
========================================================= */

.welcome-strip {

  min-height: 27px;

  margin-bottom: 7px;

  padding: 4px 8px;

  overflow: hidden;

  text-align: center;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: bold;

  color: #34474c;

  border:

    1px solid
    #a6cdd1;

  background:

    linear-gradient(
      to bottom,
      #ffffff 0%,
      #efffff 45%,
      #bce7e9 100%
    );

  box-shadow:

    inset 0 1px 0
    white,

    0 1px 2px
    rgba(0, 80, 100, 0.15);

}


.kaomoji {

  color: #5f8f95;

  font-weight: normal;

}


.blink-star {

  color: #32b8c6;

  animation:

    twinkle
    1.2s
    infinite
    alternate;

}


@keyframes twinkle {

  from {

    opacity: 0.25;

    text-shadow:
      0 0 0
      transparent;

  }


  to {

    opacity: 1;

    text-shadow:

      0 0 6px
      #70f7ff;

  }

}



/* =========================================================
   BANNER FRUTIGER AERO
========================================================= */

.main-banner {

  position: relative;

  min-height: 150px;

  margin-bottom: 7px;

  overflow: hidden;

  border:

    1px solid
    #78adb8;


  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(255,255,255,0.95) 0,
      rgba(255,255,255,0.4) 8%,
      transparent 20%
    ),

    radial-gradient(
      circle at 18% 92%,
      rgba(83,244,189,0.95),
      transparent 31%
    ),

    radial-gradient(
      circle at 76% 85%,
      rgba(118,241,255,0.9),
      transparent 32%
    ),

    linear-gradient(
      to bottom,
      #63dfff 0%,
      #47cbe9 45%,
      #b8f4e0 74%,
      #87df85 100%
    );


  box-shadow:

    inset 0 0 18px
    rgba(255,255,255,0.75),

    inset 0 -10px 20px
    rgba(55,177,139,0.18);

}


/* EFECTO DE CRISTAL */

.banner-shine {

  position: absolute;

  top: 6px;

  left: 5%;

  width: 90%;

  height: 45%;

  border-radius: 50%;

  background:

    linear-gradient(
      to bottom,
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.08)
    );

  pointer-events: none;

}


/* TEXTO CENTRAL */

.banner-content {

  position: relative;

  z-index: 3;

  min-height: 150px;

  padding: 29px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: white;

  text-shadow:

    0 1px 1px
    rgba(0,70,100,0.7),

    0 0 5px
    rgba(0,130,160,0.4);

}


.banner-small {

  font-family:
    Georgia,
    serif;

  font-style: italic;

  font-size: 13px;

}


.banner-title {

  margin:

    2px
    0;

  font-size: 24px;

  font-weight: bold;

  letter-spacing:

    -1px;

}


.banner-subtitle {

  font-size: 11px;

  letter-spacing:

    1px;

}



/* =========================================================
   BURBUJAS
========================================================= */

.bubble {

  position: absolute;

  z-index: 2;

  display: block;

  border:

    1px solid
    rgba(255,255,255,0.8);

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0.18) 35%,
      rgba(87,216,243,0.12) 60%,
      rgba(255,255,255,0.35)
    );


  box-shadow:

    inset 0 0 5px
    rgba(255,255,255,0.9),

    0 1px 4px
    rgba(22,121,158,0.3);

}


.bubble-one {

  width: 36px;

  height: 36px;

  right: 25px;

  top: 22px;

}


.bubble-two {

  width: 19px;

  height: 19px;

  right: 69px;

  top: 72px;

}


.bubble-three {

  width: 26px;

  height: 26px;

  left: 24px;

  bottom: 18px;

}



/* =========================================================
   MARQUESINA
========================================================= */

.marquee-box {

  width: 100%;

  margin-bottom: 8px;

  overflow: hidden;

  border:

    1px solid
    #8daeb2;

  background:

    linear-gradient(
      #ffffff,
      #e5ffff
    );

  white-space: nowrap;

}


.marquee-content {

  display: inline-block;

  min-width: max-content;

  padding:

    4px
    0;


  color: #4d777c;

  font-size: 11px;


  animation:

    oldWebMarquee
    22s
    linear
    infinite;

}


@keyframes oldWebMarquee {

  from {

    transform:
      translateX(100%);

  }


  to {

    transform:
      translateX(-100%);

  }

}



/* =========================================================
   CAJAS AERO PRINCIPALES
========================================================= */

.aero-section {

  margin-bottom: 8px;

  border:

    1px solid
    #8baeb2;

  background:

    linear-gradient(
      to right,
      #ffffff,
      #faffff
    );

  box-shadow:

    1px 1px 2px
    rgba(0,0,0,0.08);

}


/* BARRA DE TÍTULO */

.aero-title {

  padding:

    4px
    8px;


  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;


  color: #315d62;

  font-size: 13px;

  font-weight: bold;

  text-align: center;


  border-bottom:

    1px solid
    #74aeb4;


  background:

    linear-gradient(
      to bottom,
      #f8ffff 0%,
      #d9ffff 23%,
      #a2e2e4 52%,
      #79cacc 54%,
      #b4eced 100%
    );


  text-shadow:

    0 1px 0
    white;


  box-shadow:

    inset 0 1px 0
    white;

}



/* VARIACIÓN ROSA */

.pink-title {

  color: #765a71;

  border-bottom-color:
    #c9a6c2;


  background:

    linear-gradient(
      to bottom,
      #fffaff,
      #ffeafa 24%,
      #efcde9 51%,
      #d8aed0 53%,
      #f5ddf0 100%
    );

}



/* VARIACIÓN VERDE */

.green-title {

  color: #4f7352;

  border-bottom-color:
    #9abd8f;


  background:

    linear-gradient(
      to bottom,
      #fbfff8,
      #ebffe3 24%,
      #cceebc 51%,
      #add598 53%,
      #ddf5d3 100%
    );

}



/* VARIACIÓN AZUL */

.blue-title {

  color: #456679;


  background:

    linear-gradient(
      to bottom,
      #ffffff,
      #eafaff 24%,
      #c7e7f4 51%,
      #9bcfe4 53%,
      #d9f2fa 100%
    );

}



/* =========================================================
   CONTENIDO DE LAS CAJAS
========================================================= */

.aero-content {

  padding:

    8px
    10px;

  color: #50585b;

  font-family:
    Arial,
    sans-serif;

  font-size: 12px;

  line-height: 1.35;

}


.aero-content p {

  margin:

    3px
    0
    7px;

  text-align: left;

}


.aero-content strong {

  color: #30373a;

}



/* =========================================================
   MINI NOTA
========================================================= */

.tiny-note {

  margin-top: 8px;

  padding:

    4px
    7px;

  text-align: center;

  font-size: 10px;

  color: #4b8a90;

  border:

    1px dashed
    #9bd3d5;

  background:
    #f2ffff;

}



/* =========================================================
   ABOUT ME.EXE
========================================================= */

.about-grid {

  padding:

    5px
    8px;

}


.about-row {

  display: grid;

  grid-template-columns:

    82px
    1fr;


  min-height: 25px;

  align-items: center;


  border-bottom:

    1px dotted
    #c8d8d9;

}


.about-row:last-child {

  border-bottom: none;

}


.about-label {

  padding-right: 7px;

  color: #517e84;

  font-size: 10px;

  font-weight: bold;

  text-transform: uppercase;

}


.about-value {

  padding-left: 7px;

  border-left:

    1px solid
    #d8e6e6;

}


.online-text {

  color: #3b9a4d;

  text-shadow:

    0 0 3px
    rgba(69,204,93,0.25);

}



/* =========================================================
   INTERESES COMO BOTONCITOS WEB 2.0
========================================================= */

.interest-cloud {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

}


.interest-cloud span {

  padding:

    3px
    7px;


  border:

    1px solid
    #9fc3c7;


  border-radius:
    9px;


  color: #4b6f73;

  font-size: 10px;


  background:

    linear-gradient(
      to bottom,
      white,
      #dff7f7
    );


  box-shadow:

    inset 0 1px 0
    white,

    0 1px 1px
    rgba(0,0,0,0.08);

}


.interest-cloud span:hover {

  color: #25899a;

  background:

    linear-gradient(
      #ffffff,
      #bcf9ff
    );

}



/* =========================================================
   MINI VENTANA DE ESTADO
========================================================= */

.mini-windows {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 7px;

  margin-bottom: 8px;

}


.mini-window {

  min-width: 0;

  overflow: hidden;

  border:

    1px solid
    #7e9da5;

  border-radius:

    3px
    3px
    0
    0;


  background:
    white;


  box-shadow:

    1px 1px 3px
    rgba(0,0,0,0.12);

}


.mini-window-title {

  min-height: 23px;

  padding:

    4px
    6px;


  display: flex;

  align-items: center;

  justify-content: space-between;


  color: #385861;

  font-size: 10px;

  font-weight: bold;


  background:

    linear-gradient(
      #effcff,
      #9fd0df
    );


  border-bottom:

    1px solid
    #7799a2;


  text-shadow:

    0 1px 0
    white;

}


.mini-window-title span {

  width: 15px;

  height: 15px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:

    1px solid
    #a8564c;

  border-radius:
    2px;


  color: white;

  font-size: 10px;


  background:

    linear-gradient(
      #ff9e92,
      #db5546
    );

}


.mini-window-content {

  min-height: 62px;

  padding:

    7px;


  display: flex;

  align-items: center;

  gap: 8px;


  color: #545e61;

  font-size: 10px;

}


.mini-window-content p {

  margin: 2px 0;

  text-align: left;

}


.status-content {

  background:

    linear-gradient(
      to bottom right,
      #ffffff,
      #f4fff0
    );

}


.big-status-icon {

  font-size: 34px;

  color: #76b94f;

  text-shadow:

    1px 1px
    white,

    0 0 3px
    #9bdd72;

}



/* =========================================================
   FAVORITOS
========================================================= */

.favorites-list p {

  margin:

    3px
    0;

  padding:

    2px
    0;


  border-bottom:

    1px dotted
    #d0dddd;

}


.favorites-list p:last-child {

  border-bottom: none;

}



/* =========================================================
   BADGES
========================================================= */

.badge-area {

  margin:

    9px
    0;


  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 4px;

}


.tiny-badge {

  width: 72px;

  min-height: 31px;

  padding:

    3px
    4px;


  display: flex;

  align-items: center;

  justify-content: center;


  text-align: center;

  font-family:
    Arial,
    sans-serif;

  font-size: 8px;

  font-weight: bold;


  color: #3d5760;


  border:

    1px solid
    #829aa1;


  background:

    linear-gradient(
      #ffffff 0%,
      #d3f2f6 50%,
      #9cd5dd 51%,
      #e7ffff 100%
    );


  box-shadow:

    inset 0 0 2px
    white;

}


.blue-badge {

  color: #315c86;

  background:

    linear-gradient(
      #ffffff,
      #d4ecff 50%,
      #9bcaf1 51%,
      #e2f3ff
    );

}


.green-badge {

  color: #427145;

  background:

    linear-gradient(
      #ffffff,
      #e7ffd8 50%,
      #acd98e 51%,
      #eeffe6
    );

}


.pink-badge {

  color: #865b78;

  background:

    linear-gradient(
      #ffffff,
      #ffe4f5 50%,
      #e5b4d4 51%,
      #fff0f9
    );

}



/* =========================================================
   ÚLTIMA ACTUALIZACIÓN
========================================================= */

.last-update {

  margin-top: 8px;

  padding:

    5px;


  text-align: center;


  color: #769397;

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;


  border-top:

    1px dotted
    #b7cecf;

}


.last-update span {

  color: #6ecfc1;

}



/* =========================================================
   EFECTO GENERAL EN LOS LINKS
========================================================= */

.main-column a {

  color: #278da1;

}


.main-column a:hover {

  color: #e984b5;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {

  .mini-windows {

    grid-template-columns:
      1fr;

  }

}


@media (max-width: 520px) {

  .main-column {

    width: 100%;

  }


  .banner-title {

    font-size: 20px;

  }


  .main-banner {

    min-height: 130px;

  }


  .banner-content {

    min-height: 130px;

  }

}/* =========================================================
   PARTE 4
   COLUMNA DERECHA
   MY MEDIA + WINDOWS MEDIA PLAYER
========================================================= */


/* =========================================================
   COLUMNA DERECHA
========================================================= */


/* =========================================================
   CARPETITAS WINDOWS
========================================================= */

.folder-area {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 4px;

  margin-bottom: 8px;

}


.folder-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;


  color: #52656a;

  font-size: 9px;

  text-decoration: none;

}


.folder-icon {

  position: relative;

  width: 44px;

  height: 35px;


  display: flex;

  align-items: center;

  justify-content: center;


  color: #238bc2;

  font-size: 15px;


  border:

    1px solid
    #c59a25;


  border-radius:

    2px
    3px
    3px
    3px;


  background:

    linear-gradient(
      to bottom,
      #fff6a4 0%,
      #f9cf4f 45%,
      #eab82a 100%
    );


  box-shadow:

    inset 2px 2px 2px
    rgba(255,255,255,0.7),

    1px 2px 2px
    rgba(0,0,0,0.15);

}


.folder-icon::after {

  content: "";

  position: absolute;

  inset:

    5px
    3px
    3px;


  border:

    1px solid
    rgba(255,255,255,0.45);


  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,0.35),
      transparent
    );

}


.folder-tab {

  position: absolute;

  top: -5px;

  left: 4px;


  width: 20px;

  height: 7px;


  border:

    1px solid
    #c59a25;


  border-bottom: none;


  border-radius:

    3px
    3px
    0
    0;


  background:

    #fbe16e;

}


.folder-item:hover
.folder-icon {

  filter:
    brightness(1.08);

  transform:
    translateY(-1px);

}


.folder-name {

  text-shadow:
    1px 1px 0
    white;

}



/* =========================================================
   WIDGETS
========================================================= */

.side-widget {

  margin-bottom: 8px;

  overflow: hidden;

  border:

    1px solid
    #8ea4a9;

  background:
    white;


  box-shadow:

    1px 1px 2px
    rgba(0,0,0,0.12);

}



/* =========================================================
   TÍTULOS
========================================================= */

.side-title {

  padding:

    4px
    6px;


  text-align: center;

  font-size: 12px;

  color: #426069;


  border-bottom:

    1px solid
    #91aaad;


  text-shadow:

    0 1px 0
    white;


  box-shadow:

    inset 0 1px 0
    white;

}


/* VERDE */

.green-side-title {

  color:
    #426745;


  background:

    linear-gradient(
      to bottom,
      #fbfff8 0%,
      #e8ffdb 30%,
      #bde39b 51%,
      #91cb70 53%,
      #d9f3c5 100%
    );

}


/* AZUL */

.blue-side-title {

  background:

    linear-gradient(
      to bottom,
      #ffffff 0%,
      #e5faff 30%,
      #b9e5f2 51%,
      #8fc8dc 53%,
      #d6f1f8 100%
    );

}


/* ROSA */

.pink-side-title {

  color:
    #77596f;


  background:

    linear-gradient(
      to bottom,
      #ffffff,
      #ffe9f7 30%,
      #efc9e1 51%,
      #dda7c9 53%,
      #f7e0ef 100%
    );

}



/* =========================================================
   GALERÍA
========================================================= */

.media-gallery {

  padding: 5px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 4px;


  background:

    linear-gradient(
      to bottom,
      #ffffff,
      #f6ffff
    );

}


.media-thumb {

  position: relative;

  aspect-ratio:
    1 / 0.85;

  overflow: hidden;

  cursor: pointer;


  border:

    1px solid
    #719fa9;


  box-shadow:

    inset 0 0 3px
    rgba(255,255,255,0.7);


  background-position:
    center;

  background-size:
    cover;


  transition:
    transform 0.12s;
}


.media-thumb:hover {

  transform:
    scale(1.04);

  z-index: 2;

}


.media-thumb::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 35%;


  background:

    linear-gradient(
      to bottom,
      rgba(255,255,255,0.45),
      transparent
    );

}



/* =========================================================
   MINI IMÁGENES
   Si subes tus imágenes, aparecerán automáticamente.
========================================================= */

.media-one {

  background-image:

    url("images/media1.jpg"),

    linear-gradient(
      150deg,
      #69dbff,
      #dcffff 45%,
      #76df63 46%,
      #b7f584
    );

}


.media-two {

  background-image:

    url("images/media2.jpg"),

    radial-gradient(
      circle at 70% 30%,
      white,
      transparent 18%
    ),

    linear-gradient(
      140deg,
      #2caee4,
      #76e2fa,
      #eefaff
    );

}


.media-three {

  background-image:

    url("images/media3.jpg"),

    radial-gradient(
      circle at center,
      white,
      transparent 25%
    ),

    linear-gradient(
      135deg,
      #7ff5ea,
      #2ab7db,
      #fff
    );

}


.media-four {

  background-image:

    url("images/media4.jpg"),

    radial-gradient(
      circle at 60% 40%,
      #eaffff,
      transparent 23%
    ),

    linear-gradient(
      #4fd2ee,
      #8eece1 62%,
      #77dc71 63%
    );

}



/* =========================================================
   NOW PLAYING
========================================================= */

.now-playing-text {

  padding:

    6px
    5px;


  display: flex;

  flex-direction: column;

  align-items: center;


  color: #565f62;

  text-align: center;

  line-height: 1.25;

}


.now-playing-text span {

  color: #6a777a;

  font-family:
    Georgia,
    serif;

  font-size: 11px;

}


.now-playing-text strong {

  color: #354f61;

  font-size: 11px;

}


.now-playing-text small {

  color: #829095;

  font-size: 9px;

}



/* =========================================================
   CARÁTULA DE ÁLBUM
========================================================= */

.album-cover {

  position: relative;

  height: 145px;

  margin:

    0
    5px
    5px;


  overflow: hidden;


  border:

    1px solid
    #92a7aa;


  background-image:

    url("images/album.jpg"),

    radial-gradient(
      circle at 74% 20%,
      rgba(255,255,255,0.95),
      transparent 22%
    ),

    radial-gradient(
      circle at 30% 75%,
      #9bf185,
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #4ed5eb,
      #bff9f0 58%,
      #6dcc72
    );


  background-position:
    center;

  background-size:
    cover;


  box-shadow:

    inset 0 0 12px
    rgba(255,255,255,0.75);

}


.album-gloss {

  position: absolute;

  top: -20px;

  left: -10%;


  width: 120%;

  height: 70px;


  border-radius:
    50%;


  background:

    rgba(255,255,255,0.32);


  transform:
    rotate(-5deg);

}


.album-text {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 10px;


  display: flex;

  flex-direction: column;

  align-items: center;


  color:
    white;


  text-align: center;


  text-shadow:

    0 1px 2px
    rgba(0,80,110,0.8);

}


.album-text span {

  font-size: 25px;

}


.album-text strong {

  font-family:
    Georgia,
    serif;

  font-size: 16px;

  letter-spacing:
    2px;

}



/* =========================================================
   REPRODUCTOR VISUAL
========================================================= */

.media-player {

  margin:

    0
    5px
    6px;


  overflow: hidden;


  border:

    1px solid
    #7f9faa;


  border-radius:
    2px;


  background:

    linear-gradient(
      to bottom,
      #eaf8fc,
      #b8dce7
    );


  box-shadow:

    inset 0 1px 1px
    white,

    0 1px 2px
    rgba(0,0,0,0.15);

}



/* PANTALLITA */

.player-screen {

  min-height: 31px;

  padding:

    4px
    5px;


  display: flex;

  align-items: center;

  justify-content: space-between;


  border-bottom:

    1px solid
    #91abb4;


  color:
    #42727e;


  background:

    linear-gradient(
      to bottom,
      #f8ffff,
      #d9f3f7
    );

}


.player-song-info {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 4px;

}


.player-song {

  max-width:
    78px;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;


  font-size:
    8px;

}


.player-time {

  font-family:
    "Courier New",
    monospace;

  font-size:
    8px;

}



/* =========================================================
   ECUALIZADOR ANIMADO
========================================================= */

.equalizer {

  height: 12px;

  display: flex;

  align-items: flex-end;

  gap: 1px;

}


.equalizer i {

  display: block;

  width: 2px;

  background:
    #43b9ce;


  animation:

    equalizerMove
    0.7s
    infinite
    alternate;

}


.equalizer i:nth-child(1) {

  height: 4px;

}


.equalizer i:nth-child(2) {

  height: 9px;

  animation-delay:
    0.2s;

}


.equalizer i:nth-child(3) {

  height: 6px;

  animation-delay:
    0.35s;

}


.equalizer i:nth-child(4) {

  height: 11px;

  animation-delay:
    0.1s;

}


@keyframes equalizerMove {

  from {

    transform:
      scaleY(0.45);

  }

  to {

    transform:
      scaleY(1);

  }

}



/* =========================================================
   BARRA DE PROGRESO
========================================================= */


/* =========================================================
   CONTROLES DEL PLAYER
========================================================= */

.player-controls {

  padding:

    3px
    3px
    4px;


  display: flex;

  justify-content: center;

  align-items: center;

  gap: 2px;

}


.player-controls button {

  width:
    25px;

  height:
    20px;


  padding: 0;


  border:

    1px solid
    #7e9da7;


  border-radius:
    3px;


  color:
    #417a8b;


  font-size:
    8px;


  background:

    linear-gradient(
      to bottom,
      #ffffff,
      #c9e3ea
    );


  box-shadow:

    inset 0 1px 0
    white;


  cursor:
    pointer;

}


.player-controls button:hover {

  background:

    linear-gradient(
      #ffffff,
      #aeeaf3
    );

}


.player-controls button:active {

  transform:
    translateY(1px);

}


.player-controls
.play-button {

  width:
    30px;

  height:
    25px;


  border-radius:
    50%;


  color:
    white;


  font-size:
    10px;


  border-color:
    #328ea8;


  background:

    radial-gradient(
      circle at 35% 30%,
      #8cf5ff,
      #3eb8d2 45%,
      #1886ad
    );


  box-shadow:

    inset 0 1px 2px
    rgba(255,255,255,0.8),

    0 1px 2px
    rgba(0,0,0,0.2);

}



/* =========================================================
   PARTE INFERIOR DEL PLAYER
========================================================= */

.player-bottom {

  min-height:
    20px;


  padding:

    3px
    6px;


  display: flex;

  align-items: center;

  gap: 4px;


  border-top:

    1px solid
    #98b3bc;


  background:

    rgba(255,255,255,0.34);

}


.speaker {

  font-size:
    9px;

}


.player-dot {

  color:
    #42a4bc;

  font-size:
    7px;

}



/* =========================================================
   INTERNET WIDGET
========================================================= */

.internet-widget {

  padding:
    7px;


  display: flex;

  align-items: center;

  gap: 7px;


  background:

    linear-gradient(
      135deg,
      #ffffff,
      #edffff
    );

}


.internet-orb {

  flex:

    0
    0
    45px;


  width:
    45px;

  height:
    45px;


  display: flex;

  align-items: center;

  justify-content: center;


  border-radius:
    50%;


  color:
    white;


  font-size:
    9px;

  font-weight:
    bold;


  border:

    1px solid
    #5daab9;


  background:

    radial-gradient(
      circle at 30% 25%,
      #ffffff,
      #65e7ee 20%,
      #229bc7 55%,
      #3dbf9d 72%,
      #67ce71
    );


  box-shadow:

    inset 0 0 7px
    rgba(255,255,255,0.8),

    0 0 4px
    rgba(46,190,218,0.4);


  animation:

    orbGlow
    2s
    infinite
    alternate;

}


@keyframes orbGlow {

  from {

    box-shadow:

      inset 0 0 7px
      rgba(255,255,255,0.8),

      0 0 2px
      rgba(46,190,218,0.3);

  }


  to {

    box-shadow:

      inset 0 0 9px
      white,

      0 0 9px
      rgba(46,190,218,0.75);

  }

}


.internet-info {

  min-width:
    0;


  display: flex;

  flex-direction: column;


  color:
    #637578;


  font-size:
    9px;

}


.internet-info strong {

  color:
    #3e8c5d;

  font-size:
    10px;

}


.internet-info small {

  color:
    #8ba2a3;

  font-size:
    8px;

}



/* =========================================================
   QUICK LINKS
========================================================= */

.quick-links {

  padding:
    4px;


  background:

    linear-gradient(
      to bottom,
      #ffffff,
      #fffafd
    );

}


.quick-links a {

  display: block;

  padding:

    4px
    6px;


  color:
    #6f6a76;


  font-size:
    10px;

  text-decoration:
    none;


  border-bottom:

    1px dotted
    #d4c4d0;

}


.quick-links a:last-child {

  border-bottom:
    none;

}


.quick-links a:hover {

  padding-left:
    10px;


  color:
    #c6669a;


  background:
    #fff0fa;

}



/* =========================================================
   FOOTER DERECHO
========================================================= */

.side-footer {

  margin-top:
    8px;


  padding:
    7px;


  text-align:
    center;


  color:
    #91a1a3;


  font-family:
    "Courier New",
    monospace;


  font-size:
    8px;


  line-height:
    1.4;


  border-top:

    1px dotted
    #b7cacc;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {

  .media-column {

    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 8px;

  }


  .folder-area,
  .side-footer {

    grid-column:
      1 / -1;

  }


  .side-widget {

    margin-bottom:
      0;

  }

}


@media (max-width: 520px) {

  .media-column {

    display:
      block;

  }


  .side-widget {

    margin-bottom:
      8px;

  }

}/* =========================================================
   PARTE 6
   REPRODUCTOR FALSO INTERACTIVO
========================================================= */


.fake-player {

  position: relative;

}


/* =========================================================
   BARRA DE PROGRESO
========================================================= */

.fake-progress-bar {

  position: relative;

  height: 10px;

  margin:

    6px
    8px;


  overflow: visible;

  cursor: pointer;


  border:

    1px solid
    #839da5;


  background:

    linear-gradient(
      to bottom,
      #bbcbd0,
      #faffff
    );


  box-shadow:

    inset 0 1px 2px
    rgba(0,0,0,0.18);

}


.fake-progress-fill {

  position: relative;

  width: 0%;

  height: 100%;


  background:

    linear-gradient(
      to bottom,
      #b6f9ff 0%,
      #57d3e6 45%,
      #25a9c7 55%,
      #91eef0 100%
    );

}


.fake-progress-knob {

  position: absolute;

  right: -4px;

  top: -3px;


  width: 8px;

  height: 14px;


  border:

    1px solid
    #638895;


  border-radius: 2px;


  background:

    linear-gradient(
      to right,
      #eaffff,
      #ffffff,
      #aad6e0
    );


  box-shadow:

    0 1px 2px
    rgba(0,0,0,0.2);

}



/* =========================================================
   VOLUMEN DECORATIVO
========================================================= */

.fake-volume {

  flex: 1;

  height: 6px;

  overflow: hidden;


  border:

    1px solid
    #859da5;


  background:

    linear-gradient(
      #cad8db,
      white
    );

}


.fake-volume-fill {

  width: 72%;

  height: 100%;


  background:

    linear-gradient(
      to right,
      #4dc6e0,
      #82e394,
      #c0ee73
    );

}



/* =========================================================
   ECUALIZADOR
========================================================= */

.equalizer.paused i {

  animation-play-state:
    paused;

  transform:
    scaleY(0.25);

}


/* =========================================================
   MENSAJITO DEL PLAYER
========================================================= */

.fake-player-note {

  padding:

    2px
    5px
    4px;


  text-align: center;


  color:
    #91a6aa;


  font-family:
    "Courier New",
    monospace;


  font-size:
    7px;

}



/* =========================================================
   PLAYER CUANDO ESTÁ "REPRODUCIENDO"
========================================================= */

.fake-player.is-playing {

  box-shadow:

    0 0 5px
    rgba(67, 199, 221, 0.35);

}/* =========================================================
   MENÚ INICIO WINDOWS
========================================================= */


.start-menu {

  position: absolute;

  z-index: 100;

  left: 5px;

  bottom: 41px;


  width: 260px;


  display: none;


  overflow: hidden;


  border:

    1px solid
    #406f93;


  border-radius:

    7px
    7px
    0
    0;


  background:
    white;


  box-shadow:

    3px -3px 12px
    rgba(0, 50, 90, 0.35);

}


.start-menu.open {

  display: block;

}


/* USUARIO */

.start-menu-user {

  min-height: 56px;

  padding:

    7px
    10px;


  display: flex;

  align-items: center;

  gap: 9px;


  color: white;


  text-shadow:

    0 1px 2px
    #125887;


  background:

    linear-gradient(
      to bottom,
      #64c8f3,
      #2583c7
    );


  border-bottom:

    1px solid
    #23618b;

}


.start-avatar {

  width: 42px;

  height: 42px;


  display: flex;

  align-items: center;

  justify-content: center;


  border:

    2px solid
    white;


  border-radius:
    6px;


  color:
    #278fb2;


  font-size:
    22px;


  background:

    linear-gradient(
      135deg,
      #f4ffff,
      #9aeacb
    );


  box-shadow:

    0 1px 3px
    rgba(0,0,0,0.25);

}



/* CONTENIDO */

.start-menu-body {

  padding:

    6px
    0;


  background:

    linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 68%,
      #e3f4ff 69%,
      #f2f9ff 100%
    );

}


.start-menu-body a {

  display: block;


  padding:

    7px
    12px;


  color:
    #344c59;


  font-size:
    12px;


  text-decoration: none;

}


.start-menu-body a:hover {

  color: white;


  background:

    linear-gradient(
      to bottom,
      #65d0f0,
      #248dcc
    );

}


.start-divider {

  height: 1px;

  margin:

    4px
    10px;


  background:
    #c7d8df;

}



/* PARTE INFERIOR */

.start-menu-bottom {

  padding:

    7px
    9px;


  display: flex;

  justify-content: flex-end;

  gap: 10px;


  color: white;

  font-size: 9px;


  background:

    linear-gradient(
      #398fc6,
      #1d6fa8
    );

}



/* =========================================================
   TASKBAR MEJORADA
========================================================= */

.taskbar-program {

  height: 30px;

  min-width: 145px;


  padding:

    5px
    10px;


  display: flex;

  align-items: center;

  gap: 5px;


  border:

    1px solid
    rgba(0,70,120,0.65);


  border-radius:
    3px;


  background:

    linear-gradient(
      to bottom,
      rgba(255,255,255,0.38),
      rgba(255,255,255,0.09)
    );


  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,0.45);

}


.taskbar-space {

  flex: 1;

}


.tray-icons {

  display: flex;

  gap: 4px;

  align-items: center;


  font-size:
    11px;

}


.taskbar-clock {

  min-width:
    48px;


  text-align: center;


  font-family:
    Arial,
    sans-serif;


  font-size:
    10px;

}/* =========================================================
   CURSOR SPARKLES
========================================================= */

.cursor-sparkle {

  position: fixed;

  z-index: 9999;


  width: 8px;

  height: 8px;


  pointer-events: none;


  border-radius:
    50%;


  background:
    white;


  box-shadow:

    0 0 5px
    #5ff4ff,

    0 0 8px
    #55ccec;


  animation:

    sparkleFade
    0.7s
    linear
    forwards;

}


.cursor-sparkle::before {

  content: "✦";


  position: absolute;

  left: -2px;

  top: -6px;


  color:
    #7ce8f5;


  font-size:
    11px;

}


@keyframes sparkleFade {

  from {

    opacity: 1;

    transform:

      translateY(0)
      scale(1);

  }


  to {

    opacity: 0;

    transform:

      translateY(15px)
      scale(0.25);

  }

}


@media (prefers-reduced-motion: reduce) {

  .cursor-sparkle {

    display: none;

  }

}

/* =========================================================
   AJUSTES DE LIMPIEZA Y COMPATIBILIDAD
========================================================= */

button {
  font: inherit;
}

.window-buttons button,
.back-button,
.forward-button,
.browser-icon,
.start-button,
.player-controls button,
.popup-buttons button,
.popup-titlebar button {
  cursor: pointer;
}

.status-window-only {
  grid-template-columns: 1fr;
}

.fake-player.is-playing .player-screen {
  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dbffff
    );
}

/* Estado de foco visible para teclado */
a:focus-visible,
button:focus-visible,
.fake-progress-bar:focus-visible {
  outline: 2px solid #63d8ea;
  outline-offset: 2px;
}


/* =========================================================
   POPUP WINDOWS / INTERNET EXPLORER
========================================================= */

.aero-popup {
  position: fixed;
  z-index: 1000;

  left: 50%;
  top: 55%;

  width: 360px;
  max-width: calc(100% - 30px);

  display: none;
  overflow: hidden;

  transform: translate(-50%, -50%);

  border: 1px solid #698997;
  border-radius: 6px;

  background: #f7fcff;

  box-shadow:
    0 0 0 4px rgba(175, 230, 250, 0.45),
    0 8px 25px rgba(0, 55, 85, 0.4);
}

.aero-popup.visible {
  display: block;

  animation:
    popupAppear
    0.25s
    ease-out;
}

@keyframes popupAppear {
  from {
    opacity: 0;

    transform:
      translate(-50%, -46%)
      scale(0.96);
  }

  to {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }
}

.popup-titlebar {
  min-height: 29px;
  padding-left: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #355866;
  font-size: 11px;

  background:
    linear-gradient(
      to bottom,
      #e9faff,
      #a9d7e8
    );

  border-bottom: 1px solid #83a6b2;

  text-shadow: 0 1px 0 white;
}

.popup-titlebar button {
  width: 38px;
  height: 23px;
  margin-right: 4px;
  padding: 0;

  border: 1px solid #a74436;
  border-radius: 3px;

  color: white;
  font-size: 16px;
  line-height: 19px;

  background:
    linear-gradient(
      #ff9d8c,
      #d94c3d
    );
}

.popup-titlebar button:hover {
  filter: brightness(1.08);
}

.popup-body {
  min-height: 100px;
  padding: 16px;

  display: flex;
  align-items: center;
  gap: 14px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #eefaff
    );
}

.popup-icon {
  flex: 0 0 auto;

  font-size: 45px;

  filter:
    drop-shadow(
      0 2px 2px
      rgba(0, 0, 0, 0.2)
    );
}

.popup-message {
  min-width: 0;

  color: #4f5e63;
  font-size: 11px;
}

.popup-message strong {
  color: #325b69;
  font-size: 13px;
}

.popup-message p {
  margin: 5px 0 0;
  text-align: left;
  color: #4f5e63;
}

.popup-buttons {
  padding: 7px 10px;

  display: flex;
  justify-content: flex-end;
  gap: 7px;

  border-top: 1px solid #ccdadd;

  background: #f0f4f5;
}

.popup-buttons button {
  min-width: 67px;
  padding: 4px 10px;

  border: 1px solid #7b999f;
  border-radius: 2px;

  color: #42575b;
  font-size: 10px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d8e9ec
    );
}

.popup-buttons button:hover {
  box-shadow: 0 0 5px #6bd5e8;
}


/* =========================================================
   MEJORAS RESPONSIVE FINALES
========================================================= */

@media (max-width: 520px) {
  .browser-bar {
    gap: 4px;
    padding-inline: 6px;
  }

  .back-button {
    width: 32px;
    height: 32px;
    font-size: 21px;
  }

  .forward-button {
    width: 25px;
    height: 25px;
    font-size: 15px;
  }

  .browser-icon {
    font-size: 17px;
  }

  .address-bar {
    min-width: 0;
    font-size: 10px;
  }

  .taskbar {
    gap: 5px;
  }

  .taskbar-program {
    min-width: 0;
    max-width: 125px;
  }

  .taskbar-program span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tray-icons {
    display: none;
  }

  .aero-popup {
    top: 50%;
  }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .blink-star,
  .marquee-content,
  .equalizer i,
  .internet-orb,
  .aero-popup.visible {
    animation: none;
  }

  .cursor-sparkle {
    display: none;
  }

  .folder-item:hover .folder-icon,
  .media-thumb:hover,
  .player-controls button:active {
    transform: none;
  }
}