:root {
  --amm-black: #111111;
  --amm-white: #ffffff;
  --amm-surface: #f4f4f2;
  --amm-muted: #656565;
  --amm-line: #d9d9d5;
  --amm-yellow: #ffc72c;
  --amm-red: #c61f2b;
  --am-withmory-red: #c8202f;
  --amm-container: 1280px;
  --amm-radius: 4px;
  --amm-header-height: 72px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body.asianmotor-minimal-body,
body.amm-preview-body {
  margin: 0;
  color: var(--amm-black);
  background: var(--amm-white);
}

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

/* min-height + flex column so short pages (e.g. Repuestos y posventa)
   still push the footer to the bottom of the viewport instead of
   leaving a gap under it, while pages with enough content to already
   exceed the viewport behave exactly as before — flex-basis: auto on
   main just means "at least your natural content height", it never
   caps it. Scoped to .amm-site (the plugin's own root wrapper on every
   page template) so this can't touch the theme or any other plugin's
   markup. dvh falls back cleanly to vh in browsers that don't support
   it yet (vh is set first, dvh right after only overrides where
   supported). */
.amm-site {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow-x: clip;
  color: var(--amm-black);
  background: var(--amm-white);
  font-family: Montserrat, Inter, Aptos, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

.amm-site > main {
  flex: 1 0 auto;
}

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

.amm-site img {
  display: block;
  max-width: 100%;
}

.amm-site a {
  color: inherit;
}

.amm-site :focus-visible {
  outline: 3px solid var(--amm-yellow);
  outline-offset: 4px;
}

.amm-site h1,
.amm-site h2,
.amm-site p {
  margin-top: 0;
}

.amm-container {
  width: min(calc(100% - 48px), var(--amm-container));
  margin-inline: auto;
}

.amm-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 11px 16px;
  color: var(--amm-white);
  background: var(--amm-black);
  font: 700 0.85rem/1.2 Montserrat, Inter, Aptos, "Segoe UI", Arial, sans-serif;
  transform: translateY(-160%);
  transition: transform 300ms ease;
}

.amm-skip-link:focus {
  transform: translateY(0);
}

.amm-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #ededeb;
  background: var(--amm-white);
}

.amm-header__inner {
  display: flex;
  min-height: var(--amm-header-height);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.amm-header__brand {
  display: inline-flex;
  width: 166px;
  min-height: 44px;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.amm-header__brand img {
  width: 100%;
  height: 52px;
  object-fit: contain;
}

.amm-header__brand span {
  font-size: 0.9rem;
  font-weight: 800;
}

.amm-header__lonking {
  margin-right: auto;
  padding-left: 20px;
  border-left: 1px solid var(--amm-line);
  color: var(--amm-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.amm-header__lonking:hover {
  color: var(--amm-red);
}

.amm-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
}

.amm-header__nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-bottom: 2px solid transparent;
  font-size: 0.79rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 300ms ease, color 300ms ease;
}

.amm-header__nav a:hover,
.amm-header__nav a[aria-current="page"] {
  color: var(--amm-red);
  border-color: var(--amm-red);
}

.amm-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.amm-header__cta {
  padding-inline: 16px;
  min-height: 40px;
}

.amm-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--amm-black);
  border-radius: var(--amm-radius);
  background: var(--amm-white);
  font: inherit;
  cursor: pointer;
}

/* Icon-only button: [data-nav-toggle-label] still holds "Abrir
   menú"/"Cerrar menú" (asianmotor.js keeps that text in sync with
   aria-expanded) so screen readers announce the button's purpose and
   state, but it's visually hidden — only the hamburger bars show. */
[data-nav-toggle-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.amm-header__toggle-bars,
.amm-header__toggle-bars::before,
.amm-header__toggle-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--amm-black);
  content: "";
}

.amm-header__toggle-bars {
  position: relative;
}

.amm-header__toggle-bars::before {
  position: absolute;
  top: -5px;
}

.amm-header__toggle-bars::after {
  position: absolute;
  top: 5px;
}

.amm-header__mobile-nav {
  display: none;
  border-top: 1px solid var(--amm-line);
  background: var(--amm-white);
}

.amm-header__mobile-nav[hidden] {
  display: none;
}

.amm-header__mobile-nav:not([hidden]) {
  display: block;
}

