/*
  Base styles and shared components. Values come from tokens.css.
  Source of truth: DESIGN-PLAN.md.
*/

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-16));

  /* Context for links, focus rings and primary buttons. Bands and the menu panel override these. */
  --ctx-link: var(--surco);
  --ctx-focus: var(--surco);
  --btn-bg: var(--surco);
  --btn-fg: var(--cal);
  --btn-bg-hover: var(--carbon);
  --btn-fg-hover: var(--cal);
}

/* Scroll lock while the mobile menu is open; state lives in aria-expanded only. */
html:has(.menu-toggle[aria-expanded="true"]) {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--brote);
  color: var(--carbon);
}

/* ---------- Body ---------- */

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cal);
  color: var(--carbon);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-stretch: var(--t-body-stretch);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-tracking);
}

@media (max-width: 479px) {
  body {
    hyphens: auto;
  }
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

p {
  max-width: var(--measure-body);
}

strong,
b {
  font-weight: var(--w-strong);
}

/* ---------- Headlines ----------
   Never set overflow: hidden on a headline or its direct container (accented capitals reach 0.88em).
   Line-height stays at 1.08 or more. */

h1,
h2,
h3,
.display {
  font-family: var(--font-sans);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

.display {
  font-size: var(--t-display-size);
  font-stretch: var(--t-display-stretch);
  font-weight: var(--t-display-weight);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-tracking);
}

h1 {
  font-size: var(--t-h1-size);
  font-stretch: var(--t-h1-stretch);
  font-weight: var(--t-h1-weight);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-tracking);
}

h2 {
  font-size: var(--t-h2-size);
  font-stretch: var(--t-h2-stretch);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-tracking);
}

h3 {
  font-size: var(--t-h3-size);
  font-stretch: var(--t-h3-stretch);
  font-weight: var(--t-h3-weight);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-tracking);
}

.lead {
  font-size: var(--t-lead-size);
  font-stretch: var(--t-lead-stretch);
  font-weight: var(--t-lead-weight);
  line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-tracking);
}

.small {
  font-size: var(--t-small-size);
  font-stretch: var(--t-small-stretch);
  font-weight: var(--t-small-weight);
  line-height: var(--t-small-lh);
  letter-spacing: var(--t-small-tracking);
}

/* ---------- Container and bands ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section padding lives only here. Modifiers set surface and context only. */
.band {
  padding-block: var(--section-pad);
}

.band--cal,
.band--concreto {
  color: var(--carbon);
  --ctx-link: var(--surco);
  --ctx-focus: var(--surco);
  --btn-bg: var(--surco);
  --btn-fg: var(--cal);
  --btn-bg-hover: var(--carbon);
  --btn-fg-hover: var(--cal);
}

.band--cal {
  background: var(--cal);
}

.band--concreto {
  background: var(--concreto);
}

.band--ancho,
.band--surco {
  color: var(--cal);
  --ctx-link: var(--cal);
  --ctx-focus: var(--brote);
  --btn-bg: var(--cal);
  --btn-bg-hover: var(--concreto);
}

.band--ancho {
  background: var(--ancho);
  --btn-fg: var(--ancho);
  --btn-fg-hover: var(--ancho);
}

.band--surco {
  background: var(--surco);
  --btn-fg: var(--surco);
  --btn-fg-hover: var(--surco);
}

.band--carbon {
  background: var(--carbon);
  color: var(--cal);
  --ctx-link: var(--brote);
  --ctx-focus: var(--brote);
  --btn-bg: var(--brote);
  --btn-fg: var(--carbon);
  --btn-bg-hover: var(--cal);
  --btn-fg-hover: var(--carbon);
}

/* ---------- Links, buttons, focus ---------- */

a {
  color: var(--ctx-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--dur-feedback);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--focus-width) solid var(--ctx-focus);
  outline-offset: var(--focus-offset);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding-inline: var(--s-24);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-ui-size);
  font-stretch: var(--t-ui-stretch);
  font-weight: var(--t-ui-weight);
  line-height: var(--t-ui-lh);
  letter-spacing: var(--t-ui-tracking);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-feedback), color var(--dur-feedback);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

