/* Plantae Foods public pages. Reads variables from tokens.css only: no literal colors here
   (tests/test_contrast.py enforces it). Home and Mayoristas = Persuadir, Blog = Leer,
   Puntos de venta = Operar ligero. Hover only where hover exists; motion is transform and
   opacity, 300ms at most, off under prefers-reduced-motion. */

*, *::before, *::after { box-sizing: border-box; }
:root { --pf-gutter: var(--cnx-s-4); --pf-section: var(--cnx-s-7); }
@media (min-width: 720px) {
  :root { --pf-gutter: var(--cnx-s-6); --pf-section: var(--cnx-s-8); }
}
html { -webkit-tap-highlight-color: transparent; }
body { line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration-thickness: 1px; }
.cnx-skip { z-index: 30; }

/* ---- Headlines: Rainesta Black from 24px up, never smaller ----------------------- */
h1, h2, h3, .display {
  margin: 0;
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  color: var(--pf-text-brand);
}
h1 { font-size: 2.5rem; line-height: 1.08; }
h2 { font-size: 1.875rem; line-height: 1.12; }
h3 { font-size: 1.5rem; line-height: 1.2; }
.display { font-size: 2.5rem; line-height: 1.02; letter-spacing: -0.01em; }
@media (min-width: 640px) {
  .display { font-size: 3.5rem; }
}

/* ---- Shell geometry: site pages go full bleed, core pages keep the core container -- */
/* Site pages (layout.html) wrap their content in .site-bleed and place their own .wrap
   sections. Auth and backoffice pages do not, so they keep the core container, gutter and
   max-width; the core sizes their columns (.cnx-column, .bo-page). */
.cnx-main:has(.site-bleed) { padding: 0; display: flex; flex-direction: column; }
.cnx-main > .cnx-container:has(> .site-bleed) {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding-inline: 0;
}
.site-bleed { display: contents; }
.wrap {
  width: 100%;
  max-width: var(--cnx-container-width);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}
.cnx-header .cnx-container { padding-inline: var(--pf-gutter); }

/* Core applies the display font to these at under 24px; Rainesta never goes below 24px. */
.cnx-step__title { font-family: var(--cnx-font-text); }

/* ---- Buttons ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cnx-touch);
  padding: 0 var(--cnx-s-5);
  border: 2px solid transparent;
  border-radius: var(--pf-radius-sm);
  font: 500 0.9375rem/1.3 var(--cnx-font-text);
  letter-spacing: 0.01em;
  text-decoration: none;
  touch-action: manipulation;
}
.btn--lg { min-height: 52px; }
.btn--primary { background: var(--cnx-primary); color: var(--cnx-on-primary); }
.btn--secondary { border-color: var(--pf-border-strong); color: var(--pf-text-brand); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--cnx-primary-hover); }
  .btn--secondary:hover { border-color: var(--pf-bosque); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
  }
  .btn:active { transform: scale(0.98); }
}

/* ---- Header: logo image, desktop nav, no-JS menu ---------------------------------- */
.cnx-header { background: var(--cnx-surface); }
.cnx-brand {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--cnx-s-5);
  font-family: var(--cnx-font-text);
  font-weight: var(--cnx-text-weight);
  font-size: 1rem;
}
.site-logo { display: inline-flex; align-items: center; min-height: var(--cnx-touch); border-radius: var(--pf-radius-sm); }
.site-nav ul, .menu-panel ul, .site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-nav ul { display: flex; gap: var(--cnx-s-2); }
.site-nav a, .menu-panel a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cnx-touch);
  padding: 0 var(--cnx-s-3);
  border-radius: var(--pf-radius-sm);
  color: var(--cnx-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto var(--cnx-s-3) 8px;
  height: 2px;
  background: var(--pf-text-brand);
  transform: scaleX(0);
  transform-origin: left;
}
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .site-nav a:hover::after { transform: scaleX(1); }
  .menu-panel a:hover { background: var(--pf-surface-alt); }
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav a::after {
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
  }
}
.menu { position: relative; display: none; }
.menu summary {
  display: inline-flex;
  align-items: center;
  gap: var(--cnx-s-2);
  min-height: var(--cnx-touch);
  padding: 0 var(--cnx-s-3);
  border: 2px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute;
  top: calc(100% + var(--cnx-s-2));
  right: 0;
  z-index: 20;
  min-width: 14rem;
  padding: var(--cnx-s-2);
  background: var(--cnx-surface);
  border-radius: var(--pf-radius-md);
  box-shadow: var(--pf-shadow-float);
}
.menu-panel a { min-height: var(--cnx-touch-mobile); }
.menu-panel a[aria-current="page"] { background: var(--pf-surface-alt); font-weight: 700; }
@media (max-width: 719px) {
  .site-nav { display: none; }
  .menu { display: block; }
}

