/* ==========================================================================
   SAP Mercadotecnia: shared stylesheet
   Consumes tokens from tokens.css only. No raw color values in this file.
   Mobile first. Breakpoints: 480 (buttons), 768, 1024 (internal), 1280, 1600.
   One max-width query, max-width: 1023.98px, scoped to the Inicio hero
   (its below-1024 layout and tail); it's the only max-width query here.
   ========================================================================== */

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

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html.menu-open {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-regular);
  font-size: var(--texto-cuerpo);
  line-height: var(--interlinea-cuerpo);
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

/* <main tabindex="-1"> receives focus from the skip link; it isn't a control. */
main:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

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

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

/* ---------- Typography (§5) ---------- */

h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

h1,
h2 {
  font-family: var(--fuente-display);
}

h1 {
  font-weight: var(--peso-display);
  font-size: var(--texto-h1);
  line-height: var(--interlinea-display);
  max-width: var(--medida-h1);
}

.display {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--texto-display);
  line-height: var(--interlinea-display);
  max-width: var(--medida-display);
}

h2 {
  font-weight: var(--peso-display-h2);
  font-size: var(--texto-h2);
  line-height: var(--interlinea-h2);
  letter-spacing: var(--tracking-h2-min);
}

h3 {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-bold);
  font-size: var(--texto-h3);
  line-height: var(--interlinea-h3);
}

p,
li {
  max-width: var(--medida-texto);
}

/* Visual H3 on any heading level (e.g. an H2 that should look like an H3). */
.heading-h3 {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-bold);
  font-size: var(--texto-h3);
  line-height: var(--interlinea-h3);
  letter-spacing: 0;
}

.lede {
  font-size: var(--texto-lede);
  line-height: var(--interlinea-lede);
  max-width: var(--medida-lede);
}

/* ---------- Links (§7, §12 "Subrayado") ---------- */

a {
  color: var(--color-enlace);
  text-decoration-line: underline;
  text-decoration-thickness: var(--subrayado-grosor);
  text-underline-offset: var(--subrayado-offset);
  transition: text-decoration-thickness var(--dur-subrayado) ease-out;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: var(--subrayado-grosor-activo);
}

/* Marketing pages: red ink on white bands only (fails on yellow/red, so not there). */
[data-familia="mercadotecnia"] :is(main.band--white, main .band--white) a:not(.button):not(.subnav__link) {
  color: var(--tinta-roja);
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-offset);
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Container and grid (§7) ---------- */

.container {
  width: 100%;
  max-width: calc(var(--contenedor-max) + 2 * var(--margen-lateral));
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--esp-6);
}

/* ---------- Bands (§7): full-bleed background, inset content ----------
   Vertical padding lives on the band's .container so that the container's
   bottom edge IS the band's bottom edge (the tail hangs from it). */

.band {
  position: relative;
  width: 100%;
  background: var(--band-fondo, var(--blanco));
  color: var(--band-texto, var(--negro));
}

.band > .container {
  position: relative;
  padding-block: var(--banda-pad-y);
}

.band--white {
  --band-fondo: var(--blanco);
}

.band--yellow {
  --band-fondo: var(--amarillo);
  --cola-color: var(--amarillo);
}

.band--red {
  --band-fondo: var(--rojo);
  --cola-color: var(--rojo);
}

.band--grey {
  --band-fondo: var(--gris-tecnico);
  border-top: var(--borde-familia-eq) solid var(--turquesa);
}

.band--black {
  --band-fondo: var(--negro);
  --band-texto: var(--blanco);
  --color-enlace: var(--blanco);
  --color-foco: var(--color-foco-oscuro);
}

/* Links on coloured bands are always black (or white on black). */
.band--yellow,
.band--red,
.band--grey {
  --color-enlace: var(--negro);
}

/* ---------- Bubble tail (§7): the signature ----------
   Usage: add .band--tail to a .band--yellow or .band--red band.
   Max two per page. Marketing bands only. Never on grey/white/black bands. */

.band--tail {
  z-index: var(--z-cola);
}