.amm-header__mobile-nav ul {
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.amm-header__mobile-nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding-inline: 4px;
  border-bottom: 1px solid var(--amm-line);
  color: var(--amm-black);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.amm-header__mobile-nav a:last-child {
  border-bottom: 0;
}

/* Background highlight (not just a color change) so it's obvious which
   item is under the pointer/finger — :active covers the moment of a tap,
   :hover/:focus-visible cover mouse and keyboard use. */
.amm-header__mobile-nav a:hover,
.amm-header__mobile-nav a:focus-visible,
.amm-header__mobile-nav a:active,
.amm-header__mobile-nav a[aria-current="page"] {
  background-color: var(--amm-surface);
  color: var(--amm-red);
}

.amm-hero {
  position: relative;
  min-height: min(900px, calc(88svh - var(--amm-header-height)));
  overflow: hidden;
  background: var(--amm-surface);
}

.amm-hero__inner {
  position: relative;
  min-height: inherit;
}

.amm-hero__wordmark {
  position: absolute;
  top: 7%;
  right: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.18em;
  color: #dfdfdc;
  font-size: clamp(6rem, 14vw, 12.25rem);
  font-weight: 900;
  letter-spacing: -0.085em;
  line-height: 0.82;
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
  white-space: nowrap;
}

.amm-hero__machine-wrap {
  position: absolute;
  right: -1%;
  bottom: -2%;
  z-index: 2;
  display: flex;
  width: min(72vw, 940px);
  height: 78%;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.amm-hero__machine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  opacity: 0;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  transition: opacity 500ms ease, transform 500ms ease;
}

.amm-hero__machine.is-active {
  opacity: 1;
}

.amm-js .amm-hero__machine.is-active {
  transform: translateY(22px) scale(0.985);
}

.amm-js:not(.amm-ready) .amm-hero__machine.is-active {
  opacity: 0;
}

.amm-js.amm-ready .amm-hero__machine {
  transform: translateY(8px) scale(0.99);
}

.amm-js.amm-ready .amm-hero__machine.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.amm-hero__content {
  position: absolute;
  bottom: clamp(38px, 8vh, 84px);
  left: 0;
  z-index: 3;
  width: min(100%, 470px);
}

.amm-eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  color: var(--amm-black);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.amm-eyebrow span {
  display: none;
}

.amm-hero h1 {
  max-width: 460px;
  margin-bottom: 16px;
  font-size: clamp(2.7rem, 5.3vw, 5rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.amm-hero__description {
  max-width: 390px;
  margin-bottom: 26px;
  color: var(--amm-muted);
  font-size: clamp(0.96rem, 1.5vw, 1.12rem);
}

.amm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.amm-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: var(--amm-radius);
  padding: 10px 17px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: color 300ms ease, background 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.amm-button:hover {
  transform: translateY(-2px);
}

.amm-button--primary {
  color: var(--amm-white) !important;
  background: var(--amm-black);
}

.amm-button--primary:hover {
  color: var(--amm-white) !important;
  background: var(--amm-red);
}

.amm-button--secondary {
  border-color: #a5a5a0;
  color: var(--amm-black);
  background: rgba(255, 255, 255, 0.58);
}

.amm-button--secondary:hover {
  border-color: var(--amm-red);
  color: var(--amm-white);
  background: var(--amm-red);
}

.amm-membership-strip {
  border-block: 1px solid var(--amm-line);
  background: var(--amm-white);
}

.amm-membership-strip__inner {
  display: flex;
  min-height: 106px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.amm-membership-strip p {
  margin: 0;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  letter-spacing: -0.015em;
}

.amm-membership-strip strong {
  font-weight: 850;
}

.amm-corporate {
  border-block: 1px solid var(--amm-line);
  padding-block: clamp(46px, 6vw, 74px);
  background: var(--amm-surface);
}

.amm-corporate__copy {
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.amm-corporate__copy p {
  margin: 0;
  color: var(--amm-muted);
  font-size: clamp(0.88rem, 1.15vw, 1rem);
  line-height: 1.72;
}

.amm-corporate__copy p + p {
  margin-top: 13px;
}

.amm-service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amm-service-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  color: var(--amm-white);
  background: linear-gradient(155deg, #d43243 0%, var(--am-withmory-red) 52%, #681019 100%);
}

.amm-service-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(212, 50, 67, 0.6) 0%, rgba(104, 16, 25, 0.92) 100%);
  content: "";
}

.amm-service-card.is-placeholder::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(70, 5, 12, 0.36));
}

.amm-service-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.5;
}

