:root {
  /* Colores - Tokens de diseño Figma */
  --primary-blue: #4a60cf;
  --secondary-orange: #ff8e50;
  --text-dark: #29282d;
  --text-medium: #5c5c5c;
  --text-light: #353535;
  --bg-white: #ffffff;
  --bg-light: #f8fcff;
  --accent-cyan: #05dbf3;
  
  /* Tipografía */
  --font-inter: 'Inter', sans-serif;
  --font-golos: 'Golos Text', sans-serif;
  
  /* Espaciado */
  --container-max: 1116px;
  --container-padding: 40px;
  --gap-lg: 24px;
  --gap-md: 16px;
  --gap-sm: 8px;
  
  /* Border radius */
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Sombras */
  --shadow-nav: 0px 2px 2px 0px rgba(74, 96, 207, 0.25);
  --shadow-card: 0px 2px 4px 0px rgba(226, 167, 107, 0.23);
  --shadow-footer-top: 0px -2px 4px 0px #ced4da;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-white);
  color: var(--text-dark);
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  gap: var(--gap-md);
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 99px;
  width: auto;
}

/* Navigation */
.nav {
  flex: 1;
}

.nav-links {
  display: flex;
  gap: var(--gap-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li a {
  color: var(--text-dark);
  text-decoration: none;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
  padding: 6px 16px;
  display: block;
}

.nav-links li:first-child a {
  color: var(--secondary-orange);
}

.nav-cta {
  margin-left: auto;
}

.nav-cta a {
  display: inline-block;
  background: var(--bg-light);
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
}

/* Hamburger (mobile) */
.hamburger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-right:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-dark);margin:4px 0;border-radius:2px;transition:transform .18s,opacity .18s}

/* When menu open state on body, show mobile nav as column */
body.menu-open .nav-links{display:flex;flex-direction:column;background:var(--bg-white);position:absolute;top:72px;left:0;right:0;padding:16px;box-shadow:0 8px 24px rgba(6,21,38,0.08)}
body.menu-open .nav-cta{display:block;margin:12px 0}

/* Hamburger active -> transform to X */
.hamburger.is-active span:nth-child(1){transform: translateY(6px) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity: 0}
.hamburger.is-active span:nth-child(3){transform: translateY(-6px) rotate(-45deg)}


.btn-primary{display:inline-block;background:var(--secondary-orange);color:var(--bg-light);padding:16px 24px;border-radius:var(--radius-md);text-decoration:none;font-weight:600;border:0}
.btn-outline{display:inline-block;background:var(--bg-light);color:var(--primary-blue);padding:12px 24px;border-radius:var(--radius-md);text-decoration:none;border:2px solid var(--primary-blue);font-weight:600}
.btn-outline-ghost{display:inline-block;background:var(--bg-light);color:var(--primary-blue);padding:16px 24px;border-radius:var(--radius-md);text-decoration:none;border:2px solid var(--primary-blue);font-weight:600}

/* Hero */
.hero{padding:0}
.hero-inner{display:flex;align-items:center;gap:var(--gap-lg);padding:0 var(--gap-md)}
.hero-copy{flex:1;max-width:546px;display:flex;flex-direction:column;gap:var(--gap-lg)}
.hero-copy h1{font-size:48px;font-weight:600;line-height:1;margin:0;color:var(--text-dark)}
.lead{font-family:var(--font-inter);font-size:16px;font-weight:600;line-height:1.3;color:var(--text-medium);margin:0}
.hero-actions{display:flex;flex-direction:column;gap:var(--gap-md);width:100%}
.hero-media{flex:1;display:flex;align-items:center;justify-content:center;padding:10px}
.hero-media img{width:100%;max-width:100%;border-radius:var(--radius-lg);object-fit:cover}

/* Features */
.features{padding:0;display:flex;flex-direction:column;gap:var(--gap-lg)}
.section-title{margin:0;padding:0 var(--gap-md);font-size:36px;font-weight:700;line-height:1.3;text-align:center;color:var(--text-dark)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-lg)}
.feature-card{background:var(--bg-light);border:1px solid var(--primary-blue);border-radius:var(--radius-lg);padding:0;display:flex;flex-direction:column;height:247px}
.feature-card .icon-wrapper{background:var(--bg-light);border:1px solid var(--primary-blue);border-radius:var(--radius-lg);height:167px;display:flex;align-items:center;justify-content:center}
.feature-card h3{margin:0;padding:10px;font-size:20px;font-weight:600;line-height:1.3;text-align:center;color:var(--text-light);flex:1;display:flex;align-items:center;justify-content:center}

/* Testimonials */
.testimonials{padding:0;display:flex;flex-direction:column;gap:var(--gap-lg)}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg)}
.test-card{background:rgba(255,142,80,0.2);border-radius:var(--radius-lg);padding:var(--gap-md);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--gap-sm)}
.test-card .avatar{display:flex;justify-content:center;padding:4px}
.test-card .avatar img{width:80px;height:80px;border-radius:50%;object-fit:cover}
.test-card p{margin:0;padding:8px 0;font-family:var(--font-golos);font-size:16px;color:var(--text-light)}
.test-card cite{font-family:var(--font-golos);font-size:16px;color:var(--text-light)}

/* Partners row */
.partners{padding:0;display:flex;flex-direction:column;gap:var(--gap-lg)}
.partners-row{display:flex;gap:var(--gap-sm);justify-content:center;flex-wrap:wrap}
.dot{width:120px;height:120px;border-radius:50%;background:#e6eefc}

/* CTA Banner */
.cta-banner{background:var(--primary-blue);padding:0;width:100%}
.cta-inner{display:flex;flex-direction:column;gap:var(--gap-lg);align-items:center;justify-content:center;padding:48px 40px;text-align:center;color:var(--bg-light)}
.cta-banner h2{margin:0;font-size:36px;font-weight:700;line-height:1.3;color:var(--bg-light)}
.cta-banner p{margin:0;font-size:28px;font-weight:600;line-height:1.3;color:var(--bg-light)}

/* Contact */
.contact{padding:0;display:flex;flex-direction:column;gap:var(--gap-lg);padding-bottom:40px}
.contact-inner{display:flex;gap:68px;align-items:center;justify-content:center}
.contact-media img{width:534px;height:auto;border-radius:var(--radius-md);object-fit:cover}
.contact-form{display:flex;flex-direction:column;gap:var(--gap-md);width:482px}
.contact-form label{display:flex;flex-direction:column;gap:12px}
.contact-form label span{font-family:var(--font-inter);font-size:14px;color:var(--text-dark)}
.contact-form input,.contact-form textarea{background:var(--bg-light);border:1px solid var(--accent-cyan);border-radius:4px;padding:12px 8px;font-family:var(--font-golos);font-size:16px;color:var(--text-medium)}
.contact-form textarea{min-height:133px;resize:vertical}
.contact-form button{background:var(--secondary-orange);color:var(--bg-light);border:none;padding:16px 24px;border-radius:var(--radius-md);font-family:var(--font-inter);font-size:16px;font-weight:600;cursor:pointer}

/* Footer: nueva variante desktop (centro logo + 3 columnas) */
.site-footer{background:var(--primary-blue);color:var(--bg-light);width:100%;margin-top:0;box-shadow:var(--shadow-footer-top)}
.footer-top{padding:48px 0}
.footer-top .footer-top-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
.footer-logo{display:flex;align-items:center;justify-content:center;width:100%}
.footer-logo img{height:72px;width:auto}
.footer-columns{display:flex;gap:48px;align-items:flex-start}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col h5{margin:0;font-family:var(--font-inter);font-weight:700}
.footer-col p, .footer-col a{margin:0;color:var(--bg-light);text-decoration:none}
.footer-social-icons{display:flex;gap:12px;align-items:center}

.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:18px 0}
.footer-bottom .footer-bottom-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);display:flex;justify-content:center}
.footer-bottom p{margin:0;color:rgba(248,252,255,0.85)}

/* Legacy / mobile footer (stacked) kept for small screens */
.footer-legacy{display:none}

@media (max-width: 760px){
  .footer-top .footer-top-inner{flex-direction:column;align-items:flex-start;padding:0 20px}
  .footer-columns{flex-direction:column;gap:20px;width:100%}
  .footer-logo{order:-1;margin-bottom:8px}
  .footer-logo img{height:56px}
  .footer-bottom .footer-bottom-inner{justify-content:flex-start}
}

@media (max-width: 480px){
  .footer-top{padding:28px 0}
  .footer-logo img{height:48px}
}

