/* opiniones.css
   Copia completa de nosotros.css + los estilos propios de
   opiniones.html (formulario, selector de estrellas, avisos),
   fusionados en un solo archivo para que opiniones.html no
   dependa de dos hojas de estilo distintas.
   La sección de nosotros.css se deja tal cual, sin modificar
   ninguna regla; los estilos nuevos se agregan al final. */

:root {
  --color-primary: #2E6DA4;
  --color-accent-blue: #2563EB;
  --color-sky: #C9DFF2;
  --color-light-blue: #6FA8DC;
  --color-muted-blue: #9FB4CC;
  --color-text: #222;
  --color-text-dark: #22303D;
  --color-text-muted: #5B6B78;
  --color-white: #fff;
  --color-black: #000;
  --color-border: #E2E5E9;
  --color-success: #1D8A6C;
  --color-coral: #FF7A59;
  --color-gold: #F4B740;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #FBFCFE;
  color: var(--color-text);
  overflow-x: hidden;
}

a { color: var(--color-accent-blue); text-decoration: none; }

/* ---------- Header ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 6%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text-dark);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }

.logo-fallback {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-blue));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-blue));
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.35); }

.btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover { background: var(--color-sky); transform: translateY(-2px); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }

.btn-lg { padding: 15px 34px; font-size: 1.02rem; }

/* ---------- Hero ---------- */
.about-hero {
  position: relative;
  padding: 90px 6% 110px;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.75) 100%),
    url("../imagenes/opiniones/opiniones.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center;
}

.about-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
}

.about-hero-blob-1 {
  width: 420px; height: 420px;
  background: var(--color-accent-blue);
  top: -160px; left: -120px;
}

.about-hero-blob-2 {
  width: 380px; height: 380px;
  background: var(--color-gold);
  bottom: -180px; right: -100px;
  opacity: 0.25;
}

.about-hero-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

.about-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.about-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 18px;
}

.about-highlight {
  color: #A9CFEF;
  font-style: italic;
  font-weight: 700;
}

.about-hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.about-hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.stats-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 6%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  transform: translateY(-56px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(20, 54, 86, 0.12);
}

.stat-item {
  text-align: center;
  padding: 10px;
  border-right: 1px solid var(--color-border);
}
.stat-item:last-child { border-right: none; }

.stat-number {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ---------- Sections ---------- */
.about-section {
  max-width: 1150px;
  margin: 0 auto;
  padding: 40px 6% 80px;
}

.about-section-alt {
  max-width: none;
  background: linear-gradient(180deg, #F3F8FD 0%, #EAF2FB 100%);
  padding: 80px 6%;
}

.about-section-alt > * { max-width: 1150px; margin-left: auto; margin-right: auto; }

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.section-eyebrow {
  display: inline-block;
  color: var(--color-accent-blue);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.3;
}

/* ---------- Misión / Visión / Valores ---------- */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mv-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 26px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(20, 54, 86, 0.08);
  transition: transform 0.2s ease;
}

.mv-card:hover { transform: translateY(-6px); }

.mv-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-sky), #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin: 0 auto 18px;
}

.mv-card h3 {
  font-size: 1.1rem;
  color: var(--color-text-dark);
  margin-bottom: 10px;
  font-weight: 700;
}

.mv-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ---------- Features ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 26px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 54, 86, 0.1);
}

.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.feature-card h4 {
  font-size: 1rem;
  color: var(--color-text-dark);
  margin-bottom: 8px;
  font-weight: 700;
}

.feature-card p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ---------- Team (flip cards) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  justify-items: center;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 230px;
  height: 260px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  box-shadow: 0 8px 20px rgba(20, 54, 86, 0.14);
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid #437494;
  border-radius: 18px;
}

