/* CSS: Estética Minimalista */
 body {
   font-family: 'Helvetica Neue', sans-serif;
   background: linear-gradient(135deg, #000000);
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   padding: 40px 20px;
   scroll-behavior: smooth;
   /* Permite desplazamiento suave */
 }

 .h1 {
 
   color: rgb(248, 0, 165);
   text-shadow: 4px 4px 5px rgb(0, 0, 0);
   font-size: 50px;
   letter-spacing: 8x;
   font-weight: bold;
   font-style: italic
 
 }

  .contenedor {
   position: relative;
   width: 100%;
   max-width: px;
 }

 .contenedor img {
   width: 100%;
   display: block;
   font-size: 60px;
 }

 .texto {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: rgb(0, 0, 0);
   font-size: 60px;
   font-weight: bold;
   text-align: center;


 }


 header {
   background-color: #f0f0f0;
   padding: 10px 20px;
 }

 .menu {
   display: flex;
   /* coloca logo y menú en línea */
   align-items: center;
   /* centra verticalmente */
 }

 .logo img {
   width: 150px;
   /* tamaño del logo */
 }

 .nav ul {
   list-style: none;
   /* quita viñetas */
   margin: 0;
   padding: 0;
   display: flex;
   /* coloca los enlaces en fila */
   gap: 30px;
   /* espacio entre enlaces */
 }

 .nav a {
   text-decoration: none;
   /* quita subrayado */
   color: #ffffff;
   font-weight: bold;
 }

 .nav a:hover {
   color: #d2007e;
   /* color al pasar el mouse */
 }

 .pin {
   width: 350px;
   width: 95%;
 }

 .pin {
   display: flex;
   align-items: center;
   /* centra verticalmente */
   gap: 20px;
   /* espacio entre imagen y texto */
 }

 .pin img {
   width: 400px;
   /* ajusta el tamaño */
   border-radius: 20px;
 }

 .texto1 {
   max-width: 400px;
   font-size: 20px;
   color: #ffffff;
 }



 .card {
   background: white;
   padding: 30px;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   width: 100%;
   max-width: 450px;
   text-align: center;
   margin-bottom: 40px;
   align-self: center;
 
 }

 textarea {
   width: 100%;
   height: 100px;
   padding: 15px;
   border: 2px solid #eee;
   border-radius: 12px;
   resize: none;
   font-size: 16px;
   outline: none;
   box-sizing: border-box;
 }

 button {
   background: #6e8efb;
   color: white;
   border: none;
   padding: 12px 30px;
   border-radius: 25px;
   font-weight: bold;
   cursor: pointer;
   margin-top: 15px;
   transition: 0.3s;
 }

 button:hover {
   background: #a7a1ff;
 }

 /* Contenedor de susurros */
 #muro {
   width: 100%;
   max-width: 500px;
   display: flex;
   flex-direction: column-reverse;
   /* El más nuevo arriba */
   gap: 15px;
   color: rgb(245, 245, 245);
 }

 .susurro-item {
   background: rgba(255, 255, 255, 0.9);
   padding: 20px;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   border-left: 5px solid #6e8efb;
   animation: fadeIn 0.5s ease;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .titulo-seccion {
   color: #fafafa;
   margin-top: 50px;
   align-self: center;
 
 }




 .auth-card {
   background: white;
   padding: 40px;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   width: 100%;
   max-width: 350px;
    align-self: center;
 
 }

 h2 {
   color: #333;
   margin-bottom: 25px;
   transition: 0.3s;
 }

 input {
   width: 100%;
   padding: 12px;
   margin: 10px 0;
   border: 1px solid #ddd;
   border-radius: 6px;
   box-sizing: border-box;
   outline: none;
 }

 input:focus {
   border-color: #007bff;
 }

 .btn-main {
   width: 100%;
   padding: 12px;
   background: #00aeff;
   color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-size: 16px;
   font-weight: bold;
   margin-top: 15px;
 }

 .btn-main:hover {
   background: #0089b3;
 }

 .toggle-text {
   margin-top: 20px;
   font-size: 0.9em;
   color: #666;
 }

 .toggle-text span {
   color: #007bff;
   cursor: pointer;
   font-weight: bold;
 }

 /* Clase para ocultar suavemente */
 .hidden {
   display: none;
 }

 .consulta-container {
   background: white;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   width: 100%;
   max-width: 500px;
  align-self: center;
 }

 h2 {
   color: #2d3748;
   margin-top: 0;
   text-align: center;
 }

 .form-group {
   margin-bottom: 15px;
 }

 label {
   display: block;
   margin-bottom: 5px;
   color: #4a5568;
   font-weight: 600;
 }

 input,
 select,
 textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #cbd5e0;
   border-radius: 6px;
   box-sizing: border-box;
   font-size: 14px;
   outline: none;
   transition: border-color 0.3s;
 }

 input:focus,
 select:focus,
 textarea:focus {
   border-color: #4299e1;
 }

 button {
   width: 100%;
   padding: 12px;
   background-color: #42b4e1;
   color: white;
   border: none;
   border-radius: 6px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   transition: background 0.3s;
 }

 button:hover {
   background-color: #3182ce;
 }

 /* Cuadro de Respuesta */
 #respuesta {
   margin-top: 20px;
   padding: 15px;
   background-color: #f7fafc;
   border-left: 4px solid #48bb78;
   border-radius: 4px;
   display: none;
   /* Oculto por defecto */
 }

 .hidden {
   display: none;
 }