@media (max-width: 479px) {
  .btn {
    inline-size: 100%;
  }
}

/* ---------- Skip link ---------- */

.skip-link {
  position: fixed;
  top: var(--s-8);
  left: var(--s-16);
  z-index: 200;
  padding: var(--s-12) var(--s-16);
  border-radius: var(--radius-control);
  background: var(--carbon);
  color: var(--cal);
  font-size: var(--t-ui-size);
  font-weight: var(--t-ui-weight);
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
  --ctx-focus: var(--brote);
}

/* ---------- Header ---------- */

.site-header {
  --logo-w: var(--logo-w-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--cal);
  border-bottom: 1px solid var(--concreto);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-32);
  height: 100%;
}

.site-logo {
  display: block;
  flex: none;
  line-height: 0;
}

.site-logo img {
  width: var(--logo-w);
}

/* Desktop nav */

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-link {
  display: block;
  padding-block: var(--s-12);
  color: var(--carbon);
  font-size: var(--t-ui-size);
  font-stretch: var(--t-ui-stretch);
  font-weight: var(--t-ui-weight);
  line-height: var(--t-ui-lh);
  letter-spacing: var(--t-ui-tracking);
  white-space: nowrap;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--surco);
  text-underline-offset: 0.45em;
}

.nav-link[aria-current="page"] {
  font-weight: var(--w-ui-active);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--surco);
  text-underline-offset: 0.45em;
}

/* The Contacto button has no room for a Surco underline on a Surco fill, so its current state is a Cal rule inside the button. */
.btn[aria-current="page"] {
  font-weight: var(--w-ui-active);
  box-shadow: inset 0 -3px 0 var(--cal);
}

/* Mobile menu toggle */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0 var(--s-8);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--carbon);
  font-size: var(--t-ui-size);
  font-stretch: var(--t-ui-stretch);
  font-weight: var(--t-ui-weight);
  line-height: var(--t-ui-lh);
  letter-spacing: var(--t-ui-tracking);
  cursor: pointer;
}

.menu-toggle__glyph,
.menu-toggle__glyph::before,
.menu-toggle__glyph::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.menu-toggle__glyph {
  position: relative;
}

.menu-toggle__glyph::before,
.menu-toggle__glyph::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__glyph::before {
  top: -6px;
}

.menu-toggle__glyph::after {
  top: 6px;
}

/* Mobile menu panel */

.menu-panel {
  --ctx-link: var(--cal);
  --ctx-focus: var(--brote);
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--carbon);
  color: var(--cal);
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--menu-shift));
  transition:
    opacity var(--dur-menu-close) var(--ease-out),
    transform var(--dur-menu-close) var(--ease-out),
    visibility 0s linear var(--dur-menu-close);
}

.menu-toggle[aria-expanded="true"] + .menu-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-menu-open) var(--ease-out),
    transform var(--dur-menu-open) var(--ease-out),
    visibility 0s;
}

.menu-list {
  list-style: none;
}

.menu-link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--s-12) var(--gutter);
  border-bottom: 1px solid var(--rule-on-dark);
  color: var(--cal);
  font-size: var(--t-h2-size);
  font-stretch: var(--t-h2-stretch);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-lh);
  hyphens: manual;
  text-decoration: none;
}

.menu-link:hover {
  background: var(--hover-on-dark);
}

.menu-link[aria-current="page"] {
  box-shadow: inset 4px 0 0 var(--brote);
}

.menu-link:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

.menu-meta {
  display: grid;
  gap: var(--s-24);
  padding: var(--s-32) var(--gutter) var(--s-48);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}

.menu-meta dt {
  font-weight: var(--w-strong);
}

.menu-meta dd {
  margin: 0;
}

.menu-meta dl {
  display: grid;
  gap: var(--s-16);
}

