/* ============================================================
   AVANXA CHECKOUT — réplica de maqueta (Fase 0, estático)
   Extraído de avanxa-checkout_13.html sin cambios.
   Tipografías: Visby CF (titulares, fallback a Inter) + Inter
   Logos (AIEP, avanxa, Mercado Pago, Webpay) son placeholders:
   reemplazar por los SVG/PNG reales en fases posteriores.
   ============================================================ */

.avx-checkout *{box-sizing:border-box;margin:0;padding:0;}
.avx-checkout{
  --avx-purple:#471C70;        /* color/secondary/violet (deep) */
  --avx-purple-deep:#3A1559;   /* derivado +oscuro p/ barras TOTAL */
  --avx-purple-2:#9558D8;      /* color/secondary/violet (mid) */
  --avx-link:#9558D8;
  --avx-lime:#E3F853;
  --avx-lime-deep:#cfe23a;
  --avx-line:#E4DDEE;
  --avx-border:#E6DCF3;
  --avx-field:#E2DEE9;
  --avx-text:#222;
  --avx-muted:#9A9AA0;
  --avx-muted-2:#7E7E86;
  --avx-gray-bg:#EDEDED;       /* EDEDED */
  --avx-shadow:0 6px 26px rgba(0,0,0,.10); /* aprox. — confirmar c/ Figma (000000 @40%) */
  --avx-radius:14px;

  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--avx-text);
  max-width:1160px;
  margin:0 auto;
  padding:32px 24px 60px;
  background:transparent;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* ---------- Topbar / Intro ---------- */
