/* Self-hosted fonts (OFL, see fonts/). Sources and versions: DESIGN.md. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/literata-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/literata-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/literata-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/literata-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/literata-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Sochimenup public pages. Reads only --cnx-* tokens; no literal colors.
   Persuadir on the home page, Leer on blog, post and about. */
img { max-width: 100%; }
.cnx-main { padding-block: var(--cnx-s-6) var(--cnx-s-8); }

/* ---- Buttons ----------------------------------------------------------- */
.btn, .cnx-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--cnx-s-2); min-height: var(--cnx-touch); padding: var(--cnx-s-2) var(--cnx-s-5); border: 1px solid transparent; border-radius: var(--cnx-radius); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--member { background: var(--cnx-purple); color: var(--cnx-white); }
.btn--quiet { border-color: var(--cnx-line-strong); color: var(--cnx-ink); background: var(--cnx-white); }
.btn--brand { background: var(--cnx-brand-green); color: var(--cnx-ink); }
@media (hover: hover) {
  .btn--member:hover { background: var(--cnx-purple-hover); }
  .btn--quiet:hover { background: var(--cnx-tint); }
  .btn--brand:hover { background: var(--cnx-brand-green-hover); }
  .cnx-button:hover { background: var(--cnx-primary-hover); border-color: var(--cnx-primary-hover); }
  .cnx-button--secondary:hover { background: var(--cnx-surface-alt); color: var(--cnx-primary-hover); border-color: var(--cnx-primary-hover); }
}
.text-link { display: inline-flex; align-items: center; gap: var(--cnx-s-2); min-height: var(--cnx-touch); font-weight: 600; color: var(--cnx-text-green); text-decoration: none; }
@media (hover: hover) { .text-link:hover { text-decoration: underline; text-decoration-thickness: 1.5px; } }
@media (prefers-reduced-motion: no-preference) {
  .btn, .cnx-button, .site-nav a { transition: background-color 120ms ease; }
}

.icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.text-link--blue { color: var(--cnx-blue); }
/* The home owns its vertical rhythm: sections pad themselves, bands run edge to edge. */
.cnx-main:has(.hero) { padding-block: 0; overflow-x: clip; }

/* ---- Header ------------------------------------------------------------ */
.cnx-header { background: var(--cnx-surface); }
.cnx-header .cnx-container { padding-block: var(--cnx-s-2); }
.cnx-brand { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--cnx-s-2) var(--cnx-s-6); }
.site-logo { display: block; flex: none; line-height: 0; }
.site-logo img { width: 12.5rem; height: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--cnx-s-1); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--cnx-touch); padding: var(--cnx-s-2) var(--cnx-s-3); border-radius: var(--cnx-radius); color: var(--cnx-ink); font-weight: 600; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--cnx-text-green); text-decoration: underline; text-decoration-color: var(--cnx-brand-green); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
@media (hover: hover) { .site-nav a:hover { background: var(--cnx-tint); } }

/* ---- Section scaffolding --------------------------------------------- */
.hero, .science, .recipes, .band { padding-block: var(--cnx-section); }
.hero { padding-bottom: var(--cnx-s-9); }
.band { margin-inline: calc(50% - 50vw); padding-inline: max(var(--cnx-s-5), calc(50vw - (var(--cnx-container-width) / 2) + var(--cnx-s-6))); }
.band--tint { background: var(--cnx-tint); }
.band--deep { background: var(--cnx-dark-band); color: var(--cnx-white); }
.science + .recipes { padding-top: 0; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cnx-s-2) var(--cnx-s-6); margin-bottom: var(--cnx-s-7); }
.section-title { display: flex; align-items: center; gap: var(--cnx-s-3); margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h2); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.section-title--light { color: var(--cnx-white); }
.section-note { margin: 0; color: var(--cnx-muted); }

/* Logo dot motif: the three dots of the isotype mark each section's color. */
.mark { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; transform: translateY(0.05em); }
.mark--green { background: var(--cnx-brand-green); }
.mark--blue { background: var(--cnx-blue); }
.mark--purple { background: var(--cnx-purple); }