@media (min-width: 1024px) {
  .site-header {
    --logo-w: var(--logo-w-lg);
  }

  .site-nav {
    display: block;
  }

  .menu-toggle,
  .menu-panel {
    display: none;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  --logo-w: var(--logo-w-lg);
  padding-block: var(--s-64) var(--s-32);
}

.footer-grid {
  display: grid;
  gap: var(--s-32);
}

.footer-nav ul {
  display: grid;
  gap: var(--s-4);
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  padding-block: var(--s-4);
}

.footer-contact {
  display: grid;
  gap: var(--s-16);
}

.footer-contact dt {
  font-weight: var(--w-strong);
}

.footer-contact dd {
  margin: 0;
}

.footer-legal {
  max-width: none;
  margin-top: var(--s-48);
  padding-top: var(--s-24);
  border-top: 1px solid var(--rule-on-dark);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--col-gap);
  }

  .footer-brand {
    grid-column: 1 / span 4;
  }

  .footer-nav {
    grid-column: 6 / span 3;
  }

  .footer-contact {
    grid-column: 9 / span 4;
  }
}

/* ---------- Band modifiers ----------
   Padding still lives on .band; these only adjust it. Declared after .band so they win at equal specificity. */

.band--compact {
  padding-block: clamp(var(--s-48), 5vw, var(--s-64));
}

.band--flush-start {
  padding-block-start: 0;
}

/* ---------- Shared helpers ---------- */

.section-title {
  margin-bottom: clamp(var(--s-32), 3vw, var(--s-48));
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-32);
}

/* Text link with a comfortable tap target */
.text-link {
  display: inline-block;
  padding-block: var(--s-12);
}

/* ---------- Media wrapper ----------
   The wrapper owns the aspect ratio, so the image can't shift the layout while it loads. */

.media {
  display: grid;
  aspect-ratio: 16 / 9;
}

.media--bay {
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .media--bay {
    aspect-ratio: 16 / 9;
  }
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-gap {
  margin-top: clamp(var(--s-32), 4vw, var(--s-64));
}

/* ---------- Hero (Inicio) ---------- */

.hero {
  display: grid;
  justify-items: start;
  gap: var(--s-24);
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .hero__title {
    grid-column: 1 / span 9;
  }

  .hero__lead {
    grid-column: 1 / span 6;
  }

  .hero__actions {
    grid-column: 1 / -1;
  }
}

/* ---------- Las dos bahías ----------
   Each half is a full-bleed surface. The inner wrapper is the image width (capped at 800px from 1024px)
   and sits on the center seam, so the text's inline-start (wrapper edge + gutter) is always the
   image's left edge + var(--gutter). The right side mirrors it. */

.bays {
  display: grid;
}

.bay__text {
  display: grid;
  justify-items: start;
  gap: var(--s-12);
  padding: var(--s-24) var(--gutter) 0;
}

@media (min-width: 1024px) {
  .bays {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bay__inner {
    max-width: 800px;
  }

  .bay--alimentos .bay__inner {
    margin-inline-start: auto;
  }
}

/* Motion moment 1: "Apertura de bahías". Image area only; surfaces and text paint immediately. */
@media (prefers-reduced-motion: no-preference) {
  .bay__media {
    animation: bay-open var(--dur-bay) var(--ease-out) both;
  }

  .bay--insumos .bay__media {
    animation-delay: var(--dur-bay-stagger);
  }
}

@keyframes bay-open {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

/* ---------- Cómo trabajamos ---------- */

.steps {
  display: grid;
  gap: var(--s-32);
}

.steps > div {
  display: grid;
  align-content: start;
  gap: var(--s-8);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}

/* ---------- Ruled list (name | description) ---------- */

.ruled {
  border-top: 1px solid var(--rule);
  --rule: color-mix(in srgb, var(--carbon) 30%, transparent);
}

.ruled__row {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--rule);
}

.ruled dt {
  font-size: var(--t-h3-size);
  font-stretch: var(--t-h3-stretch);
  font-weight: var(--t-h3-weight);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-tracking);
}

.ruled dd {
  margin: 0;
  max-width: var(--measure-body);
}

@media (min-width: 768px) {
  .ruled__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--col-gap);
  }
}

