/* =========================================================
   Pipol Pay – réplica estática (Home / Personas / Empresas)
   Medidas tomadas del sitio WordPress original (Avada).
   ========================================================= */

@font-face {
  font-family: "FA Solid";
  src: url("/fonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

:root {
  --green: #80ad54;          /* color primario (títulos, iconos, hover) */
  --btn: #8cac59;            /* fondo botones */
  --btn-hover: #80ad54;
  --purple: #8766d9;         /* botón LOGIN */
  --text: #606060;
  --site-width: 1140px;
  --hs: 1;                   /* escala del hero (se calcula en JS: min(1, vw/1400)) */
}

*, *::before, *::after { box-sizing: border-box; }

html { background: #d7d6d6; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 19px/25px "Roboto", Arial, Helvetica, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#wrapper { position: relative; background: #fff; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: #333; text-decoration: none; transition: color .2s; }
a:hover { color: var(--green); }
p { margin: 0 0 20px; }
h1, h2, h3, h4, h5, h6 { font-family: "Poppins", Arial, sans-serif; margin: 0; }
.skip-link { position: absolute; left: -9999px; }

.fa { font-family: "FA Solid"; font-weight: 900; font-style: normal; display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased; }
.fa-mobile-alt::before { content: "\f3cd"; }
.fa-address-card::before { content: "\f2bb"; }
.fa-envelope-open-text::before { content: "\f658"; }
.fa-dollar-sign::before { content: "\f155"; }
.fa-history::before { content: "\f1da"; }
.fa-university::before { content: "\f19c"; }
.fa-percent::before { content: "\f295"; }
.fa-qrcode::before { content: "\f029"; }
.fa-desktop::before { content: "\f108"; }
.fa-tv::before { content: "\f26c"; }
.fa-credit-card::before { content: "\f09d"; }
.fa-calendar-check::before { content: "\f274"; }
.fa-bars::before { content: "\f0c9"; }
.fa-plus::before { content: "\f067"; }
.fa-minus::before { content: "\f068"; }
.fa-chevron-up::before { content: "\f077"; }
.fa-angle-left::before { content: "\f104"; }
.fa-angle-right::before { content: "\f105"; }

/* ---------- Botones (Avada "flat") ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Poppins", Arial, sans-serif; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: #fff !important; background: var(--btn); border-radius: 4px; text-align: center;
  transition: background .2s;
}
.btn:hover { background: var(--btn-hover); }
.btn-small { font-size: 12px; line-height: 14px; padding: 9px 20px; }
.btn-xlarge { font-size: 18px; line-height: 21px; padding: 17px 40px; }
.btn-round { border-radius: 30px; }

/* ---------- Header (Personas / Empresas) ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10000;
  background: #fff; height: 160px; padding: 0 30px;
  transition: height .25s, box-shadow .25s;
}
.site-header .row { max-width: var(--site-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.logo { display: block; margin: 30px 0; line-height: 0; transition: margin .25s; }
.logo img { width: 185px; height: 100px; max-height: 100px; transition: max-height .25s, width .25s; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 100%; }
.main-nav li { margin-left: 45px; height: 100%; }
.main-nav li:first-child { margin-left: 0; }
.main-nav a {
  display: flex; align-items: center; height: 160px;
  font: 600 14px/14px "Poppins", Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text);
  transition: color .2s, height .25s;
}
.main-nav a:hover, .main-nav li.current > a { color: var(--green); }
.main-nav li.menu-btn a span { display: flex; padding: 9px 20px; font-size: 12px; line-height: 14px; color: #fff; background: var(--btn); border-radius: 4px; transition: background .2s; }
.main-nav li.menu-btn a:hover span { background: var(--btn-hover); }
.main-nav li.morado a span { background: var(--purple); }
.main-nav li.morado a:hover span { background: #7a5ac9; }
.menu-toggle { display: none; }

/* header pegajoso (sticky con reducción de altura, como Avada) */
.site-header.is-sticky { position: fixed; height: 65px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.site-header.is-sticky .logo { margin: 0; }
.site-header.is-sticky .logo img { max-height: 52px; width: auto; }
.site-header.is-sticky .main-nav a { height: 65px; }
.site-header.in-flow { position: relative; }
.site-header.in-flow.is-sticky { position: fixed; }
.header-spacer { display: none; height: 160px; }
.site-header.in-flow.is-sticky + .header-spacer { display: block; }

/* ---------- Páginas con plantilla por defecto (Terms, Support, Privacy) ---------- */
.page-main { padding: 55px 30px 40px; background: #fff; }
.page-row { max-width: var(--site-width); margin: 0 auto; }
.terms-content p { margin: 0 0 20px; }
.terms-content ul, .terms-content ol { margin: 0 0 19px; padding: 0 0 0 40px; }
.terms-content li { margin-bottom: 0; }
.terms-content a { color: #606060; text-decoration: underline; }
.terms-content a:hover { color: var(--green); }
.terms-content table { border-collapse: collapse; max-width: 100%; margin-bottom: 20px; }
.terms-content td { border: 0; padding: 1px; vertical-align: top; }
.support-section { box-sizing: content-box; min-height: calc(100vh - 235px); padding-bottom: 15%; display: flex; align-items: center; }
.support-row { width: 100%; display: flex; }
.support-side { width: 16.8%; margin-right: 4%; }
.support-side:last-child { margin-right: 0; }
.support-text { width: 55.2%; margin-right: 4%; margin-bottom: 20px; font-size: 24px; line-height: 25px; text-align: center; }
.support-text a { color: #606060; }
.support-text a:hover { color: var(--green); }
.pdf-embed object { display: block; width: 100%; }

/* ---------- Hero (réplica del Slider Revolution, rejilla 1400x868) ---------- */
.hero { position: relative; width: 100%; height: calc(100vw * 868 / 1400); max-height: 868px; overflow: hidden; background: #fff; }
.hero-grid { position: absolute; top: 0; left: 50%; width: 1400px; height: 868px; margin-left: -700px; transform: scale(var(--hs)); transform-origin: 50% 0; }
.hero-title { position: absolute; left: 31px; top: 50%; width: 735px; transform: translateY(calc(-50% - 5px)); font: 700 90px/90px "Poppins", Arial, sans-serif; color: #606060; white-space: normal; }
.hero-btn {
  position: absolute; left: 29px; top: calc(50% + 210px); transform: translateY(-50%) scale(calc(1 / var(--hs))); transform-origin: 0 50%;
  display: inline-block; padding: 0 40px; font: 600 16px/48px "Poppins", Arial, sans-serif; letter-spacing: 1px; color: #fff !important;
  background: #81af54; border-radius: 30px; white-space: nowrap; transition: background .2s;
}
.hero-btn:hover { background: #80ad54; }
.hero-img { position: absolute; left: 786px; top: 221px; width: 673px; }
.hero-img img { width: 100%; height: auto; }
.hero-store { position: absolute; top: 633px; width: 150px; height: 52px; }
.hero-store img { width: 150px; height: 52px; }
.hero-store.apple { left: 32px; }
.hero-store.google { left: 209px; }

/* ---------- Estructura de secciones (equivale a fusion-fullwidth / columnas) ---------- */
main { position: relative; padding: 0 30px; background: #fff; }
.section { position: relative; margin: 0 -30px; padding: 0 30px; background-repeat: no-repeat; background-size: cover; }
.section > .row { max-width: var(--site-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; }
.col { position: relative; margin-bottom: 20px; min-height: 1px; }
.col.mb0 { margin-bottom: 0; }
.col.mt27 { margin-top: 27px; }
.col.pt50 { padding-top: 50px; }
.mr4 { margin-right: 4%; }
.w-full { width: 100%; }
.w-half { width: 45%; }
.w-two-third { width: 66%; margin-left: 16.5%; margin-right: auto; }
.w-third { width: 28%; }
.w-sixth { width: 14.6667%; }
.w-sixth-b { width: 14%; }
.w-fifth { width: 17.6%; }
.w-fifth-b { width: 16.8%; }
.w-fifth-c { width: 17.2%; }
.w-two-fifth { width: 35.2%; }
.center { text-align: center; }

/* espaciadores (fusion-separator) */
.sep { clear: both; width: 100%; height: 2px; }
.img-missing { height: 20px; }
.sep0 { margin-bottom: 0; }
.sep10 { margin-bottom: 10px; }
.sep15 { margin-bottom: 15px; }
.sep50 { margin-bottom: 50px; }

/* visibilidad (Avada: small <= 640, medium 641-1024, large > 1024) */
@media (max-width: 1024px) { .only-lg { display: none !important; } }
@media (min-width: 1025px) { .only-smmd { display: none !important; } }

/* ---------- Tipografía de títulos ---------- */
.t-h3 { font: 700 50px/1.5 "Poppins", Arial, sans-serif; color: var(--green); text-align: center; margin-bottom: 5px; }
.t-h2 { font: 400 30px/1.25 "Poppins", Arial, sans-serif; color: var(--text); text-align: center; margin-bottom: 5px; }
.t-h4 { font: 600 20px/1.5 "Poppins", Arial, sans-serif; color: var(--green); text-align: center; margin-bottom: 10px; }
.t-h4.left { text-align: left; }
.t-h4.mb0 { margin-bottom: 0; }
.t-small { font: 700 14px/1.5 "Poppins", Arial, sans-serif; letter-spacing: 1px; color: var(--text); text-align: center; margin-bottom: 31px; }
.t-18 { font: 700 18px/1.5 "Poppins", Arial, sans-serif; color: var(--text); text-align: center; margin: 18px 0; }
.text-black { font-size: 18px; color: #000; text-align: center; margin-bottom: 20px; }

/* iconos grandes (fusion icon element) */
.icon-wrap { text-align: center; }
.icon-big { display: inline-block; margin-top: 2px; margin-right: 10px; color: var(--green); border-radius: 50%; text-align: center; transition: color .3s; }
.icon-big:hover { color: #2ea968; }
.icon-158 { font-size: 79.2px; width: 158.4px; height: 158.4px; line-height: 156.4px; }
.icon-200 { font-size: 100.32px; width: 200.64px; height: 200.64px; line-height: 198.64px; }
.icon-img { display: block; width: 45px; height: 45px; margin: 0 auto; }

/* ---------- Vídeo YouTube ---------- */
.video { margin: 0 auto; width: 100%; max-width: 800px; text-align: center; }
.video .ratio { position: relative; width: 100%; padding-top: 60%; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-600 { max-width: 600px; }

/* ---------- Carrusel de vídeos (flexslider) ---------- */
.vslider { position: relative; margin: 0 auto 60px; max-width: 100%; text-align: center; }
.vslider .slides { list-style: none; margin: 0; padding: 0; position: relative; }
.vslider .slides li { display: none; }
.vslider .slides li.active { display: block; animation: vfade .6s ease; }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
.vslider .nav {
  position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; line-height: 30px; z-index: 100;
  color: #fff !important; background: rgba(0,0,0,.6); font-size: 14px; text-align: center; opacity: 0; transition: opacity .3s;
}
.vslider .nav.prev { left: 0; }
.vslider .nav.next { right: 0; }
.vslider:hover .nav { opacity: .8; }
.vslider .nav:hover { opacity: 1; }

/* ---------- Cajas de contenido (Empresas, sección comisión) ---------- */
.cboxes { display: flex; flex-wrap: wrap; margin-bottom: 60px; }
.cbox { width: 50%; margin-bottom: 20px; padding: 31px 30px 51px; }
.cbox p { color: #747474; text-align: center; margin: 0; }

/* ---------- Acordeón FAQ ---------- */
.faq-cols { display: flex; justify-content: space-between; width: 100%; }
.faq-col { width: 45%; margin-bottom: 20px; }
.faq-item + .faq-item { margin-top: 12px; }
.faq-item.nogap { margin-top: 0; }
.faq-q { margin: 0; }
.faq-q a { display: flex; align-items: flex-start; padding: 10px 0; font: 600 21px/1.5 "Poppins", Arial, sans-serif; color: #606060; }
.faq-q a:hover, .faq-item.open .faq-q a { color: var(--green); }
.faq-q .ico { flex: 0 0 18px; width: 18px; font-size: 18px; line-height: 31.5px; text-align: center; color: #606060; }
.faq-q .ico::before { content: "\f067"; font-family: "FA Solid"; font-weight: 900; }
.faq-item.open .faq-q .ico::before { content: "\f068"; }
.faq-q .heading { margin-left: 18px; }
.faq-a { display: none; padding: 5px 0 15px 36px; color: #606060; }
.faq-item.open .faq-a { display: block; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: #606060; text-decoration: underline; }
.faq-a a:hover { color: var(--green); }

/* ---------- Home (intro) ---------- */
.home-main { padding: 55px 30px 40px; }
.home-intro { margin: 0 -30px; padding: 0 80px; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.home-intro .row { width: 100%; max-width: 1185.6px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.home-intro .col { width: 50%; padding: 0 3.84%; display: flex; flex-direction: column; align-items: center; }
.home-intro .col-img { margin-bottom: 80px; }
.home-intro .col-btns { margin-bottom: 20px; }
.home-intro .col-img img { width: 100%; }
.home-intro .sep80 { height: 80px; width: 100%; }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 10; background: #23282d; padding: 18px 30px 24px; }
.site-footer .row { max-width: var(--site-width); margin: 0 auto; }
.copyright { font-size: 12px; line-height: 25px; color: #a7a7a7; text-align: center; }
.copyright a { color: #a7a7a7; }
.copyright a:hover { color: var(--green); }

/* ---------- Ir arriba ---------- */
#toTop {
  position: fixed; right: 75px; bottom: 0; z-index: 100000; width: 48px; height: 35px; line-height: 35px;
  background: #333; color: #fff !important; border-radius: 4px 4px 0 0; text-align: center; font-size: 18px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
#toTop.show { opacity: 1; visibility: visible; }
#toTop:hover { background: var(--green); }
#toTop .fa { line-height: 35px; }

/* ---------- Popup (Popup Builder, tema 6: imagen) ---------- */
.popup-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: transparent; }
.popup-overlay.show { display: flex; animation: pfade .5s ease; }
@keyframes pfade { from { opacity: 0; } to { opacity: 1; } }
.popup-box { position: relative; width: 60%; max-width: 450px; background: #fff; }
.popup-box img.popup-img { display: block; width: 100%; height: auto; }
.popup-close { position: absolute; top: -18px; right: -18px; width: 30px; height: 30px; cursor: pointer; z-index: 2; }

/* anclas con desplazamiento para el header pegajoso */
.anchor { scroll-margin-top: 65px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1400px) {
  .hero { height: calc(100vw * 868 / 1400); }
}

/* Menú móvil (Avada: side_header_break_point 1004) */
@media (max-width: 1004px) {
  .site-header { position: relative; height: auto; padding: 20px 30px; }
  .site-header.is-sticky { position: relative; height: auto; box-shadow: none; }
  .site-header .row { flex-wrap: wrap; align-items: center; }
  .logo { margin: 0; }
  .site-header.is-sticky .logo img { max-height: 100px; width: 185px; }
  .menu-toggle { display: block; font-size: 21px; line-height: 21px; color: #8e8e8e !important; }
  .main-nav { display: none; width: 100%; margin-top: 20px; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; height: auto; align-items: stretch; }
  .main-nav li { margin: 0; height: auto; }
  .main-nav a, .site-header.is-sticky .main-nav a { display: block; height: auto; padding: 0 30px; font-size: 12px; line-height: 35px; text-align: center; }
  .main-nav a:hover { color: #81af54; }
  .main-nav li.menu-btn a span, .main-nav li.morado a span { display: block; padding: 0; background: transparent; color: inherit; font-size: 12px; line-height: 35px; }
  .main-nav li.menu-btn a:hover span, .main-nav li.morado a:hover span { background: transparent; }
  .hero-btn { transform: translateY(-50%) scale(calc(1 / var(--hs))); }
}

/* tablet y móvil: columnas al 100 % (Avada medium/small) */
@media (max-width: 1024px) {
  .section > .row > .col { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .section > .row > .col[style*="padding:0 100px"] { padding-left: 0 !important; padding-right: 0 !important; }
  .icon-col .t-small + .sep10 { height: 1px; margin-bottom: 0; }
  .col.empty-half { margin-bottom: 40px; }
  .w-two-third, .w-half, .w-third, .w-sixth, .w-sixth-b, .w-fifth, .w-fifth-b, .w-fifth-c, .w-two-fifth { width: 100%; }
  .faq-cols { flex-direction: column; }
  .faq-col { width: 100%; }
  .home-intro .col { width: 100%; padding: 0 1.92%; }
  .home-intro { min-height: 0; }
  .support-section { min-height: 0; display: block; }
  .support-row { display: block; }
  .support-side, .support-text { width: 100%; margin-right: 0; }
  .support-side { height: 1px; margin-bottom: 20px; }
  .cbox { width: 100%; margin-bottom: 55px; }
  .vslider { max-width: 190px; }
}

@media (max-width: 640px) {
  .t-h3 { font-size: 38.93px; }
  .t-h2 { font-size: 29.23px; }
  .home-intro { padding-top: 91px; padding-bottom: 312px; }
  .hero-title { }
}