/* ---- Hero ------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--cnx-s-8) clamp(2rem, 5vw, 5.5rem); padding-top: clamp(2.5rem, 1rem + 5vw, 6rem); }
.hero__title { margin: 0; max-width: 14ch; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-display); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; color: var(--cnx-ink); }
.hero__lead { margin: var(--cnx-s-6) 0 0; max-width: 36rem; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.6; color: var(--cnx-muted); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--cnx-s-3); margin: var(--cnx-s-7) 0 0; }

.hero__media { position: relative; margin: 0; padding: 0 0 var(--cnx-s-7) var(--cnx-s-7); }
.hero__media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--cnx-brand-green); }
.hero__media img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--cnx-radius-media); }
.dot { position: absolute; border-radius: 50%; }
.dot--blue { width: 1.25rem; height: 1.25rem; top: 12%; left: 0; background: var(--cnx-blue); }
.dot--purple { width: 2rem; height: 2rem; top: calc(12% + 2.25rem); left: -0.75rem; background: var(--cnx-purple); }

/* ---- Events (tint band) ---------------------------------------------- */
.events__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--cnx-s-5); }
.event { position: relative; display: flex; flex-direction: column; gap: var(--cnx-s-3); padding: var(--cnx-s-6); background: var(--cnx-white); border: 1px solid var(--cnx-line); border-radius: var(--cnx-radius-media); }
.event--lead { grid-row: 1 / span 2; justify-content: flex-end; padding: var(--cnx-s-7); background: var(--cnx-purple-tint); border-color: transparent; }
.event__status { order: -1; align-self: flex-start; margin: 0; padding: 0.375rem var(--cnx-s-3); border: 1px solid currentColor; border-radius: 999px; font-size: var(--cnx-fs-meta); font-weight: 600; line-height: 1.3; color: var(--cnx-purple); }
.event__title { margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h4); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.event--lead .event__title { margin-top: auto; padding-top: var(--cnx-s-8); font-size: var(--cnx-fs-h3); line-height: 1.15; max-width: 18ch; }
.event__body { margin: 0; max-width: 34rem; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.55; color: var(--cnx-ink); }
.event__meta { margin: 0; font-size: var(--cnx-fs-meta); font-weight: 600; color: var(--cnx-muted); }

/* ---- Meta line -------------------------------------------------------- */
.meta { display: flex; flex-wrap: wrap; gap: 0 var(--cnx-s-3); margin: 0; font-size: var(--cnx-fs-meta); font-weight: 600; color: var(--cnx-muted); font-variant-numeric: tabular-nums; }
.meta__cat { color: var(--cnx-blue); }

/* ---- Science ---------------------------------------------------------- */
.science__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cnx-s-7) clamp(2rem, 5vw, 5.5rem); }
.feature { position: relative; display: flex; flex-direction: column; gap: var(--cnx-s-3); }
.feature__media { display: block; margin-bottom: var(--cnx-s-3); line-height: 0; border-radius: var(--cnx-radius-media); background: var(--cnx-blue-tint); }
.feature__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--cnx-radius-media); mix-blend-mode: multiply; }
.feature__title { margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h3); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.feature__title a, .brief__title a { color: var(--cnx-ink); text-decoration: none; }
.feature__title a::after { content: ""; position: absolute; inset: 0; }
.feature__excerpt { margin: 0; max-width: 38rem; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.6; color: var(--cnx-muted); }
@media (hover: hover) {
  .feature__title a:hover, .brief__title a:hover { text-decoration: underline; text-decoration-color: var(--cnx-blue); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
}

.briefs { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--cnx-ink); }
.brief { display: flex; flex-direction: column; gap: var(--cnx-s-2); padding-block: var(--cnx-s-5); border-bottom: 1px solid var(--cnx-line); }
.brief__title { margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h4); line-height: 1.3; letter-spacing: -0.005em; text-wrap: pretty; }

