/*
 * Shared typography system for Planifica tu viaje.
 * Typography lab option 11: Jerarquía mínima.
 * Change the tokens below to update every practical guide.
 */
.page-practical-guide,
.page-hub-planning,
.page-route {
  /* Geometría común del cabecero Planifica. El H1 conserva por ahora la
     escala transversal de site.css/components.css. */
  --planning-hero-height: 410px;
  --planning-hero-stage-height: 360px;
  --planning-hero-stage-padding-start: 18px;
  --planning-hero-stage-padding-end: 44px;
  --planning-hero-copy-offset: 40px;
  --planning-hero-mobile-height: 475px;
  --planning-hero-mobile-stage-height: 425px;
  --planning-hero-mobile-padding-start: 25px;
  --planning-hero-mobile-padding-end: 31px;
  --planning-hero-mobile-copy-offset: 0px;
  --planning-hero-mobile-gap: 24px;
  --page-title-block-max: 860px;
  --guide-type-hero: clamp(46px, 4.6vw, 66px);
  --guide-type-hero-mobile: clamp(38px, 11vw, 46px);
  --guide-section-title-size: 32px;
  --guide-section-title-size-mobile: 28px;
  --guide-section-title-weight: 600;
  --guide-subsection-title-size: 22px;
  --guide-feature-title-size: 26px;
  --guide-summary-title-size: 30px;
  --guide-lead-size: 20px;
  --guide-section-subtitle-size: 18px;
  --guide-section-copy-size: 16px;
  --guide-body-size: 16px;
  --guide-small-size: 14px;
  --guide-label-size: 13px;
  --guide-body-leading: 1.62;
  --guide-section-heading-gap: 10px;
  --guide-section-heading-space: 16px;
  --guide-section-number-size: 36px;
  --guide-section-rule-size: 28px;
}

@media (max-width: 820px) {
  .page-practical-guide,
  .page-hub-planning,
  .page-route {
    --planning-hero-active-height: var(--planning-hero-mobile-height);
    --planning-hero-active-stage-height: var(--planning-hero-mobile-stage-height);
    --planning-hero-active-padding-start: var(--planning-hero-mobile-padding-start);
    --planning-hero-active-padding-end: var(--planning-hero-mobile-padding-end);
    --planning-hero-active-copy-offset: var(--planning-hero-mobile-copy-offset);
  }
}

@media (min-width: 821px) {
  .page-practical-guide,
  .page-hub-planning,
  .page-route {
    --planning-hero-active-height: var(--planning-hero-height);
    --planning-hero-active-stage-height: var(--planning-hero-stage-height);
    --planning-hero-active-padding-start: var(--planning-hero-stage-padding-start);
    --planning-hero-active-padding-end: var(--planning-hero-stage-padding-end);
    --planning-hero-active-copy-offset: var(--planning-hero-copy-offset);
  }
}

/* Page opening: expressive but no longer magazine-sized. */
.page-practical-guide .breadcrumbs ol {
  font-size: var(--guide-label-size);
}

.page-practical-guide .page-hero__copy h1 {
  max-width: 820px;
  font-size: var(--guide-type-hero);
  line-height: 1;
}

.page-practical-guide .page-hero__lead {
  max-width: 700px;
  font-size: var(--guide-lead-size);
  line-height: 1.5;
}

.page-practical-guide .page-hero .eyebrow,
.page-practical-guide .page-hero__media figcaption {
  font-size: var(--guide-label-size);
}

.page-practical-guide main .eyebrow {
  font-size: var(--guide-label-size);
}

/* Functional information above the guide. */
.page-practical-guide .guide-review-note p,
.page-practical-guide .practical-scope p {
  font-size: var(--guide-small-size);
}

.page-practical-guide .practical-answer__content h2 {
  font-size: var(--guide-label-size);
}

.page-practical-guide .practical-answer__content p {
  font-size: 17px;
  line-height: 1.55;
}

.page-practical-guide .practical-answer__link,
.page-practical-guide .practical-jump-nav__label {
  font-size: var(--guide-small-size);
}

/* Summary block. */
.page-practical-guide .practical-summary__heading .eyebrow {
  font-size: var(--guide-label-size);
}

.page-practical-guide .practical-summary__heading h2 {
  font-size: var(--guide-summary-title-size);
  font-weight: var(--guide-section-title-weight);
  line-height: 1.08;
}

.page-practical-guide .practical-summary .fact-grid dt {
  font-size: var(--guide-label-size);
}

.page-practical-guide .practical-summary .fact-grid dd {
  font-size: 20px;
  line-height: 1.22;
}

.page-practical-guide .practical-summary__single p {
  font-size: var(--guide-body-size);
  line-height: var(--guide-body-leading);
}