/* ---- Hero (Persuadir): copy left, illustration scene right -------------------------- */
.hero { padding-block: var(--pf-section); }
.hero__grid { display: grid; gap: var(--cnx-s-6); align-items: center; }
.hero__copy { max-width: 36rem; }
.lede { max-width: 46ch; margin: var(--cnx-s-4) 0 0; font-size: 1.125rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cnx-s-3); margin: var(--cnx-s-5) 0 0; }
.hero__scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--cnx-s-6) var(--cnx-s-5) 0;
  background: var(--pf-surface-brand);
  border-radius: var(--pf-radius-lg) var(--pf-radius-sm);
}
.hero__scene img { width: 100%; max-width: 28rem; }
@media (min-width: 760px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; gap: var(--cnx-s-7); }
}

/* ---- Home sections: alternating bands, one idea each ------------------------------- */
.section { padding-block: var(--pf-section); background: var(--cnx-surface); }
.section--alt { background: var(--pf-surface-alt); }
.section--brote { background: var(--pf-brote); }
.section h2 { margin-bottom: var(--cnx-s-3); }
.section p { max-width: 52ch; margin: 0; }
.section .lede { margin-top: var(--cnx-s-3); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cnx-s-4) var(--cnx-s-5);
  margin-bottom: var(--cnx-s-6);
}
.split { display: grid; gap: var(--cnx-s-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--cnx-s-4); }
@media (min-width: 760px) {
  .split { grid-template-columns: 5fr 6fr; gap: var(--cnx-s-8); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--center { align-items: center; }
}
.caption { font-size: 0.875rem; line-height: 1.4; color: var(--cnx-text-muted); }
.link, .hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cnx-s-2);
  min-height: var(--cnx-touch);
  color: var(--pf-text-brand);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.link svg { flex: none; }
.hero__link { padding-inline: var(--cnx-s-3); }
@media (hover: hover) {
  .link:hover svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .link svg, .post-card {
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
  }
}

/* Quienes somos: facts and press */
.facts { margin: 0; }
.facts div { padding-block: var(--cnx-s-4); border-top: 1px solid var(--pf-border-strong); }
.facts dt { font-weight: 700; color: var(--pf-text-brand); }
.facts dd { margin: var(--cnx-s-1) 0 0; }
.press { margin-top: var(--cnx-s-8); }
.press__title {
  margin-bottom: var(--cnx-s-4);
  font-family: var(--cnx-font-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pf-text-accent);
}
.press ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--cnx-s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.press a {
  display: flex;
  flex-direction: column;
  gap: var(--cnx-s-1);
  min-height: var(--cnx-touch);
  padding-top: var(--cnx-s-3);
  border-top: 1px solid var(--pf-border-strong);
  color: var(--cnx-text);
  text-decoration: none;
}
.press__outlet { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-text-accent); }
.press__headline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Products */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); gap: var(--cnx-s-5); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.product, .post-card, .article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  background: var(--cnx-surface);
}
.product img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; }
.product__body, .post-card__body, .article-card__body { display: flex; flex-direction: column; gap: var(--cnx-s-2); padding: var(--cnx-s-4) var(--cnx-s-4) var(--cnx-s-5); }