/* Pagar page helpers */
.hero-centered{padding:40px 0 8px 0;text-align:center}
.hero-centered h1{font-size:36px;margin:0 0 8px 0}
.hero-centered .lead{font-size:18px;color:var(--text-medium);max-width:820px;margin:0 auto}
.hero-sep{height:4px;background:linear-gradient(90deg,var(--accent-cyan), rgba(5,219,243,0.12));margin:28px auto;width:90%;max-width:900px;border-radius:2px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.form-grid label{display:block}

@media (max-width:760px){
  .form-grid{grid-template-columns:1fr}
}

/* Form card used on pagar.html */
.form-card{background:var(--bg-white);border-radius:12px;padding:24px;border:1px solid rgba(74,96,207,0.06);max-width:760px;margin:24px auto;box-shadow:0 4px 16px rgba(6,21,38,0.04)}
.form-card h4{margin:0 0 8px 0;font-size:18px;color:var(--text-dark)}
.form-card p{margin:0 0 14px 0;color:var(--text-medium);font-size:14px}
.form-row{display:flex;flex-direction:column;gap:12px}
.input-with-icon{display:flex;align-items:center;gap:10px;border:1px solid rgba(5,219,243,0.25);padding:10px 12px;border-radius:6px;background:transparent}
.input-with-icon .icon{width:28px;display:flex;align-items:center;justify-content:center}
.input-field{flex:1;border:0;background:transparent;font-size:15px;padding:6px;outline:none}
.input-field:focus{outline:none}

/* Select appearance: remove native arrow, add custom chevron */
.input-field.select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:28px;background-image:none}
.input-with-icon.selectable{position:relative}
.input-with-icon.selectable::after{content:'';position:absolute;right:12px;width:12px;height:12px;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:12px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23055FB6' d='M7 10l5 5 5-5z'/></svg>")}
.input-with-icon.selectable .input-field{padding-right:36px}

/* Focus and error states */
.input-with-icon:focus-within{border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(5,219,243,0.08)}
.field-error{color:#d04444;font-size:13px;margin-top:6px}

/* Card help button (small circular) aligned to the right of the card */
.form-card-wrapper{position:relative}
.card-help{position:absolute;right:-28px;top:24px;width:48px;height:48px;border-radius:50%;background:var(--primary-blue);color:var(--bg-light);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(74,96,207,0.24);border:none;cursor:pointer}
.card-help:hover{transform:translateY(-3px)}

/* Small info dot on selects (left of chevron) */
.input-with-icon .info-dot{position:absolute;right:36px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(74,96,207,0.06);display:flex;align-items:center;justify-content:center;color:var(--primary-blue);font-size:12px}

/* Buttons inside card laid out side-by-side */
.form-card .card-actions{display:flex;gap:12px;margin-top:12px}
.form-card .card-actions .btn-outline{background:transparent;color:var(--primary-blue);border:2px solid var(--primary-blue);padding:10px 18px;border-radius:8px}
.form-card .card-actions .btn-primary{padding:10px 18px;border-radius:8px}
.input-field::placeholder{color:var(--text-medium)}

@media (max-width:760px){
  .form-card{padding:18px;margin:16px}
}

/* Responsive */
@media (max-width: 1000px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .test-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{gap:16px}
}
@media (max-width: 760px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .nav{width:100%;position:relative}
  .nav-links{justify-content:flex-start;flex-wrap:wrap}
  .nav-cta{margin-left:0;margin-top:8px}
  .hamburger{display:block}
  /* hide inline desktop links by default on mobile; show only when menu-open */
  .nav-links{display:none}

  .hero-inner{flex-direction:column}
  .hero-copy h1{font-size:26px}
  .hero-media img{max-width:100%}

  .features-grid{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column}
  .contact-inner{flex-direction:column}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* Auth page specific styles */
.auth-page{padding:56px 0 80px}
.auth-inner{display:flex;gap:32px;justify-content:center;align-items:center;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
.auth-left{width:426px;padding:12px 16px}
.auth-right{width:426px;padding:40px 16px;display:flex;align-items:center;justify-content:center}
.login-form{display:flex;flex-direction:column;gap:12px;background:var(--bg-white);padding:12px 16px 16px 16px;border-radius:12px}
.login-form h1{margin:0 0 6px 0;font-size:30px;font-weight:700}
.login-form p.lead{font-size:14px;color:var(--text-medium);margin:0 0 12px 0}
.login-form label{display:flex;flex-direction:column;gap:8px}
.login-form input{padding:12px;border-radius:4px;border:0;background:var(--bg-light);font-size:16px;font-family:var(--font-golos);color:var(--text-medium)}
.login-form input{outline:1px solid #05DBF3;outline-offset:-1px}
.login-form input:focus{box-shadow:none}
.login-form small.hint{display:block;color:var(--text-medium);font-size:14px;margin-top:6px}
.login-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.login-actions .btn-primary{width:100%;padding:10px 16px;font-size:14px;border-radius:8px;background:#FF8E50;color:#F8FCFF;font-family:var(--font-inter);font-weight:700}
.login-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-medium)}
.social-login{display:flex;gap:12px;align-items:center;margin:18px 0}
.social-login .icon{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;font-weight:700}
.help-section{background:#fff6ea;border-radius:10px;padding:22px;margin-top:28px;border:1px solid rgba(5,219,243,0.12);box-shadow:none}
.help-section h3{margin:0 0 8px 0;font-size:20px}
.help-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.help-form input{padding:12px;border-radius:6px;border:1px solid rgba(5,219,243,0.25);background:transparent}

@media (max-width: 760px){
  .auth-inner{flex-direction:column;padding:0 20px}
  .auth-right{order:0;margin-top:20px}
  .auth-left{width:100%}
}

/* Register page tweaks reuse auth styles */
.register-form{display:flex;flex-direction:column;gap:12px}
.register-form label{display:flex;flex-direction:column;gap:8px}
.register-form input{padding:12px;border-radius:4px;border:0;background:var(--bg-light);font-size:16px;font-family:var(--font-golos);color:var(--text-medium);outline:1px solid #05DBF3;outline-offset:-1px}
.register-form input[disabled]{opacity:0.6}

/* Mobile refinements for auth/register pages */
@media (max-width: 480px){
  .auth-inner{gap:16px;padding:16px}
  .auth-left, .auth-right{width:100%;padding:0}
  .login-form, .register-form{padding:12px;border-radius:8px}
  .login-form h1, .register-form h1{font-size:22px}
  .login-form p.lead{font-size:13px}
  .login-form input, .register-form input{font-size:14px;padding:10px}
  .login-actions .btn-primary{padding:12px;font-size:14px}
  .social-login{justify-content:center}
  .illustration{width:100%;height:auto}
  .illustration img{width:100%;height:auto;max-width:320px}
  .help-section{padding:12px}
  .auth-inner{align-items:flex-start}
}

/* Ocultar ilustración específica de la pantalla 'Crear cuenta' en móviles pequeños */
@media (max-width: 480px){
  .register-page .illustration{display:none}
}

/* Offcanvas help panel (desde la derecha) */
.offcanvas{position:fixed;inset:0;display:flex;justify-content:flex-end;z-index:1200;pointer-events:none;}
.offcanvas .offcanvas-panel{width:380px;max-width:100%;height:100vh;background:#fff;box-shadow:-8px 0 32px rgba(6,21,38,0.2);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.9,.3,1);pointer-events:auto;display:flex;flex-direction:column}
.offcanvas.open .offcanvas-panel{transform:translateX(0)}
.offcanvas[aria-hidden="true"]{background:transparent}
.offcanvas[aria-hidden="false"]{background:rgba(6,21,38,0.45)}

.offcanvas-header{background:var(--primary-blue);color:var(--bg-light);padding:18px 16px;display:flex;align-items:center;justify-content:space-between}
.offcanvas-title{display:flex;align-items:center;gap:12px}
.help-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.15);font-weight:700;font-size:18px}
.offcanvas-header h3{margin:0;font-size:18px;font-weight:700}
.offcanvas-close{background:transparent;border:0;color:var(--bg-light);font-size:20px;cursor:pointer}

.offcanvas-body{padding:18px;overflow:auto;flex:1}
.phone-card{display:flex;gap:12px;align-items:center;border:1px solid rgba(5,219,243,0.12);padding:12px;border-radius:8px;background:#fff}
.phone-icon{font-size:22px;background:rgba(74,96,207,0.06);padding:10px;border-radius:8px}
.phone-info .phone-label{font-size:13px;color:var(--text-medium)}
.phone-number{font-weight:700;font-size:18px}
.offcanvas-sep{border:0;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0.03),rgba(0,0,0,0.02));margin:16px 0}
.help-intro{font-weight:600;margin:0 0 8px 0;color:var(--text-dark)}

.help-form{display:flex;flex-direction:column;gap:12px}
.help-form label{display:flex;flex-direction:column;gap:8px}
.help-form input,.help-form textarea{padding:12px;border-radius:6px;border:1px solid rgba(5,219,243,0.25);background:transparent;font-family:var(--font-golos);font-size:15px}
.help-form textarea{min-height:100px}
.help-form .btn-primary{background:var(--secondary-orange);color:var(--bg-light);border-radius:8px;padding:12px 16px;border:0;font-weight:700}

.help-success{padding:18px;background:linear-gradient(180deg, #f7fffb, #ffffff);border-radius:8px;border:1px solid rgba(74,96,207,0.06);text-align:center}

/* Floating action button */
.help-fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:var(--primary-blue);color:var(--bg-light);border:none;box-shadow:0 8px 24px rgba(74,96,207,0.28);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1300}

@media (max-width:480px){
  .offcanvas .offcanvas-panel{width:100%;max-width:420px}
  .help-fab{right:16px;bottom:16px}
}

/* Hover & focus effect for the floating help button */
.help-fab{transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease}
.help-fab:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 12px 30px rgba(74,96,207,0.36)}
.help-fab:active{transform:translateY(-2px) scale(0.98)}
.help-fab:focus{outline:2px solid rgba(255,142,80,0.25);outline-offset:4px}

/* Dashboard specific styles */
.dashboard-hero{padding:40px 0}
.dashboard-hero-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.dashboard-greeting h1{font-size:40px;margin:0 0 8px 0;color:var(--text-dark)}
.dashboard-greeting .lead{font-size:20px;color:var(--text-medium);margin:0}
.overview-card{background:#fff6ea;border:1px solid rgba(255,142,80,0.18);padding:18px;border-radius:10px;min-width:280px;max-width:360px}
.overview-card h4{margin:0 0 12px 0;font-size:16px;color:var(--text-dark)}
.overview-row{display:flex;flex-direction:column;gap:10px}
.ov-item{display:flex;justify-content:space-between;align-items:center}
.ov-label{font-size:13px;color:var(--text-medium)}
.ov-value{font-weight:700;color:var(--text-dark)}

.dashboard-actions{padding:32px 0}
.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dashboard-card{background:var(--bg-white);border:1px solid rgba(255,142,80,0.25);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:170px}
.dashboard-card h3{margin:0;font-size:20px;color:var(--text-dark)}
.dashboard-card p{margin:0;color:var(--text-medium);flex:1}
.dashboard-card .btn-primary{align-self:flex-start;margin-top:10px;background:var(--secondary-orange);color:var(--bg-light)}

@media (max-width:1000px){
  .cards-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .dashboard-hero-inner{flex-direction:column}
  .overview-card{width:100%;max-width:none}
  .cards-row{grid-template-columns:1fr}
  .dashboard-greeting h1{font-size:28px}
}

/* ==========================================================================
   LANDING NUEVA (home pública) — prefijo .pme-
   Componentes propios de la home rediseñada. Se usa un prefijo aislado
   porque las clases previas (.hero, .nav-links, .site-footer, .btn-*) ya las
   consumen Auth.aspx, Pagar.aspx y Pago.aspx: redefinirlas las rompería.
   Todo se apoya en los tokens :root de arriba. Reutilizable por el futuro login.
   Breakpoints del proyecto: 1000px / 760px / 480px.
   ========================================================================== */

/* --- Tokens adicionales de la landing --- */
:root{
  --pme-header-h: 84px;
  --pme-section-gap: 72px;
  --pme-mp-bg: #eef0fb;
  --pme-radius-pill: 999px;
  --pme-shadow-card: 0 4px 16px rgba(6,21,38,.08);
  --pme-shadow-step: 0 4px 12px rgba(74,96,207,.18);
  --pme-focus: 0 0 0 3px rgba(255,142,80,.45);
}

/* --- Utilidades --- */
/* --container-max (1116px) es el ancho del CONTENIDO en el mockup, así que el
   padding se suma por fuera; si no, el contenido queda 80px más angosto. */
.pme-container{max-width:calc(var(--container-max) + var(--container-padding) * 2);
  margin:0 auto;padding:0 var(--container-padding)}
.pme-section{padding:var(--pme-section-gap) 0}
.pme-section--flush-top{padding-top:0}
.pme-section__title{margin:0;font-size:36px;font-weight:700;line-height:1.3;text-align:center;color:var(--text-dark)}
.pme-section__lead{margin:12px auto 0;max-width:760px;font-size:16px;font-weight:500;line-height:1.5;text-align:center;color:var(--text-medium)}
.pme-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}

/* El header es sticky: sin esto, al saltar a un ancla el título de la
   sección queda tapado debajo de la barra. */
#inicio,#como-funciona,#beneficios,#contacto{scroll-margin-top:calc(var(--pme-header-h) + 24px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Foco visible y consistente en toda la landing (accesibilidad de teclado) */
.pme-header a:focus-visible,.pme-nav__links a:focus-visible,.pme-btn:focus-visible,
.pme-hamburger:focus-visible,.pme-footer a:focus-visible,.pme-carousel__btn:focus-visible,
.pme-modal__btn:focus-visible,.pme-mp__logo:focus-visible,.pme-contact-form :focus-visible{
  outline:2px solid var(--primary-blue);outline-offset:3px;border-radius:var(--radius-md)
}

/* --- Botones --- */
.pme-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-inter);font-size:16px;font-weight:600;line-height:1;
  padding:16px 24px;border-radius:var(--radius-md);text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.pme-btn--primary{background:var(--secondary-orange);color:var(--bg-light);border-color:var(--secondary-orange)}
.pme-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,142,80,.35)}
.pme-btn--outline{background:var(--bg-light);color:var(--primary-blue);border-color:var(--primary-blue)}
.pme-btn--outline:hover{background:var(--primary-blue);color:var(--bg-light)}
.pme-btn--block{width:100%}

/* --- 6.1 Header --- */
.pme-header{position:sticky;top:0;z-index:100;background:var(--bg-white);box-shadow:var(--shadow-nav)}
.pme-header__inner{display:flex;align-items:center;gap:var(--gap-md);
  max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);min-height:var(--pme-header-h)}
