/* v1806: high-impact customer-facing visual refresh; existing IDs and actions unchanged. */
body:has(.hx-hero){background:#fff}
body:has(.hx-hero) main{max-width:none}
.het-welcome{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;padding:9px 15px;border-radius:999px;background:#E5EDF4;color:#15466E;font-size:13px;font-weight:800;letter-spacing:.01em}
.het-welcome-dot{font-size:18px;color:#e0a316}
.hx-hero{max-width:none;padding:62px max(24px,calc((100vw - 1200px)/2)) 74px;background:radial-gradient(ellipse at 82% 20%,#DFE9F2 0,transparent 42%),linear-gradient(118deg,#fffdf7,#F0F5F9);gap:56px;min-height:600px}
.hx-hero h1{font-size:clamp(40px,5.3vw,70px);max-width:650px;letter-spacing:-.055em;line-height:1.04;color:#112B40}
.hx-lede{font-size:18px;color:#505D68;max-width:550px}
.het-search-intro{display:flex;align-items:center;gap:12px;margin-top:9px;color:#182D3F}
.het-search-intro strong,.het-search-intro small{display:block}
.het-search-intro strong{font-size:17px;font-weight:850}
.het-search-intro small{font-size:13px;color:#606D77;margin-top:2px}
.het-search-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#DFE9F2;color:#0B4779;font-size:28px}
.hx-search{border:1px solid #D9E2E9;box-shadow:0 16px 38px rgba(21,58,89,.12);border-radius:22px;padding:10px;gap:10px}
.hx-field{background:#f3f8f4;border-radius:13px;padding:9px 14px}
.hx-go{background:#044D88;border-radius:13px;box-shadow:0 7px 15px #044D882B}
.hx-voice{background:#fff8e5;border-color:#f1ddaa;border-radius:13px}
.het-trust-row{display:flex;flex-wrap:wrap;gap:10px 20px;color:#44596B;font-size:12px;font-weight:750}
.hx-hero-photo{position:relative;min-height:470px;border-radius:34px;box-shadow:0 28px 60px #15324928;border:7px solid #fff;background-position:62% 30%}
.het-photo-sticker{position:absolute;bottom:22px;left:-23px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E6EBEF;padding:12px 18px;border-radius:17px;box-shadow:0 15px 35px #172C3E2B;color:#162C3E}
.het-photo-sticker strong,.het-photo-sticker small{display:block}.het-photo-sticker strong{font-size:14px}.het-photo-sticker small{font-size:12px;color:#6C757D;margin-top:3px}.het-sticker-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff1be;color:#986900;font-size:23px}
.hx-services{background:#fff;border:0;padding-bottom:14px}
.het-section-kicker{display:block;color:#135286;font-size:12px;font-weight:900;letter-spacing:.13em;margin-bottom:9px}
.het-section-description{font-size:15px;color:#6A737B;margin:0 0 20px}
.hx-section-head{padding-top:58px}.hx-section-head h2{margin-bottom:8px;font-size:clamp(26px,3.2vw,39px);letter-spacing:-.04em;color:#162D40}
#categories.hx-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
#categories.hx-cats .cat{min-height:118px;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:19px;border-radius:22px;border:1px solid #E7EBEE;background:#fff;box-shadow:0 8px 25px #1532490B;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#categories.hx-cats .cat:hover{transform:translateY(-4px);border-color:#A7C3DA;box-shadow:0 16px 30px #15324919}
#categories.hx-cats .cat-ico{width:56px;height:56px;border-radius:17px;background:#E5EEF5;color:#105187}
#categories.hx-cats .cat:nth-child(6n+2) .cat-ico{background:#fff0d1;color:#ab6e0a}
#categories.hx-cats .cat:nth-child(6n+3) .cat-ico{background:#e8efff;color:#4369bd}
#categories.hx-cats .cat:nth-child(6n+4) .cat-ico{background:#ffe8e4;color:#bf6658}
#categories.hx-cats .cat:nth-child(6n+5) .cat-ico{background:#f0e8ff;color:#8059b9}
#categories.hx-cats .cat:nth-child(6n+6) .cat-ico{background:#e0f5f2;color:#258c83}
#categories.hx-cats .cat-ico .het-ico{width:29px;height:29px}
#categories.hx-cats .cat-name{font-size:15px;font-weight:800;color:#243645}
.hx-cats-toggle{border-radius:999px;background:#F0F4F8;border-color:#D2DFEA}
.l2-results{background:#f7faf7}.l2-results .section-head h2{color:#182E40}
.hx-how{background:linear-gradient(130deg,#103451,#0A2235)}.het-section-kicker-light{color:#f5cf6c}
.hx-how li{border-top:0;background:#ffffff12;padding:23px;border-radius:20px;gap:13px}.hx-num{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#ffffff17;font-size:29px}
.hx-paths{gap:20px}.hx-path{border-radius:25px;padding:34px;background:linear-gradient(135deg,#ECF3F8,#fff);border:1px solid #DCE6EF}.hx-path-biz{background:linear-gradient(135deg,#fff2d9,#fffaf0);border-color:#f0e3bd}.het-path-emoji{font-size:33px}.hx-path h2{font-size:27px}
@media(max-width:900px){.hx-hero{padding:35px 24px 45px;grid-template-columns:1fr;gap:22px}.hx-hero-photo{order:0;min-height:260px}.het-photo-sticker{left:12px;bottom:12px}#categories.hx-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.hx-hero{padding:21px 16px 32px;background:linear-gradient(160deg,#EAF2F8,#fffdf7 72%);min-height:0}.hx-hero-copy{gap:13px}.hx-hero h1{font-size:clamp(35px,9vw,44px);line-height:1.08}.hx-lede{font-size:15px;line-height:1.5}.het-welcome{font-size:11px;padding:7px 11px}.het-search-intro{margin-top:4px}.het-search-intro strong{font-size:15px}.hx-search{gap:8px;border-radius:18px;padding:9px}.hx-field{padding:8px 12px}.hx-go,.hx-voice{min-height:51px}.hx-hero-photo{display:none}.het-trust-row{gap:8px 12px;font-size:11px}.hx-section-head{padding-top:29px}.hx-section-head h2{font-size:27px}#categories.hx-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#categories.hx-cats .cat{min-height:105px;padding:14px;gap:10px;border-radius:17px}#categories.hx-cats .cat-ico{width:46px;height:46px;border-radius:14px}#categories.hx-cats .cat-name{font-size:13px}.hx-how li{padding:19px}.hx-path{padding:24px}}
@media(prefers-reduced-motion:reduce){#categories.hx-cats .cat{transition:none}#categories.hx-cats .cat:hover{transform:none}}

/* v1807 — category tiles approximately half the previous footprint. */
#categories.hx-cats{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#categories.hx-cats .cat{min-height:78px;padding:10px 12px;gap:7px;border-radius:14px;align-items:center;text-align:center}
#categories.hx-cats .cat-ico{width:36px;height:36px;border-radius:11px;flex-shrink:0}
#categories.hx-cats .cat-ico .het-ico{width:21px;height:21px}
#categories.hx-cats .cat-name{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:900px){#categories.hx-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}}
@media(max-width:620px){#categories.hx-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#categories.hx-cats .cat{min-height:72px;padding:8px 5px;gap:5px;border-radius:12px}#categories.hx-cats .cat-ico{width:32px;height:32px;border-radius:9px}#categories.hx-cats .cat-ico .het-ico{width:19px;height:19px}#categories.hx-cats .cat-name{font-size:11px;line-height:1.2}}
@media(max-width:350px){#categories.hx-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1808: compact customer-first hero; retain search controls and category tile sizing. */
@media(min-width:901px){
 .hx-hero{min-height:0;grid-template-columns:minmax(0,1fr) 240px;gap:24px;padding:22px max(24px,calc((100vw - 1200px)/2)) 28px;align-items:center}
 .hx-hero-copy{gap:9px}
 .hx-hero h1{font-size:clamp(30px,3.25vw,43px);max-width:none;line-height:1.12;letter-spacing:-.035em}
 .hx-lede{font-size:14px;line-height:1.45;max-width:760px}
 .hx-hero-photo{min-height:210px;border-width:4px;border-radius:20px;box-shadow:0 10px 24px #1532491A}
 .het-photo-sticker{display:none}
 .het-welcome{padding:5px 10px;font-size:11px}
 .het-search-intro{margin-top:0}
 .het-search-intro strong{font-size:14px}
 .het-search-intro small{font-size:11px}
 .het-search-icon{width:30px;height:30px;font-size:21px;border-radius:9px}
 .hx-search{padding:7px;gap:7px;border-radius:15px;box-shadow:0 6px 20px #153A5915}
 .hx-field{padding:6px 10px}
 .het-trust-row{gap:6px 14px;font-size:11px}
}
@media(min-width:621px) and (max-width:900px){
 .hx-hero{padding:22px 24px 26px;gap:10px}
 .hx-hero h1{font-size:38px}
 .hx-hero-photo{display:none}
 .hx-hero-copy{gap:10px}
 .hx-lede{font-size:15px}
}
@media(max-width:620px){
 .hx-hero{padding:12px 14px 18px}
 .hx-hero-copy{gap:8px}
 .hx-hero h1{font-size:clamp(27px,7vw,34px);line-height:1.12;letter-spacing:-.03em}
 .hx-lede{font-size:13px;line-height:1.35}
 .het-welcome{font-size:10px;padding:5px 9px}
 .het-search-intro{gap:8px;margin-top:0}
 .het-search-intro strong{font-size:13px}
 .het-search-intro small{font-size:11px}
 .het-search-icon{width:28px;height:28px;font-size:20px;border-radius:9px}
 .hx-search{padding:7px;gap:6px;box-shadow:0 5px 16px #153A5915}
 .hx-field{padding:6px 10px}
 .het-trust-row{font-size:10px;gap:5px 10px}
}

/* v1811 — 18 categorías visibles: cuadrícula que siempre termina en filas completas
   (6 columnas en computadora y tableta, 3 en celular, 2 en teléfonos muy angostos). */
@media(max-width:900px){#categories.hx-cats{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:700px){#categories.hx-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:350px){#categories.hx-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#categories.hx-cats .cat-name{text-align:center}

/* v1814: verificación de correo del proveedor — etiqueta arriba del campo, botones en fila. */
.verification-box label{display:flex;flex-direction:column;gap:6px;font-weight:700;margin:0 0 10px}
.verification-box label input{width:100%;max-width:260px;font-size:20px;letter-spacing:4px;padding:10px 12px}
.verification-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.verification-actions #verifyProviderEmailCode{flex:1 1 220px}
#resendProviderEmailCode{background:none;border:0;padding:8px 4px;color:var(--het-green,#0C4A7D);font-weight:700;text-decoration:underline;cursor:pointer}
#resendProviderEmailCode:disabled{color:#6B737A;text-decoration:none;cursor:default}
#providerEmailVerificationMessage:empty{display:none}
.verification-box label input::placeholder{letter-spacing:normal;font-size:16px}
#resendProviderEmailCode,#resendProviderEmailCode:hover{box-shadow:none;transform:none}

/* v1815: «Todo Panamá», «Toda la provincia» y «Todo el distrito» son opciones largas: las tres listas usan
   todo el ancho y «Agregar área» pasa a su propia fila, para que no se corten. */
@media (min-width:621px){
 .het-area-picker .hap-row{grid-template-columns:repeat(3,minmax(0,1fr))}
 .het-area-picker .hap-row .hap-add{grid-column:1/-1;justify-self:start}
}
.het-area-picker .hap-row select{text-overflow:ellipsis}

/* v1816: las etiquetas de .verification-box apilan la etiqueta sobre el campo del código (columna).
   Las opciones Correo/WhatsApp son filas: círculo a la izquierda y texto al lado. */
.verification-box label.choice-row{flex-direction:row;align-items:center;gap:10px;margin:10px 0 0;text-align:left}
.verification-box label.choice-row input{width:20px;max-width:none;padding:0;letter-spacing:normal}

/* v1828 — Categorías más compactas y atractivas: «chips» con ícono a la izquierda, colores suaves y estado activo.
   Filtro Todos / Oficios / Profesionales como control segmentado con conteo. */
#categories.hx-cats{grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:8px}
#categories.hx-cats .cat{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:10px;min-height:0;height:52px;padding:7px 12px 7px 7px;border-radius:14px;border:1px solid #E3E7EB;background:#fff;box-shadow:0 1px 2px #1532490D;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
#categories.hx-cats .cat:hover{transform:translateY(-2px);border-color:#9EBCD4;box-shadow:0 8px 18px -8px #15324940;background:#fcfffd}
#categories.hx-cats .cat:focus-visible{outline:3px solid #0C4A7D;outline-offset:2px}
#categories.hx-cats .cat-ico{width:38px;height:38px;border-radius:11px;flex-shrink:0}
#categories.hx-cats .cat-ico .het-ico{width:20px;height:20px}
#categories.hx-cats .cat-name{flex:1 1 auto;min-width:0;text-align:left;font-size:13.5px;font-weight:700;line-height:1.2;color:#1E2E3B;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:normal;hyphens:auto}
#categories.hx-cats .cat.is-active{border-color:#0C4A7D;background:#ECF3F8;box-shadow:inset 0 0 0 1px #0C4A7D}
#categories.hx-cats .cat.is-active .cat-name{color:#093960}
.hx-type-filter .l2-type-filter{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#EEF1F4;border:1px solid #DDE3E8}
.hx-type-filter .filterpill{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important;padding:8px 14px!important;font-size:13.5px!important;font-weight:700;color:#3C4A56!important;min-height:0!important}
.hx-type-filter .filterpill.active,.hx-type-filter .filterpill[aria-pressed="true"]{background:#fff!important;color:#093960!important;box-shadow:0 2px 6px #15324922!important}
.hx-type-filter .filterpill .het-count{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#DCE6EF;color:#093960;font-size:11.5px;font-weight:800}
.hx-cats-toggle{min-height:42px!important;padding:0 20px!important;font-size:14px!important;margin-top:14px!important}
@media(max-width:1100px){#categories.hx-cats{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media(max-width:620px){
 #categories.hx-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #categories.hx-cats .cat{height:48px;padding:6px 8px 6px 6px;gap:8px;border-radius:12px}
 #categories.hx-cats .cat-ico{width:34px;height:34px;border-radius:10px}
 #categories.hx-cats .cat-ico .het-ico{width:18px;height:18px}
 #categories.hx-cats .cat-name{font-size:12px;letter-spacing:-.1px}
 .hx-type-filter,.hx-type-filter .l2-type-filter-row{width:100%;max-width:100%}
 .hx-type-filter .l2-type-filter{display:flex;width:100%;max-width:100%;box-sizing:border-box}
 .hx-type-filter .filterpill{flex:1 1 0;min-width:0;padding:7px 6px!important;font-size:12px!important;line-height:1.15;white-space:normal}
 .hx-type-filter .filterpill .het-count{margin-left:3px;padding:0 5px;font-size:10.5px}
}