.flip-card-front {
  background: linear-gradient(120deg, #E7F0F5 60%, #DCEAF1 88%, #C8DEE8 40%, rgba(67, 116, 148, 0.35) 148%);
}

.flip-card-front .team-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(67, 116, 148, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 4px;
}

.flip-card-front h4 {
  font-size: 1.05rem;
  color: #2C5570;
  font-weight: 700;
  margin: 0;
}

.flip-card-front .team-role {
  font-size: 0.82rem;
  color: #437494;
  font-weight: 600;
}

.flip-card-back {
  background: linear-gradient(120deg, #5C90AF 30%, #437494 88%, #E7F0F5 40%, #6B9DBA 78%);
  color: #fff;
  transform: rotateY(180deg);
}

.flip-card-back p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #fff;
}

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.testimonial-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonial-stars {
  color: var(--color-gold);
  font-size: 0.95rem;
  letter-spacing: 2px;
}

.testimonial-card p {
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.65;
  flex-grow: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: 0.88rem;
  color: var(--color-text-dark);
}

.testimonial-author span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ---------- CTA final ---------- */
.about-cta {
  background: radial-gradient(120% 140% at 85% 100%, #3e80c2 100%);
  padding: 70px 6%;
  text-align: center;
}

.about-cta-inner { max-width: 560px; margin: 0 auto; }

.about-cta h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  margin-bottom: 14px;
}

.about-cta p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 28px;
}

/* ---------- Footer ---------- */
.about-footer {
  text-align: center;
  padding: 30px 6%;
  background: #0E2740;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.82rem;
}

.about-footer-links {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.about-footer-links a {
  color: rgba(255, 255, 255, 0.75);
}

.about-footer-links a:hover { color: #fff; text-decoration: underline; }

.about-footer-links span { color: rgba(255, 255, 255, 0.35); }

/* ---------- Opiniones dinámicas (nuevo) ---------- */
.testimonials-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.testimonios-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  padding: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .mv-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .stats-strip-inner { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stat-item:nth-child(2) { border-right: none; }
}

@media (max-width: 640px) {
  .navbar { padding: 12px 5%; flex-wrap: wrap; }
  .navbar-actions { flex-wrap: wrap; }
  .about-hero { padding: 60px 6% 100px; }
  .features-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .stats-strip-inner { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--color-border); padding-bottom: 16px; }
  .stat-item:last-child { border-bottom: none; }
}
/* ============================================================
   Estilos EXCLUSIVOS de opiniones.html (formulario, selector
   de estrellas, avisos). No redefinen ninguna regla de arriba.
   ============================================================ */


.opinion-form-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 10px 26px rgba(20, 54, 86, 0.08);
  max-width: 620px;
  margin: 0 auto 56px;
}

.opinion-form-card h3 {
  font-size: 1.2rem;
  color: var(--color-text-dark);
  margin-bottom: 22px;
  font-weight: 700;
  text-align: center;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}

.form-row input[type="text"],
.form-row textarea {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--color-text);
  resize: vertical;
  transition: border-color 0.15s ease;
}

.form-row input[type="text"]:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

.opinion-form-card .btn {
  width: 100%;
  justify-content: center;
}

/* Selector de estrellas (widget de Uiverse.io by elijahgummer,
   adaptado: se añadió flex-direction:row-reverse y el tamaño del
   svg, necesarios para que el efecto "rellena hasta la estrella
   elegida" funcione; el resto es el CSS original del widget). */
