/* ServiAnuncios - paginas internas, blog y confirmaciones */

.container-nosotros,
.container-contacto,
.container-mapa-sitio,
.container-blog,
.blog__container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:24px 20px 56px;
}

.content-nosotros,
.content-contacto,
.content-mapa-sitio,
.content-blog,
.blog__content{min-width:0}

.block-nosotros,
.block-mapa-sitio,
.servicios-por-rubro-categoria-left,
.contactenos-block,
.list-blog-item,
.blog__section__detalle,
.blog__sin__resultados,
.info-confirm__box{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}

.block-nosotros{
  position:relative;
  overflow:hidden;
  max-width:940px;
  padding:clamp(28px,4vw,48px);
}

.block-nosotros::before{
  content:"Directorio local";
  display:inline-flex;
  width:max-content;
  margin-bottom:16px;
  padding:.38em .8em;
  border-radius:var(--r-pill);
  background:var(--c-blue-050);
  color:var(--c-blue);
  font-weight:800;
  font-size:.85rem;
}

.block-nosotros h1,
.block-mapa-sitio h1,
.blog__title,
.contacto-content h1{
  max-width:13ch;
  color:var(--c-navy);
  font-size:clamp(2rem,4vw,3.1rem);
}

.block-nosotros p{
  max-width:76ch;
  color:var(--c-text-2);
  font-size:1.02rem;
  line-height:1.8;
}

.block-nosotros p:last-child{margin-bottom:0}
.block-nosotros b{color:var(--c-navy)}

.section-first{
  display:grid;
  grid-template-columns:minmax(240px,320px) minmax(0,1fr);
  gap:24px;
  align-items:start;
  padding-block:0;
}

.servicios-por-rubro-categoria-left,
.contactenos-block{padding:24px}

.servicios-por-rubro-categoria-left .title,
.contactenos-block > h3{
  margin-bottom:14px;
  color:var(--c-navy);
  font-family:var(--font-display);
}

.categorias-solicitadas-left{display:grid;gap:14px}
.categorias-solicitadas-left > li{padding-bottom:14px;border-bottom:1px solid var(--c-line)}
.categorias-solicitadas-left > li:last-child{border-bottom:0;padding-bottom:0}
.categorias-solicitadas-left h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--font-body);font-size:.98rem}
.categorias-solicitadas-left h3 img{width:24px;height:24px;object-fit:contain}
.categorias-solicitadas-left h3 a{color:var(--c-navy);font-weight:800}
.categorias-solicitadas-left h3 a:hover{color:var(--c-blue)}
.sub-categorias-left{display:grid;gap:6px;padding-left:34px}
.sub-categorias-left a{display:flex;align-items:center;gap:8px;color:var(--c-slate);font-size:.9rem;font-weight:650}
.sub-categorias-left a:hover{color:var(--c-blue)}
.sub-categorias-left img{display:none}

