/* =========================================================================
   Grupo Pro Personae — España
   Basado en el sistema de CAPPAC (México), adaptado al diseño España.
   NOTA: los hex exactos deben confirmarse contra el Figma (no se pudo leer
   variables por acceso). Ajusta --navy / --blue-900 si el diseñador los define.
   ========================================================================= */
:root {
  --blue-900: #004a8f;   /* azul principal de la marca (botones, títulos, secciones, overlays) */
  --navy: #004a8f;       /* mismo azul para las secciones sólidas (ganamos, faq, footer, íconos) */
  --gray-50: #f7f7f7;
  --text-dark: #0f1b33;
  --accent: #f4b300;
  --radius: 18px;
  --font-main: "Schibsted Grotesk", sans-serif;
}

.bg-navy { background-color: var(--navy) !important; }
.bg-blue-900 { background-color: var(--blue-900) !important; }
.color-blue-900 { color: var(--blue-900) !important; }
.color-navy { color: var(--navy) !important; }

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  background: #fff;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-weight: 700; }

.btn-pill {
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  background: #fff;
  color: var(--blue-900);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.btn-pill:hover { background: #eef4fb; color: var(--blue-900); }

/* ================= HERO ================= */
/* Foto de familia con degradado azul encima para legibilidad del texto. */
.hero {
  background:
    url("../images/hero.png") center/cover no-repeat;
  color: #fff;
  height: 100dvh; /* altura fija (como MX) para que el h-100 + align-items-center centren el texto */
}

/* ================= INFO BAND ================= */
/* Fondo con textura de círculos (bg-cappac.png), igual que la LP de México. */
.info-band {
  background-image: url("../images/bg-cappac.png");
  background-size: cover;
  background-position: center;
}

/* ================= GANAMOS (testimonios) ================= */
.section-ganamos {
  background-image: url("../images/bg-testimonios.png");
  color: #fff;
  background-size: cover;
  background-position: center;
}
.titulo-ganamos { font-weight: 700; letter-spacing: 2px; text-align: center; margin-bottom: 40px; }

.swiper { padding-bottom: 40px; }

.card-testimonio { overflow: hidden; display: flex; width: 80%; }
.swiper-backface-hidden .swiper-slide { display: flex; justify-content: center; }

.img-placeholder {
  width: 65%;
  aspect-ratio: 1/1;
  min-width: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0 !important;
  cursor: pointer;
}
.h-cappac { height: 100%; align-items: center; }

.card-content { flex: 1; position: relative; padding: 10px; }
.card-border { height: 100%; width: 100%; border: 1px solid #fff !important; }

.img-quote { width: 100px; }
.caso { font-size: 12px; opacity: 0.8; }

.ganamos-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 15px; }
.ganamos-prev, .ganamos-next { color: #fff; font-size: 2rem; cursor: pointer; user-select: none; }

.swiper-pagination {
  position: relative !important;
  width: auto !important;
  bottom: auto !important;
  top: auto !important;
}
.swiper-pagination-bullet { width: 15px !important; height: 15px !important; border: 2px solid #fff; background: #fff !important; opacity: 0.5; }
.swiper-pagination-bullet-active { opacity: 1; }

/* Plyr */
.plyr { height: 100% !important; width: 100% !important; }
.plyr--video .plyr__controls { background-color: #9e9e9e; color: #fff; }
.plyr__poster { height: 100% !important; background-size: cover !important; }
.plyr__control--overlaid { background-color: #fcfcfc74 !important; }
.plyr__control { color: #fff; }
.plyr__control:hover { background-color: #303030; }
.plyr.plyr--stopped .plyr__controls { display: none; }

/* ================= CONTACTO ================= */
.contacto-section {
  background-image: url("../images/bg-cappac.png");
  background-size: cover;
  background-position: center;
}
.contacto-title { font-weight: 700; margin-bottom: 15px; color: var(--blue-900); }
.contacto-input { border-radius: 20px; margin-bottom: 10px; padding: 15px 25px; border: 1px solid #dfe5f0; }
.contacto-textarea { resize: none; min-height: 120px; }

/* ================= FAQ ================= */
.faq-section {
  background: url("../images/bglib.png") center/cover;
  color: #fff;
  padding: 60px 0;
}
.faq-left { padding-right: 40px; }
.faq-icon { margin-bottom: 20px; }
.faq-title { margin-bottom: 15px; }

.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: 1.5rem;
}
.faq-arrow { transform: rotate(0deg); transition: transform 0.25s ease; margin-left: 10px; }
.faq-question[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); }
.faq-answer { padding-bottom: 15px; font-size: 1.1rem; opacity: 0.9; }

/* ================= GRACIAS ================= */
/* Banner typ.png (3 fotos) con overlay navy para contraste del texto. */
.bg-gracias {
  background:
    url("../images/bg-gracias.png") center/cover no-repeat;
  color: #fff;
}

/* ================= FOOTER ================= */
.footer { background: var(--navy); color: #fff; padding: 26px 0; font-size: 14px; }
.footer-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.45); margin: 18px 0; opacity: 1; }
.footer-info { color: rgba(255, 255, 255, 0.9); font-size: 1rem; }

.social { display: flex; gap: 12px; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.social a:hover { background: #fff; color: var(--navy); }

/* ================= Responsive ================= */
@media (max-width: 991px) {
  .card-testimonio { flex-direction: column; height: auto; width: 100%; }
  .img-placeholder { width: 100% !important; aspect-ratio: 1/1; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: 26px; }
}