/* =====================================
   NUTRICIÓN CONSCIENTE
   Alquimia Alimentaria
===================================== */

body.bg-dark{
    background:#0a0a0a;
    color:#ffffff;
    font-family:Arial,Helvetica,sans-serif;
    }
    
    /* CONTENEDOR GENERAL */
    
    .container{
    width:85%;
    margin:auto;
    }
    
    /* ================================
       NAVBAR
    ================================ */
    
    .navbar{
    background:#111;
    padding:15px 0;
    }
    
    .nav-container{
    width:90%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    }
    
    .nav-links{
    list-style:none;
    display:flex;
    gap:20px;
    }
    
    .nav-links a{
    color:#d4af37;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
    }
    
    .nav-links a:hover{
    color:#ffffff;
    }
    
    /* ================================
       DROPDOWN MENU
    ================================ */
    
    .dropdown{
    position:relative;
    }
    
    .dropdown-content{
    display:none;
    position:absolute;
    background:#111;
    border:1px solid #d4af37;
    min-width:160px;
    z-index:1;
    }
    
    .dropdown-content a{
    display:block;
    padding:10px;
    color:#d4af37;
    text-decoration:none;
    }
    
    .dropdown-content a:hover{
    background:#d4af37;
    color:#000;
    }
    
    .dropdown:hover .dropdown-content{
    display:block;
    }

    /* ================================
   HEADER NUTRICIÓN
================================ */

.header-nutricion{
    text-align:center;
    margin:60px 0;
    }
    
    .oro-texto{
    letter-spacing:5px;
    display:block;
    margin-bottom:15px;
    color:#d4af37;
    }
    
    /* ================================
       BLOQUE HIDRATACIÓN
    ================================ */
    
    .hidratacion{
    background:linear-gradient(135deg,#001f3f,#000a1a);
    padding:30px;
    border-radius:12px;
    border:1px solid #0074d9;
    text-align:center;
    margin-bottom:40px;
    }
    
    /* ================================
       NAV RECETAS (TABS)
    ================================ */
    
    .fitness-nav{
    display:flex;
    justify-content:center;
    gap:15px;
    margin:40px 0;
    flex-wrap:wrap;
    }
    
    /* BOTONES */
    
    .tab-btn{
    padding:14px 28px;
    background:#141414;
    border:1px solid #d4af37;
    color:#d4af37;
    cursor:pointer;
    border-radius:4px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.8rem;
    transition:all 0.4s ease;
    }
    
    .tab-btn.active,
    .tab-btn:hover{
    background:#d4af37;
    color:#000;
    box-shadow:0 0 20px rgba(212,175,55,0.3);
    }

/* ================================
   CONTENEDOR RECETARIO
================================ */

.recetario-container{
    background:#111;
    border-radius:15px;
    padding:40px;
    border:1px solid rgba(212,175,55,0.1);
    }
    
    /* CATEGORÍAS */
    
    .categoria-content{
    display:none;
    animation:fadeIn 0.8s ease;
    }
    
    .categoria-content.active{
    display:block;
    }
    
    /* TARJETAS RECETAS */
    
    .receta-card{
    background:#161616;
    padding:30px;
    border-radius:8px;
    margin-bottom:30px;
    border-left:3px solid #d4af37;
    transition:all 0.4s ease;
    }
    
    .receta-card:hover{
    transform:translateX(10px) scale(1.02);
    background:#1c1c1c;
    box-shadow:0 10px 25px rgba(0,0,0,0.6);
    }
    
    /* ================================
       FOOTER
    ================================ */
    
    .footer-nutricion{
    text-align:center;
    margin:60px 0;
    border-top:1px solid rgba(212,175,55,0.2);
    padding-top:30px;
    }
    
    /* ================================
       ANIMACIONES
    ================================ */
    
    @keyframes fadeIn{
    from{
    opacity:0;
    transform:translateY(10px);
    }
    to{
    opacity:1;
    transform:translateY(0);
    }
    }

    .hidratacion-calculadora{
      margin-top:20px;
      text-align:center;
      }
      
      #peso-agua{
      padding:10px;
      margin:10px;
      border-radius:6px;
      border:none;
      }
      
      #resultado-agua{
      margin-top:15px;
      font-size:1.1rem;
      color:#d4af37;
      }
      
      .vasos-container{
      margin-top:15px;
      font-size:2rem;
      letter-spacing:5px;
      }
    
    /* ================================
       RESPONSIVE
    ================================ */
    
    @media (max-width:600px){
    
    .recetario-container{
    padding:25px;
    }
    
    h1{
    font-size:2.2rem;
    }
    
    }

    .oro-texto{
      color:#d4af37;
      letter-spacing:2px;
      font-weight:600;
      display:block;
      margin-bottom:10px;
      }