/* ==========================================================
   Clasiguía · Portal de avisos · Hoja de estilos
   Grupo EPASA · v1.0 · septiembre 2026
   Colores tomados del logo oficial (clasi-logo-1.png):
   rojo "guía" #E74024 · carbón "Clasi" #303030
   ========================================================== */
:root{
  --red:#E74024;        /* "guía" del logo */
  --red-ink:#C7321A;
  --char:#303030;       /* "Clasi" del logo */
  --paper:#FAF8F6;
  --sheet:#FFFFFF;
  --ink:#262422;
  --muted:#6B6560;
  --rule:#E3DEDA;
  --feature:#303030;
  --feature-ink:#FFFFFF;
  --yellow-color:#fff100;
  --wa:#1FA855;
  --wa-ink:#FFFFFF;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Mulish","Muli",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}



article.ad.ad-yellow {
    background-color: var(--yellow-color);
    border: 3px solid #000;
}

article.ad.ad-mayus-recuadro {
    border: 3px solid #000;
}



/* ---------- Logo ---------- */
.logo-img{display:block;height:36px;width:auto}
footer .logo-img{height:28px}
@media (max-width:480px){.top .logo-img{height:28px}}
/* Respaldo tipográfico del logo (no se usa si carga la imagen) */
.logo{display:inline-flex;align-items:center;gap:.35em;text-decoration:none;font-family:var(--display);line-height:1}
.logo .word{font-weight:900;font-stretch:100%;letter-spacing:-.045em;font-size:1em}
.logo .clasi{color:var(--char)}
.logo .guia{color:var(--red)}
.logo .flag{background:#111;color:#fff;font-weight:700;font-stretch:62%;font-size:.26em;line-height:1.05;letter-spacing:.04em;padding:.35em .6em .35em .9em;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,.45em 50%);text-transform:uppercase;transform:translateY(-.15em)}

/* ---------- Barra superior ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.top .logo{font-size:30px}
.top-meta{display:flex;align-items:center;gap:18px}
.edition{font-size:13px;color:var(--muted);white-space:nowrap}
.edition b{color:var(--ink);font-weight:800}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-stretch:88%;letter-spacing:.01em;text-decoration:none;border-radius:999px;padding:12px 22px;font-size:16px;transition:transform .15s ease,background-color .15s ease;border:0;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-wa:hover{background:color-mix(in srgb,var(--wa) 88%,#000)}
.btn-red{background:var(--red);color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.btn-sm{padding:9px 16px;font-size:14px}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px);border-bottom:3px solid var(--char)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:end}
.kicker{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--red);margin:0 0 14px}
.hero h1{font-family:var(--display);font-weight:900;font-stretch:78%;font-size:clamp(40px,6.6vw,84px);line-height:.94;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--char)}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lead{font-size:clamp(17px,1.6vw,19px);max-width:34em;margin:20px 0 0;color:var(--muted)}
.hero-card{background:var(--sheet);border:1px solid var(--rule);border-top:6px solid var(--red);padding:24px;display:grid;gap:14px}
.hero-card h2{font-family:var(--display);font-weight:800;font-stretch:85%;font-size:24px;line-height:1.1;margin:0}
.hero-card p{margin:0;color:var(--muted);font-size:15px}
.phone{font-family:var(--display);font-weight:900;font-stretch:80%;font-size:40px;letter-spacing:-.01em;line-height:1;color:var(--ink);user-select:all;font-variant-numeric:tabular-nums}
.phone small{display:block;font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* ---------- Encabezado de la sección de avisos ---------- */
.board{padding-block:clamp(32px,5vw,56px)}
.board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.board-head h2{font-family:var(--display);font-weight:900;font-stretch:80%;font-size:clamp(28px,3.4vw,40px);margin:0;letter-spacing:-.01em;color:var(--char)}
.board-head .count{font-size:14px;color:var(--muted)}
.board-head .count b{color:var(--red);font-weight:800}
.sample-note{font-size:12px;color:var(--muted);font-style:italic}

/* ---------- Avisos: tal cual salen en el impreso ---------- */
.ads{columns:260px;column-gap:20px}
.ad{break-inside:avoid;margin:0 0 20px;background:var(--sheet);border:1px solid var(--rule);padding:16px 16px 12px;font-size:15px;line-height:1.5;display:grid;gap:8px}
.ad p{margin:0}
.ad .lead-in{font-family:var(--display);font-weight:800;font-stretch:85%;text-transform:uppercase;letter-spacing:.02em}
.ad .tel{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.ad .ref{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px dashed var(--rule);padding-top:8px;display:flex;justify-content:space-between;gap:8px}
/* aviso con titular */
.ad h3{overflow-wrap:break-word;hyphens:auto}
.ad.headline h3{font-family:var(--display);font-weight:900;font-stretch:80%;font-size:23px;line-height:1;margin:0;text-transform:uppercase;letter-spacing:-.01em}
.ad.headline h3 span{color:var(--red)}
/* aviso destacado (fondo invertido) */
.ad.feature{background:var(--feature);color:var(--feature-ink);border-color:var(--feature)}
.ad.feature h3,article.ad .dst-text strong.featured{font-family:var(--display);font-weight:900;font-stretch:75%;font-size:30px;line-height:.98;margin:0;text-transform:uppercase}
.ad.feature .price{display:inline-block;background:var(--red);color:#fff;font-family:var(--display);font-weight:900;font-stretch:80%;font-size:22px;padding:2px 10px;justify-self:start}
.ad.feature .ref{color:#CFC9C4;border-top-color:#57524E}
/* aviso con recuadro doble (estilo impreso) */
.ad.boxed{border:3px double var(--char);text-align:center}
.ad.boxed h3{font-family:var(--display);font-weight:800;font-stretch:90%;font-size:19px;margin:0;text-transform:uppercase;letter-spacing:.04em}
.ad.boxed .ref{text-align:left}
/* edicto / aviso legal */
.ad.legal{font-family:Georgia,"Times New Roman",serif;font-size:14px;text-align:justify;hyphens:auto}
.ad.legal h3{font-family:var(--display);font-weight:800;font-stretch:80%;font-size:16px;text-align:center;letter-spacing:.12em;margin:0;text-transform:uppercase}
.ad.legal .ref{font-family:var(--body)}
/* aviso con franja roja */
.ad.band{padding-top:0;border-top:0}
.ad.band .strip{margin:0 -16px;background:var(--red);color:#fff;font-family:var(--display);font-weight:900;font-stretch:78%;text-transform:uppercase;font-size:20px;padding:8px 16px;letter-spacing:.02em}

/* Aviso “reservado” que invita a publicar */
.ad.yours{border:2px dashed var(--red);background:transparent;text-align:center;padding:22px 18px;gap:12px}
.ad.yours h3{font-family:var(--display);font-weight:900;font-stretch:80%;font-size:24px;line-height:1.05;margin:0;color:var(--red)}
.ad.yours p{color:var(--muted);font-size:14px}
.ad.yours .btn{justify-self:center}

/* ---------- Cómo publicar ---------- */
.publish{background:var(--char);color:#fff;padding-block:clamp(40px,6vw,72px)}
.publish .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,64px);align-items:start}
.publish h2{font-family:var(--display);font-weight:900;font-stretch:76%;font-size:clamp(36px,5vw,60px);line-height:.95;margin:0 0 18px;text-wrap:balance}
.publish h2 em{font-style:normal;color:#F0583D}
.publish p{color:#D9D4D0;margin:0 0 24px;max-width:30em}
.publish .phone{color:#fff;margin-bottom:22px}
.publish .phone small{color:#BDB6B0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid #4A4541}
.steps li:last-child{border-bottom:1px solid #4A4541}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:900;font-stretch:70%;font-size:52px;line-height:.85;color:#F0583D}
.steps h3{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:20px;margin:0 0 4px}
.steps p{margin:0;font-size:15px;color:#CFC9C4}

.dst-text {
    min-height: 160px;
}
/* ---------- Pie ---------- */
footer{padding-block:32px 96px;border-top:1px solid var(--rule)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
footer .logo{font-size:24px}
footer p{margin:0;font-size:13px;color:var(--muted)}

/* ---------- WhatsApp flotante ---------- */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.25)}

@media (max-width:820px){
  .hero .wrap,.publish .wrap{grid-template-columns:1fr}
  .edition{display:none}
}
@media (max-width:480px){
  .top .logo{font-size:24px}
  .top .btn .long{display:none}
  .phone{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.csv-notice{padding:20px;border:1px solid var(--rule);background:#fff}.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:32px 0}.pagination a,.pagination span{padding:8px 12px;border:1px solid var(--rule);color:inherit;text-decoration:none}.pagination [aria-current]{background:var(--char);color:#fff}