.amm-service-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  padding: 15px 16px 10px;
}

.amm-service-card h3 {
  max-width: 220px;
  margin: 0;
  color: var(--amm-white);
  font-size: clamp(0.78rem, 1.05vw, 0.96rem);
  letter-spacing: 0.005em;
  line-height: 1.2;
}

.amm-contact {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--amm-white);
}

.amm-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr);
  align-items: start;
  gap: clamp(60px, 10vw, 150px);
}

.amm-contact__inner--minimal {
  grid-template-columns: minmax(0, 680px);
}

.amm-contact h2 {
  margin-bottom: 18px;
  font-size: clamp(3.1rem, 7vw, 6.8rem);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.amm-contact h2.amm-contact__title--compact {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.amm-contact__heading > p:last-child {
  max-width: 480px;
  margin-bottom: 0;
  color: var(--amm-muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.amm-contact__details {
  border-top: 1px solid var(--amm-black);
}

.amm-contact__details dl {
  margin: 0 0 28px;
}

.amm-contact__details dl > div {
  display: grid;
  padding-block: 17px;
  border-bottom: 1px solid var(--amm-line);
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 20px;
}

.amm-contact__details dt {
  color: var(--amm-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amm-contact__details dd {
  margin: 0;
  font-weight: 700;
}

.amm-contact__details dd a {
  text-underline-offset: 4px;
}

.amm-contact-location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 20px;
  margin-bottom: 36px;
}

.amm-contact-location__map {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--amm-line);
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, var(--amm-surface), var(--amm-surface) 10px, var(--amm-white) 10px, var(--amm-white) 20px);
  color: var(--amm-muted);
  text-align: center;
}

.amm-contact-location__pin {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--amm-red);
  color: var(--amm-white);
  font-size: 1.1rem;
  place-items: center;
}

.amm-contact-location__map strong {
  color: var(--amm-black);
  font-size: 0.92rem;
}

.amm-contact-location__map span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.amm-contact-location__card {
  border: 1px solid var(--amm-line);
  border-radius: 6px;
  padding: 24px;
}

.amm-contact-location__card .amm-contact__details {
  margin-bottom: 20px;
  border-top: 0;
}

.amm-contact-location__card dd.is-pending {
  color: var(--amm-muted);
  font-weight: 600;
  font-style: italic;
}

.amm-contact-location__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.amm-contact-location__actions .amm-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.amm-contact__body {
  min-width: 0;
}

.amm-contact__details {
  margin-bottom: 36px;
}

.amm-form {
  position: relative;
  padding-top: 2px;
}

.amm-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}

.amm-field {
  min-width: 0;
}

.amm-field--full {
  grid-column: 1 / -1;
}

.amm-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.76rem;
  font-weight: 800;
}

.amm-field input,
.amm-field textarea {
  width: 100%;
  border: 1px solid #b7b7b2;
  border-radius: var(--amm-radius);
  padding: 12px 13px;
  color: var(--amm-black);
  background: var(--amm-white);
  font: inherit;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.amm-field input {
  min-height: 46px;
}

.amm-field textarea {
  min-height: 124px;
  resize: vertical;
}

.amm-field input:focus,
.amm-field textarea:focus {
  border-color: var(--amm-red);
  box-shadow: 0 0 0 3px rgba(198, 31, 43, 0.12);
  outline: 0;
}

.amm-field--consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.amm-field--consent input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--amm-red);
}

