/* CP3: accesibilidad y comportamiento móvil. Cargado después de los estilos del componente. */
:root {
  --sp2-focus-inner: #ffbf47;
  --sp2-focus-outer: #17312e;
  --sp2-coral-on-dark: #ffd0c4;
  --sp2-control-border: #60706d;
}

html {
  scroll-padding-top: 7rem;
}

body {
  min-width: 0;
  overflow-wrap: anywhere;
}

main,
header,
footer,
nav,
section,
article,
aside,
form,
fieldset {
  min-width: 0;
}

body,
button,
input,
select,
textarea {
  font-size: 1rem;
}

/* El texto de lectura se mantiene en 16 px o más. */
p,
li {
  font-size: 1rem !important;
  line-height: 1.65;
}

/* Metadatos y texto auxiliar: nunca por debajo de 14 px. */
small,
figcaption,
label,
dt,
dd,
.eyebrow,
.section-kicker,
.area-number,
.area-link,
.text-link,
.featured-card-top,
.page-breadcrumbs,
.article-meta,
.article-toc,
.source-type,
.route-note,
.public-content-state,
.library-label,
.commercial-path,
.affiliate-note,
.comparison-context span,
.comparison-title > div:last-child span,
.footer-bottom,
.footer-brand span,
.site-footer nav strong,
.site-footer nav a,
.cluster-library__entry b,
.cluster-connections article span,
.commercial-context a,
.equipment-space-grid span,
.equipment-family-card__top span,
.equipment-family-card > strong {
  font-size: .875rem !important;
  line-height: 1.5;
}

.desktop-nav a,
.mobile-nav .menu > li > a,
.menu-button,
.search-field button,
.search-form .search-submit,
.primary-link {
  font-size: .9375rem !important;
}

/* Corrección específica: coral sobre superficies verde oscuro. */
:where(.start-here-wrap, .pillar-wrap, .infographic, .habit-figure, .recovery-check, .habit-system-map, .camino-phases)
  :where(.eyebrow, .section-kicker, small, .source-type) {
  color: var(--sp2-coral-on-dark) !important;
}

/* Contraste no textual en campos, bordes y estados interactivos. */
.search-field,
.search-form .search-field,
.search-form input[type="search"],
input,
select,
textarea {
  border-color: var(--sp2-control-border);
}

/* El campo editable, no solo su envoltorio, conserva un objetivo de 44 px. */
.search-field input[type="search"],
.search-form input[type="search"] {
  box-sizing: border-box;
  min-height: 44px;
}

.search-field:focus-within,
.search-form:focus-within {
  border-color: var(--sp2-focus-outer);
}