/* Image fallback: a tint block with the brand dot, never an empty img. */
.feature__media--empty, .recipe__media--empty { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: var(--cnx-s-3); border-radius: var(--cnx-radius-media); background: var(--cnx-tint); }
.feature__media--empty { background: var(--cnx-blue-tint); }
.recipe__media--empty { aspect-ratio: 3 / 2; margin-bottom: var(--cnx-s-3); }
.feature__media--empty::after, .recipe__media--empty::after { content: ""; position: absolute; left: var(--cnx-s-5); bottom: var(--cnx-s-5); width: 1rem; height: 1rem; border-radius: 50%; background: var(--cnx-brand-green); }
.feature__media--empty::after { background: var(--cnx-blue); }
/* ---- Recipes ---------------------------------------------------------- */
.recipes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cnx-s-7) var(--cnx-s-5); align-items: stretch; }
.recipe { position: relative; display: flex; flex-direction: column; gap: var(--cnx-s-1); }
.recipe img { display: block; width: 100%; height: auto; margin-bottom: var(--cnx-s-3); object-fit: cover; border-radius: var(--cnx-radius-media); background: var(--cnx-tint); }
/* a: tall lead photo that fills both rows; b: wide; c, d: equal squares */
.recipe--a { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.recipe--a img { flex: 1 1 0; min-height: 24rem; }
/* Bottom of the lead photo meets the bottom of the squares: the lead caption is one line shorter. */
@media (min-width: 64.0625rem) { .recipe--a { padding-bottom: 1.125rem; } }
.recipe--b { grid-column: 7 / span 6; grid-row: 1; }
.recipe--b img { aspect-ratio: 3 / 2; }
.recipe--c { grid-column: 7 / span 3; grid-row: 2; }
.recipe--d { grid-column: 10 / span 3; grid-row: 2; }
.recipe--c img, .recipe--d img { aspect-ratio: 1; }
.recipe--c img { object-position: 30% 85%; }
.recipe--a img { object-position: 50% 45%; }
.recipe__title { margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h4); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.recipe--a .recipe__title, .recipe--b .recipe__title { font-size: var(--cnx-fs-h3); line-height: 1.15; }
.recipe__title a { color: var(--cnx-ink); text-decoration: none; }
.recipe__title a::after { content: ""; position: absolute; inset: 0; }
.recipe__by { margin: 0; font-size: var(--cnx-fs-meta); color: var(--cnx-muted); }
@media (hover: hover) { .recipe__title a:hover { text-decoration: underline; text-decoration-color: var(--cnx-brand-green); text-decoration-thickness: 2px; text-underline-offset: 0.15em; } }

/* ---- Professionals + membership (deep band) ------------------------ */
.pros__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cnx-s-8) clamp(2rem, 6vw, 6rem); align-items: start; }
.pros__lead { margin: var(--cnx-s-5) 0 0; max-width: 30rem; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.6; color: var(--cnx-deep-text); text-wrap: pretty; }
.pros :focus-visible { outline-color: var(--cnx-white); }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--cnx-s-6); margin: 0; padding: 0; list-style: none; }
.offer { padding-block: var(--cnx-s-5) var(--cnx-s-6); border-top: 1px solid var(--cnx-deep-line); }
.offer__title { display: flex; align-items: baseline; gap: var(--cnx-s-3); margin: 0 0 var(--cnx-s-2); font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h4); line-height: 1.25; color: var(--cnx-white); text-wrap: balance; }
.offer__title::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cnx-brand-green); transform: translateY(-0.12em); }
.offer p { margin: 0; padding-left: calc(0.5rem + var(--cnx-s-3)); color: var(--cnx-deep-text); text-wrap: pretty; }
.offer p a, .about .activities a { color: inherit; text-decoration: underline; text-decoration-color: var(--cnx-brand-green); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.activities a { color: var(--cnx-text-green); text-decoration-color: var(--cnx-purple); }
@media (hover: hover) { .offer p a:hover { text-decoration-thickness: 2.5px; } }
.text-link--light { color: var(--cnx-white); text-decoration: underline; text-decoration-color: var(--cnx-brand-green); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }

/* Aula virtual: latest videos, each card opens YouTube (no embeds). */
.aula { margin-top: var(--cnx-s-9); padding-top: var(--cnx-s-8); border-top: 1px solid var(--cnx-deep-line); }
.aula__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cnx-s-2) var(--cnx-s-6); margin-bottom: var(--cnx-s-6); }
.aula__title { margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h3); line-height: 1.15; letter-spacing: -0.01em; color: var(--cnx-white); text-wrap: balance; }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cnx-s-6) var(--cnx-s-5); margin: 0; padding: 0; list-style: none; }
.video__link { display: grid; grid-template-rows: auto auto 1fr; gap: var(--cnx-s-1); height: 100%; color: var(--cnx-white); text-decoration: none; }
.video__thumb { position: relative; display: block; margin-bottom: var(--cnx-s-2); border-radius: var(--cnx-radius-media); overflow: hidden; background: var(--cnx-ink); aspect-ratio: 16 / 9; }
.video__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video__thumb::before, .video__thumb::after { content: ""; position: absolute; }
.video__thumb::before { left: var(--cnx-s-3); bottom: var(--cnx-s-3); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cnx-dark-band); }
.video__thumb::after { left: calc(var(--cnx-s-3) + 0.8125rem); bottom: calc(var(--cnx-s-3) + 0.625rem); width: 0.875rem; height: 1rem; background: var(--cnx-white); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video__title { font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h4); line-height: 1.25; text-wrap: balance; }
.video__speaker { font-size: var(--cnx-fs-meta); color: var(--cnx-deep-text); }
@media (hover: hover) { .video__link:hover .video__title { text-decoration: underline; text-decoration-color: var(--cnx-brand-green); text-decoration-thickness: 2px; text-underline-offset: 0.15em; } }