.avx-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:42px;flex-wrap:wrap;}
.avx-cart-title{font-family:'Visby CF','Inter',sans-serif;font-size:48px;font-weight:700;color:#222;letter-spacing:-1px;line-height:1;}
.avx-account{display:flex;align-items:center;gap:16px;}
.avx-account-q{font-size:16px;font-weight:700;color:#676767;}
.avx-profile-btn{background:#fff;border:1px solid #ADADAD;border-radius:8px;color:#210B32;font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.4px;padding:13px 22px;text-decoration:none;text-transform:uppercase;white-space:nowrap;}
.avx-profile-btn:hover{background:#f7f7f7;}
.avx-intro{font-size:16px;font-weight:600;color:#3d3d3d;margin-bottom:30px;}

/* ---------- Timeline / pasos ---------- */
.avx-step{position:relative;padding-left:84px;padding-bottom:46px;
  filter:grayscale(0);opacity:1;
  transition:filter .45s ease, opacity .45s ease;}

/* Estado atenuado (blanco y negro): el paso se ve siempre, solo cambia de B/N a
   color con animación suave. No usar display:none.
   BLOQUEO REAL: en PENDING el paso no acepta interacción (clic/foco/escritura) hasta
   que se active (CONFIRMAR Y CONTINUAR -> data-state activo). user-select:none evita
   también la selección de texto. */
.avx-step[data-state="pending"]{filter:grayscale(1);opacity:.55;pointer-events:none;user-select:none;}
.avx-step[data-state="pending"] input,
.avx-step[data-state="pending"] select,
.avx-step[data-state="pending"] textarea,
.avx-step[data-state="pending"] button,
.avx-step[data-state="pending"] a{pointer-events:none;}

/* El Paso 3 atenuado sigue siendo clicable (para que el primer clic registre).
   Si la validación del Paso 2 no pasa, el place order devuelve errores inline
   (sin modal) y no se procesa el pago; lo gestiona checkout.js. */
.avx-step::before{               /* línea vertical conectora */
  content:"";position:absolute;left:25px;top:26px;bottom:0;
  width:2px;background:#DFDFDF;z-index:0;
}
.avx-step:last-child::before{display:none;}

.avx-node{
  position:absolute;left:0;top:0;z-index:1;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Visby CF','Inter',sans-serif;
  font-weight:600;font-size:32px;line-height:1;
}
.avx-node.is-active{background:#9558D8;color:#fff;}
.avx-node.is-idle{background:#fff;color:#888888;border:2px solid #ADADAD;}

.avx-step-title{font-family:'Visby CF','Inter',sans-serif;font-size:32px;font-weight:600;letter-spacing:-.3px;color:#222;padding-top:0;line-height:1.15;}

/* regla bajo "Revisa tu compra" */
.avx-rule{height:3px;border-radius:3px;background:#9558D8;margin:16px 0 32px;width:100%;}

/* ---------- Paso 1 ---------- */
.avx-alianza{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-bottom:32px;flex-wrap:wrap;
  /* Alinear al ancho de la caja morada (.avx-summary), que vive en la columna
     derecha de .avx-grid1 (300px del cupón + 32px de gap). Si cambia el
     grid-template-columns de .avx-grid1, actualizar este offset. */
  margin-left:calc(300px + 32px);
}
.avx-alianza .lbl{font-family:'Visby CF','Inter',sans-serif;font-size:24px;font-weight:600;color:#222;margin-right:6px;letter-spacing:-.2px;}
.avx-checkout .avx-alianza .logo-aiep{width:200px !important;height:auto !important;}
.logo-sep{height:26px;width:auto;}
.logo-avanxa{height:30px;width:auto;}

.avx-grid1{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;}

.avx-coupon{
  background:#EDEDED;border-radius:var(--avx-radius);
  box-shadow:var(--avx-shadow);
  padding:30px 26px;
}
.avx-coupon h4{font-family:'Visby CF','Inter',sans-serif;font-size:20px;font-weight:600;color:#471C70;margin-bottom:30px;line-height:1.25;letter-spacing:-.2px;}
.avx-coupon a{font-size:16px;font-weight:700;color:#9558D8;text-decoration:none;letter-spacing:.3px;}
.avx-coupon a:hover{text-decoration:underline;}

/* cupón: estado formulario */
.avx-coupon-sub{font-size:14px;color:#676767;line-height:1.45;margin-bottom:20px;}
.avx-coupon-state[data-state="b"] h4{margin-bottom:8px;}
.avx-coupon-field{margin-bottom:18px;}
.avx-coupon-apply{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;border:1.6px solid #222;border-radius:8px;color:#222;
  font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.4px;
  padding:13px;cursor:pointer;filter:none !important;transition:background .15s;
}
.avx-coupon-apply:hover{background:#f5f5f5;}
.avx-coupon-cancel{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.4px;
  color:#9558D8;text-decoration:none;text-transform:uppercase;
}
/* cupón: estado éxito */
.avx-coupon-state[data-state="c"]{text-align:center;padding:8px 0;}
.avx-coupon-party{display:block;width:96px;height:auto;margin:0 auto 16px;}
.avx-coupon-success{font-size:18px;font-weight:700;color:#471C70;line-height:1.3;}

.avx-summary{
  background:#3F1C5E;color:#fff;border-radius:8px;
  overflow:hidden;
}
.avx-summary-head{padding:16px 22px 0;}
.avx-secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:500;color:#E4DAF0;margin-bottom:18px;
}
.avx-summary h3{font-size:24px;font-weight:600;color:#fafafa;margin-bottom:8px;}
.avx-summary .lead{font-size:13px;color:#fff;margin-bottom:18px;}
.avx-summary .lead b{color:#fff;}

.avx-line-item{
  display:flex;align-items:center;gap:14px;padding:0 22px 16px;
}
.avx-thumb{
  width:60px;height:60px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(135deg,#3A1559,#9558D8);
  display:flex;align-items:center;justify-content:center;color:#E3F853;
}
.avx-line-item .name{flex:1;font-size:16px;font-weight:700;color:#fff;line-height:1.3;}
.avx-line-item .price{font-size:16px;font-weight:400;color:#fff;white-space:nowrap;}
.avx-line-item .trash{color:#C9B6E2;cursor:pointer;display:flex;}

.avx-total-bar{
  background:#F8F2FD;
  border-radius:8px;
  margin:4px 24px 24px;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;
}
.avx-total-bar .t{font-weight:700;font-size:15px;color:#222;}
.avx-total-bar .t span{font-weight:400;font-size:13px;color:#222;margin-left:6px;}
.avx-total-bar .v{font-weight:700;font-size:18px;color:#222;}

/* ---------- Paso 2 ---------- */
.avx-rule-idle{height:5px;border-radius:3px;background:#D3D3D3;margin:16px 0 32px;width:100%;}

.avx-card{
  background:#FAF6FD;
  border:2px solid #DFDFDF;border-radius:24px;
  padding:30px 32px;
  box-shadow:0 10px 34px rgba(0,0,0,.08); /* aprox. — confirmar valor exacto del Figma */
}
.avx-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:6px;flex-wrap:wrap;
}
.avx-card-head h3{font-family:'Visby CF','Inter',sans-serif;font-size:24px;font-weight:600;color:#471C70;letter-spacing:-.2px;}
.avx-card-head h3 span{color:#9D86BC;font-weight:400;}
.avx-card-head .right{font-size:14px;color:#111;text-align:right;line-height:1.5;font-weight:600;}
.avx-card-head .right a{color:#902E9D;font-weight:600;text-decoration:underline;}
.avx-sub{font-size:13px;font-weight:400;color:#676767;margin-bottom:16px;}

.avx-privacy{font-size:14px;color:#111;line-height:1.6;margin-bottom:22px;}
.avx-privacy b{color:#111;}
.avx-privacy a{color:#902E9D;font-weight:600;text-decoration:none;}
.avx-privacy a:hover{text-decoration:underline;}

.avx-form-label{font-size:18px;font-weight:500;color:#000;margin-bottom:16px;}

.avx-form-box{
  background:#fff;border:1px solid #ADADAD;border-radius:8px;
  padding:24px 24px 20px;
}
.avx-grid-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;}
.avx-grid-fields--3{grid-template-columns:1fr 1fr 1fr;}
.avx-field label{display:block;font-size:14px;font-weight:600;color:#545454;margin-bottom:7px;}
.avx-field label i{color:#545454;font-style:normal;}
.avx-field input{
  width:100%;height:46px;border:1px solid #9558D8;border-radius:4px;
  padding:0 14px;font-size:14px;font-family:inherit;font-weight:600;color:#111;background:#FAF6FD;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.avx-field input::placeholder{color:#676767;font-weight:400;}
.avx-field input:focus{box-shadow:0 0 0 2px rgba(149,88,216,.25);}
.avx-field .hint{font-size:13px;font-weight:400;color:#3988F6;margin-top:7px;line-height:1.4;}

.avx-required{font-size:16px;font-weight:400;color:#7B7B7B;margin-top:18px;}
.avx-invoice{text-align:right;font-size:14px;color:#000;margin-top:18px;}
.avx-invoice b{font-weight:700;color:#000;}
.avx-invoice a{color:#902E9D;font-weight:600;text-decoration:underline;}
.avx-invoice a:hover{text-decoration:underline;}

/* ---------- Paso 3 ---------- */
.avx-secure-divider{
  display:flex;align-items:center;justify-content:center;gap:7px;color:#222;
  font-size:13px;font-weight:400;margin:0 0 30px;
}
.avx-secure-divider .lbl{display:flex;align-items:center;gap:7px;white-space:nowrap;}

/* Columnas invertidas (v1.1.6): "Inscribiendo a" (1fr, izq) | "Medios de Pago" (1.5fr, der).
   En móvil colapsa a 1 columna y, por orden del DOM, "Inscribiendo a" queda arriba. */
.avx-grid3{display:grid;grid-template-columns:1fr 1.5fr;gap:44px;align-items:start;}

/* Botón "CONFIRMAR Y CONTINUAR" (Paso 1): solo POSICIÓN. El estilo visual lo
   aporta .thx-btn.thx-btn-outline (reutilizado de la pantalla de éxito). Aquí
   solo se alinea a la derecha y se ajusta el ancho a su contenido. */
.avx-checkout .avx-step1-actions{display:flex;justify-content:flex-end;margin-top:24px;}
.avx-checkout .avx-step1-actions .thx-btn{width:auto;padding:16px 34px;}

.avx-pay{
  background:#FAF6FD;border:2px solid #ECE3F5;border-radius:20px;
  padding:26px 24px;
}
.avx-pay-head{
  text-align:center;margin-bottom:20px;
  font-family:'Inter',sans-serif;font-size:24px;font-weight:600;color:#471C70;
}
.avx-pay-body{padding:0;}
.avx-pay-total{
  background:#471C70;color:#fff;border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;margin-bottom:18px;
}
.avx-pay-total .t{font-weight:600;font-size:18px;}
.avx-pay-total .t span{font-weight:400;font-size:13px;color:#D9CBEC;margin-left:8px;}
.avx-pay-total .v{font-weight:600;font-size:18px;}

/* método de pago (caja blanca) */
.avx-pay-method{
  background:#fff;border:1.5px solid #E6E2EC;border-radius:12px;
  padding:16px 18px;margin-bottom:14px;
}
.avx-option-row{display:flex;align-items:center;gap:12px;}
.avx-option-row .radio{
  width:20px;height:20px;border-radius:50%;border:2px solid #B9B2C6;flex:0 0 auto;position:relative;
}
.avx-pay-method.is-selected .radio{border-color:#471C70;}
.avx-pay-method.is-selected .radio::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:#471C70;
}
.avx-option-row .txt{flex:1;font-size:18px;font-weight:500;color:#333;}
.avx-pay-logo{height:auto;width:auto;max-height:38px;max-width:104px;object-fit:contain;flex:0 0 auto;}

.logo-mp{display:flex;align-items:center;gap:7px;color:#2D9CDB;line-height:1.05;}
.logo-mp .mp-ic{width:30px;height:22px;border-radius:11px;background:#2D9CDB;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;}
.logo-mp .mp-tx{font-weight:700;font-size:12px;}
.logo-webpay{font-weight:800;font-size:15px;color:#B5179E;line-height:1;text-align:right;}
.logo-webpay .sub{display:block;font-size:7px;color:#999;font-weight:600;letter-spacing:.5px;margin-top:1px;}

.avx-btn{
  width:100%;border:2px solid #D1D1D1;border-radius:8px;background:#E3F853;
  color:#222;font-family:inherit;font-weight:600;font-size:18px;letter-spacing:.2px;
  padding:14px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  margin:16px 0 14px;transition:background .15s,color .15s;filter:none !important;
}
.avx-btn:hover{background:#222;color:#E3F853;}
.avx-btn img{width:22px;height:22px;object-fit:contain;transition:filter .15s;}
.avx-btn:hover img{filter:brightness(0) invert(1);}

.avx-help{text-align:center;font-size:13px;color:#555;margin:0;line-height:1.5;}

.avx-terms{font-size:12px;color:#000;line-height:1.6;margin-top:18px;}
.avx-terms a{color:#902E9D;font-weight:700;text-decoration:underline;}
.avx-wsp{text-align:center;font-size:13px;font-weight:400;color:#000;margin-top:16px;}
.avx-wsp b{font-weight:700;}

.avx-side h4{font-family:'Visby CF','Inter',sans-serif;font-size:24px;font-weight:600;color:#222;margin-bottom:12px;letter-spacing:-.2px;}
.avx-side input{
  width:100%;height:48px;border:1px solid #9558D8;border-radius:6px;
  padding:0 14px;font-size:16px;font-family:inherit;font-weight:400;color:#222;background:#FAFAFA;outline:none;text-align:center;
}
.avx-side .note{font-size:13px;color:#676767;margin:10px 0 12px;line-height:1.4;text-align:center;}
.avx-side .change{display:block;text-align:center;font-size:18px;font-weight:700;color:#9558D8;text-decoration:none;letter-spacing:.3px;}
.avx-side .change:hover{text-decoration:underline;}

.avx-benefits{margin-top:36px;}
.avx-benefits h4{font-family:'Inter',sans-serif;font-size:18px;font-weight:600;color:#222;margin-bottom:18px;letter-spacing:0;}
.avx-benefit{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;}
.avx-benefit .ico{flex:0 0 auto;color:#444;margin-top:1px;}
.avx-benefit .ico img{display:block;width:18px;height:18px;object-fit:contain;}
.avx-benefit .t{font-size:14px;font-weight:400;color:#676767;line-height:1.45;}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .avx-checkout{padding:24px 16px 50px;}
  .avx-grid1,.avx-grid3,.avx-grid-fields{grid-template-columns:1fr;}
  /* En móvil el grid colapsa a 1 columna: la fila de logos vuelve a todo el ancho. */
  .avx-alianza{margin-left:0;}

  /* timeline mobile: sin línea vertical ni sangría — solo el número junto al título */
  .avx-step{padding-left:0;padding-bottom:38px;}
  .avx-step::before{display:none;}
  .avx-node{width:44px;height:44px;font-size:24px;}
  .avx-step-title{margin-left:58px;min-height:44px;display:flex;align-items:center;font-size:26px;}
  .avx-rule,.avx-rule-idle{margin-left:58px;width:auto;}

  /* el resto del contenido a todo el ancho */
  .avx-cart-title{font-size:34px;}
  .avx-topbar{gap:14px;}
  .avx-pay,.avx-card{padding:20px 18px;}
}

/* ---------- Fase 1: datos reales del carrito ---------- */
/* Miniatura real del producto dentro de la caja .avx-thumb */
.avx-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;}

/* Filas de subtotal / descuento sobre el resumen morado */
.avx-sumrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 22px 12px;font-size:14px;font-weight:600;color:#fff;
}
.avx-sumrow.disc{color:#E3F853;}

/* Estado: carrito vacío */
.avx-empty{padding:8px 22px 26px;text-align:center;}
.avx-empty p{color:#fff;font-size:15px;line-height:1.5;margin-bottom:18px;}
.avx-empty-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#E3F853;color:#222;border-radius:8px;
  font-weight:700;font-size:14px;letter-spacing:.4px;text-transform:uppercase;
  text-decoration:none;padding:12px 22px;
}
.avx-empty-btn:hover{background:#cfe23a;}

/* ---------- Fase 2: validación y documento ---------- */
/* Campo oculto según el tipo de documento */
.avx-field.is-hidden{display:none;}

/* Estado de error por campo */
.avx-field.has-error input{border-color:#E2484D;background:#fff;}
.avx-field-error{color:#E2484D;font-size:13px;font-weight:500;margin-top:6px;line-height:1.4;}

/* (El cambio boleta/factura es por enlaces de texto del diseño original, sin botones.) */

/* ---------- Fase 3: cupón AJAX ---------- */
.avx-coupon-error{color:#E2484D;font-size:13px;font-weight:500;margin-top:8px;line-height:1.4;}
.avx-coupon-remove{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.4px;color:#9558D8;text-decoration:none;text-transform:uppercase;cursor:pointer;}
.avx-coupon-remove:hover{text-decoration:underline;}

/* ---------- Fase 3: gateways dinámicos ---------- */
.avx-pay-method{cursor:pointer;}
.avx-pay-logo-wrap{flex:0 0 auto;display:flex;align-items:center;}
.avx-pay-logo-wrap img{max-height:38px;max-width:104px;width:auto;height:auto;object-fit:contain;}
.avx-pay-desc{font-size:13px;color:#676767;margin-top:8px;line-height:1.45;}
.avx-pay-action{display:none;margin-top:6px;}
.avx-pay-method.is-selected .avx-pay-action{display:block;}
.avx-btn.is-loading{opacity:.7;cursor:default;}
.avx-pay-error{color:#E2484D;font-size:14px;font-weight:600;text-align:center;margin:0 0 8px;line-height:1.4;}

/* ============================================================
   v1.1.1: Estados del resumen del Paso 1 (avanxa-estados_10.html)
   - Estado 9: precio normal tachado (sale price de WooCommerce).
   - Estados 1/2/4/5/6/7/8: banners de feedback dentro del resumen.
   Clases nuevas (sin colisión con .avx-btn / .avx-sub del resto).
   ============================================================ */

/* Estado 9 · precio rebajado: normal tachado + precio con descuento */
.avx-line-item .price{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;}
.avx-strike{
  font-size:13px;line-height:16px;letter-spacing:.26px;text-transform:uppercase;
  text-decoration:line-through;color:#F1C1C3;font-weight:400;white-space:nowrap;
}
.avx-price-now{white-space:nowrap;}

/* Contenedor de feedback (hermano de #avx-summary-body, dentro del card morado) */
.avx-feedback{padding:0 24px 24px;}
.avx-feedback:empty{display:none;padding:0;}

/* Banners (success / error / info) — valores 1:1 con avanxa-estados_10.html.
   El banner "carrito vacío" (info) usa el MISMO componente .avx-banner que el de
   "programa eliminado" (success): misma tarjeta/padding/tipografía, solo cambia
   el color de fondo y el layout en columna (igual que el HTML de referencia). */
.avx-banner{display:flex;align-items:center;gap:16px;padding:8px;border-radius:4px;}
.avx-banner.success{background:#BCF5E3;}
.avx-banner.error{background:#F1C1C3;}
.avx-banner.info{background:#99C4FF;flex-direction:column;align-items:stretch;gap:16px;}
.avx-banner__txt{flex:1;text-align:center;font-size:16px;font-weight:700;line-height:22px;color:#111;}
.avx-banner__txt b{font-weight:700;color:#111;}

/* Botón de banner (renombrado para NO heredar el .avx-btn lime del Paso 3) */
.avx-banner-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;border:1px solid #ADADAD;border-radius:8px;padding:8px 16px;
  cursor:pointer;color:#210B32;font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:.07px;text-transform:uppercase;white-space:nowrap;line-height:22px;
  text-decoration:none;transition:background .15s;
}
.avx-banner-btn:hover{background:#F3F3F3;}
.avx-banner-btn svg{width:24px;height:24px;flex-shrink:0;}
.avx-banner-btn--full{width:100%;}

/* ============================================================
   v1.1.2 · BLINDAJE de botones contra Hello Elementor
   El tema aplica `.elementor-kit-XXXXXX button` (rojo / lime) con MÁS
   especificidad (0,1,1) que nuestras clases (0,1,0), por eso "gana" y pinta
   botones donde no debe. Aquí reafirmamos el color correcto de CADA botón del
   checkout y del modal con !important, de una sola vez. NO altera el diseño ya
   aprobado: el .avx-btn lime del Paso 3 se vuelve a fijar idéntico.
   ============================================================ */

/* Catch-all defensivo: ningún botón del checkout/modal hereda fondo (gradiente),
   imagen ni sombra del tema. Solo neutraliza; el color sólido lo fija cada regla
   de abajo. Cubre también botones futuros que aún no hemos estilado. */
.avx-checkout button,
.avx-error-overlay button{
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Paso 3 · FINALIZAR (lime aprobado) — se reafirma idéntico */
.avx-checkout .avx-btn{background-color:#E3F853 !important;color:#222 !important;border:2px solid #D1D1D1 !important;}
.avx-checkout .avx-btn:hover{background-color:#222 !important;color:#E3F853 !important;}

/* APLICAR CUPÓN — reposo BLANCO (texto/ícono #222, borde 1.6px #222);
   hover OSCURO (#222, texto/ícono lime), el borde NO cambia. */
.avx-checkout .avx-coupon-apply{background-color:#fff !important;color:#222 !important;border:1.6px solid #222 !important;}
.avx-checkout .avx-coupon-apply svg path{stroke:#222 !important;}
.avx-checkout .avx-coupon-apply:hover{background-color:#222 !important;color:#E3F853 !important;border:1.6px solid #222 !important;}
.avx-checkout .avx-coupon-apply:hover svg path{stroke:#E3F853 !important;}

/* E · Botones de banner (✕ / check / ¿Deshacer? / Volver a la tienda) — blanco */
.avx-checkout .avx-banner-btn{background-color:#fff !important;color:#210B32 !important;border:1px solid #ADADAD !important;}
.avx-checkout .avx-banner-btn:hover{background-color:#F3F3F3 !important;color:#210B32 !important;}

/* Modal de error: cerrar (transparente), ghost (blanco), lime (Reintentar) */
.avx-error-overlay .avx-close{background-color:transparent !important;color:#471C70 !important;}
.avx-error-overlay .avx-mbtn--ghost{background-color:#fff !important;color:#210B32 !important;border:1px solid #ADADAD !important;}
.avx-error-overlay .avx-mbtn--lime{background-color:#E3F853 !important;color:#222 !important;border:1px solid #D1D1D1 !important;}

/* ============================================================
   Fase 3: pantalla de pago exitoso (avanxa-pago-exitoso)
   Scoped a .avx-thx. Se carga también en la página order-received.
   ============================================================ */
.avx-thx *{box-sizing:border-box;margin:0;padding:0;}
.avx-thx{
  --avx-purple:#471C70;--avx-purple-block:#3F1C5E;--avx-violet:#9558D8;--avx-lime:#E3F853;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#222;max-width:1200px;margin:0 auto;padding:48px 24px 60px;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
.avx-thx .thx-head{display:flex;align-items:center;gap:16px;margin-bottom:34px;flex-wrap:wrap;}
.avx-thx .thx-party{width:54px;height:auto;flex:0 0 auto;}
.avx-thx .thx-title{font-family:'Visby CF','Inter',sans-serif;font-weight:700;font-size:40px;color:var(--avx-purple);letter-spacing:-1px;line-height:1.1;text-align:center;}
.avx-thx .thx-title .thx-sub{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;color:#471C70;letter-spacing:0;margin-left:10px;white-space:nowrap;}
.avx-thx .thx-hero{display:grid;grid-template-columns:1fr 0.92fr;gap:32px;align-items:stretch;margin-bottom:42px;min-height:640px;}
.avx-thx .thx-hero-left{display:flex;flex-direction:column;}
.avx-thx .thx-order-wrap{width:fit-content;align-self:flex-end;}
.avx-thx .thx-order{background:#FDFFE6;border:1px solid #471C70;border-radius:4px;text-align:center;padding:15px;font-size:22px;font-weight:600;color:#222;width:100%;}
.avx-thx .thx-order-cap{text-align:left;white-space:nowrap;font-size:13px;color:#222;margin:9px 0 0;}
.avx-thx .thx-purple{background:var(--avx-purple-block);border-radius:16px 0 0 16px;padding:38px 36px;color:#fff;text-align:center;margin-top:18px;flex:1;display:flex;flex-direction:column;justify-content:center;}
.avx-thx .thx-purple h2{font-family:'Visby CF','Inter',sans-serif;font-size:32px;font-weight:600;color:#fafafa;line-height:1.25;margin-bottom:26px;}
.avx-thx .thx-inner{background:#fff;border-radius:8px;padding:24px 30px;margin-bottom:26px;}
.avx-thx .thx-inner p{color:var(--avx-purple);font-size:16px;line-height:1.55;}
.avx-thx .thx-inner p + p{margin-top:14px;}
.avx-thx .thx-help{font-size:16px;color:#fff;line-height:1.6;margin-bottom:22px;}
.avx-thx .thx-help a{color:#EE9EFF;text-decoration:none;}
.avx-thx .thx-help2{font-size:18px;font-weight:600;color:#fff;}
.avx-thx .thx-hero-right{position:relative;border-radius:0 16px 16px 0;overflow:hidden;min-height:240px;}
.avx-thx .thx-hero-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.avx-thx .thx-actions{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.avx-thx .thx-btn,.avx-checkout .thx-btn{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;padding:19px;font-family:inherit;font-size:15px;letter-spacing:.4px;text-decoration:none;cursor:pointer;text-transform:uppercase;width:100%;}
.avx-thx .thx-btn svg,.avx-checkout .thx-btn svg{flex:0 0 auto;}
.avx-thx .thx-btn-outline,.avx-checkout .thx-btn-outline{background:#fff;border:2px solid #ADADAD;color:#210B32;font-weight:700;}
.avx-thx .thx-btn-outline:hover,.avx-checkout .thx-btn-outline:hover{background:#f7f7f7;}
.avx-thx .thx-btn-lime{background:var(--avx-lime);border:2px solid #D1D1D1;color:#222;font-weight:600;transition:background .15s,color .15s;}
.avx-thx .thx-btn-lime:hover{background:#222;color:var(--avx-lime);}
.avx-thx .thx-cap{font-size:13px;color:#222;margin-top:10px;line-height:1.4;text-align:center;}
.avx-thx .thx-section-title{font-family:'Visby CF','Inter',sans-serif;font-size:28px;font-weight:700;color:#222;letter-spacing:-.5px;margin:54px 0 24px;}
.avx-thx .thx-details{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;}
.avx-thx .thx-card{background:#fff;border:1.5px solid #471C70;border-radius:18px;padding:24px 24px 28px;}
.avx-thx .thx-card-title{font-size:20px;font-weight:600;color:#222;margin-bottom:18px;}
.avx-thx .thx-field{display:flex;align-items:center;gap:10px;border:1px solid #9558D8;background:#FAF6FD;border-radius:6px;padding:11px 16px;margin-bottom:10px;}
.avx-thx .thx-field .lbl{flex:0 0 160px;font-size:14px;font-weight:700;color:#222;}
.avx-thx .thx-field .val{flex:1;font-size:14px;color:#555;line-height:1.4;}
.avx-thx .thx-card-alt{background:#EDEDED;border:1px solid #471C70;}
.avx-thx .thx-card-alt .thx-field{background:#fff;border-color:#9558D8;}
.avx-thx .thx-card-alt .thx-field .lbl{flex-basis:185px;}
.avx-thx .thx-field-total{display:flex;align-items:center;gap:10px;padding:11px 16px;margin-bottom:10px;}
.avx-thx .thx-field-total .lbl{flex:0 0 185px;font-size:14px;font-weight:700;color:#222;}
.avx-thx .thx-field-total .lbl small{font-weight:400;color:#888;font-size:13px;margin-left:6px;}
.avx-thx .thx-field-total .val{flex:1;font-size:14px;font-weight:700;color:#222;}
@media (max-width:760px){
  .avx-thx{padding:32px 16px 50px;}
  .avx-thx .thx-title{font-size:30px;}
  .avx-thx .thx-title .thx-sub{display:block;margin-left:0;margin-top:6px;}
  .avx-thx .thx-hero{grid-template-columns:1fr;min-height:0;}
  .avx-thx .thx-order-wrap{width:auto;align-self:stretch;}
  .avx-thx .thx-hero-right{min-height:240px;order:-1;}
  .avx-thx .thx-actions{grid-template-columns:1fr;gap:16px;}
  .avx-thx .thx-details{grid-template-columns:1fr;}
}

/* ============================================================
   Fase 3: modal de error de pago (avanxa-modal-error)
   ============================================================ */
.avx-error-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(33,11,50,.55);
}
.avx-error-overlay .avx-modal{width:554px;max-width:100%;background:#FAF6FD;border:2px solid #471C70;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:24px;align-items:center;}
.avx-error-overlay .avx-modal__head{width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
.avx-error-overlay .avx-close{width:40px;height:40px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#471C70;}
.avx-error-overlay .avx-close svg{width:24px;height:24px;}
.avx-error-overlay .avx-modal__title{width:100%;text-align:center;font-family:'Visby CF','Inter',sans-serif;font-weight:700;font-size:32px;line-height:40px;letter-spacing:-.32px;color:#471C70;}
.avx-error-overlay .avx-modal__body{display:flex;gap:8px;align-items:stretch;width:100%;}
.avx-error-overlay .avx-msg{flex:0 0 249px;max-width:249px;background:#471C70;border-radius:16px 0 0 16px;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;}
.avx-error-overlay .avx-msg__icon{width:40px;height:40px;color:#fff;}
.avx-error-overlay .avx-msg__icon svg{width:40px;height:40px;}
.avx-error-overlay .avx-msg p{width:201px;max-width:100%;}
.avx-error-overlay .avx-msg .m1{font-weight:400;font-size:16px;line-height:22px;color:#FAFAFA;}
.avx-error-overlay .avx-msg .m2{font-weight:700;font-size:14px;line-height:18px;letter-spacing:.28px;color:#E7E7E7;}
.avx-error-overlay .avx-msg .m3{font-weight:400;font-size:13px;line-height:16px;letter-spacing:.26px;color:#fff;}
.avx-error-overlay .avx-msg .m3 b{font-weight:700;color:#EE9EFF;}
.avx-error-overlay .avx-msg .m4{font-weight:700;font-size:13px;line-height:16px;letter-spacing:.26px;color:#E7E7E7;}
.avx-error-overlay .avx-photo{flex:0 0 249px;max-width:249px;min-height:437px;border-radius:0 16px 16px 0;position:relative;overflow:hidden;background-color:#3A1559;background-size:cover;background-position:center;background-repeat:no-repeat;}
.avx-error-overlay .avx-modal__foot{display:flex;gap:8px;width:100%;}
.avx-error-overlay .avx-mbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:8px 16px;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;line-height:22px;letter-spacing:.07px;text-transform:uppercase;text-decoration:none;border:none;}
.avx-error-overlay .avx-mbtn svg{width:24px;height:24px;flex-shrink:0;}
.avx-error-overlay .avx-mbtn--ghost{background:#fff;border:1px solid #ADADAD;color:#210B32;}
.avx-error-overlay .avx-mbtn--lime{background:#E3F853;border:1px solid #D1D1D1;color:#222;}
@media(max-width:560px){
  .avx-error-overlay .avx-modal__title{font-size:26px;line-height:32px;}
  .avx-error-overlay .avx-modal__body{flex-direction:column;align-items:center;}
  .avx-error-overlay .avx-msg{flex:1 1 auto;max-width:100%;width:100%;border-radius:16px 16px 0 0;}
  .avx-error-overlay .avx-photo{flex:1 1 auto;max-width:100%;width:100%;min-height:200px;border-radius:0 0 16px 16px;}
  .avx-error-overlay .avx-modal__foot{flex-direction:column;}
}

/* ============================================================
   Lote 2 · Modal de login (email ya existente en el LMS)
   Reusa el overlay/estilo del modal de error (.avx-error-overlay) + los campos
   del formulario "Ingresa tus datos" (.avx-field, globales). Una sola columna.
   ============================================================ */
.avx-login-overlay .avx-modal{width:460px;gap:18px;}
.avx-login-overlay .avx-modal__body{flex-direction:column;align-items:stretch;gap:16px;}
.avx-login-intro{font-size:15px;line-height:1.5;color:#471C70;text-align:center;margin:0;}
.avx-login-form{display:flex;flex-direction:column;gap:14px;width:100%;margin:0;}
.avx-login-row{display:flex;justify-content:flex-end;}
.avx-login-forgot{font-size:14px;font-weight:600;color:#9558D8;text-decoration:none;}
.avx-login-forgot:hover{text-decoration:underline;}
.avx-login-feedback:empty{display:none;}
.avx-login-note{border-radius:6px;padding:10px 12px;font-size:14px;font-weight:600;line-height:1.4;text-align:center;}
.avx-login-note--error{background:#F1C1C3;color:#7a1216;}
.avx-login-note--success{background:#BCF5E3;color:#0a6b4a;}
.avx-login-overlay .avx-field input[readonly]{background:#EFEAF5;color:#676767;cursor:not-allowed;}

/* ============================================================
   v1.5.3 / v1.5.4 · Tanda de ajustes (3 · 4 · 5)
   Bloque al FINAL a propósito: gana por orden de cascada sin reescribir
   ninguna regla ya aprobada más arriba.
   ============================================================ */

/* --- (3) Ocultar "¿Ya tienes cuenta?" / "Ingresa a tu perfil" ---------------
   NO se elimina el markup: sigue en templates/checkout.php (.avx-account).
   Para volver a mostrarlo basta con borrar/comentar esta única regla. */
.avx-checkout .avx-topbar .avx-account{display:none !important;}

/* --- (4) Hover de los botones del modal de login ---------------------------
   Mismo efecto que el botón "FINALIZAR MI COMPRA" del Paso 3
   (.avx-checkout .avx-btn:hover -> fondo #222, texto #E3F853, transición
   background/color .15s). Se aplica a "Cancelar" (--ghost) y a "Iniciar
   Sesión" (--lime). Scoped a .avx-login-overlay: el modal de ERROR de pago
   conserva su hover actual. El doble selector (.avx-error-overlay +
   .avx-login-overlay) sube la especificidad a 0,3,0 para superar el bloque
   de BLINDAJE anti-Elementor, que fija el color base con !important.
   El borde NO cambia en hover, para que el botón no salte de tamaño. */
.avx-error-overlay.avx-login-overlay .avx-mbtn{transition:background-color .15s,color .15s;}
.avx-error-overlay.avx-login-overlay .avx-mbtn:hover{background-color:#222 !important;color:#E3F853 !important;}

/* --- (5) Móvil · sección "Revisa tu compra" (Paso 1) -----------------------
   Tipografías exactas entregadas por diseño + los 2 logos de Alianza
   Educativa en UNA SOLA LÍNEA. Solo afecta al Paso 1; Pasos 2/3, pantalla de
   éxito y modales quedan intactos. */
@media (max-width:680px){

  /* Alianza Educativa: el rótulo ocupa su propia línea (100% del ancho) y los
     3 logos quedan juntos en la línea siguiente. Al reducirlos, los 3 caben sin
     wrap incluso a 320px de viewport. */
  .avx-checkout .avx-alianza{gap:12px;row-gap:10px;margin-bottom:24px;}
  .avx-checkout .avx-alianza .lbl{
    flex:0 0 100%;text-align:center;margin-right:0;
    font-size:18px;line-height:24px;
  }
  /* Misma especificidad + !important que la regla de escritorio (línea ~97),
     y posterior en el archivo -> gana. */
  .avx-checkout .avx-alianza .logo-aiep{width:112px !important;height:auto !important;}
  .avx-checkout .avx-alianza .logo-sep{height:16px;width:auto;}
  .avx-checkout .avx-alianza .logo-avanxa{height:18px;width:auto;}

  /* --- Cupón (v1.5.5) · centrar el texto SOLO en móvil ------------------
     Se centra el CONTENEDOR del estado inicial (data-state="a"), que es el que
     contiene "¿Tienes un Código de Descuento?" (h4) y "SI LO TIENES HAZ CLIC
     AQUÍ" (enlace inline). Se apunta al contenedor y no al h4 porque ese h4 es
     markup compartido con el estado "b" (formulario del cupón), que debe seguir
     alineado a la izquierda. El estado "c" (cupón aplicado) ya venía centrado
     por su propia regla. En escritorio no cambia nada. */
  .avx-checkout .avx-coupon-state[data-state="a"]{text-align:center;}

  /* "Estás en la plataforma de pago seguro de Avanxa" */
  .avx-checkout .avx-secure{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-weight:500;font-size:14px;line-height:22px;letter-spacing:.28px; /* 2% */
    vertical-align:middle;
  }

  /* "Resumen de tu Compra" */
  .avx-checkout .avx-summary h3{
    font-family:'Visby CF','Inter',sans-serif;
    font-weight:700;font-size:20px;line-height:24px;letter-spacing:0;
    vertical-align:middle;
  }

  /* --- ESTRUCTURA del ítem (v1.5.4) -----------------------------------
     En escritorio el ítem es una sola fila flex: thumb | título | precio |
     papelera. En móvil esa fila no cabe: el título se estrangula en 4 líneas
     y el precio desborda la caja morada.
     Se reemplaza por una GRILLA de 2 filas, según "como debe ser":
        [ miniatura ] [ título ..................... ]
        [ miniatura ] [ ............ precio ] [ 🗑 ]
     La miniatura ocupa las 2 filas (anclada arriba); el título va solo en la
     primera y el precio, alineado a la derecha, en la segunda junto a la
     papelera. minmax(0,1fr) + min-width:0 permiten que la columna de texto se
     encoja: es lo que evita CUALQUIER desborde. */
  .avx-checkout .avx-line-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "thumb name  name"
      "thumb price trash";
    column-gap:10px;row-gap:4px;
    align-items:start;
    padding:0 22px 18px;
  }
  /* Miniatura más chica y proporcionada (60px -> 40px), anclada arriba */
  .avx-checkout .avx-line-item .avx-thumb{
    grid-area:thumb;align-self:start;
    width:40px;height:40px;
  }
  /* Título del producto: fila propia, ancho completo, 1-2 líneas */
  .avx-checkout .avx-line-item .name{
    grid-area:name;min-width:0;overflow-wrap:anywhere;
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-weight:400;font-size:16px;line-height:22px;letter-spacing:.16px; /* 1% */
    vertical-align:middle;
  }
  /* Precio: fila propia bajo el título, alineado a la derecha.
     flex-wrap es el seguro final: si el precio tachado + el precio final no
     cupieran, bajan de línea en vez de salirse de la caja.
     El precio tachado (estado 9) conserva su tamaño menor. */
  .avx-checkout .avx-line-item .price{
    grid-area:price;min-width:0;
    justify-content:flex-end;flex-wrap:wrap;
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-weight:600;font-size:18px;line-height:24px;letter-spacing:-.18px; /* -1% */
    text-align:right;vertical-align:middle;
  }
  /* Papelera: a la derecha del precio, en su misma línea */
  .avx-checkout .avx-line-item .trash{grid-area:trash;align-self:center;}
}

/* ============================================================
   v1.5.8 · Email gate (Paso 2)
   ============================================================ */

/* Tarjeta del gate: misma visual que .avx-card pero sin padding extra */
.avx-checkout .avx-card--gate {
  padding: 24px 28px 28px;
}
.avx-checkout .avx-gate-label {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: #1a1a1a;
  margin: 0 0 16px;
}

/* Fila email + botón alineados */
.avx-checkout .avx-gate-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.avx-checkout .avx-gate-row .avx-field--gate {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

/* Botón "Continuar" del gate */
.avx-checkout .avx-gate-btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 28px;
  background: #DEFA16;
  color: #222222;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
  align-self: flex-end;
  margin-bottom: 1px; /* alineación óptica con el input */
}
.avx-checkout .avx-gate-btn:hover  { background: #222222; color: #DEFA16; }
.avx-checkout .avx-gate-btn:active { background: #111111; color: #DEFA16; }
.avx-checkout .avx-gate-btn:disabled,
.avx-checkout .avx-gate-btn.is-loading {
  opacity: .65;
  cursor: not-allowed;
}

/* Error inline del gate */
.avx-checkout .avx-gate-error {
  margin-top: 6px;
  font-size: 12px;
  color: #DC2626;
  display: block;
}

/* Responsive: en móvil el botón va debajo del campo */
@media (max-width: 600px) {
  .avx-checkout .avx-gate-row {
    flex-direction: column;
    align-items: stretch;
  }
  .avx-checkout .avx-gate-btn {
    width: 100%;
    align-self: auto;
    margin-bottom: 0;
  }
}

/* ============================================================
   v1.5.8 · Email gate + Paso 2 redesign (Figma)
   ============================================================ */

/* ---------- GATE interno (dentro de .avx-form-box) ---------- */
.avx-checkout .avx-gate-inner { margin-bottom: 0; }

.avx-checkout .avx-gate-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.avx-checkout .avx-gate-row .avx-field--gate {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
.avx-checkout .avx-gate-btn-col {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}

/* Botón CONTINUAR — lima/amarillo del diseño Figma */
.avx-checkout .avx-gate-btn {
  height: 48px;
  padding: 0 32px;
  background: #DEFA16;
  color: #111;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .8px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.avx-checkout .avx-gate-btn:hover  { background: #222222; color: #DEFA16; }
.avx-checkout .avx-gate-btn:active { background: #111111; color: #DEFA16; }
.avx-checkout .avx-gate-btn:disabled,
.avx-checkout .avx-gate-btn.is-loading {
  opacity: .65;
  cursor: not-allowed;
}

/* ---------- BANNER DE SESIÓN (Paso 2.2a) ---------- */
.avx-checkout .avx-session-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border: 1.5px solid #7C3AED;
  border-radius: 8px;
  background: #faf5ff;
  margin-bottom: 20px;
}
.avx-checkout .avx-session-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}
.avx-checkout .avx-session-info svg { color: #7C3AED; flex-shrink: 0; }
.avx-checkout .avx-session-email { color: #7C3AED; font-weight: 600; }
.avx-checkout .avx-session-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avx-checkout .avx-session-q {
  font-size: 13px;
  color: #555;
}
.avx-checkout .avx-session-change {
  padding: 6px 14px;
  border: 1.5px solid #333;
  border-radius: 6px;
  background: transparent;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  color: #111;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.avx-checkout .avx-session-change:hover {
  background: #f3f4f6;
  border-color: #111;
}

/* ---------- TELEFONO CON CODIGO DE PAIS ---------- */
.avx-checkout .avx-field--phone .avx-phone-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #9558D8;
  border-radius: 8px;
  overflow: hidden;
  height: 48px;
  transition: border-color .15s;
}
.avx-checkout .avx-field--phone .avx-phone-wrap:focus-within {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.avx-checkout .avx-field--phone .avx-phone-code {
  font-weight: 600;
  flex: 0 0 auto;
  border: none;
  border-right: 1px solid #d1d5db;
  background: #fff;
  padding: 0 10px;
  font-size: 13px;
  color: #111;
  cursor: pointer;
  outline: none;
  min-width: 0;
  max-width: 175px;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.avx-checkout .avx-field--phone .avx-phone-wrap input[type="tel"] {
  flex: 1 1 0;
  border: none;
  outline: none;
  padding: 0 14px;
  font-size: 15px;
  background: #fff;
  height: 100%;
  min-width: 0;
  color: #111;
  box-shadow: none !important;
}
.avx-checkout .avx-field--phone input[type="tel"],
.avx-checkout .avx-field--phone select.avx-phone-code {
  box-shadow: none !important;
}
.avx-checkout .avx-field--phone.has-error .avx-phone-wrap { border-color: #DC2626; }

/* ---------- SELECTOR DE PAIS (appearance:none + flecha custom) ---------- */
.avx-checkout .avx-field--country .avx-country-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #9558D8;
  border-radius: 8px;
  height: 48px;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: border-color .15s;
}
.avx-checkout .avx-field--country .avx-country-wrap:focus-within {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.avx-checkout .avx-country-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
  transition: opacity .15s;
}
.avx-checkout .avx-country-arrow {
  position: absolute;
  right: 12px;
  color: #6b7280;
  pointer-events: none;
  flex-shrink: 0;
}
.avx-checkout .avx-country-select {
  font-weight: 600;
  flex: 1 1 0;
  border: none;
  outline: none;
  padding: 0 36px 0 38px;
  font-size: 0.92em;
  height: 100%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: #111;
  width: 100%;
}
.avx-checkout .avx-country-wrap.has-value .avx-country-icon { opacity: 0; pointer-events: none; }
.avx-checkout .avx-country-wrap.has-value .avx-country-select { padding-left: 14px; }
.avx-checkout .avx-field--country.has-error .avx-country-wrap { border-color: #DC2626; }

/* ---------- CAMPOS CONTRASEÑA CON OJO ---------- */
.avx-checkout .avx-pass-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.avx-checkout .avx-pass-wrap input[type="password"],
.avx-checkout .avx-pass-wrap input[type="text"] {
  padding-right: 48px !important;
  width: 100%;
}
.avx-checkout .avx-pass-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px;
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color .15s;
}
.avx-checkout .avx-pass-eye:hover { color: #7C3AED; }

/* ---------- RESPONSIVE mobile ---------- */
@media (max-width: 600px) {
  .avx-checkout .avx-gate-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .avx-checkout .avx-gate-btn {
    width: 100%;
    justify-content: center;
  }
  .avx-checkout .avx-session-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .avx-checkout .avx-session-actions {
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .avx-checkout .avx-session-change {
    width: 100%;
    text-align: center;
  }
  .avx-checkout .avx-phone-code-btn { min-width: 100px; max-width: 140px; }
  .avx-checkout .avx-field--phone .avx-phone-code { max-width: 80px; padding: 0 18px 0 6px; font-size: 12px; }
}

@media (max-width: 767px) {
  .avx-checkout .avx-step1-actions .thx-btn { width: 100%; }
}

/* Paso 2 — botón Confirmar y continuar. Mismo tamaño y alineación que el del
   Paso 1 (width auto según texto, alineado a la derecha). */
.avx-checkout .avx-step2-actions { display:flex; justify-content:flex-end; margin-top: 24px; }
.avx-checkout .avx-step2-actions .thx-btn { width: auto; padding: 16px 34px; }
@media (max-width: 767px) {
  .avx-checkout .avx-step2-actions .thx-btn { width: 100%; }
}