/* ===== CONFIG GENERAL ===== */
html{
    scroll-behavior:smooth;
    background-color: #1f1f1f;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
}

/* ===== TITULO ===== */
h1{
    text-align:center;
    font-weight:bold;
    font-size:22px;
    margin-bottom:6px;
    color: #ffff;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.inicio{
    width: 95%;
    margin:20px auto 80px auto;
    padding:25px 15px 40px 15px;
    box-sizing:border-box;
    text-align:center;
    border-radius:16px;
    box-shadow:0 10px 35px rgba(0,0,0,.45);
    background:#2a2a2a;
    border:1px solid #3b3b3b;
}

/* ===== LOGO ===== */
.logo{
    width:220px;
    margin:10px auto 25px auto;
    display:block;
}

/* ===== APARTADOS ===== */
.apartado{
    margin:40px auto;
    width:80%;
    background: rgba(0,0,0,0.3);;
    padding:25px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,0.6);
    transition:0.3s;
}

.apartado:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(0,0,0,0.8);
}

.apartado h2{
    font-size:22px;
    margin-bottom:15px;
    color: rgba(255,255,255,0.85);
}

.apartado p{
    font-size:16px;
    line-height:1.6;
    width:102.9%;
    margin:auto 0;
    color: rgba(255,255,255,0.75);
}

/* ===== HR ===== */
hr{
    width:90%;
    border:1px solid #333;
    margin:30px auto;
}

/* ===== AVISO ===== */
.aviso{
    width:100%;
    text-align:center;
    font-size:16px;
    color: #adadaa;
    margin-top:50px;
}

/* ===== BOTONES ===== */
#enviar{
  width:35px;
  height:35px;
  border-radius:50%;
  border:none;
  font-size:15px;
  background:#355f5c;
  color:white;
}

.imagen{
    position:relative;
    width:12%;
}

#like{
    width:10%;
}

.send button{
    border-color:transparent;
    background:white;
    color:black;
    border-radius:30px;
    width:80%;
    height:45px;
}

/* ================================================= */
/* ================== PC ============================ */
/* ================================================= */
@media (min-width: 1200px){

  h1{ font-size:30px; }

  .inicio{
    max-width:1200px;
    margin:40px auto 120px auto;
    padding:40px 20px 60px 20px;
    border-radius:20px;
  }

  .logo{
    width:400px;
    margin:10px auto 40px auto;
  }

  .apartado{
    margin:80px auto;
    width:85%;
    max-width:900px;
    padding:40px;
    border-radius:18px;
  }

  .apartado h2{ font-size:28px; }
  .apartado p{ font-size:18px; }

  hr{
    width:80%;
    margin:40px auto;
  }

  .aviso{
    font-size:20px;
    margin-top:80px;
  }

  .imagen{ width:4%; }
  #like{ width:3%; }

  .send button{
    width:50%;
    height:50px;
  }
}