/* ==========================================================================
   Protein Partners — estilos del tema
   --------------------------------------------------------------------------
   1. Base (escritorio 1440): valores del archivo de Illustrator
      "ProteinPartners Landing_Web OK.ai" (artboard 1440 × 6300). Las pequeñas
      diferencias entre elementos repetidos del .ai se replican por posición
      (nth-child) para que la versión de escritorio calce con el diseño.
   2. Responsive (propuesta, a validar con la clienta): ≤1439 laptop,
      ≤1199 menú móvil, ≤1023 tablet, ≤767 móvil.
   ========================================================================== */

/* ---------- Gotham ---------- */
@font-face { font-family: "Gotham"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/Gotham-Light.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/Gotham-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Gotham-Book.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Gotham-Medium.woff2") format("woff2"); }
/* Bold y Black: versión OTF (con kerning). Métricas verticales fijadas a las de la versión TTF
   para que el interlineado calce con el .ai. */
@font-face { font-family: "Gotham"; font-weight: 700; font-style: normal; font-display: swap; ascent-override: 73%; descent-override: 16%; line-gap-override: 0%; src: url("../fonts/Gotham-Bold.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-weight: 900; font-style: normal; font-display: swap; ascent-override: 73%; descent-override: 16%; line-gap-override: 0%; src: url("../fonts/Gotham-Black.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --font: "Gotham", sans-serif;

  --blue: #0033a1;          /* Pantone 286 C */
  --blue-button: #4a5fb9;
  --beige-7530: #a49483;    /* Pantone 7530 C */
  --beige-7529: #b7a99a;    /* Pantone 7529 C */
  --beige-7528: #c6b9ad;    /* Pantone 7528 C */
  --red: #a72b16;
  --cream: #f1edea;
  --sand: #d4cac1;
  --white: #ffffff;
  --hero-text: #efefef;

  --overlay-blue: rgba(0, 51, 161, 0.65);
  --shadow: 9px 8.5px 16.4px rgba(0, 0, 0, 0.5); /* Sombra Illustrator: Multiplicar 50 %, X 9 / Y 8.5, desenfoque 8.2 */

  --page: 1440px;
  --gutter: 110px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Resets con :where() (especificidad 0) para que no pisen las clases del diseño */
:where(.pp-home, .pp-header) :where(h1, h2, h3, p, figure, address) { margin: 0; }
:where(.pp-home) address { font-style: normal; }
:where(.pp-home, .pp-header) img { display: block; max-width: none; height: auto; }
:where(.pp-home, .pp-header) a { color: inherit; text-decoration: none; }

/* En el .ai estos textos usan la versión TrueType de Gotham, que no trae kerning */
.site-nav a,
.product-card__title,
.quote-card__title,
.market-tile__label,
.contact__title,
.btn { font-kerning: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  z-index: 100000;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 20px;
  background: var(--white);
  color: var(--blue);
  font-weight: 700;
}

:focus-visible { outline: 2px solid var(--beige-7528); outline-offset: 3px; }

.pp-container {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Wrappers de GeneratePress en la portada */
.pp-home .site,
.pp-home .site-content { display: block; max-width: none; margin: 0; padding: 0; }

/* ---------- Barra de color (header y footer) ---------- */
.color-bar { display: flex; height: 20px; }
.color-bar span { flex: 1; }
.color-bar span:nth-child(1) { background: #0033a1; }
.color-bar span:nth-child(2) { background: #4066b8; } /* 286 C al 75 % */
.color-bar span:nth-child(3) { background: #7f98cf; } /* 286 C al 50 % */
.color-bar span:nth-child(4) { background: #bfcbe7; } /* 286 C al 25 % */
.color-bar span:nth-child(5) { background: #a49483; }
.color-bar span:nth-child(6) { background: #b7a99a; }
.color-bar span:nth-child(7) { background: #c6b9ad; }
.color-bar span:nth-child(8) { background: #d4cac1; } /* 7528 C al 75 % */
.color-bar span:nth-child(9) { background: #e2dbd5; } /* 7528 C al 50 % */

/* ---------- Eyebrows (títulos de banda) ---------- */
.eyebrow {
  font-weight: 700;
  font-size: 18px;
  line-height: 21.6px;
  letter-spacing: 0.12em;
}
.eyebrow--beige { color: var(--beige-7530); }
.eyebrow--sand { color: var(--beige-7528); }
.eyebrow--white { color: var(--white); }
.eyebrow--blue { color: var(--blue); font-weight: 900; line-height: 26px; }
.eyebrow--center { text-align: center; }

.band { height: 100px; }
.band--blue { background: var(--blue); }

/* ---------- Botones ---------- */
.btn,
.btn:hover,
.btn:focus {
  display: block;
  border: 0;
  border-radius: 0;
  background: var(--blue-button);
  box-shadow: var(--shadow);
  color: var(--white);
  font-family: var(--font);
  font-weight: 500;
  font-size: 21px;
  line-height: 25.2px;
  text-align: center;
  cursor: pointer;
}
.btn { transition: background-color 0.2s ease; }
.btn:hover { background: #3d51a8; }
.btn:disabled { opacity: 0.6; cursor: wait; }

/* ==========================================================================
   Header
   ========================================================================== */
.pp-header { position: relative; z-index: 50; background: var(--blue); }

.pp-header__inner {
  position: relative;
  max-width: var(--page);
  height: 180px;
  margin: 0 auto;
}

.pp-header__logo { position: absolute; top: 47.34px; left: 108.97px; }
.pp-header__logo img { width: 370.77px; height: 94.59px; object-fit: contain; object-position: left center; }

.pp-header__toggle { display: none; }

.site-nav { position: absolute; left: 640.89px; bottom: 36.33px; }
.site-nav__list { display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.site-nav__list > li { width: 160px; }
.site-nav__list > li:nth-child(1) { width: 158.04px; }
.site-nav__list > li:nth-child(2) { width: 159.7px; }
.site-nav__list > li:nth-child(3) { width: 160.5px; }
.site-nav__list > li:nth-child(4) { width: 160.68px; position: relative; top: 1.02px; } /* en el .ai "NUESTRO MERCADO" está 1 px más abajo */
.site-nav a {
  display: block;
  color: var(--white);
  font-weight: 700;
  font-size: 17.25px;
  line-height: 20.2px;
  letter-spacing: -0.025em;
  transition: color 0.2s ease;
}
.site-nav a:hover { color: var(--beige-7528); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 550px; /* pedido: header + hero entran en una pantalla de laptop (el .ai tiene 700) */
  overflow: hidden;
  background: var(--blue);
}

.hero__img {
  position: absolute;
  /* Encuadre del .ai escalado a 550/700 */
  top: -2.44px;
  left: calc(50% - 783.9px);
  width: 1544.2px;
  height: 564.6px;
  max-width: none;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--overlay-blue);
  clip-path: polygon(0 0, calc(50% - 157.5px) 0, calc(50% + 82.1px) 100%, 0 100%);
}

.hero .pp-container { position: relative; z-index: 2; width: 100%; padding-bottom: 91.79px; }

.hero__title {
  margin-left: -0.53px;
  color: var(--hero-text);
  font-weight: 400;
  font-size: 48px;
  line-height: 57.6px;
}

/* ==========================================================================
   Sobre nosotros
   ========================================================================== */
.about { background: var(--cream); }
.about .band { height: 100.3px; padding-top: 41.42px; }
.about .eyebrow { margin-left: 0.53px; }

.about__body {
  position: relative;
  max-width: var(--page);
  height: 799.7px;
  margin: 0 auto;
}
.about__content { padding-top: 47.01px; }

.about__title {
  max-width: 623px;
  font-weight: 900;
  font-size: 26px;
  line-height: 31px;
}

.about__text p {
  margin-left: 1.17px;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
}
.about__text p:nth-child(1) { max-width: 619px; margin-top: 20.12px; }
.about__text p:nth-child(2) { max-width: 623px; margin-top: 26px; }
.about__text p:nth-child(n+3) { max-width: 624px; margin-top: 26px; }

.about__media {
  position: absolute;
  top: 49.5px;
  left: 800px;
  width: 590px;
  height: 699.7px;
  overflow: hidden;
}
.about__media img {
  position: absolute;
  top: -4.9px;
  left: -581.2px;
  width: 1257.2px;
  height: 707.6px;
}

/* Misión / Visión */
.value-cards { display: flex; gap: 34.8px; margin-top: 26.46px; }

.value-card {
  width: 301px;
  height: 251px;
  padding-left: var(--pad-x);
  border: 1px solid var(--beige-7529);
  background: var(--white);
  --pad-x: 16.32px; --icon-top: 20.66px; --icon-x: -3.29px; --fs: 17.91px; --w: 260px;
}
.value-card:nth-child(2) { --pad-x: 19.08px; --icon-top: 18.19px; --icon-x: -0.81px; --fs: 18px; --w: 240px; }

.value-card__icon { height: 84.6px; padding-top: var(--icon-top); margin-left: var(--icon-x); color: var(--blue); }
.value-card--vision .value-card__icon { color: #08378c; }
.value-card__icon img { width: 56px; height: 50px; object-fit: contain; }

.value-card__title {
  font-weight: 700;
  font-size: var(--fs);
  line-height: 25px;
}

.value-card__text {
  max-width: var(--w);
  margin-top: -0.47px;
  font-weight: 300;
  font-size: var(--fs);
  line-height: 25px;
}

/* ==========================================================================
   Cadena de valor
   ========================================================================== */
.value-chain {
  height: 897.5px;
  background: var(--blue);
  color: var(--white);
}
.value-chain .pp-container { padding-top: 37.71px; }
.value-chain .eyebrow { margin-left: 1.32px; }

.value-chain__title {
  margin: 71.83px 0 0 2.27px;
  font-weight: 700;
  font-size: 36px;
  line-height: 43.2px;
}

.value-chain__text p {
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
}
.value-chain__text p:nth-child(1) { max-width: 1183px; margin-top: 22.77px; }
.value-chain__text p:nth-child(n+2) { max-width: 1198px; margin-top: 30px; }

.steps {
  display: grid;
  grid-template-columns: repeat(6, 201.81px);
  column-gap: 1.93px;
  margin: 92.67px 0 0 -0.81px;
  padding: 0;
  list-style: none;
}

.step__icon {
  display: flex;
  align-items: flex-end;
  height: 67.9px;
  margin-bottom: 29.64px;
  padding-left: 9.15px;
  color: var(--white);
}
.step__icon img { max-height: 67.9px; width: auto; }

.step__body {
  height: 250.5px;
  padding: 7.96px 0 0 9.64px;
  border-top: 1px solid var(--beige-7529);
  border-left: 1px solid var(--beige-7529);
}

.step__number {
  display: block;
  font-weight: 300;
  font-style: italic;
  font-size: 24px;
  line-height: 28.8px;
}

.step__title {
  height: 85.3px;
  margin-top: 21.88px;
  font-weight: 700;
  font-size: 21px;
  line-height: 25.2px;
}

.step__text {
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
}

/* ==========================================================================
   Nuestros productos
   ========================================================================== */
.products {
  min-height: 1801.8px;
  padding-bottom: 47.5px;
  background: var(--sand);
}

.band--fish {
  padding-top: 41.1px;
  background:
    linear-gradient(var(--overlay-blue), var(--overlay-blue)),
    var(--band-img, none) center -739.3px / 1440px 956.2px no-repeat,
    var(--blue);
}
.band--fish .eyebrow { margin-left: 1.05px; }

/* Columnas en x 110.1 / 528.9 / 949.8 como en el .ai (separaciones 38.8 y 40.9) */
.product-grid {
  display: grid;
  grid-template-columns: 418.8px 420.9px 380px;
  justify-items: start;
  row-gap: 50px;
  padding-top: 52.6px;
}
.product-grid > * { width: 380px; }

.product-card {
  height: 500px;
  background: var(--cream);
  box-shadow: var(--shadow);
  --head-h: 93.95px;
  --title-x: 15.85px;
  --desc-x: 15.85px;
}
/* Ajustes por posición tomados del .ai */
.product-card:nth-child(-n+3) { --head-h: 96.36px; }
.product-card:nth-child(3),
.product-card:nth-child(6) { --desc-x: 17.81px; }
.product-card:nth-child(7) { --title-x: 18.31px; --desc-x: 20.33px; margin-left: -0.7px; }
.product-grid > :nth-child(n+7) { margin-top: 1.7px; }

.product-card__img {
  width: 100%;
  height: 215px;
  object-fit: cover;
}

.product-card__head {
  min-height: var(--head-h);
  margin-top: 22.05px;
  padding: 0 12px 0 var(--title-x);
}

.product-card__title {
  font-weight: 700;
  font-size: 23px;
  line-height: 27px;
  text-transform: uppercase;
}
.product-card__spec { display: block; color: var(--red); text-transform: none; }

.product-card__note {
  margin-top: -1.04px;
  color: var(--red);
  font-weight: 400;
  font-size: 23px;
  line-height: 27px;
}

.product-card__text {
  padding: 0 12px 0 var(--desc-x);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}

/* Tarjeta "¿Necesitas una especificación a medida?" */
.quote-card {
  position: relative;
  height: 500px;
  margin-left: 2.8px;
  padding: 40.11px 0 0 17.86px;
  background: var(--blue);
  box-shadow: var(--shadow);
  color: var(--white);
}

.quote-card__title {
  max-width: 292px;
  font-weight: 900;
  font-size: 18px;
  line-height: 26px;
}

.quote-card__text {
  max-width: 266px;
  margin-top: 24.55px;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}

.quote-card__button {
  position: absolute;
  top: 416.4px;
  left: 37.2px;
  width: 300px;
  height: 50px;
  padding-top: 13.73px;
}

/* ==========================================================================
   Nuestro mercado
   ========================================================================== */
.market {
  height: 900.7px;
  background: var(--white);
}
.market .band { padding-top: 41.64px; }
.market .eyebrow { padding-left: 5.48px; } /* el .ai no la centra exacto: x 610.26 */

.market__tiles { display: grid; grid-template-columns: repeat(3, 1fr); }

.market-tile { position: relative; height: 320px; overflow: hidden; }
.market-tile img { width: 100%; height: 100%; object-fit: cover; }

.market-tile__label {
  position: absolute;
  bottom: 32.92px;
  right: calc(-1 * var(--dx, 0px));
  left: var(--dx, 0px); /* el .ai no centra exacto cada rótulo */
  color: var(--white);
  font-weight: 900;
  font-size: 24px;
  line-height: 28.8px;
  text-align: center;
}
.market-tile:nth-child(1) { --dx: 2.09px; }
.market-tile:nth-child(2) { --dx: -1.05px; }
.market-tile:nth-child(3) { --dx: -1.01px; }

.market__body { padding-top: 64.18px; }

.market__item + .market__item { margin-top: 57.92px; }
.market__item:nth-child(1) { --w: 1248px; }
.market__item:nth-child(2) { --w: 1199px; }
.market__item:nth-child(3) { --w: 1233px; }

.market__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
}

.market__text {
  width: var(--w, auto); /* en el .ai el texto sobrepasa un poco el margen derecho */
  margin-top: -1.91px;
}
.market__text p {
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
}
.market__text p + p { margin-top: 1em; }
.market__text strong { font-weight: 700; line-height: 0; } /* evita que el Bold agrande la línea */

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact {
  height: 880px;
  background:
    linear-gradient(var(--overlay-blue), var(--overlay-blue)),
    var(--contact-img, none) center -41px / 1672px 941px no-repeat,
    var(--blue);
  color: var(--white);
}
.contact .pp-container { padding-top: 97.08px; }

.contact__title {
  font-weight: 900;
  font-size: 45px;
  line-height: 54px;
}

.contact__subtitle {
  margin: 40.02px 0 0 2.36px;
  font-weight: 700;
  font-size: 24px;
  line-height: 28.8px;
}

.contact-form {
  display: grid;
  grid-template-columns: 690.3px 518.2px;
  column-gap: 11.5px;
  row-gap: 18.02px; /* 22.53 del .ai menos los 4 px agregados entre label e input */
  margin: 37.21px 0 0 0.5px;
}

.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { position: relative; }

.field label {
  display: block;
  font-weight: 300;
  font-size: 23px;
  line-height: 27.6px;
}

/* Estado de escritura no definido en el .ai: hereda el estilo del label */
.contact .field input,
.contact .field textarea {
  display: block;
  width: 100%;
  height: 52.9px;
  margin-top: 4px; /* pedido: 4 px entre label e input (el .ai no tiene separación) */
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  color: var(--white);
  font: inherit;
  font-weight: 300;
  font-size: 23px;
  line-height: normal;
  box-shadow: none;
  transition: background-color 0.2s ease;
}
.contact .field input:focus,
.contact .field textarea:focus { background: rgba(255, 255, 255, 0.62); outline: 2px solid var(--white); outline-offset: 0; }
.contact .field [aria-invalid="true"] { outline: 2px solid #ffb4a6; outline-offset: 0; }

.field--full { grid-column: 1 / -1; }
.contact .field textarea { height: 167px; margin-top: 4px; padding-top: 12px; resize: vertical; }

.field__error {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 3px;
  color: #ffd2c9;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
}
.field__error:empty { display: none; }

.contact-form__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 0.97px; /* 23.5 px bajo el textarea */
}

.contact-form__status { flex: 1; padding-top: 14px; font-size: 18px; line-height: 24px; }
.form-status { margin: 0; font-weight: 700; }
.form-status--error { color: #ffd2c9; }

.contact-form__submit {
  flex: none;
  width: 150.1px;
  height: 52.9px;
  padding: 16.94px 0 10.76px; /* <button> centra su contenido: padding inferior = alto - superior - interlineado */
}

.contacts {
  display: grid;
  grid-template-columns: 369.76px auto;
  margin: 24.67px 0 0 0.53px; /* compensa los 4 px del textarea */
}

.contacts__name {
  display: block;
  font-weight: 700;
  font-size: 19px;
  line-height: 22.8px;
}

.contacts__lines {
  display: block;
  margin-top: -0.48px;
  font-weight: 300;
  font-size: 19px;
  line-height: 22.8px;
}
.contacts__lines a:hover { text-decoration: underline; }

/* ==========================================================================
   Páginas interiores (Política de privacidad, etc.)
   ========================================================================== */
body:not(.pp-home) .site-content { padding-top: 60px; padding-bottom: 80px; }
body:not(.pp-home) .entry-title { color: var(--blue); font-weight: 900; }

/* Pantallas más anchas que el diseño: la foto del hero cubre todo el ancho */
@media (min-width: 1440.02px) {
  .hero__img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .band--fish { background-size: auto, cover, auto; background-position: 0 0, center 77%, 0 0; }
  .contact { background-size: auto, cover, auto; background-position: 0 0, center 45%, 0 0; }
}

/* ==========================================================================
   RESPONSIVE — propuesta (el .ai solo define 1440 px)
   ========================================================================== */

/* ---------- ≤1439: laptop. Misma composición, medidas fluidas ---------- */
@media (max-width: 1439.98px) {
  :root { --gutter: clamp(20px, 7.64vw, 110px); }

  .pp-header__logo { left: var(--gutter); }
  .pp-header__logo img { width: clamp(220px, 25.75vw, 370.77px); height: auto; }
  .site-nav { left: auto; right: var(--gutter); } /* mismo margen que el logo */
  .site-nav__list > li,
  .site-nav__list > li:nth-child(n) { width: clamp(118px, 11.1vw, 160px); top: 0; }
  .site-nav__list > li:last-child { width: auto; }

  .hero { height: clamp(420px, 38.2vw, 550px); }
  .hero__img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
  .hero::before { clip-path: polygon(0 0, 39% 0, 55.7% 100%, 0 100%); }
  .hero .pp-container { padding-bottom: clamp(48px, 6.37vw, 91.79px); }
  .hero__title { margin-left: 0; font-size: clamp(30px, 3.33vw, 48px); line-height: 1.2; }

  .about__body { display: flex; height: auto; }
  .about__content { flex: 1; min-width: 0; margin: 0; padding: 47px 4vw 56px var(--gutter); }
  .about__title { max-width: 640px; font-size: clamp(21px, 1.81vw, 26px); line-height: 1.19; }
  .about__text p,
  .about__text p:nth-child(n) { max-width: 640px; margin-left: 0; }
  .about__text br { display: none; }
  .about__media { position: relative; top: auto; left: auto; flex: 0 0 41%; height: auto; margin: 49.5px 3.5vw 50.5px 0; }
  .about__media img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
  .value-cards { gap: 2.4vw; }
  .value-card,
  .value-card:nth-child(n) { flex: 1; width: auto; min-width: 0; height: auto; min-height: 251px; padding: 0 16px 20px 18px; }
  .value-card__icon { margin-left: 0; }

  .value-chain { height: auto; padding-bottom: 56px; }
  .value-chain__title { margin-left: 0; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; }
  .value-chain__text p,
  .value-chain__text p:nth-child(n) { max-width: none; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.25; }
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 2px; margin-left: 0; }
  .step__body { height: auto; min-height: 250px; padding-right: 8px; padding-bottom: 24px; }
  .step__title { height: auto; min-height: 85.3px; font-size: clamp(12.5px, calc(1.4vw - 1.5px), 21px); line-height: 1.2; } /* "FINANCIAMIENTO" siempre entra en su columna */
  .step__text { font-size: clamp(14px, 1.11vw, 16px); line-height: 1.375; }

  .products { min-height: 0; padding-bottom: 72px; }
  .band--fish { background-position: 0 0, center 70%, 0 0; background-size: auto, cover, auto; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.78vw; row-gap: 3.5vw; justify-items: stretch; }
  .product-grid > *,
  .product-grid > :nth-child(n) { width: auto; margin: 0; }
  .product-card { display: flex; flex-direction: column; height: auto; min-height: 500px; padding-bottom: 28px; }
  .product-card:nth-child(n) { --title-x: 16px; --desc-x: 16px; --head-h: 0px; }
  .product-card__img { height: auto; aspect-ratio: 380 / 215; }
  .product-card__head { min-height: 0; margin-bottom: 16px; }
  .product-card__title { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.17; }
  .product-card__note { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.17; }
  .product-card__text br { display: none; }
  .quote-card { display: flex; flex-direction: column; height: auto; min-height: 500px; padding: 40px 18px 34px; }
  .quote-card__button { position: static; width: 100%; max-width: 300px; height: auto; margin-top: auto; padding: 13.7px 16px 11px; }

  .market { height: auto; padding-bottom: 72px; }
  .market .eyebrow { padding-left: 0; }
  .market-tile { height: clamp(220px, 22.2vw, 320px); }
  .market-tile__label { bottom: clamp(18px, 2.3vw, 32.92px); left: 0; right: 0; padding: 0 12px; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.2; }
  .market__body { padding-top: clamp(40px, 4.46vw, 64.18px); }
  .market__text { width: auto; }
  .market__title,
  .market__text p { font-size: clamp(18px, 1.67vw, 24px); line-height: 1.17; }
  .market__item + .market__item { margin-top: clamp(32px, 4vw, 57.92px); }

  .contact { height: auto; padding-bottom: 52px; background-size: auto, cover, auto; background-position: 0 0, center, 0 0; }
  .contact .pp-container { padding-top: clamp(56px, 6.74vw, 97.08px); }
  .contact__title { font-size: clamp(28px, 3.125vw, 45px); line-height: 1.2; }
  .contact__subtitle { margin: clamp(20px, 2.78vw, 40px) 0 0; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.2; }
  .contact-form { grid-template-columns: minmax(0, 1.332fr) minmax(0, 1fr); margin-left: 0; }
  .field label { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.2; }
  .contact .field input,
  .contact .field textarea { font-size: clamp(17px, 1.6vw, 23px); }
  .contacts { margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(260px, max-content)); column-gap: 7vw; row-gap: 16px; }
}

/* ---------- 1024–1179: escritorio compacto. Misma composición que escritorio, elementos más pequeños ---------- */
@media (max-width: 1179.98px) {
  .pp-header__logo img { width: clamp(200px, 21vw, 248px); }
  .site-nav__list { gap: clamp(26px, 3.2vw, 38px); }
  .site-nav__list > li,
  .site-nav__list > li:nth-child(n),
  .site-nav__list > li:last-child { width: auto; }
  .site-nav a { font-size: clamp(14px, 1.4vw, 17.25px); line-height: 1.17; }

  .about__content { padding-right: 3vw; }
  .value-cards { gap: 16px; }
  .value-card, .value-card:nth-child(n) { --fs: 15.5px; padding: 0 14px 18px 16px; }
  .value-card__title, .value-card__text { line-height: 1.4; }
  .step__body { padding-left: 8px; }
  .step__icon svg { width: auto; height: 54px; }
  .step__text { font-size: 13.5px; }
  .step__text br { display: none; }
}

/* ---------- ≤1023: cadena de valor en 3 columnas y 'Sobre nosotros' apilado ---------- */
@media (max-width: 1023.98px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }

  .about__body { flex-direction: column; }
  .about__content { padding: 40px var(--gutter) 40px; }
  .about__title, .about__text p, .about__text p:nth-child(n) { max-width: 760px; }
  .value-cards { max-width: 760px; }
  .about__media { flex: none; width: auto; height: 50vw; max-height: 560px; margin: 0 var(--gutter) 48px; }
  .about__media img { object-position: 70% center; }
  .about__text br { display: none; }
}

/* ---------- ≤1023: tablet y móvil, menú hamburguesa. Escritorio = 1024 en adelante ---------- */
@media (max-width: 1023.98px) {
  .pp-header__inner { display: flex; align-items: center; justify-content: space-between; height: 104px; padding: 0 var(--gutter); }
  .pp-header__logo { position: static; }
  .pp-header__logo img { width: clamp(180px, 22vw, 260px); }

  .pp-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }
  .pp-menu-open .pp-burger span { opacity: 0; }
  .pp-menu-open .pp-burger::before { transform: translateY(9px) rotate(45deg); }
  .pp-menu-open .pp-burger::after { transform: translateY(-9px) rotate(-45deg); }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    padding: 8px var(--gutter) 32px;
    background: var(--blue);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .pp-menu-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
  .site-nav__list { display: block; }
  .site-nav__list > li,
  .site-nav__list > li:nth-child(n),
  .site-nav__list > li:last-child { width: auto; }
  .site-nav__list > li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .site-nav a { padding: 18px 0; font-size: 18px; line-height: 1.2; letter-spacing: 0.02em; }
  .site-nav a br { display: none; }
}

/* ---------- ≤1023: tablet ---------- */
@media (max-width: 1023.98px) {
  .band { height: auto; padding: 32px 0; }
  .about .band, .band--fish, .market .band { height: auto; padding-top: 32px; padding-bottom: 32px; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
  .product-card, .quote-card { min-height: 0; }
  .quote-card__text { margin-bottom: 32px; }

  .market-tile__label { font-size: 17px; }
}

/* ---------- ≤767: móvil ---------- */
@media (max-width: 767.98px) {
  .pp-header__inner { height: 84px; }
  .pp-header__logo img { width: 190px; }

  .hero { height: auto; min-height: 460px; }
  .hero::before { clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%); }
  .hero__img { object-position: 64% center; }
  .hero__title { font-size: 30px; }
  .hero__title br { display: none; }

  .eyebrow { font-size: 14px; line-height: 1.2; }

  .about__text p { font-size: 17px; line-height: 1.5; }
  .value-cards { flex-direction: column; gap: 16px; }
  .value-card, .value-card:nth-child(n) { min-height: 0; padding-bottom: 24px; --fs: 17px; --w: none; }
  .value-card__icon { height: auto; padding-top: 18px; margin-bottom: 10px; }
  .about__media { height: 72vw; }

  .value-chain__text p, .value-chain__text p:nth-child(n) { font-size: 17px; line-height: 1.45; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; margin-top: 56px; }
  .step__icon { height: 52px; margin-bottom: 18px; padding-left: 8px; }
  .step__icon svg { width: auto; height: 46px; }
  .step__body { min-height: 0; padding-left: 10px; }
  .step__title { min-height: 0; margin-top: 12px; margin-bottom: 10px; font-size: 16px; }
  .step__title br, .step__text br { display: none; }
  .step__text { font-size: 14px; }

  .product-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .product-card, .quote-card { min-height: 0; }
  .product-card__title, .product-card__note { font-size: 20px; }
  .product-card__text { font-size: 15px; }
  .quote-card { padding: 32px 18px; }
  .quote-card__text { margin-bottom: 28px; }
  .quote-card__button { font-size: 18px; }

  .market__tiles { grid-template-columns: minmax(0, 1fr); }
  .market-tile { height: 200px; }
  .market-tile__label { font-size: 20px; }
  .market__title, .market__text p { font-size: 17px; line-height: 1.4; }
  .market__title { font-size: 18px; }
  .market__text { margin-top: 4px; }

  .contact__title { font-size: 28px; }
  .contact-form { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .field label { font-size: 17px; }
  .contact .field input { height: 48px; }
  .contact .field textarea { height: 150px; }
  .contact-form__footer { flex-direction: column-reverse; align-items: stretch; }
  .contact-form__submit { width: 100%; }
  .contacts { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .contacts__name, .contacts__lines { font-size: 16px; line-height: 1.45; }
}

@media (max-width: 479.98px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}


/* Ícono hamburguesa (header principal y barra fija) */
.pp-burger,
.pp-burger::before,
.pp-burger::after,
.pp-burger span { display: block; width: 28px; height: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
.pp-burger { position: relative; background: transparent; }
.pp-burger::before,
.pp-burger::after { content: ""; position: absolute; left: 0; }
.pp-burger::before { top: -9px; }
.pp-burger::after { top: 9px; }

/* ==========================================================================
   Header reducido fijo (.pp-bar)
   Aparece cuando el header principal sale de pantalla. 4 px de barra de color + 72 px azul.
   ========================================================================== */
.pp-bar {
  --bar-h: 72px;
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  background: var(--blue);
  box-shadow: 0 10px 28px -12px rgba(0, 18, 64, 0.55);
  transform: translate3d(0, calc(-100% - 30px), 0);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.pp-bar.is-visible { transform: none; }
.pp-bar .color-bar { height: 4px; }

.admin-bar .pp-bar { top: 32px; }

.pp-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.94vw, 28px); /* todo el header fijo escala con el ancho hasta 1440 */
  max-width: var(--page);
  height: var(--bar-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pp-bar__logo { flex: none; margin-right: auto; }
.pp-bar__logo img { display: block; width: clamp(150px, 12.22vw, 176px); height: auto; }

.pp-bar__list { display: flex; gap: clamp(14px, 1.25vw, 18px); margin: 0; padding: 0; list-style: none; }
.pp-bar__list a {
  position: relative;
  display: block;
  padding: 26px 0;
  color: var(--white);
  font-weight: 700;
  font-size: clamp(11px, 0.833vw, 12px);
  line-height: 20px;
  letter-spacing: 0.045em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
  font-kerning: none;
}
.pp-bar__list a br { display: none; }
/* Indicador de sección: raya beige que crece desde la izquierda */
.pp-bar__list a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  height: 2px;
  background: var(--beige-7528);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pp-bar__list a:hover { color: var(--beige-7528); }
.pp-bar__list a.is-current::after,
.pp-bar__list a:hover::after { transform: scaleX(1); }

.pp-bar__cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: clamp(8px, 0.83vw, 12px);
  height: clamp(38px, 2.92vw, 42px);
  padding: 0 clamp(12px, 1.25vw, 18px) 0 clamp(14px, 1.39vw, 20px);
  background: var(--blue-button);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(11.5px, 0.903vw, 13px);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.pp-bar__cta:hover { background: #5b6fc4; color: var(--white); }
.pp-bar__cta-short { display: none; }
.pp-bar__arrow { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-bar__cta:hover .pp-bar__arrow { transform: translateX(4px); }

.pp-bar__toggle { display: none; }

/* Las anclas no quedan debajo de la barra */
.pp-home :is(#nosotros, #cadena-de-valor, #productos, #mercado, #contacto) { scroll-margin-top: 76px; }


/* 1024–1279: el menú sigue visible, todo más compacto y el botón en versión corta */
@media (max-width: 1279.98px) {
  .pp-bar__inner { gap: 16px; }
  .pp-bar__logo img { width: clamp(118px, 11.5vw, 150px); }
  .pp-bar__list { gap: clamp(10px, 1.1vw, 14px); }
  .pp-bar__list a { font-size: clamp(10.5px, 0.88vw, 11px); letter-spacing: 0.03em; }
  .pp-bar__cta { height: 38px; padding: 0 14px; font-size: 12.5px; }
  .pp-bar__cta-long { display: none; }
  .pp-bar__cta-short { display: inline; }
}

/* ≤1023 (tablet y móvil): logo + COTIZAR + menú desplegable */
@media (max-width: 1023.98px) {
  .pp-bar { --bar-h: 60px; }
  .pp-bar__inner { gap: 16px; }
  .pp-bar__logo img { width: 140px; }
  .pp-bar__cta { height: 38px; padding: 0 14px; font-size: 13px; }
  .pp-bar__cta-long { display: none; }
  .pp-bar__cta-short { display: inline; }
  .pp-bar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px; /* compensa el área táctil: las rayas quedan alineadas al margen */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }
  .pp-bar.is-open .pp-burger span { opacity: 0; }
  .pp-bar.is-open .pp-burger::before { transform: translateY(9px) rotate(45deg); }
  .pp-bar.is-open .pp-burger::after { transform: translateY(-9px) rotate(-45deg); }
  .pp-bar__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 4px var(--gutter) 24px;
    background: var(--blue);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 30px -18px rgba(0, 18, 64, 0.6);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .pp-bar.is-open .pp-bar__nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
  .pp-bar__list { display: block; }
  .pp-bar__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .pp-bar__list a { padding: 16px 0; font-size: 16px; }
  .pp-bar__list a::after { bottom: 10px; width: 28px; }
  .pp-home :is(#nosotros, #cadena-de-valor, #productos, #mercado, #contacto) { scroll-margin-top: 64px; }
}

@media (max-width: 782px) { .admin-bar .pp-bar { top: 46px; } }
@media (max-width: 600px) { .admin-bar .pp-bar { top: 0; } }

/* ==========================================================================
   ANIMACIONES (controladas por el scroll)
   - main.js calcula --p (0→1) según la posición de cada bloque en pantalla:
     al bajar avanzan, al subir retroceden.
   - En .step y .value-card también --pi: progreso del dibujo del ícono.
   - Solo con JS y sin "reducir movimiento" (.pp-anim en <html>).
   - En --p = 1 todo queda igual al diseño: opacity 1, sin transformaciones.
   ========================================================================== */
:root { --ease-out: cubic-bezier(0.2, 0.65, 0.2, 1); }

.pp-anim :is(
  .about .eyebrow, .about__title, .about__text p, .value-card,
  .value-chain .eyebrow, .value-chain__title, .value-chain__text p, .step,
  .products .eyebrow, .product-card, .quote-card,
  .market .eyebrow, .market__item,
  .contact__title, .contact__subtitle, .contact-form .field, .contact-form__footer, .contacts__person
) {
  --q: clamp(0, var(--p, 0), 1);
  opacity: var(--q);
  transform: translate3d(0, calc((1 - var(--q)) * 40px), 0);
  transition: opacity 0.2s linear, transform 0.2s linear, translate 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

/* Fotos: los sectores aparecen con zoom, "Sobre nosotros" se descubre de abajo hacia arriba */
.pp-anim .market-tile { --q: clamp(0, var(--p, 0), 1); opacity: var(--q); transition: opacity 0.2s linear; }
.pp-anim .market-tile img { transform: scale(calc(1 + (1 - var(--q)) * 0.14)); transition: transform 0.2s linear, scale 0.8s var(--ease-out); }
.pp-anim .about__media { --q: clamp(0, var(--p, 0), 1); }
.pp-anim .about__media img {
  clip-path: inset(calc((1 - var(--q)) * 100%) 0 0 0);
  transform: scale(calc(1 + (1 - var(--q)) * 0.12));
  transition: clip-path 0.2s linear, transform 0.2s linear;
}

/* Si el JS no llega a cargar, se muestra todo */
.pp-anim-fallback:not(.pp-anim-ready) :is(.about .eyebrow, .about__title, .about__text p, .value-card, .about__media, .value-chain .eyebrow, .value-chain__title, .value-chain__text p, .step, .products .eyebrow, .product-card, .quote-card, .market .eyebrow, .market-tile, .market__item, .contact__title, .contact__subtitle, .contact-form .field, .contact-form__footer, .contacts__person) {
  --p: 1 !important; --pi: 1 !important;
}

/* ---------- Hero (al cargar) ---------- */
.pp-anim .hero__img { animation: pp-settle 2.2s var(--ease-out) both; }
.pp-anim .hero::before { animation: pp-wipe 1.3s var(--ease-out) 0.15s both; }
.pp-anim .hero__title { animation: pp-rise 1.1s var(--ease-out) 0.55s both; }

@keyframes pp-settle { from { transform: scale(1.07); } }
@keyframes pp-wipe { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
@keyframes pp-rise { from { opacity: 0; transform: translate3d(0, 32px, 0); } }

/* ---------- Hover ---------- */
@media (hover: hover) {
  .product-card { overflow: hidden; }
  .product-card__img { transition: scale 0.8s var(--ease-out); }
  .product-card:hover { translate: 0 -6px; box-shadow: 12px 16px 24px rgba(0, 0, 0, 0.42); }
  .product-card:hover .product-card__img { scale: 1.05; }
  .market-tile:hover img { scale: 1.05; }
  .quote-card:hover { translate: 0 -6px; }
}

/* ---------- Íconos SVG: cada pieza avanza en su tramo (--s inicio, --l largo) del progreso --pi ---------- */
.pp-icon :is(.i-pin, .i-truck, .i-box, .i-knob, .i-bar) { transform-box: fill-box; }

.pp-anim :is(.step, .value-card) .pp-icon * {
  --t: clamp(0, (var(--pi, 0) - var(--s, 0)) / var(--l, 0.55), 1);
}
.pp-anim :is(.step, .value-card) :is(.i-draw, .i-dot, .i-check, .i-dash, .i-edge, .i-trend, .i-wheel) {
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1.01 * (1 - var(--t)));
  transition: stroke-dashoffset 0.15s linear;
}

/* 01 Ubicación: el pin se dibuja y cae en su lugar; luego el punto */
.pp-icon--ubicacion .i-dot { --s: 0.45; --l: 0.4; }
.pp-anim .step .i-pin { --s: 0.15; --l: 0.6; transform: translateY(calc((1 - var(--t)) * -14px)); transition: transform 0.15s linear; }

/* 02 Muestreo: tablero, clip y los checks uno tras otro */
.pp-icon--muestreo .i-clip { --s: 0.2; --l: 0.3; }
.pp-icon--muestreo .i-check--1 { --s: 0.42; --l: 0.22; }
.pp-icon--muestreo .i-dash--1 { --s: 0.58; --l: 0.16; }
.pp-icon--muestreo .i-check--2 { --s: 0.66; --l: 0.22; }
.pp-icon--muestreo .i-dash--2 { --s: 0.82; --l: 0.16; }

/* 03 Logística: el camión avanza mientras se dibuja; luego las ruedas */
.pp-icon--logistica .i-cab { --s: 0.2; --l: 0.4; }
.pp-icon--logistica .i-wheel { --s: 0.5; --l: 0.4; }
.pp-anim .step .i-truck { --s: 0; --l: 0.85; transform: translateX(calc((1 - var(--t)) * -26px)); transition: transform 0.15s linear; }

/* 04 Preparación: líneas y perillas que se deslizan a su posición */
.pp-icon--preparacion .i-knob--1 { --s: 0.25; --x: 26px; }
.pp-icon--preparacion .i-knob--2 { --s: 0.37; --x: -28px; }
.pp-icon--preparacion .i-knob--3 { --s: 0.49; --x: 22px; }
.pp-anim .step .i-knob { --l: 0.45; opacity: var(--t); transform: translateX(calc((1 - var(--t)) * var(--x))); transition: transform 0.15s linear, opacity 0.15s linear; }

/* 05 Lotes: contorno y aristas interiores */
.pp-icon--lotes .i-edge { --s: 0.45; --l: 0.35; }
.pp-icon--lotes .i-edge--v { --s: 0.62; --l: 0.3; }

/* 06 Venta: base, barras que crecen en escalera y línea de tendencia */
.pp-icon--venta .i-draw { --l: 0.3; }
.pp-icon--venta .i-bar--1 { --s: 0.18; }
.pp-icon--venta .i-bar--2 { --s: 0.26; }
.pp-icon--venta .i-bar--3 { --s: 0.34; }
.pp-icon--venta .i-bar--4 { --s: 0.42; }
.pp-anim .step .i-bar { --l: 0.3; transform-origin: 50% 100%; transform: scaleY(var(--t)); transition: transform 0.15s linear; }
.pp-icon--venta .i-trend { --s: 0.6; --l: 0.4; }

/* Hover (cuando el ícono ya está completo): cada uno repite un gesto corto */
@media (hover: hover) {
  .step.is-done:hover .i-pin { animation: pp-hop 0.7s var(--ease-out); }
  .step.is-done:hover .i-check { animation: pp-redraw 0.6s var(--ease-out); }
  .step.is-done:hover .i-check--2 { animation-delay: 0.15s; }
  .step.is-done:hover .i-truck { animation: pp-drive 0.9s var(--ease-out); }
  .step.is-done:hover .i-knob--1 { animation: pp-slide 0.9s var(--ease-out); --x: 10px; }
  .step.is-done:hover .i-knob--2 { animation: pp-slide 0.9s var(--ease-out) 0.08s; --x: -12px; }
  .step.is-done:hover .i-knob--3 { animation: pp-slide 0.9s var(--ease-out) 0.16s; --x: 9px; }
  .step.is-done:hover .i-box { animation: pp-hop 0.7s var(--ease-out); }
  .step.is-done:hover .i-bar { animation: pp-grow 0.7s var(--ease-out); }
  .step.is-done:hover .i-bar--2 { animation-delay: 0.06s; }
  .step.is-done:hover .i-bar--3 { animation-delay: 0.12s; }
  .step.is-done:hover .i-bar--4 { animation-delay: 0.18s; }
}
@keyframes pp-hop { 40% { transform: translateY(-6px); } }
@keyframes pp-redraw { 0% { stroke-dashoffset: 1.01; } }
@keyframes pp-drive { 35% { transform: translateX(6px); } 60% { transform: translateX(-2px); } }
@keyframes pp-slide { 45% { transform: translateX(var(--x)); } }
@keyframes pp-grow { 0% { transform: scaleY(0.55); } }

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