.contacto-content{display:grid;gap:18px}
.contacto-content h1{max-width:none;margin-bottom:0}
.contacto-content h4{margin:0;color:var(--c-navy);font-family:var(--font-body);font-size:1rem}
.contacto-content ul{display:grid;gap:8px;margin:0 0 4px}
.contacto-content li{position:relative;padding-left:24px;color:var(--c-text-2)}
.contacto-content li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--c-blue)}
.contacto-content li img{display:none}
.contacto-content form{display:grid;gap:14px;margin-top:4px}
.contacto-content .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contacto-content #botones{grid-template-columns:1fr}
.contacto-content .form-group{display:flex;flex-direction:column;gap:6px}
.contacto-content label{font-weight:750;color:var(--c-navy);font-size:.92rem}
.contacto-content .form-control{
  width:100%;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-cream);
  padding:.82em .95em;
  color:var(--c-text);
}
.contacto-content textarea.form-control{min-height:130px;resize:vertical}
.contacto-content .form-control:focus{outline:none;border-color:var(--c-blue);background:#fff}
.contacto-content input[type=submit]{justify-self:end;background:var(--c-accent);color:var(--c-navy);border:0;border-radius:var(--r-pill);font-weight:850;padding:.9em 1.6em}

.block-mapa-sitio{padding:clamp(24px,4vw,40px)}
.block-mapa-sitio h1{max-width:none;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--c-line)}
.ms-ul-parent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ms-ul-parent > li{padding:18px;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-cream)}
.ms-parent{display:inline-flex;margin-bottom:10px;color:var(--c-navy);font-weight:850}
.ms-parent:hover{color:var(--c-blue)}
.ms-ul-child{display:flex;flex-wrap:wrap;gap:8px}
.ms-child{display:inline-flex;align-items:center}
.ms-child img{display:none}
.ms-child a{display:inline-flex;padding:.42em .75em;border:1px solid var(--c-line);border-radius:var(--r-pill);background:#fff;color:var(--c-text-2);font-weight:700;font-size:.88rem}
.ms-child a:hover{border-color:var(--c-blue-100);background:var(--c-blue-050);color:var(--c-blue)}

.section-blogs{padding-block:0}
.list__block{display:grid;gap:22px}
.list-blog .list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.list-blog-item{overflow:hidden;display:flex;flex-direction:column}
.list-title{padding:18px 18px 0}
.list-title h4{font-size:1.08rem;line-height:1.25;color:var(--c-navy)}
.list-img{order:-1;aspect-ratio:16/9;background:var(--c-blue-050);overflow:hidden}
.list-img img{width:100%;height:100%;object-fit:cover}
.list-desctiption{padding:10px 18px 0;color:var(--c-slate);font-size:.94rem;line-height:1.6}
.list-detalle{margin-top:auto;padding:18px;display:flex;align-items:center;justify-content:space-between}
.list-detalle a{color:var(--c-blue);font-weight:850}
.flecha-detalle-blog{color:var(--c-blue);font-weight:850}
.loading__blogs{display:none}
.pagination-blog{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.pagination-blog img{width:18px}
.pagination-item-blog{display:flex;gap:8px}
.pagination-item-blog a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-navy);font-weight:800}
.pagination-item-blog a.active{background:var(--c-blue);border-color:var(--c-blue);color:#fff}

.blog__section__first{padding-block:0}
.blog__section__detalle{max-width:900px;margin-inline:auto;padding:clamp(24px,4vw,44px)}
.blog__title{max-width:18ch;margin-bottom:20px}
.blog__imagen{margin:0 0 24px;border-radius:var(--r-lg);overflow:hidden;background:var(--c-blue-050)}
.blog__imagen img{width:100%;max-height:420px;object-fit:cover}
.blog__description{color:var(--c-text-2);font-size:1.02rem;line-height:1.8}
.blog__description p{margin-bottom:1rem}
.blog__sin__resultados{max-width:520px;margin:40px auto;padding:32px;text-align:center}
.blog__sin__resultados img{max-width:180px;margin:0 auto 18px}
.blog__sin__resultados a{display:inline-flex;margin-top:12px;color:var(--c-blue);font-weight:850}

.confirmacion,
#registro{
  max-width:var(--container);
  margin:24px auto 56px;
  padding:28px 20px;
}

.confirmacion{
  display:flex;
  align-items:center;
  gap:12px;
  width:calc(100% - 40px);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
  color:var(--c-navy);
  font-weight:800;
}

.confirmacion img{width:34px;height:34px}
#registro{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
#registro h1{font-size:clamp(1.8rem,3vw,2.6rem)}
#registro blockquote{margin:.35rem 0 1rem;padding:12px 14px;border-left:4px solid var(--c-blue);background:var(--c-blue-050);border-radius:0 var(--r-sm) var(--r-sm) 0}
#registro label{font-weight:800;color:var(--c-navy)}

@media(max-width:960px){
  .section-first{grid-template-columns:1fr}
  .servicios-por-rubro-categoria-left{order:2}
  .list-blog .list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-ul-parent{grid-template-columns:1fr}
}

@media(max-width:640px){
  .container-nosotros,
  .container-contacto,
  .container-mapa-sitio,
  .container-blog,
  .blog__container{padding-top:18px;padding-bottom:40px}
  .block-nosotros,
  .block-mapa-sitio,
  .servicios-por-rubro-categoria-left,
  .contactenos-block,
  .blog__section__detalle{padding:22px}
  .contacto-content .row,
  .list-blog .list{grid-template-columns:1fr}
  .sub-categorias-left{padding-left:0}
}