/* One reading size across old editorial, visa and field-guide structures. */
.page-practical-guide .practical-guide-content :is(p, li, td, dd) {
  font-size: var(--guide-body-size);
  line-height: var(--guide-body-leading);
}

.page-practical-guide .practical-guide-content dt,
.page-practical-guide .practical-guide-content small {
  font-size: var(--guide-small-size);
  line-height: 1.45;
}

.page-practical-guide .practical-guide-content th {
  font-size: var(--guide-small-size);
  line-height: 1.45;
}

.page-practical-guide .practical-guide-content h3 {
  font-size: var(--guide-subsection-title-size);
  line-height: 1.22;
}

.page-practical-guide .practical-guide-content h4 {
  font-size: 18px;
  line-height: 1.3;
}

.page-practical-guide .practical-guide-content .eyebrow,
.page-practical-guide :is(.visa-guide__number, .field-number) {
  font-size: var(--guide-label-size);
}

/* Every content structure used by the practical guides inherits the same H2. */
.page-practical-guide .practical-guide-content h2 {
  font-size: var(--guide-section-title-size);
  font-weight: var(--guide-section-title-weight);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.page-practical-guide .visa-guide__heading > div:last-child > p {
  font-size: var(--guide-section-subtitle-size);
  line-height: 1.5;
}

/* Labels stay secondary, but none of the useful text drops below 13 px. */
.page-practical-guide :is(
  .health-tag,
  .health-center-cta span,
  .medicine-document span,
  .health-official-care span,
  .visa-status,
  .visa-table-label,
  .visa-doc-level,
  .visa-final-action a span,
  .visa-official-link span,
  .visa-passport-explainer span,
  .visa-arrival-flow article > span,
  .visa-incident-card > span,
  .visa-timing span,
  .visa-data-match__row span,
  .visa-calendar li > span,
  .visa-mistake-grid article > span,
  .security-zone > div span,
  .security-zone > div b,
  .contact-grid span,
  .currency-denominations span,
  .tour-money-audit > div > span,
  .decision-band article > span,
  .clause-grid article > span,
  .coverage-track article > span,
  .resort-audit article > span,
  .local-sim-board span,
  .checklist-board span,
  .offline-grid span,
  .arrival-grid span,
  .health-route-card > span,
  .health-calendar article > span,
  .health-source-row span,
  .field-timeline li > span,
  .exchange-path > ol li > span,
  .provider-badge,
  .field-side-card > span
) {
  font-size: var(--guide-label-size) !important;
}

.page-practical-guide main p.visa-status,
.page-practical-guide main span.visa-doc-level {
  font-size: var(--guide-label-size) !important;
}

.page-practical-guide :is(
  .field-source,
  .visa-fact-source,
  .visa-table-sources,
  .visa-mobile-scroll-hint,
  .visa-official-link a,
  .health-source-row a,
  .health-route-card > strong,
  .field-caption
) {
  font-size: var(--guide-small-size) !important;
}

/* Feature titles get one controlled step above the normal H3. */
.page-practical-guide :is(
  .provider-card h3,
  .visa-price-alert h3,
  .visa-organized-box h3,
  .visa-final-action h3,
  .health-insurance-bridge h3,
  .field-side-card h3
) {
  font-size: var(--guide-feature-title-size);
  line-height: 1.16;
}

.page-practical-guide .provider-card__top > strong {
  font-size: 24px;
}

.page-practical-guide :is(
  .coverage-track strong,
  .local-sim-board strong,
  .health-center-cta strong,
  .health-official-care strong,
  .visa-official-link strong
) {
  font-size: 21px;
  line-height: 1.24;
}

.page-practical-guide .visa-accordion summary span {
  font-size: 20px;
}

.page-practical-guide .visa-rule-card strong {
  font-size: clamp(34px, 3.4vw, 44px);
}

.page-practical-guide .visa-timing strong {
  font-size: 32px;
}

.page-practical-guide .offline-grid .offline-card p {
  font-size: 17px;
  line-height: 1.5;
}

.page-practical-guide .field-heading {
  gap: var(--guide-section-heading-space);
  margin-bottom: clamp(26px, 3vw, 34px);
  padding-bottom: 20px;
}

.page-practical-guide .field-heading__title {
  grid-template-columns:
    var(--guide-section-number-size)
    var(--guide-section-rule-size)
    minmax(0, 1fr);
  gap: var(--guide-section-heading-gap);
}

.page-practical-guide .field-heading .field-number {
  width: var(--guide-section-number-size);
  height: var(--guide-section-number-size);
  border-radius: 11px;
}

.page-practical-guide .field-heading__rule {
  width: var(--guide-section-rule-size);
}

.page-practical-guide .field-heading__title h2 {
  font-size: var(--guide-section-title-size);
  font-weight: var(--guide-section-title-weight);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.page-practical-guide .field-heading > .field-heading__copy > .field-heading__subtitle {
  font-size: var(--guide-section-subtitle-size);
  line-height: 1.22;
}

.page-practical-guide .field-heading > .field-heading__copy > .field-heading__description {
  margin-top: 8px;
  font-size: var(--guide-section-copy-size);
  line-height: 1.5;
}

/* Closing modules share the same hierarchy as the guide itself. */
.page-practical-guide .practical-exceptions > .section-heading h2,
.page-practical-guide #preguntas .faq-section h2,
.page-practical-guide .related-links--visual > .section-heading h2,
.page-practical-guide .affiliate-cta h2 {
  font-size: var(--guide-section-title-size);
  font-weight: var(--guide-section-title-weight);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.page-practical-guide .practical-exception-grid p,
.page-practical-guide #preguntas .faq-list details p,
.page-practical-guide .affiliate-cta p:last-child {
  font-size: var(--guide-body-size);
  line-height: var(--guide-body-leading);
}

.page-practical-guide #preguntas .faq-list summary {
  font-size: 18px;
  line-height: 1.4;
}

.page-practical-guide .sources--guide summary strong {
  font-size: var(--guide-body-size);
}

.page-practical-guide .sources--guide summary small,
.page-practical-guide .sources__content a,
.page-practical-guide .related-guide-card__body > b,
.page-practical-guide .author-box p {
  font-size: var(--guide-small-size);
}

.page-practical-guide .sources__content > p,
.page-practical-guide .related-guide-card__body > span,
.page-practical-guide .author-box small {
  font-size: var(--guide-body-size);
  line-height: 1.55;
}

.page-practical-guide .related-guide-card__body small {
  font-size: var(--guide-label-size);
}

.page-practical-guide .related-guide-card__body strong {
  font-size: 24px;
  line-height: 1.14;
}

.page-practical-guide .author-box strong {
  font-size: 20px;
}

@media (max-width: 680px) {
  .page-practical-guide .page-hero__copy h1 {
    font-size: var(--guide-type-hero-mobile);
  }

  .page-practical-guide .page-hero__lead {
    font-size: 18px;
  }

  .page-practical-guide .practical-summary__heading h2,
  .page-practical-guide .practical-exceptions > .section-heading h2,
  .page-practical-guide #preguntas .faq-section h2,
  .page-practical-guide .related-links--visual > .section-heading h2,
  .page-practical-guide .affiliate-cta h2 {
    font-size: var(--guide-section-title-size-mobile);
  }

  .page-practical-guide .practical-guide-content h2 {
    font-size: var(--guide-section-title-size-mobile);
  }

  .page-practical-guide .practical-guide-content h3 {
    font-size: 21px;
  }

  .page-practical-guide :is(
    .provider-card h3,
    .visa-price-alert h3,
    .visa-organized-box h3,
    .visa-final-action h3,
    .health-insurance-bridge h3,
    .field-side-card h3
  ) {
    font-size: 23px;
  }

  .page-practical-guide .field-heading {
    margin-bottom: 24px;
    padding-bottom: 18px;
  }

  .page-practical-guide .field-heading__title h2 {
    font-size: var(--guide-section-title-size-mobile);
  }
}

/* Supporting notes are intentionally not numbered: they qualify the preceding
   section instead of pretending to be a new chapter. */
.page-practical-guide .practical-guide-content + .practical-exceptions {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: clamp(26px, 3vw, 38px);
  padding-bottom: 0;
  border-top: 1px solid var(--line);
}

.page-practical-guide .practical-exceptions > .section-heading {
  grid-template-columns: minmax(120px, .28fr) minmax(0, 1.72fr);
  gap: 18px clamp(28px, 4vw, 56px);
  margin-bottom: 24px;
}

.page-practical-guide .practical-exceptions > .section-heading .eyebrow {
  margin-top: 5px;
}

.page-practical-guide .practical-exceptions > .section-heading h2 {
  max-width: 760px;
  font-size: 24px;
  font-weight: var(--guide-section-title-weight);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.page-practical-guide .practical-exception-grid article {
  min-height: 0;
  padding: 17px 18px;
}

.page-practical-guide .practical-exception-grid span {
  margin-bottom: 12px;
}

/* FAQ is a normal numbered section; its questions use the available width. */
.page-practical-guide #preguntas {
  padding-top: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(46px, 5vw, 66px);
}

.page-practical-guide .faq-section--numbered {
  display: block;
  padding: 0;
}

.page-practical-guide .faq-section--numbered .faq-section__heading {
  margin-bottom: 26px;
}

.page-practical-guide .faq-section--numbered .faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.page-practical-guide .faq-section--numbered .faq-list details,
.page-practical-guide .faq-section--numbered .faq-list details:last-child {
  overflow: hidden;
  border: 1px solid rgba(23, 51, 46, .16);
  border-radius: 13px;
  background: rgba(255, 253, 248, .86);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.page-practical-guide .faq-section--numbered .faq-list summary {
  min-height: 64px;
  align-items: center;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.page-practical-guide .faq-section--numbered .faq-list details p {
  max-width: none;
  margin: 0;
  padding: 0 18px 18px;
  color: var(--ink-soft);
  font-family: var(--sans);
}

@media (hover: hover) and (pointer: fine) {
  .page-practical-guide .faq-section--numbered .faq-list details:hover {
    border-color: rgba(189, 86, 57, .42);
    box-shadow: 0 9px 22px rgba(23, 51, 46, .07);
    transform: translateY(-2px);
  }
}

/* Sources are a compact, full-width verification band rather than a card. */
.page-practical-guide .practical-sources-wrap {
  padding-top: 22px;
  padding-bottom: 0;
}

.page-practical-guide .sources--guide {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.page-practical-guide .sources--guide summary {
  padding: 15px 0;
}

.page-practical-guide .sources--guide summary > span {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}

.page-practical-guide .sources--guide summary small {
  margin: 0;
}

.page-practical-guide .sources--guide summary > b {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 18px;
}

.page-practical-guide .sources__content {
  padding: 0 0 18px;
  border-top: 0;
}

.page-practical-guide .sources__content > p {
  margin: 4px 0 15px;
}

/* Planning hub: compact visual links make its destinations recognisable at a glance. */
.page-hub-planning .breadcrumbs ol,
.page-hub-planning main .eyebrow,
.page-hub-planning .planning-group__heading > span {
  font-size: var(--guide-label-size);
}

.page-hub-planning .page-hero__copy h1 {
  max-width: 820px;
  font-size: var(--guide-type-hero);
  line-height: 1;
}

.page-hub-planning .page-hero__lead {
  max-width: 700px;
  font-size: var(--guide-lead-size);
  line-height: 1.5;
}

.page-hub-planning main > .section.container > .section-heading h2 {
  font-size: var(--guide-section-title-size);
  font-weight: var(--guide-section-title-weight);
  line-height: 1.08;
}

.page-hub-planning main > .section.container > .section-heading > p {
  font-size: var(--guide-body-size);
  line-height: var(--guide-body-leading);
}

.page-hub-planning .planning-group {
  grid-template-columns: minmax(210px, .36fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  padding: 30px 0;
}

.page-hub-planning .planning-group__heading > span {
  color: var(--clay);
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-hub-planning .planning-group__heading h2 {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.12;
}

.page-hub-planning .planning-group__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-hub-planning .planning-link {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 30px;
  min-height: 82px;
  gap: 13px;
  align-items: center;
  padding: 8px 11px 8px 8px;
  border: 1px solid rgba(23, 51, 46, .15);
  border-radius: 14px;
  background: var(--paper-bright);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.3;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.page-hub-planning .planning-link__media {
  display: block;
  width: 82px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--sand);
}

.page-hub-planning .planning-link__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

.page-hub-planning .planning-link__arrow {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(23, 51, 46, .07);
  color: var(--ink-deep);
  place-items: center;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page-hub-planning .planning-link:hover {
    border-color: rgba(189, 86, 57, .42);
    box-shadow: 0 12px 26px rgba(23, 51, 46, .08);
    transform: translateY(-2px);
  }

  .page-hub-planning .planning-link:hover .planning-link__media img {
    transform: scale(1.06);
  }

  .page-hub-planning .planning-link:hover .planning-link__arrow {
    background: var(--clay);
    color: #fff;
    transform: translateX(2px);
  }
}

@media (max-width: 900px) {
  .page-hub-planning .planning-group {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .page-practical-guide .practical-guide-content > .editorial-section > h2 {
    padding-left: calc(var(--guide-section-number-size) + var(--guide-section-heading-gap));
  }

  .page-practical-guide .practical-guide-content > .editorial-section > h2::after {
    display: none;
  }

  .page-practical-guide .practical-exceptions > .section-heading {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }

  .page-practical-guide .practical-exceptions > .section-heading h2 {
    font-size: 22px;
  }

  .page-practical-guide .faq-section--numbered .faq-list,
  .page-practical-guide .sources__content ul,
  .page-hub-planning .planning-group__links {
    grid-template-columns: 1fr;
  }

  .page-practical-guide .sources--guide summary > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .page-hub-planning .page-hero__copy h1 {
    font-size: var(--guide-type-hero-mobile);
  }

  .page-hub-planning .page-hero__lead {
    font-size: 18px;
  }

  .page-hub-planning .planning-link {
    grid-template-columns: 72px minmax(0, 1fr) 28px;
    min-height: 76px;
  }

  .page-hub-planning .planning-link__media {
    width: 72px;
    height: 58px;
  }
}