.pme-header__brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
/* 68 px (antes 56): pedido del usuario, 19/08. Entra en la barra de 84 px con aire arriba y abajo. */
.pme-header__brand img{height:68px;width:auto;display:block}

.pme-nav{display:flex;align-items:center;gap:var(--gap-lg);margin-left:auto}
.pme-nav__links{display:flex;align-items:center;gap:var(--gap-sm);list-style:none;margin:0;padding:0}
.pme-nav__links a{display:block;padding:8px 16px;color:var(--text-dark);text-decoration:none;
  font-size:16px;font-weight:600;border-radius:var(--radius-md);transition:color .16s ease}
.pme-nav__links a:hover{color:var(--primary-blue)}
.pme-nav__links a.is-active{color:var(--secondary-orange)}
.pme-nav__cta{padding:12px 24px;white-space:nowrap}

.pme-hamburger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.pme-hamburger span{display:block;width:24px;height:2px;background:var(--text-dark);
  margin:5px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.pme-hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pme-hamburger.is-active span:nth-child(2){opacity:0}
.pme-hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- 6.2 Hero --- */
.pme-hero{padding:64px 0 40px}
.pme-hero__inner{display:flex;align-items:center;gap:48px}
.pme-hero__copy{flex:1 1 50%;max-width:546px;display:flex;flex-direction:column;gap:var(--gap-lg)}
.pme-hero__copy h1{margin:0;font-size:48px;font-weight:700;line-height:1.15;color:var(--text-dark)}
.pme-hero__copy p{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--text-medium)}
.pme-hero__media{flex:1 1 50%;min-width:0}
.pme-hero__media img{width:100%;height:auto;border-radius:var(--radius-lg);object-fit:cover;display:block}

@media (max-width:1000px){
  .pme-nav__links{gap:0}
  .pme-nav__links a{padding:8px 10px;font-size:15px}
  .pme-hero__copy h1{font-size:38px}
  .pme-hero{padding:48px 0 32px}
}

@media (max-width:760px){
  :root{--container-padding:20px;--pme-section-gap:48px}
  .pme-hamburger{display:block}
  .pme-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:var(--gap-sm);background:var(--bg-white);padding:16px 20px 24px;margin-left:0;
    box-shadow:0 8px 24px rgba(6,21,38,.12);display:none}
  body.pme-menu-open .pme-nav{display:flex}
  .pme-header__inner{position:relative}
  .pme-nav__links{flex-direction:column;align-items:stretch;gap:0}
  .pme-nav__links a{padding:14px 8px;font-size:16px;border-bottom:1px solid rgba(74,96,207,.12)}
  .pme-nav__cta{margin-top:12px;text-align:center;justify-content:center}
  .pme-header__brand img{height:52px}

  .pme-hero__inner{flex-direction:column;align-items:stretch;gap:28px}
  .pme-hero__copy{max-width:none}
  .pme-hero__copy h1{font-size:30px}
  .pme-hero__copy .pme-btn{width:100%}
  .pme-section__title{font-size:28px}
}