.radio {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 10px;
}
.radio > input {
  position: absolute;
  appearance: none;
}
.radio > label {
  cursor: pointer;
  font-size: 30px;
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease;
}
.radio > label > svg {
  width: 1em;
  height: 1em;
  fill: #666;
  transition: fill 0.3s ease;
}
.radio > label::before,
.radio > label::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #ff9e0b;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
  animation: particle-explosion 1s ease-out;
}
.radio > label::before {
  top: -15px;
  left: 50%;
  transform: translateX(-50%) scale(0);
}
.radio > label::after {
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%) scale(0);
}
.radio > label:hover::before,
.radio > label:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.5);
}
.radio > label:hover {
  transform: scale(1.2);
  animation: pulse 0.6s infinite alternate;
}
.radio > label:hover > svg {
  fill: #ff9e0b;
  filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));
  animation: shimmer 1s ease infinite alternate;
}
.radio > input:checked + label > svg {
  fill: #ff9e0b;
  filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));
  animation: pulse 0.8s infinite alternate;
}
.radio > input:checked + label ~ label > svg,
.radio > input:checked + label > svg {
  fill: #ff9e0b;
}
@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}
@keyframes particle-explosion {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.5); }
}
@keyframes shimmer {
  0% { filter: drop-shadow(0 0 10px rgba(255, 158, 11, 0.5)); }
  100% { filter: drop-shadow(0 0 20px rgba(255, 158, 11, 1)); }
}
.radio input:checked ~ label svg {
  fill: #ffa723;
}

/* Mensajes de estado del formulario */
.form-mensaje {
  font-size: 0.86rem;
  margin-bottom: 14px;
  min-height: 1.2em;
}

.form-mensaje-error { color: #C0392B; }
.form-mensaje-exito { color: var(--color-success); }

/* Aviso de inicio de sesión requerido */
.login-aviso {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 10px 26px rgba(20, 54, 86, 0.08);
  max-width: 460px;
  margin: 0 auto 56px;
  text-align: center;
}

.login-aviso p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
  line-height: 1.6;
}

/* Botón "cargar más" oculto por defecto hasta que haya JS/datos */
#btn-cargar-mas { display: none; }
/* =============================================================================
   Responsive — refuerzo para todos los dispositivos
   (móviles muy pequeños, tablets, laptops, monitores grandes y TV)
   ============================================================================= */

/* Red de seguridad global (el body ya tenía overflow-x: hidden; se
   añade también a html e imágenes por si acaso). */
html {
  width: 100%;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* --- Tablets (641px–979px): paso intermedio de 2 columnas en Misión/
   Visión/Valores y en Testimonios, que antes saltaban directo a 1 --- */
@media (min-width: 641px) and (max-width: 979px) {
  .mv-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-card:last-child { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Móviles muy pequeños (320px–374px) --- */
@media (max-width: 374px) {
  .navbar { padding: 10px 4%; gap: 10px; }
  .navbar-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .navbar-actions .btn { width: 100%; justify-content: center; }
  .nav-brand { font-size: 1rem; }
  .about-hero { padding: 50px 5% 90px; }
  .about-hero p { font-size: 0.94rem; }
  .stats-strip-inner { padding: 24px 5%; transform: translateY(-40px); }
  .mv-card, .feature-card, .testimonial-card { padding: 20px 16px; }
  .opinion-form-card, .login-aviso { padding: 24px 18px; }
  .radio > label { font-size: 24px; }
}

/* --- Móviles en horizontal (poca altura) --- */
@media (max-height: 480px) and (orientation: landscape) {
  .about-hero { padding: 40px 6% 70px; }
  .about-hero-blob { display: none; }
}

/* --- Monitores grandes y televisores (1600px en adelante) --- */
@media (min-width: 1600px) {
  html { font-size: 17px; }
  .navbar { padding: 18px 4%; }
  .about-hero-inner { max-width: 940px; }
  .stats-strip-inner,
  .about-section,
  .about-section-alt > * {
    max-width: 1360px;
  }
  .opinion-form-card { max-width: 720px; }
}

/* --- Televisores 4K / pantallas ultra anchas (2200px en adelante) --- */
@media (min-width: 2200px) {
  html { font-size: 19px; }
  .about-hero-inner { max-width: 1080px; }
  .stats-strip-inner,
  .about-section,
  .about-section-alt > * {
    max-width: 1560px;
  }
  .opinion-form-card { max-width: 820px; }
}