/* ---------- Right-bleed split (reusable) ----------
   Add .band--bleed to the band, then .split-bleed with a __text and a __media child.
   Text spans cols 1–5 by default; add .split-bleed--text-6 or --text-7 to widen it (--text-7 also moves the media to col 8).
   From 1024px the media takes cols 7–12 and extends past the container edge to the viewport edge,
   capped at 200px (§7.2). Below 1024px it stacks under the text at container width, with no bleed.
   Widths use cqw (the band's own width) rather than vw, so a classic scrollbar can't cause overflow. */

.band--bleed {
  container-type: inline-size;
  --bleed: min(200px, calc((100cqw - min(100cqw, var(--container))) / 2 + var(--gutter)));
}

.split-bleed {
  display: grid;
  gap: var(--s-32);
}

.split-bleed__text {
  display: grid;
  justify-items: start;
  gap: var(--s-16);
}

@media (min-width: 1024px) {
  .split-bleed {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
  }

  .split-bleed__text {
    grid-column: 1 / span var(--text-cols, 5);
  }

  .split-bleed__media {
    grid-column: 7 / -1;
    margin-inline-end: calc(var(--bleed) * -1);
  }
}

/* ---------- Closing line (reusable, ends every page) ---------- */

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-48);
}

.closing__line {
  max-width: none;
  font-size: var(--t-h2-size);
  font-stretch: var(--t-h2-stretch);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-tracking);
  text-wrap: balance;
  hyphens: manual;
}

/* ---------- Product-page theme ----------
   A page theme class on <body> supplies the territory color; components read it.
   Alimentos uses Ancho. Insumos uses Surco. */

.page--alimentos {
  --territory: var(--ancho);
}

.page--insumos {
  --territory: var(--surco);
}

/* Territory band: surface, text, link, focus and primary-button context all follow the theme (§1.3). */
.band--territory {
  background: var(--territory);
  color: var(--cal);
  --ctx-link: var(--cal);
  --ctx-focus: var(--brote);
  --btn-bg: var(--cal);
  --btn-fg: var(--territory);
  --btn-bg-hover: var(--concreto);
  --btn-fg-hover: var(--territory);
}

/* ---------- Split modifiers (extend .split-bleed) ---------- */

.split-bleed--text-6 {
  --text-cols: 6;
}