/* --- 6.3 Bloque "Ahora pagá con Mercado Pago" --- */
/* overflow visible: el celular debe poder subir sobre el hero. El recorte de los
   resplandores vive en .pme-mp__glow, que sí clipea sin afectar al celular. */
/* padding-bottom 0: en el mockup el celular llega a tocar la sección del
   tutorial (2px). El aire de abajo lo daba la sombra del PNG, que se
   descuenta en .pme-mp__device. */
.pme-mp{position:relative;padding:0}
.pme-mp__glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pme-mp__glow::before{content:'';position:absolute;left:-140px;top:34%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,142,80,.20) 0%,rgba(255,142,80,0) 70%)}
.pme-mp__glow::after{content:'';position:absolute;right:-120px;top:-80px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(5,219,243,.14) 0%,rgba(5,219,243,0) 70%)}
.pme-mp__inner{position:relative;z-index:1;display:flex;align-items:center;gap:40px}
.pme-mp__copy{flex:1 1 46%;max-width:500px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-md)}
.pme-mp__badge{display:inline-block;margin:0;padding:6px 16px;border-radius:var(--pme-radius-pill);
  background:var(--bg-light);border:1px solid var(--primary-blue);color:var(--primary-blue);
  font-size:12px;font-weight:700;letter-spacing:.04em}
.pme-mp__copy h2{margin:0;font-size:40px;font-weight:700;line-height:1.15;color:var(--primary-blue)}
.pme-mp__copy h2 .pme-mp__brand{color:var(--accent-cyan)}
.pme-mp__text{margin:0;font-size:15px;font-weight:500;line-height:1.5;color:var(--text-medium)}
.pme-mp__actions{display:flex;align-items:center;gap:var(--gap-lg);margin-top:var(--gap-sm);flex-wrap:wrap}
.pme-mp__tutorial{color:var(--text-medium);text-decoration:none;font-size:14px;font-weight:600}
.pme-mp__tutorial:hover{color:var(--primary-blue);text-decoration:underline}

/* --pme-dev-w es el ancho del PNG del celular. Dentro del PNG, el celular
   visible ocupa el 50% del ancho (11.6%..61.6%): el resto es sombra
   transparente. El logo compensa esa sombra con un margen negativo
   calculado, para apoyarse a 33px del celular como en el mockup. */
.pme-mp__media{--pme-dev-w:min(600px,46vw);
  flex:1 1 54%;min-width:0;display:flex;align-items:center;justify-content:center;gap:0}
/* El celular sube hasta el borde inferior de la foto del hero, SIN taparla
   (mockup: foto termina en y=483, celular arranca en y=488), y queda por
   encima del fondo (z-index superior, README).
   Ojo: el PNG es 50% sombra transparente, así que el ancho acá es ~2x el
   del celular visible. El margen negativo compensa el padding superior
   del PNG (8.1% del alto) para apoyarlo justo debajo de la foto. */
/* margin-bottom descuenta la sombra inferior del PNG (38.2% del ancho), así
   el borde de abajo del celular queda a ras de la sección del tutorial. */
.pme-mp__device{width:var(--pme-dev-w);height:auto;display:block;position:relative;z-index:3;
  margin-top:-105px;margin-bottom:calc(var(--pme-dev-w) * -0.382);pointer-events:none}
.pme-mp__logo{position:relative;z-index:2;display:inline-block;flex-shrink:0;
  margin-left:calc(33px - var(--pme-dev-w) * 0.384);transition:transform .16s ease}
.pme-mp__logo:hover{transform:translateY(-2px)}
.pme-mp__logo img{width:165px;height:auto;display:block}

/* --- 6.4 Tutorial "¿Cómo pagar con Mercado Pago?" (sin tabs, solo desde la App) --- */
/* La sección va embutida al ancho del contenido (1116) con esquinas
   redondeadas, como en el mockup: no ocupa todo el ancho de la ventana. */
.pme-tuto{background:var(--pme-mp-bg);padding:56px 0 64px;border-radius:var(--radius-lg);
  max-width:var(--container-max);margin:0 auto}
.pme-tuto__head{margin-bottom:48px}
.pme-tuto__head .pme-section__lead{font-weight:600;color:var(--text-dark)}

.pme-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg);align-items:stretch;
  list-style:none;margin:0;padding:0}
.pme-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px}
/* Línea que une los círculos: nace en el centro de uno y muere detrás del siguiente */
.pme-step:not(:last-child)::after{content:'';position:absolute;top:32px;left:50%;
  width:calc(100% + var(--gap-lg));height:1px;background:rgba(74,96,207,.28);z-index:0}
.pme-step__num{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;color:var(--bg-white);
  background:var(--primary-blue);border:4px solid var(--bg-white);box-shadow:var(--pme-shadow-step)}
.pme-step--accent .pme-step__num{background:var(--secondary-orange);color:var(--text-dark)}
/* flex:1 iguala la altura de las tres tarjetas, como en el mockup */
.pme-step__card{width:100%;flex:1;background:var(--bg-white);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--pme-shadow-card);display:flex;flex-direction:column;gap:20px}
.pme-step__card h3{margin:0;font-size:22px;font-weight:700;line-height:1.3;text-align:center;color:var(--text-dark)}
.pme-step__shots{display:flex;flex-direction:column;gap:16px}
.pme-step__card img{width:100%;height:auto;display:block;border-radius:var(--radius-md)}

@media (max-width:1000px){
  .pme-mp__copy h2{font-size:32px}
  .pme-mp__media{--pme-dev-w:min(460px,46vw)}
  .pme-mp__device{margin-top:-70px}
  .pme-mp__logo img{width:120px}
  .pme-step__card h3{font-size:18px}
  .pme-step__card{padding:16px}
}

@media (max-width:760px){
  /* En mobile el celular no puede solaparse con el hero: pasa a flujo normal */
  .pme-mp{padding-bottom:40px}
  .pme-mp__inner{flex-direction:column;align-items:stretch;gap:24px}
  .pme-mp__copy{max-width:none}
  .pme-mp__copy h2{font-size:28px}
  .pme-mp__actions{width:100%}
  .pme-mp__actions .pme-btn{flex:1}
  .pme-mp__media{margin-top:8px;--pme-dev-w:min(400px,72vw)}
  .pme-mp__device{margin-top:-40px}
  .pme-mp__logo img{width:96px}

  .pme-tuto{border-radius:0;padding:40px 0 48px}
  .pme-steps{grid-template-columns:1fr;gap:32px}
  .pme-step:not(:last-child)::after{display:none}
  .pme-tuto__head{margin-bottom:32px}
}

/* --- Separador fino entre secciones (línea cyan del mockup) --- */
.pme-sep{height:1px;border:0;margin:0 auto;max-width:var(--container-max);
  background:linear-gradient(90deg,rgba(5,219,243,0) 0%,var(--accent-cyan) 12%,var(--accent-cyan) 88%,rgba(5,219,243,0) 100%)}

/* --- 6.5 Ventajas --- */
.pme-ventajas__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-lg);margin-top:48px}
.pme-ventaja{display:flex;flex-direction:column;align-items:center;gap:16px}
/* El título va DEBAJO de la tarjeta (mockup), no dentro */
.pme-ventaja__box{width:100%;flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--bg-light);border:1px solid rgba(74,96,207,.35);border-radius:var(--radius-lg);
  padding:24px;min-height:180px}
.pme-ventaja__box img{max-width:100%;width:auto;max-height:132px;height:auto;display:block}
.pme-ventaja h3{margin:0;font-size:18px;font-weight:600;line-height:1.3;text-align:center;color:var(--text-light)}

/* --- 6.6 Testimonios --- */
.pme-testimonios__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg);margin-top:48px}
.pme-testimonio{display:flex;flex-direction:column;gap:12px;
  background:var(--bg-white);border:1px solid rgba(74,96,207,.10);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--pme-shadow-card)}
.pme-testimonio h3{margin:0;font-size:20px;font-weight:700;line-height:1.3;color:var(--text-dark)}
.pme-testimonio blockquote{margin:0;flex:1;font-family:var(--font-golos);font-size:15px;
  line-height:1.55;color:var(--text-medium)}
.pme-testimonio__author{display:flex;align-items:center;gap:16px;margin-top:12px}
.pme-testimonio__author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pme-testimonio__name{display:block;font-size:16px;font-weight:700;color:var(--text-dark);font-style:normal}
.pme-testimonio__role{display:block;font-size:14px;color:var(--text-medium)}

/* --- 6.7 Formas de pago (carrusel) --- */
/* Los PNG ya traen el chip circular con borde: no se replica en CSS. */
.pme-medios{position:relative;margin-top:48px;display:flex;align-items:center;gap:12px}
.pme-carousel__btn{flex-shrink:0;width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-white);border:1px solid rgba(74,96,207,.35);color:var(--primary-blue);
  transition:background-color .16s ease,opacity .16s ease}