.band--yellow.band--tail > .container::after,
.band--red.band--tail > .container::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  /* container left padding + one column + one gap */
  left: calc(
    var(--margen-lateral)
    + (100% - 2 * var(--margen-lateral) - (var(--columnas) - 1) * var(--col-gap)) / var(--columnas)
    + var(--col-gap)
  );
  width: var(--cola-ancho);
  height: var(--cola-alto);
  background: var(--cola-color);
  -webkit-mask: var(--cola-forma) no-repeat 0 0 / 100% 100%;
  mask: var(--cola-forma) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* Content in the band right after a tail clears it
   (including the footer, when the closing red band is last in <main>). */
.band--tail + .band > .container,
main:has(> .band--tail:last-child) + .site-footer > .container {
  padding-block-start: calc(var(--banda-pad-y) + var(--cola-alto));
}

/* ---------- Buttons (§7) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--boton-alto-min);
  padding: var(--boton-pad-y) var(--boton-pad-x);
  border: 0;
  border-radius: var(--radio-boton);
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-semi);
  font-size: var(--texto-ui);
  line-height: var(--interlinea-ui);
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

@media (min-width: 480px) {
  .button {
    width: auto;
  }
}

.button:hover,
.button:focus-visible {
  background: var(--rojo);
  color: var(--negro);
}

.band--red .button:hover,
.band--red .button:focus-visible {
  background: var(--blanco);
  color: var(--negro);
}

/* ---------- Images (§9) ---------- */

/* Real images: fill the slot, ratio set by .ratio-* or the component */
.media {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.media--mkt { border-radius: var(--radio-img-mkt); }
.media--eq  { border-radius: var(--radio-img-eq); }

.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }

/* ---------- Logo (§6) ---------- */

.logo {
  display: block;
  width: auto;
}

.logo--mark {
  aspect-ratio: 213.2 / 167.88;
  height: var(--logo-header-alto);
}

.logo--full {
  aspect-ratio: 213.2 / 233.88;
  height: var(--logo-footer-alto);
}

/* Dark variant: all 26 text paths carry .logo-texto */
.site-footer .logo-texto {
  fill: var(--blanco);
}

/* ---------- Header (§7, §8, §11) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--blanco);
  border-bottom: var(--linea) solid var(--color-linea);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  min-height: calc(var(--header-alto) - var(--linea));
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-weight: var(--peso-semi);
  font-size: var(--texto-ui);
  line-height: var(--interlinea-ui);
  text-decoration: none;
  text-underline-offset: 0.35em;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: var(--subrayado-grosor-activo);
}

.site-nav__link[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: var(--borde-actual);
}

/* Menu button: mobile only */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  margin-inline-end: calc(-1 * var(--esp-2));
  padding: 0 var(--esp-2);
  border: 0;
  background: transparent;
  color: var(--negro);
  font-weight: var(--peso-semi);
  font-size: var(--texto-ui);
  line-height: var(--interlinea-ui);
}

.menu-toggle__icon {
  display: grid;
  gap: 4px;
  width: 20px;
}

.menu-toggle__icon span {
  display: block;
  height: 2px;
  background: currentColor;
}

/* ---------- Mobile menu sheet (§11, §12 "Menú abre/cierra") ---------- */

.mobile-menu {
  position: fixed;
  top: var(--header-h);
  inset-inline: 0;
  z-index: var(--z-menu);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--blanco);
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--menu-desplazamiento));
  transition:
    opacity var(--dur-menu-cierra) ease-in,
    transform var(--dur-menu-cierra) ease-in,
    visibility 0s linear var(--dur-menu-cierra);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-menu-abre) var(--curva-salida),
    transform var(--dur-menu-abre) var(--curva-salida),
    visibility 0s linear 0s;
}

.mobile-menu__list {
  border-bottom: var(--linea) solid var(--color-linea);
}

.mobile-menu__list li {
  max-width: none;
  border-top: var(--linea) solid var(--color-linea);
}

.mobile-menu__list li:first-child {
  border-top: 0;
}

/* Full-row target: the whole row is the link. */
.mobile-menu__link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--menu-fila-min);
  padding: var(--esp-4) var(--margen-lateral);
  font-weight: var(--peso-semi);
  font-size: var(--texto-h3);
  line-height: var(--interlinea-ui);
  text-decoration: none;
}

.mobile-menu__link:focus-visible {
  outline-offset: calc(-1 * var(--foco-ancho));
}

.mobile-menu__link[aria-current="page"] {
  font-weight: var(--peso-bold);
  box-shadow: inset var(--barra-menu-actual) 0 0 var(--barra-color, var(--negro));
}

