/* Circulo Mental public pages. Reads only variables from tokens.css: no literal
   colors here (tests/test_contrast.py enforces it). Persuadir on home and the
   areas; Leer on recursos, Circulo Mental and legal.
   Touch rules (mobile-native): hover only where hover exists, press feedback on
   :active, dvh for the menu height, no tap-highlight flash. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { line-height: 1.65; }
img { max-width: 100%; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Shell geometry: the core's container is the site's wrapper ---------------- */
.cnx-container { padding-inline: var(--cnx-gutter); }
.cnx-main { padding: 0; display: flex; flex-direction: column; }
.cnx-main > .cnx-container { flex: 1; display: flex; flex-direction: column; max-width: none; padding-inline: 0; }
/* Core pages (errors) have no area wrapper: keep them readable. */
.cnx-main > .cnx-container > .cnx-column { width: 100%; margin-inline: auto; padding: var(--cnx-s-8) var(--cnx-gutter); }
.area { flex: 1; background: var(--cnx-surface); color: var(--cnx-text); }
.wrap { width: 100%; max-width: var(--cnx-container-width); margin-inline: auto; padding-inline: var(--cnx-gutter); }
.cnx-skip { z-index: 30; }

/* ---- Buttons ------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--cnx-radius); font: 600 0.9375rem/1 var(--cnx-font-display); text-decoration: none; touch-action: manipulation; }
.btn--primary { background: var(--cnx-primary); color: var(--cnx-on-primary); }
.btn--ghost { color: var(--cnx-text); border-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--cnx-primary-hover); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .btn:active { transform: scale(0.98); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}

/* ---- Header: the umbrella, the same on every page ------------------------------- */
.cnx-header { position: sticky; top: 0; z-index: 20; background: var(--cm-ivory); border-bottom: 1px solid var(--cm-line); }
.cnx-header .cnx-container { min-height: var(--cnx-header-height); }
.cnx-brand { display: flex; flex: 1; align-items: center; gap: 24px; font-size: 1rem; }
.site-logo { display: flex; flex: none; align-items: center; gap: 14px; line-height: 0; border-radius: 4px; }
.site-logo img { display: block; width: auto; }
.site-logo__word { height: 36px; }
.site-logo__mark { height: 47px; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: flex; align-items: center; min-height: var(--cnx-touch); padding: 0 10px; border-bottom: 2px solid transparent; color: var(--cm-navy); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--cm-cobalt); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { border-bottom-color: var(--cm-line-strong); } }
.agendar { flex: none; display: inline-flex; align-items: center; min-height: var(--cnx-touch); padding: 0 20px; border-radius: var(--cnx-radius); background: var(--cm-cobalt); color: var(--cm-white); font: 600 0.8125rem/1 var(--cnx-font-display); letter-spacing: 0.12em; text-decoration: none; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .agendar:hover { background: var(--cm-cobalt-hover); } }
.agendar:active { background: var(--cm-cobalt-hover); }
.menu { display: none; }

/* Mobile and tablet: logo + AGENDAR + a 44px disclosure. No script. */
@media (max-width: 68.75rem) {
  .cnx-header .cnx-container { min-height: 4rem; }
  .cnx-brand { gap: 10px; }
  .site-logo { gap: 11px; }
  .site-logo__word { height: 30px; }
  .site-logo__mark { height: 40px; }
  .site-nav { display: none; }
  .agendar { margin-left: auto; padding: 0 14px; }
  .menu { display: block; }
  .menu summary { display: flex; align-items: center; justify-content: center; width: var(--cnx-touch); height: var(--cnx-touch); border: 1px solid var(--cm-line-strong); border-radius: var(--cnx-radius); list-style: none; cursor: pointer; touch-action: manipulation; }
  .menu summary::-webkit-details-marker { display: none; }
  .burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--cm-navy); }
  .burger { position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -6px; }
  .burger::after { top: 6px; }
  .menu[open] .burger { background: transparent; }
  .menu[open] .burger::before { top: 0; transform: rotate(45deg); }
  .menu[open] .burger::after { top: 0; transform: rotate(-45deg); }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; overflow: auto; background: var(--cm-ivory); border-bottom: 1px solid var(--cm-line); max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overscroll-behavior: contain; }
  .menu-panel ul { max-width: var(--cnx-container-width); margin: 0 auto; padding: 8px var(--cnx-gutter) 24px; list-style: none; }
  .menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--cm-line); color: var(--cm-navy); font: 500 1.125rem/1 var(--cnx-font-display); text-decoration: none; touch-action: manipulation; }
  .menu-panel a[aria-current="page"] { color: var(--cm-cobalt); }
}
@media (max-width: 25rem) {
  .site-logo { gap: 9px; }
  .site-logo__word { height: 26px; }
  .site-logo__mark { height: 34px; }
  .agendar { padding: 0 12px; letter-spacing: 0.08em; }
}

