/* Motion belongs to the brand ribbons; the product and copy remain stable. */
.intro-surface { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.hero { position: relative; background: transparent; overflow: visible; }
.intro-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 calc(100% - 140px), transparent); mask-image: linear-gradient(#000 calc(100% - 140px), transparent); }
.intro-background svg { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.intro-mobile { display: none; }
/* One background spans every section: no independently cropped decorations. */
.equipment, .experience, .quotation { background: transparent; }
.equipment::before, .equipment::after { display: none; }
.experience-desktop, .experience-mobile, .quotation-decor, .quotation-mobile-decor { display: none; }
.product > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.device-display { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-actions, .equipment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.equipment-actions { justify-content: center; margin-top: 44px; }
.equipment-actions .equipment-cta { margin: 0; }
.whatsapp-link, .quotation-contacts .whatsapp-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 16px 22px; border-radius: 10px; background: #a50e24; color: #fff; text-decoration: none; font: 600 16px/1.5 Montserrat, sans-serif; }
.whatsapp-link svg { width: 23px; height: 23px; flex-shrink: 0; }
.whatsapp-link:hover, .quotation-contacts .whatsapp-link:hover { background: #800b1c; text-decoration: none; }
.quotation-contacts .whatsapp-link { justify-self: start; margin-bottom: 8px; }
.whatsapp-floating { position: fixed; z-index: 50; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 14px 20px; border-radius: 999px; background: #087f5b; color: #fff; box-shadow: 0 6px 24px #0b3c3333; border: 2px solid #fff; text-decoration: none; font: 600 16px/1.5 Montserrat, sans-serif; }
.whatsapp-floating svg { width: 28px; height: 28px; flex-shrink: 0; }
.whatsapp-floating:hover { background: #066447; }
.whatsapp-link:focus-visible, .whatsapp-floating:focus-visible { outline: 3px solid #028ec3; outline-offset: 4px; }
.quotation-inner { padding-bottom: 110px; }
.intro-surface .ribbon { transform-box: fill-box; transform-origin: center; animation: ribbon-travel 4.8s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; }
.intro-surface .ribbon-secondary { animation-name: ribbon-counterflow; animation-duration: 6.4s; animation-delay: -3.2s; }
@keyframes ribbon-travel {
  from { transform: translate(-48px, -80px) rotate(-2deg); }
  to { transform: translate(62px, 95px) rotate(2deg); }
}
@keyframes ribbon-counterflow {
  from { transform: translate(48px, 72px) rotate(1.5deg); }
  to { transform: translate(-72px, -90px) rotate(-1.5deg); }
}
@keyframes ribbon-travel-mobile {
  from { transform: translate(-22px, -42px) rotate(-2deg); }
  to { transform: translate(28px, 52px) rotate(2deg); }
}
@keyframes ribbon-counterflow-mobile {
  from { transform: translate(24px, 38px) rotate(1.5deg); }
  to { transform: translate(-36px, -48px) rotate(-1.5deg); }
}
.intro-surface.motion-offscreen .ribbon { animation-play-state: paused; }
.certifications { position: relative; background: transparent; padding: 66px 40px 96px; }
.certifications-inner { max-width: 1200px; margin: 0 auto; }
.certifications-heading { text-align: center; }
.certifications h2 { max-width: 880px; margin: 0 auto; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.22; font-weight: 700; color: #101a29; }
.certifications-heading .equipment-accent { margin: 24px auto; }
.certifications-subtitle { margin: 0; font-size: 20px; line-height: 1.6; color: #526170; }
.certifications-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 60px; }
.credential { text-align: center; min-width: 0; }
.credential + .credential { border-left: 1px solid #e2e9ee; padding-left: 80px; }
.credential-logo-area { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
/* Display the original supplied marks, without redrawing or altering them. */
.credential-logo { position: relative; overflow: hidden; width: 100%; max-width: 440px; aspect-ratio: 900 / 285; background: #fff; mix-blend-mode: multiply; }
.credential-logo img { position: absolute; width: 273.1112%; max-width: none; height: auto; left: -16.1112%; top: -214.0351%; }
.credential-logo.pjla { max-width: 320px; aspect-ratio: 670 / 285; }
.credential-logo.pjla img { width: 366.8657%; left: -208.9553%; }
.credential h3 { margin: 0 0 20px; font-size: 28px; line-height: 1.3; font-weight: 700; }
.credential-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; font-size: 18px; line-height: 1.6; color: #526170; }
.accreditation-label { display: inline-block; padding: 20px 26px; border-radius: 10px; background: #1d293b; color: #fff; font-size: 17px; line-height: 1.5; margin: 0; }
@media (min-width: 768px) and (max-width: 1000px) {
  .certifications-grid { gap: 36px; }
  .credential + .credential { padding-left: 36px; }
}
@media (max-width: 767px) {
  .hero-actions, .equipment-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .equipment-actions { margin-top: 20px; }
  .whatsapp-link, .quotation-contacts .whatsapp-link { min-height: 56px; width: 100%; padding: 14px 16px; }
  .whatsapp-floating { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 58px; padding: 13px; }
  .whatsapp-floating span { display: none; }
  .quotation-inner { padding-bottom: 96px; }
  .intro-background { top: var(--intro-art-top, 580px); }
  .intro-desktop { display: none; }
  .intro-mobile { display: block; }
  .intro-surface .ribbon { animation-name: ribbon-travel-mobile; }
  .intro-surface .ribbon-secondary { animation-name: ribbon-counterflow-mobile; }
  .certifications { padding: 38px 24px 60px; }
  .certifications-subtitle { font-size: 17px; }
  .certifications-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .credential + .credential { border-left: none; border-top: 1px solid #e2e9ee; padding: 40px 0 0; }
  .credential-logo-area { height: auto; min-height: 100px; margin-bottom: 24px; }
  .credential-logo.pjla { max-width: 270px; }
  .credential h3 { font-size: 25px; }
  .credential-list { font-size: 16px; }
  .accreditation-label { font-size: 16px; padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-surface .ribbon { animation: none; will-change: auto; }
}

/* HubSpot owns the embedded form layout and validation. */
#hubspot-form-container { min-width: 0; }
#hubspot-form-container .hs-form-frame { width: 100%; }
#hubspot-form-container iframe { max-width: 100%; border: 0; }

/* Formulario propio (EmailJS) */
.quotation-card #quotation-preview-form .q-field.full { grid-column: 1 / -1; }
.quotation-card .q-field textarea { display: block; width: 100%; min-height: 110px; resize: vertical; border: 1px solid #ced9e1; border-radius: 8px; background: #fafcfd; padding: 12px; font: 400 16px Montserrat, sans-serif; color: #172332; }
.quotation-card .q-field textarea:focus-visible, .quotation-card .q-field input:focus-visible { outline: 3px solid #028ec3; outline-offset: 3px; }
.quotation-card .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quotation-card button:disabled { opacity: .65; cursor: wait; }
.form-status { min-height: 23px; font-weight: 600; }
.form-status.ok { color: #1a7f37; }
.form-status.error { color: #c90923; }
@media (max-width: 640px) { .quotation-card #quotation-preview-form { grid-template-columns: 1fr; } }

/* Enlaces al sitio principal (etalonet.com.mx) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a.brand.etalonet { display: block; border-radius: 6px; }
a.brand.etalonet:focus-visible { outline: 3px solid #028ec3; outline-offset: 4px; }

.experience-link { position: absolute; left: 690px; top: 548px; white-space: nowrap; color: #172332; font: 600 16px/24px Montserrat, sans-serif; text-decoration: underline; text-decoration-color: #ed1026; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.experience-link:hover { color: #c90923; }
.experience-link:focus-visible { outline: 3px solid #028ec3; outline-offset: 4px; border-radius: 4px; }

.site-footer { background: #172332; color: #c5d0d9; font: 400 15px/1.6 Montserrat, sans-serif; }
.site-footer-inner { max-width: 1440px; margin: auto; padding: 40px 120px; display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; }
.site-footer-about p { margin: 0; }
.site-footer-about strong { color: #fff; font-weight: 700; }
.site-footer-main { color: #fff; font-weight: 600; font-size: 17px; text-decoration: underline; text-decoration-color: #ed1026; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.site-footer-main:hover { color: #ffd5da; }
.site-footer-legal { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid #2c3b4d; font-size: 14px; color: #8fa0b0; }
.site-footer-legal a { color: #c5d0d9; }
.site-footer-legal a:hover { color: #fff; }
.site-footer a:focus-visible { outline: 3px solid #4fc3f0; outline-offset: 4px; border-radius: 4px; }

@media (min-width: 768px) and (max-width: 1279px) {
  .experience-link { left: 50%; top: 625px; }
  .site-footer-inner { padding: 36px 48px; }
}
@media (max-width: 767px) {
  .experience-link { position: relative; left: auto; top: auto; display: block; width: 100%; margin-top: 18px; text-align: center; white-space: normal; }
  .site-footer-inner { max-width: 560px; padding: 32px 24px 104px; grid-template-columns: 1fr; gap: 16px; }
}