.mobile-menu__link[data-familia="mercadotecnia"] { --barra-color: var(--amarillo); }
.mobile-menu__link[data-familia="equipos"]       { --barra-color: var(--turquesa); }

.mobile-menu__contact {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-6) var(--margen-lateral);
  font-size: var(--texto-pequeno);
  line-height: var(--interlinea-pequeno);
}

@media (min-width: 768px) {
  .site-nav {
    display: block;
  }

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

/* ---------- Footer (§8) ---------- */

.site-footer {
  flex-shrink: 0;
}

.site-footer__grid {
  row-gap: var(--esp-7);
}

.site-footer__brand,
.site-footer__col {
  grid-column: 1 / -1;
}

.site-footer__title {
  margin-block-end: var(--esp-3);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-bold);
  font-size: var(--texto-pequeno);
  line-height: var(--interlinea-pequeno);
  letter-spacing: 0;
  max-width: none;
}

.site-footer__list {
  display: grid;
  gap: var(--esp-1);
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-footer__col,
.site-footer__legal {
  font-size: var(--texto-pequeno);
  line-height: var(--interlinea-pequeno);
}

.site-footer__contact {
  display: grid;
  gap: var(--esp-2);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-6);
  margin-block-start: var(--esp-7);
  padding-block-start: var(--esp-5);
  border-top: var(--linea) solid var(--linea-sobre-negro);
}

@media (min-width: 768px) {
  .site-footer__col {
    grid-column: span 4;
  }
}

@media (min-width: 1280px) {
  .site-footer__brand {
    grid-column: 1 / span 4;
  }

  .site-footer__col {
    grid-column: span 4;
  }
}

/* ---------- Skip link (all pages) ---------- */

.skip-link {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: var(--z-skip);
  padding: var(--esp-3) var(--esp-4);
  background: var(--blanco);
  color: var(--negro);
  font-weight: var(--peso-semi);
  font-size: var(--texto-ui);
  line-height: var(--interlinea-ui);
}

.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Text group (shared) ---------- */

/* Text group: a heading + text + link stack. Section titles. */

.text-group {
  display: grid;
  align-content: start;
  gap: var(--esp-3);
}

/* ---------- Flow bands (shared: Mercadotecnia, Nosotros) ---------- */

/* Consecutive white flow bands share one gap instead of two paddings. */
.band--flow + .band--flow > .container {
  padding-block-start: 0;
}

/* ==========================================================================
   Inicio (index.html), plan §8
   ========================================================================== */

.home-section-title {
  margin-block-end: var(--esp-7);
}

/* ---------- 1. Hero: "Fondo blanco" (plan §8 Inicio, amendment 10) ----------
   ≥1024: the band is yellow; .home-hero::before paints a white field from the
   right edge of the last text column to the viewport's right edge (the column
   gap before the photo is white). The tail hangs from the band, yellow side.
   <1024: the yellow text block carries the tail; the media block below it is
   a full-bleed white area (the container is full width below 1024).
   The bubble cluster: below 1280 it sits above the photo, its bottom 10%
   tucked behind it; from 1280 the photo spans columns 9–12 and the cluster
   sits in the white column 8, its right part tucked behind the photo's
   top-left corner. ≥1024 the hero has 64px vertical padding. */

.home-hero__grid {
  row-gap: 0;
}

.home-hero__text,
.home-hero__media {
  grid-column: 1 / -1;
}

.home-hero__text {
  position: relative;
  display: grid;
  gap: var(--esp-5);
  align-content: start;
}

.home-hero__actions {
  display: grid;
  justify-items: start;
  gap: var(--esp-5);
  margin-block-start: var(--esp-3);
}

.home-hero__actions .button {
  justify-self: stretch;
}

.home-hero__aside-link {
  max-width: var(--medida-lede);
}

/* The logo's three bubbles, paths verbatim from favicon.svg. Final box size
   from the start; only the paths animate (moment 4, below). */
.home-hero__burbujas {
  width: var(--burbujas-ancho);
  height: auto;
  aspect-ratio: 1;
  margin-block-end: calc(var(--burbujas-ancho) * var(--burbujas-solape) * -1);
  overflow: visible; /* the rising bubbles must not be cut at the box edge */
}

.home-hero__burbuja--amarilla { fill: var(--amarillo); }
.home-hero__burbuja--roja     { fill: var(--rojo); }
.home-hero__burbuja--turquesa { fill: var(--turquesa); }