/* Membership: the client's own invitation video beside the real join flow. */
.join { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cnx-s-7) clamp(2rem, 6vw, 6rem); align-items: center; margin-top: var(--cnx-s-9); padding-top: var(--cnx-s-9); border-top: 1px solid var(--cnx-deep-line); scroll-margin-top: var(--cnx-s-5); }
.join__video { order: -1; margin: 0; }
.join__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--cnx-radius-media); background: var(--cnx-ink); }
.join__video figcaption { max-width: 60ch; margin-top: var(--cnx-s-3); font-size: var(--cnx-fs-meta); color: var(--cnx-deep-text); }
.join__title { margin: 0; font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h2); line-height: 1.1; letter-spacing: -0.02em; color: var(--cnx-white); text-wrap: balance; }
.join__lead { margin: var(--cnx-s-4) 0 0; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.5; color: var(--cnx-white); }
.join__how { margin: var(--cnx-s-5) 0 var(--cnx-s-6); max-width: 26rem; color: var(--cnx-deep-text); text-wrap: pretty; }
.join__how a { color: var(--cnx-white); text-decoration-color: var(--cnx-brand-green); text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
@media (hover: hover) { .join__how a:hover { text-decoration-thickness: 2.5px; } }
.page-head { margin-bottom: var(--cnx-s-5); max-width: var(--cnx-measure); }
.page-title { display: flex; align-items: center; gap: var(--cnx-s-3); margin: 0; font-family: var(--cnx-font-display); font-weight: var(--cnx-display-weight); font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1.15; }
.page-lead { max-width: 62ch; margin: var(--cnx-s-2) 0 0; color: var(--cnx-text-muted); font-size: 1.125rem; }
.empty, .result-count { color: var(--cnx-text-muted); }
.result-count { margin: var(--cnx-s-4) 0; font-size: 0.875rem; }

/* ---- Filter and pager -------------------------------------------------- */
.filter ul { display: flex; flex-wrap: wrap; gap: var(--cnx-s-2); margin: 0; padding: 0; list-style: none; }
.filter a { display: inline-flex; align-items: center; min-height: var(--cnx-touch); padding: 0 var(--cnx-s-4); border: 1px solid var(--cnx-border-input); border-radius: var(--cnx-radius); color: var(--cnx-text); text-decoration: none; }
.filter a:hover { background: var(--cnx-surface-alt); }
.filter a[aria-current="true"] { background: var(--cnx-primary); border-color: var(--cnx-primary); color: var(--cnx-on-primary); font-weight: 700; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cnx-s-3); margin-top: var(--cnx-s-7); padding-top: var(--cnx-s-4); border-top: 1px solid var(--cnx-border); }
.pager__link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cnx-touch); padding: 0 var(--cnx-s-5); border: 1px solid var(--cnx-line-strong); border-radius: var(--cnx-radius); background: var(--cnx-white); color: var(--cnx-ink); font-weight: 600; text-decoration: none; }
@media (hover: hover) { a.pager__link:hover { background: var(--cnx-tint); } }
.pager__link[aria-disabled="true"] { border-color: var(--cnx-line); color: var(--cnx-text-muted); font-weight: 400; }
.pager__status { color: var(--cnx-text-muted); font-size: 0.875rem; }