/* Foco visible de doble contraste, incluso en superficies oscuras. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--sp2-focus-inner) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--sp2-focus-outer) !important;
  border-radius: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
  scroll-margin-top: 7rem;
}

.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* Controles principales de 44 × 44 px; enlaces corrientes conservan la excepción inline de WCAG. */
.menu-button,
.search-field button,
.search-form .search-submit,
.primary-link,
.start-here > a,
.pillar-card > a,
.commercial-access > a,
.comparison-bridge a,
.amazon-cta,
.equipment-hub-hero__jump,
.equipment-family-card > a {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.mobile-nav .menu > li > a,
.site-footer nav a,
.helpful-links a,
.context-return a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen-reader-text:focus {
  position: fixed !important;
  left: 12px;
  top: 12px;
  z-index: 1000;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  clip: auto !important;
  background: #fff;
  color: var(--ink);
}

table,
pre,
code,
img,
svg,
video,
iframe {
  max-width: 100%;
}

table,
pre {
  overflow-x: auto;
}

@media (max-width: 820px) {
  .menu-button {
    display: inline-flex;
  }

  .mobile-nav .menu > li > a {
    width: 100%;
    padding-block: 12px;
  }

  .equipment-hub-hero,
  .equipment-section-heading,
  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-summary {
    position: static;
  }
}

@media (max-width: 560px) {
  .section-shell,
  .header-inner,
  .article-width {
    width: calc(100% - 24px);
  }

  .header-inner {
    gap: 10px;
  }

  .brand {
    min-width: 0;
  }

  .brand span {
    min-width: 0;
  }

  .brand strong,
  .brand small {
    white-space: normal;
  }

  .brand small {
    font-size: .875rem !important;
  }

  .hero-copy h1,
  .area-hero__copy h1,
  .cluster-hero h1,
  .commercial-header h1,
  .equipment-hub-hero__copy h1 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }

  .cluster-section-card {
    grid-template-columns: minmax(96px, 118px) minmax(0, 1fr);
  }

  .cluster-section-card > div:only-child {
    grid-column: 1 / -1;
  }

  .cluster-section-card h3,
  .cluster-section-card p {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .search-field input,
  .search-form input[type="search"] {
    min-width: 0;
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  .brand img {
    width: 58px;
    height: 44px;
  }

  .brand strong {
    font-size: 1.05rem;
  }

  .hero-copy h1,
  .area-hero__copy h1,
  .cluster-hero h1 {
    font-size: clamp(2.45rem, 14vw, 3rem);
  }
}

/* CP4.5: escala adaptable exclusiva para H1, sin truncado ni alturas fijas. */
.hero-copy h1,
.area-hero__copy h1,
.cluster-hero h1,
.article-header h1,
.library-entry__header h1,
.commercial-header h1,
.equipment-hub-hero__copy h1,
.wp-content-shell h1 {
  max-height: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-wrap: balance;
  -webkit-line-clamp: unset;
}

.hero-copy h1 {
  font-size: clamp(2.6rem, 5.4vw, 5.1rem);
  line-height: .98;
}

.area-hero__copy h1,
.cluster-hero h1 {
  font-size: clamp(2.35rem, 5.2vw, 4.6rem);
  line-height: 1.02;
}

.article-header h1 {
  font-size: clamp(2rem, 4.2vw, 3.375rem);
  line-height: 1.1;
}

.library-entry__header h1 {
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.04;
}

.commercial-header h1,
.equipment-hub-hero__copy h1 {
  font-size: clamp(2rem, 4.3vw, 4rem);
  line-height: 1.06;
}

.wp-content-shell h1 {
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.06;
}

@media (max-width: 720px) {
  .library-entry__header h1,
  .commercial-header h1,
  .equipment-hub-hero__copy h1,
  .wp-content-shell h1 {
    font-size: clamp(1.875rem, 8vw, 2.375rem);
    line-height: 1.1;
  }

  .article-header h1 {
    font-size: clamp(1.625rem, 7vw, 2.375rem);
    line-height: 1.12;
    text-wrap: wrap;
  }

  .area-hero__copy h1,
  .cluster-hero h1 {
    font-size: clamp(2.2rem, 9.5vw, 2.8rem);
    line-height: 1.04;
  }
}

@media (max-width: 340px) {
  .article-header h1 {
    font-size: 1.4375rem;
  }
}

/* RC4.6: proporciones de la marca en la cabecera móvil, sin afectar la tipografía editorial. */
@media (max-width: 820px) {
  .site-header .header-inner {
    gap: 6px;
  }

  .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .site-header .brand img {
    flex: 0 0 auto;
    width: 94px;
    height: 68px;
    object-fit: contain;
  }

  .site-header .brand span {
    min-width: 0;
    align-content: center;
    line-height: 1.08;
  }

  .site-header .brand strong {
    font-size: clamp(1.22rem, 2.85vw, 1.35rem);
    line-height: 1.08;
    white-space: nowrap;
  }

  .site-header .brand small {
    margin-top: 2px;
    font-size: .875rem !important;
    line-height: 1.15;
    letter-spacing: -.012em;
    white-space: nowrap;
  }

  .site-header .menu-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
}

@media (max-width: 560px) {
  .site-header .header-inner {
    width: calc(100% - 16px);
    gap: 4px;
  }

  .site-header .brand {
    gap: 6px;
  }

  .site-header .brand img {
    width: 76px;
    height: 56px;
  }

  .site-header .brand strong {
    font-size: clamp(1.125rem, 5vw, 1.25rem);
  }

  .site-header .brand small {
    letter-spacing: -.018em;
  }

  .site-header .menu-button {
    flex-basis: 44px;
    width: 44px;
  }
}

@media (max-width: 340px) {
  .site-header .brand img {
    width: 64px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .area-card:hover,
  .area-card:focus-visible,
  .subarea-card:hover,
  .subarea-card:focus-visible,
  .cluster-section-card:hover,
  .cluster-section-card:focus-visible {
    transform: none !important;
  }
}

/* RC3.2: correcciones tipograficas puntuales verificadas en staging. */
main sup > a {
  font-size: .875rem !important;
}

.guide-concept-link {
  font-size: 1rem !important;
}