.amm-field--consent label {
  margin: 0;
  color: var(--amm-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.amm-field--consent a {
  text-underline-offset: 3px;
}

.amm-form__submit {
  width: 100%;
  margin-top: 22px;
  border: 0;
  cursor: pointer;
}

.amm-form__status {
  margin: 0 0 20px;
  padding: 13px 15px;
  border-left: 3px solid var(--amm-black);
  color: var(--amm-muted);
  background: var(--amm-surface);
  font-size: 0.82rem;
}

.amm-form__status--success {
  border-color: #287552;
  color: #195a3c;
}

.amm-form__status--error {
  border-color: var(--amm-red);
  color: #9c1420;
}

.amm-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.amm-footer {
  padding-block: 30px;
  border-top: 1px solid var(--amm-line);
  background: var(--amm-surface);
}

.amm-footer__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.amm-footer__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.amm-footer__brand > img {
  width: 132px;
  height: 60px;
  object-fit: contain;
}

.amm-footer strong {
  font-size: 0.86rem;
}

.amm-footer p {
  margin: 5px 0 0;
  color: var(--amm-muted);
  font-size: 0.78rem;
}

/* .amm-footer__submark ("Con el respaldo de Grupo Withmory") stays inline
   with the rest of the sentence on desktop/tablet; only on narrow mobile
   (see @media max-width: 420px) does it drop to its own line, with
   .amm-footer__sep (the " · " joining it to the previous sentence) hidden
   so it doesn't read as an orphaned leading dot. */
.amm-footer__submark {
  display: inline;
}

.amm-footer__meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 22px;
  color: var(--amm-muted);
  font-size: 0.75rem;
}

.amm-footer__meta a {
  text-underline-offset: 3px;
}

/* Discreet, text-sized control — never meant to compete with the
   "Cotizar ahora" CTA. Inherits .amm-footer__meta's color/font-size so it
   reads as part of the same copyright line, not a separate button. */
.amm-footer__back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 10px 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-underline-offset: 3px;
}

.amm-footer__back-to-top:hover {
  color: var(--amm-red);
  text-decoration: underline;
}

.amm-footer__back-to-top span {
  color: var(--amm-red);
}

.amm-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--amm-muted);
  font-size: 0.78rem;
}

.amm-footer__contact a {
  text-underline-offset: 3px;
}

/* Redes sociales (Asian Motor -> Contenido del sitio -> Elementos globales).
   Each icon only renders when its URL is configured -- see
   asianmotor_minimal_render_social_icons() -- so this list may hold
   anywhere from 0 to 4 <li>, no fixed layout assumptions needed. */
.amm-footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amm-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--amm-muted);
  background: var(--amm-surface);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.amm-footer__social a:hover,
.amm-footer__social a:focus-visible {
  color: var(--amm-white);
  background: var(--amm-red);
}

/* Floating WhatsApp button (Asian Motor → Configuración → WhatsApp).
   Deliberately plain: solid black circle, red on hover/focus — no green,
   no shadow, no pulsing/bouncing animation, matching the minimalist
   palette rather than the default plugin-store WhatsApp-widget look. */
/* color: ... !important fights .amm-site a { color: inherit; } — same
   specificity problem .amm-button--primary already solves the same way
   (see its rule above) — a's own color would otherwise always win over a
   single class here since it's one extra type-selector of specificity. */
.amm-whatsapp-float {
  position: fixed;
  bottom: 20px;
  z-index: 60;
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--amm-white) !important;
  background: var(--amm-black);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: background-color 200ms ease;
}

.amm-whatsapp-float:hover,
.amm-whatsapp-float:focus-visible {
  background: var(--amm-red);
  color: var(--amm-white) !important;
}

.amm-whatsapp-float--right {
  right: 20px;
}

.amm-whatsapp-float--left {
  left: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .amm-whatsapp-float {
    transition: none;
  }
}

.amm-button--catalog {
  border-color: var(--amm-red);
  color: var(--amm-black);
  background: transparent;
}

.amm-button--catalog:hover {
  color: var(--amm-white);
  background: var(--amm-red);
}

.amm-equipment-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amm-equipment-card {
  overflow: hidden;
  border: 1px solid var(--amm-line);
  border-radius: 6px;
}

.amm-equipment-card img {
  width: 100%;
  height: 180px;
  padding: 14px;
  object-fit: contain;
  background: var(--amm-surface);
}

/* Dedicated catalog photo (Asian Motor -> Equipos -> "Imagen para el
   catálogo"): fills the whole 180px-tall rectangle edge to edge, no
   padding/background frame around it -- unlike the transparent-cutout
   fallback above, which needs "contain" + padding so the machine doesn't
   get cropped against its own empty margins. */
.amm-equipment-card img.amm-equipment-card__image--cover {
  padding: 0;
  object-fit: cover;
}

.amm-equipment-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.amm-equipment-card__body {
  padding: 16px;
}