/* ---- Post list --------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: 1fr; gap: var(--cnx-s-7) var(--cnx-s-5); }
@media (min-width: 40rem) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-item { position: relative; display: flex; flex-direction: column; gap: var(--cnx-s-3); }
.post-item__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--cnx-radius); background: var(--cnx-surface-alt); }
.post-item__meta { margin: 0; font-size: 0.8125rem; color: var(--cnx-text-muted); }
.post-item__cat { display: inline-flex; align-items: center; gap: var(--cnx-s-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.post-item__by { margin: 0; font-size: 0.875rem; color: var(--cnx-text-green); font-weight: 600; }
.post-item__media--empty { position: relative; aspect-ratio: 3 / 2; border-radius: var(--cnx-radius); background: var(--cnx-tint); }
.post-item__media--blog { background: var(--cnx-blue-tint); }
.post-item__media--empty::after { content: ""; position: absolute; left: var(--cnx-s-5); bottom: var(--cnx-s-5); width: 1rem; height: 1rem; border-radius: 50%; background: var(--cnx-brand-green); }
.post-item__media--blog::after { background: var(--cnx-blue); }
.post-item__title { margin: var(--cnx-s-1) 0 0; font-family: var(--cnx-font-display); font-weight: var(--cnx-display-weight); font-size: 1.25rem; line-height: 1.3; text-wrap: balance; }
.post-item__title a { color: var(--cnx-text); text-decoration: none; }
.post-item__title a::after { content: ""; position: absolute; inset: 0; }
.post-item__title a:hover { text-decoration: underline; text-decoration-color: var(--cnx-accent); text-decoration-thickness: 2px; }
.post-item__title a:focus-visible { outline-offset: 4px; }
.post-item__excerpt { margin: var(--cnx-s-2) 0 0; color: var(--cnx-text-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Article ----------------------------------------------------------- */
.article { max-width: 46rem; margin-inline: auto; }
.article__cat { display: inline-flex; align-items: center; gap: var(--cnx-s-2); min-height: var(--cnx-touch); color: var(--cnx-text-green); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
@media (hover: hover) { .article__cat:hover { text-decoration: underline; } }
.article__by { margin: var(--cnx-s-3) 0 0; color: var(--cnx-text-green); font-weight: 600; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--cnx-s-2); margin: 0 0 var(--cnx-s-1); font-size: 0.875rem; color: var(--cnx-text-muted); }
.article__title { margin: 0; font-family: var(--cnx-font-display); font-weight: var(--cnx-display-weight); font-size: clamp(1.75rem, 4.8vw, 2.5rem); line-height: 1.18; text-wrap: balance; overflow-wrap: anywhere; }
.article__figure { margin: var(--cnx-s-5) 0 0; }
.article__figure img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: cover; border-radius: var(--cnx-radius); }
.article__back { margin-top: var(--cnx-s-7); padding-top: var(--cnx-s-4); border-top: 1px solid var(--cnx-border); }