/* The photo is stacked above the cluster. */
.home-hero__media .media {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
}

@media (min-width: 480px) {
  .home-hero__actions .button {
    justify-self: start;
  }
}

@media (max-width: 1023.98px) {
  .home-hero > .container {
    padding-block-end: 0;
  }

  .home-hero__text {
    padding-block-end: var(--banda-pad-y);
  }

  /* The tail moves from the band's bottom to the yellow block's bottom.
     Same shape and position (column 1 + 1) as the shared tail rule. */
  .home-hero.band--tail > .container::after {
    content: none;
  }

  .home-hero__text::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: calc(
      (100% - (var(--columnas) - 1) * var(--col-gap)) / var(--columnas)
      + var(--col-gap)
    );
    width: var(--cola-ancho);
    height: var(--cola-alto);
    background: var(--cola-color);
    -webkit-mask: var(--cola-forma) no-repeat 0 0 / 100% 100%;
    mask: var(--cola-forma) no-repeat 0 0 / 100% 100%;
    pointer-events: none;
  }

  .home-hero__media {
    margin-inline: calc(-1 * var(--margen-lateral));
    padding: calc(var(--banda-pad-y) + var(--cola-alto)) var(--margen-lateral) var(--banda-pad-y);
    background: var(--blanco);
  }

  /* The hero's own bottom edge is white with no tail: no tail allowance. */
  .home-hero + .band > .container {
    padding-block-start: var(--banda-pad-y);
  }
}