/* Video link-out: poster plus a label bar (the core CSP blocks iframes) */
.video { position: relative; display: block; min-height: var(--cnx-touch); overflow: hidden; border-radius: var(--pf-radius-md); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video__label {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: var(--cnx-s-2);
  min-height: var(--cnx-touch);
  padding: var(--cnx-s-2) var(--cnx-s-4);
  background: var(--pf-bosque);
  color: var(--pf-text-on-brand);
  font-weight: 500;
}
@media (hover: hover) {
  .video:hover .video__label { background: var(--cnx-primary-hover); }
}

/* Stores teaser and wholesale band */
.store-list { margin: 0; padding: 0; list-style: none; }
.store-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cnx-s-1) var(--cnx-s-4);
  padding-block: var(--cnx-s-4);
  border-top: 1px solid var(--pf-border-strong);
}
.store-list li:last-child { border-bottom: 1px solid var(--pf-border-strong); }
.store-list__name { font-weight: 700; }
.section--brote .btn { border-color: var(--pf-bosque); }
.panel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--cnx-s-6) var(--cnx-s-5) 0;
  background: var(--pf-surface-brand);
  border-radius: var(--pf-radius-sm) var(--pf-radius-lg);
}
.panel img { width: 100%; max-width: 18rem; }

/* Latest posts */
.post-card, .article-card { min-height: var(--cnx-touch); color: inherit; text-decoration: none; }
.post-card__media, .article-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--pf-surface-brand); }
.post-card__media img, .article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card h3, .article-card h2 { font-size: 1.5rem; }
.post-card__body p:not(.caption), .article-card__body p:not(.caption) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chip {
  position: absolute;
  top: var(--cnx-s-4);
  left: var(--cnx-s-4);
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--cnx-s-3);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-mostaza);
  color: var(--pf-on-chip);
  font-size: 0.8125rem;
  font-weight: 500;
}
@media (hover: hover) {
  .post-card:hover, .article-card:hover { transform: translateY(-2px); }
}

/* ---- Footer: brand band ------------------------------------------------------------ */
.site-footer {
  padding-block: var(--cnx-s-7);
  background: var(--pf-surface-brand);
  color: var(--pf-text-on-brand);
}
.site-footer__grid { display: grid; gap: var(--cnx-s-6); }
.site-footer__brand p { margin: var(--cnx-s-4) 0 0; color: var(--pf-text-on-brand-accent); }
.site-footer a {
  display: flex;
  align-items: center;
  min-height: var(--cnx-touch);
  color: var(--pf-text-on-brand);
}
.site-footer address { margin-top: var(--cnx-s-3); font-style: normal; color: var(--pf-text-on-brand-accent); }
.site-footer :focus-visible { outline-color: var(--pf-focus-on-brand); }
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1.5fr; }
  .site-footer__social { grid-column: 2 / -1; }
}
@media (hover: hover) {
  .site-footer a:hover { color: var(--pf-text-on-brand-accent); }
}

/* ---- Puntos de venta (Operar ligero): filters, list by region ----------------------- */
.pdv__title { margin-bottom: var(--cnx-s-3); }
.filters {
  display: grid;
  gap: var(--cnx-s-4) var(--cnx-s-5);
  align-items: end;
  margin-top: var(--cnx-s-6);
  padding: var(--cnx-s-5);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  background: var(--pf-surface-alt);
}
@media (min-width: 760px) {
  .filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
}
.field { display: flex; flex-direction: column; gap: var(--cnx-s-2); }
.field label { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; }
.field select, .field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--cnx-s-3);
  border: 1.5px solid var(--cnx-border-input);
  border-radius: var(--pf-radius-sm);
  background: var(--cnx-surface);
  color: var(--cnx-text);
  font: inherit;
  font-size: 1rem;
}
.filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cnx-s-3); }
.section .pdv__count { margin: var(--cnx-s-4) 0 var(--cnx-s-6); }
.region { margin-bottom: var(--cnx-s-6); }
.region__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cnx-s-4);
  padding-bottom: var(--cnx-s-2);
  font-family: var(--cnx-font-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.region__count { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cnx-text-muted); }