/* Mirrored split: media in cols 1–6, text in cols 8–12 from 1024px (markup order stays text, then media). */
@media (min-width: 1024px) {
  .split-bleed--reverse .split-bleed__text {
    grid-column: 8 / -1;
    grid-row: 1;
  }

  .split-bleed--reverse .split-bleed__media {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
}

/* Non-bleeding variant of the split layout: the media stays inside the container. */
@media (min-width: 1024px) {
  .split-bleed--contained .split-bleed__media {
    margin-inline-end: 0;
  }
}

/* ---------- Ficha (spec rows) ----------
   Use with .ruled for the shared rule color: <ul class="ruled ficha"> and
   <li class="ruled__row ficha__row"> holding .ficha__name (h3), .ficha__desc and .ficha__para.
   Below 768px: stacked. 768–1023px: name on its own line, description and "Para:" side by side.
   From 1024px: name cols 1–3, description cols 4–8, "Para:" cols 9–12. */

.ficha {
  list-style: none;
}

@media (min-width: 768px) {
  .ficha__row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .ficha__name {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .ficha__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ficha__name {
    grid-column: 1 / span 3;
  }

  .ficha__desc {
    grid-column: 4 / span 5;
  }

  .ficha__para {
    grid-column: 9 / span 4;
  }
}

/* ---------- Image pair ---------- */

.pair {
  display: grid;
  gap: var(--col-gap);
}

@media (min-width: 1024px) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Nosotros variants ---------- */

/* Text cols 1–7, so the media starts at col 8 to avoid overlapping col 7. */
.split-bleed--text-7 {
  --text-cols: 7;
}

@media (min-width: 1024px) {
  .split-bleed--text-7 .split-bleed__media {
    grid-column: 8 / -1;
  }
}

/* Heading plus paragraphs, optionally held to cols 1–7 from 1024px (paragraphs still cap at 64ch). */
.stack {
  display: grid;
  justify-items: start;
  gap: var(--s-16);
}

@media (min-width: 1024px) {
  .text-cols-7 {
    max-width: calc((100% - 11 * var(--col-gap)) / 12 * 7 + 6 * var(--col-gap));
  }
}

/* ---------- Contacto: layout ---------- */

.contact {
  display: grid;
  gap: var(--s-48);
}

.contact__details {
  display: grid;
  gap: var(--s-16);
}

.contact__details dt {
  font-weight: var(--w-strong);
}

.contact__details dd {
  margin: 0;
}

@media (min-width: 1024px) {
  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
  }

  .contact__info {
    grid-column: 1 / span 5;
  }

  .contact__form {
    grid-column: 7 / -1;
  }
}

/* ---------- Form elements ---------- */

.form {
  display: grid;
  gap: var(--s-24);
  transition: opacity var(--dur-form-out);
}

.form-note {
  color: var(--grafito);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}

.field {
  display: grid;
  gap: var(--s-8);
}

.field__label {
  padding: 0;
  font-size: var(--t-ui-size);
  font-weight: var(--w-strong);
  line-height: var(--t-ui-lh);
}

.fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset .field__label {
  margin-bottom: var(--s-8);
}

/* Inputs, selects and textareas. 16px keeps iOS from zooming on focus. */
.control {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-12) var(--s-16);
  border: 1px solid var(--grafito);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--carbon);
  font-size: var(--t-ui-size);
  font-stretch: var(--t-ui-stretch);
  font-weight: var(--t-body-weight);
  line-height: var(--t-ui-lh);
}

.control:hover {
  border-color: var(--carbon);
}

textarea.control {
  min-height: 9rem;
  resize: vertical;
}

/* 2px Alerta border; padding gives back the extra pixel so nothing shifts. */
.control[aria-invalid="true"] {
  padding: calc(var(--s-12) - 1px) calc(var(--s-16) - 1px);
  border: 2px solid var(--alerta);
}

.field__error {
  max-width: none;
  color: var(--alerta);
  font-size: var(--t-small-size);
  font-weight: var(--w-strong);
  line-height: var(--t-small-lh);
}

/* Checkboxes: the whole label is the hit area. */
.check-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-32);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  min-height: var(--touch-min);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--surco);
  cursor: pointer;
}

/* Honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: grid;
  justify-items: start;
  gap: var(--s-12);
}

.form-legal {
  color: var(--grafito);
}

.form-status {
  max-width: none;
  color: var(--alerta);
  font-weight: var(--w-strong);
}

.form-status a {
  color: inherit;
}

/* Always-rendered live region: collapsed while empty so it adds no grid gap, yet it stays in the accessibility tree. */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn:disabled {
  background: var(--grafito);
  color: var(--cal);
  cursor: progress;
}

/* Motion moment 3: the form fades out, the success panel fades in, the height eases between them. */
.contact__form {
  transition: height var(--dur-form-height);
}

.form.is-leaving {
  opacity: 0;
}

.form-success {
  padding: var(--s-32);
  background: var(--concreto);
  transition: opacity var(--dur-form-in);
}

.form-success.is-entering {
  opacity: 0;
}

/* ---------- Aviso de privacidad: legal text at the 68ch measure ---------- */

.legal p {
  max-width: var(--measure-legal);
}

.legal h1 + p {
  margin-top: var(--s-16);
}

.legal__updated {
  color: var(--grafito);
}

.legal h2 {
  margin-top: var(--s-48);
  margin-bottom: var(--s-12);
}

/* ---------- Reduced motion §6 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}