@media (min-width: 1024px) {
  /* Text columns: 5 of 8 here, 7 of 12 from 1280. */
  .home-hero {
    --hero-cols-texto: 5;
  }

  /* White field. 100% is the band's width; the edge is the right edge of the
     last text column, derived from the container (max-width, gutter, gap). */
  .home-hero::before {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0;
    left: calc(
      max(var(--margen-lateral), (100% - var(--contenedor-max)) / 2)
      + var(--hero-cols-texto)
        * (min(100% - 2 * var(--margen-lateral), var(--contenedor-max)) - (var(--columnas) - 1) * var(--col-gap))
        / var(--columnas)
      + (var(--hero-cols-texto) - 1) * var(--col-gap)
    );
    background: var(--blanco);
  }

  .home-hero > .container {
    padding-block: var(--esp-8);
  }

  .home-hero__grid {
    align-items: center;
  }

  /* 8-column grid between 1024 and 1279 */
  .home-hero__text  { grid-column: 1 / span 5; }
  .home-hero__media { grid-column: 6 / span 3; }

  .home-hero__text {
    align-self: center;
  }

  /* Cluster above the photo with its bottom 10% behind it. */
  .home-hero__media {
    position: relative;
    padding-block-start: calc(var(--burbujas-ancho) * (1 - var(--burbujas-solape)));
  }

  .home-hero__burbujas {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  /* 1:1 keeps the hero's height in check; 60% hides the floor wedge
     at the top right of the photo (amendment 10). */
  .home-hero__media .media {
    aspect-ratio: 1 / 1;
    object-position: 50% 60%;
  }
}

@media (min-width: 1280px) {
  .home-hero {
    --hero-cols-texto: 7;
  }

  /* Column 8 stays white space; the cluster sits in it. */
  .home-hero__text  { grid-column: 1 / span 7; }
  .home-hero__media { grid-column: 9 / span 4; }

  .home-hero__media {
    padding-block-start: calc(var(--burbujas-ancho) * var(--burbujas-sobresale));
  }

  .home-hero__burbujas {
    left: calc(var(--burbujas-ancho) * var(--burbujas-desplaza));
  }
}

/* §12 motion moment 4 (amendment 10): Inicio hero entrance. Plays once on
   load, ≈1.3s. Start state and keyframes exist only here, so without motion
   the cluster is simply in its final place. Translate is in SVG user units. */
@media (prefers-reduced-motion: no-preference) {
  .home-hero__burbuja {
    animation: burbuja-sube var(--dur-burbuja) var(--curva-salida) both;
  }

  .home-hero__burbuja--roja {
    animation-delay: var(--burbuja-escalon);
  }

  .home-hero__burbuja--turquesa {
    animation-delay: calc(2 * var(--burbuja-escalon));
  }

  @keyframes burbuja-sube {
    from {
      opacity: 0;
      transform: translateY(var(--burbuja-subida));
    }
    60% {
      opacity: 1;
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---------- 2. Mercadotecnia ---------- */

.home-mkt__feature {
  row-gap: var(--esp-5);
}

.home-mkt__feature-media,
.home-mkt__feature-text,
.home-mkt__items > * {
  grid-column: 1 / -1;
}

.home-mkt__items {
  margin-block-start: var(--esp-8);
  row-gap: var(--esp-7);
}

@media (min-width: 768px) {
  .home-mkt__feature {
    align-items: center;
  }

  .home-mkt__feature-media { grid-column: 1 / span 4; }
  .home-mkt__feature-text  { grid-column: 5 / span 4; }

  .home-mkt__items > :nth-child(1) { grid-column: 1 / span 4; }
  .home-mkt__items > :nth-child(2) { grid-column: 5 / span 4; }
}

@media (min-width: 1280px) {
  .home-mkt__feature-media { grid-column: 1 / span 7; }
  .home-mkt__feature-text  { grid-column: 8 / span 5; }

  .home-mkt__items > :nth-child(1) { grid-column: 1 / span 5; }
  .home-mkt__items > :nth-child(2) { grid-column: 7 / span 5; }
}

/* ---------- 3. Equipos ---------- */

.home-eq__head {
  margin-block-end: var(--esp-7);
}

.home-eq__intro {
  grid-column: 1 / -1;
  gap: var(--esp-5);
}

.home-eq__items {
  row-gap: var(--esp-7);
}

.home-eq__item {
  grid-column: 1 / -1;
  display: grid;
  align-content: start;
  gap: var(--esp-5);
}

@media (min-width: 768px) {
  .home-eq__intro { grid-column: 1 / span 6; }

  .home-eq__item:nth-child(1) { grid-column: 1 / span 4; }
  .home-eq__item:nth-child(2) { grid-column: 5 / span 4; }
}

@media (min-width: 1280px) {
  .home-eq__item:nth-child(1) { grid-column: 1 / span 6; }
  .home-eq__item:nth-child(2) { grid-column: 7 / span 6; }
}

/* ---------- Split rows (title left, body right) and closing band ---------- */

.split {
  row-gap: var(--esp-5);
}

.split__title,
.split__body {
  grid-column: 1 / -1;
}

.close-band .split {
  row-gap: var(--esp-6);
}

.close-band__details {
  display: grid;
  justify-items: start;
  gap: var(--esp-2);
}

.close-band__action {
  justify-self: stretch;
  margin-block-start: var(--esp-4);
}

@media (min-width: 480px) {
  .close-band__action {
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .split__title { grid-column: 1 / span 4; }
  .split__body  { grid-column: 5 / span 4; }

  .close-band .split {
    align-items: end;
  }
}

@media (min-width: 1280px) {
  .split__title { grid-column: 1 / span 6; }
  .split__body  { grid-column: 7 / span 6; }
}

/* ==========================================================================
   Shared page parts: intro band and static subnav (plan §8, §11)
   ========================================================================== */

.page-intro__text {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 1280px) {
  .page-intro__text {
    grid-column: 1 / span 8;
  }
}

.subnav {
  border-bottom: var(--linea) solid var(--color-linea);
}

.subnav > .container {
  padding-block: var(--esp-4);
}

.band--tail + .subnav > .container {
  padding-block-start: calc(var(--esp-4) + var(--cola-alto));
}

.subnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-6);
}

.subnav__list li {
  max-width: none;
}

.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-weight: var(--peso-semi);
  font-size: var(--texto-ui);
  line-height: var(--interlinea-ui);
}

/* ==========================================================================
   Mercadotecnia (mercadotecnia.html), plan §8
   ========================================================================== */

/* Publicidad's button, after the 2×2 list. (Section spacing: .band--flow.) */
.mkt-action {
  margin-block-start: var(--esp-7);
}

.pair__action {
  margin-block-start: var(--esp-3);
}

/* ---------- Publicidad: head ---------- */

.mkt-head {
  margin-block-end: var(--esp-7);
}

.mkt-head__text {
  grid-column: 1 / -1;
  gap: var(--esp-5);
}

@media (min-width: 1280px) {
  .mkt-head__text {
    grid-column: 1 / span 7;
  }
}

/* ---------- Publicidad: collage ----------
   Cells are sized by the grid; images fill them with object-fit (.media). */

.mkt-collage {
  row-gap: var(--col-gap);
}

.mkt-collage__large,
.mkt-collage__small {
  grid-column: 1 / -1;
}

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

@media (min-width: 768px) {
  .mkt-collage__small:nth-child(2) { grid-column: 1 / span 4; }
  .mkt-collage__small:nth-child(3) { grid-column: 5 / span 4; }
}

@media (min-width: 1024px) {
  .mkt-collage {
    grid-template-rows: 1fr 1fr;
  }

  .mkt-collage__large {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
  }

  .mkt-collage__large .media {
    aspect-ratio: 4 / 5;
  }

  .mkt-collage__small:nth-child(2) { grid-column: 6 / span 3; grid-row: 1; }
  .mkt-collage__small:nth-child(3) { grid-column: 6 / span 3; grid-row: 2; }

  .mkt-collage__small .media {
    aspect-ratio: auto;
    height: 100%;
  }
}

@media (min-width: 1280px) {
  .mkt-collage__large { grid-column: 1 / span 7; }

  .mkt-collage__small:nth-child(2),
  .mkt-collage__small:nth-child(3) {
    grid-column: 8 / span 5;
  }
}

/* ---------- Publicidad: 2×2 typographic list ---------- */

.mkt-services {
  margin-block-start: var(--esp-8);
  row-gap: var(--esp-7);
}

.mkt-services > * {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .mkt-services > :nth-child(odd)  { grid-column: 1 / span 4; }
  .mkt-services > :nth-child(even) { grid-column: 5 / span 4; }
}

@media (min-width: 1280px) {
  .mkt-services > :nth-child(odd)  { grid-column: 1 / span 5; }
  .mkt-services > :nth-child(even) { grid-column: 7 / span 5; }
}

/* ---------- Text/image pairs (Mercadotecnia, Equipos) ----------
   Media comes first in the DOM, so stacked layouts show the image first. */

.pair {
  row-gap: var(--esp-6);
}

.pair__media,
.pair__text {
  grid-column: 1 / -1;
}

.pair__text {
  gap: var(--esp-4);
}

/* 4:3 when stacked, 3:2 from 768 (Investigación) */
@media (min-width: 768px) {
  .ratio-3-2-md {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 1024px) {
  .pair {
    align-items: center;
  }

  .pair--image-right .pair__text  { grid-column: 1 / span 4; grid-row: 1; }
  .pair--image-right .pair__media { grid-column: 5 / span 4; grid-row: 1; }

  .pair--image-left .pair__media { grid-column: 1 / span 4; grid-row: 1; }
  .pair--image-left .pair__text  { grid-column: 5 / span 4; grid-row: 1; }
}

@media (min-width: 1280px) {
  .pair--image-right .pair__text  { grid-column: 1 / span 6; }
  .pair--image-right .pair__media { grid-column: 8 / span 5; }

  .pair--image-left .pair__media { grid-column: 1 / span 6; }
  .pair--image-left .pair__text  { grid-column: 7 / span 6; }
}

/* ==========================================================================
   Equipos (equipos.html), plan §8: quieter, rectilinear register
   ========================================================================== */

/* Section padding ×1.25 the marketing pages' padding. */
.band--eq > .container {
  padding-block: var(--banda-pad-y-eq);
}

/* 1px hairline across the container width, between the two lines. */
.rule {
  margin: 0;
  border: 0;
  border-top: var(--linea) solid var(--color-linea);
}

/* ==========================================================================
   Contacto (contacto.html), plan §8 and §10
   ========================================================================== */

.contact__grid {
  row-gap: var(--esp-8);
}

.contact__info,
.contact__form {
  grid-column: 1 / -1;
}

.contact__info {
  display: grid;
  align-content: start;
  gap: var(--esp-6);
}

@media (min-width: 1024px) {
  .contact__info { grid-column: 1 / span 3; }
  .contact__form { grid-column: 4 / span 5; }
}

@media (min-width: 1280px) {
  .contact__info { grid-column: 1 / span 4; }
  .contact__form { grid-column: 6 / span 7; }
}

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

.form {
  display: grid;
  gap: var(--esp-5);
}

.field {
  display: grid;
  gap: var(--esp-2);
}

.field__label {
  font-weight: var(--peso-semi);
  font-size: var(--texto-ui);
  line-height: var(--interlinea-ui);
}

.field__optional {
  font-weight: var(--peso-regular);
}

.field__control {
  display: block;
  width: 100%;
  min-height: var(--campo-alto-min);
  margin: 0;
  padding: var(--campo-pad-y) var(--campo-pad-x);
  border: var(--borde-campo) solid var(--negro);
  border-radius: var(--radio-campo);
  background-color: var(--blanco);
  color: var(--negro);
  font-size: var(--texto-cuerpo);
  line-height: var(--interlinea-ui);
}

.field__control--select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: calc(var(--campo-pad-x) * 2 + var(--campo-flecha-ancho));
  background-image: var(--campo-flecha);
  background-repeat: no-repeat;
  background-position: right var(--campo-pad-x) center;
  background-size: var(--campo-flecha-ancho) var(--campo-flecha-alto);
}

.field__control--textarea {
  resize: vertical;
  line-height: var(--interlinea-cuerpo);
}

.field__control[aria-invalid="true"] {
  border-color: var(--tinta-roja);
}

.field__error {
  color: var(--tinta-roja);
  font-size: var(--texto-pequeno);
  line-height: var(--interlinea-pequeno);
}

.form__actions {
  display: grid;
  justify-items: start;
  gap: var(--esp-4);
  margin-block-start: var(--esp-2);
}

.form__submit {
  justify-self: stretch;
}

.form__submit:disabled {
  cursor: progress;
}

@media (min-width: 480px) {
  .form__submit {
    justify-self: start;
  }
}

/* Status regions stay rendered at all times (live regions must not be
   display:none before they're filled); empty ones collapse to zero height. */
.form__messages {
  width: 100%;
}

.form__status {
  font-weight: var(--peso-semi);
  max-width: var(--medida-texto);
}

.form__status--error {
  color: var(--tinta-roja);
}

/* §12 motion moment 2: message fade-in */
.form__status.is-shown {
  animation: status-in var(--dur-mensaje) ease-out;
}

@keyframes status-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Aviso de privacidad (aviso-de-privacidad.html): plain, single column
   ========================================================================== */

.legal-page > .container {
  padding-block: var(--banda-pad-y);
}

.legal {
  max-width: var(--medida-texto);
}

.legal h1 {
  margin-block-end: var(--esp-6);
}

.legal h2 {
  margin-block: var(--esp-6) var(--esp-2);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-bold);
  font-size: var(--texto-h3);
  line-height: var(--interlinea-h3);
  letter-spacing: 0;
}

.legal p + p {
  margin-block-start: var(--esp-4);
}

.legal__updated {
  margin-block-start: var(--esp-7);
  font-size: var(--texto-pequeno);
  line-height: var(--interlinea-pequeno);
}

/* ==========================================================================
   Nosotros (nosotros.html), plan §8 / amendment 8
   ========================================================================== */

/* ---------- Misión y visión ---------- */

.about-pair {
  row-gap: var(--esp-7);
}

.about-pair__item {
  grid-column: 1 / -1;
  gap: var(--esp-4);
}

@media (min-width: 1024px) {
  .about-pair__item:nth-child(1) { grid-column: 1 / span 4; }
  .about-pair__item:nth-child(2) { grid-column: 5 / span 4; }
}

@media (min-width: 1280px) {
  .about-pair__item:nth-child(1) { grid-column: 1 / span 6; }
  .about-pair__item:nth-child(2) { grid-column: 7 / span 6; }
}

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

.about-ways__title {
  margin-block-end: var(--esp-7);
}

.about-ways {
  row-gap: var(--esp-7);
}

.about-ways > * {
  grid-column: 1 / -1;
}

/* 8 columns: 2 + 1, third item under the first */
@media (min-width: 1024px) {
  .about-ways > :nth-child(1) { grid-column: 1 / span 4; }
  .about-ways > :nth-child(2) { grid-column: 5 / span 4; }
  .about-ways > :nth-child(3) { grid-column: 1 / span 4; }
}

@media (min-width: 1280px) {
  .about-ways > :nth-child(1) { grid-column: 1 / span 4; }
  .about-ways > :nth-child(2) { grid-column: 5 / span 4; }
  .about-ways > :nth-child(3) { grid-column: 9 / span 4; }
}