.prose { margin-top: var(--cnx-s-5); max-width: var(--cnx-measure); font-family: var(--cnx-font-reading); font-size: 1.125rem; line-height: 1.7; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure, .prose .table-wrap { margin: 0 0 var(--cnx-s-4); }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-family: var(--cnx-font-display); font-weight: var(--cnx-display-weight); line-height: 1.3; margin: var(--cnx-s-6) 0 var(--cnx-s-3); text-wrap: balance; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4, .prose h5, .prose h6 { font-size: 1.125rem; }
.prose li { margin-bottom: var(--cnx-s-1); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose blockquote { padding-left: var(--cnx-s-4); border-left: 3px solid var(--cnx-accent); color: var(--cnx-text-muted); }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--cnx-radius); }
.prose figure { max-width: 100%; }
.prose figcaption { margin-top: var(--cnx-s-2); font-family: var(--cnx-font-text); font-size: 0.875rem; color: var(--cnx-text-muted); }
.prose .table-hint { margin: 0 0 var(--cnx-s-1); font-family: var(--cnx-font-text); font-size: 0.8125rem; line-height: 1.4; color: var(--cnx-text-muted); }
@media (min-width: 40rem) { .prose .table-hint { display: none; } }
.prose .table-scroll { overflow-x: auto; max-width: 100%; }
.prose .table-scroll:focus-visible { outline: 2px solid var(--cnx-focus-ring); outline-offset: 2px; }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-family: var(--cnx-font-text); font-size: 1rem; line-height: 1.45; }
.prose th, .prose td { padding: var(--cnx-s-2) var(--cnx-s-3); border: 1px solid var(--cnx-border); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.prose th:first-child, .prose td:first-child { min-width: 9rem; }
.prose th { background: var(--cnx-surface-alt); }

/* ---- About ------------------------------------------------------------- */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cnx-s-7) clamp(2rem, 5vw, 5rem); margin-top: var(--cnx-s-7); }
.about__block--wide, .about__block--contact { grid-column: 1 / -1; }
.about__block--wide { padding: var(--cnx-s-7) 0; border-block: 1px solid var(--cnx-line); }
.about__title { margin: 0 0 var(--cnx-s-4); font-family: var(--cnx-font-display); font-weight: 600; font-size: var(--cnx-fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
.mission, .activities { margin: 0; padding: 0; list-style: none; font-family: var(--cnx-font-reading); font-size: 1.0625rem; line-height: 1.65; }
.mission li, .activities li { position: relative; padding: var(--cnx-s-3) 0 var(--cnx-s-3) var(--cnx-s-5); border-top: 1px solid var(--cnx-line); }
.mission li::before, .activities li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cnx-brand-green); }
.activities li::before { background: var(--cnx-purple); }
.definition { max-width: 60ch; margin: 0; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.7; }
.contact { display: flex; flex-wrap: wrap; gap: 0 var(--cnx-s-6); margin: 0 0 var(--cnx-s-4); padding: 0; list-style: none; }
.about__join { max-width: 56ch; margin: 0 0 var(--cnx-s-4); font-family: var(--cnx-font-reading); font-size: 1.125rem; }
.construction { max-width: 56ch; margin: var(--cnx-s-7) 0 0; padding-left: var(--cnx-s-4); border-left: 3px solid var(--cnx-line-strong); color: var(--cnx-text-muted); font-size: 0.9375rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--cnx-s-3); }
@media (max-width: 53.75rem) { .about { grid-template-columns: 1fr; } }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { padding-block: var(--cnx-s-8) var(--cnx-s-6); background: var(--cnx-white); font-size: 1rem; color: var(--cnx-muted); border-top: 1px solid var(--cnx-border); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: var(--cnx-s-7) var(--cnx-s-6); }
.footer__brand img { width: 10rem; height: auto; margin-bottom: var(--cnx-s-4); }
.footer__brand p { max-width: 18rem; }
.footer__title { margin: 0 0 var(--cnx-s-3); font-size: 1rem; font-weight: 600; color: var(--cnx-ink); }
.site-footer p + p, .site-footer p + ul { margin-top: var(--cnx-s-2); }
.footer__links { margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: var(--cnx-touch); color: var(--cnx-ink); text-decoration: none; }
@media (hover: hover) { .footer__links a:hover { color: var(--cnx-text-green); text-decoration: underline; } }
.site-footer .footer__legal { max-width: 60ch; margin-top: var(--cnx-s-7); padding-top: var(--cnx-s-5); border-top: 1px solid var(--cnx-line); font-size: var(--cnx-fs-meta); }

