/* Versión compacta: prioriza las materias legales inmediatamente después de la portada. */
main { display: flex; flex-direction: column; }
.hero { order: 0; min-height: 480px; padding: 38px 7vw 72px; }
.matters { order: 1; }
.benefits, .services, .about-mediation, .steps-section, .mediator, .faq-section, .contact { order: 2; }

.topbar { min-height: 32px; padding-block: 5px; }
.site-header { height: 72px; }
.brand { width: 195px; }
.brand img { max-height: 58px; }
.site-header nav { gap: 19px; }
.hero h1 { max-width: 720px; font-size: clamp(2.5rem, 4.2vw, 4.45rem); }
.hero-copy > p { margin: 15px 0; font-size: 1rem; }
.hero-buttons { margin: 22px 0; }
.hero-art { min-height: 360px; }
.blob { width: 360px; height: 360px; }
.family { top: 55px; transform: scale(.82); transform-origin: center; }
.hero-wave { height: 55px; }

.hero-photo {
  min-height: 0;
  align-self: center;
  overflow: hidden;
  border: 8px solid rgba(255,255,255,.72);
  border-radius: 26px 70px 26px 70px;
  box-shadow: 0 24px 55px rgba(23,68,91,.18);
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 385px;
  object-fit: cover;
  object-position: center;
}

.section { padding: 68px 7vw; }
.heading { margin-bottom: 30px; }
.heading h2, .about-copy h2, .mediator h2 { font-size: clamp(1.8rem, 2.7vw, 2.8rem); }
.matters { padding-top: 58px; padding-bottom: 58px; background: #f6fafb; }
.legal-matter-grid { gap: 18px; }
.legal-matter { min-height: 430px; background: #fff; }
.legal-card-front { justify-content: flex-start; padding: 0 22px 22px; }
.legal-card-front > span { z-index: 2; top: 12px; left: 14px; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(23,68,91,.82); }
.legal-card-front img { width: calc(100% + 44px); height: 178px; margin: 0 -22px 20px; object-fit: cover; }
.legal-card-front h3 { margin: 9px 0 4px; }
.legal-card-front p { margin: 4px 0; }
.legal-card-front b { margin-top: 12px; }
.legal-card-detail { padding: 24px; }
.legal-card-detail li { margin: 5px 0; font-size: .78rem; }
.legal-card-detail p { margin: 8px 0; }

.benefits { padding: 17px; }
.benefits article { padding: 4px 20px; }
.services { padding-top: 62px; padding-bottom: 62px; }
.service-visual { height: 110px; }
.service-visual svg { width: 52px; }
.service-body { padding: 20px; }
.service-body p { min-height: 66px; }
.about-mediation { padding: 68px 8vw; gap: 7vw; }
.about-visual { height: 350px; }
.steps-section { padding: 62px 8vw; }
.mediator { padding-top: 68px; padding-bottom: 68px; }
.mediator-profile { padding: 30px; }
.initials { min-width: 130px; height: 165px; font-size: 2.1rem; }
.faq-section { padding: 68px 8vw; }
.faq-list summary { padding: 15px 19px; }
.contact { padding: 62px 7vw; }
.contact h2 { font-size: clamp(2rem, 3vw, 3rem); }
footer { padding-top: 42px; gap: 45px; }

@media (max-width: 1050px) {
  .site-header nav.open { top: 104px; height: calc(100vh - 104px); }
  .legal-matter-grid { grid-template-columns: repeat(3, 1fr); }
  .legal-matter { min-height: 450px; }
  .legal-card-front img { height: 145px; }
}

@media (max-width: 800px) {
  .legal-matter-grid { grid-template-columns: 1fr; }
  .legal-matter { min-height: auto; }
  .legal-card-front img { height: 210px; }
}

@media (max-width: 700px) {
  .site-header nav.open { top: 78px; height: calc(100vh - 78px); }
  .hero { padding-top: 45px; }
  .hero-art { min-height: 330px; }
  .hero-photo { min-height: 0; border-width: 5px; border-radius: 18px 45px 18px 45px; }
  .hero-photo img { height: 270px; }
  .section { padding: 55px 6vw; }
  .legal-card-front { min-height: 330px; }
  .legal-card-front img { height: 185px; }
  .legal-card-detail { padding: 22px; }
  .about-mediation, .steps-section, .faq-section, .contact { padding-top: 55px; padding-bottom: 55px; }
}

/* Tramo final más compacto */
.faq-section {
  padding: 46px 8vw 42px;
}

.faq-section .heading {
  margin-bottom: 22px;
}

.faq-section .heading h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
}

.faq-list details {
  margin: 7px 0;
}

.faq-list summary {
  padding: 11px 17px;
  font-size: .88rem;
}

.faq-list p {
  padding: 0 17px 13px;
  font-size: .82rem;
  line-height: 1.45;
}

.contact {
  padding: 42px 7vw;
}

.contact h2 {
  margin: 6px 0;
  font-size: clamp(1.8rem, 2.7vw, 2.65rem);
}

.contact p {
  margin: 8px 0;
}

.contact .btn-white {
  margin-top: 10px;
  margin-bottom: 7px;
  padding: 11px 21px;
}

.contact-email {
  margin-top: 7px;
  font-size: .85rem;
}

footer {
  padding: 30px 8vw 18px;
  gap: 30px;
}

footer img {
  width: 205px;
}

footer p {
  margin: 6px 0;
  line-height: 1.45;
}

footer h4 {
  margin-bottom: 7px;
}

footer > div:not(.footer-main) {
  gap: 4px;
}

footer > small {
  padding-top: 13px;
  font-size: .69rem;
}

@media (max-width: 700px) {
  .faq-section { padding: 40px 6vw 36px; }
  .contact { padding: 38px 6vw; }
  footer { padding: 28px 6vw 16px; gap: 20px; }
}

/* Accesos oficiales de redes sociales */
.mail-float {
  background: #25d366;
  box-shadow: 0 8px 25px rgba(37, 211, 102, .38);
}

.mail-float:hover {
  background: #1fb959;
  transform: translateY(-2px);
}

.instagram-float {
  position: fixed;
  right: 22px;
  bottom: 87px;
  z-index: 30;
  display: grid;
  width: 55px;
  height: 55px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 31% 106%, #fdf497 0 5%, #fd5949 38%, #d6249f 61%, #285aeb 100%);
  box-shadow: 0 8px 25px rgba(180, 35, 140, .3);
  transition: transform .25s ease;
}

.instagram-float:hover { transform: translateY(-2px); }
.instagram-float svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.instagram-float .dot { fill: currentColor; stroke: none; }
.social-link { font-weight: 800; }

.mediator-whatsapp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 820px;
  margin: 18px auto 13px;
  text-align: left;
}