.amm-equipment-card__category {
  color: var(--amm-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.amm-equipment-card h3 {
  margin: 4px 0 10px;
  font-size: 1.2rem;
  font-weight: 850;
}

.amm-equipment-card__description {
  margin: 0 0 14px;
  color: var(--amm-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.amm-equipment-card__actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
}

.amm-equipment-card__actions .amm-button {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 12px;
}

.amm-nosotros-intro,
.amm-repuestos-intro {
  padding-block: clamp(48px, 7vw, 84px) clamp(24px, 3vw, 36px);
}

.amm-nosotros-intro h1,
.amm-repuestos-intro h1 {
  max-width: 640px;
  margin-bottom: 14px;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.amm-nosotros-intro p:last-child,
.amm-repuestos-intro p:last-child {
  max-width: 640px;
  color: var(--amm-muted);
  font-size: clamp(0.96rem, 1.4vw, 1.1rem);
}

.amm-nosotros-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.amm-nosotros-intro__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.amm-nosotros-block {
  border-top: 1px solid var(--amm-line);
  padding-block: clamp(46px, 6vw, 74px);
}

.amm-nosotros-block__inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

.amm-nosotros-block--media .amm-nosotros-block__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
}

.amm-nosotros-block--reverse .amm-nosotros-block__inner {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}

.amm-nosotros-block--reverse .amm-nosotros-block__text {
  order: 2;
}

.amm-nosotros-block__text {
  max-width: 560px;
}

.amm-nosotros-block__text h2 {
  margin-bottom: 14px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.amm-nosotros-block__text p {
  margin-bottom: 20px;
  color: var(--amm-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

.amm-nosotros-block__media img {
  width: 100%;
  border-radius: 6px;
}

.amm-nosotros-block__media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Reusable logo presentation box: every corporate logo (Asian Motor,
   Lonking, Grupo Withmory) sits inside one of these instead of a
   per-logo max-width/height rule. Fixed width/height give every logo the
   same visual "zone" to center in — object-fit: contain then scales each
   logo's own aspect ratio to fit inside that zone without distorting or
   cropping it, so logos with very different proportions (a squarish
   badge vs. a wide wordmark) still read as aligned and equally weighted
   on the page, even though their rendered footprints differ. Add a
   modifier class (e.g. .amm-logo-frame--tight) only if one specific logo
   still needs a micro-adjustment after this — don't reintroduce a
   separate hand-tuned rule per logo as the baseline. */
.amm-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 420px);
  height: 160px;
  margin-inline: auto;
}

.amm-logo-frame__image {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
}

.amm-repuestos-options {
  padding-block: clamp(20px, 3vw, 40px) clamp(70px, 9vw, 110px);
}

.amm-repuestos-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.amm-repuestos-option {
  display: flex;
  min-height: 380px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  color: var(--amm-white);
  text-decoration: none;
  background: linear-gradient(155deg, #d43243 0%, var(--am-withmory-red) 52%, #681019 100%);
  transition: transform 300ms ease;
}

.amm-repuestos-option:hover {
  transform: translateY(-2px);
}

.amm-repuestos-option__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(70, 5, 12, 0.36));
}

.amm-repuestos-option__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.4;
}

.amm-repuestos-option__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #d43243 0%, var(--am-withmory-red) 52%, #681019 100%);
  opacity: 0.78;
  content: "";
}

.amm-repuestos-option__body {
  padding: 22px 24px 26px;
}

.amm-repuestos-option__body h2 {
  margin-bottom: 10px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 850;
}

.amm-repuestos-option__body p {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  line-height: 1.6;
}

.amm-repuestos-option__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .amm-hero {
    min-height: min(860px, calc(86svh - var(--amm-header-height)));
  }

  .amm-hero__wordmark {
    top: 10%;
    font-size: clamp(5.3rem, 15vw, 8.8rem);
  }

  .amm-hero__machine-wrap {
    right: -8%;
    width: min(78vw, 800px);
    height: 70%;
  }

  .amm-hero__content {
    width: min(44vw, 430px);
  }

  .amm-contact__inner {
    grid-template-columns: minmax(0, 0.75fr) minmax(300px, 1.25fr);
    gap: 54px;
  }

  .amm-service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .amm-equipment-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 900px) {
  .amm-header__nav,
  .amm-header__lonking {
    display: none;
  }

  .amm-header__toggle {
    display: inline-flex;
  }
}