.stores { margin: 0; padding: 0; list-style: none; }
.store {
  display: grid;
  gap: var(--cnx-s-1);
  padding-block: var(--cnx-s-4);
  border-top: 1px solid var(--pf-border);
}
.store h3 { font-family: var(--cnx-font-text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--cnx-text); }
.store p { max-width: 60ch; margin: 0; }
.store__links { display: flex; flex-wrap: wrap; gap: var(--cnx-s-1) var(--cnx-s-5); }
.store__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cnx-touch);
  color: var(--pf-text-brand);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .store__links a:hover { color: var(--cnx-primary-hover); }
}
.empty { padding-block: var(--cnx-s-6); }

/* ---- Mayoristas (Persuadir): benefits, conditions, inquiry form --------------------- */
.benefits { display: grid; gap: var(--cnx-s-5); margin: var(--cnx-s-6) 0 0; padding: 0; list-style: none; }
.benefits li { padding-top: var(--cnx-s-4); border-top: 2px solid var(--pf-border-strong); }
.benefits h3 { margin-bottom: var(--cnx-s-2); }
@media (min-width: 760px) {
  .benefits { grid-template-columns: repeat(3, 1fr); gap: var(--cnx-s-6); }
}
.conditions .facts { max-width: 46rem; margin-top: var(--cnx-s-5); }
.section .conditions__note { margin-top: var(--cnx-s-5); font-weight: 500; }
.form-card { max-width: 46rem; padding: var(--cnx-s-5); border-radius: var(--pf-radius-md); background: var(--cnx-surface); }
@media (min-width: 720px) {
  .form-card { padding: var(--cnx-s-7); }
}
.contact-form { margin-top: var(--cnx-s-5); }
.form-grid { display: grid; gap: var(--cnx-s-4) var(--cnx-s-5); margin-top: var(--cnx-s-4); }
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}
.field textarea { min-height: 9rem; padding: var(--cnx-s-3); resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--cnx-danger); box-shadow: inset 0 0 0 1px var(--cnx-danger); }
.field-error { margin: 0; color: var(--cnx-danger); font-size: 0.9375rem; font-weight: 500; }
.form-errors { margin-block: var(--cnx-s-4) var(--cnx-s-5); padding: var(--cnx-s-4); border: 2px solid var(--cnx-danger); border-radius: var(--pf-radius-sm); color: var(--cnx-danger); }
.form-errors:focus-visible { outline-offset: 4px; }
.form-errors ul { margin: var(--cnx-s-2) 0 0; padding: 0; list-style: none; }
.form-errors a { display: flex; align-items: center; min-height: var(--cnx-touch); color: inherit; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The sent state focuses the card itself: a programmatic target, not a control, so no ring. */
.form-card[tabindex="-1"]:focus { outline: none; }
.form-card[role="status"] p { max-width: 46ch; }
/* `.section p` zeroes paragraph margins; the card's button needs air under the text. */
.form-card .actions { margin-top: var(--cnx-s-5); }
/* Sent state: a short card, so the section does not need the full form padding. */
.section--sent { padding-block: var(--cnx-s-6); }
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
.contact-form .actions { margin-block: var(--cnx-s-5) var(--cnx-s-3); }

/* Blog (Leer): the core's blog.css handles the prose; the site adds the card grid and spacing. */
.blog-cards { margin: 0; padding: 0; list-style: none; }
.blog-cards > li { display: flex; }
.blog-cards .article-card { flex: 1; }
.blog-head { margin-bottom: var(--cnx-s-6); }
.blog-head h1 { margin-block: var(--cnx-s-2) var(--cnx-s-3); }
.blog-head .lede { margin-bottom: var(--cnx-s-3); }
.blog-empty p { max-width: 46ch; }
.blog-foot .link { min-height: var(--cnx-touch); }
/* Error pages: enough body that the footer stays at the bottom of a tall screen. */
.error-page { min-height: 60vh; }
.error-page .lede { max-width: 46ch; }
.error-page .actions { margin-top: var(--cnx-s-5); display: flex; flex-wrap: wrap; gap: var(--cnx-s-3); align-items: center; }