:root {
  --verde-hoja: #6E8B74;
  --burdeos: #7B2D2D;
  --durazno: #F6B1A2;
  --crema: #FFF3E4;
  --lila-ui: #C7A6C8;
  --texto: #3A2A2A;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background: var(--crema);
  color: var(--texto);
  animation: pageIn 0.6s ease;
}

/* ===== OS BAR ===== */


/* LOGO */

.logo-area img {
  height: 70px;
  width: auto;
  image-rendering: pixelated; /* si es ilustración */
}

/* NAV */

.top-nav {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

.nav-item {
  position: relative;
  text-decoration: none;
  font-weight: 800;
  color: var(--texto);
  padding: 0.1rem 0.6rem;
  transition: color 0.3s ease;
}


.os-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;  
  background: var(--lila-ui);
  padding: 0.6rem 1rem;
  border-bottom: 4px solid var(--burdeos);
}

.os-left, .os-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.os-nav {
  display: flex;
  gap: 1.2rem;
}

.os-nav a {
  text-decoration: none;
  font-weight: 700;
  color: var(--texto);
  background: var(--crema);
  padding: 0.3rem 0.9rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.os-nav a:hover {
  background: var(--durazno);
  transform: translateY(-2px);
}

.title {
  font-size: 30px;
   font-weight: bold;
  color: var(--crema);
}


/* ===== DESKTOP ===== */

.desktop {
  padding: 1rem;
  display: flex;
  justify-content: center;
}

/* ===== WINDOW ===== */

.window {
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  overflow: hidden;
  animation: floatUp 0.7s ease;
}

.window-bar {
  background: var(--verde-hoja);
  padding: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.red { background: var(--burdeos); }
.yellow { background: var(--durazno); }
.green { background: #8BC3A3; }

.window-title {
  margin-left: 1rem;
  color: #fff;
  font-weight: 700;
}

.window-content {
  padding: 2.5rem;
  text-align: center;
}

/* ===== APPS ===== */

.app-grid {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.app-card {
  width: 160px;
  height: 160px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  transition: all 0.4s ease;
}

.app-card span {
  font-size: 1rem;
  margin-top: 0.5rem;
}

.app-card:hover {
  transform: translateY(-10px) rotate(-2deg);
  box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

.verde { background: var(--verde-hoja); }
.durazno { background: var(--durazno); }
.burdeos { background: var(--burdeos); }

/* ===== SOCIAL BAR ===== */

.social-bar {
  background: var(--lila-ui);
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  font-weight: 700;
}

.social-bar a {
  text-decoration: none;
  color: var(--texto);
}

/* ===== ANIMACIONES ===== */

@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== TRANSICIÓN VENTANA ===== */

.window-transition {
  animation: windowOpen 0.7s cubic-bezier(.25,.8,.25,1);
}

@keyframes windowOpen {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Línea animada debajo */

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.35s ease;
}

.nav-item:hover::after {
  transform: scaleX(1);
}

.nav-item.verde:hover::after {
  background: var(--verde-hoja);
}

.nav-item.durazno:hover::after {
  background: var(--durazno);
}

.nav-item.burdeos:hover::after {
  background: var(--burdeos);
}


/* ===== DIARIO ===== */

.diary h1 {
  margin-bottom: 0.2rem;
}

.subtitle {
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: 2rem;
}

.diary-entry {
  background: var(--crema);
  border-radius: 22px;
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  animation: entryFade 0.6s ease forwards;
}

.diary-entry h2 {
  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}

.diary-entry p {
  line-height: 1.6;
}

.date {
  font-size: 0.75rem;
  opacity: 0.6;
  font-weight: 700;
}

/* entrada especial mood */
.diary-entry.mood {
  background: #F0E6E6;
  border-left: 6px solid var(--burdeos);
}

/* animación entradas */
@keyframes entryFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* link activo */
.os-nav a.active {
  background: var(--burdeos);
  color: #fff;
}

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

/* ---------- TABLET ---------- */
@media (max-width: 900px) {

  .desktop {
    padding: 2rem 1.5rem;
  }

  .window-content {
    padding: 2rem;
  }

  .home-layout {
    gap: 2rem;
  }

  .avatar-frame {
    width: 180px;
    height: 180px;
  }

  .app-card {
    width: 140px;
    height: 140px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {

  /* HEADER */
  .os-bar {
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem;
  }

  .os-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
  }

  .os-nav a {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
  }

  /* WINDOW */
  .desktop {
    padding: 1.2rem;
  }

  .window {
    border-radius: 18px;
  }

  .window-bar {
    padding: 0.4rem;
  }

  .window-title {
    font-size: 0.85rem;
  }

  .window-content {
    padding: 1.5rem;
  }

  /* HOME LAYOUT */
  .home-layout {
    flex-direction: column;
    text-align: center;
  }

  .home-text {
    text-align: center;
  }

  /* AVATAR */
  .avatar-frame {
    width: 150px;
    height: 150px;
  }

  /* APPS */
  .app-grid {
    gap: 1rem;
  }

  .app-card {
    width: 120px;
    height: 120px;
    font-size: 1.8rem;
  }

  .app-card span {
    font-size: 0.85rem;
  }

  /* DIARIO */
  .diary-entry {
    padding: 1.2rem 1.3rem;
  }

  /* FOOTER */
  .social-bar {
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.9rem;
  }
}

/* ---------- MOBILE EXTRA PEQUEÑO ---------- */
@media (max-width: 400px) {

  .avatar-frame {
    width: 130px;
    height: 130px;
  }

  .app-card {
    width: 105px;
    height: 105px;
  }

  h1 {
    font-size: 1.4rem;
  }
}