/* ==========================================================================
   Reseñas — Vibratour Medellín
   Usa la paleta del sitio: #0087bc (azul), #005373 (azul oscuro),
   #e93951 (rojo), #06354e (fondo oscuro).
   ========================================================================== */

.resenas-page { padding: 0; background: #f6f8fa; height: auto; }
.resenas-page main { float: none; margin-bottom: 0; background: transparent; }
.resenas-page .container { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* El footer del home es fijo (position:fixed, 50vh, z-index:-1) porque allí se
   revela al hacer scroll bajo el <main> blanco. Aquí no hay nada que lo tape,
   así que lo devolvemos a un footer normal al final de la página. */
.resenas-page .footer {
  position: static; float: none; height: auto;
  z-index: auto; padding: 0; display: block;
}
.resenas-page .footer .inner {
  display: block; height: auto; float: none;
  background: #002152; padding: 50px 20px;
}
.resenas-page .footer .inner h5 {
  font-size: 20px; margin: 18px 0 22px; color: #fff;
  letter-spacing: 2px; font-family: 'Fjalla One', serif;
}
.resenas-page .footer .inner .social-media { margin: 0 0 22px; }
.resenas-page .footer .inner .social-media li { float: none; display: inline-block; }
.resenas-page .footer .inner .copyright { float: none; display: block; }

/* Accesibilidad: texto solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Cabecera ---------- */
.resenas-header {
  float: none; background: #06354e; color: #fff;
  padding: 50px 0 60px; text-align: center;
}
.resenas-logo { width: 190px; height: auto; margin-bottom: 25px; }
.resenas-header h1 {
  font-family: 'Fjalla One', serif; font-size: 42px;
  margin: 0 0 12px; color: #fff; line-height: 1.15;
}
.resenas-header p { color: rgba(255,255,255,.75); margin: 0; font-size: 16px; }

/* ---------- Formulario ---------- */
.resenas-main { padding: 0 0 70px; }

.resena-form {
  background: #fff; border-radius: 6px; padding: 40px;
  margin-top: -35px; box-shadow: 0 6px 28px rgba(6,53,78,.10);
}

.campo { margin-bottom: 26px; }
.campo label,
.campo .label-estrellas {
  display: block; margin-bottom: 8px;
  font-weight: 600; font-size: 14px;
  letter-spacing: .3px; text-transform: uppercase; color: #06354e;
}
.campo .req { color: #e93951; }

.resena-form input[type="text"],
.resena-form select,
.resena-form textarea {
  width: 100%; border: 1px solid #dfe5ea; border-radius: 4px;
  background: #fff; font-family: inherit; font-size: 15px; color: #2c2929;
  transition: border-color .2s, box-shadow .2s;
}
.resena-form input[type="text"] { height: 50px; padding: 0 15px; }
.resena-form select { height: 50px; padding: 0 12px; }
.resena-form textarea { height: auto; min-height: 140px; padding: 14px 15px; resize: vertical; }

.resena-form input[type="text"]:focus,
.resena-form select:focus,
.resena-form textarea:focus {
  border-color: #0087bc; box-shadow: 0 0 0 3px rgba(0,135,188,.15);
}
.resena-form .campo.tiene-error input,
.resena-form .campo.tiene-error textarea { border-color: #e93951; }

.contador { display: block; text-align: right; color: #90a0ac; font-size: 12px; margin-top: 6px; }
.error { display: none; color: #e93951; font-size: 13px; margin-top: 6px; }
.campo.tiene-error .error { display: block; }

/* ---------- Estrellas ---------- */
/* Orden natural: 1 a la izquierda, 5 a la derecha (5 = Excelente).
   El encendido lo controla js/resenas.js añadiendo la clase .activa a
   la estrella seleccionada y a todas las de menor valor. */
.estrellas { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.estrella { margin: 0; cursor: pointer; padding: 0 3px; line-height: 1; }
.estrella input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrella .fa-star { font-size: 34px; color: #dfe5ea; transition: color .15s, transform .15s; }
.estrella .fa-star.activa { color: #f5a623; }
.estrella:hover .fa-star { transform: scale(1.12); }
.estrella input:focus-visible ~ .fa-star { outline: 2px solid #0087bc; outline-offset: 3px; }

.estrellas-texto {
  margin-left: 14px; font-size: 14px;
  color: #06354e; font-weight: 600; min-width: 90px;
}

/* ---------- Botón y avisos ---------- */
.btn-enviar {
  height: 52px; padding: 0 42px; border: none; border-radius: 4px;
  background: #e93951; color: #fff; font-family: 'Fjalla One', serif;
  font-size: 16px; letter-spacing: 1.2px; cursor: pointer;
  transition: background .2s, transform .1s;
}
.btn-enviar:hover { background: #b11127; }
.btn-enviar:active { transform: translateY(1px); }
.btn-enviar[disabled] { background: #b8c4cc; cursor: not-allowed; transform: none; }

.aviso { display: none; margin-top: 20px; padding: 14px 18px; border-radius: 4px; font-size: 15px; }
.aviso.visible { display: block; }
.aviso.exito { background: #e6f5ec; color: #1c6b3f; border: 1px solid #b9e2ca; }
.aviso.fallo { background: #fdeaed; color: #9d1024; border: 1px solid #f6c2ca; }

.nota { margin-top: 18px; color: #90a0ac; font-size: 13px; }

/* Honeypot: fuera de la vista, pero no display:none (algunos bots lo detectan) */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* ---------- Listado ---------- */
.resenas-listado { float: none; margin-top: 60px; }
.resenas-listado h2 {
  font-family: 'Fjalla One', serif; font-size: 32px;
  color: #06354e; margin: 0 0 22px; text-align: center;
}

.resumen { text-align: center; margin-bottom: 32px; color: #06354e; }
.resumen .nota-media { font-size: 46px; font-family: 'Fjalla One', serif; line-height: 1; }
.resumen .estrellas-fijas { color: #f5a623; font-size: 20px; margin: 8px 0 4px; }
.resumen .conteo { color: #90a0ac; font-size: 14px; }

.lista { display: grid; gap: 18px; }
.resena {
  background: #fff; border-radius: 6px; padding: 24px 26px;
  border-left: 4px solid #0087bc; box-shadow: 0 2px 10px rgba(6,53,78,.06);
}
.resena-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.resena-nombre { font-weight: 700; color: #06354e; font-size: 16px; }
.resena-estrellas { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.resena-tour {
  background: #eaf6fb; color: #0087bc; font-size: 12px;
  padding: 3px 10px; border-radius: 20px; font-weight: 600;
}
.resena-fecha { color: #90a0ac; font-size: 13px; margin-left: auto; }
.resena-texto { margin: 0; color: #4a5760; line-height: 1.6; white-space: pre-line; }

.cargando, .vacio { text-align: center; color: #90a0ac; padding: 24px; }

.volver { text-align: center; margin-top: 45px; }
.volver a { color: #0087bc; font-weight: 600; }

/* ==========================================================================
   Sección de reseñas dentro del home (index.html)
   ========================================================================== */

.resenas-home .lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; margin-bottom: 40px;
}
.resenas-home .resena { background: #f6f8fa; }
.resenas-home .resumen { margin-bottom: 40px; }
.resenas-home .lista:empty { display: none; }

.cta-resena { text-align: center; margin: 0; }
.cta-resena a {
  display: inline-block; background: #0087bc; color: #fff;
  font-family: 'Fjalla One', serif; font-size: 16px; letter-spacing: 1.2px;
  padding: 16px 44px; border-radius: 4px; text-decoration: none;
  transition: background .2s, color .2s;
}
.cta-resena a:hover { background: #005373; color: #fff; text-decoration: none; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .resenas-header { padding: 35px 0 50px; }
  .resenas-header h1 { font-size: 30px; }
  .resena-form { padding: 26px 20px; }
  .estrella .fa-star { font-size: 30px; }
  .estrellas { flex-wrap: wrap; }
  .estrellas-texto { order: 0; width: 100%; margin: 8px 0 0; }
  .btn-enviar { width: 100%; padding: 0; }
  .resena-fecha { margin-left: 0; width: 100%; }
}