/* ---- Footer: navy, the same on every page -------------------------------------- */
.site-footer { padding: 72px 0 32px; background: var(--cm-navy); color: var(--cm-ivory); }
.site-footer a { color: var(--cm-ivory); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; } }
.site-footer :focus-visible { outline-color: var(--cm-cobalt-light); }
.f-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.f-brand b { font: 500 0.9375rem/1 var(--cnx-font-display); letter-spacing: 0.16em; }
.f-brand p { max-width: 22ch; margin: 14px 0 0; font: 400 1.25rem/1.4 var(--cnx-font-serif); }
.f-col h2 { margin: 6px 0 14px; font: 600 0.75rem/1 var(--cnx-font-display); letter-spacing: 0.14em; }
.f-col--alnua h2 { color: var(--al-orange); }
.f-col--scrumpro h2 { color: var(--sp-violet-light); }
.f-col--pirata h2 { color: var(--pi-coral); }
.f-col--circulo-mental h2 { color: var(--cm-cobalt-light); }
.f-col ul { margin: 0; padding: 0; list-style: none; }
.f-col li a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.9375rem; }
.f-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--cm-navy-line); font-size: 0.875rem; }
.f-bottom .social, .f-bottom .legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.f-bottom .social a, .f-bottom .legal a { display: inline-flex; align-items: center; min-height: var(--cnx-touch); }
.f-bottom .copy { margin-left: auto; }
@media (max-width: 56.25rem) {
  .f-top { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .f-bottom .copy { margin-left: 0; }
}

/* ---- Shared page atoms ---------------------------------------------------------- */
.eyebrow { margin: 0 0 24px; color: var(--cm-cobalt); font: 500 0.875rem/1 var(--cnx-font-display); letter-spacing: 0.2em; }
.lede { max-width: 42ch; margin: 28px 0 36px; color: var(--cnx-text-muted); font: 400 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)/1.6 var(--cnx-font-display); }
.notfound { padding-block: var(--cnx-section); }
.notfound h1 { max-width: 16ch; margin: 0; font: 500 clamp(2.25rem, 1.2rem + 3.8vw, 4.5rem)/1.08 var(--cnx-font-display); letter-spacing: -0.025em; }