.mediator-whatsapp > a {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  transition: background .25s, transform .25s;
}

.mediator-whatsapp > a:hover {
  background: rgba(255,255,255,.2);
  transform: translateY(-2px);
}

.mediator-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}

.mediator-whatsapp i {
  display: grid;
  min-width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #25d366;
  font: 800 .64rem "Montserrat";
  font-style: normal;
}

.mediator-whatsapp span { display: flex; flex-direction: column; letter-spacing: 0; }
.mediator-whatsapp small { font: 800 .55rem "Montserrat"; letter-spacing: .09em; opacity: .8; }
.mediator-whatsapp strong { font: 800 .92rem "Montserrat"; }
.mediator-whatsapp b { font-size: .75rem; font-weight: 700; }
.mediator-whatsapp > a > img { display: block; width: 100%; height: 245px; object-fit: cover; object-position: center 20%; }
.mediator-placeholder { display: grid; width: 100%; height: 245px; place-content: center; gap: 8px; color: var(--navy); background: linear-gradient(145deg,#e8f8fb,#cdeef5); text-align: center; }
.mediator-placeholder span { display: grid; width: 82px; height: 82px; margin: auto; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font: 800 1.65rem "Montserrat"; }
.mediator-placeholder small { color: var(--blue-dark); }

/* Cobertura territorial */
.coverage {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 6vw;
  align-items: center;
  padding-top: 62px;
  padding-bottom: 62px;
  background: var(--soft);
}

.coverage-heading h2 {
  margin: 10px 0 12px;
  color: var(--navy);
  font: 800 clamp(1.9rem, 2.8vw, 2.8rem)/1.15 "Montserrat";
  letter-spacing: -.035em;
}

.coverage-heading p {
  margin: 0 0 20px;
  color: var(--muted);
}

.commune-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.commune-grid div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 51px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  background: #fff;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(23,68,91,.04);
}

.commune-grid span {
  color: var(--coral);
  font: 800 .62rem "Montserrat";
}

@media (max-width: 800px) {
  .coverage { grid-template-columns: 1fr; gap: 30px; }
  .mediator-whatsapp { grid-template-columns: 1fr; max-width: 420px; }
  .mediator-whatsapp > a > img, .mediator-placeholder { height: 310px; }
}

@media (max-width: 520px) {
  .commune-grid { grid-template-columns: 1fr; }
  .mediator-whatsapp { grid-template-columns: 1fr; }
  .mediator-whatsapp > a > img, .mediator-placeholder { height: 310px; }
}