.pme-carousel__btn:hover{background:var(--bg-light)}
.pme-carousel__btn[disabled]{opacity:.35;cursor:default}
.pme-medios__track{list-style:none;margin:0;flex:1;min-width:0;display:flex;gap:var(--gap-md);overflow-x:auto;
  scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:8px 4px;
  scrollbar-width:none;-ms-overflow-style:none}
.pme-medios__track::-webkit-scrollbar{display:none}
.pme-medios__item{flex:0 0 auto;scroll-snap-align:start}
.pme-medios__item img{width:104px;height:104px;object-fit:contain;display:block}

/* --- 6.8 Banda CTA --- */
.pme-cta{background:var(--primary-blue);border-radius:var(--radius-lg);
  padding:48px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--gap-md)}
.pme-cta h2{margin:0;font-size:36px;font-weight:700;line-height:1.3;color:var(--bg-light)}
.pme-cta p{margin:0;font-size:20px;font-weight:600;line-height:1.4;color:var(--bg-light)}
.pme-cta .pme-btn{margin-top:var(--gap-sm)}

@media (max-width:1000px){
  .pme-ventajas__grid{grid-template-columns:repeat(2,1fr)}
  .pme-testimonios__grid{grid-template-columns:repeat(2,1fr)}
  .pme-cta h2{font-size:28px}
  .pme-cta p{font-size:17px}
}

@media (max-width:760px){
  /* Ventajas se queda en 2 columnas hasta 480: a una sola, la tarjeta se
     estira y el ícono queda perdido en el medio. */
  .pme-ventajas__grid,.pme-testimonios__grid{margin-top:32px}
  .pme-testimonios__grid{grid-template-columns:1fr}
  .pme-ventaja__box{min-height:150px;padding:16px}
  .pme-ventaja__box img{max-height:104px}
  .pme-ventaja h3{font-size:16px}
  .pme-medios{margin-top:32px}
  .pme-carousel__btn{display:none}
  .pme-medios__track{padding:8px 0}
  .pme-medios__item img{width:88px;height:88px}
  .pme-cta{padding:32px 20px}
  .pme-cta h2{font-size:24px}
  .pme-cta p{font-size:16px}
  .pme-cta .pme-btn{width:100%}
}

/* --- 6.10 Contacto --- */
.pme-contacto__inner{display:flex;align-items:center;gap:68px;margin-top:48px}
.pme-contacto__media{flex:1 1 50%;min-width:0}
.pme-contacto__media img{width:100%;height:auto;border-radius:var(--radius-md);object-fit:cover;display:block}
.pme-contact-form{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;gap:var(--gap-md)}
.pme-contact-form label{display:flex;flex-direction:column;gap:8px}
.pme-contact-form label span{font-family:var(--font-inter);font-size:14px;color:var(--text-dark)}
.pme-contact-form input,.pme-contact-form textarea{background:var(--bg-light);
  border:1px solid var(--accent-cyan);border-radius:4px;padding:12px 10px;
  font-family:var(--font-golos);font-size:16px;color:var(--text-dark);width:100%}
.pme-contact-form input::placeholder,.pme-contact-form textarea::placeholder{color:var(--text-medium)}
.pme-contact-form textarea{min-height:120px;resize:vertical}
.pme-contact-form .pme-btn{margin-top:var(--gap-sm)}

/* --- 6.9 Modal transaccional de Mercado Pago --- */
/* display:none mientras está cerrado (lo saca del árbol de accesibilidad).
   .is-visible lo muestra y, un frame después, .is-open dispara la transición:
   no se transiciona visibility porque eso lo dejaría no enfocable. */
.pme-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:16px;opacity:0;transition:opacity .3s ease-out}
.pme-modal.is-visible{display:flex}
.pme-modal.is-open{opacity:1}
.pme-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Entrada: fade-in + scale (.95 -> 1) */
.pme-modal__dialog{position:relative;width:100%;max-width:420px;
  background:var(--bg-light);border:1px solid var(--secondary-orange);border-radius:var(--radius-lg);
  padding:28px;display:flex;flex-direction:column;gap:var(--gap-md);
  box-shadow:0 24px 64px rgba(6,21,38,.28);
  transform:scale(.95);transition:transform .3s ease-out}
.pme-modal.is-open .pme-modal__dialog{transform:scale(1)}
.pme-modal__dialog h2{margin:0;font-size:22px;font-weight:700;line-height:1.3;color:var(--text-dark)}
.pme-modal__dialog p{margin:0;font-family:var(--font-golos);font-size:16px;line-height:1.5;color:var(--text-medium)}
/* Botones apilados: primario arriba, "Volver" abajo (según modal-popover_mp.png) */
.pme-modal__actions{display:flex;flex-direction:column;gap:12px;margin-top:var(--gap-sm)}
.pme-modal__btn{width:100%}

@media (prefers-reduced-motion:reduce){
  .pme-modal,.pme-modal__dialog{transition:none}
  .pme-medios__track{scroll-behavior:auto}
}

@media (max-width:760px){
  .pme-contacto__inner{flex-direction:column;gap:28px;margin-top:32px}
  .pme-contacto__media,.pme-contact-form{width:100%}
  .pme-contact-form .pme-btn{width:100%}
}

@media (max-width:480px){
  .pme-ventajas__grid{grid-template-columns:1fr}
  /* Spec: ancho calc(100% - 32px) en mobile */
  .pme-modal{padding:16px}
  .pme-modal__dialog{max-width:none;width:100%;padding:20px}
  .pme-modal__dialog h2{font-size:19px}
}

/* --- 6.11 Footer --- */
.pme-footer{background:var(--primary-blue);color:var(--bg-light);padding:48px 0 0;box-shadow:var(--shadow-footer-top)}
.pme-footer__logo{display:flex;justify-content:center;margin-bottom:40px}
.pme-footer__logo img{height:64px;width:auto;display:block}
.pme-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:40px}
.pme-footer__col h2{margin:0 0 16px;font-family:var(--font-inter);font-size:16px;font-weight:700;color:var(--bg-light)}
.pme-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pme-footer__col li{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.4}
.pme-footer__col a{color:var(--bg-light);text-decoration:none}
.pme-footer__col a:hover{text-decoration:underline}
.pme-footer__label{font-size:13px;color:rgba(248,252,255,.7)}
.pme-footer__social{flex-direction:row!important;gap:16px!important}
.pme-footer__social a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);
  color:var(--bg-light);transition:background-color .16s ease}
.pme-footer__social a:hover{background:rgba(255,255,255,.24)}
.pme-footer__bottom{border-top:1px solid rgba(255,255,255,.15);padding:18px 0}
.pme-footer__bottom p{margin:0;text-align:center;font-size:14px;color:rgba(248,252,255,.85)}

@media (max-width:760px){
  .pme-footer__cols{grid-template-columns:1fr;gap:28px;text-align:center}
  .pme-footer__col ul{align-items:center}
  .pme-footer__social{justify-content:center}
  .pme-footer__logo img{height:52px}
  .pme-footer__logo{margin-bottom:28px}
}

@media (max-width:480px){
  .pme-hero{padding:32px 0 24px}
  .pme-hero__copy h1{font-size:26px}
  .pme-section__title{font-size:24px}
  .pme-footer{padding-top:32px}
  .pme-footer__logo img{height:44px}
}

/* ==========================================================================
   FLUJO "PAGAR EXPENSAS" — 3 pasos (Pagar.aspx). Prefijo .pme-pay-*
   Diseño Figma: Paso 1 (3407:6624), Paso 3 (3407:7216), Popover (3431:5690).
   Contenido embutido a 672px centrado dentro del contenedor de 1116.
   ========================================================================== */
:root{
  --pme-neutral-300:#d9d9d9;   /* círculo pendiente del stepper / borde deshabilitado */
  --pme-azul-50:#edeffa;       /* fondo del botón secundario "Volver" */
  --pme-celeste-00:#f7feff;    /* fondo de la tabla de verificación */
}

.pme-pay{padding:32px 0 64px}
.pme-pay__back{display:inline-flex;align-items:center;gap:6px;color:var(--primary-blue);
  text-decoration:none;font-size:14px;font-weight:600;margin-bottom:24px}
.pme-pay__back:hover{text-decoration:underline}
.pme-pay__head{text-align:center;margin-bottom:40px}
.pme-pay__head h1{margin:0;font-size:36px;font-weight:700;line-height:1.2;color:var(--text-dark)}
.pme-pay__head p{margin:8px 0 0;font-size:16px;font-weight:500;color:var(--text-medium)}

