/* Sector landing pages and answer pages (/administradores-de-fincas, templates/respuesta.html).
   Loaded after /style.css; it only adds what the homepage does not have. */

/* breadcrumb under the top bar */
.crumbs{padding:11px 22px;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.4;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 8px}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.55}
.crumbs a{text-underline-offset:3px}

/* a longer H1 than the homepage's */
.h1-long{font-size:clamp(34px,9.2vw,68px);line-height:1}

/* short, direct answer: the first thing a reader or a search assistant should find */
.direct-sec{padding:40px 22px 8px}
.direct{max-width:760px;margin:0 auto;padding:22px 22px 22px 24px;border:1px solid var(--hair);border-left:4px solid var(--accent);border-radius:4px 16px 16px 4px;background:#fdfbf8}
.direct .kicker{margin-bottom:10px}
.direct p:not(.kicker){margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
.direct p:not(.kicker)+p{margin-top:10px}

/* pains: what the despacho says, and the question that answers it */
.pains-sec{border-top:1px solid var(--hair);margin-top:40px}
.pains{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:1120px}
.pain{display:flex;flex-direction:column;gap:12px;padding:22px 20px 20px;border:1px solid rgba(80,52,36,.3);border-radius:16px;background:#fff}
.pain h3{font-size:30px;line-height:1.04;letter-spacing:-.01em}
.pain p{margin:0;color:#443c36;font-size:16px;line-height:1.5}
.pain .pq{margin-top:auto;padding:10px 14px;background:#eee6db;border:1px solid var(--hair);border-radius:12px 12px 12px 2px;color:var(--ink);font-size:15px;line-height:1.4}
.pains-note{max-width:42rem;margin:28px auto 0;text-align:center;color:var(--muted);font-size:15px}

.example-note{max-width:860px;margin:14px auto 0;padding:0 14px;text-align:center;color:var(--muted);font-size:14px}

/* answer pages */
.ahead{max-width:820px;margin:0 auto;padding:40px 22px 0}
.ahead h1{font-size:clamp(34px,8.4vw,56px);line-height:1.02}
.ameta{margin:16px 0 0;color:var(--muted);font-size:14px}
.abody{max-width:760px;margin:0 auto;padding:28px 22px 56px}
.abody h2{font-size:clamp(28px,6.6vw,40px);line-height:1.05;margin:52px 0 14px}
.abody h2:first-child{margin-top:0}
.abody p,.abody li{color:#2d2723}
.abody p{margin:0 0 14px}
.abody a{text-underline-offset:3px}
.asteps{list-style:none;margin:20px 0 0;padding:0;counter-reset:paso;display:grid;gap:12px}
.asteps li{counter-increment:paso;position:relative;padding:16px 16px 16px 62px;border:1px solid rgba(80,52,36,.3);border-radius:14px;background:#fff}
.asteps li::before{content:counter(paso);position:absolute;left:16px;top:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--btn);color:#fff;font:400 20px/1 var(--serif)}
.asteps strong{display:block;font-weight:500}
.asteps p{margin:4px 0 0;font-size:16px}
.awrap{margin:20px 0 0;overflow-x:auto;border:1px solid rgba(80,52,36,.4);border-radius:10px;background:#fff}
.awrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.atable{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
.atable caption{padding:12px 14px;text-align:left;font:500 14px/1.3 var(--sans);color:var(--muted)}
.atable th,.atable td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
.atable thead th{background:rgba(155,74,43,.1);font-weight:500;white-space:nowrap}
.atable td.n,.atable th.n{text-align:right;font-variant-numeric:tabular-nums}
.when{display:grid;gap:12px;margin-top:20px}
.when>div{padding:18px 18px 8px;border:1px solid rgba(80,52,36,.3);border-radius:14px;background:#fff}
.when h3{font:500 15px/1.3 var(--sans);margin:0 0 10px}
.when ul{margin:0;padding:0 0 0 20px}
.when li{margin:0 0 10px}
.sources{margin:0;padding:0 0 0 22px;font-size:15px;color:var(--muted)}
.sources li{margin:0 0 8px;color:var(--muted)}
.abody .faq-list{margin-top:20px}
.alead-cta{margin:56px 0 0}
.abody .alead-cta p{margin:16px auto 28px;color:#fff}
.abody .alead-cta h2{margin:0;color:#fff}

@media (min-width:640px){
  .direct p:not(.kicker){font-size:19px}
}
@media (min-width:760px){
  .crumbs{padding:12px 40px}
  .direct-sec{padding:56px 40px 8px}
  .pains-sec{margin-top:56px}
  .pains{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .ahead{padding:64px 40px 0}
  .abody{padding:36px 40px 72px}
  .when{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .pains{grid-template-columns:repeat(3,minmax(0,1fr))}
}