/* easypay.css — Lo que comparten las páginas del sitio: barra de navegación,
   cabeceras de sección, botones, modales, banner de cookies y pie.
   Depende de tokens.css: aquí no se define ningún color, radio ni sombra nuevo.

   Lo propio de cada página (hero, tarifas, comisión…) sigue en su <style>. */

:root{
  --container:1100px;
  --nav-h:72px;
}

html{scroll-padding-top:96px}
body{line-height:1.6}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding:80px 0}

/* ═══ Navegación ═══ */
nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 95%,transparent);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px}
.nav-inner{max-width:var(--container);margin:0 auto;height:var(--nav-h);display:flex;
           align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:8px}
.nav-logo img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--primary)}
.nav-cta{background:var(--primary);color:#fff;border:none;padding:12px 20px;border-radius:var(--r-sm);
         font-size:14px;font-weight:600;transition:background .2s}
.nav-cta:hover{background:var(--primary-hover)}
.nav-mobile-actions{display:none;gap:8px;align-items:center}
.nav-mobile-actions a{font-size:12px;font-weight:600;padding:8px 12px;border-radius:var(--r-sm);white-space:nowrap}
.nav-mobile-actions .card-cola{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line)}
.nav-mobile-actions .card-cta{background:var(--primary);color:#fff}

/* ═══ Cabecera de sección ═══ */
.sh{text-align:center;margin-bottom:48px}
.sh h2{font-size:clamp(24px,3vw,30px);font-weight:800;color:var(--ink);line-height:1.2;
       letter-spacing:-.02em;margin-bottom:12px}
.sh p{max-width:640px;margin:0 auto;color:var(--ink-2);font-size:15px}

/* El énfasis dentro de un titular se hace con color, no con otra tipografía. */
.destacado{color:var(--primary)}

/* ═══ Botones ═══ */
.btn-primary{background:var(--primary);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
             font-weight:600;font-size:14px;transition:background .2s;display:inline-flex;
             align-items:center;gap:8px}
.btn-primary:hover{background:var(--primary-hover)}

/* ═══ Píldoras de estado ═══ */
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600}
.badge-primary{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line)}

/* ═══ Pie ═══ */
footer{background:var(--bg);border-top:1px solid var(--line);padding:40px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-copy{font-size:13px;color:var(--ink-3)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:13px;color:var(--ink-3);transition:color .2s}
.footer-links a:hover{color:var(--primary)}
.footer-legal{font-size:12px;color:var(--ink-3);text-align:center;margin-top:16px}

/* ═══ Modales (el markup lo inyecta assets/site.js) ═══ */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.5);
               backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);max-width:680px;
           width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-box-sm{max-width:480px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;
              border-bottom:1px solid var(--line)}
.modal-title{font-size:17px;font-weight:700;color:var(--ink)}
.modal-close{background:none;border:none;font-size:24px;color:var(--ink-3);padding:0 4px;line-height:1}
.modal-close:hover{color:var(--ink)}
.modal-body{padding:24px;overflow-y:auto;font-size:14px;color:var(--ink-2);line-height:1.7}
.modal-body h3{font-size:15px;font-weight:700;color:var(--ink);margin:20px 0 8px}
.modal-body h3:first-of-type{margin-top:0}
.modal-body ul{padding-left:20px;margin:8px 0 16px}
.modal-body li{margin-bottom:4px}
.modal-body a{color:var(--primary)}
.modal-updated{font-size:13px;color:var(--ink-3);margin-bottom:16px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--line);text-align:right}
.modal-btn-primary{background:var(--primary);color:#fff;border:none;padding:12px 20px;
                   border-radius:var(--r-sm);font-weight:600;font-size:14px}
.modal-btn-primary:hover{background:var(--primary-hover)}

/* ═══ Formulario de contacto ═══ */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;height:42px;padding:10px 14px;background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:14px;color:var(--ink);outline:none}
.form-group textarea{height:auto}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-3)}
.form-privacy{font-size:13px;color:var(--ink-3);margin-bottom:16px;text-align:center}

/* ═══ Banner de cookies ═══ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--card);
               border-top:1px solid var(--line);padding:20px 24px;box-shadow:var(--shadow)}
.cookie-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie-text{flex:1;min-width:280px}
.cookie-title{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:4px}
.cookie-text p{font-size:13px;color:var(--ink-3)}
.cookie-text a{color:var(--primary)}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-btn-accept{background:var(--primary);color:#fff;border:none;padding:10px 20px;
                   border-radius:var(--r-sm);font-weight:600;font-size:14px}
.cookie-btn-reject{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong);
                   padding:10px 20px;border-radius:var(--r-sm);font-size:14px}

@media(max-width:1000px){
  .nav-links{gap:16px}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-mobile-actions{display:flex}
  .nav-logo img{height:24px}
  .footer-inner{flex-direction:column;text-align:center}
}
@media(max-width:600px){
  section{padding:56px 0}
  /* 44px de alto tactil sin ensanchar: a 375px los dos botones y el logo no
     caben si se les da relleno horizontal (el nav ya iba justo de serie). */
  nav{padding:0 16px}
  .nav-mobile-actions{gap:6px}
  .nav-mobile-actions a{display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:12px}
  .cookie-actions button{min-height:44px}
}