/*
 * Landings SEO — diseño v2 (cuerpo segun /var/www/gomez2/nuevo_landings L1/L2/L3,
 * header y footer segun la web nueva). Reemplaza en la landing a Bootstrap, general.css,
 * responsive.css, landing.css, Owl y Font Awesome.
 *
 * Reglas: solo presentacion. Las imagenes que el diseño no muestra se ocultan con .hx-hide
 * (siguen en el HTML con su alt). RTL por :lang() + propiedades logicas: el <html> no cambia.
 */

/* ------------------------------------------------------------------ Fuente (Inter, self-hosted) */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-cyrillic-ext.woff2) format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-greek-ext.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-greek.woff2) format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-vietnamese.woff2) format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ------------------------------------------------------------------ Tokens (alineados a gomez1 globals.css) */
:root{
  --hx-primary:#009afa;
  --hx-primary-600:#0a84d6;
  --hx-primary-50:#eef7fe;
  --hx-ink:#0f1115;
  --hx-ink-2:#1e1f1c;
  --hx-text:#3a404a;
  --hx-muted:#5b6472;
  --hx-muted-2:#8a93a1;
  --hx-border:#e5e8ee;
  --hx-border-2:#d9dee6;
  --hx-soft:#f4f6f9;
  --hx-soft-2:#f6f7f9;
  --hx-dark:#0d1117;
  --hx-danger:#dc3545;
  --hx-radius:12px;
  --hx-shadow:0 12px 36px rgba(13,17,23,.10);
  --hx-shadow-sm:0 6px 18px rgba(13,17,23,.08);
  --hx-page:1180px;
  --hx-gutter:24px;
}

/* ------------------------------------------------------------------ Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:60px}
body.hx-v2{margin:0;background:#fff;color:var(--hx-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Reglas base con :where() = especificidad 0: cualquier clase hx-* les gana sin !important */
:where(.hx-v2) img{max-width:100%;height:auto;border:0}
:where(.hx-v2) a{color:var(--hx-primary);text-decoration:none}
:where(.hx-v2) a:hover{color:var(--hx-primary-600)}
:where(.hx-v2) :where(h1,h2,h3,h4,h5,h6){margin:0;font-weight:700;line-height:1.25;color:var(--hx-ink)}
:where(.hx-v2) p{margin:0}
:where(.hx-v2) ul{margin:0;padding:0;list-style:none}
:where(.hx-v2) :where(button,input,select,textarea){font:inherit;color:inherit}
.hx-v2 [hidden]{display:none!important}
.hx-v2 :focus-visible{outline:2px solid var(--hx-primary);outline-offset:2px}
.hx-hide{display:none!important}
.hx-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hx-center{text-align:center}
.hx-container{width:100%;max-width:var(--hx-page);margin-inline:auto;padding-inline:var(--hx-gutter)}
.hx-contents{display:contents}
.hx-muted{color:var(--hx-muted)}
.hx-end{text-align:end}
.hx-error{display:none;margin-top:6px;font-size:13px;color:var(--hx-danger)}

/* RTL sin tocar el <html>: el atributo lang ya viene del header compartido */
html:lang(ar) body.hx-v2,html:lang(fa) body.hx-v2,html:lang(he) body.hx-v2,html:lang(ur) body.hx-v2,html:lang(ps) body.hx-v2,html:lang(dv) body.hx-v2{direction:rtl}
html:lang(ar) .hx-flip,html:lang(fa) .hx-flip,html:lang(he) .hx-flip,html:lang(ur) .hx-flip,html:lang(ps) .hx-flip,html:lang(dv) .hx-flip{transform:scaleX(-1)}

