/* ============================================================
   PASA TRÁMITE MX · pages.css
   ============================================================ */

/* ---- PAGE HERO ---- */
.page-hero {
  background: var(--forest-d);
  color: var(--snow);
  padding: 4.5rem 0 5.5rem;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 4rem;
  background: var(--snow);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.page-hero-inner { position: relative; }
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--mint); margin-bottom: 2rem;
}
.breadcrumb a { color: var(--mint); transition: color .2s; }
.breadcrumb a:hover { color: var(--snow); }
.breadcrumb span:last-child { color: rgba(244,248,245,.55); }
.breadcrumb-sep { opacity: .4; }

.page-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -.025em; color: var(--snow);
  max-width: 38rem; margin-top: 1rem;
}
.page-hero-sub {
  font-size: 1rem; line-height: 1.8;
  color: rgba(244,248,245,.72);
  max-width: 36rem; margin-top: 1rem;
}

/* ---- SERVICES PAGE ---- */
.services-page { background: var(--snow); }
.service-detail {
  display: grid; gap: 3rem;
  padding: 4rem 0;
  border-top: 1px solid var(--ink-08);
  scroll-margin-top: 6rem;
}
.service-detail:first-child { border-top: none; padding-top: 1rem; }
@media(min-width:1024px) { .service-detail { grid-template-columns: 4fr 8fr; gap: 4rem; } }

.svc-detail-num {
  font-family: var(--font-head); font-size: 4.5rem; font-weight: 700;
  color: rgba(26,58,42,.12); line-height: 1;
}
.svc-detail-title {
  font-family: var(--font-head); font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 700; color: var(--forest); line-height: 1.15;
  margin-top: .75rem;
}
.svc-detail-tag {
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ochre); margin-top: .75rem;
}
.svc-detail-body { font-size: .9375rem; line-height: 1.8; color: var(--ink-70); }
.svc-detail-bullets {
  display: grid; gap: .65rem; margin-top: 1.75rem;
}
@media(min-width:640px) { .svc-detail-bullets { grid-template-columns: 1fr 1fr; } }
.svc-detail-bullets li {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--sand); border: 1.5px solid var(--sand-dd);
  border-radius: var(--r-md); padding: .9rem 1.1rem;
  font-size: .85rem; color: var(--ink-70); line-height: 1.5;
}
.svc-detail-bullets li::before {
  content: '';
  flex-shrink: 0; margin-top: .25rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 72%; background-repeat: no-repeat; background-position: center;
}
.svc-detail-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* CTA BAND */
.cta-band {
  background: var(--forest);
  border-radius: var(--r-xl);
  padding: 3rem;
  display: flex; flex-direction: column; gap: 2rem;
}
@media(min-width:1024px) {
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cta-band-title {
  font-family: var(--font-head); font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700; color: var(--snow); line-height: 1.2;
}
.cta-band-sub { font-size: .9rem; color: rgba(244,248,245,.7); margin-top: .5rem; }
.cta-band .btn { flex-shrink: 0; }

/* ---- CONTACT PAGE ---- */
.contact-page-grid {
  display: grid; gap: 4rem; align-items: start;
  padding-top: 4rem;
}
@media(min-width:1024px) { .contact-page-grid { grid-template-columns: 5fr 7fr; } }

.contact-page-block { margin-bottom: 2.5rem; }
.contact-page-block h2 {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
  color: var(--forest); margin-bottom: .75rem;
}
.contact-page-block p, .contact-page-block address {
  font-size: .9rem; line-height: 1.8; color: var(--ink-70);
}
.contact-page-block ul { display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.contact-page-block ul li { display: flex; gap: .5rem; color: var(--ink-70); }
.contact-page-block ul li span { color: var(--ink-45); }
.contact-page-block ul a { color: var(--forest); transition: color .2s; }
.contact-page-block ul a:hover { color: var(--forest-m); }

.contact-page-note {
  background: var(--sand); border: 1.5px solid var(--sand-dd);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.1rem 1.25rem;
  font-size: .82rem; line-height: 1.65; color: var(--ink-70);
}
.contact-page-note strong { color: var(--ochre); }

/* ---- LEGAL PAGES ---- */
.legal-wrap { max-width: 48rem; margin-inline: auto; padding-top: 3rem; }
.legal-updated {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--moss); display: block; margin-bottom: 2.5rem;
}
.legal-wrap h2 {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
  color: var(--forest); margin-top: 2.5rem; margin-bottom: .75rem;
}
.legal-wrap h3 {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
  color: var(--forest); margin-top: 1.75rem; margin-bottom: .5rem;
}
.legal-wrap p { font-size: .9375rem; line-height: 1.8; color: var(--ink-70); margin-bottom: 1rem; }
.legal-wrap ul { margin-bottom: 1rem; }
.legal-wrap ul li {
  font-size: .9375rem; line-height: 1.75; color: var(--ink-70);
  padding-left: 1.25rem; position: relative; margin-bottom: .4rem;
}
.legal-wrap ul li::before {
  content: '';
  position: absolute; left: 0; top: .75rem;
  width: .5rem; height: 1px; background: var(--moss);
}
.legal-wrap a { color: var(--forest-m); text-decoration: underline; text-underline-offset: 2px; }
.legal-wrap a:hover { color: var(--forest); }
.legal-wrap strong { color: var(--forest); font-weight: 600; }

/* section alt bg */
.section-sand { background: var(--sand); }