/* --- Stepper de 3 pasos --- */
.pme-stepper{max-width:672px;margin:0 auto 40px;display:flex;justify-content:space-between;position:relative}
.pme-stepper__item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px}
/* línea conectora: del centro de un círculo al siguiente, por detrás */
.pme-stepper__item:not(:last-child)::after{content:'';position:absolute;top:24px;left:50%;
  width:100%;height:2px;background:var(--pme-neutral-300);z-index:0}
.pme-stepper__num{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:18px;font-weight:700;color:var(--bg-white);background:var(--pme-neutral-300);
  transition:background-color .2s ease}
.pme-stepper__label{font-size:14px;font-weight:600;color:var(--text-medium);text-align:center}
/* número visible por defecto; check sólo en pasos completados */
.pme-stepper__n{display:block}
.pme-stepper__check{display:none;width:22px;height:22px}
/* estados */
.pme-stepper__item.is-active .pme-stepper__num{background:var(--secondary-orange)}
.pme-stepper__item.is-active .pme-stepper__label{color:var(--text-dark);font-weight:700}
.pme-stepper__item.is-done .pme-stepper__num{background:var(--primary-blue)}
.pme-stepper__item.is-done .pme-stepper__label{color:var(--text-dark)}
.pme-stepper__item.is-done::after{background:var(--primary-blue)}
.pme-stepper__item.is-done .pme-stepper__n{display:none}
.pme-stepper__item.is-done .pme-stepper__check{display:block}

/* --- Card de paso --- */
.pme-pay-step{max-width:672px;margin:0 auto}
.pme-pay-step[hidden]{display:none}
.pme-pay-card{background:var(--bg-white);border:1px solid rgba(74,96,207,.12);
  border-radius:var(--radius-lg);padding:32px;box-shadow:0 4px 12px rgba(10,0,128,.08)}
.pme-pay-card__title{margin:0;font-size:22px;font-weight:700;line-height:1.3;color:var(--text-dark)}
.pme-pay-card__sub{margin:6px 0 24px;font-family:var(--font-golos);font-size:14px;color:var(--text-medium)}

/* --- Campos (paso 1) --- */
.pme-pay-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.pme-pay-field:last-of-type{margin-bottom:0}
.pme-pay-field__label{display:flex;align-items:center;gap:6px;
  font-family:var(--font-inter);font-size:14px;font-weight:600;color:var(--text-dark)}
.pme-pay-field input{background:var(--bg-light);border:1px solid var(--accent-cyan);border-radius:4px;
  padding:12px 10px;font-family:var(--font-golos);font-size:16px;color:var(--text-dark);width:100%}
.pme-pay-field input::placeholder{color:var(--text-medium)}
.pme-pay-field__hint{font-family:var(--font-golos);font-size:13px;color:var(--text-medium)}
/* ícono ⓘ con tooltip sobre el código de pago electrónico */
.pme-pay-info{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;border:1px solid var(--text-medium);color:var(--text-medium);
  font-size:11px;font-style:normal;cursor:help;flex-shrink:0}
.pme-pay-info__tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:240px;background:var(--bg-white);border:1px solid var(--accent-cyan);border-radius:8px;
  padding:10px 12px;font-family:var(--font-golos);font-size:13px;font-weight:400;line-height:1.4;
  color:var(--text-medium);box-shadow:0 8px 24px rgba(6,21,38,.16);
  opacity:0;visibility:hidden;transition:opacity .16s ease;z-index:5;text-align:left}
.pme-pay-info:hover .pme-pay-info__tip,.pme-pay-info:focus-visible .pme-pay-info__tip{opacity:1;visibility:visible}

/* --- Tabla de verificación (paso 2) --- */
.pme-verify{background:var(--pme-celeste-00);border:1px solid rgba(5,219,243,.25);
  border-radius:8px;padding:4px 16px;margin-bottom:16px}
.pme-verify__row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(74,96,207,.10)}
.pme-verify__row:last-child{border-bottom:0}
.pme-verify__key{font-family:var(--font-inter);font-size:14px;font-weight:700;color:var(--text-dark)}
.pme-verify__val{font-family:var(--font-golos);font-size:14px;color:var(--text-medium);text-align:right}
.pme-verify__foot{display:flex;align-items:center;gap:16px;margin-bottom:24px;
  background:var(--pme-azul-50);border-radius:6px;padding:10px 14px}
.pme-verify__check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-dark);cursor:pointer}
.pme-verify__check input{width:16px;height:16px;accent-color:var(--secondary-orange)}
.pme-verify__iconbtn{background:none;border:0;cursor:pointer;padding:4px;display:inline-flex;
  color:var(--text-medium);border-radius:4px}
.pme-verify__iconbtn:hover{background:rgba(74,96,207,.08);color:var(--primary-blue)}
/* Leyenda "(modificar importe)" pegada al lápiz. margin-left negativo para comer parte
   del gap:16px del contenedor y que quede junto al ícono, no flotando lejos. */
.pme-verify__editlbl{font-size:13px;color:var(--text-medium);cursor:pointer;margin-left:-10px}
.pme-verify__editlbl:hover{color:var(--primary-blue)}
.pme-verify__iconbtn--danger:hover{background:rgba(210,68,68,.10);color:#d24444}

/* --- Métodos de pago (paso 3) --- */
.pme-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.pme-method{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--bg-white);border:1px solid rgba(74,96,207,.30);border-radius:8px;
  padding:20px 16px;font-family:var(--font-inter);font-size:15px;font-weight:600;color:var(--text-dark);
  transition:border-color .16s ease,background-color .16s ease}
.pme-method:hover{border-color:var(--primary-blue)}
.pme-method__icon{flex-shrink:0;width:24px;height:24px;color:var(--secondary-orange);display:flex}
.pme-method__icon svg{width:24px;height:24px;display:block}
.pme-method.is-selected{border-color:var(--primary-blue);border-width:2px;background:var(--pme-azul-50)}
.pme-method small{display:block;font-weight:400;font-size:13px;color:var(--text-medium)}

/* --- Zona de acción (Volver / Continuar-Pagar) --- */
.pme-pay-actions{display:flex;gap:12px}
.pme-pay-actions .pme-btn{flex:1}
.pme-btn--secondary{background:var(--pme-azul-50);color:var(--primary-blue);border-color:var(--primary-blue)}
.pme-btn--secondary:hover{background:var(--primary-blue);color:var(--bg-light)}
.pme-btn.is-disabled,.pme-btn:disabled{background:var(--pme-neutral-300);border-color:var(--pme-neutral-300);
  color:var(--bg-white);cursor:not-allowed;pointer-events:none}

/* --- Panel de pago con QR embebido (paso 3) --- */
/* Cuando el QR está visible, el paso 3 se ensancha y pone la tarjeta y el
   panel lado a lado (672 + 24 + 350 = 1046, entra en el container de 1116). */
.pme-pay-step--qr{max-width:1046px;display:flex;gap:24px;align-items:flex-start;justify-content:center}
.pme-pay-step--qr .pme-pay-card{flex:0 1 672px;min-width:0}
.pme-pay-qr{flex:0 0 350px;background:var(--bg-white);border:1px solid rgba(74,96,207,.12);
  border-radius:var(--radius-lg);padding:24px;box-shadow:0 4px 12px rgba(10,0,128,.08);
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
/* display:flex anula el atributo hidden: esta regla lo restituye */
.pme-pay-qr[hidden]{display:none}
.pme-pay-qr__title{margin:0;font-size:18px;font-weight:700;color:var(--text-dark)}
.pme-pay-qr__sub{margin:0 0 10px;font-family:var(--font-golos);font-size:13px;color:var(--text-medium)}
.pme-pay-qr__img{width:220px;height:220px;border:1px solid rgba(74,96,207,.20);border-radius:8px;display:block}
.pme-pay-qr__data{width:100%;margin:14px 0 0;background:var(--pme-celeste-00);
  border:1px solid rgba(5,219,243,.25);border-radius:8px;padding:4px 14px}
.pme-pay-qr__data > div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid rgba(74,96,207,.10)}
.pme-pay-qr__data > div:last-child{border-bottom:0}
.pme-pay-qr__data dt{font-family:var(--font-inter);font-size:13px;font-weight:700;color:var(--text-dark)}
.pme-pay-qr__data dd{margin:0;font-family:var(--font-golos);font-size:13px;color:var(--text-medium);text-align:right}
.pme-pay-qr__note{margin:10px 0 0;font-family:var(--font-golos);font-size:12px;color:var(--text-medium)}
/* Leyenda "El pago por QR no permite editar el importe": sólo si el importe fue editado */
.pme-pay-qr__note--aviso{color:var(--text-dark);font-weight:600}
/* Nota bajo los métodos de pago (paso 3): Código QR elegido con el importe editado */
/* Va entre la lista de métodos (margin-bottom 24) y los botones: se sube 12 y deja 20
   abajo para quedar separada de ambos. */