/* ------------------------------------------------------------------ Botones */
.hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:8px;border:1px solid transparent;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-decoration:none}
.hx-btn--primary{background:var(--hx-primary);color:#fff!important}
.hx-btn--primary:hover{background:var(--hx-primary-600);color:#fff!important}
.hx-btn--ghost{background:transparent;border-color:currentColor}
.hx-btn--text{background:transparent;color:var(--hx-muted)}
.hx-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.hx-icon-btn:hover{background:rgba(255,255,255,.08)}

/* ------------------------------------------------------------------ Header */
.hx-header{position:sticky;top:0;z-index:50;color:#fff;transition:box-shadow .2s}
.hx-header.is-scrolled{box-shadow:0 4px 18px rgba(0,0,0,.18)}
.hx-header-spacer{display:none}
.hx-topbar{background:#000}
.hx-topbar-in{display:flex;align-items:center;gap:20px;height:52px;max-width:1160px}
.hx-logo{display:inline-flex;flex:none}
.hx-logo img{display:block;height:24px;width:auto}
.hx-topnav{margin-inline-start:auto;min-width:0}
.hx-topnav .hx-nav{display:flex;align-items:center;gap:2px}
.hx-topnav .hx-nav-link{color:#fff!important;font-size:14px;font-weight:500}
.hx-topnav .hx-nav-link:hover{background:rgba(255,255,255,.1);color:#fff!important}
.hx-actions{display:flex;align-items:center;gap:6px;margin-inline-start:8px}
.hx-auth{display:flex;align-items:center;gap:8px}
.hx-topbar .hx-btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.hx-topbar .hx-btn--ghost:hover{border-color:#fff;color:#fff}
.hx-account span{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.hx-cart-badge{position:absolute;top:2px;inset-inline-end:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.hx-burger{display:none}
.hx-nav-link{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;white-space:nowrap}
.hx-lang-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;min-width:200px;max-height:60vh;overflow:auto;padding:6px;background:#fff;border:1px solid var(--hx-border);border-radius:10px;box-shadow:0 16px 40px rgba(13,17,23,.16)}
.hx-lang-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--hx-ink-2)!important;font-size:14px}
.hx-lang-item:hover{background:var(--hx-soft)}
.hx-lang-item img{border-radius:50%;object-fit:cover}

/* Drawer movil */
.hx-drawer{position:fixed;inset:0;z-index:70}
.hx-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.hx-drawer-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:300px;max-width:86vw;overflow-y:auto;background:#fff;color:var(--hx-ink);padding:16px;transform:translateX(100%);transition:transform .2s ease}
html:lang(ar) .hx-drawer-panel,html:lang(fa) .hx-drawer-panel,html:lang(he) .hx-drawer-panel,html:lang(ur) .hx-drawer-panel{transform:translateX(-100%)}
.hx-drawer.is-open .hx-drawer-backdrop{opacity:1}
.hx-drawer.is-open .hx-drawer-panel{transform:none}
.hx-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hx-drawer-title{font-size:18px;font-weight:700}
.hx-drawer-head .hx-icon-btn:hover{background:var(--hx-soft)}
.hx-drawer-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.hx-drawer-auth .hx-btn--ghost{color:var(--hx-ink);border-color:var(--hx-border-2)}
.hx-drawer-nav{border-top:1px solid var(--hx-border);padding-top:8px}
.hx-drawer-nav a{display:block;padding:12px 4px;color:var(--hx-ink)!important;font-size:15px;font-weight:500;border-bottom:1px solid var(--hx-soft)}
.hx-drawer-langs{margin-top:16px;padding-top:12px;border-top:1px solid var(--hx-border)}
.hx-drawer-lang-cur{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:14px;font-weight:600}
body.hx-modal-open{overflow:hidden}

/* ------------------------------------------------------------------ Hero + tarjeta flotante */
.hx-banner{position:relative}
.hx-hero{position:relative;overflow:hidden;background:var(--hx-dark);padding:56px var(--hx-gutter) 112px}
.hx-hero-media,.hx-hero-overlay{position:absolute;inset:0}
.hx-hero-media{background:var(--hx-hero-lg) center/cover no-repeat}
@media (max-width:700px){.hx-hero-media{background-image:var(--hx-hero-sm)}}
.hx-hero-overlay{pointer-events:none;background:radial-gradient(ellipse 50% 75% at 50% 45%,rgba(6,10,24,.78) 0%,rgba(6,10,24,.35) 100%),linear-gradient(180deg,rgba(6,10,24,.15) 0%,rgba(6,10,24,.7) 100%)}
.hx-hero-inner{position:relative;z-index:2;max-width:980px;margin:0 auto;text-align:center}
.hx-hero-stack{display:flex;flex-direction:column;align-items:center}
.hx-hero-stack .hx-breadcrumb{order:2}
.hx-breadcrumb .breadcrumb{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:#dde3ec;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hx-breadcrumb .breadcrumb-item{display:inline-flex;align-items:center;gap:6px}
.hx-breadcrumb .breadcrumb-item+.breadcrumb-item::before{content:"/";color:#9aa6b6}
.hx-breadcrumb a{color:#dde3ec}
.hx-breadcrumb a:hover{color:#fff}
.hx-breadcrumb .breadcrumb-item.active{color:#fff;font-weight:600}
.hx-v2 .hx-h1{font-size:40px;line-height:1.15;font-weight:700;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5);text-wrap:balance}

.hx-card-wrap{position:relative;z-index:3;max-width:960px;margin:-72px auto 0;padding:0 var(--hx-gutter)}
.hx-card-wrap--wide{max-width:1100px}
.hx-card{position:relative;background:#fff;border:1px solid var(--hx-border);border-radius:16px;box-shadow:0 1px 2px rgba(13,17,23,.04),0 16px 40px rgba(13,17,23,.10);padding:28px}
.hx-v2 .hx-intro{margin:0 auto 22px;max-width:760px;font-size:16px;line-height:1.5;font-weight:500;color:var(--hx-text);text-align:center;text-wrap:pretty}
.hx-back{position:absolute;top:18px;inset-inline-start:18px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--hx-border);border-radius:50%;background:#fff;color:var(--hx-ink)!important}
.hx-back:hover{border-color:var(--hx-primary);color:var(--hx-primary)!important}
html:lang(ar) .hx-back svg,html:lang(fa) .hx-back svg,html:lang(he) .hx-back svg,html:lang(ur) .hx-back svg{transform:scaleX(-1)}

/* Selectores */
.hx-selectors{max-width:420px;margin:0 auto}
.hx-selectors--dest{max-width:760px}
.hx-fields-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx-field{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.hx-label{font-size:13px;font-weight:600;color:var(--hx-muted);text-align:center}
.hx-select,.hx-input{width:100%;height:44px;border:1px solid var(--hx-border-2);border-radius:8px;background:#fff;padding:0 12px;font-size:15px;color:var(--hx-ink)}
.hx-select{-webkit-appearance:none;appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
html:lang(ar) .hx-select,html:lang(fa) .hx-select,html:lang(he) .hx-select,html:lang(ur) .hx-select{background-position:left 12px center}
.hx-select:focus,.hx-input:focus{outline:0;border-color:var(--hx-primary);box-shadow:0 0 0 3px rgba(0,154,250,.15)}
.hx-dest-row{display:flex;gap:8px}
/* el JS de la landing agrega "+<codigo>" como texto dentro de .search-code */
.hx-dest-code{flex:0 0 46%;min-width:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--hx-ink)}
.hx-dest-code .form-group{flex:1;min-width:0}
.hx-dest-code .form-group{margin:0}
.hx-dest-row .hx-input{flex:1;min-width:0}

/* Picker con busqueda (JS lo arma sobre el <select> real) */
.hx-picker{position:relative;width:100%}
.hx-picker-btn{display:flex;align-items:center;gap:10px;width:100%;height:44px;border:1px solid var(--hx-border-2);border-radius:8px;padding:0 12px;background:#fff;font-size:15px;font-weight:500;color:var(--hx-ink);text-align:start;cursor:pointer}
.hx-picker-btn:hover,.hx-picker.is-open .hx-picker-btn{border-color:var(--hx-primary)}
.hx-picker-btn svg{flex:none;color:var(--hx-muted);transition:transform .15s}
.hx-picker.is-open .hx-picker-btn svg{transform:rotate(180deg)}
.hx-picker-flag{flex:none;border-radius:50%;object-fit:cover}
.hx-picker-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-picker-menu{position:absolute;z-index:41;top:calc(100% + 6px);inset-inline:0;background:#fff;border:1px solid #e1e5eb;border-radius:10px;box-shadow:0 16px 40px rgba(13,17,23,.16);overflow:hidden}
.hx-picker-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #eef0f4;color:var(--hx-muted-2)}
.hx-picker-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px;color:var(--hx-ink)}
.hx-v2 .hx-picker-search input:focus-visible{outline:0}
.hx-picker-list{max-height:280px;overflow-y:auto;padding:6px}
.hx-picker-opt{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:6px;padding:9px 10px;font-size:14px;text-align:start;cursor:pointer;background:transparent;color:var(--hx-ink)}
.hx-picker-opt img{flex:none;border-radius:50%;object-fit:cover}
.hx-picker-opt:hover,.hx-picker-opt:focus{background:var(--hx-soft);outline:0}
.hx-picker-opt.is-selected{background:var(--hx-primary-50);color:var(--hx-primary);font-weight:600}
.hx-picker-empty{margin:0;padding:14px 10px;font-size:13px;color:var(--hx-muted-2);text-align:center}
.hx-dest-code .hx-picker-btn{font-size:14px}

/* Bloques dentro de la tarjeta */
.hx-block{margin-top:4px}
.hx-v2 .hx-h2-card{margin:26px 0 16px;font-size:20px;font-weight:700;letter-spacing:-.01em;text-align:center}
.hx-empty{padding:32px 0 8px;text-align:center}
.hx-empty h5{font-size:16px;font-weight:500;color:var(--hx-muted)}

/* L1: servicios */
.hx-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.hx-service{display:flex;align-items:center;gap:12px;border:1px solid var(--hx-border);border-radius:10px;padding:14px;color:var(--hx-ink)!important;font-size:14px;font-weight:500;transition:border-color .15s,box-shadow .15s}
.hx-service:hover{border-color:var(--hx-primary);box-shadow:var(--hx-shadow-sm)}
.hx-service-icon{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:8px;background:var(--hx-soft);color:#1e1f1c}
.hx-service-name{min-width:0}

/* Categorias (L2): tarjetas y slider del home de la web nueva (CategoriesRow.tsx). Sin cards
   duplicadas para el loop infinito: duplicarian enlaces en el HTML. Las flechas las agrega el JS
   (sin texto) y solo se ven si las categorias no entran. */
.hx-cats{position:relative;margin-top:16px;padding-bottom:20px;margin-bottom:4px;border-bottom:1px solid var(--hx-border)}
.hx-pills{display:flex;align-items:center;justify-content:center;gap:8px;overflow-x:auto;padding:8px 2px;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}
.hx-pills::-webkit-scrollbar{display:none}
.hx-pills.is-dragging{cursor:grabbing}
.hx-pills.is-dragging a{pointer-events:none}
.hx-cats.is-overflow .hx-pills{justify-content:flex-start;padding-inline:40px}
.hx-pill{flex:none;display:block}
.hx-pill .landing_mini_service{display:flex;flex-direction:row;align-items:center;gap:8px;height:44px;padding:0 14px 0 8px;border:1px solid #dcdbdc;border-radius:12px;background:#fff;font-size:13px;font-weight:500;line-height:1.2;color:#1e1f1c;white-space:nowrap;transition:box-shadow .15s,border-color .15s}
.hx-pill:hover .landing_mini_service{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.hx-pill .hx-ico{flex:none;width:28px;height:28px;padding:6px;border-radius:50%;background:#f5f7fa;color:#1e1f1c}
.hx-pill.is-active .landing_mini_service{border-color:var(--hx-primary);background:#eff7fd}
.hx-pill.is-active .hx-ico{background:#fff;color:var(--hx-primary)}
.hx-cats-arrow{position:absolute;top:calc(50% - 10px);z-index:2;display:none;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:50%;background:#fff;color:#1e1f1c;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);transform:translateY(-50%);cursor:pointer}
.hx-cats-arrow:hover{background:#f5f7fa}
.hx-cats-arrow--prev{inset-inline-start:0}
.hx-cats-arrow--next{inset-inline-end:0}
.hx-cats.is-overflow .hx-cats-arrow{display:flex}
html:lang(ar) .hx-cats-arrow svg,html:lang(fa) .hx-cats-arrow svg,html:lang(he) .hx-cats-arrow svg,html:lang(ur) .hx-cats-arrow svg{transform:scaleX(-1)}

/* Busqueda de operadores (L2) */
.hx-search-wrap{position:relative;max-width:420px;margin:0 auto 22px}
.hx-search-ico{position:absolute;top:50%;inset-inline-start:12px;transform:translateY(-50%);color:var(--hx-muted-2);pointer-events:none}
.hx-v2 .hx-search-input{height:42px;padding-inline-start:36px;font-size:14px;background:#fff}

/* Operadores (L2) */
.hx-ops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.hx-op{display:block;height:100%;border:1px solid #e1e5eb;border-radius:10px;padding:8px 8px 12px;background:#fff;transition:box-shadow .15s,border-color .15s}
.hx-op:hover{box-shadow:var(--hx-shadow-sm);border-color:#cfd6e0}
.hx-op-inner{display:flex;flex-direction:column;gap:10px}
.hx-op-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:8px;background:#f4f5f8;overflow:hidden}
.hx-op-logo img{display:block;max-width:78%;max-height:74%;width:auto;height:auto;object-fit:contain;border-radius:6px}
.hx-op-name{display:block;padding:0 2px;font-size:13px;line-height:1.35;font-weight:600;color:#1c1d20;text-wrap:pretty}
.hx-op-name br{display:none}
/* " en Pais" del nombre: en el HTML (texto de ancla igual a v1), no se muestra */
.hx-op-in{display:none}
/* Toda la tarjeta es el enlace: el "Select" queda en el HTML (mismo texto de ancla) pero no se muestra */
.hx-op-cta{display:none}
html:lang(ar) .hx-op-cta svg,html:lang(fa) .hx-op-cta svg,html:lang(he) .hx-op-cta svg,html:lang(ur) .hx-op-cta svg{transform:scaleX(-1)}

/* Paginacion (la arma renderPagination) */
.hx-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:22px}
.hx-pagination:empty{display:none}
.paginationButton{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--hx-muted);font-size:14px;font-weight:500;cursor:pointer}
.paginationButton:hover{background:var(--hx-soft);color:var(--hx-ink)}
.paginationButton.active{color:var(--hx-ink);font-weight:700;border-color:var(--hx-dark)}
.paginationButton.prev,.paginationButton.next{border-color:var(--hx-border)}
html:lang(ar) .paginationButton.prev svg,html:lang(ar) .paginationButton.next svg,html:lang(fa) .paginationButton.prev svg,html:lang(fa) .paginationButton.next svg{transform:scaleX(-1)}
.hx-pag-dots{color:var(--hx-muted-2);padding:0 2px}

/* Productos / denominaciones (L3): estilo exacto del selector de montos de ProductDetailView (gomez1) */
/* Montos: el JS (layoutProds) elige --hx-cols segun el ancho y la cantidad visible para que las filas
   queden completas; si no se puede (p. ej. 7 montos) la ultima fila va centrada. */
.hx-prods{--hx-cols:6;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hx-prods--long{--hx-cols:4}
.hx-prod-wrap{display:flex;flex:0 0 calc((100% - (var(--hx-cols) - 1) * 8px) / var(--hx-cols));min-width:0}
/* Antes de que corra la paginacion (12 montos / 15 operadores por pagina) solo se ve la primera pagina.
   .hx-will-page lo pone el servidor SOLO si la paginacion va a correr (mismas condiciones del JS):
   asi la pagina no colapsa al cargar (CLS). El HTML trae todos igual que siempre. */
.hx-prods.hx-will-page:not(.is-paged) > .productWrap:nth-child(n+13),.hx-ops.hx-will-page:not(.is-paged) > .operatorWrap:nth-child(n+16){display:none}
/* Columnas por ancho de pantalla, iguales a las de layoutProds() en landing-v2.js:
   escritorio 6 (nombres largos 4), tablet 4 (3), movil 2. Con menos montos que columnas se mantiene
   ese ancho de cajita y se centran (1 monto no ocupa todo el ancho). Con mas, el JS elige la cantidad
   que deja menos huecos; las reglas de abajo (generadas con el mismo algoritmo, 1-12 montos) ponen ese
   valor desde el primer pintado para que no haya salto (CLS). */
@media (max-width:899px){.hx-prods{--hx-cols:4}.hx-prods--long{--hx-cols:3}}
@media (max-width:640px){.hx-prods,.hx-prods--long{--hx-cols:2}}
@media (min-width:900px){
  .hx-prods:has(> .hx-prod-wrap:nth-child(7)):not(:has(> .hx-prod-wrap:nth-child(8))){--hx-cols:4}
  .hx-prods:has(> .hx-prod-wrap:nth-child(8)):not(:has(> .hx-prod-wrap:nth-child(9))){--hx-cols:4}
  .hx-prods:has(> .hx-prod-wrap:nth-child(9)):not(:has(> .hx-prod-wrap:nth-child(10))){--hx-cols:5}
  .hx-prods:has(> .hx-prod-wrap:nth-child(10)):not(:has(> .hx-prod-wrap:nth-child(11))){--hx-cols:5}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(5)):not(:has(> .hx-prod-wrap:nth-child(6))){--hx-cols:3}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(6)):not(:has(> .hx-prod-wrap:nth-child(7))){--hx-cols:3}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(9)):not(:has(> .hx-prod-wrap:nth-child(10))){--hx-cols:3}
}
@media (min-width:641px) and (max-width:899px){
  .hx-prods:has(> .hx-prod-wrap:nth-child(5)):not(:has(> .hx-prod-wrap:nth-child(6))){--hx-cols:3}
  .hx-prods:has(> .hx-prod-wrap:nth-child(6)):not(:has(> .hx-prod-wrap:nth-child(7))){--hx-cols:3}
  .hx-prods:has(> .hx-prod-wrap:nth-child(9)):not(:has(> .hx-prod-wrap:nth-child(10))){--hx-cols:3}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(4)):not(:has(> .hx-prod-wrap:nth-child(5))){--hx-cols:2}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(7)):not(:has(> .hx-prod-wrap:nth-child(8))){--hx-cols:2}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(8)):not(:has(> .hx-prod-wrap:nth-child(9))){--hx-cols:2}
  .hx-prods.hx-prods--long:has(> .hx-prod-wrap:nth-child(10)):not(:has(> .hx-prod-wrap:nth-child(11))){--hx-cols:2}
}
.hx-prod{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:8px 10px;border:1px solid #dcdbdc;border-radius:6px;background:#fff;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.hx-prod:hover,.hx-prod:focus-visible{border-color:var(--hx-primary)}
.hx-prod-text{display:flex;flex-direction:column;align-items:center}
.hx-prod-badge{position:absolute;top:-8px;inset-inline-end:-4px;padding:1px 6px;border-radius:999px;background:#16b89d;color:#fff;font-size:9px;font-weight:700;line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.hx-prod-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.25;color:#1e1f1c;overflow-wrap:anywhere}
.hx-prod-desc{display:none}
.hx-prod-foot{display:flex;justify-content:center;margin-top:4px}
.hx-prod-price{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#888}
.hx-prod .icon_landing_btn{display:inline-flex;align-items:center}
.hx-prod .icon_landing_btn svg{display:none}

/* L3 en dos columnas (mockup L3): selector arriba; izquierda logo + nombre + descripcion; derecha denominaciones */
/* L3 en FILAS en todas las pantallas: selector, info (logo + nombre + descripcion) y montos a todo el ancho.
   Solo orden visual por grid-row: el DOM no cambia. */
.hx-card--l3{display:grid;grid-template-columns:minmax(0,1fr);padding:0;overflow:hidden}
.hx-card--l3 > .hx-back{z-index:2}
.hx-card--l3 > .hx-selectors{grid-column:1 / -1;grid-row:1;max-width:none;margin:0;padding:28px 28px 20px;border-bottom:1px solid #eef0f4}
.hx-card--l3 > .hx-selectors > .hx-field{max-width:420px;margin:0 auto}
.hx-card--l3 > .hx-selectors > .hx-fields-2{max-width:760px;margin:0 auto}
/* Descripcion (H2 de la intro): entre los selectores y los montos, centrada */
.hx-v2 .hx-card--l3 > .hx-intro{grid-column:1;grid-row:2;max-width:760px;margin:0 auto;padding:22px 28px 0;font-size:15px;font-weight:400;line-height:1.6;color:#5b6472;text-align:center}
.hx-card--l3 > .hx-block{grid-column:1;grid-row:3;display:flex;flex-direction:column;justify-content:center;margin:0;padding:18px 28px 28px}
.hx-card--l3 .hx-block .hx-center{text-align:center}
.hx-v2 .hx-card--l3 .hx-h2-card{margin:0 0 14px;font-size:17px;text-align:center}
.hx-card--l3 .hx-cats:not(:has(a)),.hx-pills:not(:has(a)){display:none}
.hx-card--l3 .hx-empty{padding:24px 0 0;text-align:start}
.hx-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--hx-border-2);border-top-color:var(--hx-primary);border-radius:50%;animation:hxSpin .7s linear infinite}
@keyframes hxSpin{to{transform:rotate(360deg)}}
#nw-cart-error{margin:-6px 0 14px;text-align:center}

/* SendMoney (sin landings activas hoy; se mantiene funcional) */
.hx-sendmoney{margin-top:20px}
.hx-sendmoney-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hx-sendmoney .form-group{margin-bottom:12px}
.hx-sendmoney label{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--hx-muted)}
.hx-sm-row{display:grid;grid-template-columns:1fr 140px;gap:8px}
.hx-sm-currency .form-group{position:relative}
.hx-sm-currency img{position:absolute;top:50%;inset-inline-start:10px;width:20px;height:20px;transform:translateY(-50%);border-radius:50%}
.hx-sm-currency .hx-select,.hx-sm-currency .hx-input{padding-inline-start:38px}
.hx-sm-table{width:100%;border-collapse:collapse;font-size:14px}
.hx-sm-table td{padding:10px 0;border-bottom:1px solid var(--hx-border)}
.hx-sendmoney .send_money_message{margin:12px 0 16px;font-size:13px}

/* ------------------------------------------------------------------ Secciones */
.hx-section{padding:72px 0 0}
.hx-section-head{margin-bottom:24px}
/* Titulos y subtitulos centrados en Metodos de pago, Como funciona y Preguntas frecuentes (L1/L2/L3) */
.hx-steps .hx-section-head,.hx-faq .hx-section-head,.hx-pay .hx-h2{text-align:center}
.hx-v2 .hx-steps .hx-sub,.hx-v2 .hx-faq .hx-sub{margin-inline:auto;max-width:760px}
.hx-v2 .hx-h2{font-size:28px;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.hx-v2 .hx-sub{margin:6px 0 0;font-size:15px;font-weight:400;line-height:1.5;color:var(--hx-muted)}
.hx-v2 .hx-p{margin:14px 0 0;font-size:15px;line-height:1.7;color:var(--hx-text);text-wrap:pretty}

/* Metodos de pago */
.hx-pay{margin-top:64px;padding:56px 0;background:var(--hx-soft)}
.hx-pay .hx-h2{margin-bottom:22px;font-size:24px}
.hx-pay-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hx-pay-item{display:flex}
.hx-pay-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;padding:20px 14px;border:1px solid var(--hx-border);border-radius:10px;background:#fff;color:var(--hx-ink)!important;text-align:center;transition:border-color .15s,box-shadow .15s}
.hx-pay-card:hover{border-color:var(--hx-primary);box-shadow:var(--hx-shadow-sm)}
.hx-pay-card img{width:auto;height:34px;object-fit:contain}
.hx-pay-card p{font-size:13px;font-weight:500}
.hx-pay + .hx-steps{padding-top:72px}

/* Como funciona */
.hx-steps-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:stretch}
.hx-how{order:-1;position:relative;overflow:hidden;min-height:100%;border-radius:16px;background:#000;padding:32px;display:flex;align-items:center;justify-content:center;text-align:center}
.hx-how-ring{position:absolute;inset-inline-end:-60px;bottom:-60px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(45,156,255,.35);box-shadow:0 0 60px rgba(0,154,250,.35) inset;pointer-events:none;animation:hxRing 7s ease-in-out infinite}
@keyframes hxRing{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
.hx-how-body{position:relative;z-index:2;max-width:360px}
.hx-v2 .hx-how-title{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff;text-wrap:pretty}
.hx-how-text{margin-top:12px!important;font-size:14px;line-height:1.65;color:#b9c2cf}
.hx-steps-list{display:flex;flex-direction:column;gap:10px}
.hx-step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--hx-border);border-radius:10px;padding:16px 18px}
.hx-step-icon{flex:none;display:flex;width:40px;height:40px}
.hx-step-icon img{width:40px;height:40px}
.hx-v2 .hx-step-title{font-size:15px;font-weight:600;line-height:1.4}
.hx-step-desc{margin-top:4px!important;font-size:13px;line-height:1.6;color:var(--hx-muted)}

/* App (replica de DownloadApp.tsx de gomez1, con el contenido del JSON) */
.hx-app{overflow:hidden;margin-top:72px;padding:40px 0;background:#f5f7fa}
.hx-app-in{max-width:1160px;margin:0 auto;padding:0 16px;display:flex;flex-direction:column;align-items:center;gap:48px}
.hx-app-body{width:100%}
.hx-app-media{order:2;display:flex;width:100%;align-items:center;justify-content:center}
.hx-app-media img{display:block;width:230px;height:auto}
.hx-v2 .hx-app-title{max-width:530px;font-size:25px;font-weight:700;line-height:1.375;color:#1e1f1c}
.hx-app-text{max-width:500px;margin-top:16px!important;font-size:16px;line-height:1.625;color:rgba(30,31,28,.7)}
/* botones arriba (160x44, 2 por fila) y las dos cifras debajo: el DOM trae cifra+boton por tienda */
.hx-app-stores{display:grid;grid-template-columns:repeat(2,minmax(0,160px));column-gap:12px;row-gap:12px;max-width:332px;margin-top:32px}
.hx-store{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;height:44px;padding:0 10px;border-radius:8px;background:#1e1f1c;color:#fff!important;font-size:12px;font-weight:500;transition:opacity .15s}
.hx-store:hover{opacity:.9;color:#fff!important}
.hx-store-icon{flex:none;width:20px;height:20px}
/* Una sola linea (icono + nombre), como DownloadApp.tsx: la etiqueta "Available on" queda en el
   HTML (mismo texto que antes para Google) pero no se muestra */
.hx-store-text{display:flex;align-items:center;min-width:0;overflow:hidden;font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
.hx-store-text small{display:none}
.hx-store-text br{display:none}
.hx-stat{grid-row:3;margin-top:28px}
/* "4.42k Opiniones" viene del JSON como un solo texto (2 palabras en los 10 idiomas):
   min-content baja "Opiniones" a la segunda linea sin tocar el HTML */
.hx-stat-qty{display:block;width:min-content;font-size:20px;font-weight:700;line-height:1.25;color:#1e1f1c}
.hx-stars{display:flex;align-items:center;gap:2px;margin-top:4px!important}
.hx-stars li{display:flex;color:#ffc107}
.hx-stars svg{width:16px;height:16px}
.hx-stars-pts{order:9;margin-inline-start:4px;font-size:12px;color:#5d5d5d!important}
@media (min-width:768px){
  .hx-app{padding:100px 0}
  .hx-v2 .hx-app-title{font-size:30px}
  .hx-app-media img{width:300px}
}
@media (min-width:1024px){
  .hx-app-in{flex-direction:row;gap:0}
  .hx-app-body{width:55%}
  .hx-app-media{width:45%;align-self:stretch}
}
@media (min-width:1280px){.hx-app-in{padding:0}}

/* Por que Hablax */
.hx-why-in{max-width:808px;text-align:center}

/* FAQ: pestañas en escritorio, acordeon en movil */
.hx-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-auto-rows:min-content;column-gap:24px;row-gap:6px;align-items:start}
.hx-faq-item{display:contents}
.hx-faq-head{grid-column:1}
.hx-faq-h{font-size:14px;font-weight:400;line-height:1.4}
.hx-faq-q{display:flex;align-items:center;gap:14px;width:100%;border:1px solid #e1e5eb;border-radius:10px;padding:14px 16px;background:#fff;color:#1c1d20;font-size:14px;line-height:1.4;font-weight:400;text-align:start;cursor:pointer;transition:background .15s,border-color .15s}
.hx-faq-q:hover{border-color:#c9d1dc}
.hx-faq-item.is-open .hx-faq-q{border-color:var(--hx-primary);background:var(--hx-primary-50);color:var(--hx-ink)}
.hx-faq-num{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:700;background:#f1f3f6;color:var(--hx-muted)}
.hx-faq-num::before{content:attr(data-n)}
.hx-faq-item.is-open .hx-faq-num{background:var(--hx-primary);color:#fff}
.hx-faq-qtext{flex:1;min-width:0}
.hx-chev{flex:none;display:none;color:var(--hx-muted);transition:transform .15s}
.hx-faq-a{grid-column:2;grid-row:1 / span 5;display:none;align-self:stretch;border-radius:12px;background:var(--hx-soft-2);padding:32px}
.hx-faq-a.show{display:block}
/* Escritorio: la pregunta abierta como titulo de la caja + separador (attr(data-q) lo pone el JS) */
@media (min-width:900px){
  .hx-faq-a.show{display:flex;flex-direction:column;justify-content:center}
  .hx-faq-a[data-q]::before{content:attr(data-q);display:block;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--hx-border);font-size:18px;font-weight:600;line-height:1.4;color:var(--hx-ink)}
}
.hx-faq-a .card-body{font-size:15px;line-height:1.7;color:var(--hx-text)}

/* ------------------------------------------------------------------ Soporte (partial compartido support.php, restilado) */
/* support.php trae style="margin:0;padding-top:0" en linea (from_home): de ahi los !important */
#new_support{max-width:1100px;margin:0 auto!important;padding:88px var(--hx-gutter) 96px!important}
#new_support > .container > .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#new_support > .container > .row > div:first-child{grid-column:1 / -1;text-align:center;margin-bottom:26px}
#new_support > .container > .row > div:nth-child(4){grid-column:1 / -1}
#new_support > .container > .row > div:nth-child(5){display:none}
#new_support .title-section{margin:0;font-size:32px!important;font-weight:700!important;letter-spacing:-.02em;color:var(--hx-ink);text-align:center}
#new_support > .container > .row > div:first-child > h3{margin:14px auto 0!important;max-width:520px;font-size:15px!important;font-weight:400!important;line-height:1.55!important;letter-spacing:0!important;color:#6b7380!important}
#new_support .box_support{height:100%;border:1px solid #e1e5eb;border-radius:15px;padding:30px;background:#fff}
#new_support .box_support > .row{display:grid;grid-template-columns:35px minmax(0,1fr);column-gap:12px;row-gap:14px;align-items:center}
#new_support .box_support > .row > div:nth-child(2){display:contents}
#new_support .box_support > .row > div:nth-child(3){grid-column:1 / -1}
#new_support .box_support > .row + .row{margin-top:14px;padding-top:0!important}
#new_support .box_support > .row + .row > div:first-child{display:none}
#new_support .box_support > .row + .row > div:nth-child(2){display:block;grid-column:1 / -1}
#new_support .img_support{display:block;width:35px;height:35px;padding:9.5px;border-radius:50%;background:#f5f7fa}
#new_support .ttitle_support{font-size:18px;font-weight:600;color:var(--hx-ink)}
#new_support .description_support{grid-column:1 / -1;font-size:13px;line-height:1.6;color:#6b7380}
#new_support .btn_support{display:inline-flex;align-items:center;height:36px;padding:0 20px;border-radius:8px;background:#1e1f1c;color:#fff!important;font-size:14px;font-weight:500;transition:opacity .15s}
#new_support .btn_support:hover{opacity:.9}
#new_support #contact_celphone:not(.hx-visually-hidden){width:100%;height:44px;border:0;border-bottom:1px solid var(--hx-border-2);background:transparent}
#new_support .hx-picker-btn{border-width:0 0 1px;border-radius:0;padding-inline:0}
/* Botones de apps del partial buttons/support */
#new_support .row.m-0{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px}
#new_support .btn_download{display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 14px;border-radius:8px;background:#14171c;color:#fff!important}
#new_support .btn_download:hover{background:#000}
#new_support .btn_download .btnDiv{display:flex;align-items:center;gap:10px}
#new_support .btn_download img{width:18px;height:18px}
#new_support .btn_download i{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--hx-ico) center/contain no-repeat;mask:var(--hx-ico) center/contain no-repeat}
#new_support .btn_download .fa-google-play{--hx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 1.8c-.4.3-.6.8-.6 1.4v17.6c0 .6.2 1.1.6 1.4l9.9-10.2L3.6 1.8zm11.3 8.8L5.6.9l11.8 6.8-2.5 2.9zm0 2.8 2.5 2.9L5.6 23.1l9.3-9.7zm5.7-3.3-2.8-1.6-2.7 2.9 2.7 2.9 2.9-1.7c.8-.5.8-2 0-2.5z'/%3E%3C/svg%3E")}
#new_support .btn_download .fa-apple{--hx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.8-2-1.6-.2-3.1.9-3.9.9s-2-.9-3.4-.9c-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.8 1.2 1.8 2.6 3.1 2.5 1.2 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.5.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-1-2.5-4.1zM13.9 5c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.1-.6 2.8-1.4z'/%3E%3C/svg%3E")}
#new_support .btnWrapText,#new_support .textGallery{font-size:13px;font-weight:600;line-height:1.2}
#new_support .btnWrapText small,#new_support .textGallery small{display:block;font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#aab4c2}
#new_support .btnWrapText br,#new_support .textGallery br{display:none}

/* ------------------------------------------------------------------ Modales (markup Bootstrap, abiertos por el shim de landing-v2.js) */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(13,17,23,.55);overflow-y:auto}
.modal.show{display:flex}
.modal-dialog{width:100%;max-width:480px;margin:auto}
.modal-content{position:relative;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--hx-border)}
.modal-title{font-size:18px!important;font-weight:700;margin:0}
.modal-header .close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;font-size:24px;line-height:1;color:var(--hx-muted);cursor:pointer}
.modal-header .close img{width:14px;height:14px}
.modal-header .close:hover{background:var(--hx-soft)}
.modal-body{padding:20px;font-size:14px;color:var(--hx-text)}
.modal-body p{margin-bottom:12px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--hx-border)}
.hx-modal-footer-col{flex-direction:column;align-items:stretch}
.hx-modal-title{font-size:16px;font-weight:600;color:var(--hx-ink)}
.modal .btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:8px;border:1px solid var(--hx-border-2);background:#fff;font-size:14px;font-weight:600;cursor:pointer}
.modal .btn-primary{background:var(--hx-primary);border-color:var(--hx-primary);color:#fff}
.modal .btn-primary:hover{background:var(--hx-primary-600)}
.modal .form-group{margin-bottom:14px}
.modal label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--hx-muted)}
.modal .form-control{width:100%;min-height:42px;border:1px solid var(--hx-border-2);border-radius:8px;padding:9px 12px;font-size:15px;color:var(--hx-ink);background:#fff}
.modal .form-control:focus{outline:0;border-color:var(--hx-primary);box-shadow:0 0 0 3px rgba(0,154,250,.15)}
.modal textarea.form-control{resize:vertical}
.modal .invalid-feedback{display:none;font-size:13px;color:var(--hx-danger)}
.modal .requiredFields .invalid-feedback{display:block}
.modal .alert-success{padding:10px 12px;border-radius:8px;background:#e8f8f3;color:#0f6b56;font-size:13px}
#veChatBlockedModal .modal-title{font-size:18px}

/* Cookies */

/* Cookies: replica exacta de CookieConsent.tsx (gomez1). Franja fija abajo a todo el ancho:
   fixed inset-x-0 bottom-0 z-40 border-t bg-surface shadow-[0_-4px_20px_rgba(0,0,0,.08)];
   contenido max-w-page px-4 py-4; columna en movil, fila desde 640px (sm). */
.hx-cc{position:fixed;inset-inline:0;bottom:0;z-index:40;border-top:1px solid #dcdbdc;background:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.08);font-family:Inter,system-ui,sans-serif}
.hx-cc-in{max-width:1160px;margin:0 auto;padding:16px}
.hx-cc-row{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hx-cc-msg{display:flex;flex:1;align-items:flex-start;gap:12px}
.hx-cc-ico{flex:none;width:20px;height:20px;margin-top:2px;color:#5d5d5d}
.hx-cc-msg p{margin:0;font-size:14px;line-height:1.625;color:#5d5d5d}
.hx-cc-msg a{font-weight:500;color:#009afa}
.hx-cc-msg a:hover{text-decoration:underline}
.hx-cc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%;flex-shrink:0}
.hx-cc-btn{flex:1;height:42px;padding:0 20px;border-radius:8px;font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,opacity .15s}
.hx-cc-btn--ghost{border:1px solid #dcdbdc;background:transparent;color:#1e1f1c}
.hx-cc-btn--ghost:hover{background:#f5f7fa}
.hx-cc-btn--solid{border:0;background:#1e1f1c;color:#fff}
.hx-cc-btn--solid:hover{opacity:.9}
.hx-cc-prefs{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #dcdbdc}
.hx-cc-opt{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.hx-cc-opt input{flex:none;width:16px;height:16px;margin:4px 0 0;accent-color:#009afa}
.hx-cc-opt input:disabled{opacity:.6}
.hx-cc-opt b{display:block;font-size:14px;font-weight:500;color:#1e1f1c}
.hx-cc-opt small{display:block;font-size:13px;line-height:1.375;color:#5d5d5d}
.hx-cc-save{display:flex;justify-content:flex-end}
.hx-cc-save .hx-cc-btn{flex:none}
@media (min-width:640px){
  .hx-cc-row{flex-direction:row;align-items:center}
  .hx-cc-btns{width:auto}
  .hx-cc-btn{flex:none}
}
@media (min-width:1280px){.hx-cc-in{padding-inline:0}}
.dark .hx-cc{border-color:#333;background:#262626}
.dark .hx-cc-ico,.dark .hx-cc-msg p,.dark .hx-cc-opt small{color:#b4b4b4}
.dark .hx-cc-btn--ghost{border-color:#333;color:#ececec}
.dark .hx-cc-btn--ghost:hover{background:#2a2a2a}
.dark .hx-cc-btn--solid{background:#009afa}
.dark .hx-cc-prefs{border-color:#333}
.dark .hx-cc-opt b{color:#ececec}

/* ------------------------------------------------------------------ Footer (replica de Footer.tsx de gomez1) */
.hx-footer{background:#fff}
.hx-footer-in{max-width:1160px;margin:0 auto;padding:0 16px}
.hx-footer-top{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:16px 0}
.hx-footer-logo{flex:none;display:inline-flex}
.hx-footer-logo img{display:block;height:24px;width:auto}
.hx-footer-nav{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;width:100%}
.hx-footer-link{display:flex;align-items:center;min-height:30px;padding:2px 8px;border:0;background:transparent;font-size:13px;font-weight:500;line-height:1.4;color:#1e1f1c!important;cursor:pointer;transition:color .15s}
.hx-footer-link:hover{color:var(--hx-primary)!important}
.hx-footer-lang{position:relative;flex:none}
.hx-lang-menu--up{top:auto;bottom:calc(100% + 6px)}
.hx-footer-region{flex:none;display:flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:transparent;font-size:13px;color:#5d5d5d;cursor:pointer}
.hx-footer-region img{width:20px;height:14px;border-radius:2px;object-fit:cover}
.hx-footer-sep{border-top:1px solid #dcdbdc}
.hx-footer-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 0;text-align:center}
.hx-footer-bottom p{font-size:12px;line-height:1.5;color:#5d5d5d}
@media (min-width:640px){
  .hx-footer-nav{flex-direction:row;gap:4px}
  .hx-footer-link{min-height:0}
}
@media (min-width:768px){
  .hx-footer-top{flex-direction:row;gap:16px;padding:20px 0}
  .hx-footer-logo img{height:27px}
  .hx-footer-nav{width:auto;gap:12px}
  .hx-footer-link{font-size:14px}
  .hx-footer-region{min-height:0}
  .hx-footer-bottom{padding:16px 0}
  .hx-footer-bottom p{font-size:13px}
}
@media (min-width:1280px){.hx-footer-in{padding:0}}

/* ------------------------------------------------------------------ Responsive */
@media (max-width:1024px){
  .hx-auth .hx-btn{height:34px;padding:0 12px;font-size:13px}
}
@media (max-width:899px){
  :root{--hx-gutter:16px}
  .hx-topbar-in{gap:10px}
  .hx-topnav{display:none}
  .hx-actions{margin-inline-start:auto}
  .hx-actions .hx-auth,.hx-actions .hx-account{display:none!important}
  .hx-burger{display:inline-flex}
  .hx-steps-grid{grid-template-columns:1fr}
  .hx-how{order:0;min-height:0}
  .hx-faq-grid{grid-template-columns:1fr}
  .hx-ops{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hx-card.hx-card--l3{padding:0}
  .hx-card--l3 > .hx-selectors{padding:22px 20px 18px}
  .hx-v2 .hx-card--l3 > .hx-intro{padding:18px 20px 0;font-size:14px}
  .hx-card--l3 > .hx-block{padding:16px 20px 24px}
  .hx-faq-head,.hx-faq-a{grid-column:1;grid-row:auto}
  .hx-faq-a{padding:18px;border-radius:10px;margin-bottom:6px}
  .hx-chev{display:block}
  .hx-faq-item.is-open .hx-chev{transform:rotate(180deg)}
  #new_support{padding:64px var(--hx-gutter) 72px!important}
  #new_support > .container > .row{grid-template-columns:1fr}
  #new_support .row.m-0{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-sendmoney-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hx-hero{padding:36px var(--hx-gutter) 88px}
  .hx-v2 .hx-h1{font-size:28px}
  .hx-card-wrap{margin-top:-60px}
  .hx-card{padding:20px 16px;border-radius:14px}
  .hx-back{top:12px;inset-inline-start:12px;width:32px;height:32px}
  .hx-v2 .hx-intro{font-size:15px;padding-inline:28px}
  .hx-fields-2{grid-template-columns:1fr}
  .hx-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hx-service{padding:12px 10px;gap:10px;font-size:13px}
  .hx-ops{gap:8px}
  .hx-op{padding:6px 6px 10px}
  .hx-op-name{font-size:12px;line-height:1.3}
  .hx-section{padding-top:56px}
  .hx-v2 .hx-h2{font-size:24px}
  .hx-pay{margin-top:48px;padding:40px 0}
  .hx-pay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-how{padding:28px 20px}
  .hx-v2 .hx-how-title{font-size:20px}
  #new_support .title-section{font-size:26px!important}
  #new_support .box_support{padding:20px}
  #new_support .row.m-0{grid-template-columns:1fr 1fr}
  .hx-sm-row{grid-template-columns:1fr 120px}
}
@media (max-width:480px){
  .hx-dest-row{flex-wrap:wrap}
  .hx-dest-code{flex:1 1 100%}
  .hx-dest-row .hx-input{flex:1 1 100%}
  .hx-pill .landing_mini_service{height:40px;padding:0 12px 0 6px;font-size:12px}
  .hx-pill .hx-ico{width:26px;height:26px;padding:6px}
}
@media (max-width:380px){
  .hx-services,.hx-pay-grid{grid-template-columns:1fr}
  #new_support .row.m-0{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------ Dark mode (mismos colores que la web nueva: gomez1 globals.css `.dark`)
 * La clase `dark` la pone en <html> el script anti-FOUC del header (cookie hb_theme, compartida con
 * la web nueva; sin cookie sigue a prefers-color-scheme) y el boton sol/luna del header. Solo
 * presentacion: Google (sin cookie, tema claro) ve la pagina igual que siempre.
 * Logos de operador y de pago quedan sobre fondo claro, como en las cards de la web nueva. */
.dark{
  color-scheme:dark;
  --hx-primary-50:rgba(0,154,250,.18);
  --hx-ink:#ececec;
  --hx-ink-2:#ececec;
  --hx-text:#cfcfcf;
  --hx-muted:#b4b4b4;
  --hx-muted-2:#8a8a8a;
  --hx-border:#333333;
  --hx-border-2:#3d3d3d;
  --hx-soft:#2a2a2a;
  --hx-soft-2:#262626;
  --hx-shadow:0 12px 36px rgba(0,0,0,.45);
  --hx-shadow-sm:0 6px 18px rgba(0,0,0,.35);
}
.dark body.hx-v2{background:#1b1a1d}
/* superficies blancas -> surface */
.dark .hx-card,.dark .hx-back,.dark .hx-select,.dark .hx-input,.dark .hx-picker-btn,.dark .hx-picker-menu,
.dark .hx-lang-menu,.dark .hx-drawer-panel,.dark .hx-v2 .hx-search-input,.dark .hx-op,.dark .hx-prod,
.dark .hx-pay-card,.dark .hx-step,.dark .hx-faq-q,.dark .modal-content,
.dark .modal .btn,.dark .modal .form-control,.dark .hx-cats-arrow{background:#262626}
.dark .hx-card{box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.45)}
.dark .hx-picker-menu,.dark .hx-op,.dark .hx-faq-q{border-color:var(--hx-border)}
.dark .hx-picker-search,.dark .hx-card--l3 > .hx-selectors{border-color:var(--hx-border)}
.dark .hx-op:hover,.dark .hx-faq-q:hover{border-color:#4a4a4a}
/* textos con color fijo */
.dark .hx-service-icon,.dark .hx-op-name,.dark .hx-prod-name,.dark .hx-faq-q{color:var(--hx-ink)}
.dark .hx-v2 .hx-card--l3 > .hx-intro{color:var(--hx-muted)}
.dark .hx-prod-price{color:#9a9a9a}
/* L2: categorias */
.dark .hx-pill .landing_mini_service{border-color:var(--hx-border);background:#262626;color:var(--hx-ink)}
.dark .hx-pill .hx-ico{background:#2a2a2a;color:var(--hx-ink)}
.dark .hx-pill.is-active .landing_mini_service{background:var(--hx-primary-50)}
.dark .hx-pill.is-active .hx-ico{background:#1b1a1d}
.dark .hx-cats-arrow{color:var(--hx-ink)}
.dark .hx-cats-arrow:hover{background:#2a2a2a}
/* Metodos de pago: el logo sobre una pastilla clara */
.dark .hx-pay-card img{box-sizing:content-box;padding:6px 10px;border-radius:8px;background:#f5f7fa}
/* Como funciona: iconos b/n invertidos (circulo blanco, icono negro), como bg-hb-black dark:bg-white */
.dark .hx-step-icon img{filter:invert(1)}
/* App */
.dark .hx-app{background:#2a2a2a}
.dark .hx-v2 .hx-app-title,.dark .hx-stat-qty{color:var(--hx-ink)}
.dark .hx-app-text{color:rgba(236,236,236,.7)}
.dark .hx-stars-pts{color:var(--hx-muted)!important}
.dark .hx-store,.dark .hx-store:hover{background:#fff;color:#1e1f1c!important}
/* la "A" de AppGallery va calada sobre el cuadrado (currentColor): en dark el calado es blanco */
.dark .hx-store-icon [stroke="#1e1f1c"]{stroke:#fff}
/* FAQ */
.dark .hx-faq-num{background:#2a2a2a}
/* Soporte */
.dark #new_support .box_support{border-color:#333;background:transparent}
.dark #new_support > .container > .row > div:first-child > h3,.dark #new_support .description_support{color:rgba(236,236,236,.5)!important}
/* invert + brightness: fondo #d7d7d7 -> #2a2a2a (surface-2) e icono #1e1f1c -> ~#ececec (text) */
.dark #new_support .img_support{background:#d7d7d7;filter:invert(1) brightness(1.05)}
.dark #new_support .btn_support{background:#009afa;color:#fff!important}
.dark #new_support .btn_support:hover{background:#009afa;opacity:.9}
.dark #new_support .hx-picker-btn{border-color:#333;background:transparent;color:#b4b4b4}
.dark #new_support .hx-picker-btn svg{color:#ececec}
.dark #new_support .btn_download{background:#2a2a2a}
.dark #new_support .btn_download:hover{background:#333}
/* Modales y cookies */
.dark .modal{background:rgba(0,0,0,.65)}
.dark .modal .btn-primary{background:var(--hx-primary)}
.dark .modal .alert-success{background:rgba(22,184,157,.15);color:#7fe0cc}
/* Footer */
.dark .hx-footer{background:#1b1a1d}
.dark .hx-footer-link{color:var(--hx-ink)!important}
.dark .hx-footer-link:hover{color:var(--hx-primary)!important}
.dark .hx-footer-region,.dark .hx-footer-bottom p{color:var(--hx-muted)}
.dark .hx-footer-sep{border-color:var(--hx-border)}

/* Boton de tema del header (ThemeToggle.tsx): sol en claro, luna en oscuro */
.hx-theme .hx-ico-moon{display:none}
.dark .hx-theme .hx-ico-sun{display:none}
.dark .hx-theme .hx-ico-moon{display:block}

/* Telefono con codigo de pais FIJO dentro del campo (13-oct-2026). El JS de la landing oculta el
   <select> del pais, agrega .hx-dest-fixed a la fila y el codigo en .hx-dial: la fila entera se ve
   como un solo input, con el codigo a la izquierda y el numero a continuacion. */
.hx-dest-row.hx-dest-fixed{flex-wrap:nowrap;gap:0;align-items:center;height:44px;border:1px solid var(--hx-border-2);border-radius:8px;background:#fff;padding-inline-start:12px;direction:ltr}
.hx-dest-row.hx-dest-fixed:focus-within{border-color:var(--hx-primary);box-shadow:0 0 0 3px rgba(0,154,250,.15)}
.hx-dest-row.hx-dest-fixed .hx-dest-code{flex:0 0 auto}
.hx-dest-row.hx-dest-fixed .hx-input{flex:1 1 auto;height:42px;border:0;border-radius:8px;background:transparent;padding-inline-start:6px;box-shadow:none}
.hx-dest-row.hx-dest-fixed .hx-input:focus{box-shadow:none}
.hx-dial{font-size:15px;font-weight:600;color:var(--hx-ink);cursor:text;-webkit-user-select:none;user-select:none;white-space:nowrap}
.dark .hx-dest-row.hx-dest-fixed{background:#262626;border-color:var(--hx-border)}

/* Selector de idioma en el header (13-oct-2026): bandera + codigo del idioma actual, abre el mismo
   .hx-lang-menu que el footer. En movil se oculta (los idiomas estan en el drawer). */
.hx-header-lang{position:relative;flex:none}
.hx-lang-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.hx-lang-btn:hover,.hx-lang-btn[aria-expanded="true"]{background:rgba(255,255,255,.1)}
.hx-lang-btn img{flex:none;width:20px;height:20px;border-radius:50%;object-fit:cover}
@media (max-width:899px){.hx-header-lang{display:none}}