@media (max-width: 64rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
/* Header: one row from 54rem up; below it the CTA stays beside the logo and the nav
   takes its own row. On phones "Inicio" is dropped (the logo already links home). */
@media (max-width: 53.75rem) {
  .site-cta { margin-left: auto; }
  .site-nav { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--cnx-s-3)); }
}
@media (max-width: 40rem) {
  .cnx-header .cnx-container { padding-block: var(--cnx-s-2); }
  .cnx-brand { gap: 0 var(--cnx-s-3); }
  .site-logo img { width: 8.5rem; }
  .site-cta { padding-inline: var(--cnx-s-4); }
  .site-nav__home { display: none; }
  .site-nav a { padding-inline: var(--cnx-s-3); }
  .footer__brand, .footer__col--contact, .footer__col:last-child { grid-column: 1 / -1; }
  .prose { font-size: 1.0625rem; }
}

/* ---- Volcan Alimentario (tint band) ------------------------------------- */
.volcan { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cnx-s-7) clamp(2rem, 6vw, 6rem); align-items: center; }
.volcan__figure { margin: 0; justify-self: center; width: 100%; max-width: 34rem; }
.volcan__figure a { display: block; border-radius: var(--cnx-radius-media); overflow: hidden; border: 1px solid var(--cnx-line); }
.volcan__figure img { display: block; width: 100%; height: auto; }
.volcan__lead { margin: var(--cnx-s-5) 0 0; max-width: 36rem; font-family: var(--cnx-font-reading); font-size: var(--cnx-fs-lead); line-height: 1.55; text-wrap: pretty; }
.volcan__body { margin: var(--cnx-s-4) 0 var(--cnx-s-6); max-width: 36rem; color: var(--cnx-muted); text-wrap: pretty; }
.volcan__actions { display: flex; flex-wrap: wrap; gap: var(--cnx-s-3); margin: 0; }

/* ---- Home responsive --------------------------------------------------- */
@media (max-width: 64rem) {
  .hero, .science__grid, .pros__top, .join, .volcan { grid-template-columns: 1fr; }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aula { margin-top: var(--cnx-s-8); padding-top: var(--cnx-s-7); }
  .volcan__figure { max-width: 30rem; }
  .join { margin-top: var(--cnx-s-8); padding-top: var(--cnx-s-8); }
  .hero__media { max-width: 30rem; }
  .events__grid { grid-template-columns: 1fr 1fr; }
  .event--lead { grid-column: 1 / -1; grid-row: auto; }
  .offers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .hero__media { max-width: none; padding: 0 0 var(--cnx-s-6) var(--cnx-s-6); }
  .hero__actions .btn { flex: 1 1 auto; }
  .events__grid, .offers { grid-template-columns: 1fr; }
  .event, .event--lead { padding: var(--cnx-s-5); }
  .event--lead .event__title { padding-top: var(--cnx-s-6); }
  .section-head { margin-bottom: var(--cnx-s-6); }
  .recipes__grid { grid-template-columns: 1fr 1fr; gap: var(--cnx-s-6) var(--cnx-s-4); }
  .recipe--a, .recipe--b { grid-column: 1 / -1; grid-row: auto; }
  .recipe--c, .recipe--d { grid-column: auto; grid-row: auto; }
  .recipe--a img { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .hero__media img { aspect-ratio: 5 / 4; }
  .join__video { order: 0; }
  .videos { grid-template-columns: 1fr; gap: var(--cnx-s-5); }
  .video__link { grid-template-columns: 9rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--cnx-s-4); align-content: start; }
  .video__thumb { grid-row: 1 / span 2; margin-bottom: 0; }
  .video__thumb::before { width: 1.75rem; height: 1.75rem; left: var(--cnx-s-2); bottom: var(--cnx-s-2); }
  .video__thumb::after { width: 0.6875rem; height: 0.8125rem; left: calc(var(--cnx-s-2) + 0.625rem); bottom: calc(var(--cnx-s-2) + 0.4375rem); }
  .video__title { font-size: 1.0625rem; }
  .volcan .btn { width: 100%; text-align: center; }
}