.pme-pay-nota{display:flex;align-items:flex-start;gap:8px;margin:-12px 0 20px;padding:10px 12px;
  border-radius:8px;background:var(--pme-azul-50);font-family:var(--font-golos);font-size:12.5px;
  line-height:1.4;color:var(--text-medium)}
.pme-pay-nota svg{flex:none;margin-top:1px;color:var(--primary-blue)}
.pme-pay-nota b{color:var(--text-dark);white-space:nowrap}
.pme-pay-nota[hidden]{display:none}

/* Debajo de ~1130 el panel ya no entra al costado: se apila bajo la tarjeta */
@media (max-width:1130px){
  .pme-pay-step--qr{flex-direction:column;align-items:stretch;max-width:672px}
  .pme-pay-qr{flex:1 1 auto}
}

/* --- Resultado del pago (PagoResultado.aspx: éxito / error) --- */
:root{
  --pme-exito-500:#18ae0b;    /* Exito/exito-500 del design system */
  --pme-error-500:#b3261e;    /* Error/error-500 */
  --pme-neutral-700:#636266;  /* Neutral/neutral-700 (texto de resultado) */
}
.pme-result__card{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:40px 32px 48px;text-align:center}
.pme-result__icon{width:94px;height:89px;display:block}
.pme-result__title{margin:4px 0 0;font-family:var(--font-golos);font-size:18px;font-weight:600;line-height:1.35}
.pme-result__title--exito{color:var(--pme-exito-500)}
.pme-result__title--error{color:var(--pme-error-500)}
.pme-result__text{margin:0;font-family:var(--font-golos);font-size:16px;line-height:1.5;
  color:var(--pme-neutral-700);text-align:left;align-self:stretch}
.pme-result__text a{color:var(--primary-blue);text-decoration:none}
.pme-result__text a:hover{text-decoration:underline}
.pme-result__detail{align-self:stretch;background:var(--bg-light);border-radius:var(--radius-lg);
  padding:24px;text-align:left}
.pme-result__detail h2{margin:0 0 20px;font-family:var(--font-golos);font-size:20px;font-weight:600;color:var(--text-dark)}
.pme-result__row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 0;border-bottom:1px solid rgba(74,96,207,.12)}
.pme-result__row:last-child{border-bottom:0}
.pme-result__key{font-family:var(--font-golos);font-size:16px;font-weight:600;color:var(--text-dark)}
.pme-result__val{font-family:var(--font-golos);font-size:16px;color:var(--pme-neutral-700);text-align:right}
.pme-result__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.pme-result__home{font-family:var(--font-golos);font-size:12px;font-weight:600;
  color:var(--text-dark);text-decoration:none;padding:8px}
.pme-result__home:hover{text-decoration:underline}

@media (max-width:480px){
  .pme-result__card{padding:28px 16px 32px}
  .pme-result__actions{flex-direction:column;align-self:stretch}
}

/* --- Popover "Serás redirigido…" (reusa el patrón del modal MP) --- */
.pme-pop__dialog{max-width:340px;padding:20px;border-color:var(--accent-cyan);gap:12px}
.pme-pop__head{display:flex;align-items:center;gap:10px}
.pme-pop__head h2{font-size:18px}
.pme-pop__icon{color:var(--primary-blue);flex-shrink:0}
.pme-pop__close{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--text-medium);
  font-size:18px;line-height:1;padding:2px}
.pme-pop__actions{display:flex;gap:12px;margin-top:4px}
.pme-pop__actions .pme-btn{flex:1;padding:12px 16px}

/* --- Responsive del flujo --- */
@media (max-width:760px){
  .pme-pay__head h1{font-size:28px}
  .pme-pay-card{padding:24px 20px}
  .pme-stepper__num{width:40px;height:40px;font-size:16px}
  .pme-stepper__item:not(:last-child)::after{top:20px}
  .pme-stepper__label{font-size:12px}
}
@media (max-width:480px){
  .pme-pay-card{padding:20px 16px}
  .pme-pay-actions{flex-direction:column-reverse}
  .pme-verify__val{max-width:55%}
}

/* ==========================================================================
   PANTALLAS DE ACCESO (login, registro, recuperar y cambiar clave)
   Modelo E: foto a sangre completa con velo + tarjeta flotante y claim.
   Prefijo .pme-acc-  — aislado de los estilos viejos de Auth/Pagar/Pago.
   ========================================================================== */

/* align-items:flex-start + margin auto en los hijos: centra igual que
   align-items:center, pero NUNCA desborda el padding (con center, una tarjeta
   más alta que el viewport se sale hacia arriba y pisa el "Volver al inicio").
   El padding superior deja lugar para ese botón. */
.pme-acc{position:relative;min-height:100vh;display:flex;align-items:flex-start;
  padding:76px 64px 36px;background:url('../assets/landing/image-hero.jpg') center/cover no-repeat;
  font-family:var(--font-inter)}
.pme-acc__card,.pme-acc__claim{margin-top:auto;margin-bottom:auto}
/* Velo: sin esto el texto blanco no se lee sobre la foto */
.pme-acc::before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(41,40,45,.82) 0%,rgba(74,96,207,.55) 100%)}