/* ---- Home ---------------------------------------------------------------------- */
.hero { padding: clamp(40px, 6vw, 104px) 0 clamp(48px, 6vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.hero h1 { max-width: 16ch; margin: 0; font: 500 clamp(2.25rem, 1.2rem + 3.8vw, 4.5rem)/1.08 var(--cnx-font-display); letter-spacing: -0.025em; }
.u { text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.u-alnua { text-decoration-color: var(--al-orange); }
.u-scrumpro { text-decoration-color: var(--sp-violet); }
.u-pirata { text-decoration-color: var(--pi-coral); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The logo's own ring and its clean symbol as the hero mark. */
.ring { display: grid; place-items: center; justify-self: end; width: min(100%, 440px); aspect-ratio: 1; border: 3px solid var(--cm-navy); border-radius: 50%; background: var(--cm-white); }
.ring img { display: block; width: 41.5%; height: auto; }

.areas-strip { border-block: 1px solid var(--cm-line); background: var(--cm-white); }
.areas-strip ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; padding: 0; list-style: none; }
.areas-strip li + li { border-left: 1px solid var(--cm-line); }
.areas-strip a { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 12px clamp(16px, 2vw, 28px); color: var(--cm-navy); text-decoration: none; }
.areas-strip img { display: block; width: auto; }
.strip-al { height: 34px; }
.strip-sp { height: 36px; }
.strip-pi { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 6px; background: var(--pi-black); }
.strip-pi img { width: 44px; height: auto; }
.strip-verb { margin-left: auto; color: var(--cnx-text-muted); font: italic 400 1.125rem/1.2 var(--cnx-font-serif); }

.spaces { padding: var(--cnx-section) 0; }
.spaces header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.spaces h2 { margin: 0; font: 500 clamp(1.875rem, 1.3rem + 2vw, 3rem)/1.1 var(--cnx-font-display); letter-spacing: -0.02em; }
.spaces header p { max-width: 36ch; margin: 0; color: var(--cnx-text-muted); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.space { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--cnx-radius-card); text-decoration: none; }
.space p { margin: 0; }
.space img.logo { display: block; height: auto; }
.space .go { margin-top: auto; padding-top: 12px; font-weight: 600; }
.space:focus-visible { outline-offset: 4px; }
/* ALNUA: its real logo, its warmth, and its topics fill the card. */
.space--alnua { grid-column: 1 / 8; grid-row: 1 / 3; border: 1px solid var(--al-border); background: var(--al-tint); color: var(--cm-navy); }
.space--alnua .logo { width: min(260px, 70%); }
.space--alnua .verb { font: italic 400 1.375rem/1 var(--cnx-font-serif); color: var(--al-blue); }
.space--alnua .copy { max-width: 32ch; font: 400 1.375rem/1.45 var(--cnx-font-serif); }
.space--alnua .go { color: var(--al-blue); }
.space--alnua .note { max-width: 52ch; color: var(--cm-muted); font-size: 0.875rem; line-height: 1.5; }
.topics { margin: 12px 0 0; padding: 0; border-top: 1px solid var(--al-rule); list-style: none; }
.topics li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--al-rule); font-weight: 500; }
.topics li span { color: var(--cm-muted); font-size: 0.875rem; font-weight: 400; text-align: right; }
.space--scrumpro { grid-column: 8 / 13; background: var(--sp-night); color: var(--cm-white); }
.space--scrumpro .logo { width: 184px; }
.space--scrumpro .verb { color: var(--sp-pink-light); font: 600 0.8125rem/1.2 var(--cnx-font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.space--scrumpro .copy { color: var(--sp-muted); }
.space--scrumpro .go { color: var(--sp-violet-light); }
.space--pirata { grid-column: 8 / 13; flex-direction: row; gap: 20px; background: var(--pi-black); color: var(--pi-text); }
.space--pirata .logo { flex: none; align-self: flex-start; width: 112px; }
.space--pirata div { display: flex; flex: 1; flex-direction: column; gap: 10px; }
.space--pirata .verb { color: var(--pi-coral); font: 500 1.125rem/1 var(--cnx-font-display); }
.space--pirata .copy { color: var(--pi-muted); }
.space--pirata .go { color: var(--pi-amber); }

.structure { padding: var(--cnx-section) 0; background: var(--cm-ivory-2); }
.structure .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.structure h2 { max-width: 16ch; margin: 0; font: 500 clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem)/1.12 var(--cnx-font-display); letter-spacing: -0.02em; }
.structure ol { margin: 0; padding: 0; border-top: 2px solid var(--cm-navy); list-style: none; }
.structure li { display: grid; grid-template-columns: 10rem 9rem 1fr; gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--cm-line-2); }
.structure b { font: 600 0.8125rem/1 var(--cnx-font-display); letter-spacing: 0.14em; }
.structure .v { display: flex; align-items: center; gap: 10px; font: italic 400 1.375rem/1.2 var(--cnx-font-serif); }
.structure .v i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.d-alnua { background: var(--al-orange); }
.d-scrumpro { background: var(--sp-violet); }
.d-pirata { background: var(--pi-coral); }
.structure em { color: var(--cnx-text-muted); font-size: 0.9375rem; font-style: normal; }

.closing { padding: var(--cnx-section) 0; background: var(--cm-cobalt); color: var(--cm-white); }
.closing .wrap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 32px; }
.closing h2 { max-width: 16ch; margin: 0; font: 500 clamp(2rem, 1.3rem + 2.6vw, 3.5rem)/1.06 var(--cnx-font-display); letter-spacing: -0.02em; }
.closing .btn--primary { background: var(--cm-white); color: var(--cm-cobalt); }
.closing :focus-visible { outline-color: var(--cm-white); }

@media (max-width: 56.25rem) {
  .hero .wrap { grid-template-columns: 1fr; }
  .ring { order: -1; justify-self: start; width: 200px; }
  .areas-strip ul { grid-template-columns: 1fr; padding-inline: var(--cnx-gutter); }
  .areas-strip a { padding-inline: 0; }
  .areas-strip li + li { border-top: 1px solid var(--cm-line); border-left: 0; }
  .spaces header { display: block; }
  .spaces header p { margin-top: 12px; }
  .grid { grid-template-columns: 1fr; }
  .space--alnua, .space--scrumpro, .space--pirata { grid-column: auto; grid-row: auto; }
  .space--pirata { flex-direction: column; }
  .structure .wrap { grid-template-columns: 1fr; }
  .structure li { grid-template-columns: 1fr; gap: 6px; }
}