@media (max-width: 720px) {
  :root {
    --amm-header-height: 66px;
  }

  .amm-container {
    width: min(calc(100% - 32px), var(--amm-container));
  }

  .amm-header__brand {
    width: 126px;
  }

  .amm-header__brand img {
    height: 44px;
  }

  .amm-header__cta {
    padding-inline: 11px;
    font-size: 0.72rem;
  }

  /* Below 720px the hero switches from layered/absolute positioning to a
     normal top-to-bottom flow: wordmark stays as an absolute decorative
     background (it always did), but the machine image and the text content
     become regular stacked blocks so the text is guaranteed to sit below
     the machine -- never on top of it -- no matter how many lines the
     title/description wrap to on a given phone. */
  .amm-hero {
    min-height: 0;
    padding-bottom: 32px;
  }

  .amm-hero__wordmark {
    top: 7%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0;
    font-size: clamp(4.4rem, 22vw, 7.2rem);
    line-height: 0.73;
    white-space: normal;
  }

  .amm-hero__machine-wrap {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100vw, 480px);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 15vw auto 0;
    transform: none;
  }

  .amm-hero__content {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }

  .amm-hero__content .amm-eyebrow,
  .amm-hero__content .amm-actions {
    justify-content: center;
  }

  .amm-hero h1 {
    max-width: 420px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    font-size: clamp(2.15rem, 10vw, 3.25rem);
    line-height: 1.02;
  }

  .amm-hero__description {
    max-width: 330px;
    margin-right: auto;
    margin-bottom: 18px;
    margin-left: auto;
    font-size: 0.9rem;
  }

  .amm-corporate {
    padding-block: 48px;
  }

  .amm-membership-strip__inner {
    min-height: 88px;
    padding-block: 22px;
  }

  .amm-service-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .amm-service-card {
    aspect-ratio: 16 / 7;
  }

  .amm-service-card__content {
    padding: 16px 16px 10px;
  }

  .amm-equipment-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-nosotros-block--media .amm-nosotros-block__inner,
  .amm-nosotros-block--reverse .amm-nosotros-block__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-nosotros-block--reverse .amm-nosotros-block__text {
    order: 0;
  }

  .amm-nosotros-intro__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-nosotros-intro__logo {
    order: -1;
    margin-bottom: 8px;
  }

  .amm-repuestos-options__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-repuestos-option {
    min-height: 320px;
  }

  .amm-contact-location {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-contact-location__map {
    min-height: 200px;
  }

  .amm-contact__inner,
  .amm-contact__inner--minimal {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .amm-footer__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .amm-footer__brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .amm-container {
    width: min(calc(100% - 24px), var(--amm-container));
  }

  .amm-header__brand {
    width: 112px;
  }

  .amm-header__nav {
    gap: 8px;
  }

  .amm-header__nav > a:first-child {
    max-width: 74px;
    line-height: 1.1;
    text-align: center;
  }

  .amm-header__contact {
    padding-inline: 9px;
  }

  .amm-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .amm-button {
    width: 100%;
  }

  .amm-service-card {
    aspect-ratio: 16 / 7;
  }

  .amm-contact__details dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .amm-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .amm-field--full {
    grid-column: auto;
  }

  /* Withmory backing line drops to its own line under "Dealer oficial
     Lonking en el Perú" — the joining " · " only makes sense inline, so
     it's hidden rather than left as an orphaned leading dot. */
  .amm-footer__sep {
    display: none;
  }

  .amm-footer__submark {
    display: block;
  }

  /* "Volver arriba" sits right next to the copyright on the same line
     (order: 2 puts it after the copyright span, which gets order: 1),
     rather than stacked above it like on the tablet breakpoint above —
     the pairing reads as one line: "© 2026 ... S.A.C.  ↑ Volver arriba". */
  .amm-footer__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .amm-footer__meta > span {
    order: 1;
  }

  .amm-footer__back-to-top {
    order: 2;
    padding-block: 4px;
  }
}

@media (max-height: 610px) and (min-width: 721px) {
  .amm-hero {
    min-height: 600px;
  }

  .amm-hero__wordmark {
    top: 5%;
  }

  .amm-hero__content {
    bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .amm-site *,
  .amm-site *::before,
  .amm-site *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .amm-js .amm-hero__machine,
  .amm-js .amm-hero__machine.is-active,
  .amm-js.amm-ready .amm-hero__machine,
  .amm-js.amm-ready .amm-hero__machine.is-active {
    transform: none;
  }

  .amm-js .amm-hero__machine {
    opacity: 0;
  }

  .amm-js .amm-hero__machine.is-active {
    opacity: 1;
  }
}