.pme-acc__card{position:relative;z-index:1;width:100%;max-width:432px;flex-shrink:0;
  background:rgba(255,255,255,.97);border-radius:var(--radius-lg);
  padding:30px 32px;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.pme-acc__card--ancha{max-width:520px}

.pme-acc__logo{display:block;margin-bottom:16px}
.pme-acc__logo img{height:46px;width:auto;display:block}
.pme-acc__titulo{margin:0 0 6px;font-size:23px;font-weight:700;line-height:1.25;color:var(--text-dark)}
.pme-acc__sub{margin:0 0 18px;font-family:var(--font-golos);font-size:14px;line-height:1.5;color:var(--text-medium)}

/* Claim al costado de la tarjeta */
.pme-acc__claim{position:relative;z-index:1;color:var(--bg-white);margin-left:56px;max-width:400px}
.pme-acc__claim h2{margin:0 0 12px;font-size:30px;font-weight:700;line-height:1.25}
.pme-acc__claim p{margin:0;font-family:var(--font-golos);font-size:15px;line-height:1.6;color:rgba(255,255,255,.9)}

/* --- Campos --- */
.pme-acc__campo{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.pme-acc__campo label{font-size:13px;font-weight:600;color:var(--text-dark)}
.pme-acc__campo input{width:100%;background:var(--bg-light);border:1px solid var(--accent-cyan);
  border-radius:4px;padding:11px 11px;font-family:var(--font-golos);font-size:15px;color:var(--text-dark)}
.pme-acc__campo input::placeholder{color:#9a9aa2}
/* Ojito "mostrar contraseña": el input va envuelto para anclar el botón adentro,
   a la derecha. El padding evita que lo escrito pase por debajo del ícono. */
.pme-acc__passwrap{position:relative}
.pme-acc__passwrap input{padding-right:42px}
.pme-acc__ver{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  background:none;border:0;border-radius:6px;cursor:pointer;color:#9a9aa2;padding:0}
.pme-acc__ver:hover{color:var(--primary-blue)}
.pme-acc__ver:focus-visible{outline:2px solid var(--primary-blue);outline-offset:1px}
.pme-acc__ver .ojo-cerrado{display:none}
.pme-acc__ver.is-visible .ojo-abierto{display:none}
.pme-acc__ver.is-visible .ojo-cerrado{display:block}
.pme-acc__campo input:focus{outline:2px solid var(--primary-blue);outline-offset:1px}
.pme-acc__hint{font-family:var(--font-golos);font-size:12px;line-height:1.4;color:var(--text-medium)}

/* Dos campos en una fila (nombre y apellido) */
.pme-acc__fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Mensajes de error por campo y generales */
.pme-acc__error{font-family:var(--font-golos);font-size:12px;line-height:1.4;color:#d04444}
.pme-acc__aviso{display:flex;gap:9px;align-items:flex-start;border-radius:6px;padding:11px 13px;
  margin-bottom:14px;font-family:var(--font-golos);font-size:13px;line-height:1.45}
/* display:flex anula el atributo hidden: esta regla lo restituye */
.pme-acc__aviso[hidden],.pme-acc__reglas[hidden],.pme-acc__tyc[hidden]{display:none}
.pme-acc__aviso--error{background:#fdeced;color:#a3231b;border:1px solid #f3c9c6}
.pme-acc__aviso--ok{background:#e9f7e7;color:#146b0c;border:1px solid #c2e5bd}
.pme-acc__aviso--info{background:var(--pme-celeste-00);color:var(--text-medium);border:1px solid rgba(5,219,243,.35)}

/* Términos y condiciones */
.pme-acc__tyc{display:flex;align-items:flex-start;gap:9px;margin:2px 0 15px;
  font-family:var(--font-golos);font-size:13px;line-height:1.4;color:var(--text-medium);cursor:pointer}
.pme-acc__tyc input{width:16px;height:16px;margin-top:1px;accent-color:var(--secondary-orange);flex-shrink:0}
.pme-acc__tyc a{color:var(--primary-blue)}

/* Botones: ocupan todo el ancho de la tarjeta */
.pme-acc__card .pme-btn{width:100%;padding:12px}
.pme-acc__card .pme-btn + .pme-btn,
.pme-acc__card .pme-btn + .pme-acc__sep{margin-top:10px}

.pme-acc__sep{display:flex;align-items:center;gap:12px;margin:14px 0;
  font-family:var(--font-golos);font-size:12px;color:#b9bcc6}
.pme-acc__sep::before,.pme-acc__sep::after{content:'';flex:1;height:1px;background:#e2e4ec}

.pme-acc__links{margin-top:15px;text-align:center;font-size:13px;line-height:1.9}
.pme-acc__links a{color:var(--primary-blue);text-decoration:none;font-weight:600}
.pme-acc__links a:hover{text-decoration:underline}

/* Volver a la home */
.pme-acc__volver{position:absolute;top:24px;left:24px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  color:var(--bg-white);text-decoration:none;font-size:14px;font-weight:600;
  background:rgba(0,0,0,.28);padding:8px 14px;border-radius:var(--pme-radius-pill)}
.pme-acc__volver:hover{background:rgba(0,0,0,.42)}

/* --- Reglas de contraseña (cambio y alta de clave) --- */
.pme-acc__reglas{list-style:none;margin:0 0 14px;padding:10px 13px;border-radius:6px;
  background:var(--pme-celeste-00);border:1px solid rgba(5,219,243,.25);
  display:flex;flex-direction:column;gap:7px}
.pme-acc__reglas li{display:flex;align-items:center;gap:8px;
  font-family:var(--font-golos);font-size:12.5px;line-height:1.3;color:var(--text-medium)}
.pme-acc__reglas li::before{content:'○';font-size:13px;color:#b9bcc6;flex-shrink:0}
.pme-acc__reglas li.ok{color:#146b0c}
.pme-acc__reglas li.ok::before{content:'●';color:#18ae0b}

/* Pantallas bajas (notebooks, o monitores con zoom de Windows al 125/150%):
   se compacta todavía más para que la tarjeta entre sin scroll vertical. */
@media (min-width:901px) and (max-height:800px){
  .pme-acc{padding:64px 64px 28px}
  .pme-acc__card{padding:24px 30px}
  .pme-acc__logo{margin-bottom:12px}
  .pme-acc__logo img{height:40px}
  .pme-acc__titulo{font-size:21px}
  .pme-acc__sub{margin-bottom:14px}
  .pme-acc__campo{margin-bottom:10px;gap:5px}
  .pme-acc__campo input{padding:9px 11px;font-size:14px}
  .pme-acc__tyc{margin:0 0 12px}
  .pme-acc__card .pme-btn{padding:11px}
  .pme-acc__sep{margin:11px 0}
  .pme-acc__links{margin-top:12px}
  .pme-acc__reglas{margin-bottom:11px;padding:8px 12px;gap:5px}
  .pme-acc__claim h2{font-size:26px}
}

/* Pantallas muy bajas: además, las reglas de contraseña pasan a dos columnas
   (es lo que más alto ahorra en las pantallas con clave). */
@media (min-width:901px) and (max-height:780px){
  .pme-acc{padding:52px 64px 24px}
  .pme-acc__card{padding:21px 28px}
  .pme-acc__reglas{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-bottom:10px}
  .pme-acc__aviso{margin-bottom:10px;padding:9px 12px}
  .pme-acc__campo{margin-bottom:9px}
  .pme-acc__sep{margin:9px 0}
  .pme-acc__links{margin-top:10px}
}

/* Último escalón, para notebooks chicas */
@media (min-width:901px) and (max-height:680px){
  .pme-acc{padding:40px 64px 18px}
  .pme-acc__card{padding:18px 26px}
  .pme-acc__logo{margin-bottom:9px}
  .pme-acc__logo img{height:34px}
  .pme-acc__titulo{font-size:19px}
  .pme-acc__sub{margin-bottom:11px}
  .pme-acc__campo{margin-bottom:8px}
  .pme-acc__campo input{padding:8px 10px}
  .pme-acc__claim h2{font-size:23px}
}

@media (max-width:900px){
  .pme-acc{flex-direction:column;justify-content:center;gap:28px;padding:80px 20px 40px}
  /* en columna, los margin:auto separarían las piezas: se anulan */
  .pme-acc__card,.pme-acc__claim{margin-top:0;margin-bottom:0}
  .pme-acc__card{max-width:none}
  .pme-acc__claim{margin-left:0;max-width:none;text-align:center;order:-1}
  .pme-acc__claim h2{font-size:24px}
}
@media (max-width:480px){
  .pme-acc{padding:72px 16px 32px}
  .pme-acc__card{padding:28px 20px}
  .pme-acc__fila{grid-template-columns:1fr;gap:0}
  .pme-acc__claim h2{font-size:21px}
}

/* ==========================================================================
   Terminos y Condiciones — modal (login) + pagina standalone. v20260805
   Reusa el componente .pme-modal (backdrop + is-visible/is-open).
   Bloque aditivo, no modifica reglas previas.
   ========================================================================== */
.pme-modal__dialog--tyc{max-width:640px;max-height:88vh;padding:0;overflow:hidden;gap:0;border-color:rgba(6,21,38,.12)}

/* Contenido T&C (compartido por el modal del login y la card standalone) */
.pme-tyc{display:flex;flex-direction:column;min-height:0;max-height:88vh}
.pme-tyc__head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-bottom:1px solid rgba(6,21,38,.10)}
.pme-tyc__head h2{margin:0;font-family:var(--font-inter);font-size:20px;font-weight:700;color:var(--text-dark)}
.pme-tyc__close{flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;background:transparent;color:var(--text-medium);cursor:pointer;transition:background-color .15s,color .15s}
.pme-tyc__close:hover{background:rgba(6,21,38,.06);color:var(--text-dark)}
.pme-tyc__close:focus-visible{outline:2px solid var(--primary-blue);outline-offset:2px}
.pme-tyc__body{overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:22px;min-height:0}
.pme-tyc__sec h3{margin:0 0 8px;font-family:var(--font-inter);font-size:15px;font-weight:700;color:var(--primary-blue)}
.pme-tyc__sec p{margin:0;font-family:var(--font-golos);font-size:14px;line-height:1.65;color:var(--text-medium);text-align:justify}
.pme-tyc__foot{padding:16px 24px;border-top:1px solid rgba(6,21,38,.10);display:flex;justify-content:flex-end;gap:12px}

/* Pagina standalone (footer "Legales" / popup del login viejo) */
.pme-tyc-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, #eaf0fb 0%, #f2f5fa 55%, #eef1f7 100%)}
.pme-tyc-card{width:100%;max-width:640px;max-height:92vh;background:var(--bg-light);
  border:1px solid rgba(6,21,38,.10);border-radius:var(--radius-lg);
  box-shadow:0 24px 64px rgba(6,21,38,.20);display:flex;flex-direction:column;overflow:hidden}
.pme-tyc-card .pme-tyc{max-height:92vh}

@media (max-width:480px){
  .pme-modal__dialog--tyc{max-width:none;width:100%;max-height:90vh}
  .pme-tyc__head{padding:16px 18px}
  .pme-tyc__head h2{font-size:18px}
  .pme-tyc__body{padding:18px}
}


/* --- Boton de contacto por WhatsApp (abajo a la derecha) -----------------------
   Verde oficial de la marca. Reemplaza al viejo .help-fab del signo de pregunta,
   que no hacia nada. Se declara aca porque lo usa el pie del sitio publico
   (Index, Pagar y PagoResultado); el marco interno tiene su propia copia. */
.pme-wsp{position:fixed;right:24px;bottom:24px;z-index:1300;
         width:56px;height:56px;border-radius:50%;
         display:flex;align-items:center;justify-content:center;
         background:#25D366;color:#fff;text-decoration:none;
         box-shadow:0 8px 24px rgba(0,0,0,.22);
         transition:transform .18s ease, box-shadow .18s ease}
.pme-wsp svg{width:32px;height:32px;display:block}
.pme-wsp:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.pme-wsp:focus-visible{outline:3px solid #128C7E;outline-offset:3px}
@media (max-width:700px){ .pme-wsp{width:50px;height:50px;right:16px;bottom:16px}
                          .pme-wsp svg{width:28px;height:28px} }
@media (prefers-reduced-motion:reduce){ .pme-wsp{transition:none}
                                        .pme-wsp:hover{transform:none} }