/* ============================================================
   CONTACTO.CSS — Página de contacto
   Patricia Alonso · patriciaalonso.es
   ============================================================ */

    .contacto-page {
      max-width: 900px;
      margin: 40px auto 80px auto;
      padding: 0 20px;
    }

    .titulo-contacto {
      font-family: 'Cinzel', serif;
      font-size: 2rem;
      color: #7B5FE0;
      text-align: center;
      margin-bottom: 10px;
      text-shadow: 0 0 10px #7B5FE0, 0 0 20px #9146FF;
    }

    .subtitulo-contacto {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      color: #ccc;
      margin-bottom: 40px;
    }

    /* ============================================================
       CHAT
       ============================================================ */
    .chat-contenedor {
      background: rgba(20, 20, 40, 0.85);
      border: 2px solid #7B5FE0;
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 0 20px rgba(123, 95, 224, 0.3);
    }

    .chat-titulo {
      font-family: 'Cinzel', serif;
      font-size: 1.2rem;
      color: #7B5FE0;
      text-shadow: 0 0 6px #7B5FE0;
      margin-bottom: 16px;
      text-align: center;
    }

    #chat-box {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(123, 95, 224, 0.3);
      border-radius: 10px;
      height: 320px;
      overflow-y: auto;
      padding: 14px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mensaje {
      padding: 8px 12px;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.82rem;
      line-height: 1.4;
      max-width: 80%;
    }

    .mensaje.enviado {
      background: rgba(123, 95, 224, 0.2);
      border: 1px solid rgba(123, 95, 224, 0.5);
      color: #fff;
      align-self: flex-end;
    }

    .mensaje.recibido {
      background: rgba(145, 70, 255, 0.2);
      border: 1px solid rgba(145, 70, 255, 0.5);
      color: #fff;
      align-self: flex-start;
    }

    .mensaje-autor {
      font-size: 0.7rem;
      color: #7B5FE0;
      margin-bottom: 3px;
      font-weight: bold;
    }

    .mensaje-hora {
      font-size: 0.65rem;
      color: #888;
      margin-top: 3px;
      text-align: right;
    }

    .chat-input-row {
      display: flex;
      gap: 10px;
    }

    #mensaje-input {
      flex: 1;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(123, 95, 224, 0.5);
      border-radius: 8px;
      padding: 10px 14px;
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      outline: none;
      transition: border-color 0.2s;
    }

    #mensaje-input:focus {
      border-color: #7B5FE0;
      box-shadow: 0 0 6px rgba(123, 95, 224, 0.4);
    }

    #btn-enviar {
      background: linear-gradient(135deg, #7B5FE0, #9146FF);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(123, 95, 224, 0.4);
      transition: transform 0.2s ease;
    }

    #btn-enviar:hover {
      transform: scale(1.05);
    }

    .no-sesion {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      color: #ccc;
      padding: 20px;
    }

    .no-sesion a {
      color: #9146FF;
      text-decoration: none;
      font-weight: bold;
    }

    .no-sesion a:hover {
      color: #7B5FE0;
    }

    /* ============================================================
       FORMULARIO DE CONTACTO
       ============================================================ */
    .form-contacto {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-contacto-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-campo {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-campo label {
      font-family: 'Poppins', sans-serif;
      font-size: 0.78rem;
      color: #ccc;
    }

    .form-campo input,
    .form-campo textarea {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(123, 95, 224, 0.5);
      border-radius: 8px;
      padding: 10px 14px;
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: vertical;
    }

    .form-campo input:focus,
    .form-campo textarea:focus {
      border-color: #7B5FE0;
      box-shadow: 0 0 8px rgba(123, 95, 224, 0.4);
    }

    .btn-enviar-contacto {
      align-self: flex-start;
      background: linear-gradient(135deg, #7B5FE0, #9146FF);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px 28px;
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      cursor: pointer;
      box-shadow: 0 0 12px rgba(123, 95, 224, 0.5);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-enviar-contacto:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 18px rgba(123, 95, 224, 0.7);
    }

    .btn-enviar-contacto:disabled {
      opacity: 0.6;
      cursor: default;
      transform: none;
    }

    .contacto-estado {
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      margin: 0;
      min-height: 1.2em;
    }

    .contacto-estado.exito { color: #4CDA8C; }
    .contacto-estado.error-msg { color: #FF5C5C; }

    @media (max-width: 600px) {
      .form-contacto-grid { grid-template-columns: 1fr; }
      .contacto-page { margin: 24px auto 50px auto; padding: 0 14px; }
      .titulo-contacto { font-size: 1.4rem; }
      .subtitulo-contacto { font-size: 0.8rem; margin-bottom: 26px; }
      .chat-contenedor { padding: 16px; }
      .chat-titulo { font-size: 1rem; margin-bottom: 12px; }
      .form-campo input,
      .form-campo textarea { padding: 8px 12px; font-size: 0.8rem; }
      .btn-enviar-contacto { align-self: stretch; text-align: center; padding: 10px 20px; font-size: 0.78rem; }
      .redes-section { margin-top: 34px; }
      .redes-titulo { font-size: 1.05rem; margin-bottom: 16px; }
      .redes-grid { gap: 10px; }
      .red-btn { padding: 8px 14px; font-size: 0.76rem; }
      .separador-neon { margin: 26px auto; }
    }

    /* ============================================================
       REDES SOCIALES
       ============================================================ */
    .redes-section {
      margin-top: 50px;
      text-align: center;
    }

    .redes-titulo {
      font-family: 'Cinzel', serif;
      font-size: 1.3rem;
      color: #7B5FE0;
      text-shadow: 0 0 6px #7B5FE0;
      margin-bottom: 24px;
    }

    .redes-grid {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .red-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 10px;
      text-decoration: none;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      font-weight: bold;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .red-btn:hover { transform: translateY(-3px); }

    /* Todas las redes con el mismo estilo violeta, para que se vean
       como un conjunto y no como botones sueltos de cada color de marca */
    .red-btn,
    .red-twitch,
    .red-youtube,
    .red-discord,
    .red-tiktok {
      background: rgba(123, 95, 224, 0.15);
      border: 1px solid #7B5FE0;
      color: #C9B8E8;
      box-shadow: 0 0 8px rgba(123, 95, 224, 0.35);
    }

    .red-btn:hover,
    .red-twitch:hover,
    .red-youtube:hover,
    .red-discord:hover,
    .red-tiktok:hover {
      box-shadow: 0 0 16px rgba(123, 95, 224, 0.6);
      border-color: #9B82EE;
    }

    .separador-neon {
      width: 80%;
      max-width: 600px;
      height: 1px;
      background: linear-gradient(to right, transparent, #7B5FE0, #9146FF, transparent);
      margin: 40px auto;
      opacity: 0.4;
    }