/* ServiAnuncios · Rediseño — Base (reset, tipografía, layout, botones) */

/* Fuentes locales (variable, subset latin) */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../webfonts/plusjakarta.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('../webfonts/bricolage.woff2') format('woff2');
  font-weight:700 800; font-style:normal; font-display:swap;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit;font-size:inherit}
ul{margin:0;padding:0;list-style:none}

/* Tipografía */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--c-navy);margin:0 0 .4em;line-height:1.12;font-weight:800;letter-spacing:0}
h1{font-size:clamp(2rem,4.5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem}
h4{font-size:1.05rem}
p{margin:0 0 1rem}
.text-mut{color:var(--c-mut)}
.text-slate{color:var(--c-slate)}
.text-blue{color:var(--c-blue)}

/* Layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
main{display:block;min-height:50vh}
section{padding-block:clamp(32px,5vw,64px)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.grid{display:grid;gap:var(--gap)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.85em 1.4em;border-radius:var(--r-pill);
  font-weight:700;font-size:1rem;line-height:1;white-space:nowrap;
  border:1px solid transparent;
  transition:transform .06s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--c-accent);color:var(--c-navy)}
.btn-accent:hover{background:var(--c-accent-600)}
.btn-primary{background:var(--c-blue);color:#fff}
.btn-primary:hover{background:var(--c-blue-700)}
.btn-wa{background:var(--c-green);color:#fff;border-color:transparent}
.btn-wa:hover{background:var(--c-green-700)}
.btn-wa-ghost{display:inline-flex;font-weight:700;border-radius:var(--r-pill);transition:transform .06s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;background:#EAF8F0;color:#1FB256;border:1px solid #C8EED7}
.btn-wa-ghost:hover{background:#DDF3E7;border:1px solid #B0E7C5;color:#179748}
.btn-wa-ghost:active{background:#D0EEDC;transform:translateY(1px)}
.btn-wa-ghost:focus-visible{outline:3px solid #B0E7C5;outline-offset:2px}
.btn-ghost{background:var(--c-blue-050);color:var(--c-blue);border-color:transparent}
.btn-ghost:hover{background:var(--c-blue-100)}
.btn-block{width:100%}
.btn-lg{padding:1.05em 1.7em;font-size:1.05rem}
.btn-loading,
.btn[disabled],
button[disabled].btn{pointer-events:none;cursor:wait}
.btn-loading{opacity:.85;position:relative}
.btn-spinner{
  display:inline-block;
  width:1.1em;
  height:1.1em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:middle;
  flex-shrink:0;
  box-sizing:border-box;
}
@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Chips / badges */
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:var(--r-pill);background:#fff;border:1px solid var(--c-line);font-weight:600;font-size:.9rem;color:var(--c-text-2)}
.chip--active{background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
.badge{display:inline-flex;align-items:center;gap:.35em;padding:.3em .7em;border-radius:var(--r-pill);font-size:.8rem;font-weight:700}
.badge--green{background:#E7F7EE;color:var(--c-green-700)}
.badge--blue{background:var(--c-blue-050);color:var(--c-blue)}
.badge--accent{background:#FFF1DB;color:var(--c-accent-600)}

/* Tarjetas */
.card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}

/* Iconos SVG inline */
.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Accesibilidad */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:3px solid var(--c-blue-100);outline-offset:2px}

/* Utilidades */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.hide{display:none}
@media(max-width:768px){.md-hide{display:none}}
@media(min-width:769px){.md-only{display:none}}