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

body {
   background: #f7f7f7;
   color: #292929;
   font-family: Arial, Helvetica, sans-serif;
}


/* HEADER
-------------------------------------------------- */

.main-header {
   background: #ffffff;
   border-bottom: 1px solid #e5e5e5;
   padding: 22px 0;
}

.header-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.brand {
   color: #222222;
   font-size: 1.35rem;
   font-weight: 400;
   letter-spacing: 3px;
}

.brand:hover {
   color: #222222;
}

.brand-subtitle {
   color: #888888;
   font-size: 0.75rem;
   letter-spacing: 1px;
   margin-top: 3px;
   text-transform: uppercase;
}

.main-nav a {
   color: #555555;
   font-size: 0.85rem;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.main-nav a:hover {
   color: #000000;
}


/* HERO
-------------------------------------------------- */

.analysis-hero {
   background: #ffffff;
   padding: 70px 20px 55px;
   text-align: center;
}

.analysis-hero .title {
   color: #252525;
   font-size: 2.2rem;
   font-weight: 300;
   letter-spacing: 2px;
}

.analysis-hero .subtitle {
   color: #777777;
   font-size: 1rem;
   font-weight: 300;
   margin: 18px auto 0;
   max-width: 700px;
   line-height: 1.7;
}


/* ANALYSIS
-------------------------------------------------- */

.analysis-section {
   padding: 60px 20px 90px;
}

.audio-card {
   position: relative;
   background: #ffffff;
   border: 1px solid #e5e5e5;
   min-height: 330px;
   padding: 40px;
   text-align: center;
   cursor: pointer;
   transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background-color 0.2s ease,
      transform 0.2s ease;
}

.audio-card:hover {
   border-color: #b5b5b5;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

/* Drag & Drop activo */
.audio-card.is-dragging {
   background: #f3f3f3;
   border-color: #555555;
   border-style: dashed;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
}

/* Archivo seleccionado */
.audio-card.has-file {
   border-color: #999999;
}

.drop-message {
   color: #999999;
   font-size: 0.78rem;
   letter-spacing: 1px;
   margin-bottom: 16px;
   text-transform: uppercase;
}

.drop-or {
   color: #bbbbbb;
   display: block;
   font-size: 0.7rem;
   margin: 8px 0 14px;
   text-transform: uppercase;
}

.audio-letter {
   color: #b7b7b7;
   font-size: 4rem;
   font-weight: 300;
   line-height: 1;
}

.audio-card h2 {
   color: #333333;
   font-size: 1rem;
   font-weight: 500;
   letter-spacing: 2px;
   margin-top: 20px;
   text-transform: uppercase;
}

.audio-description {
   color: #888888;
   font-size: 0.85rem;
   margin: 10px 0 25px;
}

.audio-input {
   display: none;
}

.select-audio {
   background: transparent;
   border: 1px solid #555555;
   border-radius: 0;
   color: #333333;
   cursor: pointer;
   display: inline-block;
   font-size: 0.8rem;
   letter-spacing: 1px;
   padding: 12px 25px;
   text-transform: uppercase;
   transition: all 0.2s ease;
}

.select-audio:hover {
   background: #333333;
   color: #ffffff;
}

.audio-filename {
   color: #666666;
   font-size: 0.8rem;
   margin-top: 20px;
   min-height: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.audio-card.has-file .audio-filename {
   color: #333333;
   font-weight: 500;
}


/* VS
-------------------------------------------------- */

.comparison-separator {
   color: #aaaaaa;
   font-size: 0.75rem;
   letter-spacing: 2px;
   margin: 35px 0;
   text-align: center;
}


/* BUTTON
-------------------------------------------------- */

.analysis-action {
   margin-top: 50px;
   text-align: center;
}

.analyze-button {
   background: #292929;
   border: 1px solid #292929;
   border-radius: 0;
   color: #ffffff;
   cursor: pointer;
   font-size: 0.85rem;
   letter-spacing: 2px;
   min-width: 250px;
   padding: 17px 40px;
   text-transform: uppercase;
   transition: all 0.2s ease;
}

.analyze-button:hover {
   background: #ffffff;
   color: #292929;
}


/* INFO
-------------------------------------------------- */

.analysis-info {
   color: #999999;
   font-size: 0.75rem;
   margin-top: 18px;
}


/* FOOTER
-------------------------------------------------- */

.main-footer {
   background: #222222;
   color: #aaaaaa;
   font-size: 0.75rem;
   letter-spacing: 1px;
   padding: 35px 20px;
   text-align: center;
}


/* RESPONSIVE
-------------------------------------------------- */

@media (max-width: 768px) {

   .header-content {
      align-items: flex-start;
      flex-direction: column;
      gap: 15px;
   }

   .analysis-hero {
      padding-top: 50px;
   }

   .analysis-hero .title {
      font-size: 1.7rem;
   }

   .audio-card {
      padding: 30px 20px;
   }
}