/* ServiAnuncios · Rediseño — Home */

/* Hero */
.hero{background:linear-gradient(180deg,var(--c-cream) 0%,var(--c-cream-2) 100%);padding-block:clamp(28px,4vw,56px)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero__pill{margin-bottom:16px}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:14ch}
.hero h1 .hl{background:linear-gradient(180deg,transparent 62%,#FFE0AE 62%);padding:0 .05em}
.hero__sub{font-size:1.12rem;color:var(--c-slate);max-width:42ch;margin-bottom:22px}

.searchbox{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:10px;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:stretch}
.searchbox__field{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md)}
.searchbox__field:first-child{border-right:1px solid var(--c-line)}
.searchbox__field .icon{color:var(--c-blue);width:22px;height:22px}
.searchbox__inp{display:flex;flex-direction:column;min-width:0;flex:1}
.searchbox__inp label{font-size:.78rem;font-weight:700;color:var(--c-navy)}
.searchbox__inp input{border:0;background:transparent;padding:2px 0;font-size:.98rem;color:var(--c-navy);width:100%}
.searchbox__inp input:focus{outline:none}
.searchbox__go{white-space:nowrap}

.hero__trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px}
.hero__trust li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--c-text-2)}
.hero__trust .icon{color:var(--c-blue);width:20px;height:20px}
.hero__trust li:nth-child(2) .icon{color:var(--c-accent-600)}
.hero__trust li:nth-child(3) .icon{color:var(--c-green-700)}

.hero__visual{display:flex;justify-content:center}
.hero__card{position:relative;width:100%;max-width:420px;aspect-ratio:4/3;border-radius:var(--r-xl);background:radial-gradient(120% 120% at 80% 10%,#2f6fe0 0%,var(--c-blue) 55%,var(--c-blue-700) 100%);box-shadow:var(--shadow-lg);overflow:hidden}
.hero__wa{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;background:var(--c-green);color:#fff;font-weight:700;font-size:.85rem;padding:.45em .8em;border-radius:var(--r-pill)}
.hero__pro{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-md);padding:12px;box-shadow:var(--shadow-card)}
.hero__pro-img{border-radius:12px;object-fit:cover}
.hero__pro-info{display:flex;flex-direction:column;min-width:0}
.hero__pro-info strong{color:var(--c-navy);font-size:.98rem}
.hero__pro-info small{color:var(--c-mut)}

.avatar{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--c-blue-050);color:var(--c-blue);font-weight:800;font-family:var(--font-display);flex:none}
.avatar--lg{width:56px;height:56px;border-radius:14px;font-size:1.1rem}

/* Categorías */
.cats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);padding:20px 14px;transition:transform .08s ease,box-shadow .15s ease}
.cat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.cat-card__ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--c-blue-050)}
.cat-card__ic img{width:30px;height:30px}
.cat-card__name{font-weight:700;color:var(--c-navy);font-size:.95rem}
/* Paleta cíclica de tiles por categoría (como el mockup de referencia) */
.cats__grid .cat-card:nth-child(6n+1) .cat-card__ic{background:#EFF4FD}
.cats__grid .cat-card:nth-child(6n+2) .cat-card__ic{background:#FFF1DB}
.cats__grid .cat-card:nth-child(6n+2) .cat-card__ic img{filter:hue-rotate(165deg) saturate(1.5)}
.cats__grid .cat-card:nth-child(6n+3) .cat-card__ic{background:#E4F6EC}
.cats__grid .cat-card:nth-child(6n+3) .cat-card__ic img{filter:hue-rotate(285deg) saturate(1.1)}
.cats__grid .cat-card:nth-child(6n+4) .cat-card__ic{background:#DEF5F2}
.cats__grid .cat-card:nth-child(6n+4) .cat-card__ic img{filter:hue-rotate(320deg) saturate(1.1)}
.cats__grid .cat-card:nth-child(6n+5) .cat-card__ic{background:#F0EAFB}
.cats__grid .cat-card:nth-child(6n+5) .cat-card__ic img{filter:hue-rotate(60deg) saturate(1.25)}
.cats__grid .cat-card:nth-child(6n+6) .cat-card__ic{background:#FDE7EB}
.cats__grid .cat-card:nth-child(6n+6) .cat-card__ic img{filter:hue-rotate(130deg) saturate(1.4)}

/* Destacados */
.feat__grid{display:grid;grid-template-columns:1fr;gap:14px}
.pro-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);padding:16px;transition:transform .08s ease,box-shadow .15s ease}
.pro-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.pro-card__img{border-radius:14px;object-fit:cover;flex:none}
.pro-card__body{display:flex;flex-direction:column;min-width:0;flex:1}
.pro-card__body strong{color:var(--c-navy)}
.pro-card__rubro{color:var(--c-mut);font-size:.92rem}
.pro-card__go{color:var(--c-blue);flex:none}

/* Cómo funciona */
.how{background:#fff;border-block:1px solid var(--c-line)}
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.how__step{padding:8px}
.how__n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--c-blue);color:#fff;font-weight:800;font-family:var(--font-display);margin-bottom:12px}
.how__step h3{margin-bottom:6px}
.how__step p{color:var(--c-slate);margin:0}

/* Responsive */
@media(min-width:640px){.cats__grid{grid-template-columns:repeat(4,1fr)}.feat__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cats__grid{grid-template-columns:repeat(6,1fr)}.feat__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{display:none}
  .searchbox{grid-template-columns:1fr}
  .searchbox__field:first-child{border-right:0;border-bottom:1px solid var(--c-line)}
}
@media(max-width:640px){
  .how__grid{grid-template-columns:1fr;gap:18px}
}